display contract

AvatarGroup

Stacked avatars with overlap. Truncates with "+N" when over the limit.

Variants

  • default
  • reverse

Sizes

  • sm
  • md
  • lg

Example

<AvatarGroup users={members} max={4} size="md" />

Usage rule

Default max is 4 visible; remaining go into a "+N" tile in the same size.

The full AvatarGroup contract has 3 more rules, plus the do-not patterns. Get the full recipe.

Get the AvatarGroup contract in your project.