Avatar

CNJDSMLG

A versatile avatar component built on Radix UI primitives with support for images, fallbacks, badges, and grouping.

Installation

npx shadcn@latest add https://nteract-elements.vercel.app/r/avatar.json

Install the dependencies:

npm install radix-ui

Copy from the nteract/elements registry.

Usage

import { Avatar, AvatarImage, AvatarFallback } from "@/registry/primitives/avatar"

export function Example() {
  return (
    <Avatar>
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  )
}

Sizes

The avatar supports three sizes: sm, default, and lg.

SMDFLG

<Avatar size="sm">
  <AvatarFallback>SM</AvatarFallback>
</Avatar>
<Avatar size="default">
  <AvatarFallback>DF</AvatarFallback>
</Avatar>
<Avatar size="lg">
  <AvatarFallback>LG</AvatarFallback>
</Avatar>

With Image

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

With Badge

Use AvatarBadge to add a status indicator or notification badge.

JDJD

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

Avatar Group

Use AvatarGroup to display multiple avatars in a stacked layout.

ABC

<AvatarGroup>
  <Avatar>
    <AvatarFallback>A</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarFallback>B</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarFallback>C</AvatarFallback>
  </Avatar>
  <AvatarGroupCount>+5</AvatarGroupCount>
</AvatarGroup>

Props

Avatar

Prop	Type	Default	Description
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Avatar size
`className`	`string`	—	Additional CSS classes

AvatarImage

Prop	Type	Default	Description
`src`	`string`	—	Image source URL
`alt`	`string`	—	Alt text for the image
`className`	`string`	—	Additional CSS classes

AvatarFallback

Prop	Type	Default	Description
`children`	`ReactNode`	—	Fallback content (typically initials)
`className`	`string`	—	Additional CSS classes

Avatar

On this page