Avatar Group - HapplyUI

A compound component for displaying overlapping avatar stacks with an overflow indicator.

Installation

bunx @happlyui/cli@latest add avatar-group

Dependencies

Registry dependencies

These are automatically installed when you add this component.

tv
recursive-clone-children
avatar

Usage

import * as AvatarGroup from "@/components/ui/avatar-group"
import * as Avatar from "@/components/ui/avatar"

<AvatarGroup.Root>
  <Avatar.Root>
    <Avatar.Image src="/path/to/image.png" />
  </Avatar.Root>
  <AvatarGroup.Overflow>+3</AvatarGroup.Overflow>
</AvatarGroup.Root>

Examples

Size

Avatar groups come in 9 sizes matching the Avatar sizes: 80 (default), 72, 64, 56, 48, 40, 32, 24, and 20. The size prop propagates to child Avatar.Root components.

<AvatarGroup.Root size="48">
  <Avatar.Root>
    <Avatar.Image src="/path/to/image.png" />
  </Avatar.Root>
  <Avatar.Root>
    <Avatar.Image src="/path/to/image.png" />
  </Avatar.Root>
  <AvatarGroup.Overflow>+9</AvatarGroup.Overflow>
</AvatarGroup.Root>

API Reference

AvatarGroup.Root

The main container that arranges avatars in an overlapping stack.

Prop	Type	Default	Description
`size`	`'80' \| '72' \| '64' \| '56' \| '48' \| '40' \| '32' \| '24' \| '20'`	`'80'`	The size of all avatars in the group. Propagated to child Avatar.Root and AvatarGroup.Overflow components.

AvatarGroup.Overflow

A circular overflow indicator showing the count of additional avatars not displayed.

Prop	Type	Default	Description