Onboarding Checklist

A setup guide with tasks, accessible checkboxes, action buttons, and a progress bar.

@drift-ui/onboarding-checklistRegistry JSONGitHubOpen in v0
Workspace setup
Complete these steps to get your team ready for production.
Progress2 of 5 done
  • Confirm your account email to enable security alerts and notifications.
  • Set up a workspace repository and configure basic environment settings.
  • Add collaborators to share components and review pull requests together.
  • Link your GitHub account to enable automatic CI/CD deployment previews.
    Connect GitHub
  • Upgrade your team plan to unlock unlimited projects and team members.

Keyboard

Space
Toggle the focused checklist item
Enter
Activate the action button or link
Tab
Move focus between items and actions

The CLI also installs the npm packages and registry items it builds on, and reads the style in your components.json to pick the Base UI or Radix build.

onboarding-checklist-usage.tsx
"use client"

import { useState } from "react"
import { OnboardingChecklist } from "@/components/ui/onboarding-checklist"

const items = [
  {
    id: "profile",
    title: "Complete your profile",
    description: "Add your name, role, and timezone.",
    action: { label: "Edit profile", onClick: () => {} },
  },
  {
    id: "invite",
    title: "Invite your team",
    description: "Collaborate with colleagues on shared projects.",
    action: { label: "Invite", onClick: () => {} },
  },
]

export function DashboardChecklist() {
  const [completed, setCompleted] = useState(["profile"])

  return (
    <OnboardingChecklist
      title="Getting started"
      description="Finish setting up your workspace."
      items={items}
      completed={completed}
      onCompletedChange={setCompleted}
      collapsible
    />
  )
}

OnboardingChecklist

Dashboard setup guide with a list of tasks, accessible checkboxes, action buttons, and a progress bar.

Prop
itemsRequiredOnboardingChecklistItem[]List of checklist tasks to display.
titleReactNodeDefault"Getting started"Card header title.
descriptionReactNodeCard header description text.
completedstring[]Controlled array of completed task IDs.
defaultCompletedstring[]Default[]Initial completed task IDs when uncontrolled.
onCompletedChange(completed: string[]) => voidCalled when any task is checked or unchecked.
onItemToggle(item: OnboardingChecklistItem, completed: boolean) => voidCalled with the toggled item and its new state.
collapsiblebooleanDefaultfalseWhether the checklist can be collapsed down to header and progress.
openbooleanControlled open state when collapsible.
defaultOpenbooleanDefaulttrueInitial open state when collapsible and uncontrolled.
onOpenChange(open: boolean) => voidCalled when collapsible open state toggles.
progressFormat(progress: OnboardingChecklistProgress) => ReactNodeCustom formatter for the progress ratio indicator.

Other props go to the Card root.

OnboardingChecklistItem

Individual task item definition.

Prop
idRequiredstringUnique identifier for tracking completion.
titleRequiredstringTask title text.
descriptionReactNodeOptional supplementary details.
actionOnboardingChecklistActionAction button or link for completing the step.
disabledbooleanDefaultfalseDisables toggling this item.

OnboardingChecklistAction

Action button or link configuration for a task.

Prop
labelRequiredstringButton or link text.
onClick(event: MouseEvent<HTMLButtonElement>) => voidClick handler rendering a Button.
hrefstringURL rendering a styled anchor link.
disabledbooleanDefaultfalseDisables the action control.

Controlled state

Pass completed and onCompletedChange to manage completion state externally, with callback logging on each toggle.

Setup guide
Track your setup progress and sync changes with external state.
Progress1 of 3 done
  • Provide company details and timezone for team notifications.
  • Add a CNAME record to route your domain to drift-ui hosting.
  • Create an access token with read/write permissions for deployment.

Loaded with 1 completed

Collapsible checklist

Allow users to collapse the checklist once they understand the flow, keeping only the header and progress bar visible.

Account security checklist
Strengthen your workspace security before launching.
Progress1 of 3 done
  • Secure your account with an authenticator app or security key.
  • Choose which channels receive deployment error alerts.
  • Store emergency codes safely in your password manager.
Checklist state: Expanded

With interactive tour

Trigger an onboarding tour from an action button and automatically complete the checklist task upon tour completion.

Getting started
Complete the platform tour to get oriented.
Progress0 of 2 done
  • Learn how to navigate projects, settings, and team collaboration.
  • Pick your brand accent colors and customize navigation styles.
Workspace analytics dashboard0 active deploys
components/ui/onboarding-checklist.tsx
CtrlK