Avatar

An image element with a fallback for representing the user.

Basic

Avatar with image and fallback.

shadcn CN JD
<Avatar Src="https://github.com/shadcn.png" Alt="@shadcn" />
<Avatar Fallback="CN" />

Sizes

Customize avatar size with the Class parameter.

<Avatar Src="..." Class="h-8 w-8" />
<Avatar Src="..." Class="h-10 w-10" />
<Avatar Src="..." Class="h-12 w-12" />
<Avatar Src="..." Class="h-16 w-16" />

Fallback

Display initials when no image is provided.

AB CD EF GH
<Avatar Fallback="AB" />
<Avatar Fallback="CD" />

Fallback Color

Set custom background colors for fallback avatars.

AB CD EF GH
<Avatar Fallback="AB" FallbackColor="#e11d48" />
<Avatar Fallback="CD" FallbackColor="#2563eb" />
<Avatar Fallback="EF" FallbackColor="#16a34a" />
<Avatar Fallback="GH" FallbackColor="#9333ea" />