KQ-619 · CARD/STACK

Card Stack

A wallet whose cards shingle down the stage with the strip that names each one left showing. Hovering the stack, or moving focus into it, fans it on glide; picking a card brings it to the front on snap and the others tuck behind in the order they were in, so working through the wallet reads as rotation rather than a reshuffle. It is a radio group: arrows cycle the front card, Home and End jump to the ends.

KQ-619 · CARD/STACK

Coldbrook Bank3 in wallet

Front Waylight Everyday ···· 4417 · $2,480

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/card-stack

Props

cards: StackCard[]; default —; The wallet, front first: id, name, last4 and an optional network and balance. The first five are used.
value / defaultValue: string; default the first card's id; Controlled or initial id of the front card.
onValueChange: (id: string) => void; default —; Fires from the click or key that brought a card forward.
format: (value: number) => string; default Intl.NumberFormat USD; Formats every balance; the wallet never invents a currency.
expanded: boolean; default —; Forces the fan open; leave it out and hover or focus opens it.
label: string; default "Cards"; Visible heading, also the group's accessible name.

Prop	Type	Default	Description
cards	StackCard[]	—	The wallet, front first: id, name, last4 and an optional network and balance. The first five are used.
value / defaultValue	string	the first card's id	Controlled or initial id of the front card.
onValueChange	(id: string) => void	—	Fires from the click or key that brought a card forward.
format	(value: number) => string	Intl.NumberFormat USD	Formats every balance; the wallet never invents a currency.
expanded	boolean	—	Forces the fan open; leave it out and hover or focus opens it.
label	string	"Cards"	Visible heading, also the group's accessible name.