Browse components
Flip Stack
A pile of cards where clicking tosses the top card up, flips it end over end and drops it behind the pile as the rest step forward.
Installation
npx shadcn@latest add @glint-ui/flip-stackFirst 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-stack.json
Usage
import { FlipStack } from "@/components/ui/flip-stack";
<FlipStack
cards={photos.map((src) => <img src={src} alt="" className="size-full object-cover" />)}
back={<CardBack />}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| cards | ReactNode | — | Array of card faces, top first. |
| back | ReactNode | — | Shared back face shown mid-flip. |
| offset | number | 16 | Px each card behind peeks out. |
| scaleStep | number | 0.06 | Scale lost per card of depth. |
| visible | number | 3 | Cards visible in the pile. |
| lift | number | 0.4 | Toss height as a fraction of card height. |
| duration | number | 0.9 | Seconds per flip. |
| width | number | 240 | Card width in px. |
| height | number | 300 | Card height in px. |
| label | string | — | Accessible name for the stack. |
| onChange | ReactNode | — | Called with the index of the new top card. |
| className | string | — | Extra classes for the root element. |