Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Size Weighted Stepper Block for Radix UI

A wedding plan on a rail of five circles sized by the hours each job takes, where marking a job done moves a share-of-effort figure by its weight rather than by one 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

Show that steps are not equal, with this weighted stepper for React with Radix UI. A plus-marked frame opens on a figure, "38% of the effort done", with a thin Progress bar and a key for Light, Medium and Heavy. Below it a Steps rail holds five circles for the jobs of a wedding plan (Venue, Guest list, Catering, Flowers and Music), each sized by its hours (32, 44 or 56 px) with the hours under its name. The figure is worked out from the hours, not the number of steps, so finishing the venue moves it much further than finishing the music. The open job's card shows its effort, weight and share of the plan in a Data List, and "Mark done" is the block's one Shine Button. On a phone the rail scrolls sideways. For project plans, onboarding with uneven tasks and anything where "3 of 5" would mislead.

FAQ

How do I change the jobs and their weights?

Edit JOBS with an id, a title, a sentence and the hours. The circle sizes, the key, the figure and every share of the plan are worked out from the hours, so only the hours need to be right. weightOf sets where Light turns into Medium and Heavy.

How is the percentage worked out?

It is the hours of the jobs before the open one divided by the total hours, rounded to a whole number. With 12, 10, 6, 2 and 2 hours, finishing the venue gives 38% and finishing the guest list as well gives 69%.

What stays local?

Which jobs are done is component state and is lost on reload. Nothing is booked and no one is invited. To make it real, send each finished job to your planner from the go function and read the done jobs back into the initial state.

How does the keyboard work?

The rail is one tab stop on the open job. Left and Right arrows move between the jobs you can reach, Home and End jump to the ends, and Enter or Space opens the focused one. A polite line says "Job 2 of 5: Guest list, 10 h" after each move.

Does it work right to left?

Yes. The rail runs from the right, the line fills towards the left, and the hours and the percentage keep their own direction.

How does it look on a phone?

The rail keeps its width and scrolls sideways inside its own band, so the circles stay at their real sizes and the weights stay readable. The figure, the key and the card stack above and below it.

All 100 stepper blocks