Team Avatars
Avatar collection for team and collaboration contexts — online presence strips, facepiles, task assignment rows, multi-assignee pickers, editing indicators, viewer presence, member directory rows, and invite-pending states.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| theme | "dark" | "light" | "dark" | Color theme — dark for internal tools, light for client-facing or minimal dashboards. |
| accentColor | string | "#6366f1" | Team accent color applied to presence glow, editing ring, assignment hover border, and facepile count badge. |
| onlineCount | number | 4 | Number of team members shown as online in the presence strip and presence grid (1–6). |
When to Use
Perfect for project management tools, internal dashboards, collaborative editors, and admin panels that need to communicate team presence, task ownership, and member status.
Best Practices
Keep the facepile to 4-5 visible avatars max with an overflow count — showing too many loses the human feel. Use EditingIndicator sparingly — only for documents actively being edited.
Why This Component Matters
Team avatar patterns are the social fabric of collaborative products — they communicate who is here, who is responsible, and who to reach out to without any navigation.
FAQ
QHow do I wire the online presence data?
Replace the static status array with a real-time source (WebSocket, polling, or Pusher). The component renders the dot color based on the status string — just pass in live values.
QCan I use FacepileWithCount in a table cell?
Yes — it's a self-contained flex row that shrinks to fit any container width.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.