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",
  },
];

export default function AvatarGroupDemo() {
  return (
    <div className="flex flex-col gap-8">
      <div className="flex flex-col gap-3">
        <h3 className="text-sm font-medium">Avatar Group</h3>
        <AvatarGroup>
          {avatars.slice(0, 4).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">
          Avatar Group with overflow (max 4)
        </h3>
        <AvatarGroup max={4}>
          {avatars.map((avatar, index) => (
            <Avatar key={index}>
              <AvatarImage src={avatar.src} />
              <AvatarFallback>{avatar.fallback}</AvatarFallback>
            </Avatar>
          ))}
        </AvatarGroup>
      </div>
    </div>
  );
}