Avatar

import {
  Avatar,
  AvatarBadge,

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add avatar
Copy

Usage

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

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

Examples

Basic

A basic avatar component with an image and a fallback.

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

export function AvatarDemo() {

Badge

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

import {
  Avatar,
  AvatarBadge,

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

Copy<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
  <AvatarBadge className="bg-green-600 dark:bg-green-800" />
</Avatar>

Badge with Icon

You can also use an icon inside <AvatarBadge>.

import {
  Avatar,
  AvatarBadge,

Avatar Group

Use the AvatarGroup component to add a group of avatars.

import {
  Avatar,
  AvatarFallback,

Avatar Group Count

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

import {
  Avatar,
  AvatarFallback,

Avatar Group with Icon

You can also use an icon inside <AvatarGroupCount>.

import {
  Avatar,
  AvatarFallback,

Sizes

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

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

export function AvatarSizeExample() {

Dropdown

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

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

API Reference

Avatar

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

AvatarImage

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

AvatarFallback

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

AvatarBadge

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

AvatarGroup

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

AvatarGroupCount

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

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