Onboarding Checklist

Tenant onboarding progress checklist

SaaSTenant Admin

Overview

OnboardingChecklist guides new tenants through initial setup tasks. It displays a progress bar with completion percentage, a list of steps with checkmarks for completed items, and links to the relevant settings pages. An optional dismiss callback renders a "Dismiss" button.

Usage

import { OnboardingChecklist } from "@leanicon/web-builder-library/saas";

<OnboardingChecklist
  steps={[
    {
      id: "step_1",
      title: "Set up your profile",
      description: "Add your name and contact details.",
      completed: true,
      href: "/settings/profile",
    },
    {
      id: "step_2",
      title: "Invite your team",
      description: "Add colleagues to collaborate.",
      completed: false,
      href: "/settings/team",
    },
  ]}
  completedCount={1}
  totalCount={2}
  onDismiss={() => console.log("dismissed")}
/>;

Variants

Default

Getting Started

Complete these steps to set up your account

2 of 5 completed40%

Dark

Getting Started

Complete these steps to set up your account

2 of 5 completed40%

All Completed

Getting Started

Complete these steps to set up your account

3 of 3 completed100%

No Dismiss

Getting Started

Complete these steps to set up your account

1 of 2 completed50%

Props

Name	Type	Default	Required
`steps`	`OnboardingChecklistStep[]`	—	Yes
`completedCount`	`number`	—	Yes
`totalCount`	`number`	—	Yes
`onDismiss`	`(() => void)`	—	No