Checklist Widget
Corner card onboarding widget with a progress ring, five setup tasks, two complete, the next step highlighted, and an honest dismiss note.
Corner card onboarding widget with a progress ring, five setup tasks, two complete, the next step highlighted, and an honest dismiss note.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Checklist Widget is the persistent corner card that keeps new users oriented: five setup tasks (Create your workspace, Invite your first teammate, Connect a data source, Set up notifications, Launch your first project) with a progress ring showing 2 of 5 complete. The next recommended step, Connect a data source, is highlighted in a muted row with a chevron. Dismissing triggers an honest note: dismissing hides this widget for good, and the tasks live on in Settings under Onboarding.
Tasks are one typed array with done and next fields. The dismiss note does the work a tooltip would have to do; users who skip onboarding without it lose context on how to restart it.
Reach for this block in the bottom corner of your main dashboard shell during a user's first session, wired to a per-user onboarding state flag. Remove it from the DOM once all tasks are complete, not just when dismissed.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the new-workspace setup checklist. Other widget uses:
Tip: the progress ring and the dismiss note do opposite jobs, one motivates and one reassures; both are needed.