DocsSupportPricing
Roadmap (has updates coming soon)XFigma3.7K
Sign inGet All-Access
Categories
App Shell35
Auth20
Card43
Dashboard8
Dialog14
Empty State14
Event Calendar6
Flow4
Form12
Gantt4
Kanban Board10
List11
Navbar13
Onboarding9
  • Live Preview Wizard
  • Sidebar Stepper Wizard
  • Split-Screen Signup
  • Centered Setup Flow
  • Onboarding Dialog
  • Agent & API Setup
  • Screenshot Carousel Setup
  • CLI Agent Setup
  • Marketing Hero Signup
Profile10
Rich Text Editor5
Schedule10
Settings16
Sheet24
Stats2 meter cards moved here from Charts, 17 in all17
Timeline9
Whiteboard2
Wizard7

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.

When to use

  • A first-run setup after signup that collects profile, role, team size, goals and teammate invites
  • Workspace creation shown as a full page, beside a product preview or in a modal over the app
  • Developer tool signups that end by picking a coding agent and copying its CLI install commands

When not to use

  • A multi-step business task such as billing, vendor intake, a product listing or a transfer: use the Wizard blocks
  • Only a progress indicator to place above step content you already built: use the Stepper component
  • A purchase flow with shipping, payment and an order summary beside the steps: use the Checkout blocks

Agent notes

  • completeOnboarding only waits on a window.setTimeout before the ready screen; post the collected answers to your API there
  • Replace ONBOARDING_STEPS, ROLE_OPTIONS, GOAL_OPTIONS and DEFAULT_INVITES in data.tsx; the step order and titles come from ONBOARDING_STEPS
  • The timezone Combobox over TIMEZONE_GROUPS takes no value or onValueChange, so the picked zone never reaches component state

Third-party API docs

  • Motion v12: API reference, docs, used by 8 of 9 blocks (the docs follow the latest Motion, with no React API break since v12)
Markdownhttps://web.dev.reui.io/blocks/application/onboarding.md
MCPsearch({ query: "onboarding", type: "block", category: "onboarding" })
Full index for agents:llms.txtReUI MCP setup

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.

  • Live Preview Wizard Six-step workspace onboarding wizard with stepper progress and a live inbox preview pane
  • Sidebar Stepper Wizard Six-step workspace onboarding wizard with left sidebar vertical stepper and animated success state
  • Split-Screen Signup Split-screen workspace onboarding wizard with vertical stepper sidebar and animated dot-sphere panel
  • Centered Setup Flow Six-step workspace onboarding wizard with top progress bar and success screen
  • Onboarding Dialog Multi-step workspace onboarding dialog with dot stepper, animated steps, and success screen
  • Agent & API Setup Eight-step workspace onboarding wizard with progress stepper, AI agent picker, copyable API setup
  • Screenshot Carousel Setup Six-step workspace onboarding wizard with top progress bar and screenshot carousel rail
  • CLI Agent Setup Dark 8-step workspace onboarding wizard with progress bar, agent picker, and CLI setup checklist
  • Marketing Hero Signup 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 (303) Browse 303 Shadcn Application blocks across 23 categories.
  • Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
  • Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
  • Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
  • Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
  • Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
  • Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 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 Shell
  • Auth
  • Card
  • Dashboard
  • Dialog
  • Empty State
  • Event Calendar
  • Flow
  • Form
  • Gantt
  • Kanban Board
  • List
  • Navbar
  • Onboarding
  • Profile
  • Rich Text Editor
  • Schedule
  • Settings
  • Sheet
  • Stats2 meter cards moved here from Charts, 17 in all
  • Timeline
  • Whiteboard
  • Wizard

Data Grid

  • Base
  • AdvancedAdded 2 new Data Grid Advanced blocks, 5 in all
  • Columns
  • Drag & Drop
  • Editing
  • Expansion
  • Filtering
  • Grouping
  • Virtualization

Charts

  • Area ChartAdded a new Inbound Leads area chart block
  • Bar Chart
  • Composed Chart
  • Line Chart
  • Pie Chart
  • Radial Chart
  • Sankey ChartNew Sankey Chart category with 3 flow chart blocks
  • Slope ChartNew Slope Chart category with 2 rank-shift chart blocks
  • Sparkline
  • Status Tracker

AI & Agents

  • AI Chat
  • Agent Activity
  • AI UsageNew AI Usage category with 2 spend blocks

Solutions

  • Dev Ops
  • AI Ops
  • CRM
  • Agents
  • Analytics
  • Billing
  • Bookings
  • Files
  • Inventory
  • Users
  • Digital TwinNew Digital Twin category with 2 interactive 3D blocks

Templates

  • All templates

eCommerce

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

Marketing

  • Blog
  • Compare
  • Contact
  • CTA
  • FAQ
  • Hero
  • How It Works
  • Pricing

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.7K
  1. Blocks
  3. Application
  5. Onboarding
DocsMarkdown

Shadcn Onboarding Blocks: Workspace Setup Wizards

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.