Onboarding Checklist
The in-app progress checklist that keeps guiding setup after the first session, without blocking the product.
Onboarding & Auth · 7 checks · 8 resources
Before you ship
7- 01Card or sheet presentation — presented as a dismissible bottom sheet or a persistent card on the home screen, not a full-screen overlay
- 02Task count and progress — a visible count of completed versus total tasks and a progress bar or ring that updates as steps complete
- 03Tap to start each task — each item tappable, navigating directly to the relevant screen or feature, not just informational
- 04Completion celebration — a brief celebratory moment when all tasks are complete, before the checklist disappears
- 05Dismissible action — the checklist can be dismissed by users who do not want it; it is not a forced guided path
- 06Persistent but unobtrusive — accessible from a consistent location (dashboard, profile, home)
- 07Personalised to user type — onboarding questions that route different user types to tailored steps
Resources that help you build this
8- Ark UI · 49 headless components with one API across React, Vue, Solid and Svelte
- Impeccable · Design vocabulary and anti-slop detector for AI coding agents
- Atlassian Design System · Atlaskit: 59 Apache-2.0 React components behind Jira, Confluence and Bitbucket
- Cult UI · 82 free design-engineer components plus 10 paid full-stack AI starters
- React Joyride · Guided product tours for React, v3 with a hook API
- Shadcn UI Blocks · 200+ free copy-paste marketing and app blocks built on shadcn/ui
- Watermelon UI · MIT shadcn registry: 131 animated components, 187 page blocks, 30 base primitives
- Coachmark · Unstyled React primitive for product tours, built on Base UI Popover