Rail platform label in a muted rectangle. Narrows from Platform 4 to 4.
pnpm dlx shadcn@latest add https://tfl.manglekuo.com/r/platform-chip.jsonTube & Rail Arrivals · Bus number chip · Station name labels
Narrow
18rem+
26rem+
34rem+
Width steps need an @container/arrivals ancestor, as on RailArrivalsBoard. Label casing stays title-style (Platform 4, Plat 4). Vertical centering trims the text box to cap-alphabetic metrics.
import { PlatformChip } from "@/components/tfl/arrivals/platform-chip"
export default function Row() {
return (
<div className="@container/arrivals">
<PlatformChip number="4" />
</div>
)
}| Prop | Type | Description |
|---|---|---|
number | string | Platform number or letter after “Platform”. |
className | string | Optional class merge. |
Visible form steps with board width: Platform N → Plat N → PN → N. aria-label stays Platform N.
Solid bg-muted-foreground fill, square corners, no border. Optical centre via [text-box:trim-both_cap_alphabetic].
Narrow
18rem+
26rem+
34rem+
Width steps need an @container/arrivals ancestor, as on RailArrivalsBoard. Label casing stays title-style (Platform 4, Plat 4). Vertical centering trims the text box to cap-alphabetic metrics.
import { PlatformChip } from "@/components/tfl/arrivals/platform-chip"
export default function Row() {
return (
<div className="@container/arrivals">
<PlatformChip number="4" />
</div>
)
}| Prop | Type | Description |
|---|---|---|
number | string | Platform number or letter after “Platform”. |
className | string | Optional class merge. |
Visible form steps with board width: Platform N → Plat N → PN → N. aria-label stays Platform N.
Solid bg-muted-foreground fill, square corners, no border. Optical centre via [text-box:trim-both_cap_alphabetic].