Avatar Group

Component 81

About

Here is Avatar Group component

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, AvatarGroupTooltip } from "@/components/ui/avatar-group";

const AVATARS = [
  {
    src: "https://cdn.21st.dev/assets/localized/4dfcb3c259477ef1e2a067f1b2b27cd384e65c62e4b0fce9eed02608cb4a0027.jpg",
    fallback: "SK",
    tooltip: "Skyleen",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/e9/e941f86e0ca2b1c9eefd47618a92040443f85598470bad47399cee7f259c0756.jpg",
    fallback: "CN",
    tooltip: "Shadcn",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/7b/7bc0cc1e66037830ac2bc11ecd407164debb9c96d61ab57fd33e8c5ac0342f46.jpg",
    fallback: "AW",
    tooltip: "Adam Wathan",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/bd/bda00209d3375399bf57be3d3ac7aa59d1b293e08baf486a141fcd3a612184bf.jpg",
    fallback: "GR",
    tooltip: "Guillermo Rauch",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/e6/e6e12f0e31f875e51a24c5ba62eac783c0361815bc2eba5eef6f9c8ca1bf0466.jpg",
    fallback: "JH",
    tooltip: "Jhey",
  },
];

export function AvatarGroupDemo() {
  return (
    <AvatarGroup className="h-12 -space-x-3">
      {AVATARS.map((avatar, index) => (
        <Avatar key={index} className="size-12 border-3 border-background">
          <AvatarImage src={avatar.src} />
          <AvatarFallback>{avatar.fallback}</AvatarFallback>
          <AvatarGroupTooltip>
            <p>{avatar.tooltip}</p>
          </AvatarGroupTooltip>
        </Avatar>
      ))}
    </AvatarGroup>
  );
}

export default AvatarGroupDemo;