Command Palette

Search for a command to run...

Docs
Avatar Group with Count

Avatar Group with Count

A group of overlapping avatars with a count indicator for remaining members.

Installation

Usage

import AvatarGroupCount from "@/components/ruixen/avatar-group-count";
 
const avatars = [
  { src: "https://example.com/user1.jpg", fallback: "JD" },
  { src: "https://example.com/user2.jpg", fallback: "AS" },
  { src: "https://example.com/user3.jpg", fallback: "MK" },
  { src: "https://example.com/user4.jpg", fallback: "RB" },
  { fallback: "EW" },
  { fallback: "TN" },
  { fallback: "PL" },
];
 
export default function MyAvatarGroup() {
  return <AvatarGroupCount avatars={avatars} max={4} />;
}

Props

PropTypeDefaultDescription
avatarsAvatarData[]-Array of avatar objects
maxnumber4Maximum avatars before showing count
size"sm" | "md" | "lg""md"Size of the avatars
classNamestring-Additional CSS classes

AvatarData

PropertyTypeDescription
srcstringImage source URL (optional)
altstringAlt text for the image
fallbackstringFallback initials