Analytics
Realtime insight
Card Stack
A draggable deck — throw or click the top card to send it to the back.
motiondraga11y
Styled with ONONC's design tokens — shadcn add installs them for you.
Customize
Cards
Card width300px
Card height200px
Stack offset10px
Corner radius18px
Interaction
Throw distance160px
Drag past this to send the top card back.
Random rotation
Click to cycle
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | CardStackItem[] | gradient set | Cards in the stack, front to back ({ title, subtitle?, background? }). |
cardWidth | number | 300 | Card width in pixels. |
cardHeight | number | 200 | Card height in pixels. |
sensitivity | number | 160 | Drag distance (px) past which the top card is sent to the back. |
offset | number | 10 | Positional offset per card deeper in the stack, in pixels. |
randomRotate | boolean | true | Apply a small, deterministic per-card rotation. |
cycleOnClick | boolean | false | Clicking the top card also sends it to the back. |
radius | number | 18 | Card corner radius in pixels. |
label | string | "Card stack" | Accessible name for the stack. |