Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA getting started checklist with a progress ring, a segmented progress bar, expandable steps with an action button and a completion state.
Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.
import { OnboardingChecklist } from "@/components/ui/onboarding-checklist"<OnboardingChecklist
steps={[
{ id: "profile", title: "Complete your profile" },
{
id: "invite",
title: "Invite your team",
description: "Send invitations by email.",
action: { label: "Invite teammates", href: "/invite" },
},
]}
defaultCompleted={["profile"]}
/>| Prop | Type | Default | Description |
|---|---|---|---|
steps | OnboardingStep[] | - | Tasks, in order. |
completed | string[] | - | Controlled list of completed step ids. |
defaultCompleted | string[] | [] | Initial completed ids when uncontrolled. |
onCompletedChange | (completed: string[]) => void | - | Called with the new list whenever a step is checked or unchecked. |
title | string | "Get started" | Heading. |
description | string | - | Text under the heading while steps remain. |
completeMessage | string | "You're all set. Nice work." | Text shown once every step is done. |
defaultOpenId | string | first unfinished step | Step expanded at first. |
onDismiss | () => void | - | Adds a dismiss button. |
Also accepts all <section> props.
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | - | Unique id. |
title | string | - | Short task name. |
description | React.ReactNode | - | Shown when the step is open. |
action | { label: string; onClick?: () => void; href?: string } | - | Button or link shown inside the open step. |
role="checkbox" toggle and a separate expand button with aria-expanded.