Checklist React component
An onboarding checklist: a progress bar and count up top, round checks that draw in and strike the step through, the next step opening by itself with its own action button, a fold-away header and an all-done state.
When to use the Checklist component
Use Checklist for getting-started and setup flows: the first steps in a new account, launching a store, configuring an integration. It shows how far along people are and always points at the next thing to do.
Store the done ids on your server so progress follows the account across devices, and let people dismiss it once everything is done.
Installation
Add the Checklist component to your project with the shadcn CLI. It lands in components/checklist.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add https://reactframe.com/r/checklist.jsonOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<Checklist /> accepts 11 props, all optional.
| Prop | Type | Default |
|---|---|---|
| items | ChecklistItem[] | DEFAULT_ITEMS |
| value Ids of finished items. | string[] | — |
| defaultValue | string[] | ["account"] |
| onValueChange | (done: string[]) => void | — |
| title | string | "Get your store ready" |
| subtitle Shown under the title until everything is done. | string | "A few steps and you're ready to take orders." |
| collapsible Let people fold the list away to just its header. | boolean | true |
| defaultCollapsed | boolean | false |
| onDismiss Called from the "Dismiss" button that appears once everything is done. | () => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- itemsChecklistItem[]Default: DEFAULT_ITEMS
- value
Ids of finished items.
string[] - defaultValuestring[]Default: ["account"]
- onValueChange(done: string[]) => void
- titlestringDefault: "Get your store ready"
- subtitle
Shown under the title until everything is done.
stringDefault: "A few steps and you're ready to take orders." - collapsible
Let people fold the list away to just its header.
booleanDefault: true - defaultCollapsedbooleanDefault: false
- onDismiss
Called from the "Dismiss" button that appears once everything is done.
() => void - theme"dark" | "light"Default: "dark"
- classNamestring
FAQ
- How is it different from Checkbox Group?
- Checkbox Group is a form field for picking options. Checklist tracks progress through steps: it has a progress bar, opens the next step with its own action, and celebrates when everything is done.
- Can steps complete themselves?
- Yes. Give a step an action and set completeOnAction, and it's ticked off as soon as the action is used; the next step then opens.
- Can it stay out of the way?
- Set collapsible and people can fold it down to its header with the count and progress bar; onDismiss adds a Dismiss button once everything is done.
