HomeRendering primitives

Line title

Board group headers that step full → H&C / W&C → 3-letter codes as width shrinks.

Primitive

Uses foundationsColours

Used byTube & Rail Status Line chip

Preview

Usage

import { LineName } from "@/components/tfl/brand/line-name"

<LineName lineId="hammersmith-city" />
<LineName lineIds={["circle", "hammersmith-city", "metropolitan"]} group />

Installable via shadcn CLI

Installation

pnpm dlx shadcn@latest add https://tfl.manglekuo.com/r/line-badge.json

In code

Line chip · Tube & Rail Status · Platform chip · Station name labels

HomeRendering primitives

Line title

Board group headers that step full → H&C / W&C → 3-letter codes as width shrinks.

Primitive

Uses foundationsColours

Used byTube & Rail Status Line chip

Preview

Board group headers: coloured type plus a brand underline. Filled chips and shared-track chip rails are on Line chip.

Single line

Shared-track group

Short name

Double rail (Elizabeth)

Triple rail (Cable Car)

320px · resize to step the title ladder

Usage

import { LineName } from "@/components/tfl/brand/line-name"

<LineName lineId="hammersmith-city" />
<LineName lineIds={["circle", "hammersmith-city", "metropolitan"]} group />

Installable via shadcn CLI

Installation

pnpm dlx shadcn@latest add https://tfl.manglekuo.com/r/line-badge.json

Purpose

Board group headers — coloured type that steps full → middle (H&C / W&C) → 3-letter code as width shrinks. Width steps use CSS @container/line-name queries (same family as Platform chip), not JS measuring like Station name labels.

This is not a filled chip. For labelling chips, shared-track chip rails, and colour bars, see Line chip.

Prefer abbreviation before wrapping; short codes are last resort. Curated tiers live in lib/tfl/line-names.ts.

Ships inside the Line chip registry package today (line-badge.json — packaging name, not the UI role).

Installation

pnpm dlx shadcn@latest add https://tfl.manglekuo.com/r/line-badge.json

Render

import { LineName } from "@/components/tfl/brand/line-name"

export default function Header() {
  return (
    <>
      <LineName lineId="hammersmith-city" />
      <LineName
        lineIds={["circle", "hammersmith-city", "metropolitan"]}
        group
      />
    </>
  )
}

The underline is a LineColorBar per id, so Elizabeth and Overground paint two rails and Cable Car paints three. Cable Car stays purple here (branding, not diagram red). Shared-track board headers place one bar per id side by side. Shared-track chips (vertical colour rail) are on Line chip.

Width steps

The label root is @container/line-name and fills its parent. Constrain the parent (grid cell, resizable frame) so the queries can fire.

Mode	Ladder
Default (status headers)	Full → middle → short — one line only
`wrap`	Full → middle → optional 2-line → short (chips; prefer Line chip)
`lineIds` / `group`	Wider breakpoints; short codes join as `CIR/HAC/MET`

FindableText keeps Ctrl/Cmd+F and copy on the full canonical name when an abbreviated tier is painted.

Props

Prop	Type	Description
`lineId`	`string`	Single line id. Mutually exclusive with `lineIds`.
`name`	`string`	Fallback / override when the id is unknown.
`lineIds`	`string[]`	Shared-track group (e.g. Circle + H&C + Met).
`names`	`string[]`	Optional per-id overrides aligned with `lineIds`.
`wrap`	`boolean`	Allow a 2-line form after middle fails.
`group`	`boolean`	Wider breakpoints; forced when `lineIds` is set.
`className`	`string`	Optional class merge.

In code

Line chip · Tube & Rail Status · Platform chip · Station name labels

Line title

Board group headers that step full → H&C / W&C → 3-letter codes as width shrinks.

Primitive

Uses foundationsColours

Used byTube & Rail Status Line chip

Preview

Board group headers: coloured type plus a brand underline. Filled chips and shared-track chip rails are on Line chip.

Single line

Shared-track group

Short name

Double rail (Elizabeth)

Triple rail (Cable Car)

320px · resize to step the title ladder

Usage

import { LineName } from "@/components/tfl/brand/line-name"

<LineName lineId="hammersmith-city" />
<LineName lineIds={["circle", "hammersmith-city", "metropolitan"]} group />

Installable via shadcn CLI

Installation

pnpm dlx shadcn@latest add https://tfl.manglekuo.com/r/line-badge.json

Purpose

This is not a filled chip. For labelling chips, shared-track chip rails, and colour bars, see Line chip.

Prefer abbreviation before wrapping; short codes are last resort. Curated tiers live in lib/tfl/line-names.ts.

Ships inside the Line chip registry package today (line-badge.json — packaging name, not the UI role).

Installation

pnpm dlx shadcn@latest add https://tfl.manglekuo.com/r/line-badge.json

