Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Gradient Fill Stepper Block for React

A pottery firing schedule of five steps joined by a bar that fills in a soft ramp as a slider sets the hours into the current 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

Fill the line between two steps by the part that is done, with this gradient fill stepper for React with Base UI. A plus-marked frame holds a Steps line of five numbered circles joined by a bar: Load, Bisque, Glaze, Glost and Unload. The step you are on has a Slider, "Hours into this step", and the bar from its marker to the next fills by that fraction in a soft ramp from faint to full foreground. A step is complete at the slider's maximum, and the line beside it reads "5 of 8 h, 3 h left", worked out from the hours. "Glost done" and the buttons like it are the block's one Shine Button. The ramp is made of the theme's own foreground tones, so it follows any theme. For schedules, uploads that report a fraction and any step with a measured length.

FAQ

How do I change the steps and their hours?

FIRINGS lists each step with its id, title, sentence, temperature note and the hours it takes (total). START_HOURS is the hours already in when the page opens and START_STEP is the step it opens on. The bar, the slider's maximum and the counts are all worked out from them.

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

The hours are typed into the page and nothing talks to a kiln; the last step ends on a note that says so. To make it real, send the hours from settle, which runs when a drag or key press ends, to your API and read the stored hours into START_HOURS.

How is the fill made?

It is a child of the catalog's separator: a span whose width comes from a CSS variable, with a gradient from foreground at 15% to full foreground. Only tones of the theme are used, never a hue. In a right-to-left layout the ramp and the fill run from the other side, and the width transition is skipped when reduced motion is on.

What does a screen reader hear?

The slider is named "Hours into this step" and reads its value as "5 hours". When a drag or key press ends, the polite line reads "Glost: 5 of 8 h, 3 h left" once, and a move to another step puts it back to the step's position.

How does the keyboard work?

The step line is one tab stop on the current marker, with Arrow, Home and End between the markers you can reach. The slider is its own stop: Arrow keys change the hours by one and Home and End jump to none and all of them.

How does it look on a phone?

Only the numbers show on the line, with the step's name in a line under it. The slider is full width in a band of its own above the pinned foot.

All 100 stepper blocks