Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Milestone Flags Stepper Block for React

Five flags on poles for the camps of an eleven-day climb, raised and solid when planted, outlined at the current camp and lowered ahead, with altitude, day and climb in a list.

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

Mark progress by planting flags with this milestone stepper for React with Base UI. A hairline frame with a plus mark on each corner holds five poles on a baseline in front of a pale ridge: Base camp, Camp 1, Camp 2, High camp and Summit. A planted camp has its flag raised and solid with a check, the camp you are at has it raised and outlined, and the camps ahead keep theirs lowered at the foot. Each pole is a real Steps button, so a planted camp can be reopened. A Data List gives the camp's altitude, the day and the climb since the last camp, and "Plant flag" is the block's one Shine Button; the flag rises with a short slide, which stops under reduced motion. For expeditions, projects with named milestones and anything that is reached rather than finished.

FAQ

How do I change the camps?

CAMPS lists the five camps with an id, title, sentence, altitude in metres and the day. The climb since the last camp is worked out from the altitudes, and the metres are formatted by one helper. To add a camp, add it to CAMPS and the poles, panels and counts follow.

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

Everything. The camp is component state and the last step ends on "Summit reached in this demo": nobody climbed and nothing was booked. To make it real, call your API from the advance handler with the camp you are planting, and use the response to fill the list.

What moves, and does it stop?

Only the flag, once, when you plant it: it slides up the pole in half a second. Nothing loops. Under reduced motion the flag is simply drawn in its new place.

Does it work right to left?

Yes. The poles run from the right, the flags are flipped so they fly toward the end of the line, and the ridge behind them is mirrored. Altitudes stay left to right so the numbers read correctly.

How does the keyboard work?

The poles are one tab stop on the current camp. Arrow keys move focus between the camps you can reach, Home and End jump to the ends, and Enter or Space opens the focused one. After a move the camp heading takes focus and a polite line reads "Camp 3 of 5: Camp 2".

How does it look on a phone?

The poles shrink with the width, the altitudes are hidden, and only the current camp shows its name, with a number on the camps ahead and a check on the planted ones.

All 100 stepper blocks