KQ-872 · MEMBER/LIST

Member List

A roster in two groups whose rows carry layout, so a change of state re-sorts them on glide, and a useId-prefixed layoutId, so a member crossing from offline to online travels between the two lists as one row instead of blinking. Arrivals slide in from distances.step under a cobalt wash replayed by a key, departures only fade on the exit ease, and the frame's height comes from a ResizeObserver so an empty group reserves nothing. Rows are buttons under a roving tabindex: Down and Up step through both groups, Home and End jump to the ends.

KQ-872 · MEMBER/LIST

In the room3

Offline2

3 in the room · nothing has changed

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/member-list

Props

members: Member[]; default —; The room; sorted into two groups, with ties keeping the array's order.
label: string; default —; Names the roster for assistive technology; opens each group's list label.
groupLabels: { online: string; offline: string }; default { online: "In the room", offline: "Offline" }; The two headings.
onSelect: (id: string) => void; default —; Fires from a row's click, Enter or Space.
onAnnounce: (sentence: string) => void; default —; Fires once per frozen change sentence ("Rui Baptista is online").
emptyLabel: string; default "No one is here"; Drawn when the room is empty.

Prop	Type	Default	Description
members	Member[]	—	The room; sorted into two groups, with ties keeping the array's order.
label	string	—	Names the roster for assistive technology; opens each group's list label.
groupLabels	{ online: string; offline: string }	{ online: "In the room", offline: "Offline" }	The two headings.
onSelect	(id: string) => void	—	Fires from a row's click, Enter or Space.
onAnnounce	(sentence: string) => void	—	Fires once per frozen change sentence ("Rui Baptista is online").
emptyLabel	string	"No one is here"	Drawn when the room is empty.