Card Stack
Deck that shuffles the top card to the back on a timer.
- 1.2 KB gzipped
- Deps: motion/react
- Reduced-motion safe
- Base UI & Radix compatible
Preview
“Swapped three separate animation libraries for Velora and the bundle got smaller.”
Dana Whitfield
“The size on every docs page is the reason we shipped it without a review meeting.”
Marco Elias
“Reduced-motion worked out of the box. That never happens.”
Priya Raman
Installation
pnpm dlx shadcn@latest add https://paulkeys.org/r/card-stack.jsonAdds components/velora/card-stack.tsx, installs motion.
Props
| Prop | Type | Default |
|---|---|---|
items*Each entry becomes one card; the first is on top | { id: string | number; content: React.ReactNode }[] | — |
intervalSeconds between automatic shuffles; 0 disables | number | 4 |
offsetVertical offset per card, in px | number | 12 |
className | string | — |
Accessibility
- Reduced motion
- The deck does not auto-shuffle; the first card stays on top. With motion allowed, shuffling pauses while the pointer is over the deck, while focus is inside it, and while the tab is hidden.
- Keyboard
- Not interactive itself. Links or buttons inside buried cards stay in the tab order while visually covered.
- Screen readers
- All cards are in the DOM in source order and are read in full regardless of which is on top; nothing is announced on shuffle.