Component
Avatar
Circular user image with an automatic initial-based fallback. Built on Radix UI Avatar.
With image
JDTD
tsx
<Avatar>
<AvatarImage src="/path/to/image.jpg" alt="User" />
<AvatarFallback>JD</AvatarFallback>
</Avatar>Fallback only
MRALDK
tsx
<Avatar>
<AvatarFallback>MR</AvatarFallback>
</Avatar>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className (Avatar) | string | — | Control size — e.g. h-12 w-12. Default is h-10 w-10. |
| src (AvatarImage) | string | — | Image URL. Falls back to AvatarFallback if load fails. |
| alt (AvatarImage) | string | — | Accessible alt text for the image. |