Onboarding
The floating "Getting started" checklist from Attio.
Attio's 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.
Preview
Getting started
3/6 steps completed · Keep it up!Usage
import { OnboardingChecklist } from "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()}
/>;API
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | "Getting started" | Header title. |
steps | OnboardingStep[] | — | { id, label, icon?, done? } rows. |
encouragement | ReactNode | "Keep it up!" | Text after "N/total steps completed". |
onStepClick | (id: string) => void | — | Fired when an incomplete step is clicked. |
onMenu | () => void | — | Shows the ⋯ button. |
onMinimize | () => void | — | Shows the minimize button. |