Presence
Who else is here. The overflow count carries its own tooltip listing the rest — a "+5" that cannot tell you who is unhelpful in exactly the moment you care.
src/components/ui/presence.tsxAbout
From the component's own source, where it was written.
Who else is here.
Stacked avatars with a status ring. The overflow count is a real element with its own tooltip listing the rest, not a truncated visual — "+5" that cannot tell you who is unhelpful in exactly the moment you care.
The ring colour is the only signal that changes, so someone going idle does not reflow the row.
Install
npx astralyx-ui add presence
Usage
import { Presence } from '@/components/ui/presence'
<Presence peers={peers} max={4} />Composer
Change the props and the source below follows.
<Presence peers={peers} max={4} size="sm" />Examples
Viewers
<Presence peers={peers} max={4} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
Presence
Who else is here.
Extends ComponentProps<'div'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| peers | Peer[] | required | { id, name, status?, color? } with status one of active, idle or away. |
| max | number | 4 | Avatars before the overflow chip. |
| size | 'xs' | 'sm' | 'default' | 'sm' | — |
| label | string | 'Viewing now' | — |
Types
Peer
| Field | Type | Description |
|---|---|---|
| id | string | — |
| name | string | — |
| status? | 'active' | 'idle' | 'away' | The only thing that changes, so someone going idle does not reflow the row. |
| color? | string | — |