Onboarding

A floating onboarding card: a title with a menu/minimize, a "N/total steps completed" subtitle, a segmented progress bar (filled pills brand, the rest 4% ink), and step rows with an icon + label. Completed rows strike through and show a brand check; incomplete rows are clickable.

A measured, purpose-built Getting-Started card — its steps are your own data, so it's ready to drop in for any onboarding checklist.

Installation

npm install @crisp-ui-kit/crisp

Usage

import { OnboardingChecklist } from "@crisp-ui-kit/crisp";

<OnboardingChecklist
  steps={[
    { id: "email", label: "Sync email account", icon: <Mail /> },
    { id: "workflow", label: "Create a workflow", icon: <Workflow />, done: true },
  ]}
  onStepClick={(id) => start(id)}
  onMinimize={() => hide()}
/>;

Props