Avatar

A person's picture, with initials while it loads or when it fails. Round, or square in Iwa; stacks into a group.

Installation

npx rasengan-ui add avatar

Or with the shadcn CLI, from the registry:

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

Usage

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 
export function Author() {
  return (
    <Avatar>
      <AvatarImage src="/avatars/sakura.png" alt="Sakura Haruno" />
      <AvatarFallback>SH</AvatarFallback>
    </Avatar>
  );
}

Sizes and groups

size is sm, default, lg or xl; the initials follow it.

AvatarGroup overlaps its avatars, and AvatarGroupCount ends the stack with the number left out.

<AvatarGroup>
  <Avatar><AvatarFallback>NU</AvatarFallback></Avatar>
  <Avatar><AvatarFallback>SU</AvatarFallback></Avatar>
  <AvatarGroupCount>+3</AvatarGroupCount>
</AvatarGroup>

Villages

Round with the pill radius, so square in Iwa; the fallback sits on the muted surface, opaque so a stack never shows through in Kiri.

Accessibility

• The image needs an alt naming the person; the fallback shows only when the image is missing or still loading.
• In a group, name the people in the text around it, or give the group an aria-label.

API reference

The parts of Base UI's Avatar: