Card Stack
A stack of cards that stack on top of each other with a satisfying fade animation. Perfect for testimonials, notifications, or flashcards.
Examples
Default
25% off our latest model
Get 25% off usage of our newest reasoning model for the next 30 days. Built for complex tasks, coding, and long-context workflows.
Free observability for 90 days
Monitor every request with traces, latency, token usage, and model performance. No instrumentation fee for your first 90 days.
2M free API tokens
Build and test your next AI feature with 2 million tokens included on every new developer account.
Ship agents for less
Save 30% on agent runs this month. Includes tool calling, web search, structured outputs, and persistent task execution.
Scale without the cold start
Priority inference and dedicated capacity for production workloads. Get predictable latency when your traffic spikes.
Controlled
Building clean, minimal software for the modern web.
Full-stack engineer riding the deep end of the stack.
Open-source maintainer and systems tinkerer.
Crafting premium developer experiences, pixel by pixel.
Coffee-fueled backend engineer shipping resilient APIs.
Designing delightful, accessible frontend interfaces.
Installation
npx shadcn@latest add "https://flow-kit-beta.vercel.app/r/card-stack.json"API Reference
CardStack
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Required | The card elements to display in the stack. |
| className | string | undefined | Additional CSS classes for the container. |
| offsets | CardOffset[] | [{ scale: 1, y: 0, opacity: 1 }, { scale: 0.95, y: 12, opacity: 1 }, { scale: 0.9, y: 24, opacity: 1 }] | Visual offsets for stacked cards (scale, position, opacity). |
| maxVisibleCards | number | 3 | Maximum number of cards visible in the stack. |
| transition | Transition | { type: "spring", damping: 21, stiffness: 180 } | Framer Motion transition config for animations. |
| exitOffset | number | -64 | Y-offset in pixels when a card exits the stack. |
| exitBlur | number | 4 | Blur amount in pixels applied to exiting cards. |
| autoAdvance | boolean | false | Enables automatic card cycling. |
| autoAdvanceInterval | number | 5000 | Time in ms between auto-advances. |
| pauseOnHover | boolean | true | Pauses auto-advance when hovering. |
| activeIndex | number | undefined | Controlled index of the currently active card. |
| onIndexChange | (index: number) => void | undefined | Callback fired when the active index changes. |
| clickable | boolean | true | Allows clicking the top card to advance. |
| keyboardNavigable | boolean | true | Enables keyboard navigation with arrow keys. |
CardStackIndicator
| Prop | Type | Default | Description |
|---|---|---|---|
| totalCards | number | Required | Total number of cards in the stack. |
| activeIndex | number | Required | Index of the currently active card. |
CardOffset Type
| Property | Type | Default | Description |
|---|---|---|---|
| scale | number | Required | Scale factor applied to the card (1 = 100%). |
| y | number | Required | Vertical offset in pixels from the top. |
| opacity | number | undefined | Opacity of the card (0 to 1). |