Avatar Group

An animated and accessible avatar group component used to display multiple users or items as a group.

Install

pnpm dlx shadcn@latest add https://www.katestroyui.com/r/avatar-group

Usage

1import { AvatarGroup } from "@/components/ui/avatar-group";
2
3const avatars = [
4  { src: "/avatars/1.jpg", alt: "Alice" },
5  { src: "/avatars/2.jpg", alt: "Bob" },
6  { src: "/avatars/3.jpg", alt: "Charlie" },
7  { src: "/avatars/4.jpg", alt: "Diana" },
8  { src: "/avatars/5.jpg", alt: "Eve" },
9  { src: "/avatars/6.jpg", alt: "Frank" },
10];
11
12export function Example() {
13
14return (
15  <div className="bg-background border rounded-lg p-6 shadow flex flex-col gap-6 mb-6 items-center justify-center">
16    <AvatarGroup avatars={avatars} max={5} size="lg" />
17  </div>
18  );
19}

Props

Prop	Type	Description	Default
avatars	{ src?: string; alt?: string; fallback?: string; }[]	Avatars to be displayed	-
max	number	Maximum number of avatars to display at the same time	5
size	"sm" \| "md" \| "lg"	Avatar size	"md"
className	string	Extra CSS classes	-