Card DeckPro

A deck of cards to flick through: throw the top one to the back, step back with the arrows, and tap a card to lift it and show its detail.

Installation

When to use

A few things of the same kind people flick through, one at a time: payment cards, membership passes, tickets, profiles.
When each one has a detail worth opening in place, without leaving the page: a card's balance and latest payments.

When not to use

Many items to compare or scan: a list, a table or a grid shows them all at once.
Slides that should keep their order and size, like a gallery: the Carousel fits better.

Usage

Card Deck with your own data: a whole component you can paste as a page.

example.tsx

1"use client"
2
3import { CardDeck } from "@/components/dashral/pro/card-deck"
4
5type Pass = { id: string; name: string; tier: string; color: string }
6
7const passes: Pass[] = [
8  { id: "p1", name: "Olivia Martin", tier: "Gold", color: "bg-amber-600" },
9  { id: "p2", name: "Liam Johnson", tier: "Silver", color: "bg-slate-500" },
10  { id: "p3", name: "Sofia Ramirez", tier: "Platinum", color: "bg-zinc-800" },
11]
12
13export default function Passes() {
14  return (
15    <CardDeck
16      label="Membership passes"
17      items={passes}
18      getKey={(pass) => pass.id}
19      getLabel={(pass) => `${pass.tier} pass for ${pass.name}`}
20      // Each card's face fills the card: the deck shapes it (radius, shadow) and moves it.
21      renderCard={(pass) => (
22        <div className={`flex size-full flex-col justify-between p-5 text-white ${pass.color}`}>
23          <span className="text-sm font-medium">{pass.tier}</span>
24          <span className="text-lg font-semibold">{pass.name}</span>
25        </div>
26      )}
27      // Tap the top card: this comes out from under it.
28      renderDetail={(pass) => <p className="text-sm text-muted-foreground">{pass.name}'s {pass.tier} pass gives priority entry and two guest passes a month.</p>}
29    />
30  )
31}

API reference

CardDeck

A deck of cards to flick through: the top card in front and the next ones fanned out behind it. Drag or throw the top card to send it to the back (a short drag glides home), use the arrows or the arrow keys, and tap the top card to lift it and show its detail. Generic: renderCard draws each face, renderDetail what a lifted card shows.

Prop	Type	Default
`items`	`T[]` Required. The cards, front to back.	—
`renderCard`	`(item: T, state: { top: boolean; index: number }) => React.ReactNode` Required. A card's face: it fills the card, which the deck shapes (radius, shadow) and moves.	—
`renderDetail`	`(item: T, state: { index: number; close: () => void }) => React.ReactNode` What a lifted card shows beneath it. Left out, tapping does nothing and the hint only mentions swiping.	—
`getLabel`	`(item: T) => string` Required. What a card is called, for screen readers ("Travel card ending in 4242").	—
`getKey`	`(item: T, index: number) => string` A card's key; its index by default.	`(_item, i) => String(i)`
`index`	`number` The card on top.	—
`defaultIndex`	`number`	`0`
`onIndexChange`	`(index: number) => void`	—
`open`	`boolean` Whether the top card is lifted.	—
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`(open: boolean) => void`	—
`aspect`	`number` A card's width over its height; a payment card's (1.586) by default.	`1.586`
`arrows`	`boolean` Previous and next buttons beside the count. Off by default: the deck is swiped (and the arrow keys work).	`false`
`behind`	`number` How many cards show behind the top one.	`2`
`label`	`string` The deck's name, for screen readers.	`"Cards"`
`hint`	`React.ReactNode` Under the controls; left out, how to use the deck. Pass null for none.	—
`className`	`string`	—
`classNames`	`CardDeckClassNames`	—

type CardDeckClassNames

Prop	Type	Default
`root`	`string`	—
`deck`	`string`	—
`card`	`string`	—
`controls`	`string`	—
`detail`	`string`	—

Keyboard

Keys	Action
`→`	Throw the top card to the back
`←`	Bring the last card back to the top
`Enter`or`Space`	Lift the top card to show its detail
`Esc`	Put the lifted card back

Accessibility

A group with the role description "card deck", named by label; it is one tab stop.
A live region says the card in front and its place ("Visa, 2 of 4"), and when it's opened.
Only the top card is exposed; the cards behind it are hidden from screen readers.
The arrow buttons (arrows) are named Previous card and Next card.

Motion

A drag follows the pointer one to one and tilts the card; past the threshold it's thrown to the back, short of it the card glides home.
Lifted, the card rises and its detail opens as a drawer from under it. Phones get a light buzz when a throw commits.
Smooth tweens on [0.4, 0, 0.2, 1], never springs, except the small press as you grab a card. With reduced motion there's no tilt and the cards fade instead of moving.