Onboarding Checklist
Setup checklist — the check draws in, the label settles to ink, and the progress bar keeps a derivable done / total score.
Onboarding Checklist
Setup checklist — the check draws in, the label settles to ink, and the progress bar keeps a derivable done / total score.
When to use it
Setup flows where the remaining work should stay visible rather than appearing one step at a time. The done-over-total score is derivable on screen, so progress is a fact the user can check rather than a bar they have to trust.
Install
Adds Onboarding Checklist and its dependencies to your project through the shadcn CLI.
$ npx shadcn@latest add https://www.ssicevs.com/r/onboarding-checklist.jsonProps · OnboardingChecklist
| Prop | Type | Default |
|---|---|---|
| steps? | ChecklistStep[] | DEFAULT_STEPS |
| initiallyDone? | string[]Ids that start in the completed state. | ["domain"] |
| title? | string | "Get set up" |
| onToggle? | (id: string, done: boolean) => void className?: string | — |
Generated from the component source. Run npm run props:extract after changing a signature.