A "Get started" panel for onboarding: ordered setup steps with a progress ring, deep-link actions, estimates, optional and locked steps, skip with undo, a completion state and dismissal with a launcher pill to reopen it. Completion comes from the app.
Set up Moda Atölye
1 of 5 complete
Take cards and bank transfers. Payouts land in your account two business days later.
Point shop.yourbrand.com at your store. We issue the SSL certificate.
Bring a CSV from your old shop or add the first product by hand.
Give co-workers their own login and role.
Installation
The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";
Usage
import { SetupChecklist, SetupChecklistLauncher } from "@vamos-ui/react/business";
<SetupChecklist items={steps} onSkip={skip} dismissed={hidden} onDismissedChange={setHidden} onAllDone={celebrate} />
{hidden ? <SetupChecklistLauncher items={steps} onOpen={() => setHidden(false)} floating /> : null}Items are an <ol>; each title is a disclosure button whose name includes the status ("Connect payments, in progress"). Progress changes are announced politely.
Examples
Dependent steps
locked: { reason } shows a lock, disables the action and explains what unlocks it.
Partner onboarding
Finish these to start reselling.
Review and sign version 3.2 (October 2026).
PDF or photo of the current year's vergi levhası.
Sign the agreement first.
Available after the tax certificate is approved.
Dismiss and reopen
Dismissal is controlled so you can persist it; the launcher pill shows progress and reopens the guide.
CRM workspace setup
2 of 4 complete
Sync Gmail or Microsoft 365 so replies land on the right deal.
Loading and complete
Skeleton rows while loading; when every required step is done or skipped the panel switches to its completion state.
Get started
Get started
3 of 3 complete
You're all set
Everything is in place. You can hide this guide; it stays in Help.
API
SetupChecklist
| Prop | Type | Default |
|---|---|---|
items{ id, title, description?, status: "todo" | "in_progress" | "done" | "skipped", action?: { label, href?, onSelect? }, optional?, locked?: { reason }, estimate? }. | SetupItem[] | — |
title / descriptionHeader text. | string | "Get started" / "{done} of {total} complete" |
variantSurface and density. | "card" | "sidebar" | "popover" | "card" |
onSkip / onUndoSkipShow Skip for now / Undo skip. | (id: string) => void | — |
dismissed / onDismissedChangeControlled dismissal; renders nothing while dismissed. | boolean / (d: boolean) => void | — |
expandFirstIncompleteOpen the first unfinished step; moves along as steps complete (focus never jumps). | boolean | true |
onAllDoneCalled once when every required step is done or skipped. | () => void | — |
loadingSkeleton rows. | boolean | false |
labelsBuilt-in strings (setupChecklist namespace). | Partial<SetupChecklistLabels> | — |
SetupChecklistLauncher
| Prop | Type | Default |
|---|---|---|
itemsFor the progress text. | SetupItem[] | — |
onOpenReopen the checklist. | () => void | — |
floatingFixed at the bottom end of the viewport. | boolean | false |