Installation
Usage
import { CardStack } from "@/components/card-stack"
export function Picks() {
return (
<CardStack
className="w-full max-w-xs"
label="Places to visit"
>
<article aria-label="Lisbon" className="rounded-2xl border bg-card p-6">Lisbon</article>
<article aria-label="Kyoto" className="rounded-2xl border bg-card p-6">Kyoto</article>
<article aria-label="Oaxaca" className="rounded-2xl border bg-card p-6">Oaxaca</article>
</CardStack>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The cards, top first; give each an aria-label so it can be announced. |
| onSwipe | (index, direction) => void | — | A card was thrown left or right; index is its place among children. |
| onUndo | (index: number) => void | — | Undo brought a card back. |
| leftAction / rightAction | string | "Skip" / "Keep" | Labels for the two directions: buttons, stamps and announcements. |
| loop | boolean | false | Thrown cards go to the back instead of leaving. |
| visible | number | 2 | How many cards show behind the top one. |
| controls | boolean | true | Show the two buttons and Undo under the stack. |
| empty | ReactNode | "That's every card." | Shown when every card has gone. |
| label | string | "Cards" | Accessible name of the stack. |
Accessibility
- The top card is focusable and announced with its position ("Desert bloom, 2 of 5"); ← and → throw it, Backspace or Ctrl/⌘+Z undo.
- Every throw is also a real button, so touch screen-reader and switch users never need to drag.
- Each throw and undo is announced in a polite live region ("Keep: Desert bloom").
- Cards waiting behind are inert and hidden from assistive technology.
- Under prefers-reduced-motion cards leave and arrive without flying; dragging still follows your hand.
Changelog
- v1.0.0Latest
First release.