The Avatar component displays user profile pictures with automatic fallback to initials or placeholder content.
Installation
import {
Avatar,
AvatarImage,
AvatarFallback,
} from "@craftdotui/baseui/components/avatar";
<Avatar>
<AvatarImage src="/avatar.jpg" alt="User name" />
<AvatarFallback>UN</AvatarFallback>
</Avatar>
Components
Avatar (Root)
The container for the avatar image and fallback.
AvatarImage
Alternative text for the image.
Callback when loading status changes.
AvatarFallback
Displayed when the image is loading or fails to load.
Examples
Basic Avatar
<Avatar>
<AvatarImage src="/user.jpg" alt="John Doe" />
<AvatarFallback>JD</AvatarFallback>
</Avatar>
Avatar Group
<div className="flex -space-x-2">
<Avatar>
<AvatarImage src="/user1.jpg" alt="User 1" />
<AvatarFallback>U1</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="/user2.jpg" alt="User 2" />
<AvatarFallback>U2</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="/user3.jpg" alt="User 3" />
<AvatarFallback>U3</AvatarFallback>
</Avatar>
</div>
Custom Size
<Avatar className="size-12">
<AvatarImage src="/user.jpg" alt="User" />
<AvatarFallback>U</AvatarFallback>
</Avatar>
<Avatar className="size-16">
<AvatarImage src="/user.jpg" alt="User" />
<AvatarFallback>U</AvatarFallback>
</Avatar>
Fallback Only
<Avatar>
<AvatarFallback>AB</AvatarFallback>
</Avatar>
Accessibility
- Built on @base-ui/react for accessibility
- Requires alt text on images
- Automatic fallback when image fails
- Proper semantic HTML