Browse components
Card Flip
A 3D card that springs over to reveal its back on hover or click, with Enter/Space to toggle.
Installation
npx shadcn@latest add @glint-ui/card-flipFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/card-flip.json
Usage
import { CardFlip } from "@/components/ui/card-flip";
<CardFlip
front={<img src="/kyoto.jpg" alt="Kyoto" />}
back={<TripDetails />}
trigger="click"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| front | ReactNode | — | Front face content. |
| back | ReactNode | — | Back face content. |
| trigger | "hover" | "click" | "hover" | What flips the card. |
| direction | "horizontal" | "vertical" | "horizontal" | Flip axis. |
| duration | number | 700 | Flip duration in ms. |
| width | number | 280 | Card width in px. |
| height | number | 380 | Card height in px. |
| label | string | — | Accessible name; defaults to the visible face text. |
| className | string | — | Extra classes for the root element. |