avatar.mdx

title	Avatar
description	An image element with a fallback for representing the user.
base	radix
component	true
links	doc api https://www.radix-ui.com/primitives/docs/components/avatar https://www.radix-ui.com/primitives/docs/components/avatar#api-reference

Installation

Command Manual

npx shadcn@latest add avatar

Install the following dependencies:

npm install radix-ui

Copy and paste the following code into your project.

<ComponentSource name="avatar" title="components/ui/avatar.tsx"

/>

Update the import paths to match your project setup.

Usage

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

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

Examples

Basic

A basic avatar component with an image and a fallback.

Badge

Use the AvatarBadge component to add a badge to the avatar. The badge is positioned at the bottom right of the avatar.

Use the className prop to add custom styles to the badge such as custom colors, sizes, etc.

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
  <AvatarBadge className="bg-success" />
</Avatar>

Badge with Icon

You can also use an icon inside <AvatarBadge>.

<ComponentPreview name="avatar-badge-icon" styleName="radix-nova"

/>

Avatar Group

Use the AvatarGroup component to add a group of avatars.

<ComponentPreview name="avatar-group" styleName="radix-nova"

/>

Avatar Group Count

Use <AvatarGroupCount> to add a count to the group.

<ComponentPreview name="avatar-group-count" styleName="radix-nova"

/>

Avatar Group with Icon

You can also use an icon inside <AvatarGroupCount>.

<ComponentPreview name="avatar-group-count-icon" styleName="radix-nova"

/>

Sizes

Use the size prop to change the size of the avatar.

<ComponentPreview name="avatar-size" styleName="radix-nova"

/>

Dropdown

You can use the Avatar component as a trigger for a dropdown menu.

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

API Reference

Avatar

The Avatar component is the root component that wraps the avatar image and fallback.

Prop	Type	Default
size	"default" | "sm" | "lg"	"default"
className	string	-

AvatarImage

The AvatarImage component displays the avatar image. It accepts all Radix UI Avatar Image props.

Prop	Type	Default
src	string	-
alt	string	-
className	string	-

AvatarFallback

The AvatarFallback component displays a fallback when the image fails to load. It accepts all Radix UI Avatar Fallback props.

Prop	Type	Default
className	string	-

AvatarBadge

The AvatarBadge component displays a badge indicator on the avatar, typically positioned at the bottom right.

Prop	Type	Default
className	string	-

AvatarGroup

The AvatarGroup component displays a group of avatars with overlapping styling.

Prop	Type	Default
className	string	-

AvatarGroupCount

The AvatarGroupCount component displays a count indicator in an avatar group, typically showing the number of additional avatars.

Prop	Type	Default
className	string	-

For more information about Radix UI Avatar props, see the Radix UI documentation.