Avatar
An image element with a fallback for representing the user.
Import
import { Avatar, AvatarImage, AvatarFallback } from "@retents/ui/avatar"Usage Guidelines
When to use
- To display a user's profile picture in headers, comments, cards, or lists.
- When you need a graceful fallback (initials) for missing or broken images.
- For stacking multiple users (e.g., a group avatar row).
When NOT to use
- For generic icons or logos — use an icon component or
<img>directly. - For decorative images that don't represent a person — use AspectRatio with an
<img>.
Accessibility
Always provide an alt attribute on AvatarImage. The AvatarFallback should contain the user's initials or a generic icon so screen readers announce meaningful content.
Preview
CNABCN
Sizes
Customize the size by applying a class to the root Avatar:
<Avatar className="size-12">
<AvatarImage src="..." alt="User" />
<AvatarFallback>AB</AvatarFallback>
</Avatar>