KQ-654 · TX/FLOW

Tx Flow

One transaction, drawn: every input curves into a hub and every output curves out of it, each edge weighted by that leg's share of the total. Value marches along the edges as a dashed stroke on a linear tween, and only while flowing is set, the tab is visible, and motion is welcome. Pointing at an edge or its row lights both and reads the address and amount, thickening the stroke on glide; rows carry one roving tabindex across both columns where Up and Down move within a column, Left and Right cross between them, Enter pins a leg and Escape releases it.

KQ-654 · TX/FLOW

Basinworks payoutBSN

Legs 5 · flowing

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/tx-flow

Props

inputs: TxLeg[]; default —; Addresses the transaction spends from, top to bottom.
outputs: TxLeg[]; default —; Addresses it pays, top to bottom; one may carry kind: "fee".
format: (value: number) => string; default Intl.NumberFormat, 4 decimals; Formats every amount on the diagram.
asset: string; default "BSN"; Asset ticker printed after amounts.
value / defaultValue: string | null; default null; Controlled or initial pinned leg id.
onValueChange: (id: string | null) => void; default —; Fires from the press or Escape that pinned or released a leg.
onHoverChange: (id: string | null) => void; default —; Fires from the pointer or focus that lit a leg.
flowing: boolean; default true; Marches the dashes; still gated by reduced motion and tab visibility.
label: string; default "Transaction"; Names the diagram for assistive technology.

Prop	Type	Default	Description
inputs	TxLeg[]	—	Addresses the transaction spends from, top to bottom.
outputs	TxLeg[]	—	Addresses it pays, top to bottom; one may carry kind: "fee".
format	(value: number) => string	Intl.NumberFormat, 4 decimals	Formats every amount on the diagram.
asset	string	"BSN"	Asset ticker printed after amounts.
value / defaultValue	string \| null	null	Controlled or initial pinned leg id.
onValueChange	(id: string \| null) => void	—	Fires from the press or Escape that pinned or released a leg.
onHoverChange	(id: string \| null) => void	—	Fires from the pointer or focus that lit a leg.
flowing	boolean	true	Marches the dashes; still gated by reduced motion and tab visibility.
label	string	"Transaction"	Names the diagram for assistive technology.