Avatar Group Component

A component for displaying multiple avatars together with an elegant stacked appearance.

• Automatically stacks avatars with a slight overlap
• Provides a count indicator for additional avatars
• Configurable limit for visible avatars
• Works seamlessly with the Avatar component

---

Installation

The AvatarGroup component is part of our UI library. You can import it directly from the components directory.

React TSX
1import { AvatarGroup } from "@/components/modern-ui/avatar-group";

---

Usage

Here is how to use the avatar group in your project.

React TSX
1import {
2  Avatar,
3  AvatarImage,
4  AvatarFallback
5} from "@/components/modern-ui/avatar"
6import { AvatarGroup } from "@/components/modern-ui/avatar-group"

React TSX
1<AvatarGroup>
2  <Avatar>
3    <AvatarImage src="https://example.com/user1.jpg" alt="User 1" />
4    <AvatarFallback>U1</AvatarFallback>
5  </Avatar>
6  <Avatar>
7    <AvatarImage src="https://example.com/user2.jpg" alt="User 2" />
8    <AvatarFallback>U2</AvatarFallback>
9  </Avatar>
10  <Avatar>
11    <AvatarImage src="https://example.com/user3.jpg" alt="User 3" />
12    <AvatarFallback>U3</AvatarFallback>
13  </Avatar>
14</AvatarGroup>

---

Examples

Basic Avatar Group

Avatar Group with Tooltip

API Reference

AvatarGroup

The AvatarGroup component is used to display multiple avatars in a group.