Onboarding
BlockA setup checklist: what is done, which step is current, and what is blocked and why.
- SaaS
- 4 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add onboardingimport { OnboardingBlock } from "@/components/blocks/onboarding";<OnboardingBlock>
| Prop | Type | Default |
|---|---|---|
steps (required) | OnboardingStep[] | — |
actionsOffered alongside the heading — "Skip setup", say. | ReactNode | — |
completeDescription | string | "Everything is configured. This checklist will not be shown again." |
completeTitleShown once every step is done. | string | "You are all set" |
description | string | "A few things to do before you start." |
title | string | "Get set up" |
className | string | — |
Every step states its state in a word — Done, In progress, Not started, Blocked — because a green tick announces nothing and means nothing to a reader who cannot tell the colours apart; the tick and the step number are decoration on top of that. Progress is given as a count rather than only as a bar, and the bar is hidden so the same fact is not announced twice. The current step carries aria-current, so it can be found rather than merely seen. Blocked is a distinct state from not-started and says why. Each step's action is named after its step, so six buttons are not six identical "Start" entries in a controls list.