TfL boards, React components, and typed transport data

Start with the hosted Board, take the React components into your own app, or work directly with tfl-ts. The reference pages cover the TfL conventions that hold those routes together.

Board

Set up a live London transport display without deploying an app. Choose a stop and show arrivals, line status, buses, and nearby cycle hire on an iPad, tablet, monitor, or any screen with a modern browser.

tfl-components

Install the React source behind the demos through the shadcn registry. The catalogue covers arrivals and status boards, maps, line diagrams, station labels, route chips, colour tokens, and other parts for a custom TfL interface.

tfl-ts, CLI, and MCP

Use the typed tfl-ts client for TfL Unified API data and static station information. The same npm package includes the tfl command-line tool and a read-only MCP server that lets coding agents inspect TfL data with your own API key.

TfL interface foundations

Check the published colour references, typography and Johnston licensing, station-name fitting, icons, roundel boundaries, and line-diagram conventions before copying the visual language into a product.