Avatar Group

Stacked circular avatars with a see-through gap. The overlap is clipped via CSS mask-image, so the parent background shows through, works on any surface.

bg-background

plain surface
AL
AT
GH
LT
MH
DK

bg-muted

subtle gray
AL
AT
GH
LT
MH
DK

bg-card

with shadow
AL
AT
GH
LT
MH
DK

Linear gradient

sky to fuchsia
AL
AT
GH
LT
MH
DK

Conic gradient

radial sweep
AL
AT
GH
LT
MH
DK

Image background

photo
AL
AT
GH
LT
MH
DK

Sizes

size=1.75
AL
AT
GH
LT
MH
DK
size=2.5 (default)
AL
AT
GH
LT
MH
DK
size=4
AL
AT
GH
LT
MH
DK
size=6
AL
AT
GH
LT
MH
DK

Overlap

overlap=0.2
AL
AT
GH
LT
overlap=0.33
AL
AT
GH
LT
overlap=0.5
AL
AT
GH
LT

Max + Overflow

Set :max for auto overflow. Hover the +N chip to see hidden users via Tippy.

max=3 (6 users)
AL
AT
GH
max=5 (6 users)
AL
AT
GH
LT
MH
no max
AL
AT
GH
LT
MH
DK

Colorful

:colorful toggles the mesh gradient fallback for avatars without a profile image. Set to false for a neutral muted look.

colorful=true (default)
AL
AT
GH
LT
colorful=false
AL
AT
GH
LT

Tooltip

:show-tooltip toggles the per-avatar Tippy tooltip on hover. Default true. Set to false to disable.

show-tooltip=true (default)
AL
AT
GH
LT
show-tooltip=false
AL
AT
GH
LT

Stacking order

:first-on-top (default true) controls which avatar sits on top. Set to false for later-on-top.

default (first on top)
AL
AT
GH
LT
MH
first-on-top=false
AL
AT
GH
LT
MH

Custom overflow slot

Override the +N chip with a named slot. Receives { count, hiddenItems }.

text label
AL
AT
GH
+3