KQ-685 · TAX/SPLIT

Tax Split

A stacked bar that splits an amount into net and tax around a fixed marker for the amount you entered. In exclusive mode the tax continues past the marker; switching to inclusive slides the bar's end back to it and the tax inside, both segments travelling on glide, while the net, tax and total figures roll their digits on glide without shifting layout. The mode switch is a radio group whose knob rides a shared layoutId on snap: Left and Right step, Home and End jump, Space selects.

KQ-685 · TAX/SPLIT

Studio plan20%

Net: $120.00
Tax: $24.00
Total: $144.00

exclusive · net $120.00 · tax $24.00 · total $144.00

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/tax-split

Props

amount: number; default —; The entered amount in major units.
rate: number; default —; Tax rate as a fraction; 0.2 is twenty percent.
mode / defaultMode: "inclusive" | "exclusive"; default "exclusive"; Controlled or initial mode; onModeChange fires from the press or key that switched it.
format: (value: number) => string; default —; Formats every figure. Defaults to a fixed en-US currency formatter.
label: string; default "Tax"; Names the control and its radio group.
netLabel / taxLabel / totalLabel: string; default —; Captions for the three figures; default Net, Tax and Total.

Prop	Type	Default	Description
amount	number	—	The entered amount in major units.
rate	number	—	Tax rate as a fraction; 0.2 is twenty percent.
mode / defaultMode	"inclusive" \| "exclusive"	"exclusive"	Controlled or initial mode; onModeChange fires from the press or key that switched it.
format	(value: number) => string	—	Formats every figure. Defaults to a fixed en-US currency formatter.
label	string	"Tax"	Names the control and its radio group.
netLabel / taxLabel / totalLabel	string	—	Captions for the three figures; default Net, Tax and Total.