Component
Avatar Group
Overlapping avatar stack with overflow badge. Shows team members or participants. Uses the headless @refraction-ui/avatar-group core.
Examples
Overlapping avatars with overflow count badge.
DB
+1
Installation
$
pnpm add @refraction-ui/react-avatar-groupUsage
tsx
import { AvatarGroup } from '@refraction-ui/react-avatar-group'
export function MyComponent() {
return (
<AvatarGroup
users={[{ id: '1', name: 'Alice', src: '/avatar.jpg' }]}
max={3}
/>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
users | AvatarUser[] | -- | Array of { id, name, src? }. |
max | number | -- | Max avatars before overflow badge. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Size of avatars. |
className | string | -- | Additional CSS classes. |