AvatarCircles
avatar-circlesStacks overlapping avatars with an optional overflow count.
Usage
Basic usage
avatars are stacked in order (the latter over the former) to form an overlapping avatar group.
tsx
const avatars = [
{ src: "/demo/avatar-1.jpg", alt: "u1" },
{ src: "/demo/avatar-2.jpg", alt: "u2" },
{ src: "/demo/avatar-3.jpg", alt: "u3" },
{ src: "/demo/avatar-4.jpg", alt: "u4" },
];
<AvatarCircles avatars={avatars} />Extra Count
extraCount Add a "+N" circle at the end to indicate the number of people overflowing.
+9tsx
<AvatarCircles avatars={avatars} extraCount={9} />Dimensions
size Control circle diameter and overlap spacing: sm / md / lg.
+9+9+9tsx
<>
<AvatarCircles avatars={avatars} extraCount={9} size="sm" />
<AvatarCircles avatars={avatars} extraCount={9} size="md" />
<AvatarCircles avatars={avatars} extraCount={9} size="lg" />
</>When to use
Use AvatarCircles to show a compact group of participants or members. Use [Avatar] for one image or User for a person with name and description.
Import
ts
import { AvatarCircles, avatarCirclesItemVariants } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| avatars* | AvatarCirclesItem[] | — | Ordered { src: string; alt?: string } images; later items overlap earlier ones. |
| extraCount | number | — | Additional people rendered in a trailing "+N" circle. |
| size | "sm" | "md" | "lg" | "md" | Circle diameter preset. |
| className | string | — | Custom class name. |
Pitfalls
- Every item requires
src; unlike Avatar, the group has no fallback slot, so a failed image leaves an empty circle. extraCountis display-only and is not derived from array length. Pass the actual overflow count.
Related
Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Badge
Playground
+9<AvatarCircles avatars={avatars} extraCount={9} size="md" />