Avatar

An image element with a fallback for representing the user.

API Reference

Preview

Installation

Usage

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
<Avatar>
  <AvatarImage src="/avatars/01.png" alt="User avatar" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

API Reference

Avatar

Root component. Styled wrapper for Avatar.Root from Base UI.

AvatarImage

Image element for the avatar. Styled wrapper for Avatar.Image from Base UI.

AvatarFallback

Fallback content displayed when the image fails to load. Styled wrapper for Avatar.Fallback from Base UI.

AvatarBadge

Status indicator badge overlaying the avatar.

AvatarGroup

Container for displaying multiple avatars with overlap styling.

AvatarGroupCount

Count indicator showing additional users not displayed. Must be used inside an Avatar component within AvatarGroup.

Examples

Fallback Only

With Status

Sizes

Shapes

Group