Queue display

A React block (a whole screen) in Beamline's Government & legal app.

The screen in a waiting room, read from across the room. It draws only a public projection of the queue (ticket codes and counters, never a name or a phone number), so nothing private can leak by accident. The newest call leads as large as the board allows (code and where to go) and is the only one announced to screen readers; every counter shows the ticket it is serving, the newest marked; the wait for someone joining now is the second figure, over the queue in order with the next ticket marked and the join QR with its link written out. An unknown wait or head count says so instead of a guess; a feed that stopped updating says when it last did. Type follows the board's width, so a TV gets bigger words, not more room.

Use it for

A TV or wall screen in a waiting room showing who is called and who is waiting.
Anywhere a public screen must be unable to show private data, and must say when its data is old.

Not for

The staff board (visit-board).
The visitor's own phone page (visitor-journey).

Anatomy

header: the product's mark, the branch, last updated and the clock
stale notice when the feed stopped
now serving: the newest called ticket at the board's largest size with an arrow to its counter, on the success tint
counters: every counter in the room with the ticket it serves and when it was called (the newest marked), or Free
wait: the wait for someone joining now as the second figure, parties and people counted apart
queue: the waiting codes in order, the first marked Next, five shown and the rest counted
join: the QR with the link written out under its title

States

called: none yet (said in the hero, counters Free); a new call (success, announced once, its counter's row takes the ticket); earlier calls at their counters
waiting: some (five shown, the rest counted); none (said)
counts: people known; people not known (said)
wait: about N min (info); not known yet (said)
feed: current; stale (warning, last update said)
narrow: one column, the call, then the wait and the queue, then the counters and the join point
right to left: the layout mirrors, the arrow turns
reduced motion: a new call doesn't animate

Keyboard

Nothing to operate: a display. Screen readers hear each new call once.

Motion

A newly called ticket settles in once; its counter's code rises into place; a called ticket leaves the queue and the rest move up (useFlip). Nothing runs at rest.

Props

Prop	Type	Default	Description
`branch` (required)	`string`	—
`queue` (required)	`PublicQueue`	—	The public projection only; this screen can't show what it isn't given.
`counters`	`string[]`	—	The counters in the room, in the order they stand ("Counter 1", "Counter 2"…). Each shows the ticket it serves, or that it is free. Default: the counters the called tickets name.
`joinUrl`	`string`	—	The join link shown as a QR, with the link itself written under it for anyone who can't scan.
`staleAfter`	`number`	—	Minutes after which the feed reads as stale.
`now`	`string`	—	ISO; the clock on the board and the reference for staleness. Default: now.
`product`	`string`	—	Your product's name, shown as its mark.
`className`	`string`	—	Classes on the documented visual root; no override by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Import

import { QueueDisplay } from "@beamline/queue-display";

Get it

Queue display is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Queue displayComplete system · $49

The screen in a waiting room, read from across the room.

The waiting room at Market Street

Ticket codes and counters only: the screen is given no names or phone numbers, so it can't show any. The desk calls A040 to Counter 3 and then A041 to Counter 1 a few seconds apart; each newly called ticket leads, takes its counter's row and is the only one announced.

0 × 0full

About Queue display

← Lease renewals Visitor journey →

Part of Beamline UI: polished, editable React components and complete screens for custom applications. Build your own style from any look; tokens, fonts, radii, motion; not only colours.