Avatar Group

Right overlaps Left (Default)

EMNVER

Left overlaps Right

MAGRLR

Installation

Bash

pnpm dlx shadcn@latest add @spaceui/components-spaceui-avatar-group

pnpm dlx shadcn@latest add @spaceui/components-spaceui-avatar-group

Usage

Code

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { AvatarGroup, AvatarGroupAction } from '@/components/spaceui/avatar-group'

Code

<AvatarGroup stacking="left">
  <Avatar>
    <AvatarImage />
    <AvatarFallback>U1</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage />
    <AvatarFallback>U2</AvatarFallback>
  </Avatar>
  <AvatarGroupAction>+4</AvatarGroupAction>
</AvatarGroup>

Features

With Actions

Use the AvatarGroupAction component to add an interactive trailing element. It can contain text indicating remaining users or an icon for interaction (e.g., a plus button to add members).

Action with Text Count

EMNVER

Action with Icon

MAGRLR

API Reference

AvatarGroup Props

Prop	Type	Default	Description
`stacking`	left\|right	right	Controls the visual z-index overlap of the avatars