Onboarding blocks for every framework.

The 100 onboarding blocks are the screens that follow sign-up: welcome dialogs and tours, checklists, one-choice and several-choice questions, profile, workspace and team setup, imports, security and developer setup. Each is one step or one surface, and nothing is created or saved.

They are grouped into 13 kinds: Welcome and tours, Checklists, Milestones and recaps, One choice, Several choices, Profile and account, and more. Some are overlays on a drawn app (a tour, a welcome dialog), others are whole-screen steps, and a checklist is a panel you dock in the app.

Welcome Dialog Onboarding and Product Tour Onboarding introduce the app. Setup Checklist Onboarding is the docked list of steps with a count. Welcome Slides Carousel Onboarding is a slide intro. Workspace Setup Onboarding and API Key Setup Onboarding are form steps for a team product or a developer tool.

A comment describes the step, then typed constants hold the product name, options and the step number, and the component with its state. A step screen has constants such as STEP and STEPS that print Step 2 of 5 and the progress line.

Each step block is one screen, so wire them with your router: one route per step, read the step number from the route and pass STEP and STEPS in. Hold answers in a store or save them per step, and send the user to the next route from the Continue handler.

Handlers end with a comment such as Create the workspace on your server here, or Save the choice on your server here, and the demo only says what a real app would do. Call your API or server action there and set the result from its response; Skip should record the skip.

Product Tour Onboarding anchors each stop to a part of the page and shows 2 of 4 with Back, Next and Skip, arrow-key stepping and Escape. In your app keep the real Tour and drop the in-place copy it draws for the preview. Change the stops' anchors and text to point at your own elements.

Setup Checklist Onboarding holds each step's done state, opens the next one, shows how many remain and can fold into a pill. Seed the done flags from your user's real progress and mark a step done where the user completes it. The ticks stay in the page only, so persist them yourself.

Unless a block says otherwise, nothing is stored: no localStorage and no cookie. To show a welcome or a tour only once, save a flag on the user (or in a cookie) when it is finished or skipped, and render the block only when the flag is missing.

This page lists 100 of the category's 100 onboarding blocks for React on Base UI. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The onboarding blocks here are written on Base UI primitives; the layout, the copy and the theme tokens are the same on every base, and the install path follows it (/r/onboarding-accessibility-settings.json). The other bases are one picker away from /onboarding-block.

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens, and imports our components (installed with it) on Base UI. Icons come from lucide-react.

Open a block, copy its command and run it: `npx shadcn@latest add` with the block's registry URL, such as /r/onboarding-accessibility-settings.json for Accessibility Settings Onboarding. The code is copied into your project and it's yours to edit.

The block's file and the components it imports: Accessibility Settings Onboarding brings Button, Guides, Kbd, Progress, Shine Button and Switch, installed before it. Nothing else changes in your project.

Use the filters above the grid: 13 kinds of onboarding block, led by developer setup (12), security and privacy (11), workspace and team (10) and connect and import (10), and sort by popular or name. A good first look: Accessibility Settings Onboarding, Achievement Trail Onboarding and AI Assistant Introduction Onboarding. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a onboarding block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the guides and steps kinds.

Open its page and use the full-screen viewer (/view/onboarding/accessibility-settings) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each onboarding block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Base UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the onboarding blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 onboarding blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a onboarding block, read it with get_block and install it on your React on Base UI stack.

Pass `category: "onboarding"` to search_blocks to search only the 100 onboarding blocks, or to list_blocks for the 13 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "onboarding", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.