shadcn.io is not affiliated with official shadcn/ui
Map Route Timeline Block for Radix UI
A walking tour of seven stops on a rail with the leg between each pair by foot, tram or ferry, a drawn sketch map of the same stops as buttons, a stacked bar that adds up the time by mode, and a status line for what comes next.
Installation
Overview
Show a route as stops and the way between them, with a picture of it beside the list, with this map route timeline for React with Radix UI. It is written for Strollmap, a fictional walking-tour planner. A hairline frame with a plus mark on each corner holds seven stops on a vertical rail, from Old Salt Gate to Lighthouse green, and the six legs between them. Each leg has its mode in words and an icon, Walk 12 min, Tram 9 min, Ferry 11 min, and its own connector: dotted for walking, solid for the tram and double for the ferry. Beside the rail, and above it on a phone, a drawn sketch map holds the same seven stops as numbered buttons joined by the route. Choosing a stop on the rail or on the map highlights its point and the leg to the next one, and the status line says what comes next. A stacked bar under the rail adds up the time on the move, "Walking 41 min, tram 18 min, ferry 11 min", from the legs. It is built from Guides and plain buttons, with an entrance only. The sketch is drawn from shapes, never a real map, and is not to scale. For walking tours, delivery rounds, field visits and any route with more than one way to travel. The tour is example data.
FAQ
How do I change the stops and legs?
Edit STOPS and LEGS. A stop has a name, a note and the place of its point on the sketch in percent; LEGS[i] joins stop i to stop i + 1 with a mode and minutes. The totals by mode, the bar and the status line come from the legs.
Can I put a real map behind it?
Yes. The sketch is one svg and a set of absolutely placed buttons in a left-to-right box, so you can replace the drawing with your map library's canvas and keep the pins as buttons. Keep the rail beside it: it is what a screen reader and a keyboard use.
How are the modes told apart without colour?
By a word, an icon and the line style: dotted, solid or double. The sketch uses the same three dash patterns for the legs, so the map and the rail agree.
What stays in the page, and how do I wire a real route?
The chosen stop is local state and nothing is saved. For a real tour, load the stops and the legs from your routing service and compute the minutes there; the demo only adds them up.
Is it accessible, and does it work in a right-to-left page?
Each stop on the rail is a button that marks the chosen one with aria-current, each pin on the map is a button named with its number and place, and a polite status line says where you are and what is next. The rail follows the page direction, while the sketch keeps its left-to-right layout like any map.