Toss Deck
A card deck with weight — drag the top card past the threshold and it flies off with a spin, then slips back under the pile.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/toss-deck.json▸ Or install manually
- Install dependencies:
pnpm add motion - Copy the source from the Code tab above.
- Place it at
components/mellow/toss-deck.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode[] | — | Card faces, front of deck first. |
| width | number | 320 | Card width in px. |
| height | number | 420 | Card height in px. |
| peek | number | 2 | Cards visible behind the top card. |
| counter | boolean | true | Show the 01 / 05 counter under the deck. |
| onChange | (index: number) => void | — | Called with the item index that lands on top after a toss. |
| className | string | — | Additional CSS classes. |