Card Stack

A layered deck of cards featuring fluid drag-to-discard gestures, button-driven directional slide animations, and realistic depth perspective. Users can swipe cards left or right to review and discard them, with the next cards seamlessly stepping forward.

Swipe to Discard

Swipe or drag cards left or right to discard them. Cards behind smoothly step forward without back navigation, and the last card remains pinned in place.

swipeToDismisstrue: enables drag and swipe gestures on the top card to discard it to the left or right.
showHeaderfalse: hides the header bar for a clean, pure swipe card deck experience.
visibleCards3: keeps at most 3 cards visible in the stack at all times (front card + 2 cards behind).

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Two builds, same props and file — install one.

Install Card Stack

npx shadcn@latest add @algorize-ui/card-stack

components/custom/blocks/CardStackBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs this for you. Run it yourself only if you are adding Card Stack to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

gsap is an npm package.

npm install gsap

Examples

Infinite Loop

Continuous cyclical navigation where swiping cards seamlessly wraps around to the beginning with no header.

looptrue: keeps the stack cycling forever, repeating the cards cyclically.
showHeaderfalse: hides the header bar for a clean, uninterrupted swipe deck loop.

Arrow button controls to slide cards forwards and backwards with disabled bounds at the ends.

showNavigationtrue: displays previous and next arrow buttons in the header.
slideDirectionright: controls which direction the top card slides away when clicking next.

Left Slide Direction

Slide the top card out toward the left when progressing forward with button controls.

slideDirectionleft: animates the card exit towards the left side.

Props Reference

Prop	Type	Default	Description
`items`	`CardStackItem[]`	Required	Array of card items to display in the stack.
`title`	`string`	—	Optional heading text. If omitted, the counter (e.g. `1 of 8`) is placed on the left with navigation buttons on the right.
`swipeToDismiss`	`boolean`	`false`	Whether to enable dragging and swiping the top card left or right to discard.
`canDismissLastCard`	`boolean`	`false`	Whether the last card in the stack can be swiped away/dismissed. Defaults to `false` so the final card stays in place.
`showHeader`	`boolean`	`true`	Whether to render the header bar (title, counter, and navigation). Set to `false` for a pure card stack.
`showNavigation`	`boolean`	`true`	Whether to show header navigation arrow buttons. Set to `false` for pure swipe mode.
`visibleCards`	`number`	`3`	Maximum number of cards visually stacked (front card + cards behind).
`slideDirection`	`"right" \| "left"`	`"right"`	Direction the front card slides out when advancing forward via buttons.
`loop`	`boolean`	`false`	Whether navigation wraps around continuously or stops at the ends.
`defaultIndex`	`number`	`0`	Initial active index of the stack on mount.
`onCardChange`	`(index: number) => void`	—	Callback fired whenever the active card changes.
`onDismiss`	`(item, direction) => void`	—	Callback fired when a card is swiped/dismissed with the item and direction (`"left" \| "right"`).
`renderCard`	`(item, offset, isTop) => ReactNode`	—	Custom render function to replace the default card body.
`cardClassName`	`string`	—	Optional custom className applied to each individual card container.