Onboarding Flows That Actually Finish
The step sequence is deliberately consistent across the set: profile with avatar or photo upload, role, how you heard about us, workspace, goals, teammate invites, then a ready state. Two flows extend to eight steps and end in product-specific setup, one with an AI agent picker and copyable API key commands, the other with a CLI checklist and copyable terminal commands.
What changes is the shell, and that choice matters more than the field list. You can take a wizard with a live inbox preview beside it, a clickable vertical stepper in a sidebar, a split screen with an animated dot-sphere canvas, a modal Dialog with a dot stepper, a top progress bar with a stacked screenshot rail, or a marketing hero next to the form.
Inputs stay ordinary shadcn: Field rows with Combobox, RadioGroup, Select, Checkbox and Switch, plus ReUI Frame and Badge where a flow needs panels and status. Step state is local React state, so wiring it to your signup API is a contained change.
All Onboarding Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
- Onboarding 1 Six-step workspace onboarding wizard with stepper progress and a live inbox preview pane
- Onboarding 2 Six-step workspace onboarding wizard with left sidebar vertical stepper and animated success state
- Onboarding 3 Split-screen workspace onboarding wizard with vertical stepper sidebar and animated dot-sphere panel
- Onboarding 4 Six-step workspace onboarding wizard with top progress bar and success screen
- Onboarding 5 Multi-step workspace onboarding dialog with dot stepper, animated steps, and success screen
- Onboarding 6 Eight-step workspace onboarding wizard with progress stepper, AI agent picker, copyable API setup
- Onboarding 7 Six-step workspace onboarding wizard with top progress bar and screenshot carousel rail
- Onboarding 8 Dark 8-step workspace onboarding wizard with progress bar, agent picker, and CLI setup checklist
- Onboarding 9 Six-step workspace onboarding wizard with marketing hero and animated progress bar
Pick the Shell, Not the Steps
The fields are close to identical across the set, so choose by how the flow is framed.
- Side-by-side preview pairs the form with a live product preview or an animated stacked-screenshot rail, keeping the payoff visible while someone fills fields in.
- Sidebar vertical stepper puts a clickable ReUI Stepper rail on the left so users can jump back, with animated transitions between panels and a success screen at the end.
- Modal wizard runs the whole flow in a Dialog with a clickable dot stepper, for products that onboard people inside the app instead of on a dedicated page.
- Top progress bar keeps the form full width under an animated bar, the lightest option and the easiest to drop into an existing signup route.
- Dark full-page setup extends to eight steps and finishes on an agent picker and copyable commands, which fits developer products where onboarding ends at the terminal.
What Each Flow Collects
- Profile: name, avatar or photo upload, and on some flows a timezone Combobox.
- Role and discovery source: RadioGroup choices you can use to branch later steps or seed defaults.
- Workspace: name, team size and a template or data source pick for the first project.
- Goals: multi-select goal pickers that give the success screen something specific to point at.
- Invites: teammate email chips with role selection, the step most first-run flows drop and later miss.
- Success: an animated ready state with next actions, so the wizard ends on something to do rather than a dead end.
Onboarding or Wizard?
These blocks are first-run flows. They assume an empty account and a user who has not committed yet, which is why they carry previews, marketing framing and a celebratory finish. The Wizard category uses the same stepper mechanics for in-product tasks such as imports, migrations and configuration, where the person is already signed in and simply wants it finished.
Plan the landing too. If the workspace you just created opens on a blank screen, pair the flow with an Empty State so the first thing a new user sees is a next action rather than an unexplained void.
Related Shadcn Application Block Categories
- Wizard for the same stepper mechanics applied to in-product tasks like imports and migrations.
- Empty State for the screen right after setup, so a brand new workspace still offers a first action.
- Auth for the login, register and two-factor pages that come immediately before these flows.
- Form for the settled version of the same fields once the account exists and is being edited.
- Dialog for modal surfaces if you would rather onboard inside the app than on a full page.
- Settings for where onboarding choices end up living once the user wants to change them.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (291) Browse 291 Shadcn Application blocks across 21 categories.
- Shadcn Data Grid Blocks (35) Browse 35 Shadcn Data Grid blocks across 8 categories.
- Shadcn Solutions Blocks (65) Browse 65 Shadcn Solutions blocks across 9 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 12 categories.
- Shadcn Marketing Blocks (24) Browse 24 Shadcn Marketing blocks across 4 categories.