Avatar

An image element representing a user, with a graceful text fallback when the image is unavailable. Built on Radix UI's Avatar primitive.

Install

npx shadcn@latest add https://atomx.acau.net/r/avatar.json

Avatar shows a user's image and automatically swaps to AvatarFallback — typically the user's initials — while the image loads or if it fails. The fallback also renders when no AvatarImage is provided at all. Resize the whole avatar by passing a size-* class to Avatar.

<Avatar>
  <AvatarImage src="/user.png" alt="Jane Doe" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

Preview

With image

Fallback

Sizes

CNCNCN

Props

Component	Extends	Notes
`Avatar`	`AvatarPrimitive.Root`	Sizing wrapper; defaults to `size-8`, override with a `size-*` class.
`AvatarImage`	`AvatarPrimitive.Image`	Takes `src` and `alt`; hidden until the image loads successfully.
`AvatarFallback`	`AvatarPrimitive.Fallback`	Shown while loading or on error; supports `delayMs` to avoid a flash.