Avatar
Documentation Index
Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.
An image element with a fallback for representing the user.
Overview
Use an avatar to represent a person, team, account, or organization.
Avatars work best when they support identity, not when they carry critical information by themselves. Always pair them with names in places where identity must be unambiguous.
Anatomy
An avatar has an image and a fallback. The image is shown when it loads successfully. The fallback is shown when there is no image or the image fails to load.
Usage guidance
Use initials, an icon, or a neutral placeholder as the fallback. Keep avatar sizes consistent in the same surface. Use grouped avatars when showing a small set of collaborators or participants.
Accessibility
Use meaningful alt text when the avatar image adds identity. Use empty alt text when the visible name already identifies the person next to the image.
Installation
npx honestui@latest add avatarUsage
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"<Avatar>
<AvatarImage src="/avatars/01.png" alt="User avatar" />
<AvatarFallback>CL</AvatarFallback>
</Avatar>Examples
Our examples cover image fallback, size, radius, and grouped avatar patterns.