Avatar

The Avatar component is used to display a user's profile image, initials, or a general fallback representation. It supports various sizes, user status indicators, and an optional name/email label group.

Installation

Usage

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 current 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, ensuring screen readers can announce the content of the avatar.
• 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.