Card stack

Review a deck one card at a time, with a throw and an undo.

$npx shadcn@latest add @silicon-ui/card-stack

gesturemotiontriage

Installation

$npx shadcn@latest add @silicon-ui/card-stack

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/card-stack/card-stack.tsx
- components/silicon-ui/card-stack/card-stack.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { CardStack } from "@/components/silicon-ui/card-stack/card-stack";

Prop	Type	Default
`items*`	`T[]`	—
`getKey*`	`(item: T) => string`	—
`getLabel*` A short name for the card, used in its accessible label and announcements, such as "Lisbon".	`(item: T) => string`	—
`renderCard*`	`(item: T) => ReactNode`	—
`onDecide`	`(item: T, decision: CardDecision) => void`	—
`onUndo`	`(item: T, decision: CardDecision) => void`	—
`onReset`	`() => void`	—
`labels` Action names for each side, used on the buttons and the stamps that appear while dragging.	`{ left: string; right: string }`	`{ left: "Pass", right: "Keep" }`
`outcomes` Past tense of each action for announcements, such as "skipped" and "shortlisted".	`{ left: string; right: string }`	—
`label` Accessible name for the stack.	`string`	`"Cards"`
`renderEmpty` Shown once every card has been decided. Receives a function that brings all cards back.	`(reset: () => void) => ReactNode`	—
`className`	`string`	—