Presence Facepile
Live avatars with animated status rings, spring join/leave, and a +N overflow that expands into a presence list — who's online, idle, or typing right now.
Q3 product roadmap
7 people viewing
AR
MB
PN
JK
SD
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/presence-facepile.json"Avatars carry a status ring (active, idle, typing, offline) and reorder
with a spring as users join or leave. Beyond max, the rest collapse into a
+N chip that opens a presence list. Colors are stable per user via the shared
presence palette.
Usage
tsx
import { PresenceFacepile } from "@/components/godui/presence-facepile";tsx
<PresenceFacepile users={users} max={5} size="md" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
users | PresenceUser[] | — | People to render. |
max | number | 5 | Avatars before the +N chip. |
size | "sm" | "md" | "lg" | "md" | Avatar size. |
showStatus | boolean | true | Render status rings/typing dots. |