KQ-592 · ACCOUNT/DECK

Account Deck

A horizontal deck of account cards where the pick lifts on snap and every other card recedes exactly one step, so the deck reads as two planes rather than a perspective trick. The strip centres the chosen card by animating a motion value's x on snap, seeded from a ResizeObserver so the first paint lands centred, and the balance under the deck rolls its digits on snap because the roll belongs to the pick that caused it. It is a radiogroup with a roving tabindex — Left and Right step, Home and End jump, Space selects — and a pointer drag steps the pick only after 4px of travel, capturing inside try/catch.

KQ-592 · ACCOUNT/DECK

Waylight Pay

Available

Account Everyday · $8,412.60

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/account-deck

Props

accounts: DeckAccount[]; default —; The accounts left to right: id, name, kind, an optional masked tail, and a balance.
value / defaultValue: string; default —; Controlled or initial account id; defaults to the first account.
onValueChange: (id: string) => void; default —; Fires from the click, key or drag step that changed the pick.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }); Formats the balance under the deck. The default pins an explicit locale so server and client agree.
label: React.ReactNode; default —; Visible group label; omit it and pass aria-label to label the deck invisibly.
balanceLabel: string; default "Balance"; The caption over the rolling figure.

Prop	Type	Default	Description
accounts	DeckAccount[]	—	The accounts left to right: id, name, kind, an optional masked tail, and a balance.
value / defaultValue	string	—	Controlled or initial account id; defaults to the first account.
onValueChange	(id: string) => void	—	Fires from the click, key or drag step that changed the pick.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })	Formats the balance under the deck. The default pins an explicit locale so server and client agree.
label	React.ReactNode	—	Visible group label; omit it and pass aria-label to label the deck invisibly.
balanceLabel	string	"Balance"	The caption over the rolling figure.