Stepper blocks for every framework.

They are 100 React stepper and wizard layouts, in 13 groups: numbered rails, dots and minimal, bars and fills, shapes and paths, rails and windows, overlays and navigators, topologies, states and outcomes, step metadata, motion and timing, keys and editing, forms in steps, domain wizards. Each shows a flow of steps with its own panels, from a plain numbered rail to a dialog wizard or a branching path.

Horizontal Numbered Stepper and Vertical Numbered Stepper are the plain rails, Dot Indicators Stepper shrinks the steps to dots, Dialog Wizard Stepper runs the steps inside a dialog, and Checkout Flow Stepper and Account Setup Stepper are whole product wizards with their fields.

Most are built on the catalog Steps component: a list of items with a trigger, an indicator, a title, a separator and a content panel per step, plus Next and Previous controls. The step titles, descriptions and panel text are typed in the file, so you replace them with your own flow.

Validation Errors Stepper checks only the step you are on when you press Next. A failing step shows an alert glyph and Needs attention, and a problems band lists each problem with a Fix button that opens the step and focuses the field. Hard problems block and soft ones are warnings. Add your own rules in the same check.

Checkout Flow Stepper turns Next off until the step is satisfied and gives the reason in the foot line the button points to. Pressing the off button still helps: it shows each problem under its field and moves focus to the first. Its card fields are checked in the page only; a real checkout should use the fields your payment provider hosts so card digits never reach your code.

Draft Saved Stepper saves typing after 600 ms of quiet and moves each step's line from Saving to Saved, but the draft lives in the page's memory and is lost on reload. Send the draft to your server (or local storage) from that debounced save, and load it back when the wizard opens.

Optional Skippable Stepper marks a step Optional, offers Skip, clears what was in it and lists skipped steps on the review with Add now. Locked Gated Stepper keeps a step locked, with its reason in words, until the steps it depends on pass. Both draw done-ness from the answers, so decide your rule once and derive the state.

Branching Paths Stepper derives its rail from the choice made on an earlier step: the steps after it are worked out from that choice and the paths merge at the last one. Choosing again returns to the choice step and resets the path steps. Build the step list from state in the same way.

The last step in the demos ends on a result that says nothing was sent. Send your request from the final action, show a pending state on its button, and only move to the result when it succeeds. Dialog Wizard Stepper relabels its button on the last step as Create drive and then Done, a pattern you can reuse.

This page lists 100 of the category's 100 stepper 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 stepper 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/stepper-accordion-expand.json). The other bases are one picker away from /stepper-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/stepper-accordion-expand.json for Accordion Expand Stepper. The code is copied into your project and it's yours to edit.

The block's file and the components it imports: Accordion Expand Stepper brings Accordion, Button, Data List, Field, Guides, Input, Number Input, Select and Shine Button, installed before it. Nothing else changes in your project.

Use the filters above the grid: 13 kinds of stepper block, led by numbered rails (10), shapes and paths (10), rails and windows (9) and step metadata (9), and sort by popular or name. A good first look: Accordion Expand Stepper, Account Setup Stepper and Analytics Sidebar Stepper. 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 stepper 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 indicators, layouts and surfaces and states and rules kinds.

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

Each stepper 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 stepper 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 stepper 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 stepper block, read it with get_block and install it on your React on Base UI stack.

Pass `category: "stepper"` to search_blocks to search only the 100 stepper 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", "stepper", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.