OnboardingChecklist

Get started

Complete your profile, Done
Invite your team, Not done
Work is easier to share with the people you work with.
Create your first project, Not done
Start from a template or a blank project.
Choose your notifications, Not done

import { useState } from 'react';
import { Button } from '@rookcom/monarch-react';
import { OnboardingChecklist, type OnboardingStep } from '@rookcom/monarch-react/patterns';

function ChecklistDemo() {
  const [done, setDone] = useState<Record<string, boolean>>({ profile: true });
  const [collapsed, setCollapsed] = useState(false);
  const [dismissed, setDismissed] = useState(false);
  const finish = (id: string) => setDone((d) => ({ ...d, [id]: true }));
  const steps: OnboardingStep[] = [
    { id: 'profile', title: 'Complete your profile', done: !!done.profile },
    {
      id: 'invite',
      title: 'Invite your team',
      description: 'Work is easier to share with the people you work with.',
      done: !!done.invite,
      action: (
        <Button size="sm" onClick={() => finish('invite')}>
          Invite people
        </Button>
      ),
    },
    {
      id: 'project',
      title: 'Create your first project',
      description: 'Start from a template or a blank project.',
      done: !!done.project,
      action: (
        <Button size="sm" variant="secondary" onClick={() => finish('project')}>
          New project
        </Button>
      ),
    },
    {
      id: 'notifications',
      title: 'Choose your notifications',
      done: !!done.notifications,
      action: (
        <Button size="sm" variant="ghost" onClick={() => finish('notifications')}>
          Open settings
        </Button>
      ),
    },
  ];
  if (dismissed)
    return (
      <Button variant="secondary" onClick={() => setDismissed(false)}>
        Show the checklist again
      </Button>
    );
  return (
    <OnboardingChecklist
      style={{ width: '100%', maxWidth: 560 }}
      title="Get started"
      description="A few steps to set up your workspace."
      steps={steps}
      collapsed={collapsed}
      onCollapsedChange={setCollapsed}
      onDismiss={() => setDismissed(true)}
    />
  );
}

<ChecklistDemo />

Usage examples

Complete

import { OnboardingChecklist } from '@rookcom/monarch-react/patterns';

<OnboardingChecklist
  style={{ width: '100%', maxWidth: 560 }}
  title="Set up billing"
  headingLevel={3}
  collapsible={false}
  steps={[
    { id: 'plan', title: 'Choose a plan', done: true },
    { id: 'payment', title: 'Add a payment method', done: true },
    { id: 'invoice', title: 'Set invoice details', done: true },
  ]}
  completeContent="Billing is ready. You can change it any time in Settings."
/>

Purpose

Guides people through setting up a product: a short list of steps, each with a done state and an optional call to action, and a summary of how far they are.

Use when

A new workspace or account has a handful of setup steps that unlock the product.
Steps can be done in any order and are completed by doing the thing itself (the product ticks them from its data).
People should be able to put the checklist away (collapse) or remove it for good (dismiss).

Avoid when

The steps must happen in order inside one flow: use Stepper.
There is one thing to do: use a callout or an empty state with an action.

Design principles

The product owns the truth: it defines the steps, decides when each is done and persists collapse and dismiss.
Done is shown three ways: a filled check marker, muted title, and hidden "Done" text for screen readers.
The next step stands out (aria-current="step", accent marker, tinted row) so people know where to go.
An action belongs only to a step that is not done; done steps lose their description and action.
Progress reuses Progress, and turns success when everything is done, with a completion message.
Unlike Stepper, the order is a suggestion, not a sequence the component enforces.

API reference

import { OnboardingChecklist } from '@rookcom/monarch-react/patterns';

Export	Kind	Rendering	Root class
`OnboardingChecklist`	component	client	`.mn-onboarding-checklist`

steps are { id, title, done, description?, action? }. action is any node, typically a small Button or a link.

Collapse is controlled with collapsed + onCollapsedChange, or uncontrolled with defaultCollapsed; collapsible={false} removes the toggle.

The dismiss button shows only when onDismiss is given; the product hides the checklist and remembers it.

The ref is the root <section>, labelled by the title; other attributes pass through.

Generated from the TypeScript declarations of packages/react/src/components/workflow/onboarding-checklist.

Properties