Avatar

Circular user representation with support for initials, images, and stacked groups. Falls back gracefully from image to initials on load error.

Initials

Installation

npm install @bloomkit/react

Usage

import { Avatar } from "@bloomkit/react";
 
{/* With initials */}
<Avatar initials="AB" size="md" />
 
{/* With image */}
<Avatar src="https://example.com/photo.jpg" alt="Alex Brown" size="md" />

AvatarGroup

Stack multiple avatars together with a negative offset:

import { Avatar, AvatarGroup } from "@bloomkit/react";
 
<AvatarGroup>
  <Avatar initials="AB" size="sm" />
  <Avatar initials="CD" size="sm" />
  <Avatar initials="EF" size="sm" />
</AvatarGroup>

Props

Prop	Type	Default	Description
initials	string	—	One or two letters shown when no image is provided
src	string	—	URL of the avatar image
alt	string	—	Accessible alt text for the image
size	"sm" \| "md" \| "lg"	"md"	Size of the avatar circle
className	string	""	Additional Tailwind classes (merged via tailwind-merge)