KQ-599 · MULTI/CURRENCY

Currency Stack

A stack where every currency keeps its own lane and its own units. Choosing a lane sends it to the top and the rest close the gap beneath it — a layout reorder on glide, so each lane travels rather than the list redrawing — and the chosen lane opens a conversion strip whose converted total rolls its digits on snap under a rate readout. A new rate table pulses the strip with a cobalt wash on the exit ease; Up and Down walk the lanes, Home and End jump, Enter or Space brings the focused lane to the top.

KQ-599 · MULTI/CURRENCY

Basinworks wallet11,725.94 CBK

Top lane FRN · 4210.00 FRN = 5406.90 CBK · rate 1.2843

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/multi-currency

Props

balances: CurrencyBalance[]; default —; One lane per currency — code, name and amount — in their resting order.
rates: Record<string, number>; default —; Units of `display` per one unit of each code; handing down a new table pulses the strip.
display: string; default —; The code every lane converts into.
value / defaultValue: string; default first lane; Controlled or initial selected code — the lane on top.
onValueChange: (code: string) => void; default —; Fires from the press or key that changed lanes.
format: (amount: number, code: string) => string; default grouped en-US plus the code; Renders every balance and the converted total.
formatRate: (rate: number) => string; default four decimals; Renders the rate in the readout.
label: string; default —; Names the wallet and labels the stack.

Prop	Type	Default	Description
balances	CurrencyBalance[]	—	One lane per currency — code, name and amount — in their resting order.
rates	Record<string, number>	—	Units of `display` per one unit of each code; handing down a new table pulses the strip.
display	string	—	The code every lane converts into.
value / defaultValue	string	first lane	Controlled or initial selected code — the lane on top.
onValueChange	(code: string) => void	—	Fires from the press or key that changed lanes.
format	(amount: number, code: string) => string	grouped en-US plus the code	Renders every balance and the converted total.
formatRate	(rate: number) => string	four decimals	Renders the rate in the readout.
label	string	—	Names the wallet and labels the stack.