Onboarding Checklist
A setup flow that remembers where you stopped and nudges you onward.
BeginnerWeb appProductivity6–14hAI-buildable 5/5no setupworth shipping
The product onboarding pattern: a checklist of setup tasks with progress, some tasks optional, some dependent on others. It reappears until complete, then dismisses gracefully. Every SaaS needs one and the state design is more subtle than it first appears.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- A checklist of setup tasks with a progress indicator
- Tasks expand to show their instructions and action
- Completed tasks collapse and mark themselves done
- Some tasks unlock only once a prerequisite is complete
- Optional tasks are visually distinguished from required ones
- The checklist can be dismissed and recalled
- Progress persists across sessions
The interesting part
- Dependency rules that never leave a user with nothing available to do
- Deciding when a dismissed checklist should reappear
Once it works
- Add a compact progress widget for the main navigation
- Add celebratory completion state
- Add per-task time estimates
Suggested stack
reacttypescripttailwindframer-motionlocalstorage