Card Stack

Deck that shuffles the top card to the back on a timer.

“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://velora.colorlib.com/r/card-stack.json

Adds components/velora/card-stack.tsx, installs motion.

Prop	Type	Default
`items*` Each entry becomes one card; the first is on top	`{ id: string \| number; content: React.ReactNode }[]`	`—`
`interval` Seconds between automatic shuffles; 0 disables	`number`	`4`
`offset` Vertical offset per card, in px	`number`	`12`
`className`	`string`	`—`

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.