Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Inline Breadcrumb Stepper Block for React Aria

A four-step access-policy builder whose breadcrumb lists only the steps you have reached, with earlier crumbs that take you back and a quiet hint naming the next step.

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

Let a trail show where you have been with this growing breadcrumb stepper for React with React Aria. A hairline frame with a plus mark on each corner holds a breadcrumb at its top that starts with one crumb, "Workspace", and grows by one for each step you reach: Team, Permissions, Audit log. Each earlier crumb is a button that takes you back and drops the crumbs after it, the current crumb is the page, and a quiet "Next: Team" hint names what comes after. Below it a Steps panel holds one choice per step: a Radio Group of three workspaces, a list of Switch rows for the teams and for the permissions, then a Data List read-back. Continue is the block's one Shine Button and stays off until a team is picked. For access, role and setup builders where the path matters more than a progress bar.

FAQ

How do I change the steps and the choices?

STAGES lists the four steps, and WORKSPACES, TEAMS and PERMISSIONS list the choices with a label and a blurb. The read-back and the published summary are worked out from the choices. To add a step, add it to STAGES, add a StepsContent with the next index and a heading from headingId.

What stays local, and how do I make it real?

Everything. The choices live in component state and the last step ends on "Policy published in this demo": nothing is saved and no team is told. To make it real, send workspace, teams and permissions from the advance handler on the last step to your API.

Why does the trail shrink when I go back?

Because it shows the path to where you are, not the whole route. Pressing an earlier crumb moves you there and the crumbs after it disappear; Continue brings them back one at a time. The hint beside the trail always names the step after the current one.

Why is Continue sometimes off?

On the Team step at least one team has to be switched on. The button stays in place but is marked unavailable, and pressing it says "Pick at least one team first." in the status line instead of moving on.

How does the keyboard work?

The crumbs are ordinary buttons in a list inside a labelled nav, so Tab reaches each one and Enter or Space takes you back to it. After a move the new step heading takes focus and a polite line reads "Step 3 of 4: Permissions".

How does it look on a phone?

The trail wraps onto a second line when it needs to, and the hint sits on its own line under it, so the panel below does not jump as the trail grows. The foot sticks to the bottom of the screen with Back and Continue side by side.

All 100 stepper blocks