A light getting-started screen with a progress ring, expandable checklist steps, a confetti burst when everything is done, plus Skip for now and dismiss.
3 steps left · about 7 minutes
Pick a name and a URL your team will recognize. You can change both later in Settings.
Projects move faster together. Invite by email or share a link that expires in 7 days.
Sync events from Postgres, Stripe or Segment. The first import usually finishes in under five minutes.
Start from the Revenue template or a blank canvas. Drag metrics in, then pin the ones you check every morning.
Get a message in Slack or email when a metric crosses a threshold, like churn above 3% in a week.
Check numbers on the go. Scan the code in Settings or search for Northwind in your app store.
npx shadcn@latest add https://hyperblur.dev/r/app-onboarding-checklist.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/app-onboarding-checklist.tsx.
import { AppOnboardingChecklist } from "@/components/hyperblur/app-onboarding-checklist"
<AppOnboardingChecklist defaultCompleted={["workspace"]} onComplete={() => console.log("done")} />| Prop | Type | Default | Description |
|---|---|---|---|
| steps | AppOnboardingStep[] | six sample steps | Steps with id, title, description, optional duration (for example "2 min") and an action label. |
| defaultCompleted | string[] | [] | Step ids already done at mount. |
| defaultOpenId | string | Step expanded at mount. Defaults to the first unfinished step. | |
| userName | string | "Maya" | Name in the greeting. |
| product | string | "Northwind" | Product name in the greeting. |
| accent | string | "#6d4aff" | Color of the ring, checks and highlights. |
| onStepComplete | (id: string, done: boolean) => void | Called when a step is checked or unchecked. | |
| onComplete | () => void | Called once the last step is checked. | |
| onSkip | () => void | Called by Skip for now. The checklist collapses to a progress pill with Resume. | |
| onDismiss | () => void | Called by the close button. The checklist hides with an Undo. |