Arrow link
A read-more link whose trailing arrow slides forward on hover.
API reference
Components
<ArrowNudgeActiveProvider />
Supplies active to descendant ArrowNudge instances. Used by ArrowNudgeSurface, ArrowLink, and TiltCard when driving a nudge.
<ArrowIcon />
The bare right-arrow glyph, inlined as currentColor strokes (no icon dependency). Decorative (aria-hidden); the link label beside it carries the meaning. Compose it directly when you want the arrow with no nudge.
size?
The glyph's width and height in px. Defaults to 16.
className?
Merged onto the <svg>. The stroke is currentColor, so colour comes from the surrounding text colour, never a prop.
<ArrowNudge />
The trailing arrow as a variant-driven nudge, for composing INSIDE a larger interactive element you already own. It slides forward by the theme's hover travel whenever the enclosing ArrowNudgeSurface is hovered or keyboard-focused, and settles back on the snap spring. Under reduced motion the travel collapses to 0, so it holds still. Decorative (aria-hidden). For a standalone ghost link that drives itself, reach for ArrowLink instead.
size?
The arrow glyph size in px, forwarded to ArrowIcon. Defaults to 16.
className?
Merged onto the wrapping motion.span (the nudged element).
active?
Optional explicit active override. When omitted, reads from the nearest ArrowNudgeSurface (or ArrowLink, which provides one).
<ArrowNudgeSurface />
A motion.a wrapper that drives every ArrowNudge inside it on hover and keyboard focus. Use when the whole block is the link and the arrow sits after a label inside.
<ArrowLink />
The self-contained ghost link: a real <a> whose own hover and keyboard focus both slide the trailing arrow forward (through ArrowNudge) and shift the link colour. Colour is a tone; timing and travel read the theme. Under reduced motion the arrow holds still while the colour still responds.
children?
The link label (any inline content). It carries the meaning, so the trailing arrow stays decorative; give an icon-only label your own aria-label via className-adjacent markup instead.
href?
The destination. Rendered as a real <a href>.
tone?
Which semantic colour the link reads. Defaults to muted.
target?
Anchor target, e.g. _blank.
rel?
Anchor rel, e.g. noreferrer.
onClick?
Click handler, if the link also drives in-page behaviour.
className?
Merged onto the <a>. Add w-fit, extra spacing, or a size override here; colour comes from tone, never a class.
ref?
Ref to the underlying anchor (React 19 ref-as-prop).
Hooks
useArrowNudgeActive
Hover/focus wiring for a block that should drive descendant ArrowNudge instances. Returns active (for manual composition) and gestureProps to spread onto the interactive motion ancestor.
useArrowNudgeActive(): voidFeatured in
See the arrow link composed into full sections.
