Steps to a working setup with progress and time left; the next step unfolds, and finishing celebrates.
$ pnpm dlx shadcn@latest add @dashral/onboarding-checklistWhen to use
- Steps to a working setup, with progress and time left; the next step unfolds and finishing celebrates.
- A new account's first days in a product, on its home page.
When not to use
- Setup that has to be done before the product works at all: Onboarding walks through it first.
- Accounts past their first days: hide it once every step is done.
Usage
Getting started with your own data: every prop has the sample as its default, so pass only what you have.
import { OnboardingChecklist } from "@/components/dashral/blocks/onboarding-checklist"
<OnboardingChecklist
tasks={setupTasks}
done={completed}
onDoneChange={(ids) => api.onboarding.save(ids)}
onAction={(task) => router.push(task.href)}
hidden={dismissed}
onHiddenChange={setDismissed}
/>API reference
OnboardingChecklist
A getting-started card: the steps to a working setup, with progress. Tick a step, or do it from its action; the next open step unfolds. Finishing them all shows a small celebration, and the card can be hidden and brought back. Every part comes from props: your steps, which are done (controllable), and handlers for each step's action and for hiding the card.
| Prop | Type | Default |
|---|---|---|
title | React.ReactNode | "Get started with Acme" |
tasks | Task[] | sample |
done | string[]The steps done, by id (the card keeps them without it). | — |
onDoneChange | (done: string[]) => void | — |
onAction | (task: Task) => voidA step's action button: go do it. Without it (and without an href), the button marks the step done. | — |
hidden | boolean | — |
onHiddenChange | (hidden: boolean) => void | — |
finished | { title: string; description: string; note?: string } | sample |
hiddenNote | string | sample |
type Task
A step: what it is, its action's label (and where it goes, or onAction hears it), and about how long it takes.
| Prop | Type | Default |
|---|---|---|
id | string | — |
title | string | — |
text | string | — |
action | string | — |
href | string | — |
minutes | number | — |