DocsSupportPricing
Roadmap (has updates coming soon)XFigma3.6K
Sign inGet All-Access
Categories
App ShellAdded 10 new app shell blocks31
Auth20
Card43
Chart30
Dashboard8
Dialog14
Empty State14
Event Calendar6
Flow4
Form12
Gantt4
Kanban Board10
List11
Navbar13
Onboarding9
  • Onboarding 1
  • Onboarding 2
  • Onboarding 3
  • Onboarding 4
  • Onboarding 5
  • Onboarding 6
  • Onboarding 7
  • Onboarding 8
  • Onboarding 9
Profile10
Schedule10
Settings16
Sheet11
Stats15
Timeline9
Wizard7

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 (307) Browse 307 Shadcn Application blocks across 22 categories.
  • Shadcn Data Grid Blocks (38) Browse 38 Shadcn Data Grid blocks across 8 categories.
  • Shadcn Solutions Blocks (66) Browse 66 Shadcn Solutions blocks across 9 categories.
  • Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
  • Shadcn Marketing Blocks (60) Browse 60 Shadcn Marketing blocks across 8 categories.
  • Shadcn AI & Agents Blocks (17) Browse 17 Shadcn AI & Agents blocks across 2 categories.

Frequently Asked Questions

What is included in an onboarding block?

The complete flow: every step panel, the step indicator, forward and back navigation, animated transitions, validation affordances on required fields, and the success screen. Field values are held in local React state with realistic placeholder options. Account creation, persistence and email sending are left to you, since those belong to your backend.

Can I add or remove steps?

Yes, and it is the most common edit. The flows are built on the free ReUI Stepper, where steps are declared as data and the indicator follows the array, so deleting the discovery source step or adding a billing step is a local change. The sidebar, dot and progress bar variants all read from the same step definition.

Do these work as a modal instead of a full page?

One of the flows already runs entirely in a Dialog with a clickable dot stepper and animated steps, which is the shortest path if you want onboarding layered over the app. The full-page variants can be moved into a dialog as well, though the split-screen and marketing hero shells are designed for the width of a dedicated route.

How do I install one?

Copy the shadcn CLI command from the block page, for example pnpm dlx shadcn@latest add @reui/onboarding-6 for the eight-step flow with the agent picker and API setup. The CLI copies each step component and its dependencies into your project. Blocks are available for both the Base UI and Radix registries and follow your ReUI style and tokens.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.

Application

  • App ShellAdded 10 new app shell blocks
  • Auth
  • Card
  • Chart
  • Dashboard
  • Dialog
  • Empty State
  • Event Calendar
  • Flow
  • Form
  • Gantt
  • Kanban Board
  • List
  • Navbar
  • Onboarding
  • Profile
  • Schedule
  • Settings
  • Sheet
  • Stats
  • Timeline
  • Wizard

Solutions

  • Agents
  • AI Ops
  • Analytics
  • Billing
  • Bookings
  • CRM
  • Files
  • Inventory
  • Users

AI & Agents

  • AI Chat
  • Agent Activity

Templates

  • E-commerce
  • SaaS
  • Dashboard
  • Landing
  • All templates

eCommerce

  • Category Card
  • Checkout
  • Comparison
  • Coupon
  • Filter Sidebar
  • Product Card
  • Product Detail
  • Product Grid
  • Receipt
  • Review
  • Shopping Cart
  • Wishlist
  • Shop Hero

Data Grid

  • BaseAdded a rate card Data Grid block with a price breakdown dialog
  • Columns
  • Drag & Drop
  • Editing
  • Expansion
  • Filtering
  • Grouping
  • Virtualization

Marketing

  • Blog
  • CompareNew Compare category with 3 versus section blocks
  • Contact
  • CTAAdded 11 new CTA blocks
  • FAQ
  • Hero
  • How It WorksNew How It Works category with 5 numbered step blocks
  • PricingNew Pricing category with a 4-tier pricing table block

Resources

  • Components
  • Blocks
  • Icons
  • MCP for Agents
  • Docs
  • Support
  • Pricing
  • Tailwind Plus Alternative
  • Roadmap(has updates coming soon)
  • AffiliateSoon

Legal

  • Privacy Policy
  • Terms & Conditions
  • License
  • Refunds
  • Cookies

© 2026 ReUI. All rights reserved.

3.6K
  1. Blocks
  3. Application
  5. Onboarding

Shadcn Onboarding Blocks: Workspace Setup Wizards

Share

Every block answers one brief: get a new user from signup to a workspace they can use. The 9 flows run six to eight steps, then land on a success screen.