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.

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

size accepts a rem value.

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

colorful toggles the coloured initials fallback (mesh unless variant says otherwise). Set false for a neutral fill.

Prop	Type	Default	Description
`items`	`{ id?, name?, profile_image? }[]`	`[]`	List of avatar models.
`size`	`number`	`2.5`	Avatar diameter in rem.
`overlap`	`number`	`0.2`	Fraction of size each avatar overlaps.
`gap`	`number`	`2`	Gap between mask cutouts in pixels.
`max`	`number`	—	Max avatars to show. Rest collapse into +N.
`firstOnTop`	`boolean`	`true`	Stack first item above others. Set false to invert.
`colorful`	`boolean`	`true`	Forward to child Avatars.
`variant`	`"mesh" \| "gel"`	—	Fallback look for every child Avatar. Each keeps its own (mesh by default) when unset.
`showTooltip`	`boolean`	`true`	Show name tooltips on hover.
`label`	`string`	—	aria-label override for the group.

Slot	Description
`overflow`	Custom slot for the +N indicator. Receives { count, hiddenItems }.