OnboardingChecklist

Interactive onboarding checklist with checkbox semantics, animated progress, completion callbacks, and responsive rows.

InterfaceSource ready6 props documentedLive preview
Add with shadcnnpx shadcn@latest add https://www.uigrids.com/r/onboarding-checklist.json
Interactive preview
Interface

Getting started

Set up your workspace

1/2

Install with the CLI

# adds OnboardingChecklist to components/ui with the shadcn CLI
npx shadcn@latest add https://www.uigrids.com/r/onboarding-checklist.json

Or install the package

// npm install @uigrids/react-ui
import { OnboardingChecklist } from '@uigrids/react-ui'

export default function App() {
  return <OnboardingChecklist />
}

Props

PropTypeDefaultDescription
titlestring'Set up your workspace'Configures the title option.
itemsunknownDEFAULT_ITEMSConfigures the items option.
defaultCompletedarray['profile']Configures the default completed option.
onChangeunknown-Configures the on change option.
onContinueunknown-Configures the on continue option.
classNamestring''Additional CSS classes for the outer element.