SSICEVS UIBeta
Onboarding Checklist

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.json

Props · OnboardingChecklist

PropTypeDefault
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.