Make your AI a shadcn expert

Flip Button

3D flip button with front/back states and spring animations for React applications.

Flip Button preview

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

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 project

FAQ

Was this page helpful?

Sign in to leave feedback.