Filled chips and colour bars that paint official line colours from Colours tokens.
pnpm dlx shadcn@latest add https://tfl.manglekuo.com/r/line-badge.jsonColours resolve from data-line → --line-color. Install tokens from Colours. Cable Car chips use map red via an explicit color override.
Single-line chips opt in with fit="shrink". Board headers live on Line title.
280px · resize to step chip labels
Prefer ≤3 lines. Resize to step full → H&C → short codes.
Great Portland Street — Circle · H&C · Metropolitan
Circle, Hammersmith & City and MetropolitanAldgate East — District · H&C
District and Hammersmith & CitySouth Kensington — Circle · District
Circle and DistrictRow codes — stripe stack, one 3-letter abbr at a time
360px · resize
Filled chips and colour bars that paint official line colours. Tokens come from Colours — install tfl-colours first (or let this package pull it).
Single-line chips use one brand fill. Shared-track groups (LineBadgeGroup) float a TfL blue label over a full-bleed colour stack — prefer ≤3 lines. Arrivals rows that must name two or three lines use variant="codes": the same stripe stack, one 3-letter abbr at a time (CSS cycle; fixed 5ch, same as the bus route chip). Board headers live on Line title.
pnpm dlx shadcn@latest add https://tfl.manglekuo.com/r/line-badge.jsonline-badge lists tfl-colours as a registry dependency.
import {
LineBadge,
LineBadgeGroup,
LineColorBar,
} from "@/components/tfl/brand/line-badge"
export default function Page() {
return (
<>
<LineBadge lineId="central" name="Central" />
<LineBadge lineId="hammersmith-city" fit="shrink" />
{/* Great Portland Street — Circle, H&C, Met share platforms */}
<LineBadgeGroup
lineIds={["circle", "hammersmith-city", "metropolitan"]}
/>
<LineBadgeGroup
variant="codes"
lineIds={["circle", "hammersmith-city", "metropolitan"]}
/>
<LineColorBar lineId="elizabeth" modeName="elizabeth-line" />
</>
)
}Full-bleed colour stack behind a TfL blue shrink-wrap plate. Stripes fill the open side of align. Drop the plate with stripes="under". On an arrivals row, variant="codes" keeps that stripe stack at chip height and cycles one 3-letter abbr at a time in a fixed 5ch box — not CIR/H&C/MET and not a taller per-stripe stack.
left
right
center
under
Great Portland Street
Aldgate East
South Kensington
Farringdon · under
Goldhawk Road · right
Tower Hill · center
Row codes · two lines
Row codes · three lines
<LineBadgeGroup
lineIds={["circle", "hammersmith-city"]}
align="right"
/>
<LineBadgeGroup
lineIds={["circle", "hammersmith-city", "metropolitan"]}
stripes="under"
/>
<LineBadgeGroup
variant="codes"
lineIds={["circle", "hammersmith-city"]}
/>Opt a single-line chip into the name ladder with fit="shrink". Board header titles are on Line title. Tier data is in lib/tfl/line-names.ts.
| Prop | Type | Description |
|---|---|---|
lineId | string | TfL line or mode id. Sets data-line. |
name | string | Display label. Defaults to the curated full name for lineId. |
variant | "chip" | "text" | Filled chip (default) or coloured text. |
fit | "clip" | "shrink" | clip paints the full name (default). shrink steps via LineName. |
color | string | Optional --line-raw override (e.g. Cable Car map red). |
lineStatuses | array | Optional statuses for a richer ARIA label. |
LineBadgeGroup| Prop | Type | Description |
|---|---|---|
lineIds | string[] | Member line ids. Prefer ≤3. |
names | string[] | Optional per-id overrides. |
variant | "label" | "codes" | label (default) is the blue-plate chip. codes keeps the stripe stack and CSS-cycles one 3-letter abbr in a fixed 5ch box — use on arrivals rows. |
align | "left" | "right" | "center" | Label alignment (default left). Ignored for codes. |
stripes | "auto" | "under" | auto shrink-wraps a TfL blue plate; under paints text on stripes with no plate. Ignored for codes. |
className | string | Merge classes; text-* / justify-* can set align when align is omitted. |
LineColorBar takes lineId, optional modeName (overground / elizabeth-line parallel rails, cable-car = 3 red + 2 white), optional color, and heightClass.
Colours resolve from data-line → --line-color. Install tokens from Colours. Cable Car chips use map red via an explicit color override.
Single-line chips opt in with fit="shrink". Board headers live on Line title.
280px · resize to step chip labels
Prefer ≤3 lines. Resize to step full → H&C → short codes.
Great Portland Street — Circle · H&C · Metropolitan
Circle, Hammersmith & City and MetropolitanAldgate East — District · H&C
District and Hammersmith & CitySouth Kensington — Circle · District
Circle and DistrictRow codes — stripe stack, one 3-letter abbr at a time
360px · resize
Filled chips and colour bars that paint official line colours. Tokens come from Colours — install tfl-colours first (or let this package pull it).
Single-line chips use one brand fill. Shared-track groups (LineBadgeGroup) float a TfL blue label over a full-bleed colour stack — prefer ≤3 lines. Arrivals rows that must name two or three lines use variant="codes": the same stripe stack, one 3-letter abbr at a time (CSS cycle; fixed 5ch, same as the bus route chip). Board headers live on Line title.
pnpm dlx shadcn@latest add https://tfl.manglekuo.com/r/line-badge.jsonline-badge lists tfl-colours as a registry dependency.
import {
LineBadge,
LineBadgeGroup,
LineColorBar,
} from "@/components/tfl/brand/line-badge"
export default function Page() {
return (
<>
<LineBadge lineId="central" name="Central" />
<LineBadge lineId="hammersmith-city" fit="shrink" />
{/* Great Portland Street — Circle, H&C, Met share platforms */}
<LineBadgeGroup
lineIds={["circle", "hammersmith-city", "metropolitan"]}
/>
<LineBadgeGroup
variant="codes"
lineIds={["circle", "hammersmith-city", "metropolitan"]}
/>
<LineColorBar lineId="elizabeth" modeName="elizabeth-line" />
</>
)
}Full-bleed colour stack behind a TfL blue shrink-wrap plate. Stripes fill the open side of align. Drop the plate with stripes="under". On an arrivals row, variant="codes" keeps that stripe stack at chip height and cycles one 3-letter abbr at a time in a fixed 5ch box — not CIR/H&C/MET and not a taller per-stripe stack.
left
right
center
under
Great Portland Street
Aldgate East
South Kensington
Farringdon · under
Goldhawk Road · right
Tower Hill · center
Row codes · two lines
Row codes · three lines
<LineBadgeGroup
lineIds={["circle", "hammersmith-city"]}
align="right"
/>
<LineBadgeGroup
lineIds={["circle", "hammersmith-city", "metropolitan"]}
stripes="under"
/>
<LineBadgeGroup
variant="codes"
lineIds={["circle", "hammersmith-city"]}
/>Opt a single-line chip into the name ladder with fit="shrink". Board header titles are on Line title. Tier data is in lib/tfl/line-names.ts.
| Prop | Type | Description |
|---|---|---|
lineId | string | TfL line or mode id. Sets data-line. |
name | string | Display label. Defaults to the curated full name for lineId. |
variant | "chip" | "text" | Filled chip (default) or coloured text. |
fit | "clip" | "shrink" | clip paints the full name (default). shrink steps via LineName. |
color | string | Optional --line-raw override (e.g. Cable Car map red). |
lineStatuses | array | Optional statuses for a richer ARIA label. |
LineBadgeGroup| Prop | Type | Description |
|---|---|---|
lineIds | string[] | Member line ids. Prefer ≤3. |
names | string[] | Optional per-id overrides. |
variant | "label" | "codes" | label (default) is the blue-plate chip. codes keeps the stripe stack and CSS-cycles one 3-letter abbr in a fixed 5ch box — use on arrivals rows. |
align | "left" | "right" | "center" | Label alignment (default left). Ignored for codes. |
stripes | "auto" | "under" | auto shrink-wraps a TfL blue plate; under paints text on stripes with no plate. Ignored for codes. |
className | string | Merge classes; text-* / justify-* can set align when align is omitted. |
LineColorBar takes lineId, optional modeName (overground / elizabeth-line parallel rails, cable-car = 3 red + 2 white), optional color, and heightClass.