Avatar

An avatar component with image, fallback text, multiple sizes, border radius variants, and group stacking. Built on Base UI Avatar primitives.

cossbycoss

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/component";

const users = [
  {
    src: "https://cdn.21st.dev/assets/mirror/09/096a495536f7d9e7e1b47d77b7d7dce9595c8f4623db73546dd41ff3e6246dcd.jpg",
    fallback: "JD",
    name: "Jane Doe",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/fa/fa0e629882cf7d4960d0de39779bcd8ad218ad2ef620acea3c8ae0abcd846629.jpg",
    fallback: "JN",
    name: "John Newman",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/3c/3c459aaae1b1c6436fe84b3ed1a49bcaf8b32270b52ed0c06756e0beb600f9d0.jpg",
    fallback: "MK",
    name: "Mark K",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/39/398c32555e4114ef2aaae4f0502493662908d3acfa904bc3038f17a5980175ec.jpg",
    fallback: "SA",
    name: "Sara A",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/b4/b4b7667edb7d27deb0304ec729eded447032787895407f8b0abf9a097dc39945.jpg",
    fallback: "TL",
    name: "Tom L",
  },
];

export default function AvatarGroupDemo() {
  return (
    <div className="flex items-center justify-center w-full min-h-screen bg-background p-8">
      <div className="flex flex-col items-center gap-10">
        {/* Standard group */}
        <div className="flex items-center">
          {users.slice(0, 4).map((user, i) => (
            <Avatar
              key={user.fallback}
              className="size-10 ring-2 ring-background"
              style={{ marginLeft: i === 0 ? 0 : "-10px", zIndex: users.length - i }}
              title={user.name}
            >
              <AvatarImage src={user.src} alt={user.name} />
              <AvatarFallback>{user.fallback}</AvatarFallback>
            </Avatar>
          ))}
          <Avatar
            className="size-10 ring-2 ring-background bg-muted"
            style={{ marginLeft: "-10px", zIndex: 0 }}
          >
            <AvatarFallback className="text-xs font-medium text-muted-foreground bg-muted">
              +5
            </AvatarFallback>
          </Avatar>
        </div>

        {/* Small group */}
        <div className="flex items-center">
          {users.map((user, i) => (
            <Avatar
              key={user.fallback}
              className="size-8 ring-2 ring-background"
              style={{ marginLeft: i === 0 ? 0 : "-8px", zIndex: users.length - i }}
              title={user.name}
            >
              <AvatarImage src={user.src} alt={user.name} />
              <AvatarFallback className="text-[10px]">{user.fallback}</AvatarFallback>
            </Avatar>
          ))}
        </div>

        {/* Fallback group */}
        <div className="flex items-center">
          {users.slice(0, 4).map((user, i) => (
            <Avatar
              key={user.fallback}
              className="size-10 ring-2 ring-background"
              style={{ marginLeft: i === 0 ? 0 : "-10px", zIndex: users.length - i }}
              title={user.name}
            >
              <AvatarImage src="/broken.png" alt={user.name} />
              <AvatarFallback>{user.fallback}</AvatarFallback>
            </Avatar>
          ))}
        </div>
      </div>
    </div>
  );
}