Onboarding checklist

A React block (a whole screen) in Beamline's Blocks category.

The first screen after sign-up: a welcome with how far set-up has come, a checklist of the few steps that make the product useful (each with why, how long it takes and one button that starts it), the next step opened and offered as the page's one primary action, done steps drawing their check and gathering at the end, steps that can be skipped and brought back, and a finished state with Hide this list; under it, guides to read or watch.

Use it for

A product's home for new accounts until they are set up: connect data, invite the team, make the first thing.
Any short list of first steps a person finishes over a few sessions, each done elsewhere in the product.

Not for

A form filled in one sitting (step-form).
A guided tour that points at parts of the page (a tour).
An empty list's first step (empty-state).

Anatomy

welcome: the person's name, what set-up gives them, steps done of all and time left, as words, a count that rolls and a bar; a quiet band of light behind
checklist: each step with its mark (number, check or skipped), title, minutes; the open step (the next one, or the one chosen) adds why it matters and its button, the page's primary action
step actions: Skip for now on optional steps; Bring back on skipped ones
done steps gather at the end in order
finished: You're set up, what to try next, Hide this list
guides: cards to read or watch, with how long they take

States

loading; load failed (Try again)
fresh (nothing done), partly done, finished, hidden (your app stops showing it)
a step starting (its button busy while your flow runs), done (check draws, the next opens), not finished (stays open, says so)
skipped (folded, Bring back)
partial data: a step without minutes shows none; no guides hides the row

Keyboard

Each step's header is a button that opens it (one open at a time); Tab reaches its action next
Skip and Bring back are buttons in the step

Motion

The count rolls and the bar eases as a step is done. A done step's check draws, the step slides to the end with the others closing up, and the next one opens to its height. The finished state replaces the welcome's words in place and a single sweep of light crosses the band. Reduced motion places everything at once.

Props

Prop	Type	Default	Description
`name`	`string`	—	The person's first name, for the welcome.
`product`	`string`	—
`tasks / defaultTasks / onTasksChange` (required)	`OnboardingTask[]`	—	id, title, why, minutes, icon, action label, optional, status (todo, done, skipped).
`onStart` (required)	`(id: string) => Promise<boolean \| void>`	—	Run the step's flow (open your import, your invite dialog); resolve true when it was finished.
`guides`	`{ id, title, description, kind: "guide" \| "video", minutes, href }[]`	—
`onDismiss`	`() => void`	—	Hide this list, once everything is done or skipped.
`loading / error / onRetry`	`boolean / ReactNode / () => void \| Promise<unknown>`	—
`level`	`1 \| 2`	—
`className / classNames / style / ref`	`string / OnboardingChecklistClassNames / CSSProperties / Ref<HTMLDivElement>`	—

Built from

light-band
button
progress
slot-text
badge
card
skeleton
toast

Dependencies

lucide-react, motion

Import

import { OnboardingChecklist } from "@/blocks/onboarding-checklist/onboarding-checklist";

Get it

Onboarding checklist is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent