KQ-737 · LINE/ITEM

Line Item

One basket row with a stepper pill whose quantity digit rolls on snap at each press while the pressed button squashes on flick, and whose line total rolls in the same beat because the total moves only because the quantity did. At the minimum the minus cross-fades into a bin; pressing it collapses the row, its measured height tweening to zero on the exit ease with the content fading, and onRemove fires only when the collapse completes so the host can drop the item without a jump. The quantity is a spinbutton: Up and Down step, Home and End jump to the limits.

KQ-737 · LINE/ITEM

Coldbrook Coffee · Waylight Pay

Flat white
Oat · $4.20 each
$8.40
Quantity 2, $8.40
Almond pastry
$3.80 each
$3.80
Quantity 1, $3.80
House beans
250 g · $15.20 each
$15.20
Quantity 1, $15.20

3 lines · $27.40

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/line-item

Props

name: string; default —; The item; also names the spinbutton and the remove control.
note: string; default —; A variant or detail under the name.
unitPrice: number; default —; Price per unit, in major units.
quantity / defaultQuantity: number; default 1; Controlled or initial quantity, clamped to min and max.
onQuantityChange: (quantity: number) => void; default —; Fires from the press or key that changed it.
min: number; default 1; The lowest quantity; at it the minus becomes remove when removable.
max: number; default 99; The highest quantity; also sets the width reserved for the rolling figures.
removable: boolean; default true; At the minimum, minus becomes a remove control.
onRemove: () => void; default —; Fires when the collapse completes; drop the item from state here.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }); Formats the unit price and the line total. The default pins an explicit locale so server and client agree.

Prop	Type	Default	Description
name	string	—	The item; also names the spinbutton and the remove control.
note	string	—	A variant or detail under the name.
unitPrice	number	—	Price per unit, in major units.
quantity / defaultQuantity	number	1	Controlled or initial quantity, clamped to min and max.
onQuantityChange	(quantity: number) => void	—	Fires from the press or key that changed it.
min	number	1	The lowest quantity; at it the minus becomes remove when removable.
max	number	99	The highest quantity; also sets the width reserved for the rolling figures.
removable	boolean	true	At the minimum, minus becomes a remove control.
onRemove	() => void	—	Fires when the collapse completes; drop the item from state here.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })	Formats the unit price and the line total. The default pins an explicit locale so server and client agree.