Onboarding Checklist
A setup-progress card: an overall progress bar, ordered step rows with done/current/locked states, a collapsible group for completed steps, a dismiss control, and a compact variant for docking in a sidebar.
$
Registry itembunx shadcn@latest add @nx-ui/onboarding-checklistDefault
Nexus ReGen's exchange-notification setup flow — two steps done, one in progress, two locked behind them.
Finish setting up your account
A few more steps before you can start exchanging materials.
Register a collection siteTell us where materials will be collected from.
Complete your compliance checklistConfirm duty-of-care and hazardous waste declarations.
Invite your teamBring in colleagues who manage transfers and reporting.
Compact variant
A smaller footprint for docking in a sidebar or page corner, with the same behaviour.
Setup
Register a collection siteTell us where materials will be collected from.
Complete your compliance checklistConfirm duty-of-care and hazardous waste declarations.
Invite your teamBring in colleagues who manage transfers and reporting.
All steps complete
Once every step is done, the completed group holds the full list, collapsed by default.
All set up
Your account is ready to exchange materials.
API reference
Exported parts and their props, extracted from the component source.
| Prop | Type | Default | Description |
|---|---|---|---|
title | React.ReactNode | "Get started" | — |
description | React.ReactNode | — | — |
steps* | OnboardingStep[] | — | — |
onStepAction | (step: OnboardingStep) => void | — | — |
onDismiss | () => void | — | — |
compact | boolean | false | — |
className | string | — | — |