Card Stack
Swipeable review deck: drag the top card past a threshold with tilt and side stamps, or use buttons and arrow keys, with depth-stacked cards, undo and an empty state.
Preview
IA
Ines AlvarezOct 30 · Team meals
Harbor Street Café$86.40Sprint retro lunch, 6 people
Lunch set ×672.00
Coffee ×614.40
Total86.40
Drag the card, use the buttons, or focus the stack and press ← →
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | T[] ({ id: string }) | — | Cards in order; the first is on top. |
| renderCard | (item: T) => ReactNode | — | Card content; the stack draws the raised card around it. |
| getLabel | (item: T) => string | item.id | Spoken name for the card and announcements. |
| onSwipe | (item, "left" | "right") => void | — | Called on every decision: drag, button or arrow key. |
| onUndo | (item, direction) => void | — | Called with the card brought back by undo. |
| leftLabel / rightLabel | string | "Skip" / "Keep" | Drag stamps and button names for each side. |
| threshold | number | 110 | Drag distance in px that commits a swipe. |
| depth | number | 3 | Cards drawn behind the top one. |
| empty | ReactNode | — | Shown when every card is done. |
| label | string | "Review queue" | Accessible name of the stack region. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.