Severity-sorted status for Tube, Elizabeth, Overground, DLR, and Tram.
Data from Transport for London via tfl-ts. Pass normalised rows as data.
pnpm dlx shadcn@latest add https://tfl.manglekuo.com/r/tube-status-board.jsonData from Transport for London via tfl-ts. Pass normalised rows as data.
import TflClient, {
sortLinesBySeverityAndOrder,
getWorstCurrentStatus,
} from "tfl-ts"
const tfl = new TflClient({
appKey: process.env.TFL_APP_KEY!,
})
const fetchedAt = Date.now()
const data = sortLinesBySeverityAndOrder(
await tfl.line.getStatus({
modes: ["tube", "elizabeth-line", "dlr", "tram", "overground"],
}),
{ now: fetchedAt },
)data is the public tfl.line.getStatus() row type, aliased here as StatusLine. Fetch-time sort is a hint only — the board partitions and sorts again. Pass now={fetchedAt} so validity windows do not call Date.now() in the RSC shell. The board does not fetch.
Read getWorstCurrentStatus(line.lineStatuses, { now: fetchedAt }), not lineStatuses[0].
On this docs site, getCachedLineStatuses in @/lib/tfl/status-data wraps the same call with Cache Components and returns { data, fetchedAt }.
import { TubeStatusBoard } from "@/components/tfl/status/tube-status-board"
export default function Page({ data, fetchedAt }) {
return <TubeStatusBoard data={data} now={fetchedAt} />
}The live board has two sections: Service Disruptions then Good Service. Timetable-closed lines (Waterloo & City weekends, end of traffic day) stay in Disruptions, sorted last after incidents and planned engineering — not a separate group, and not under Good Service. Week ahead still highlights Waterloo & City on Saturday. An empty Good Service group is omitted — a filtered fetch that returns only disrupted lines will not paint Good Service (0 lines).
Columns follow the board's own width, not the viewport: Disruptions stay 1 / 2 / 3 so the reason copy can breathe; Good Service is 2 / 3 / 5 because those rows are titles only. Good Service titles auto-abbreviate at narrow grid widths (full → middle → 3-letter code) via Line title. Tier data lives in lib/tfl/line-names.ts. compact is the exception: one column, and the section title tiles stay off.
import {
DEFAULT_STATUS_LINE_IDS,
TubeStatusBoard,
} from "@/components/tfl/status/tube-status-board"
import { getCachedLineStatuses } from "@/lib/tfl/status-data"
export default async function Page() {
const { data, fetchedAt } = await getCachedLineStatuses(DEFAULT_STATUS_LINE_IDS)
return <TubeStatusBoard data={data} now={fetchedAt} />
}Pass hideHeader when the parent already has a title.
The board paints whatever you pass as data. Filter at the fetch — do not load the whole network and hide rows afterwards.
compact is the watchlist layout: one column, no Service Disruptions / Good Service title tiles, no attribution footer. Pair it with hideHeader when the parent already names the lines.
const { data, fetchedAt } = await getCachedLineStatuses([
"victoria",
"northern",
])
return <TubeStatusBoard data={data} now={fetchedAt} compact hideHeader />Same call with tfl.line.getStatus({ lineIds: ["victoria", "northern"] }) in the app layer. The board does not fetch.
TfL returns an array of lineStatuses per line. A single story can appear two or three times with different severity codes, because the code names the kind of status (Suspended, Special Service, Planned Closure), not the incident. The board shows what a passenger expects: what is happening now, once.
By default it:
getCurrentLineStatuses (RealTime first, then PlannedWork / Information whose window overlaps now). isNow is not a clock — a tram Part Closure can be in force today with isNow: false. Future windows are Week ahead's job.Service Closed row is on the card (Waterloo & City → one line of “resumes Monday”).LONDON TRAMS:, BAKERLOO LINE:).Each disruption shows a gray platform-style severity chip (Severe Delays, Part Closure, …) inline at the start of TfL's paragraph. Timetable-closed copy is the same chip, quieter, at the bottom of that list.
Each step is opt-out:
{/* Keep future windows too */}
<TubeStatusBoard data={data} now={fetchedAt} currentOnly={false} />
{/* Show every TfL paragraph even when one contains another */}
<TubeStatusBoard data={data} now={fetchedAt} dedupe={false} />
{/* Keep LONDON TRAMS: prefixes */}
<TubeStatusBoard data={data} now={fetchedAt} rawReason />
{/* TfL's array verbatim */}
<TubeStatusBoard data={data} now={fetchedAt} currentOnly={false} dedupe={false} rawReason />Default (deduped)
Planned ClosureFrom Thursday 6 until Sunday 23 August, no service between Reeves Corner and East Croydon. Additional works apply on Sunday 16 August.
dedupe={false}
Part ClosureFrom Thursday 6 until Sunday 23 August, no service between Reeves Corner and East Croydon. Additional works apply on Sunday 16 August.
Planned ClosureAdditional works apply on Sunday 16 August.
| Prop | Type | Description |
|---|---|---|
data | readonly StatusLine[] | Rows from tfl.line.getStatus(). Missing or undefined renders empty. |
now | number | Clock for validity windows. Pass cache fetchedAt. |
hideHeader | boolean | Omit the board header. |
compact | boolean | Watchlist: one column, no section title tiles, no footer. Pass only the lines you want. |
currentOnly | boolean | Keep operative announcements, not isNow (default true). |
dedupe | boolean | Collapse equal or contained paragraphs (default true). |
rawReason | boolean | Keep TfL's unstripped reason string (default false). |
children | ReactNode | Optional slot below the status list. |
Official colours come from tfl-ts CSS helpers inside the board. Fixtures can show severe delays without waiting for a live incident.
Data from Transport for London via tfl-ts. Pass normalised rows as data.
import TflClient, {
sortLinesBySeverityAndOrder,
getWorstCurrentStatus,
} from "tfl-ts"
const tfl = new TflClient({
appKey: process.env.TFL_APP_KEY!,
})
const fetchedAt = Date.now()
const data = sortLinesBySeverityAndOrder(
await tfl.line.getStatus({
modes: ["tube", "elizabeth-line", "dlr", "tram", "overground"],
}),
{ now: fetchedAt },
)data is the public tfl.line.getStatus() row type, aliased here as StatusLine. Fetch-time sort is a hint only — the board partitions and sorts again. Pass now={fetchedAt} so validity windows do not call Date.now() in the RSC shell. The board does not fetch.
Read getWorstCurrentStatus(line.lineStatuses, { now: fetchedAt }), not lineStatuses[0].
On this docs site, getCachedLineStatuses in @/lib/tfl/status-data wraps the same call with Cache Components and returns { data, fetchedAt }.
import { TubeStatusBoard } from "@/components/tfl/status/tube-status-board"
export default function Page({ data, fetchedAt }) {
return <TubeStatusBoard data={data} now={fetchedAt} />
}The live board has two sections: Service Disruptions then Good Service. Timetable-closed lines (Waterloo & City weekends, end of traffic day) stay in Disruptions, sorted last after incidents and planned engineering — not a separate group, and not under Good Service. Week ahead still highlights Waterloo & City on Saturday. An empty Good Service group is omitted — a filtered fetch that returns only disrupted lines will not paint Good Service (0 lines).
Columns follow the board's own width, not the viewport: Disruptions stay 1 / 2 / 3 so the reason copy can breathe; Good Service is 2 / 3 / 5 because those rows are titles only. Good Service titles auto-abbreviate at narrow grid widths (full → middle → 3-letter code) via Line title. Tier data lives in lib/tfl/line-names.ts. compact is the exception: one column, and the section title tiles stay off.
import {
DEFAULT_STATUS_LINE_IDS,
TubeStatusBoard,
} from "@/components/tfl/status/tube-status-board"
import { getCachedLineStatuses } from "@/lib/tfl/status-data"
export default async function Page() {
const { data, fetchedAt } = await getCachedLineStatuses(DEFAULT_STATUS_LINE_IDS)
return <TubeStatusBoard data={data} now={fetchedAt} />
}Pass hideHeader when the parent already has a title.
The board paints whatever you pass as data. Filter at the fetch — do not load the whole network and hide rows afterwards.
compact is the watchlist layout: one column, no Service Disruptions / Good Service title tiles, no attribution footer. Pair it with hideHeader when the parent already names the lines.
const { data, fetchedAt } = await getCachedLineStatuses([
"victoria",
"northern",
])
return <TubeStatusBoard data={data} now={fetchedAt} compact hideHeader />Same call with tfl.line.getStatus({ lineIds: ["victoria", "northern"] }) in the app layer. The board does not fetch.
TfL returns an array of lineStatuses per line. A single story can appear two or three times with different severity codes, because the code names the kind of status (Suspended, Special Service, Planned Closure), not the incident. The board shows what a passenger expects: what is happening now, once.
By default it:
getCurrentLineStatuses (RealTime first, then PlannedWork / Information whose window overlaps now). isNow is not a clock — a tram Part Closure can be in force today with isNow: false. Future windows are Week ahead's job.Service Closed row is on the card (Waterloo & City → one line of “resumes Monday”).LONDON TRAMS:, BAKERLOO LINE:).Each disruption shows a gray platform-style severity chip (Severe Delays, Part Closure, …) inline at the start of TfL's paragraph. Timetable-closed copy is the same chip, quieter, at the bottom of that list.
Each step is opt-out:
{/* Keep future windows too */}
<TubeStatusBoard data={data} now={fetchedAt} currentOnly={false} />
{/* Show every TfL paragraph even when one contains another */}
<TubeStatusBoard data={data} now={fetchedAt} dedupe={false} />
{/* Keep LONDON TRAMS: prefixes */}
<TubeStatusBoard data={data} now={fetchedAt} rawReason />
{/* TfL's array verbatim */}
<TubeStatusBoard data={data} now={fetchedAt} currentOnly={false} dedupe={false} rawReason />Default (deduped)
Planned ClosureFrom Thursday 6 until Sunday 23 August, no service between Reeves Corner and East Croydon. Additional works apply on Sunday 16 August.
dedupe={false}
Part ClosureFrom Thursday 6 until Sunday 23 August, no service between Reeves Corner and East Croydon. Additional works apply on Sunday 16 August.
Planned ClosureAdditional works apply on Sunday 16 August.
| Prop | Type | Description |
|---|---|---|
data | readonly StatusLine[] | Rows from tfl.line.getStatus(). Missing or undefined renders empty. |
now | number | Clock for validity windows. Pass cache fetchedAt. |
hideHeader | boolean | Omit the board header. |
compact | boolean | Watchlist: one column, no section title tiles, no footer. Pass only the lines you want. |
currentOnly | boolean | Keep operative announcements, not isNow (default true). |
dedupe | boolean | Collapse equal or contained paragraphs (default true). |
rawReason | boolean | Keep TfL's unstripped reason string (default false). |
children | ReactNode | Optional slot below the status list. |
Official colours come from tfl-ts CSS helpers inside the board. Fixtures can show severe delays without waiting for a live incident.
Part SuspendedNo service between Hammersmith and Northfields and between Acton Town and Uxbridge while we fix a signal failure at Acton Town. Tickets being accepted by London Buses, Elizabeth line, Weaver line, Great Northern and South Western Railway services. SEVERE DELAYS on the rest of the line.
Severe DelaysSevere delays between Ealing Broadway and Turnham Green, and MINOR DELAYS on the rest of the line due to an earlier signal failure at Acton Town. London Underground tickets will be accepted on South Western Railway, Elizabeth Line and local bus services.
Reduced ServiceMonday 17 August, the 0558 first train from Richmond to Stratford will start from Camden Road at 0636. Customers from Richmond should use the next train at 0608.
Minor DelaysMinor delays due to train cancellations.
Part ClosureFrom Thursday 6 until Sunday 30 August, no service between Arena and Elmers End at certain times. On Mondays to Fridays, no service before 0700 and after 1930, on Saturdays, no service before 0800 and after 1845, and on Sundays, no service for the whole day.
Part ClosureFrom Thursday 6 until Sunday 23 August, no service between Reeves Corner and East Croydon. Additional works apply on Sunday 16 and Thursday 20 August.
Data from Transport for London via tfl-ts. Pass normalised rows as data.
Part SuspendedNo service between Hammersmith and Northfields and between Acton Town and Uxbridge while we fix a signal failure at Acton Town. Tickets being accepted by London Buses, Elizabeth line, Weaver line, Great Northern and South Western Railway services. SEVERE DELAYS on the rest of the line.
Severe DelaysSevere delays between Ealing Broadway and Turnham Green, and MINOR DELAYS on the rest of the line due to an earlier signal failure at Acton Town. London Underground tickets will be accepted on South Western Railway, Elizabeth Line and local bus services.
Reduced ServiceMonday 17 August, the 0558 first train from Richmond to Stratford will start from Camden Road at 0636. Customers from Richmond should use the next train at 0608.
Minor DelaysMinor delays due to train cancellations.
Part ClosureFrom Thursday 6 until Sunday 30 August, no service between Arena and Elmers End at certain times. On Mondays to Fridays, no service before 0700 and after 1930, on Saturdays, no service before 0800 and after 1845, and on Sundays, no service for the whole day.
Part ClosureFrom Thursday 6 until Sunday 23 August, no service between Reeves Corner and East Croydon. Additional works apply on Sunday 16 and Thursday 20 August.
Data from Transport for London via tfl-ts. Pass normalised rows as data.