videorc/uiAvatar
A round picture of a chat author or a channel, with initials while the picture loads or when it fails, in three sizes.
VRMCJD
Installation
$ pnpm dlx shadcn@latest add @videorc/avatarUsage
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";<Avatar>
<AvatarImage alt="" src={authorAvatarUrl} />
<AvatarFallback>MC</AvatarFallback>
</Avatar>Anatomy
<Avatar>
<AvatarImage />
<AvatarFallback />
<AvatarBadge />
</Avatar>
<AvatarGroup>
<Avatar />
<AvatarGroupCount />
</AvatarGroup>Examples
Group
Overlap a few avatars and end with a count for the rest, such as a channel's moderators.
MCJDPS
+12
Theming
| Token or attribute | Meaning |
|---|---|
data-size | sm (24 px), default (32 px) or lg (40 px) |
after:border-border | The hairline over the picture, blended so it reads on any photo |
bg-muted, text-muted-foreground | The fallback's fill and initials |
Accessibility
Give AvatarImage an alt that names the person or channel. When the name is printed beside the avatar, as it is in a chat row, use alt="" and aria-hidden on the avatar so the name isn't read twice.
API reference
Avatar
Every Base UI Avatar Root prop, plus:
Prop
Type
AvatarFallback
Every Base UI Avatar Fallback prop. delay waits that many milliseconds before showing the initials, so a fast image never flashes them.
AvatarBadge, AvatarGroup and AvatarGroupCount take <span> and <div> props.