Onboarding Blocks

A welcome onboarding card with a step indicator and a checklist.

A three-card horizontal setup grid where each card presents a numbered onboarding step with an icon, title, short description, and a toggleable action button to mark it complete.

Multi-step setup wizard card with progress bar, step indicator, per-step fields, toggles, invites and summary

A welcome onboarding empty state with a layered icon illustration, a welcome badge, a headline, a primary create-project action, a take-the-tour action, and quick reassurance hints. A first-run get-started screen.

An invite-your-team onboarding step with add/remove email rows, a per-invite role select, and skip and send actions.

A dismissible getting-started widget with a progress bar and a checklist of setup steps marked complete or pending.

Pro onboarding: an interactive setup checklist that fills an animated circular progress ring with a count-up percent, springs a check on each completed step, progressively reveals unlocked features, and celebrates a finished workspace.

Pro onboarding: a guided product tour over a mock app dashboard, with a dimmed spotlight that cuts a moving hole around each hotspot and an anchored coachmark popover that auto-advances through the setup steps with Back, Next, and Skip controls.

Pro onboarding: a personalize-your-setup split with editorial copy and a count-up proof stat on the left and a role selector of choice cards on the right that blur-swaps a tailored first-steps checklist when a role is picked.

Pro onboarding: a multi-step setup wizard whose steps blur-slide across an animated progress rail while a live preview panel builds up the workspace, owner profile, and invited teammates in real time, ending in a success state.

Pro onboarding: a vertical getting-started guide on a connector rail where each numbered step expands in an accordion to reveal instructions and an inline action, collapsing with a check and advancing the progress as steps complete.