Make your AI a shadcn expert

Arrow Button

Button with an animated arrow that slides in on hover for React.

Arrow Button preview

Scroll to load 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 project

FAQ

Was this page helpful?

Sign in to leave feedback.