Image avatars with initials fallback, presence dots and overlapping groups.
npx shadcn@latest add @lokalhost/avatarThe source is copied to components/ui/avatar.tsx — it’s yours to edit.
import { Avatar, AvatarGroup } from "@/components/ui/avatar";
<Avatar name="Amelia Hart" src="https://i.pravatar.cc/200?img=47" size={56} status="online" />
<AvatarGroup max={4} size={44}>
<Avatar name="Amelia Hart" />
<Avatar name="Jonas Berg" />
<Avatar name="Maya Lin" />
<Avatar name="Leo Park" />
<Avatar name="Sara Ali" />
<Avatar name="Omar Diaz" />
</AvatarGroup>| Prop | Type | Default | Description |
|---|---|---|---|
namerequired | string | — | Used for initials and accessibility label. |
src | string | undefined | Image URI. Falls back to initials if missing or broken. |
size | number | 40 | Diameter in points. |
status | "online" | "away" | "offline" | undefined | Presence dot. |
<AvatarGroup max> | number | 4 | Overlaps children and shows a +N counter. |