Shadcn.io is not affiliated with official shadcn/ui
Flow Button
Button with a hover-driven 180° rotating conic-gradient border for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Flow Button preview
Stable until it isn't. At rest the button sits inside a static primary-tinted ring; on hover an underlying conic gradient rotates 180° underneath the button's clipped border, sweeping a thin gap of color around the perimeter like wind passing through. The motion is hover-driven rather than continuous, so the button feels calm by default but reactive on intent. Perfect for navigation primary actions, interactive cards, or anywhere a button should "answer back" when you reach for it.
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 flow-button button into my projectRelated Components
Glow Border Button
Continuous rotating glow
Border Trace Button
SVG perimeter trace
Shimmer Button
Animated shimmer ring
Neon Button
Glowing neon halo
Shine Button
Diagonal light sweep
Stitch Button
Dashed stitched border
FAQ
Was this page helpful?
Sign in to leave feedback.
Flip Button
3D flip button with front/back states and spring animations for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
GitHub Stars Button
GitHub stars button with live star count and animated sliding number display for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.