Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Journey Map Stepper Block for React

A coastal walk on a drawn map with an S-shaped route through five waypoint buttons, where walking on draws the path and shows each leg's distance and climb.

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

Let people see how far along a route they are, with this journey map stepper for React with Base UI. A plus-marked frame holds a drawn map (no tiles and no photographs) with an S-shaped route through five waypoints: Harbour, Cliff stile, Fern hollow, Lighthouse and Cove. The Steps waypoints are buttons set on the map; the route is drawn solid up to the one you are at and dashed beyond it, and each stretch draws itself when you walk on. At the end, the waypoint's card gives the leg's distance and climb and the running totals in a Data List. "Walk to the next waypoint" is the block's one Shine Button, and the last press says the route was walked in this demo. On a phone the map sits above the card with numbered waypoints. For tours, delivery routes, trip planners and any flow with places on it.

FAQ

How do I change the route?

Edit WAYPOINTS: each has a title, a note, the distance of the leg in tenths of a kilometre, the climb in metres and an x and y position in a 100 by 75 box. The curves, the dashed route, the running totals and the closing summary are all worked out from those positions and numbers, so nothing is typed twice. Draw your own coast by editing the SEA and SURF paths.

How is the route drawn?

Each stretch between two waypoints is its own curve with a length of 1, drawn by moving its dash offset from 1 to 0 when you arrive. That keeps the animation to a CSS transition, and under reduced motion the route simply appears.

What stays local?

The current waypoint is component state, and nothing tracks a position or books anything. To make it real, replace the waypoint list with your route's data and send the arrival to your backend from the go function.

How does the keyboard work?

The waypoints are one tab stop on the current one. Arrow keys move between the waypoints you can reach, Home and End jump to the ends, and Enter or Space opens the focused one, whose card then takes focus on its heading.

Does it work right to left?

Yes. The map is mirrored and the waypoints are placed from the start edge, so the route still runs from the reading start towards the end. Distances and climbs are marked left to right so "1.4 km" and "62 m" read the same in any language.

How does it look on a phone?

The map stays a 4 by 3 picture above the card at the full width of the panel. Only the current waypoint keeps its name on the map; the others are numbered, and their names are still read aloud.

All 100 stepper blocks