Display
Avatar
Versatile avatar components with fallbacks and size variations
Note
All presented components are responsive and compatible with Tailwind CSS. Make sure Tailwind is configured in your project to use them.
Dynamic Avatars
Props Reference
| Prop | Type | Description | Default |
|---|---|---|---|
name | string | User name for generating initials and alt text | 'John Doe' |
avatar | string | URL of the user's profile image | undefined |
status | 0 | 1 | 2 | 3 | User status: 0=Offline, 1=Online, 2=Away, 3=Busy | undefined |
verified | boolean | Whether the user has verified badge | false |
size | string | Avatar size using Tailwind classes (e.g., size-14) | 'size-14' |
className | string | Additional CSS classes for styling | undefined |
Status Values:
0: Offline (gray indicator)1: Online (green indicator)2: Away (yellow indicator)3: Busy (red indicator)