Avatar Group

Display multiple avatars with overlap and count indicator.

Basic Avatar Group

JDABCDEFGH

With Max Limit

Max: 3

JDABCD
+4

Max: 4

JDABCDEF
+3

Different Sizes

Small

JDABCDEF

Medium (Default)

JDABCDEF

Large

JDABCDEF

Usage

import { AvatarGroup } from "@/components/avatar-group"

export default function MyComponent() {
  const avatars = [
    { src: "/path-to-image.jpg", fallback: "JD" },
    { src: "/path-to-image.jpg", fallback: "AB" },
    { src: "/path-to-image.jpg", fallback: "CD" },
    { src: "/path-to-image.jpg", fallback: "EF" },
    { src: "/path-to-image.jpg", fallback: "GH" },
  ]
  
  return (
    <AvatarGroup 
      avatars={avatars} 
      max={4} 
      size="md" 
    />
  )
}

Props

Name
Type
Default
Description
avatars
array
required
Array of avatar objects with src, alt, and fallback properties.
max
number
5
Maximum number of avatars to display before showing a count.
size
string
"md"
Size of the avatars: "sm", "md", or "lg".