Data displayAlea Pro

PresenceStack

Who is here: overlapping avatars that each show what the person is doing, a +N button that opens the full list with names and states, and a polite announcement when someone joins or leaves.

import { useThrottledAnnouncer } from '@alea-design/ui';
import { PresenceStack } from '@alea-design/pro';

Examples

Who is here

Avatars with a presence icon each; the +N button opens everyone with names, states and places.

Joins and leaves

Someone joining or leaving is announced politely and at most once every few seconds. Press the buttons quickly: the changes are joined into one sentence.

The throttled announcer

PresenceStack, ReviewChanges and your own live updates share one small hook, useThrottledAnnouncer, from @alea-design/ui. It returns announce(message), clear() and a region to render once. The first message is spoken at once; the ones that arrive before the interval (3 seconds by default) is over are queued and spoken together when it ends. Nothing is lost and nothing piles up.

It knows nothing about the network

The component only draws what you pass. Your own code (a WebSocket, a presence service, polling) decides who is here and sets members; it never needs to call the component.

Tokens

The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.

Color

--alea-bg…
--alea-surface-hover…
--alea-surface-raised…
--alea-text…
--alea-text-muted…

Space

--alea-space-0-5…
--alea-space-10…
--alea-space-2…
--alea-space-3…
--alea-space-6…
--alea-space-8…

Radius

--alea-radius-full…

Type

--alea-font-family-body…
--alea-font-size-xs…
--alea-font-weight-medium…
--alea-font-weight-semibold…

Component

--alea-hit-min…
--alea-presence-size…
--alea-space-14…

Props

`PresenceStack` props

Show 10 inherited props

Who is here: overlapping avatars with a presence icon each, and a +N button that opens the full list with names and states. It knows nothing about the network: you pass the people, it draws them and announces when someone joins or leaves.

Prop	Type	Default	Description
`members`required	`PresenceMember[]`		Who is here. Pass them in the order to show.
`announce`	`boolean`	`true`	Says "Ana joined" and "Luis left" to screen readers, politely and at most once every few seconds. Default true.
`announceInterval`	`number`	`3000`	The least time between two announcements, in ms. Default 3000.
`max`	`number`	`4`	Shows this many avatars, then a +N button that opens the full list. Default 4.
`size`	`"sm" \| "md" \| "lg" \| "xs"`	`"sm"`	Avatar size. Default sm.

Specs

Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.

Variants: sizesmmdlgxs
States: Hover (CSS)
Dark and light: Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks: .alea-presence-stack.alea-presence-list.alea-presence-more.alea-presence-people.alea-presence-person.alea-presence-person-text.alea-presence-person-name.alea-presence-person-state
Data attributes: data-size=xsdata-size=mddata-size=lgdata-density=touch

The avatars are a list named "N people here". Each one is named with its state, as in "Ana (editing)", and carries an icon, so the state is never only a color.
The +N button is named "3 more people. Show everyone here" and opens a dialog with every name, state and place.
Someone who joins or leaves is announced in a polite status, never on the first render, and at most once every few seconds: a burst of changes is joined into one sentence, so a screen reader does not fall behind.
Someone whose state is offline counts as having left.

Keyboard

Key	Does
`Tab`	Reaches the +N button
`Enter` or `Space`	Opens the list of everyone here
`Esc`	Closes the list and returns to the +N button

Do and don't

Pass the people in the order to show: the first ones are drawn, the rest go to the +N list.
Give each person a stable id: it is how a join or a leave is told from a change of state.
Put where they are in location so the list says it ("editing, Amount").

Don't

Don't use it to list members of a team that is not live: use AvatarGroup.
Don't turn announcements off for a page where people need to know who is editing; set announceInterval higher instead.

In Figma

The properties of the Figma components, generated from the kit, so they always match it. The last column is the React prop each one stands for.

`Presence stack` · 4 variants

Figma property	Kind	Values	Default	React prop
Size	Variant	SM, XS, MD, LG	`SM`	`size`
Overflow count	Text	-	`+3`	`members`
Overflow	Boolean	-	`true`	`max`, `members`