Shadcn.io is not affiliated with official shadcn/ui
Swipe Button
Button with smooth color swipe that slides across on hover for React.
Swipe Button preview
Clean and satisfying. Hover and watch a color wave sweep across the button from left to right, revealing a contrasting background underneath. It's that classic "fill" effect done right—smooth, crisp edges, perfect timing. Works great for primary CTAs where you want clear hover feedback without being flashy. The swipe direction is reversible too. Simple effect, maximum impact.
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 swipe-button button into my projectRelated Components
Outline Fill Button
Fill rises from bottom
Liquid Button
Fluid fill animation
Slide Reveal Button
Layers slide apart
Shimmer Button
Flowing shimmer
Shine Button
Diagonal light sweep
Gradient Button
Shifting gradient
FAQ
Was this page helpful?
Sign in to leave feedback.