shadcn.io is not affiliated with official shadcn/ui

Shadcn Avatar for React

Displays a user's profile image with fallback.

PreviewCode

CNER

CNLRER

Installation

bunx --bun shadcn@latest add https://kit.dev/r/base/avatar.json

npx shadcn@latest add https://kit.dev/r/base/avatar.json

pnpm dlx shadcn@latest add https://kit.dev/r/base/avatar.json

yarn shadcn@latest add https://kit.dev/r/base/avatar.json

Install the following dependencies:

bun add @base-ui/react

npm install @base-ui/react

pnpm add @base-ui/react

yarn add @base-ui/react

Copy and paste the following code into your project.

components/ui/avatar.tsx

"use client";

import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
import type React from "react";
import { cn } from "@/lib/utils";

export const Avatar = (
  props: AvatarPrimitive.Root.Props & {
    size?: "default" | "sm" | "lg";
  }
) => {
  const { className, size = "default", ...rest } = props;

  return (
    <AvatarPrimitive.Root
      className={cn(
        "cn-avatar group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten",
        className

Update the import paths to match your project setup.

Anatomy

Avatar
├── AvatarImage
└── AvatarFallback

Usage

import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from "@/components/ui/avatar";

<div className="flex flex-row flex-wrap items-center gap-6 md:gap-12">
  <Avatar>
    <AvatarImage
      alt="@shadcn"
      className="grayscale"
      height={32}
      src="https://github.com/shadcn.png"
      width={32}
    />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage
      alt="@evilrabbit"
      height={32}
      src="https://github.com/evilrabbit.png"
      width={32}
    />
    <AvatarFallback>ER</AvatarFallback>
    <AvatarBadge className="bg-green-600 dark:bg-green-800" />
  </Avatar>
  <AvatarGroup className="grayscale">
    <Avatar>
      <AvatarImage
        alt="@shadcn"
        height={32}
        src="https://github.com/shadcn.png"
        width={32}
      />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage
        alt="@maxleiter"
        height={32}
        src="https://github.com/maxleiter.png"
        width={32}
      />
      <AvatarFallback>LR</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage
        alt="@evilrabbit"
        height={32}
        src="https://github.com/evilrabbit.png"
        width={32}
      />
      <AvatarFallback>ER</AvatarFallback>
    </Avatar>
    <AvatarGroupCount>+3</AvatarGroupCount>
  </AvatarGroup>
</div>

Demos

Basic

A basic avatar with an image and a fallback.

PreviewCode

Badge

Use AvatarBadge to add a badge at the bottom end of the avatar.

PreviewCode

Badge Icon

Use an icon inside AvatarBadge.

PreviewCode

Group

Use AvatarGroup to stack overlapping avatars.

PreviewCode

Group Count

Use AvatarGroupCount to show additional avatars in the group.

PreviewCode

Group Count Icon

Use an icon inside AvatarGroupCount.

PreviewCode

Size

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

PreviewCode

Use the avatar as a trigger for a dropdown menu.

PreviewCode

Rtl

Right-to-left avatar. See the RTL configuration guide for document direction.

PreviewCode

API Reference

Avatar

span

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"avatar"

data-scope"avatar"

data-part"root"

data-size?string

AvatarImage

img

PropType

keepMounted?boolean

onLoadingStatusChange?(status: ImageLoadingStatus) → void

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"avatar-image"

data-scope"avatar"

data-part"image"

data-statestring

AvatarFallback

span

PropType

delay?number

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"avatar-fallback"

data-scope"avatar"

data-part"fallback"

data-statestring

AvatarBadge

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"avatar-badge"

data-scope"avatar"

data-part"root"

AvatarGroup

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"avatar-group"

data-scope"avatar"

data-part"root"

AvatarGroupCount

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"avatar-group-count"

data-scope"avatar"

data-part"root"

Installation

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Anatomy

Usage

Demos

Basic

Badge

Badge Icon

Group

Group Count

Group Count Icon

Size

Dropdown

Rtl

API Reference

Avatar

AvatarImage

AvatarFallback

AvatarBadge

AvatarGroup

AvatarGroupCount