Avatar Group

A component that displays a group of avatars with optional overlapping, tooltips, and ring effects.

User 1

User 2

User 3

User 4

User 5

Installation

1. Dependencies

npm install clsx tailwind-merge

2. Paste inside @/lib/utils.ts

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: Parameters<typeof clsx>) {
  return twMerge(clsx(...inputs));
}

3. Copy Avatar Group Code

Copy Avatar Group Code

AvatarGroup Props

Name	Type	Required	Default	Description
imgs	string[]	Yes	undefined	Array of image URLs for the avatars.
size	number	No	32	Size of the avatars in pixels.
spacing	number	No	14	Spacing between the avatars in pixels.
max	number	No	undefined	Maximum number of avatars to display.
ring	boolean	No	false	Whether to show a ring around the avatars.
overlap	boolean	No	false	Whether to overlap the avatars.
tooltips	boolean	No	false	Whether to show tooltips on hover.