Avatar Group

Display a stack of overlapping avatars with a count indicator for additional users.

User 1
User 2
User 3
+5
User 1
User 2
User 3
User 4
+4
1import { AvatarGroup } from "@/zeroui/components/avatars";
2
3const avatars = [

Max Display Count

User 1
User 2
+6
User 1
User 2
User 3
User 4
+4
User 1
User 2
User 3
User 4
User 5
User 6
+2
1<AvatarGroup avatars={avatars} max={2} />
2<AvatarGroup avatars={avatars} max={4} />
3<AvatarGroup avatars={avatars} max={6} />

Sizes

User 1
User 2
User 3
+5
User 1
User 2
User 3
+5
User 1
User 2
User 3
+5
User 1
User 2
User 3
+5
1<AvatarGroup size="sm" avatars={avatars} max={3} />
2<AvatarGroup size="md" avatars={avatars} max={3} />
3<AvatarGroup size="lg" avatars={avatars} max={3} />

Spacing

Tight
User 1
User 2
User 3
User 4
+4
Normal
User 1
User 2
User 3
User 4
+4
Loose
User 1
User 2
User 3
User 4
+4
1<AvatarGroup spacing="tight" avatars={avatars} max={4} />
2<AvatarGroup spacing="normal" avatars={avatars} max={4} />
3<AvatarGroup spacing="loose" avatars={avatars} max={4} />

Installation

npx zeroui@latest add avatar-group

Props

nametypedefaultdescription
avatarsAvatarItem[]required-
maxnumber4-
size"xs" | "sm" | "md" | "lg" | "xl""md"-
shape"circle" | "square""circle"-
spacing"tight" | "normal" | "loose""normal"-
classNamestring""-