Animated Arrow

A copy-paste React animated arrow for buttons and links with a CSS slide transition, keyboard focus feedback, and reduced-motion support.

Loading…

Animated Arrow is a lightweight, copy-paste React component for adding directional feedback to a button or link. It clips two Lucide arrow icons inside a compact viewport, then slides the track when the parent is hovered or receives visible keyboard focus. The effect uses Tailwind CSS rather than a JavaScript animation runtime, so it is easy to restyle for shadcn/ui projects.

Features

Adds a sliding arrow transition to React buttons and links.
Uses a named Tailwind group so the trigger stays scoped to this component.
Accepts a className for size, color, rotation, and background changes.
Mirrors hover feedback for keyboard focus.
Disables the movement when the user prefers reduced motion.

Installation

pnpm dlx shadcn@latest add @tentui/animated-arrow

Usage

Add group/animated-arrow to the parent that should trigger the animation.

import { AnimatedArrow } from "@/components/animated-arrow";

<button
  type="button"
  className="group/animated-arrow inline-flex items-center gap-2"
>
  Learn more
  <AnimatedArrow />
</button>

Use the component inside an interactive parent such as a link or button. The arrow is decorative and hidden from assistive technologies, so the parent still needs visible text or an accessible label that describes the action.

How the animation works

The component places two identical arrows on a track that is twice as wide as the visible container. The track begins translated by half its width. Hovering or focusing the named parent group returns the track to its starting position, which makes one arrow replace the other without changing layout.

Because the transition is CSS-only, you can tune its duration and easing in the component source. Keep the parent class group/animated-arrow; a plain group will not activate the scoped variants used by the arrow.

For more patterns that respect motion preferences, read How to Add Animations to shadcn/ui Components.

API reference

PropType