KQ-879 · ONLINE/COUNT

Online Count

The figure is a row of ten-face wheels, so only the place that changed travels — up when the count rose, down when it fell, on snap. Beside it a graph of the window extends: one bar per sample, the newest growing in on snap while the rest slide left on glide through layout and the oldest pops out on the exit ease. Pressing the figure pins a name list open in flow inside the card, in a ResizeObserver-measured height, and Escape closes it.

KQ-879 · ONLINE/COUNT

last hour, 4 to 7

6 here · steady · hour 4–7

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/online-count

Props

names: string[]; default []; Who is here now, in the order the list should read them.
count: number; default names.length; The figure, when the host counts more people than it can name.
history: number[]; default []; Samples across the window, oldest first; the graph draws the last `samples` of them.
samples: number; default 12; Bars kept in the graph.
windowLabel: string; default "last hour"; Names the graph's span in the caption and in the spoken sentence.
label: string; default "Online now"; Names the instrument for assistive technology.
maxNames: number; default 6; Names listed before the rest become an "and N more" line.
open / defaultOpen: boolean; default false; Controlled or initial state of the name list.
onOpenChange: (open: boolean) => void; default —; Fires as the list opens and closes, by pointer or by key.
onCountChange: (count: number, delta: number) => void; default —; Fires once per change of the figure, with the signed step.

Prop	Type	Default	Description
names	string[]	[]	Who is here now, in the order the list should read them.
count	number	names.length	The figure, when the host counts more people than it can name.
history	number[]	[]	Samples across the window, oldest first; the graph draws the last `samples` of them.
samples	number	12	Bars kept in the graph.
windowLabel	string	"last hour"	Names the graph's span in the caption and in the spoken sentence.
label	string	"Online now"	Names the instrument for assistive technology.
maxNames	number	6	Names listed before the rest become an "and N more" line.
open / defaultOpen	boolean	false	Controlled or initial state of the name list.
onOpenChange	(open: boolean) => void	—	Fires as the list opens and closes, by pointer or by key.
onCountChange	(count: number, delta: number) => void	—	Fires once per change of the figure, with the signed step.