KQ-609 · CONFIRM/SLAB

Confirm Slab

The facts reveal one after another on a cascade — amount, recipient, fee, total — each rising on glide so the eye is walked down the card in the order the numbers matter. The confirm control is a track with a detent: the thumb follows the pointer to a drawn notch at 62%, meets resistance past it, and parks there when released, then slams home on flick once it is pushed through; released short of the notch it springs back on snap. Confirming sinks the slab on the exit ease and collapses its space on glide to one confirmed line with a tick drawn on flick.

KQ-609 · CONFIRM/SLAB

Confirm transfer1,240.00

To: Coldbrook Bank
Account: •••• 8820
Fee: 2.40
Total: 1,242.40
For: Basinworks payout 2418

Slide to send

Basinworks payout ready

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/confirm-slab

Props

amount: number; default —; The sum being confirmed; the card's headline figure.
format: (value: number) => string; default Intl.NumberFormat, two decimals; Formats the amount, the fee, and the total.
recipient: string; default —; Who is being paid; truncates with a title.
account: string; default —; The masked account line under the recipient.
fee: number; default 0; Added to the amount for the total row.
note: string; default —; Optional last row — what the transfer is for.
confirmLabel: string; default Slide to send; Track copy while idle, and the slider's accessible name.
sentLabel: string; default Sent; Copy for the line the slab collapses to.
disabled: boolean; default false; Locks the track and dims the slab.
onConfirm: () => void; default —; Fires once, from the gesture or key that landed the slide.
onCancel: () => void; default —; Fires from the Cancel button.
onStageChange: (stage: "idle" | "detent" | "sent") => void; default —; Fires as the control moves between its stages.

Prop	Type	Default	Description
amount	number	—	The sum being confirmed; the card's headline figure.
format	(value: number) => string	Intl.NumberFormat, two decimals	Formats the amount, the fee, and the total.
recipient	string	—	Who is being paid; truncates with a title.
account	string	—	The masked account line under the recipient.
fee	number	0	Added to the amount for the total row.
note	string	—	Optional last row — what the transfer is for.
confirmLabel	string	Slide to send	Track copy while idle, and the slider's accessible name.
sentLabel	string	Sent	Copy for the line the slab collapses to.
disabled	boolean	false	Locks the track and dims the slab.
onConfirm	() => void	—	Fires once, from the gesture or key that landed the slide.
onCancel	() => void	—	Fires from the Cancel button.
onStageChange	(stage: "idle" \| "detent" \| "sent") => void	—	Fires as the control moves between its stages.