Kinetiq

KQ-1321 · SETUP/CHECKLIST

Setup Checklist

An onboarding checklist whose steps open into their own inline action — a field, a choice or one button — on glide to a measured height, while the open step is lifted out as a raised card that travels between rows on glide, placed from the rows' own motion values so it tracks them exactly as they open and close. Finishing a step fills its disc on snap, draws its check on flick and fills the progress ring's share on glide; a beat later the next unfinished step slides into focus, and the last one lands the all-set state with seeded sparks and a check stamped on recoil before Dismiss folds the list into one line. The headers are an accordion: Up and Down move, Enter and Space open, Escape closes a step and returns focus to its header.

KQ-1321 · SETUP/CHECKLIST
1/5

Get started with Waylight Pay

Five short steps and you can take your first payment.

About 7 min left

  2. Payments in other currencies are converted before they reach you.

    Payout currency

1 of 5 done · about 7 min left

Open it on the Studio stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/setup-checklist

Props

steps
SetupStep[]
default defaultSetupSteps
The steps in order: title, description, minutes, optional flag and the inline action (button, field or choice) each opens into.
value / defaultValue
SetupProgress
default {}
Which steps are done or skipped, by id. Controlled or uncontrolled.
onValueChange
(value: SetupProgress) => void
default —
Fires from the action, Skip or key that finished a step, with the whole new progress.
open / defaultOpen
string | null
default the first unfinished step
The open step, or null for none. Controlled or uncontrolled.
onOpenChange
(id: string | null) => void
default —
Fires when a header press, a key or the advance after a finished step opens another.
dismissed / defaultDismissed
boolean
default false
Folds the checklist away into a one-line bar with a Show button. Controlled or uncontrolled.
onDismissedChange
(dismissed: boolean) => void
default —
Fires from Dismiss, Skip setup for now, and the bar's Show.
onAction
(stepId: string, input?: string) => void | Promise<void>
default —
Runs a step's action with the field's text or the chosen option's id. A returned promise holds the button pending; a rejection's message is shown on the step. Without it, actions finish at once.
onSkip
(stepId: string) => void
default —
An optional step was skipped. A skipped step counts as finished and can still be done later.
ring
"arc" | "segments" | "ticks"
default "arc"
How progress is drawn: one round stroke, one arc per step, or a dial of forty ticks.
expand
"lift" | "inline"
default "lift"
The open step as a raised card that travels between steps, or flush in the list with an accent bar that travels.
celebrate
"burst" | "stamp" | "quiet"
default "burst"
The all-set moment: seeded sparks with a stamped check, the whole ring landing on recoil, or colour alone.
advance
boolean
default true
Finishing a step opens the next unfinished one and moves keyboard focus to it.
title
string
default "Get started"
The heading and the region's accessible name.
subtitle
string
default —
The line under the heading.
doneTitle
string
default "You're all set"
The heading once every step is finished.
doneBody
string
default —
The line under it.
status
"ready" | "loading" | "error"
default "ready"
Loading draws placeholder rows; error offers Retry.
onRetry
() => void
default —
The Retry button of the error state.
label
string
default —
The region's accessible name, when it should differ from the title.
sound
boolean
default false
Play a plip as a step you finished checks off, rising with progress, and a chime when your action finishes the list. Off unless asked for.
disabled
boolean
default false
Shows the checklist but takes no presses or keys.
className
string
default —
Classes for the root. It is content-sized; give it a height and it scrolls inside, bringing each newly opened step into view.