Flip Card
A two-sided card that flips in 3D on hover or click. Can be controlled.
Import
import { FlipCard } from "@igorao79/uivix";Examples
Hover & click
Left flips on hover, right flips vertically on click
🃏Hover me
Hello from the other side 👋
🃏Click me
Click again to flip back
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| front | ReactNode | - | Front face |
| back | ReactNode | - | Back face |
| trigger | "hover" | "click" | "hover" | What flips the card |
| direction | "horizontal" | "vertical" | "horizontal" | Flip axis |
| flipped | boolean | - | Controlled state |
| onFlipChange | (flipped: boolean) => void | - | Called when the card flips |
| duration | number | 600 | Animation duration in ms |
| className | string | - | Size and other classes (default h-56 w-80) |