# Metro Map Image Gallery – Subway Map Roadmap Timeline

> Metro Map Image Gallery for React and Tailwind CSS (shadcn/ui): a subway map roadmap timeline where every station is a photo and small trains run the lines. It is built to turn a list of milestones into a transit map people want to explore. Use it for product roadmaps, release timelines, travel stories and portfolios, with milestones as stations on up to five colored lines. Trains brake into each stop and pop its photo in a bubble; hovering a station grows the photo into a card and fades the other lines, and a click opens a dialog with a large photo, the story and the next stop. Pass active, open, onActiveChange, onOpenChange, trainSpeed, dwell, autoplay and labels for controlled or uncontrolled use. Stations are buttons with one tab stop and arrow keys along and across lines, the dialog traps focus and closes on Escape, reduced motion parks the trains, and light and dark themes plus a portrait phone layout are built in. The included demo rides a fictional 2026 product roadmap and makes no requests beyond image loads. Requires React only, with no animation library.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Timeline, Roadmap, Gallery, Image Gallery, Map
- Live preview: https://21st.dev/@dhxwhy/components/metro-map-gallery

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/metro-map-gallery?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/timeline.md