@edux-design/avatars

Token-driven avatar primitives for identity and presence. The package includes single avatars with initials/image support and an overlap-friendly avatar group.

Installation

pnpm add @edux-design/avatars @edux-design/utils
# or
npm install @edux-design/avatars @edux-design/utils

The package ships React components and depends on react@^19.1.0 / react-dom@^19.1.0.

Usage

import { Avatar, AvatarGroup } from "@edux-design/avatars";

export function Team() {
  return (
    <AvatarGroup>
      <Avatar name="Ada Lovelace" />
      <Avatar name="Grace Hopper" src="/grace.png" />
      <Avatar name="Margaret Hamilton" online />
    </AvatarGroup>
  );
}

Avatar Props

| Prop | Description | | ---- | ----------- | | name | Full name used to derive initials and for accessible labels. | | initials | Optional override for the displayed initials. | | src | Image URL for the avatar. When provided, the image renders instead of initials. | | alt | Accessible text for the image. Defaults to name. | | size | "small", "medium", or "large". Defaults to "medium". | | online | When true, shows the online status dot. |

AvatarGroup Props

| Prop | Description | | ---- | ----------- | | size | Spacing size for the overlap (use the same size as the avatars inside). | | overlap | Whether avatars overlap. Defaults to true. |

Development

pnpm --filter @edux-design/avatars lint
pnpm --filter @edux-design/avatars check-types
pnpm --filter @edux-design/avatars build

Stories live under src/demos/Avatar.stories.jsx with initials, image, online state, and group overlap examples.