Avatar

User representation with image, initials fallback, grouping, and status indicator.

Data Display@sisyphos-ui/avatarView on npm

Preview

tsx
AdaLTGHATHL

Installation

Install the individual package:

snippet.bashbash
pnpm add @sisyphos-ui/avatar @sisyphos-ui/core

Or use the umbrella package that bundles everything:

snippet.bashbash
pnpm add @sisyphos-ui/ui

Usage

Import the component styles and the component itself:

snippet.tsxtsx
import "@sisyphos-ui/avatar/styles.css";
import { Avatar } from "@sisyphos-ui/avatar";

Avatar group

Stack avatars and collapse overflow into a `+N` chip.

tsx
ABC+3

API

Props table is being written. See the package README for the complete API surface.

The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README.