KQ-605 · SPLIT/BILL

Split Bill

One bill across several faces with a total that cannot drift. Dragging a row's track reshapes every other share in proportion so they always sum to one, and the rows that moved follow on glide while the track under the finger stays unsprung. Equalise snaps every share even on snap through a cascade; each track is a real slider whose arrows, Page keys and Home and End reshape the others exactly as a drag does.

KQ-605 · SPLIT/BILL

Split the bill

$148.40

Coldbrook · Friday

Mara Vance$59.36
Iyad Sorel$37.10
Tomas Renn$29.68
Priya Okonkwo$22.26

4 ways · remainder $0.00

Mara Vance leads · $59.36 of $148.40 · remainder $0.00

Install

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

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

Props

total: number; default —; The bill in major units.
people: SplitPerson[]; default —; Who is splitting it: id, name and tint. Faces are initials on a disc — no images.
value / defaultValue: number[]; default even shares; Controlled or initial shares as fractions in `people` order; normalised to sum to 1.
onValueChange: (shares: number[]) => void; default —; Fires from the drag, the key, or Equalise — never from a render.
format: (value: number) => string; default —; Money formatter — the card never invents a currency. Defaults to an en-US Intl.NumberFormat.
step: number; default 0.01; Share a single arrow key moves; Page Up and Page Down move five of them.
label: string; default "Split"; Names the card for assistive technology.
caption: React.ReactNode; default —; A quiet line under the header — the venue and the date.

Prop	Type	Default	Description
total	number	—	The bill in major units.
people	SplitPerson[]	—	Who is splitting it: id, name and tint. Faces are initials on a disc — no images.
value / defaultValue	number[]	even shares	Controlled or initial shares as fractions in `people` order; normalised to sum to 1.
onValueChange	(shares: number[]) => void	—	Fires from the drag, the key, or Equalise — never from a render.
format	(value: number) => string	—	Money formatter — the card never invents a currency. Defaults to an en-US Intl.NumberFormat.
step	number	0.01	Share a single arrow key moves; Page Up and Page Down move five of them.
label	string	"Split"	Names the card for assistive technology.
caption	React.ReactNode	—	A quiet line under the header — the venue and the date.