Setup Guide

Onboarding panel with a progress bar and collapsible task groups that strike through when done.

Part of affectUI Pro. Install: npx shadcn@latest add https://www.affectui.com/r/setup-guide.json · Import from @/components/ui/setup-guide

When to use

Onboarding with several areas, each made of a few steps that build on each other
A floating guide in a dashboard corner that people can fold away and come back to

When not to use

A single short list of steps – the Progress Tracker is lighter
Steps that can be done in any order – here each task unlocks the next

Usage

import { SetupGuide } from "@/components/ui/setup-guide";

const groups = [
  {
    id: "workspace",
    title: "Set up your workspace",
    tasks: [
      { id: "name", label: "Choose a workspace name" },
      { id: "invite", label: "Invite your teammates" },
    ],
  },
  { id: "verify", title: "Verify your account", tasks: [{ id: "email", label: "Confirm your email", done: true }] },
];

export function Onboarding() {
  return <SetupGuide groups={groups} onChange={save} onClose={hideGuide} />;
}

Props

Name	Type	Default	Description
`groups`	`SetupGroup[]`		Groups with an id, a title and tasks; each task has an id, a label and an optional done flag
`title`	`string`	`"Setup guide"`	Heading above the bar
`onEdit`	`() => void`		Shows an Edit link in the header
`onClose`	`() => void`		Shows a close button in the header
`onChange`	`(done: string[]) => void`		Called with the ids of all finished tasks
`className`	`string`		Extra class on the panel

Keyboard

Tab: Move between groups, tasks and header buttons
Enter / Space: Open or close a group, tick or untick a task

Accessibility

Group headers are buttons with aria-expanded, the closed panels are inert
Tasks that are not unlocked yet are disabled; finished ones are pressed toggle buttons
The bar is a progressbar with its percentage as value

Responsive

Dark mode built in: switches when an ancestor (usually <html>) has the class dark or data-theme="dark"

Requirements

React 19

Progress Tracker – Onboarding checklist with an animated progress bar, ticks that draw themselves and auto play
Profile Menu – Account card with the signed-in user, menu actions and profile setup progress