Loading…

Card Stack

beta

A pile of cards you step through as a receding deck, or that fans out into an arc on hover and focus.

Display
2 files
1 npm package
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add card-stack

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { CardStack } from "@/components/ui/card-stack";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Fan
Fan With Six Cards
Fan Forced Open
Deck Starting On Third

API

Generated from the component's own types, so a prop cannot appear here without existing.

<CardStack>

Prop	Type	Default
`children` (required) One card per child.	`ReactNode`	—
`defaultIndex` `deck` only: the card on top at first (uncontrolled).	`number`	—
`getCardLabel` `deck` only: names each card for assistive technology. Defaults to "2 of 5".	`(index: number, count: number) => string`	—
`index` `deck` only: the card on top (controlled).	`number`	—
`onIndexChange` `deck` only: called when the reader moves to another card.	`(index: number) => void`	—
`open` `fan` only: forces the fan open or shut. Leave unset to follow hover and focus.	`boolean`	—
`scatter` `fan` only: how far the pile is from squared-up, 0–100.	`number`	—
`spread` `fan` only: the width of the fan, 0–100. It is an arc the cards share, not a gap.	`number`	—
`variant`	`"deck" \| "fan"`	`"deck"`

Plus every attribute of <div>.

Accessibility

The deck is a carousel region (aria-roledescription="carousel") of labelled slides; only the top card is exposed — the others are aria-hidden and inert. Indicator dots are buttons with a roving tabindex and aria-current; arrow keys (mirrored in right-to-left layouts), Home and End step the deck and move focus with it, and a polite status region announces the new card. Wheel and swipe are conveniences on top of that, and the wheel releases the page at either end. The fan is a labelled list that opens on focus as well as hover; its motion is decoration and settles instantly under reduced motion.