Onboarding

Onboarding Checklist

A guided onboarding checklist with a progress bar, toggleable steps, and a 'hide completed' option. Step state is managed internally with an external sync callback.

Get started

2 of 5 completed

Complete these steps to set up your workspace.

Complete your profile
Add your name and avatar.
Create your first project
Set up a new workspace project.
Invite a team member
Collaborate by inviting colleagues.
Add a payment method
Upgrade to unlock premium features.
Deploy to production
Go live with your first deployment.

import { OnboardingChecklist } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add onboarding-checklist

Import

import.tsx

import { OnboardingChecklist } from "@aetherstack/blocks"
import type { OnboardingStep } from "@aetherstack/blocks"

Usage

onboarding-checklist.tsx

import { OnboardingChecklist } from "@aetherstack/blocks"

const steps = [
  { id: "profile", title: "Complete your profile", completed: true },
  { id: "project", title: "Create your first project", completed: false },
  { id: "team",    title: "Invite a team member",    completed: false },
]

export default function WelcomePage() {
  return (
    <OnboardingChecklist
      steps={steps}
      title="Get started"
      description="Complete these steps to set up your workspace."
      onStepToggle={(id, completed) => updateStep(id, completed)}
    />
  )
}

Props

Prop	Type	Default	Description
steps*	OnboardingStep[]	—	Array of steps. Each has id, title, optional description, optional completed flag, and optional href.
title	string	"Get started"	Section heading.
description	string	—	Supporting description below the heading.
onStepToggle	(id: string, completed: boolean) => void	—	Called when the user checks or unchecks a step.
className	string	—	Additional classes on the wrapper.

* Required

Accessibility

→Steps use the Checkbox primitive which carries proper aria-checked state.
→The progress bar uses the Progress primitive with a descriptive aria-label.
→Completed steps are visually distinguished and have a strikethrough label.