The CardStack component deals your content as a deck: drag the top card aside to throw it away, the cards behind rise a step, and the dismissed card loops around to the back.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/card-stack.jsonEverything Card Stack accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | No default | One card per child, each given the stack's card chrome |
| visible | number | 3 | How many cards are rendered, counting the one on top |
| offset | number | 14 | Vertical gap between each card and the one in front of it, in pixels |
| scaleStep | number | 0.05 | How much smaller each card is than the one in front of it |
| autoplay | number | 0 | Milliseconds between automatic advances. 0 turns autoplay off |
| dismissAt | number | 90 | Distance, in pixels, a card must be dragged before it is dismissed |
| className | string | '' | Additional CSS classes applied to the stack. Set its size here |
“Dropped it in on a Friday and shipped the redesign on Monday.”
Ava Chen
Design engineer
“The only component library where I did not delete half the props.”
Marcus Hale
Staff frontend
“It reads like something a person wrote, because it is.”
Priya Nair
Founder