KQ-646 · NETWORK/PICK

Network Pick

A wallet header that changes chain without moving anything else. Picking a chain wipes its tone across the header on a clipPath tween that enters from the side the pick lies on, while the chain badge leaves on the exit ease and the new one arrives from 8px away on snap, and the balance beneath re-rolls its digit columns on snap in a cascade that starts at the units and ripples left. It is a radio group with a roving tabindex — Left and Right step without wrapping, Home and End jump, Space selects — and under reduced motion the wash cross-fades, the badge swaps in place and the digits jump to their faces.

KQ-646 · NETWORK/PICK

Network

Waylight Pay · Everyday

Network Basin · 12.4820 BSN · $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/network-pick

Props

chains: NetworkChain[]; default —; The chains left to right: id, name, symbol, a token tone, a native balance and its value in the reporting currency.
value / defaultValue: string; default —; Controlled or initial chain id; defaults to the first chain.
onValueChange: (id: string) => void; default —; Fires from the press or key that changed the pick.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }); Prints the headline figure. The default pins an explicit locale so server and client agree.
formatUnits: (value: number, symbol: string) => string; default four fraction digits then the symbol; Prints the native balance under the headline.
label: React.ReactNode; default —; Visible group label; omit it and pass aria-label to label the group invisibly.
caption: React.ReactNode; default —; A quiet line under the balance — the account the header belongs to.

Prop	Type	Default	Description
chains	NetworkChain[]	—	The chains left to right: id, name, symbol, a token tone, a native balance and its value in the reporting currency.
value / defaultValue	string	—	Controlled or initial chain id; defaults to the first chain.
onValueChange	(id: string) => void	—	Fires from the press or key that changed the pick.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })	Prints the headline figure. The default pins an explicit locale so server and client agree.
formatUnits	(value: number, symbol: string) => string	four fraction digits then the symbol	Prints the native balance under the headline.
label	React.ReactNode	—	Visible group label; omit it and pass aria-label to label the group invisibly.
caption	React.ReactNode	—	A quiet line under the balance — the account the header belongs to.