Avatar
A face, or initials when there is no picture: round, with an ink ring and a quiet line outside it, in the three control heights.
Install
# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/avatarExamples
A picture, initials, a group
MKRV
MKRVJO
+4
import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage,} from "@/components/zero/avatar";export default function AvatarKinds() { return ( <div className="flex flex-wrap items-center gap-6"> <Avatar size="lg"> <AvatarImage src="/samples/portrait-a.svg" alt="Mara K." /> <AvatarFallback>MK</AvatarFallback> <AvatarBadge /> </Avatar> <Avatar> <AvatarFallback>RV</AvatarFallback> </Avatar> <AvatarGroup> <Avatar size="sm"> <AvatarImage src="/samples/portrait-a.svg" alt="Mara K." /> <AvatarFallback>MK</AvatarFallback> </Avatar> <Avatar size="sm"> <AvatarImage src="/samples/portrait-b.svg" alt="Rui V." /> <AvatarFallback>RV</AvatarFallback> </Avatar> <Avatar size="sm"> <AvatarFallback>JO</AvatarFallback> </Avatar> <AvatarGroupCount size="sm">+4</AvatarGroupCount> </AvatarGroup> </div> );}Behaviour
Round is the one radius zeroUI allows, kept for things round by nature. Initials show while the picture loads and if it fails.
AvatarBadge puts a status dot on the edge, the accent unless you colour it. AvatarGroup overlaps several, and AvatarGroupCount says how many more.
Props
Avatar
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | 32, 40 or 52 px: the control heights. |
Also takes every prop of Base UI's Avatar.Root.
AvatarImage, AvatarFallback
Also takes every prop of Base UI's Avatar.Image.