KQ-740 · CASHFLOW/RIVER
Cashflow River
Income enters from the left, merges into one balance trunk and leaves to the right as spend, every stream a stroked ribbon whose width is its share of the month. Both sides stack to the same total, so a ribbon keeps one thickness from its node to its band on the trunk, and whatever spend does not take stays as a Kept band in the signal tone; when the amounts change the curve and its width re-form together on glide. Pointing at a ribbon reads its figure in the header and thickens it while the rest dim, pressing pins the reading and Escape releases it, and each stream is also a chip below with a roving tabindex where arrows step, Home and End jump and Enter and Space pin.
$18,400 in · $15,260 out · $3,140 kept
November · in $18,400 · out $15,260 · kept $3,140 · reading —
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/cashflow-river
Props
- inflows
- FlowStream[]
- default —
- Income streams top to bottom; labels stay short, the gutters hold about nine characters.
- outflows
- FlowStream[]
- default —
- Spend categories top to bottom; the surplus or shortfall band is added for you.
- value / defaultValue
- string | null
- default null
- Controlled or initial pinned stream id.
- onValueChange
- (id: string | null) => void
- default —
- Fires from the press, Enter, Space or Escape that pinned or released a stream.
- onReadChange
- (stream: FlowStream | null, side: "in" | "out" | null) => void
- default —
- Fires from the pointer or focus that lit a stream.
- format
- (value: number) => string
- default USD Intl.NumberFormat
- Formats every figure on the diagram.
- label
- string
- default Cashflow
- Names the diagram for assistive technology and heads the card.
| Prop | Type | Default | Description |
|---|---|---|---|
| inflows | FlowStream[] | — | Income streams top to bottom; labels stay short, the gutters hold about nine characters. |
| outflows | FlowStream[] | — | Spend categories top to bottom; the surplus or shortfall band is added for you. |
| value / defaultValue | string | null | null | Controlled or initial pinned stream id. |
| onValueChange | (id: string | null) => void | — | Fires from the press, Enter, Space or Escape that pinned or released a stream. |
| onReadChange | (stream: FlowStream | null, side: "in" | "out" | null) => void | — | Fires from the pointer or focus that lit a stream. |
| format | (value: number) => string | USD Intl.NumberFormat | Formats every figure on the diagram. |
| label | string | Cashflow | Names the diagram for assistive technology and heads the card. |