DUAvatar
ElementsUser image or initials with optional online status.
import { DUAvatar, DUAvatarGroup } from 'deri-ui';Live preview
DU
typescript
<DUAvatar name="Ada Lovelace" status="online" />
<DUAvatarGroup max={3}>
<DUAvatar name="A" /><DUAvatar name="B" /><DUAvatar name="C" /><DUAvatar name="D" />
</DUAvatarGroup>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | — | Image URL |
| name | string | — | Fallback initials source |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Size |
| status | 'online' | 'offline' | 'busy' | 'away' | — | Presence dot |
| rounded | 'full' | 'lg' | 'md' | 'full' | Corner radius |
Usage
import { DUAvatar, DUAvatarGroup } from 'deri-ui';
<DUAvatar name="Ada Lovelace" status="online" />
<DUAvatarGroup max={3}>
<DUAvatar name="A" /><DUAvatar name="B" /><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.