KQ-597 · BALANCE/COMPARE

Balance Compare

Two periods stand on columns scaled against the larger of the pair, and hovering or focusing draws a line between the column tops with pathLength on flick — the line is the assertion, so it lands at once. It colours by direction and carries a caret so up and down never rest on colour alone, while a percent chip arrives at its midpoint on snap from a nudge below and the columns glide to new heights. Enter or Space pins the line open for touch and keyboard readers, Escape releases it.

KQ-597 · BALANCE/COMPARE

Aug 4690.50 · up 13.8% on jul

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/balance-compare

Props

from: BalancePoint; default —; The earlier period: its label and amount, drawn on the left.
to: BalancePoint; default —; The later period: its label and amount, drawn on the right.
label: string; default —; What is being compared; names the control.
format: (amount: number) => string; default en-US currency; Renders both figures and the delta when there is no percentage to give.
pinned / defaultPinned: boolean; default false; Controlled or initial pinned state — the line and chip stay drawn.
onPinnedChange: (pinned: boolean) => void; default —; Fires from the press that pinned or released the line.
onRevealChange: (revealed: boolean) => void; default —; Fires when the line becomes visible or hides, from hover, focus or a pin.

Prop	Type	Default	Description
from	BalancePoint	—	The earlier period: its label and amount, drawn on the left.
to	BalancePoint	—	The later period: its label and amount, drawn on the right.
label	string	—	What is being compared; names the control.
format	(amount: number) => string	en-US currency	Renders both figures and the delta when there is no percentage to give.
pinned / defaultPinned	boolean	false	Controlled or initial pinned state — the line and chip stay drawn.
onPinnedChange	(pinned: boolean) => void	—	Fires from the press that pinned or released the line.
onRevealChange	(revealed: boolean) => void	—	Fires when the line becomes visible or hides, from hover, focus or a pin.