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 1FreeOnboarding welcome card with a setup progress bar and three checkbox steps for reading docs, inviting the team, and configuring the workspace.
Three-Card Setup Steps
Onboarding 2FreeOnboarding laid out as three numbered step cards for importing data, inviting teammates, and customizing the workspace, each toggling to complete.
Multi-Step Setup Wizard
Onboarding 3FreeOnboarding wizard card stepping through profile, workspace, invites, and a summary, with a progress bar, step indicator, and preference switches.
First-Run Welcome Screen
Onboarding 4FreeFirst-run onboarding empty state with a layered rocket illustration, welcome badge, create-project button, take-the-tour action, and reassurance hints.
Invite Your Team Step
Onboarding 5FreeInvite-teammates onboarding step marked 3 of 4, with add and remove email rows, a role select per invite, and skip or send actions.
Dismissible Getting Started Widget
Onboarding 6FreeCompact getting-started widget with a dismiss button, progress bar, and a five-step checklist showing completed steps struck through.
Checklist With Progress Ring
Onboarding 7ProInteractive setup checklist filling a circular progress ring with a counting percent, springing a check per step and revealing unlocked features.
Guided Tour With Spotlight
Onboarding 8ProGuided product tour over a mock dashboard, dimming the screen and cutting a moving spotlight around each hotspot with an anchored coachmark popover.
Role Picker Personalized Setup
Onboarding 9ProPersonalized onboarding where choosing developer, designer, product, or marketing blur-swaps a tailored first-steps checklist beside editorial copy and a proof stat.
Wizard With Live Preview Panel
Onboarding 10ProSetup wizard whose steps slide across a progress rail while a live preview panel builds up the workspace, owner profile, and invited teammates.