The FlipCard component creates an elegant, Apple-inspired interactive card that flips to reveal additional content. It features smooth animations, subtle gradients, and a clean design that's perfect for showcasing key information or features.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/flip-card.jsonEverything Flip Card accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| frontContent (required) | { title: string; subtitle?: string } | No default | Content to display on the front side of the card |
| backContent (required) | { title: string; description: string } | No default | Content to display on the back side of the card |
| width | string | '300px' | Width of the flip card |
| height | string | '200px' | Height of the flip card |
| flipDirection | 'horizontal' | 'vertical' | 'horizontal' | Direction of the flip animation |
| triggerMode | 'hover' | 'click' | 'hover' | Event that triggers the flip animation |
Required.
Hover to learn more