Avatar Group

Component

About

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

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Avatar Group to your project and fits it to your theme.

Code

How Avatar Group is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

export default function AvatarGroupRtlDemo() {
  return (
    <div className="grid gap-6 md:grid-cols-2">
      <div className="flex flex-col gap-3">
        <h3 className="text-sm font-medium">RTL</h3>
        <AvatarGroup dir="rtl">
          {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">Reverse RTL</h3>
        <AvatarGroup dir="rtl" reverse>
          {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">Vertical RTL</h3>
        <div className="flex justify-center">
          <AvatarGroup orientation="vertical" dir="rtl">
            {avatars.map((avatar, index) => (
              <Avatar key={index}>
                <AvatarImage src={avatar.src} />
                <AvatarFallback>{avatar.fallback}</AvatarFallback>
              </Avatar>
            ))}
          </AvatarGroup>
        </div>
      </div>
      <div className="flex flex-col gap-3">
        <h3 className="text-sm font-medium">Vertical reverse RTL</h3>
        <div className="flex justify-center">
          <AvatarGroup orientation="vertical" dir="rtl" reverse>
            {avatars.map((avatar, index) => (
              <Avatar key={index}>
                <AvatarImage src={avatar.src} />
                <AvatarFallback>{avatar.fallback}</AvatarFallback>
              </Avatar>
            ))}
          </AvatarGroup>
        </div>
      </div>
    </div>
  );
}