KQ-730 · SPLIT/WAYS

Split Ways

A bill split by count, by item, or by amount. The mode switch's knob rides its track on snap, and each mode re-lays the people at the table as FLIP on glide: equal cards in a grid, full-width rows holding item chips that travel between seats under a shared layoutId, or rows with a stepper and an unassigned line beneath. Every share counts to its figure on glide and the list's height is measured, never reserved. Arrows walk the modes; chips and steppers are buttons.

KQ-730 · SPLIT/WAYS

Fernworks KitchenBill $86.40

Ada$28.80
Bo$28.80
Cy$28.80

By count · Ada $28.80 · Bo $28.80 · Cy $28.80

Install

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

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

Props

total: number; default —; The bill.
people: SplitPerson[]; default —; Who is at the table, in seat order: { id, name }.
items: SplitItem[]; default —; What was ordered, { id, label, amount }; the item mode hands these between seats.
mode / defaultMode: "count" | "item" | "amount"; default "count"; Controlled or initial mode.
onModeChange: (mode: SplitMode) => void; default —; Fires from the radio that changed the mode.
defaultAssignments: Record<string, string>; default —; Item id to person id for the item mode; unlisted items start with the first seat.
defaultAmounts: Record<string, number>; default an even split; Person id to amount for the amount mode.
onSharesChange: (shares: Record<string, number>, mode: SplitMode) => void; default —; Fires from the event that changed any share, with every person's share and the mode they belong to.
step: number; default 1; Amount the stepper moves per press.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }); Formats every amount the control prints.
label: string; default "Split"; Printed above the mode switch.

Prop	Type	Default	Description
total	number	—	The bill.
people	SplitPerson[]	—	Who is at the table, in seat order: { id, name }.
items	SplitItem[]	—	What was ordered, { id, label, amount }; the item mode hands these between seats.
mode / defaultMode	"count" \| "item" \| "amount"	"count"	Controlled or initial mode.
onModeChange	(mode: SplitMode) => void	—	Fires from the radio that changed the mode.
defaultAssignments	Record<string, string>	—	Item id to person id for the item mode; unlisted items start with the first seat.
defaultAmounts	Record<string, number>	an even split	Person id to amount for the amount mode.
onSharesChange	(shares: Record<string, number>, mode: SplitMode) => void	—	Fires from the event that changed any share, with every person's share and the mode they belong to.
step	number	1	Amount the stepper moves per press.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })	Formats every amount the control prints.
label	string	"Split"	Printed above the mode switch.