Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Metro Line Journey Diagram Features Block for React Aria

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.

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

A transit-map features section for React with React Aria. 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 station's button sits inside the trigger, and the popover is its sibling.

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.

Does the map mirror in right-to-left languages?

No: a map keeps its geography, so the diagram is dir="ltr". The phone lists follow the page's direction.

Why is there no call to action?

The map is the feature, and the stations are the only controls. Add a Shine Button to the header row if you want one.

All 170 features blocks