# Beste UI > Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade. Markdown rendition of https://ui.beste.co/blog/32-shadcn-onboarding-blocks. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`. Last updated: 2026-07-22 Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json --- [All posts](/blog) July 22, 2026·12 min read # 32 shadcn Onboarding Blocks: Welcome Screens, Setup Wizards, and Tailored First-Run Flows for Next.js Thirty-two production-ready onboarding blocks built on shadcn/ui: welcome heroes, progress steppers, multi-step form wizards, persona and goal selectors, integration and billing setup, and completion screens. Each installs with one CLI command and exposes every visible value as a typed prop. onboardingshadcnreactnextjsux ![zieg](/_next/image?url=%2Fassets%2Fimages%2Fzieg.jpg&w=96&q=75&dpl=dpl_CY2dAqud5esqh3XyqpW5XSreDKej) ziegbuilding beste.co [zieg's website](https://zieg.beste.co)[zieg on X](https://x.com/forwardset)[zieg on LinkedIn](https://linkedin.com/in/ziegfiroyt) Onboarding is where the copy-paste component model usually runs out of road. A hero pastes in a minute because it is static. A first-run flow is not: it has a stepper that has to remember where the user is, selectable cards that change what happens next, form fields with validation, toggles that write real preferences, and a completion screen that has to summarize everything the user just did. So most teams skip the components and reach for a full onboarding SDK, inherit a product tour engine and its runtime, and then spend a week bending it back toward the design they actually wanted. We think onboarding deserves the same treatment we gave [landing pages](/blog/landing-page-in-ten-blocks) and [dashboards](/blog/13-shadcn-ui-dashboard-blocks): real components you own, not a black box you rent. Today we are shipping thirty-two onboarding blocks. Welcome screens, progress trackers, setup wizards, personalization steps, configuration panels, and the completion screen that ties them together. Each installs with one command, renders a complete demo out of the box, and hands you every visible value as a typed prop. ### What actually installs Every block is a single React component, and the shadcn CLI resolves its whole dependency tree in one shot: bashCopy ``` npx shadcn add "https://ui.beste.co/r/onboarding13?email=YOUR_EMAIL&license_key=YOUR_KEY" ``` That command lands three layers in your codebase: 1. **The screen** at `components/beste/block/onboarding13.tsx`. Plain TSX you own and edit. 2. **The shadcn/ui primitives** it composes (`button`, `badge`, `card`, `input`, `switch`, `progress`, and so on), installed only if you do not already have them. 3. **Nothing else.** There is no runtime dependency on us, no onboarding provider, no license check in your bundle, no state machine you have to learn. If you are on Base UI instead of Radix, swap `/r/` for `/r-base/` in the URL and you get the [Base UI build](/blog/base-ui-the-new-default) of the same component. For the full command and license setup, see the [installation docs](/docs/installation). ### The whole arc of a first run An onboarding flow is a sequence, so the set is organized as one. The thirty-two blocks map onto the stages a real first-run experience moves through: greet, orient, tailor, configure, and confirm. You do not install all of them. You pick one from each stage that fits your product and wire them into a route. #### Stage one: the welcome The first screen sets tone and expectation. There are four takes, from a full hero to a single line of copy. Welcome Hero with Step Indicator [View block](/block/onboarding1) Loading preview… onboarding1: a centered welcome hero with a step counter and dual CTAs. Heading, subheading, image, and both buttons are props. `onboarding1` is the classic guided-setup opener. If you want to sell the value before the setup, [onboarding2](/block/onboarding2) is a two-column layout with a feature checklist, a user count, and a star rating for social proof. [onboarding3](/block/onboarding3) strips it back to a branded icon, one heading, and one call to action for products that would rather not make a fuss. [onboarding4](/block/onboarding4) leads with a video thumbnail and a duration badge for a product tour that opens on a demo. #### Stage two: showing progress Once setup starts, users want to know how much is left. Five blocks answer that question in different visual languages. Horizontal Steps with Progress Line [View block](/block/onboarding5) Loading preview… onboarding5: a horizontal stepper with numbered circles and a connecting progress line, ideal for account setup wizards. `onboarding5` is the horizontal stepper you have seen on every checkout. [onboarding6](/block/onboarding6) turns it vertical, with room for a description under each step, which suits a workspace setup that needs explaining. [onboarding7](/block/onboarding7) frames the whole thing as a percentage bar over a task checklist, the pattern that quietly gamifies completion. [onboarding12](/block/onboarding12) uses a circular percentage ring with completion stats for profile-strength screens, and [onboarding9](/block/onboarding9) presents each step as a numbered content card for a product walkthrough. #### Stage three: the wizard itself When onboarding collects data, it needs a container that holds several steps and moves between them. Multi-Step Form Wizard [View block](/block/onboarding8) Loading preview… onboarding8: a multi-step form wizard with a segmented progress bar and back/next navigation for account and company details. `onboarding8` is the multi-step form wizard: segmented progress, fields per step, and back and next controls. [onboarding11](/block/onboarding11) is the desktop-scale version, a side-navigation wizard with content panels for setups that span many configuration screens. [onboarding10](/block/onboarding10) takes the opposite stance with an accordion where each step expands to reveal its own instructions and action buttons, so users can complete tasks in any order and at their own pace. If you want to build the wizard's fields on solid footing, our [forms deep dive](/blog/shadcn-forms-react-hook-form-tanstack-formisch) covers the validation layer these pair with. ### Tailored onboarding, not one-size-fits-all The stages above are structure. The blocks that make onboarding feel personal are the ones that branch the experience based on who the user is and what they came to do. This is the difference between an onboarding flow and a tailored one, and it is where a good first run earns its retention. Role Persona Selector [View block](/block/onboarding13) Loading preview… onboarding13: a role persona selector. Each card carries an icon, title, and description with a selectable highlight state, so you can fork the rest of the flow by persona. `onboarding13` asks users to pick their role or persona, which lets you send a marketer and an engineer down different paths from the very next screen. [onboarding17](/block/onboarding17) does the same with a primary goal, and each goal card previews the feature set it recommends, which is the cleanest way to tailor a multi-purpose platform. [onboarding16](/block/onboarding16) is an interest-tag picker for content platforms and newsletters that personalize their feed, and [onboarding27](/block/onboarding27) is a short attribution survey that captures how the user found you without derailing the flow. Branch once, reuse everywhere Persona and goal selectors are most valuable when their answer outlives the onboarding. Store the selected value on the account, then read it on the dashboard, in empty states, and in lifecycle email. The selector screen is cheap; the personalization it unlocks compounds. ### The configuration screens nobody enjoys building Every serious product needs a handful of setup screens that are pure friction to build and easy to get subtly wrong. The set covers the common ones so you do not rebuild them per project. Integration Connector Grid [View block](/block/onboarding15) Loading preview… onboarding15: an integration connector grid with per-service connect and skip actions, for apps that lean on Slack, GitHub, and Google. [onboarding14](/block/onboarding14) creates a workspace with a name and URL slug and pairs it with a team-invite section, the standard opening move for collaborative SaaS. [onboarding19](/block/onboarding19) is the profile step: avatar, display name, bio, and timezone. [onboarding29](/block/onboarding29) collects company name, team size, and industry for B2B context. [onboarding18](/block/onboarding18) is notification consent done with real toggles, [onboarding23](/block/onboarding23) is a security step for two-factor, recovery email, and backup codes, and [onboarding25](/block/onboarding25) lets users choose a theme and accent color before they ever see the app. For products that start from existing data, [onboarding26](/block/onboarding26) offers import options and CSV upload, [onboarding20](/block/onboarding20) is a starter-template picker, and [onboarding22](/block/onboarding22) and [onboarding28](/block/onboarding28) handle plan limits and billing setup when payment is part of the flow. Two more round out the experience: [onboarding24](/block/onboarding24) is a keyboard-shortcuts cheat sheet for power tools, and [onboarding30](/block/onboarding30) is a feature-tour carousel with dot indicators for the first-time walkthrough. #### Stage five: the finish line Onboarding Completion Screen [View block](/block/onboarding21) Loading preview… onboarding21: a completion screen that summarizes what was configured and offers quick-start links, so the flow ends with momentum instead of a dead end. `onboarding21` closes the loop. It recaps what the user set up and hands them clear next actions, which is the difference between a flow that dumps users at an empty dashboard and one that points them at their first real task. ### Editorial getting-started sections too Not every onboarding lives behind a login. Two blocks are marketing-page "how it works" sections rather than app screens, for landing pages that need to explain the first three steps before signup. Three Step Getting Started [View block](/block/onboarding31) Loading preview… onboarding31: a getting-started section with monospace-numbered steps under hairline rules and an accent button, at home on a landing page. [onboarding32](/block/onboarding32) is its counterpart, a reversed split that floats a live import dropzone over an image tile next to three numbered steps. Both are content sections you drop between a hero and a pricing table, not screens in a wizard. ### Every value on the screen is a prop The rule we held the whole set to is the same one behind the [dashboard set](/blog/13-shadcn-ui-dashboard-blocks): **if you can read it, you can pass it.** Each block renders its full demo with zero props, so `` looks exactly like the preview above. Every prop is optional and falls back to the demo value, which means you replace demo copy with real content one field at a time instead of filling a config object before anything appears: tsxCopy ``` import { Onboarding13, onboarding13Demo } from "@/components/beste/block/onboarding13"; export default function ChooseRolePage() { return ( ); } ``` Every block exports its demo object too (`onboarding13Demo` here), which doubles as documentation: the exact shape your data needs, in a file you can open. Because the demo is the default, the state machine stays yours to keep simple. Hold the current step in a `useState`, render one block per step, and advance through each block's own controls. There is no flow engine to configure and nothing proprietary to serialize. ### The details you would have had to get right yourself * **Server rendering is safe.** No `Date.now()` or `Math.random()` in render paths, so the screens hydrate without mismatch warnings. * **Mobile holds up.** Steppers reflow, side-nav wizards collapse, and grids stack, because onboarding on a phone is not the edge case. * **Keyboards and labels work.** Toggles, selects, and inputs are the accessible shadcn primitives underneath, and icon-only controls carry `aria-label`s. * **Theming is token-based.** Everything reads from your CSS variables, so the blocks adopt your brand and your dark mode the moment they land. If you are still shaping those tokens, [the anatomy of a shadcn theme](/blog/anatomy-of-a-shadcn-theme) walks through the variables these depend on. * **The code is yours.** It is TSX in your repo, structured the way you would have written it, with no wrapper package to fork when a real requirement arrives. ### The full set Every block links to a live, full-screen preview on its page. Browse them all under the [onboarding category](/blocks/onboarding). | Block | Screen | Best for | | ----------------------------------- | ----------------------------------- | ---------------------------------- | | [onboarding1](/block/onboarding1) | Welcome hero with step indicator | Guided multi-step setup openers | | [onboarding2](/block/onboarding2) | Split welcome with social proof | SaaS that sells value first | | [onboarding3](/block/onboarding3) | Minimal welcome with icon | Simple, low-friction intros | | [onboarding4](/block/onboarding4) | Video introduction screen | Product tours led by a demo | | [onboarding5](/block/onboarding5) | Horizontal steps with progress line | Account setup wizards | | [onboarding6](/block/onboarding6) | Vertical timeline steps | Setups that need explaining | | [onboarding7](/block/onboarding7) | Progress bar with task checklist | Gamified completion | | [onboarding8](/block/onboarding8) | Multi-step form wizard | Collecting user and company data | | [onboarding9](/block/onboarding9) | Step cards with numbered indicators | Feature walkthroughs | | [onboarding10](/block/onboarding10) | Accordion steps with actions | Self-paced setup guides | | [onboarding11](/block/onboarding11) | Side navigation wizard | Multi-screen configuration | | [onboarding12](/block/onboarding12) | Circular progress with checklist | Profile-completion nudges | | [onboarding13](/block/onboarding13) | Role persona selector | Branching by persona | | [onboarding14](/block/onboarding14) | Workspace setup with team invite | Collaborative SaaS | | [onboarding15](/block/onboarding15) | Integration connector grid | Apps built on third-party services | | [onboarding16](/block/onboarding16) | Interest tag picker | Personalized content feeds | | [onboarding17](/block/onboarding17) | Goal selector with paths | Tailoring a multi-purpose platform | | [onboarding18](/block/onboarding18) | Notification preferences | Granular consent during setup | | [onboarding19](/block/onboarding19) | Profile setup card | The personal-details step | | [onboarding20](/block/onboarding20) | Template starter picker | Project-creation flows | | [onboarding21](/block/onboarding21) | Completion screen | Ending with clear next steps | | [onboarding22](/block/onboarding22) | Plan overview with usage limits | Introducing plan limits | | [onboarding23](/block/onboarding23) | Security setup | Two-factor and recovery | | [onboarding24](/block/onboarding24) | Keyboard shortcuts cheat sheet | Power-user tools | | [onboarding25](/block/onboarding25) | Theme and appearance picker | Visual customization up front | | [onboarding26](/block/onboarding26) | Data import selector | Migration flows | | [onboarding27](/block/onboarding27) | Attribution survey | Marketing attribution at signup | | [onboarding28](/block/onboarding28) | Billing setup with cycle toggle | Collecting payment in-flow | | [onboarding29](/block/onboarding29) | Company info form | B2B organizational context | | [onboarding30](/block/onboarding30) | Feature tour carousel | First-time feature highlights | | [onboarding31](/block/onboarding31) | Three-step getting started | Landing-page "how it works" | | [onboarding32](/block/onboarding32) | Data import split | Landing-page import section | Four of them, including the welcome hero and the minimal intro, are free to install and try before you commit. The rest are part of Beste UI Pro. ### Where these get discovered We publish the whole catalog as a structured, machine-readable feed so search engines and AI assistants can index it directly, which is how a query like "shadcn onboarding blocks" can surface the right category instead of a wall of screenshots. That is the idea behind engines like [shoogle.dev](https://shoogle.dev), which discover and rank sites through structured signals rather than crawling rendered pages. If you want your own component library to be found the same way, our [MCP server](/blog/beste-ui-mcp-server) exposes the catalog to assistants over the same kind of structured data. ### Wire your first flow this week A practical route: pick a welcome (`onboarding1` or `onboarding3`), a tailoring step (`onboarding13` or `onboarding17`), one or two configuration screens your product actually needs, and the completion screen (`onboarding21`). Hold the step index in state, render one block per step, and store each result on the account as it comes in. Because every block ships complete, your flow looks finished from the first commit, and you refine copy and data field by field instead of staring at a broken screen in review. Ship onboarding this week All thirty-two onboarding blocks, the dashboard set, and every other Pro block are included in one license. Install them straight from the CLI and own the code. [Get ProGet Pro](/pricing) ## Build it with real blocks Every section in this post is a component you can copy into your own codebase and own outright. [Browse blocksBrowse blocks](/blocks)[Read more postsRead more posts](/blog) ## Ship the interface, keep the code. New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight. [Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing) ### Library * [Blocks](/blocks) * [Pages](/pages) * [Pieces](/pieces) * [Components](/components) * [Search](/search) ### Learn * [Docs](/docs) * [AI & MCP](/docs/mcp) * [Blog](/blog) * [Free tools](/tools) * [What's new?](/changelog) * [Website Builder](https://beste.co) ### More * [Pricing](/pricing) * [Referrals](/referrals) * [License](/license) * [GitHub](https://github.com/beste-co/beste-ui) ### Shadcn Blocks * [Shadcn Hero Blocks](/blocks/hero) * [Shadcn Feature Blocks](/blocks/feature) * [Shadcn Pricing Blocks](/blocks/pricing) * [Shadcn CTA Blocks](/blocks/cta) * [Shadcn FAQ Blocks](/blocks/faq) * [Shadcn About Blocks](/blocks/about) * [Shadcn Stats Blocks](/blocks/stats) * [Shadcn Footer Blocks](/blocks/footer) * [Shadcn Navigation Blocks](/blocks/navigation) * [Shadcn Auth Blocks](/blocks/auth) * [Shadcn Ecommerce Blocks](/blocks/ecommerce) * [Shadcn Portfolio Blocks](/blocks/portfolio) * [Shadcn Showcase Blocks](/blocks/showcase) * [Shadcn Careers Blocks](/blocks/careers) * [Shadcn Onboarding Blocks](/blocks/onboarding) * [Shadcn Coming Soon Blocks](/blocks/coming-soon) * [Shadcn Post Blocks](/blocks/post) * [Shadcn Legal Blocks](/blocks/legal) * [Shadcn Workflow Blocks](/blocks/workflow) * [Shadcn News Blocks](/blocks/news) © 2026, [Beste](https://beste.co). All rights reserved.