Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Train Track Stepper Block for Ark UI

A drawn length of track with five stations and a small locomotive that slides to each one, for a heritage-railway trip builder with a day, a departure, seats, extras and a read-back.

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 the marker do the work with this train-track stepper for React with Ark UI. A hairline frame with a plus mark on each corner holds a length of drawn track, two rails with sleepers between, and five stations along it: Day, Train, Seats, Extras and Review. A small locomotive slides to whichever station you are at, and the rails you have travelled turn solid. Each station is a real Steps button, so a visited one can be reopened. Every station asks one thing: a Saturday in a Select, one of two departures in a Radio Group, the number of seats, the extras as Switch rows, then a Data List read-back with the total worked out from the choices. Continue is the block's one Shine Button. For trips, journeys and any flow with a route.

FAQ

How do I change the days, trains and prices?

DAYS, SEATS, DEPARTURES and EXTRAS hold the choices. Fares are whole pounds per seat, the lunch is per seat and the guidebook once per booking, and the total is worked out by totalOf from them. To add a station, add it to STATIONS and give it a StepsContent; the locomotive position is computed from the count.

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

Everything. The choices live in component state and the last step ends on "Planned in this demo": no seats are held and nothing is charged. To make it real, send the day, train, seats and extras from the advance handler on the last step to your booking API, and take the price from its answer rather than from totalOf.

What moves, and does it stop?

The locomotive slides to the next station in half a second and the travelled rails grow to meet it. Nothing loops, and under reduced motion both simply jump.

Does it work right to left?

Yes. The track runs from the right, the locomotive is placed with a logical offset and its glyph is flipped to face the way it travels. Times and prices stay left to right so the numbers read correctly.

How does the keyboard work?

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

How does it look on a phone?

The five stations share the width and only the current station shows its name, with a number on the others. The locomotive and the rails keep their place over the stations.

All 100 stepper blocks