Avatar Group Compact

A compact avatar group component with pill-shaped container, overlapping avatar stack, and overflow count.

Installation

bunx @happlyui/cli@latest add avatar-group-compact

Dependencies

Registry dependencies

These are automatically installed when you add this component.

tv
recursive-clone-children
avatar

Usage

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

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

Examples

Variants

The default variant with shadow and the stroke variant with a ring border around the container.

<AvatarGroupCompact.Root>
  <AvatarGroupCompact.Stack>
    <Avatar.Root>
      <Avatar.Image src="/path/to/image.png" />
    </Avatar.Root>
  </AvatarGroupCompact.Stack>
  <AvatarGroupCompact.Overflow>+9</AvatarGroupCompact.Overflow>
</AvatarGroupCompact.Root>

<AvatarGroupCompact.Root variant="stroke">
  ...
</AvatarGroupCompact.Root>

Size

Compact avatar groups come in 3 sizes: 40 (default), 32, and 24.

<AvatarGroupCompact.Root size="32">
  <AvatarGroupCompact.Stack>
    <Avatar.Root>
      <Avatar.Image src="/path/to/image.png" />
    </Avatar.Root>
  </AvatarGroupCompact.Stack>
  <AvatarGroupCompact.Overflow>+9</AvatarGroupCompact.Overflow>
</AvatarGroupCompact.Root>

API Reference

AvatarGroupCompact.Root

The main pill-shaped container with shadow and optional stroke border.

Prop	Type	Default	Description
`variant`	`'default' \| 'stroke'`	`'default'`	The visual style
`size`	`'40' \| '32' \| '24'`	`'40'`	The size of the avatars and overflow text. Propagated to child components.

AvatarGroupCompact.Stack

Container for the overlapping avatar stack.

Prop	Type	Default	Description

AvatarGroupCompact.Overflow

Text element showing the count of additional avatars.

Prop	Type	Default	Description