Skip to content
Cuelark UI
Display

Avatar

Avatars with tinted initials, presence dots and fanning groups.

Avatars represent people and teams. Cuelark avatars fall back to initials in a tint derived from the name, show presence dots, and AvatarGroup stacks people that fan apart on hover and collapses extras into +N.

Preview

ALGHATC
ALGHATKJLT+2

Installation

pnpm dlx shadcn@latest add https://ui.cuelark.com/r/avatar.json

The CLI also installs the Cuelark theme tokens. With the @cuelark namespace configured, use @cuelark/avatar.

Usage

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

<Avatar status="online">
  <AvatarImage src="/ada.jpg" alt="Ada Lovelace" />
  <AvatarFallback name="Ada Lovelace" />
</Avatar>

API reference

Avatar

PropTypeDefaultDescription
size"xs" | "sm" | "md" | "lg" | "xl""md"Size.
shape"circle" | "square""circle"Shape.
status"online" | "away" | "busy" | "offline"—Presence dot.

AvatarFallback

PropTypeDefaultDescription
namestring—Initials and a deterministic tint.

AvatarGroup

PropTypeDefaultDescription
maxnumber—Show this many, then +N.

Accessibility

  • Give AvatarImage an alt with the person's name.
  • Status dots have a text label.

FAQ

Also searched as: react avatar · avatar group · user avatar · shadcn avatar · avatar with status