KQ-1713 · STEP/UP/CHECK

Step Up Check

A step-up verification standing in front of a sensitive settings panel: the panel sits behind a real backdrop-blur frost while a dialog asks for a passkey or password. Verifying opens the lock on snap, then the frost clears outward from the lock itself, its radial mask growing on glide with an accent ring riding the edge, while the opened lock flies into the header chip on the same spring and the chip counts the elevated session down; expiry closes the frost back in toward the lock on glide. Refused tries shake the field on a symmetric tween and are counted and explained, Tab wraps inside the dialog, Escape dismisses it to an Unlock button, and below 28rem the dialog becomes a bottom sheet.

KQ-1713 · STEP/UP/CHECK

Billing and payouts

Next payout €4,812.40 on Friday, from 38 settled orders.

Payout accountColdbrook Bank ••42 · weekly
Statement emailap@basinworks.io
Tax IDGB 284 1193 07
Card on fileCard ending 7710 · expires 08/28
Close accountEnds billing and removes workspace data

Confirm it's you

You're about to change where payouts go. Confirm it's you to continue.

rae@basinworks.io

locked · 5 tries left · Basinworks billing

Open it on the Canvas stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/step-up-check

Props

action: string; default "change where payouts go"; The sensitive change, as it reads after "You're about to".
methods: ("passkey" | "password")[]; default ["passkey", "password"]; The ways to verify, in the order offered; the first is the primary one.
account: { name: string; email: string }; default defaultStepUpAccount; Who is verifying, shown under the title.
heading: string; default "Billing and payouts"; The protected section's name, in the header strip beside the session chip.
title: string; default "Confirm it's you"; The dialog's title.
children: ReactNode; default —; The protected content; inert and frosted until verified. A quiet placeholder panel when omitted.
verified / defaultVerified: boolean; default — / false; Whether the elevated session is open, controlled or initial.
onVerifiedChange: (verified: boolean) => void; default —; Fires from the verification, expiry or Lock now that changed it.
onVerify: (attempt: { method, password? }) => boolean | void | Promise<boolean | void>; default —; Checks a try. Return or resolve false, or reject, to refuse it; an Error's message is shown as the reason. Accepts every try when omitted.
onFail: (failure: { method, attempt, remaining, message }) => void; default —; A try was refused, with the tries left and the reason shown.
onExpire: () => void; default —; The elevated session ran out and the panel locked again.
onLock: () => void; default —; Lock now was pressed on the session chip.
onCancel: () => void; default —; Not now, or Escape, dismissed the dialog; the panel stays locked.
sessionDuration: number; default 900000; How long the elevated session lasts, in ms.
warnAt: number; default 60000; How long before the end the chip turns to a warning, in ms.
maxAttempts: number; default 5; Refused tries before verification pauses.
forgotHref: string; default —; Where "Forgot password?" goes; the link is hidden when omitted.
autoFocus: boolean; default false; Move focus into the dialog when it first shows. Leave off when the check renders with the page.
frostAmount: number; default 0.6; How heavy the frost is, 0 to 1: blur radius and tint strength.
lockStyle: "padlock" | "keyhole" | "shield"; default "padlock"; The lock's glyph and how it opens: a shackle that swings, a key slot that turns, or a check drawn on flick.
accent: string; default "var(--accent-bright)"; Any CSS colour for the badge, the primary button, the clearing edge and the session chip.
disabled: boolean; default false; Every method is unavailable.
className: string; default —; Classes for the outer section.

Prop	Type	Default	Description
action	string	"change where payouts go"	The sensitive change, as it reads after "You're about to".
methods	("passkey" \| "password")[]	["passkey", "password"]	The ways to verify, in the order offered; the first is the primary one.
account	{ name: string; email: string }	defaultStepUpAccount	Who is verifying, shown under the title.
heading	string	"Billing and payouts"	The protected section's name, in the header strip beside the session chip.
title	string	"Confirm it's you"	The dialog's title.
children	ReactNode	—	The protected content; inert and frosted until verified. A quiet placeholder panel when omitted.
verified / defaultVerified	boolean	— / false	Whether the elevated session is open, controlled or initial.
onVerifiedChange	(verified: boolean) => void	—	Fires from the verification, expiry or Lock now that changed it.
onVerify	(attempt: { method, password? }) => boolean \| void \| Promise<boolean \| void>	—	Checks a try. Return or resolve false, or reject, to refuse it; an Error's message is shown as the reason. Accepts every try when omitted.
onFail	(failure: { method, attempt, remaining, message }) => void	—	A try was refused, with the tries left and the reason shown.
onExpire	() => void	—	The elevated session ran out and the panel locked again.
onLock	() => void	—	Lock now was pressed on the session chip.
onCancel	() => void	—	Not now, or Escape, dismissed the dialog; the panel stays locked.
sessionDuration	number	900000	How long the elevated session lasts, in ms.
warnAt	number	60000	How long before the end the chip turns to a warning, in ms.
maxAttempts	number	5	Refused tries before verification pauses.
forgotHref	string	—	Where "Forgot password?" goes; the link is hidden when omitted.
autoFocus	boolean	false	Move focus into the dialog when it first shows. Leave off when the check renders with the page.
frostAmount	number	0.6	How heavy the frost is, 0 to 1: blur radius and tint strength.
lockStyle	"padlock" \| "keyhole" \| "shield"	"padlock"	The lock's glyph and how it opens: a shackle that swings, a key slot that turns, or a check drawn on flick.
accent	string	"var(--accent-bright)"	Any CSS colour for the badge, the primary button, the clearing edge and the session chip.
disabled	boolean	false	Every method is unavailable.
className	string	—	Classes for the outer section.