Ageing queue

A React component in Beamline's Data & tables category.

Tickets that visibly age: each ticket's ring fills toward its own service target and steps from on time to late to very late, the words say when it is due or how late it is, and a window predicts when it will be served at the queue's measured pace; the board orders each column by what is due and slides tickets as they move on. A desk shows its second clock (first reply). The public screen is a separate projection: initials only, no items, the expected wait, and only the newly ready ticket announced. The board keeps its own clock once a minute, or follows the host's.

Use it for

Coffee bars and kitchens, clinic walk-ins, service counters, help desks and permit queues: work that has a time promise and people waiting for it.
The host owns the tickets, their states and the measured pace; the part draws each ticket's time against its promise, predicts service and keeps the public screen private.

Not for

Work items moved between stages without a time promise → kanban-board.
A schedule of appointments → event-calendar or availability-layers.

Anatomy

header: the label; Staff / Public screen
staff board: Waiting, Making, Ready with counts (None when empty); a ticket: its ring, number and customer, what it is, the words (Due in N min / Due now / N min late / Ready N min) and its target, the predicted window, the second clock on a desk, the action (Start, Ready, Collected)
public screen: the expected wait for new orders, Preparing and Ready with numbers and initials only

States

on time
due soon
late
very late
ready
empty column
public screen
desk (two clocks)

Keyboard

Each ticket is a group named by its number and customer; Tab reaches its action
The newly ready ticket is said once (a polite status), by initials on the public screen

Motion

A ticket moving column or re-ordering by what is due slides to its place (the shared FLIP); rings step at each minute with no running animation. Nothing runs at rest; reduced motion places everything.

Props

Prop	Type	Default	Description
`label` (required)	`string`	—	"Harbor St bar".
`tickets` (required)	`QueueTicket[]`	—
`now`	`number`	—	Now, in ms; omit and the board keeps its own clock, moving once a minute.
`pace`	`number`	—	Minutes per ticket at the current pace (measured by the host); the predicted service windows come from it.
`replies`	`boolean`	—	Show the desk's second clock (first reply) on each ticket.
`mode`	`"public" \| "staff"`	—	"staff" (default) or "public": the public screen is its own projection, with initials only.
`defaultMode`	`"public" \| "staff"`	—
`onModeChange`	`((mode: "staff" \| "public") => void)`	—
`onAdvance`	`((id: string, to: QueueState) => void)`	—	Move a ticket on: Start, Ready, Collected.
`className`	`string`	—	Classes on the documented visual root; no override by default.
`classNames`	`Partial<Record<"root" \| "public" \| "column" \| "ticket" \| "ring", string>>`	—	Classes for the named visual parts; no overrides by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Import

import { AgeingQueue } from "@beamline/ageing-queue";

Get it

Ageing queue 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

Ageing queueComplete system · $49

Tickets that visibly age.

The lunch rush at the bar

Mid-rush: each ticket fills with heat toward its 8-minute promise, cool, then amber, then red once late (#204 waited 13 minutes, 5 late); its ring holds the minutes waited and its words say when it is due or how late it is; the window says when it will be served at the bar's pace. Play the rush: ten seconds of lunch, orders arrive faster than the bar makes them, tickets age into late and the board orders them by what is due. Switch to the public screen: initials only.

0 × 0full

A help desk with two clocks

A 30-minute promise and the second clock: when the first reply went out, or how long a ticket has had none.

0 × 0full

The screen customers see

A separate projection, not the staff board blurred: initials only, no orders, the expected wait, and only the newly ready ticket is announced.

0 × 0full

About Ageing queue

← Stock horizon Import lens →

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.

Ageing queue

Use it for

Not for

Anatomy

States

Keyboard

Motion

Props

Built from

Import

Get it

More in Data & tables