Avatar Group

Stacks multiple avatars in an overlapping row with a +N overflow count when the list exceeds max.

ExamplesCodeUsageChangelog

Basic

JS

MT

SC

DW

CL

Tailwind v4

<AvatarGroup :avatars="[
  { name: 'Jane Smith' },
  { name: 'Mike Torres' },
  { name: 'Sarah Chen' },
]" />

With overflow

JS

MT

SC

+3

Tailwind v4

<AvatarGroup :max="3" :avatars="members" />

Sizes

JS

MT

SC

JS

MT

SC

JS

MT

SC

Tailwind v4

<AvatarGroup size="small" :avatars="members" />

Props

Prop	Type	Default	Description
avatars	Array<{ name: string; src?: string; status? }>	—	Required. List of avatar data
max	number	5	Maximum avatars shown before overflow count
size	'xsmall' | 'small' | 'medium'	'small'	Avatar size