Shadcn.io is not affiliated with official shadcn/ui
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.
Flip Button preview
Interactive button that flips in 3D space to reveal alternate content on hover. Features customizable flip direction (top, bottom, left, right), spring-based physics for natural movement, and independent styling for front and back faces. Built with Motion for React using perspective transforms and backface visibility. Perfect for call-to-action buttons, toggle states, or any interaction that benefits from revealing hidden content with satisfying 3D motion. Built on top of the shadcn Button so every variant and size you already use just works.
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 flip-button button into my projectRelated Components
Depth Button
Tactile 3D press
Magnetic Button
Cursor magnetic pull
Ripple Button
Material click ripple
Glow Border Button
Continuous rotating glow
Pill Button
Pill with inset highlight
Success Button
Success checkmark state
FAQ
Was this page helpful?
Sign in to leave feedback.
Download Button
State-machine download button with a real progress fill, status icon swap, and auto-reset for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
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.