Avatar

<Avatar>
<AvatarImage src="/images/avatars/mike.png" alt="User" />
<AvatarFallback>MA</AvatarFallback>
</Avatar>

Installation

npx bearnie add avatar

import Avatar from "@/components/ui/avatar/Avatar.astro";
import AvatarImage from "@/components/ui/avatar/AvatarImage.astro";
import AvatarFallback from "@/components/ui/avatar/AvatarFallback.astro";

Usage

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

<Avatar>
<AvatarImage src="/images/avatars/user.png" alt="User" />
<AvatarFallback>MA</AvatarFallback>
</Avatar>

Examples

Sizes

SM MD LG

<div class="flex items-center gap-4">
<Avatar size="sm">
  <AvatarFallback>SM</AvatarFallback>
</Avatar>
<Avatar size="default">
  <AvatarFallback>MD</AvatarFallback>
</Avatar>
<Avatar size="lg">
  <AvatarFallback>LG</AvatarFallback>
</Avatar>
</div>

With fallback

<Avatar>
<AvatarImage src="/broken-image.png" alt="User" />
<AvatarFallback>JD</AvatarFallback>
</Avatar>

Avatar group

MA JD AB CD

<AvatarGroup>
<Avatar class="border-2 border-background">
  <AvatarImage src="/images/avatars/mike.png" alt="Mike" />
  <AvatarFallback>MA</AvatarFallback>
</Avatar>
<Avatar class="border-2 border-background">
  <AvatarFallback>JD</AvatarFallback>
</Avatar>
<Avatar class="border-2 border-background">
  <AvatarFallback>AB</AvatarFallback>
</Avatar>
<Avatar class="border-2 border-background">
  <AvatarFallback>CD</AvatarFallback>
</Avatar>
</AvatarGroup>

Avatar group with max

MA JD AB CD EF

<AvatarGroup max={3}>
<Avatar class="border-2 border-background">
  <AvatarImage src="/images/avatars/mike.png" alt="Mike" />
  <AvatarFallback>MA</AvatarFallback>
</Avatar>
<Avatar class="border-2 border-background">
  <AvatarFallback>JD</AvatarFallback>
</Avatar>
<Avatar class="border-2 border-background">
  <AvatarFallback>AB</AvatarFallback>
</Avatar>
<Avatar class="border-2 border-background">
  <AvatarFallback>CD</AvatarFallback>
</Avatar>
<Avatar class="border-2 border-background">
  <AvatarFallback>EF</AvatarFallback>
</Avatar>
</AvatarGroup>

Anatomy

Avatar - The root container with size variants
AvatarImage - The profile image
AvatarFallback - Displayed when image fails to load
AvatarGroup - Groups avatars with optional max limit

Props

Prop	Type	Default	Description
size	sm \| default \| lg	default	Avatar size
class	string	-	Additional CSS classes

AvatarImage

Prop	Type	Default	Description
src	string	required	Image source URL
alt	string	required	Alt text for accessibility
class	string	-	Additional CSS classes

AvatarFallback

Prop	Type	Default	Description
class	string	-	Additional CSS classes

AvatarGroup

Prop	Type	Default	Description
max	number	-	Maximum avatars to show before overflow indicator
size	sm \| default \| lg	default	Size for overflow indicator
class	string	-	Additional CSS classes