Search blocks by description or jump to a page.
A guided profile setup with steps for avatar, name, and preferences. Use it right after signup to help new users finish their account quickly.
User Onboarding is a guided setup checklist. A header greets the user by name and a completion badge shows overall progress as a percentage. Below the header sits a progress bar card with a small legend that maps icons to the three states: completed, in progress, and pending. Beneath that, a vertical stack of step cards each carries a title, a short description, an icon that reflects its state, and a task list showing individual subtasks ticked off or still open. The active step gets a "Continue Setup" button so the user always has a clear next action.
The three steps and their task lists are plain data, so you can rewrite the titles, descriptions, and task names to match your product. You can add or remove steps and adjust the task count per step without changing any layout logic. The percentage in the badge and the progress bar update automatically based on how many steps carry the completed status.
Reach for this block immediately after a new account is created, when you need to surface exactly what remains before a user is productive. On a logistics or delivery platform it fits a post signup route where dispatchers and drivers must configure their team, set permissions, and create their first route or project before going live. It works better than a plain form wizard here because the persistent card stack lets users return mid setup and see at a glance which phases are done and which still need attention.
A natural flow around it on an Application page:
Before
After
Each of the three layers can be swapped independently to fit your signup flow:
Tip: keep each step to three or four tasks so the card stack stays compact and users are not overwhelmed on their first visit.