Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Branching Paths Stepper Block for Radix UI

A heating-upgrade planner whose step list is rebuilt from a choice between a heat pump and a gas boiler, with a drawn two-lane fork that marks the chosen lane.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show a job that splits in two, with this branching stepper for React with Radix UI. A hairline frame with plus marks holds a drawn fork across the top: a survey and a choice on the trunk, a Heat pump lane and a Gas boiler lane, and a merge at Finalize. Below it a Steps rail lists five numbered steps (Survey, Choose system, two steps of the chosen path, Finalize) beside the open step's panel. The Choose step holds two choice cards with the time each path takes on site; the rail is worked out from the choice, so picking Heat pump gives Ground check and Install, and Gas boiler gives Flue route and Install. Going back and choosing again resets the path steps. "Continue" is the block's one Shine Button and "Send quote" ends on a quote that says it is in this demo. For installers, onboarding flows and any process with a real fork.

FAQ

How does the choice change the steps?

stagesOf(choice) in the file returns the survey, the choice, the chosen path's two steps and Finalize, so the rail always has five steps. Until a system is chosen the two path steps are placeholders that say they follow your choice. Add a third system by adding a card to SYSTEMS and a list of steps to pathOf.

What happens when I change my choice later?

You can go back to Choose system at any time. Picking the other system swaps the two path steps and resets how far you have reached to the choice itself, so you walk the new path from its first step. Picking the same system again changes nothing.

Why does Continue say Choose a system first?

The Choose step cannot be left without a choice. The button is marked aria-disabled rather than disabled, so it keeps its place and stays focusable, and pressing it says what is missing in the status line.

What stays local?

The step, the choice and how far you have reached are component state, lost on reload. Nothing is booked, priced or sent, and "Send quote" ends on "Quote ready in this demo". To make it real, post choice from the advance handler on the last step and load the survey rows from your job record.

Does it work right to left?

Yes. The rail and the divider switch sides. The fork is drawn left to right inside its own box so the trunk, lanes and merge keep their order, and durations are marked so "3 days" reads the same in any language.

How does it look on a phone?

The fork stays at the top and scales down, the rail turns into a row of five numbered circles with the names read aloud only, and a line under it says "Step 2 of 5: Choose system". The panel and the buttons follow in their usual order.

All 100 stepper blocks