Special/AvatarCircles
AvatarCircles
Stacked circular avatars with unique per-avatar gradients, image support, fallback initials, and a +N overflow chip. Hover lifts each avatar for subtle depth.
import { AvatarCircles } from "@animui/ui"Basic
6 avatars with limit=4 — the last two collapse into +2.
AJ
BS
CW
DB
+2
Sizes
AJ
BS
CW
DB
AJ
BS
CW
DB
AJ
BS
CW
DB
Custom ring colour
Match ringColor to your background for seamless stacking on any colour.
AJ
BS
CW
DB
AvatarData props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | Image URL. When provided the image is rendered. |
name | string | — | Used as the tooltip title and fallback initial if no fallback given. |
fallback | string | — | 1–2 character string shown when no src is provided. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
avatars | AvatarData[] | — | Array of avatar objects. |
limit | number | 5 | Max visible avatars; the rest collapse into +N. |
size | "sm" | "md" | "lg" | "md" | Controls avatar diameter and overlap offset. |
ringColor | string | "white" | CSS color of the border ring between avatars. |
className | string | — | Applied to the flex container. |