Motion

ArrowLink

A text link with an arrow that travels and a brand rule that wipes in on hover and focus. Renders an a, or your router's link with asChild.

view .md

Preview

read the docs github

Installation

terminal

bash

npx @entrepta/cli@latest add arrow-link

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

arrow-link.tsx

tsx

import { ArrowLink, ArrowAffordance } from "@/components/entrepta/arrow-link"

<ArrowLink href="/docs">read the docs</ArrowLink>
<ArrowLink href="https://github.com/you" external>github</ArrowLink>
<ArrowLink asChild><Link href="/blog">all posts</Link></ArrowLink>

// a card that is one big link: the footer answers the card's hover
<a href="/post" className="group/arrow">
  <ArrowAffordance>read</ArrowAffordance>
</a>

Props

Prop	Type	Default	Description
external	boolean	false	Up-right arrow, opens in a new tab
asChild	boolean	false	Renders your router's link