DUAvatarGroup
ElementsStacked avatars with ring separators, z-order, size-matched overflow, and spacing.
import { DUAvatarGroup, DUAvatar } from 'deri-ui';Live preview
AB
CD
EF
+2
AL
GH
AT
KJ
typescript
<DUAvatarGroup max={3} size="md" spacing="normal">
<DUAvatar name="A" /><DUAvatar name="B" status="online" /><DUAvatar name="C" /><DUAvatar name="D" />
</DUAvatarGroup>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| max | number | 4 | Visible avatars before +N |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Default avatar / overflow size |
| spacing | 'tight' | 'normal' | 'loose' | 'normal' | Overlap amount |
| children | ReactNode | — | DUAvatar nodes |
Usage
import { DUAvatarGroup, DUAvatar } from 'deri-ui';
<DUAvatarGroup max={3} size="md" spacing="normal">
<DUAvatar name="A" /><DUAvatar name="B" status="online" /><DUAvatar name="C" /><DUAvatar name="D" />
</DUAvatarGroup>Customize with className, radius, and Tailwind utilities. Theme tokens come from deri-ui/tailwind.preset.
Related
© 2026 Deri Ui. Developed by Deribew Shimelis. Copy and use the code freely in your projects.