Avatar

An image element with a fallback for representing the user.

ABAB
export default function AvatarHero() {
  return (
    <div className="flex gap-3">
      <Avatar>
        <AvatarImage
          src="https://images.unsplash.com/photo-1729552958114-f9fe2e585476?w=128&h=128&dpr=2&q=80"
          alt="User avatar"
        />
        <AvatarFallback>AB</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarFallback>AB</AvatarFallback>
      </Avatar>
    </div>
  );
}

Installation

pnpm dlx shadcn@latest add "https://ora-ui.com/r/avatar.json"

Usage

import { Avatar, AvatarImage, AvatarFallback } from '@/registry/ui/avatar';

<Avatar>
  <AvatarImage src="..." alt="User avatar" />
  <AvatarFallback>AB</AvatarFallback>
</Avatar>;

Examples

Default

Renders an avatar with an image and a text fallback shown while the image loads or if it fails.

AB
export default function AvatarDefault() {
  return (
    <Avatar>
      <AvatarImage
        src="https://images.unsplash.com/photo-1729552958114-f9fe2e585476?w=128&h=128&dpr=2&q=80"
        alt="User avatar"
      />
      <AvatarFallback>AB</AvatarFallback>
    </Avatar>
  );
}

Size

Three sizes are available: sm, default, and lg.

AB
export function AvatarDefault() {
  return (
    <Avatar>
      <AvatarImage
        src="https://images.unsplash.com/photo-1729552958114-f9fe2e585476?w=128&h=128&dpr=2&q=80"
        alt="User avatar"
      />
      <AvatarFallback>AB</AvatarFallback>
    </Avatar>
  );
}

With Badge

Use AvatarBadge to overlay a status indicator on the avatar.

AB
export default function AvatarWithBadge() {
  return (
    <Avatar>
      <AvatarImage
        src="https://images.unsplash.com/photo-1729552958114-f9fe2e585476?w=128&h=128&dpr=2&q=80"
        alt="User avatar"
      />
      <AvatarFallback>AB</AvatarFallback>
      <AvatarBadge className="bg-success-700" />
    </Avatar>
  );
}

Group

Use AvatarGroup to stack multiple avatars with a negative offset. Add AvatarGroupCount to display an overflow count.

ABCDEF
+5
export default function AvatarGroupPreview() {
  return (
    <AvatarGroup>
      <Avatar>
        <AvatarImage src={SRC} alt="User avatar" />
        <AvatarFallback>AB</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src={SRC} alt="User avatar" />
        <AvatarFallback>CD</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src={SRC} alt="User avatar" />
        <AvatarFallback>EF</AvatarFallback>
      </Avatar>
      <AvatarGroupCount>+5</AvatarGroupCount>
    </AvatarGroup>
  );
}

API Reference

For more information, see the Base UI Avatar API Reference.