Avatar

Display

Represents a user with a photo, or a fallback while an image loads.

npx shadcn@latest add avatar

Default

Preview

Live

JDARKTMP

tsx

1<Avatar>
2  <AvatarImage src="https://i.pravatar.cc/96?img=5" alt="User" />
3  <AvatarFallback>JD</AvatarFallback>
4</Avatar>
5<Avatar>
6  <AvatarFallback className="bg-amber-100 text-amber-700">AR</AvatarFallback>
7</Avatar>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
className	string	Override size — the default is 36px (size-9).