tfl-components

React UI for London transport boards, distributed as a shadcn registry on tfl-ts.

This is not an npm UI package. You copy source into your app.

TfL Components is an independent project and is not affiliated with or endorsed by Transport for London. Designed and built by MangleKuo.

Installable component source is MIT. The hosted site, photography, branding, and TfL marks are not. See LICENCE.md.

Install components

Source of truth for installable files: registry/tfl/ (readme).

pnpm dlx shadcn@latest add https://tfl.manglekuo.com/r/tube-status-board.json
pnpm dlx shadcn@latest add https://tfl.manglekuo.com/r/rail-arrivals-board.json
pnpm dlx shadcn@latest add https://tfl.manglekuo.com/r/bus-arrivals-board.json
pnpm dlx shadcn@latest add https://tfl.manglekuo.com/r/tfl-roundel.json

Registry items declare tfl-ts as a dependency. Copied code reads TFL_APP_KEY (your Primary key) from your environment.

Install targets (pre-1.0):

components/tfl/brand/…
components/tfl/status/…
components/tfl/arrivals/…
components/tfl/diagram/…
lib/tfl/…

import { TubeStatusBoard } from "@/components/tfl/status/tube-status-board"
import { LineBadge } from "@/components/tfl/brand/line-badge"

Releases

Same GitHub repo, two version tracks (docs/releases.md):

Track	Tags	Follow if you…
Components	v0.4.0, …	Install from /r/*.json
Web app	web-v0.5.0, …	Run or contribute to the docs/demo site

Changelog: CHANGELOG.md.

Docs / demo site

Live site: https://tfl.manglekuo.com

The Next.js app in this repo is the developer environment (docs, demos, Labs). It is not what the shadcn CLI copies. Prefer registry/tfl/ when browsing for installable code.

Local setup

pnpm install
cp .env.example .env.local
# fill TFL_APP_KEY from https://api-portal.tfl.gov.uk/product#product=2357355709892 (Profile / Show)
pnpm dev

Press d or the theme control for dark mode. Browse via the header (Docs · Components · Explorer · Labs · Board).

Frozen Stage 1 IA: docs/TARGET_ARCHITECTURE.md.

Caching

Status and browse data use Next.js Cache Components (cacheComponents: true) with use cache and ~60s / ~300s revalidate.

Branding and the roundel

• Official line colours are fine.
• The TfL roundel is trademarked. TfLRoundel ships a filled, rounded placeholder by default (same footprint as the real mark so layouts do not jump).
• In development only, the placeholder shows a short tooltip and opens a modal with a link to TfL brand IP. Production builds render the placeholder silently.
• To show the official SVG in your app:

NEXT_PUBLIC_ALLOW_TFL_ROUNDEL=true

(Also accepts VITE_ALLOW_TFL_ROUNDEL.) Use a public-prefixed env var so SSR and the client agree. Setting the flag shifts trademark responsibility to your application layer.

<TfLRoundel text="MY APP" ringColor="#E32017" barColor="#0019A8" />
<TfLRoundel variant="elizabeth" />
<TfLRoundel variant="overground" artwork className="h-8 w-auto" />

Mode presets and Wikimedia paths are exported as ROUNDEL_PRESETS, ROUNDEL_LOGO_PATHS, and ROUNDEL_LOGO_SOURCES. SVG files ship in public/transit-logos/.

Brand helpers live in @/lib/tfl/brand. Cropped line-diagram references are in public/brand/line-diagram/; source PDF in reference/brand/.

Fonts: this site uses Adobe Fonts P22 Underground by default. Hammersmith One is the free, self-hosted fallback. Neither is Johnston. Do not download Johnston without a licence. Prefer your own product typeface in shipping apps.

Rules

See AGENTS.md and docs/ for agent workflow, design system, and product principles.