Avatar

Install

npx shadcn@latest add https://plinth.dhrumilkherde.com/r/avatar.json

Usage

If the image fails or is missing, the fallback renders; by default it derives initials from alt.

import { Avatar, AvatarGroup } from "@/components/ui/avatar";

<Avatar src={user.photo} alt={user.name} size="sm" />
<Avatar alt="Dhrumil Kherde" />          {/* renders DK */}
<Avatar fallback={<IconUser />} alt="" /> {/* custom fallback */}

Group

max collapses the rest into a +N counter.

Props

AvatarGroup: max?: number, size (applied to the overflow counter).

Accessibility

• Base UI Avatar handles image load state; the fallback shows until the image is ready, so there's no flash of empty circle.
• Give alt a person's name; it doubles as the initials source and the image's alternative text.