shadcn.io is not affiliated with official shadcn/ui
Metro Line Journey Diagram Features Block for React
A two-line transit map for a customer-journey tool: six stations, one interchange where the Setup and Team lines meet, and a popover on every station.
Installation
Overview
A transit-map features section for React with Base UI. The Setup line runs straight across a dotted field, the Team line bends down through it, and the two meet at one interchange: six stations, drawn in SVG with the lines in the text colour and a muted tone, a legend under the map naming them. Every station is a button that opens a popover with what happens there and the line or lines it is on. Below md the map would be too small to read, so each line becomes its own vertical list of the same stations, the interchange in both. It's built from Popover, Button, Badge and Guides, and it follows your theme. For onboarding flows, customer journeys and any product that explains itself as routes that meet.
FAQ
How do I change the stations and lines?
Edit STATIONS at the top of the file: each has a name, a sentence, its line ("setup", "team" or "both" for the interchange) and its place on the map in a 600 by 220 grid. Keep each line's stations in order in the array; the phone lists are made from it. The two lines' paths are the path elements in the SVG.
How do the popovers work?
Each station opens a popover with its name, a sentence and badges for its line. Click, tap, Enter or Space opens it, Escape closes it and focus returns to the station. They are not modal, so the page stays usable behind them.
The trigger renders the station's button with render.
How does a screen reader get the map?
Each station's name is its button's name, so they are read in order, and its popover holds the detail. The legend under the map reads "Setup line: Connect, Import, Map, Launch", so the routes are in text too. The SVG and the dotted field are hidden from assistive technology.
What replaces the map on a phone?
Two vertical lists, one per line, each a track of station rows with a chevron: tap a row for its popover. The interchange, Map, appears in both with a double ring and the word Interchange.
Related
- Pro
Architecture Flow Diagram Features
Diagrams and mapsA request path for an edge-routing layer: five hops on one wire with a dot travelling along it, the time each hop spends under it, and a latency-budget bar that sums them.
- Pro
Road Trip Milestone Path Features
Timelines and stepsA shipment's route as one vertical road with five stops that alternate sides, solid up to the truck's stop and dashed beyond, each with its time and a done, now or expected badge.
- Pro
Timeline Evolution Story Features
Timelines and stepsA features section that tells five years of an edge runtime as year tabs on one rail: what shipped, a cold start before and after in rolling digits, and a five-bar history of regions.
- Pro
Pipeline Step Diagram Features
Diagrams and mapsA CI pipeline drawn as five stages joined by chevrons, each with its time and status, over a band that measures the pipeline's impact with rolling numbers.
- Pro
Timeline Hero
Updates and timelinesA start-aligned hero with a headline, a Shine Button and an outline action over a closing band of four milestone rows on a vertical hairline, shipped, current and planned.
- 123Pro
Centered Three-Step Process Hero
Updates and timelinesA compact centred how-it-works hero for an invoicing app: a headline, a Shine Button with an outline action and trust copy over a closing band of three step cells, each with a small drawing of its screen.