Avatar

An image element with a fallback for representing the user.

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/avatar.json

Usage

Use avatars for user photos, initials, status badges, and stacked groups.

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

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

Pass size (sm, default, lg) on the root. Compose AvatarBadge for status indicators, and AvatarGroup / AvatarGroupCount for overlapping stacks.