Avatar

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

Installation

npx bearnie add avatar

Usage

import {
  Avatar,
  AvatarImage,
  AvatarFallback,
} from "@/components/bearnie/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