AI Components / Presence
Presence
Overlapping avatar stack showing live user presence with status dots (online/away/busy/offline), pulsing online indicator, hover tooltips with status + last-seen text, and a +N overflow badge. Three sizes (sm/md/lg) and an async-loading skeleton state.
ai-collab v0.5.0
Playground
Examples
All four statuses
<ai-presence></ai-presence>Sizes (sm / md / lg)
<cg-stack direction="column" gap="md"><ai-presence size="sm"></ai-presence><ai-presence size="md"></ai-presence><ai-presence size="lg"></ai-presence></cg-stack>With overflow (+N)
<ai-presence max-visible="3"></ai-presence>Loading skeleton
<ai-presence loading max-visible="4"></ai-presence>Import
import { AiPresence } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-presence';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
users | { name, status, avatar?, lastSeen? }[] | — | User presence list |
size | "sm" | "md" | "lg" | "md" | Avatar size — scales dot size, overlap, and initials font |
max-visible | number | 5 | Max avatars shown before overflow badge |
loading | boolean | false | Render skeleton placeholders instead of users |
Events
| Event | Detail | Description |
|---|---|---|
ai-presence-user-click | { user } | An avatar was clicked |