[ [PRO.04] Pro Pack ] Onboarding Checklist

Onboarding Checklist

> Track user setup progress with expandable tasks, progress bar, and celebration animation on completion.

Import

[ [0x5B] IMPORT ]

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

Preview

[ [0x00] ONBOARDING CHECKLIST ]

[ GETTING STARTED ]

2/4 tasks completed • 50%

[01]: Connect your first integration

[02]: Invite team members

[03]: Configure webhook endpoint

[04]: Generate API token

1<OnboardingChecklist
2  tasks={tasks}
3  onTaskToggle={(taskId, completed) => {
4    // Update task completion
5  }}
6  onDismiss={() => {
7    // Handle dismiss
8  }}
9  showCelebration={true}
10/>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
className	`string`	`undefined`	Additional CSS classes for the container.
tasks	`OnboardingTask[]`	`required`	Array of onboarding tasks to display.
onTaskToggle	`(taskId: string, completed: boolean) => void \| Promise<void>`	`undefined`	Callback when a task is checked/unchecked.
onDismiss	`() => void`	`undefined`	Callback when the checklist is dismissed.
showCelebration	`boolean`	`true`	Show confetti animation when all tasks are complete.

Accessibility

[ [0x58] A11Y ]

Checkboxes properly labeled with task titles
Expandable details with keyboard navigation
Minimize/dismiss buttons have aria-labels
Progress bar shows visual and text completion status
Framer Motion animations respect prefers-reduced-motion
All interactive elements keyboard accessible