Avatar

Installation

pnpm dlx brutx@latest add avatar

Basic Usage

CNJDAB

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

<Avatar>
  <AvatarImage src="https://i.pravatar.cc/150?img=32" alt="User" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

Sizes

SMMDLGXL

<Avatar size="sm"><AvatarImage src="..." /><AvatarFallback>SM</AvatarFallback></Avatar>
<Avatar size="default"><AvatarImage src="..." /><AvatarFallback>MD</AvatarFallback></Avatar>
<Avatar size="lg"><AvatarImage src="..." /><AvatarFallback>LG</AvatarFallback></Avatar>
<Avatar size="xl"><AvatarImage src="..." /><AvatarFallback>XL</AvatarFallback></Avatar>

Shape

SQRD

<Avatar shape="square"><AvatarImage src="..." /><AvatarFallback>SQ</AvatarFallback></Avatar>
<Avatar shape="rounded"><AvatarImage src="..." /><AvatarFallback>RD</AvatarFallback></Avatar>

Fallback

When no image is provided or the image fails to load, the fallback content is displayed. You can customize the fallback with colors and initials.

{/* Only fallback - no image */}
<Avatar>
  <AvatarFallback className="bg-[#FF6B6B] text-white font-bold">
    JD
  </AvatarFallback>
</Avatar>

{/* With image that may fail */}
<Avatar>
  <AvatarImage src="/user-avatar.jpg" alt="User" />
  <AvatarFallback className="bg-[#4ECDC4] text-white">AB</AvatarFallback>
</Avatar>

Avatar Group

ABC+3

<div className="flex -space-x-3">
  <Avatar className="border-4 border-white">
    <AvatarImage src="https://i.pravatar.cc/150?img=20" alt="User" />
    <AvatarFallback className="bg-[#FF6B6B] text-white">A</AvatarFallback>
  </Avatar>
  <Avatar className="border-4 border-white">
    <AvatarImage src="https://i.pravatar.cc/150?img=21" alt="User" />
    <AvatarFallback className="bg-[#4ECDC4] text-white">B</AvatarFallback>
  </Avatar>
  {/* ... */}
</div>