A stack or a loose pile of cards. Throw the front card in any direction and it tucks in at the back.
pnpm dlx shadcn@latest add @latheui/card-stackPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Card Stack is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
Also accepts native div attributes. Size the stack with className; every card fills it.
| Prop | Type | Default | Description |
|---|---|---|---|
| items* (required) | T[] | — | The cards, front first. |
| getId* (required) | (item: T) => string | — | A stable key per card. |
| getLabel* (required) | (item: T) => string | — | Announced when the card comes to the front. |
| renderCard* (required) | (item: T) => ReactNode | — | A card's content. It is clipped to the card's rounded corners. |
| label* (required) | string | — | Accessible name for the stack. |
| index | number | — | Controlled index of the front card. |
| defaultIndex | number | 0 | Initial front card when uncontrolled. |
| onIndexChange | (index: number) => void | — | Called when another card comes to the front. |
| depth | number | 2 | Cards visible behind the front one. |
| layout | "stack" | "pile" | "stack" | A neat stack that rises behind the front card, or a loose pile like prints on a table. |
| offset | number | 12, or 14 in a pile | Pixels each card behind rises. In a pile, how far cards stray. |
| scaleStep | number | 0.065 | How much smaller each card behind gets. |
| rotation | number | 5 | Degrees cards behind turn, alternating sides. In a pile, the most a card turns. |
| spreadOnHover | boolean | true | Fans the stack a little under a mouse pointer. |
| throwDistance | number | 80 | Pixels a drag must travel to throw the card. A flick faster than 500px/s throws it sooner. |
| curve | Curve | soft spring | How cards move between places. Any curve from the Animation Lab. |
| duration | number | — | Milliseconds, for curves that are not springs. |
<CardStack layout="pile" depth={4} rotation={6} className="h-72 w-60" {...props} /><CardStack offset={8} scaleStep={0.04} curve={{ type: "spring", stiffness: 420, damping: 22 }} {...props} /><CardStack depth={4} className="h-56 w-72" {...props} />