Avatar Group

A component that stacks user avatars with overlapping visual masking, supporting truncation with an overflow indicator, RTL/vertical orientation, and custom overflow rendering.

Dice UIbyDice UI

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import AvatarGroup from "@/components/ui/avatar-group";

const avatars = [
  {
    name: "shadcn",
    src: "https://cdn.21st.dev/assets/localized/513d06f542692036ff0bb17938f04b3efd60567ba2cae08049469d21f18e0524.jpg",
    fallback: "CN",
  },
  {
    name: "Ethan Niser",
    src: "https://cdn.21st.dev/assets/localized/690f258046cd8ac3b10b0eda87a9277a0022a050ab659961a9f45486f72f7fb8.jpg",
    fallback: "EN",
  },
  {
    name: "Guillermo Rauch",
    src: "https://cdn.21st.dev/assets/localized/fa600e6e3f008d0a54390646f123fcd1c952304522185e7b85837595eacb74db.jpg",
    fallback: "GR",
  },
  {
    name: "Lee Robinson",
    src: "https://cdn.21st.dev/assets/localized/b881fc6e5d91d95f912abd2f45508332c7a398d9dd53c136c6c0a2d500c8fc7e.png",
    fallback: "LR",
  },
  {
    name: "Evil Rabbit",
    src: "https://cdn.21st.dev/assets/localized/ef407ec862dd072b8624fad7a331df80f56694e98bc1d89b0feb0ea0185e8954.png",
    fallback: "ER",
  },
  {
    name: "Tim Neutkens",
    src: "https://cdn.21st.dev/assets/localized/6608456435176a64af4bfba8948e6f18b0d01ce74b6165ecfe55086f91a6d8d8.jpg",
    fallback: "TN",
  },
  {
    name: "Delba de Oliveira",
    src: "https://cdn.21st.dev/assets/localized/e18d9e7bfa1767219ce64cbefed059c335c3b749cd2150f2014eebe71d087f69.jpg",
    fallback: "DO",
  },
  {
    name: "Shu Ding",
    src: "https://cdn.21st.dev/assets/localized/4a2ea42ea5746fa47c8e2c1246a16444cfc08ec95cad7bc1b8167a3c6b8a23db.png",
    fallback: "SD",
  },
];

export default function AvatarGroupTruncationDemo() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-3">
        <h3 className="text-sm font-medium">Max 3 items</h3>
        <AvatarGroup max={3}>
          {avatars.map((avatar, index) => (
            <Avatar key={index}>
              <AvatarImage src={avatar.src} />
              <AvatarFallback>{avatar.fallback}</AvatarFallback>
            </Avatar>
          ))}
        </AvatarGroup>
      </div>
      <div className="flex flex-col gap-3">
        <h3 className="text-sm font-medium">Max 5 items</h3>
        <AvatarGroup max={5}>
          {avatars.map((avatar, index) => (
            <Avatar key={index}>
              <AvatarImage src={avatar.src} />
              <AvatarFallback>{avatar.fallback}</AvatarFallback>
            </Avatar>
          ))}
        </AvatarGroup>
      </div>
    </div>
  );
}