Onboarding Blocks

Onboarding welcome card with a setup progress bar and three checkbox steps for reading docs, inviting the team, and configuring the workspace.

Onboarding laid out as three numbered step cards for importing data, inviting teammates, and customizing the workspace, each toggling to complete.

Onboarding wizard card stepping through profile, workspace, invites, and a summary, with a progress bar, step indicator, and preference switches.

First-run onboarding empty state with a layered rocket illustration, welcome badge, create-project button, take-the-tour action, and reassurance hints.

Invite-teammates onboarding step marked 3 of 4, with add and remove email rows, a role select per invite, and skip or send actions.

Compact getting-started widget with a dismiss button, progress bar, and a five-step checklist showing completed steps struck through.

Interactive setup checklist filling a circular progress ring with a counting percent, springing a check per step and revealing unlocked features.

Guided product tour over a mock dashboard, dimming the screen and cutting a moving spotlight around each hotspot with an anchored coachmark popover.

Personalized onboarding where choosing developer, designer, product, or marketing blur-swaps a tailored first-steps checklist beside editorial copy and a proof stat.

Setup wizard whose steps slide across a progress rail while a live preview panel builds up the workspace, owner profile, and invited teammates.

Vertical getting-started guide on a connector rail where each numbered step expands to reveal instructions and an inline action, collapsing with a check.