Shadcn.io is not affiliated with official shadcn/ui
Arrow Button
Button with an animated arrow that slides in on hover for React.
Arrow Button preview
The classic "learn more" button, perfected. Hover and an arrow smoothly slides in from the left, 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. 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
Swipe Button
Color swipe fill
Shimmer Button
Flowing shimmer
Outline Fill Button
Fill from bottom
Underline Button
Growing underline
Highlight Button
Sliding highlight bar
Slide Reveal Button
Layers slide apart
FAQ
Was this page helpful?
Sign in to leave feedback.