Render

import { LineName } from "@/components/tfl/brand/line-name"

export default function Header() {
  return (
    <>
      <LineName lineId="hammersmith-city" />
      <LineName
        lineIds={["circle", "hammersmith-city", "metropolitan"]}
        group
      />
    </>
  )
}

Width steps

The label root is @container/line-name and fills its parent. Constrain the parent (grid cell, resizable frame) so the queries can fire.

Mode	Ladder
Default (status headers)	Full → middle → short — one line only
`wrap`	Full → middle → optional 2-line → short (chips; prefer Line chip)
`lineIds` / `group`	Wider breakpoints; short codes join as `CIR/HAC/MET`

FindableText keeps Ctrl/Cmd+F and copy on the full canonical name when an abbreviated tier is painted.

Props

Prop	Type	Description
`lineId`	`string`	Single line id. Mutually exclusive with `lineIds`.
`name`	`string`	Fallback / override when the id is unknown.
`lineIds`	`string[]`	Shared-track group (e.g. Circle + H&C + Met).
`names`	`string[]`	Optional per-id overrides aligned with `lineIds`.
`wrap`	`boolean`	Allow a 2-line form after middle fails.
`group`	`boolean`	Wider breakpoints; forced when `lineIds` is set.
`className`	`string`	Optional class merge.

In code

Line chip · Tube & Rail Status · Platform chip · Station name labels

Purpose

This is not a filled chip. For labelling chips, shared-track chip rails, and colour bars, see Line chip.

Prefer abbreviation before wrapping; short codes are last resort. Curated tiers live in lib/tfl/line-names.ts.

Ships inside the Line chip registry package today (line-badge.json — packaging name, not the UI role).

Installation

pnpm dlx shadcn@latest add https://tfl.manglekuo.com/r/line-badge.json

Render

import { LineName } from "@/components/tfl/brand/line-name"

export default function Header() {
  return (
    <>
      <LineName lineId="hammersmith-city" />
      <LineName
        lineIds={["circle", "hammersmith-city", "metropolitan"]}
        group
      />
    </>
  )
}

Width steps

The label root is @container/line-name and fills its parent. Constrain the parent (grid cell, resizable frame) so the queries can fire.

Mode	Ladder
Default (status headers)	Full → middle → short — one line only
`wrap`	Full → middle → optional 2-line → short (chips; prefer Line chip)
`lineIds` / `group`	Wider breakpoints; short codes join as `CIR/HAC/MET`

FindableText keeps Ctrl/Cmd+F and copy on the full canonical name when an abbreviated tier is painted.

Props

Prop	Type	Description
`lineId`	`string`	Single line id. Mutually exclusive with `lineIds`.
`name`	`string`	Fallback / override when the id is unknown.
`lineIds`	`string[]`	Shared-track group (e.g. Circle + H&C + Met).
`names`	`string[]`	Optional per-id overrides aligned with `lineIds`.
`wrap`	`boolean`	Allow a 2-line form after middle fails.
`group`	`boolean`	Wider breakpoints; forced when `lineIds` is set.
`className`	`string`	Optional class merge.

Purpose

This is not a filled chip. For labelling chips, shared-track chip rails, and colour bars, see Line chip.

Prefer abbreviation before wrapping; short codes are last resort. Curated tiers live in lib/tfl/line-names.ts.

Ships inside the Line chip registry package today (line-badge.json — packaging name, not the UI role).

Installation

pnpm dlx shadcn@latest add https://tfl.manglekuo.com/r/line-badge.json

Render

import { LineName } from "@/components/tfl/brand/line-name"

export default function Header() {
  return (
    <>
      <LineName lineId="hammersmith-city" />
      <LineName
        lineIds={["circle", "hammersmith-city", "metropolitan"]}
        group
      />
    </>
  )
}

Width steps

The label root is @container/line-name and fills its parent. Constrain the parent (grid cell, resizable frame) so the queries can fire.

Mode	Ladder
Default (status headers)	Full → middle → short — one line only
`wrap`	Full → middle → optional 2-line → short (chips; prefer Line chip)
`lineIds` / `group`	Wider breakpoints; short codes join as `CIR/HAC/MET`

FindableText keeps Ctrl/Cmd+F and copy on the full canonical name when an abbreviated tier is painted.

Props

Prop	Type	Description
`lineId`	`string`	Single line id. Mutually exclusive with `lineIds`.
`name`	`string`	Fallback / override when the id is unknown.
`lineIds`	`string[]`	Shared-track group (e.g. Circle + H&C + Met).
`names`	`string[]`	Optional per-id overrides aligned with `lineIds`.
`wrap`	`boolean`	Allow a 2-line form after middle fails.
`group`	`boolean`	Wider breakpoints; forced when `lineIds` is set.
`className`	`string`	Optional class merge.