Toggle Sidebar B
AppearanceLight & dark mode D

Avatar Group

Stacked avatar list with automatic overlap masking. Optional max limit shows the remainder count as a hover-card with the full list.

Default

Pass items array of objects with at least a name.

Replay preview
OM
JL
IN
SD

With max

max truncates and adds a +N overflow with a hover card listing the rest.

Replay preview
OM
JL
IN
SD

Sizes

size accepts a rem value.

Replay preview
OM
JL
IN
OM
JL
IN
OM
JL
IN

Overlap

overlap controls how tightly avatars stack (fraction of size). 0.2, default 0.2, then 0.5.

Replay preview
OM
JL
IN
SD
OM
JL
IN
SD
OM
JL
IN
SD

Colorful

colorful toggles the auto mesh-gradient initials background. Set false for a neutral fill.

Replay preview
OM
JL
IN
SD
OM
JL
IN
SD

Tooltip

Names show on hover by default. Set :show-tooltip="false" to disable.

Replay preview
OM
JL
IN
SD
OM
JL
IN
SD

API Reference

AvatarGroup

PropTypeDefaultDescription
items{ id?, name?, profile_image? }[][]List of avatar models.
sizenumber2.5Avatar diameter in rem.
overlapnumber0.2Fraction of size each avatar overlaps.
gapnumber2Gap between mask cutouts in pixels.
maxnumberMax avatars to show. Rest collapse into +N.
firstOnTopbooleantrueStack first item above others. Set false to invert.
colorfulbooleantrueForward to child Avatars.
showTooltipbooleantrueShow name tooltips on hover.
labelstringaria-label override for the group.
SlotDescription
overflowCustom slot for the +N indicator. Receives { count, hiddenItems }.