Onboarding - Checklist

Checklists work because they show progress and one clear next step. These blocks keep their tasks in a local copy of a typed prop (items or milestones), so ticking something never mutates the data you pass in. Connect each action to your own app, and store the result on the user so the checklist remembers where they left off.

Tasks and names are fictional. Every progress indicator has an accessible name and counts are announced through live regions. Dismiss and close buttons always have a way to bring the content back in these demos, so you can preview both states.

Style One

Getting started checklist in a card. A progress bar and count, checkbox rows with descriptions, a call to action on the next task and a message when everything is done.

Style Two

Large progress ring beside a task list. The current task is highlighted, each task has a mark done button and a reset link restores the demo.

Style Three

Collapsible setup guide widget. Minimise or close it, expand a task for details and mark it done, and bring it back with one click after closing.

Style Four

Milestone trail with rewards. Locked, current and finished states, a line that fills as you go and a badge for every milestone you reach.

Style Five

Tip carousel with previous and next buttons, dots, keyboard shortcut hints and a got it button that removes the tip you just read.

Style Six

Dismissible setup banner with a small progress ring, the next step as a link, remind me later and dismiss buttons.