Getting Started Checklist
An onboarding setup card with a completion count, a segmented progress bar, completed steps, an expanded current step with actions, and upcoming numbered steps.
An onboarding setup card with a completion count, a segmented progress bar, completed steps, an expanded current step with actions, and upcoming numbered steps.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Getting Started Checklist is an onboarding setup card. A header names the flow, counts finished steps as 3 of 6 complete, and fills a segmented progress bar. Done steps collapse to a check circle and a Done tag, the current step expands with a description, a time estimate, and Start plus View the guide actions, and upcoming steps sit as numbered rows. A footer notes the checklist can be reopened from Settings and offers a Remind me later action.
Steps are one typed const array with a state field, and the done count is derived from it, so the block renders on the server with no client state. Expanding only the current step with its description and estimate, while the rest stay one line, is what keeps attention on the single next action.
Reach for this block on first run, in an onboarding drawer, or on an empty dashboard, wired to the setup tasks a new workspace still owes. Advance the state as each step completes, fill the bar, and keep the current step expanded so the next action is obvious.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the first run setup checklist. Other configurations:
Tip: keep exactly one step expanded as the current action; a checklist that opens everything at once reads like a form, not a next step.