Avatar

A circular container for user profile images with automatic fallback support. Shows initials or placeholder content when the image is unavailable.

With Image

<Avatar>
  <AvatarImage
    src="https://github.com/shadcn.png"
    alt="User avatar"
  />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Fallback Initials

JDAB

<Avatar>
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

<Avatar>
  <AvatarFallback>AB</AvatarFallback>
</Avatar>

Custom Sizes

SMMDLGXL

<Avatar className="h-8 w-8">
  <AvatarFallback>SM</AvatarFallback>
</Avatar>

<Avatar>
  <AvatarFallback>MD</AvatarFallback>
</Avatar>

<Avatar className="h-14 w-14">
  <AvatarFallback>LG</AvatarFallback>
</Avatar>

<Avatar className="h-20 w-20">
  <AvatarFallback>XL</AvatarFallback>
</Avatar>

API Reference

Avatar

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes. Use to override the default h-10 w-10 sizing.

AvatarImage

Prop	Type	Default	Description
`src` required	`string`	—	The image URL for the avatar.
`alt` required	`string`	—	Accessible alt text for the avatar image.
`className`	`string`	—	Additional CSS classes for the image element.

AvatarFallback

Prop	Type	Default	Description
`children` required	`React.ReactNode`	—	Fallback content shown while the image loads or when it fails. Typically initials.
`className`	`string`	—	Additional CSS classes for the fallback container.