127 Components
Avatar Stack Presence
OverlaysSlack and Figma-style overlapping user avatar stack with live online/idle/offline status indicator dots, +N overflow chip, rich member profile popover cards with timezone and quick ping, and full team drawer directory.
Team Presence Stack4 Online
Hover individual avatars for detailed status cards • Click +N for full roster
AV
ER
MC
SJ
LV
Visible Limit:
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/avatar-stack-presence.json"
Props
TypeScript props supported by <AvatarStackPresence />.
| Prop | Type | Default | Description |
|---|---|---|---|
| members | TeamMember[] | — | Array of team member objects with name, role, initials, status, and timezone. |
| maxVisible | number | 5 | Maximum number of individual avatar rings displayed before grouping into +N. |
| size | "sm" | "md" | "lg" | "md" | Diameter scaling preset for the avatar stack. |
| className | string | — | Additional CSS classes to apply to the root container. |
Key Features
- Overlapping negative-space avatar ring styling with crisp border knockouts.
- Real-time presence status dots with emerald pulsing online, amber idle, and slate offline indicators.
- Dynamic +N overflow chip with expandable full-directory modal.
- Rich profile card popovers with timezones, role titles, recent activities, and interactive pings.
- Quick status filter buttons and adjustable visible avatar capacity limits.
Keyboard & Accessibility
- Comprehensive aria-labels for each avatar announcing member name and current presence state.
- Full keyboard navigation into the hover card and team directory modal.
- Accessible focus rings and WCAG AAA compliance for avatar text contrast.