Embed a setup checklist in React

A first-run checklist belongs inside the authenticated product, not on a marketing page. Bootstrapware Onboard is that embed: mount it where you already know the user.

Install

pnpm add @bootstrapware/onboard

Import styles once. Render in a client boundary. Pass the real session id — never invent user.id.

Path A — local

import { Onboard, createLocalAdapter, SAAS_FIRST_RUN_ITEMS } from "@bootstrapware/onboard";
import "@bootstrapware/onboard/styles.css";

<Onboard
  user={{ id: session.user.id, name: session.user.name }}
  workspaceKey={workspace.id}
  context={{ role: membership.role, plan: workspace.plan }}
  facts={{ hasBilling: billingConnected }}
  items={SAAS_FIRST_RUN_ITEMS}
  adapter={createLocalAdapter({ storageKey: "setup" })}
/>

Call completeStep from your app when users finish real actions, and pass facts so the widget reconciles on mount.

Path B — Hosted

Omit adapter and items. Pass flowId + publishable key. Live Hosted needs authorToken from your BFF.

<Onboard
  flowId="flw_..."
  publishableKey={process.env.NEXT_PUBLIC_BSW_ONBOARD_PUBLISHABLE_KEY}
  user={currentUser}
  workspaceKey={workspace.id}
  authorToken={authorTokenFromBff}
/>

Where to put it

• Dashboard home after login
• A /settings/setup page
• An empty-state panel until required steps are done

Dismiss hides without 100% progress. Snooze tucks it away. This is not a DAP: no tours, no MAU tax, no public checklist URL.

Related: Quickstart · Next.js · AGENTS.md · Demo