Browse components
Flip Card
A small flash card that lifts off the table and springs over toward the side you tap, with a shadow that shrinks mid-turn. Enter or Space flips it too.
Installation
npx shadcn@latest add @glint-ui/flip-cardFirst 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/flip-card.json
Usage
import { FlipCard } from "@/components/ui/flip-card";
<FlipCard
front="What does the “C” in CSS stand for?"
back="Cascading."
onFlip={(showingBack) => track(showingBack)}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| front | string | "What does the “C” in CSS stand for?" | Front face content. |
| back | string | "Cascading. Later rules win when specificity ties." | Back face content. |
| frontLabel | string | "Question" | Caption on the front. |
| backLabel | string | "Answer" | Caption on the back. |
| color | string | "#818cf8" | Accent color of the back face. |
| defaultFlipped | boolean | false | Start showing the back. |
| flipped | ReactNode | — | Controlled flipped state. Pair with onFlip. |
| onFlip | ReactNode | — | Called with the new state on every flip. |
| className | string | — | Extra classes for the root element. |