Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Micro Dots Stepper Block for Radix UI

A release board table where each of four releases has a strip of six 10 px dots for build to verify, a list of the stages in words and a button that moves it on.

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 where many things are in a flow at once, with this micro dots stepper table for React with Radix UI. A frame holds a table of four releases of a fictional product, v6.2 to v6.5, each with a strip of six 10 px dots for Build, Test, Stage, Canary, Roll out and Verify. Done dots are solid, the current one is ringed and later ones are hollow, and the stage's name sits under them in words. The strip is one button per row that opens a Popover listing the six stages with Done, Now or Up next, so the keyboard visits four stops instead of twenty-four. An icon button per row, named "Advance v6.3 to Canary", moves that release one stage on and a polite line says so; Reset board starts again. On a phone the State column drops and the dots and the button stay. For release boards, order lists and queues.

FAQ

Why is each strip one button?

A strip of six small targets in each of four rows would be twenty-four tab stops and each target far too small to press. One button per row opens the list of stages in words, which is also the only place the full names are readable by touch.

What does the Advance button do at the end?

At Verify it moves a release to Verified and then stays focusable but off (aria-disabled), labelled "v6.2 is verified"; pressing it says so in the status line. Keeping it focusable means focus is not lost when a row finishes.

Why a plain table and not the catalog Table?

Each cell holds buttons, and React Aria's Table is a keyboard grid that would swallow the arrow keys. A native table has the same roles on all four libraries, a caption for screen readers and column headers with scope.

What stays local, and how do I wire it for real?

The six stages are state in the block and nothing is built or shipped. To make it real, load the rows from your pipeline, call it from the advance handler and replace the status line with its answer.

How does it look on a phone?

The State column and the note under each version are hidden below the medium width. The version, the strip with its stage name and the Advance button stay, and the popover still lists every stage.

All 100 stepper blocks