Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Mini Sidebar Stepper Block for Radix UI

A tax-year organiser in a window with a 56 px rail of numbered circles that widens to show step names, number fields for each step and a review that works out the estimated tax.

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

Keep a long form's map out of the way with this icon-rail stepper for React with Radix UI. A window framed by a hairline with a plus mark on each corner holds a top bar (Tax year 2026, an "Expand rail" Toggle, Back and "Next", a Shine Button and the only colored control), a 56 px rail and the pane. The rail is a vertical Steps list of numbered circles joined by a line: pointing at or focusing a circle shows its name, and the toggle widens the rail to 200 px so every title and hint shows. The pane asks two numbers per step in an Input (income, expenses, mileage, reliefs) and the Review step works taxable profit and an estimated tax out from what was typed, with mileage in pence per mile. The first step wants an income before it lets you on. On a phone the rail is a row of circles and the toggle is gone. For tax, expense and application forms with many short sections.

FAQ

How does the rail widen?

The toggle only changes a class on the rail: its width goes from 3.5rem to 13rem with a short transition (none under reduced motion), and the step titles lose their screen-reader-only class. The names are always in the markup, so the collapsed rail is still labelled for assistive technology.

How are the totals worked out?

Figures are kept as typed text and read as whole numbers. Mileage is miles times 45 or 24 pence, rounded to whole pounds, profit is income less expenses, mileage and reliefs (never below zero), and the estimate is a flat 20 percent. Change TAX_PERCENT and the rates in mileageOf for your own rules; none of this is tax advice.

What stays local?

Every figure is component state and is lost on reload, and Finish shows "Nothing was filed in this demo". To make it real, send the review's numbers to your filing service in the advance handler on the last step.

How does the keyboard work?

The rail is one tab stop on the current step, arrow keys move between reachable circles, Enter opens one, and the name label shows on focus as well as on hover. The toggle is a button that responds to Space and Enter.

What happens on a phone?

The rail becomes a horizontal row of five circles above the pane, the toggle and the line between the circles are hidden, and Back is hidden from the top bar (the circles go back).

Does it work right to left?

Yes. The rail sits at the start, the name label opens toward the pane in both directions, and amounts are marked left to right.

All 100 stepper blocks