11 Blocks

shadcn/ui onboarding blocks & components.

Onboarding flows built with shadcn/ui: welcome checklists, multi-step setup wizards with progress bars, invite-your-team steps, guided product tours with spotlight coachmarks, and role-based personalization that tailors the first-steps list. Get users to value before they get to an empty dashboard.

Welcome Checklist Card

Onboarding 1Free

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

ButtonCardCheckboxProgressSeparator

Three-Card Setup Steps

Onboarding 2Free

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

ButtonCardProgress

Multi-Step Setup Wizard

Onboarding 3Free

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

BadgeButtonCardFieldInputLabelProgressSeparatorSonnerSwitch

First-Run Welcome Screen

Onboarding 4Free

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

BadgeButton

Invite Your Team Step

Onboarding 5Free

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

ButtonInputSelectSeparator

Dismissible Getting Started Widget

Onboarding 6Free

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

Progress

Checklist With Progress Ring

Onboarding 7Pro

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

ButtonCheckbox

Guided Tour With Spotlight

Onboarding 8Pro

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

ButtonPopover

Role Picker Personalized Setup

Onboarding 9Pro

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

ButtonFieldRadio Group

Wizard With Live Preview Panel

Onboarding 10Pro

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

AvatarButtonFieldInputSwitch

Getting Started Rail Accordion

Onboarding 11Pro

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

AccordionButtonProgress