HomeRendering primitives

Platform chip

Rail platform label in a muted rectangle. Narrows from Platform 4 to 4.

Primitive

Used byTube & Rail Arrivals

Preview

232px
208px
184px
160px

2 min
4 min
Due
6 min
7 min

288px · resize to see it in action

Usage

import { PlatformChip } from "@/components/tfl/arrivals/platform-chip"

<div className="@container/arrivals">
  <PlatformChip number="4" />
</div>

Installable via shadcn CLI

Installation

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

Width steps

Width steps need an @container/arrivals ancestor, as on RailArrivalsBoard. Visible form: Platform N → Plat N → PN → N. Casing stays title-style. aria-label stays Platform N. On a row, compact paints P{n} in a fixed 3ch box so P1 and P2 occupy the same width. That box is for tabular digits, not the wider 5ch letter box used by line codes.

import { PlatformChip } from "@/components/tfl/arrivals/platform-chip"

export default function Row() {
  return (
    <div className="@container/arrivals">
      <PlatformChip number="4" />
    </div>
  )
}

Props

Prop	Type	Description
`number`	`string`	Platform number or letter after “Platform”.
`compact`	`boolean`	Always paint `P{n}` in a fixed `3ch` box. Use on a row when the subgroup heading is not the platform.
`className`	`string`	Optional class merge.

Solid bg-muted-foreground fill, square corners, no border. Optical centre via [text-box:trim-both_cap_alphabetic].

In code

Tube & Rail Arrivals · Bus number chip · Station name labels