KQ-633 · REBALANCE/BARS

Rebalance Bars

Paired bars per asset — Now, solid, and Target, hatched behind a hairline — so the gap between them is the drift. Pressing the action glides every Now bar to its target on a cascade, glide rather than recoil because a portfolio reaching its model is a weight settling and a sale should never celebrate; a warn-hatched drift lane rides the Now track from where the weight stands to where it belongs and closes to nothing as the bar lands. Each pair is a role="meter" whose aria-valuetext states the whole trade in a sentence, and the action is a real button that disables itself once nothing is left to trade.

KQ-633 · REBALANCE/BARS

Fieldline Ops · model mixDrift 9 points · $5,580 to move

Drift 9 points · 4 trades pending

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/rebalance-bars

Props

assets: RebalanceAsset[]; default —; Each asset's id, label, current weight and target weight in whole percentage points.
total: number; default —; The portfolio's value; each trade's cash amount is its weight change against this.
applied / defaultApplied: boolean; default false; Controlled or initial state of the rebalance; true draws every Now bar at its target.
onAppliedChange: (applied: boolean) => void; default —; Fires from the button press, never from inside a state updater.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 }); Formats each trade's cash amount and the total left to move.
actionLabel: string; default "Rebalance"; Copy on the action button, which appends the number of trades.
label: React.ReactNode; default —; Visible heading; omit it and pass aria-label to name the list.

Prop	Type	Default	Description
assets	RebalanceAsset[]	—	Each asset's id, label, current weight and target weight in whole percentage points.
total	number	—	The portfolio's value; each trade's cash amount is its weight change against this.
applied / defaultApplied	boolean	false	Controlled or initial state of the rebalance; true draws every Now bar at its target.
onAppliedChange	(applied: boolean) => void	—	Fires from the button press, never from inside a state updater.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 })	Formats each trade's cash amount and the total left to move.
actionLabel	string	"Rebalance"	Copy on the action button, which appends the number of trades.
label	React.ReactNode	—	Visible heading; omit it and pass aria-label to name the list.