Avatar

React Avatar components are used to display user profile images, initials, or general fallback content. They are commonly used in user profiles, comment lists, team members, and account menus.

This Avatar component is built with React and styled using Tailwind CSS, giving developers control over size, layout, and presentation. It supports various sizes, user status indicators, and an optional name/email label group.

Installation

Usage

Import the component and pass the required props.

import { Avatar } from "@/registry/core/avatar";

export default () => (
  <Avatar
    src="path/to/image.jpg"
    alt="Profile picture of Johurul Haque"
    fallback="JD"
    size="md"
    status="online"
    label={{
      name: "Johurul Haque",
      email: "johurul@pimjo.com"
    }}
  />
);

Examples

Sizes

The Avatar component supports six predefined sizes: xs, sm, md, lg, xl, and xxl.

<div className="flex items-end gap-4">
  <Avatar src="" fallback="XS" size="xs" />
  <Avatar src="" fallback="SM" size="sm" />
  <Avatar src="" fallback="MD" size="md" />
  <Avatar src="" fallback="LG" size="lg" />
  <Avatar src="" fallback="XL" size="xl" />
  <Avatar src="" fallback="XXL" size="xxl" />
</div>

With Status Indicator

Use the status prop to show the user's availability. Options are online, offline, or busy.

<div className="flex gap-6">
  <Avatar src="" fallback="JD" size="md" status="online" />
  <Avatar src="" fallback="SU" size="md" status="offline" />
  <Avatar src="" fallback="TS" size="md" status="busy" />
</div>

With Label Group

The label prop accepts an object with name and email to display descriptive text next to the avatar.

<div className="flex flex-col gap-4">
  <Avatar
    src=""
    fallback="JS"
    size="sm"
    label={{ name: "Jane Smith", email: "jane@company.com" }}
  />
  <Avatar
    src=""
    fallback="JS"
    size="lg"
    label={{ name: "Jane Smith", email: "jane@company.com" }}
  />
</div>

Avatar Group

Use the AvatarGroup component to display a stack of multiple avatars, commonly used for representing members of a team or participants in a discussion.

const members = [
  { src: "img/avatar-1.jpg", alt: "User 1" },
  { src: "img/avatar-2.jpg", alt: "User 2" },
  { src: "img/avatar-3.jpg", alt: "User 3" },
  { src: "img/avatar-4.jpg", alt: "User 4" }
];

<AvatarGroup data={members} size="md" />;

API Reference

Avatar

AvatarGroup

Accessibility

• Alt Text: The alt prop is used for the image, allowing screen readers to announce the avatar content.
• Fallback: When no image is present, the fallback initials are visually clear and provide context.
• Semantic HTML: The component uses a <figure> and <img> (or <span> for fallback) for semantic correctness.

Notes

• The groupStyles are applied to the wrapping <figure> element, which controls the spacing (gap) between the avatar and the LabelGroup if present.
• The status indicator uses a white ring to visually separate it from the avatar's background.
• The AvatarGroup component implements an overlapping effect using negative margin (-space-x-2) and adjusts the z-index of each avatar via inline styles to ensure the correct stacking order.