KQ-729 · TIP/TERMINAL

Tip Terminal

A customer-facing tip screen. Preset, no-tip and custom chips form one radio group whose highlight travels on snap; Custom opens a numeric pad grown to a measured height on glide, and the tip and total count to each figure on glide. The confirm is a slide: the knob follows the finger, springs back on snap from a short pull, and past 80% glides home and draws its check on flick. Arrows walk the chips; Enter, Space or End confirm.

KQ-729 · TIP/TERMINAL

Coldbrook CoffeeSubtotal $14.60

Tip

Total

Coldbrook Coffee · tip $2.63 (18%) · total $17.23

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/tip-terminal

Props

subtotal: number; default —; The bill before the tip.
presets: number[]; default [15, 18, 20]; Percentages offered as chips, each printed with the money it comes to.
value / defaultValue: TipChoice; default the middle preset; Controlled or initial choice: a preset percent, a custom amount, or none.
onValueChange: (choice: TipChoice, tip: number) => void; default —; Fires from the chip or pad key that changed the tip.
onConfirm: (total: number, tip: number) => void; default —; Fires from the release or key that confirmed the payment.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }); Formats every amount the terminal prints.
label: string; default "Tip"; The merchant's name, printed above the subtotal.

Prop	Type	Default	Description
subtotal	number	—	The bill before the tip.
presets	number[]	[15, 18, 20]	Percentages offered as chips, each printed with the money it comes to.
value / defaultValue	TipChoice	the middle preset	Controlled or initial choice: a preset percent, a custom amount, or none.
onValueChange	(choice: TipChoice, tip: number) => void	—	Fires from the chip or pad key that changed the tip.
onConfirm	(total: number, tip: number) => void	—	Fires from the release or key that confirmed the payment.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })	Formats every amount the terminal prints.
label	string	"Tip"	The merchant's name, printed above the subtotal.