AG Design System

Component

Avatar

Circular user profile image with an initials fallback when the image is unavailable.

Installation

Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.

npx shadcn@latest add https://design.ag.org/r/avatar

Usage

Use avatars to represent users in comments, lists, and navigation. Always provide an alt text or initials fallback.

Playground

Preview
User avatarJD

Configure

Code

<Avatar>
  <AvatarImage src="/user.jpg" alt="User avatar" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

Variants & States

Supported variants, sizes, and interaction states for this component.

Sizes

  • Small (`sm`)
  • Default
  • Large (`lg`)
  • Extra large (`xl`)

States

  • Image
  • Fallback (initials)

Do

  • Always provide a fallback with 1–2 initials
  • Use consistent sizing within a single list or row

Don't

  • Don't use avatars without an accessible label or alt text
  • Don't stack more than 5 overlapping avatars without a count badge