Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: React Button Components
Next: Blur Button

Arrow Button

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

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.

Arrow Button preview

Loading...
Scroll to load preview

Installation

Install
Pro button

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

React Button Components

50+ animated button components for React. Shimmer, glow, magnetic, confetti, 3D effects. Copy-paste into your Next.js project.

Blur Button

Button with text that sharpens into focus on hover for React.