KQ-601 · SEND/FLOW

Send Flow

Three steps for one payment. Panels cross-slide by direction on glide inside a card whose height is measured by a ResizeObserver, so no step is padded out to the tallest; on the review step the amount lands on recoil and the confirm button is inert until that landing completes. Recipients are a radio group with a roving tabindex where arrows step, Home and End jump and Space chooses.

KQ-601 · SEND/FLOW

Send from Waylight Pay

1 / 3 Payee

Step 1 of 3 · to unset · $0.00

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/send-flow

Props

recipients: SendRecipient[]; default —; Who can be paid: id, name, handle and tint. Faces are drawn from initials — no images.
step / defaultStep: "who" | "amount" | "review" | "sent"; default "who"; Controlled or initial step.
onStepChange: (step: SendStep) => void; default —; Fires from the press or key that moved the step.
recipientId / defaultRecipientId: string; default ""; Controlled or initial payee; empty means nothing is chosen and Next is refused.
amount / defaultAmount: number; default 0; Controlled or initial amount in major units.
presets: number[]; default [20, 50, 100]; Quick amounts offered under the field.
balance: number; default —; Ceiling for the amount; over it the flow refuses to go on and says why.
format: (value: number) => string; default —; Money formatter — the flow never invents a currency. Defaults to an en-US Intl.NumberFormat so server and client agree.
onSend: (payment: { recipientId: string; amount: number }) => void; default —; Fires from the confirm press, once the figure has landed.
label: string; default "Send money"; Names the card for assistive technology.

Prop	Type	Default	Description
recipients	SendRecipient[]	—	Who can be paid: id, name, handle and tint. Faces are drawn from initials — no images.
step / defaultStep	"who" \| "amount" \| "review" \| "sent"	"who"	Controlled or initial step.
onStepChange	(step: SendStep) => void	—	Fires from the press or key that moved the step.
recipientId / defaultRecipientId	string	""	Controlled or initial payee; empty means nothing is chosen and Next is refused.
amount / defaultAmount	number	0	Controlled or initial amount in major units.
presets	number[]	[20, 50, 100]	Quick amounts offered under the field.
balance	number	—	Ceiling for the amount; over it the flow refuses to go on and says why.
format	(value: number) => string	—	Money formatter — the flow never invents a currency. Defaults to an en-US Intl.NumberFormat so server and client agree.
onSend	(payment: { recipientId: string; amount: number }) => void	—	Fires from the confirm press, once the figure has landed.
label	string	"Send money"	Names the card for assistive technology.