Flip Card
A 3D animated flip card component that flips on hover, customizable by direction, rotation style, and transition duration.
Examples
Flip Card Basic
Basic ussage using the default values.
BLOOM
Explore More
Dive into our exclusive collection of hand-crafted visuals.
Flip Card Custom
Example using vertical flip direction and reverse rotation
Build Mode
We used to look up at the sky and wonder.
npm run devShip Mode
Now we just look down and worry. Time to launch.
git push origin mainInstallation
npx shadcn@latest add "https://ui.rechesoares.com/registry/flip-card.json"
Component Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| front | ReactNode | - | Yes | The content to be displayed on the front side of the card. |
| back | ReactNode | - | Yes | The content to be displayed on the back side of the card. |
| duration | number | 0.3 | No | Duration of the flip animation in seconds. |
| flipDirection | 'horizontal' | 'vertical' | 'horizontal' | No | Direction of the flip. |
| flipRotation | 'forward' | 'reverse' | 'forward' | No | Flip rotation direction. |
| className | string | - | No | Custom class name for the outer card container. |
| panelClassName | string | - | No | Custom class name for both front and back panels. |