Shadcn.io is not affiliated with official shadcn/ui
Arrow Button
Button with an animated arrow that slides in on hover for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on base-ui Button.
Arrow Button preview
The classic "learn more" button, perfected. Hover and an arrow smoothly slides in, nudging the text aside. It signals "this goes somewhere" without being pushy. The animation is quick and satisfying—in on hover, out on leave. Perfect for CTAs, navigation links, read-more buttons, or any action that takes users forward. Built on top of the base-ui shadcn Button so every variant and size you already use just works—simple, effective, timeless.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this button for you — no copy-paste, no CLI:
use shadcnio to install the arrow-button button into my projectRelated Components
Underline Button
Growing underline
Pill Button
Pill with inset highlight
Depth Button
Tactile 3D press
Gradient Button
Shifting gradient bg
Shine Button
Diagonal light sweep
Magnetic Button
Cursor magnetic pull
FAQ
Was this page helpful?
Sign in to leave feedback.
Button Components
50+ animated button components for React. Shimmer, glow, magnetic, confetti, 3D effects. Copy-paste into your Next.js project.
Border Trace Button
Button with an animated border that traces around the perimeter on hover for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.