shadcn.io is not affiliated with official shadcn/ui
Metro Line Journey Diagram Features Block for Solid
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 Solid with Ark 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's asChild receives its props: spread them onto the station's button.
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.