FX · Components

A deck of cards you page through, the front card flying to the back.

01Accessible motion
Card 1 of 4
bash
npx shadcn@latest add https://www.rad-ui.com/r/card-stack.json
React
import CardStack from "@/components/fx/card-stack"

<CardStack label="Release notes" cards={notes.map((note) => <Note key={note.id} {...note} />)} />
  • Only the front card is reachable: the others are inert and aria-hidden.
  • Previous and Next are real buttons; the position ("Card 2 of 5") is announced politely.
  • prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) swaps cards without the fly-out.
PropTypeDefaultDescription
cards
ReactNode[]
—

Cards, front to back.

label
string
—

Accessible name for the stack.

visibleBehind
number
2

Cards peeking out behind the front.

Edit this page on GitHub →