A deck of cards where you drag or flick the top card away with momentum and it drops to the back. Arrow keys cycle too.
Write down one thing you noticed before checking your phone.
npx shadcn@latest add https://hyperblur.dev/r/card-stack-drag.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/card-stack-drag.tsx.
import { CardStackDrag } from "@/components/hyperblur/card-stack-drag"
<CardStackDrag cards={[{ title: "Slow mornings", meta: "Prompt 01" }, { title: "The long way", meta: "Prompt 02" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| cards | { title: string; meta?: string; text?: string; color?: string }[] | 5 sample cards | Cards in the deck. The one at the current index is on top. |
| value | number | Controlled index of the top card. Pair with onChange. | |
| defaultValue | number | 0 | Initial top card when uncontrolled. |
| onChange | (index: number) => void | Called with the index of the new top card after each flick or key press. | |
| ratio | number | 1.7 | Width divided by height of the area the deck occupies. |
| idle | boolean | true | Flick the top card away on a timer until the pointer arrives. Uncontrolled only. |