Avatar Groups

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

export default function Basic() {
  return (
    <div className="flex -space-x-3 *:ring-3 *:ring-background">
      <Avatar>
        <AvatarImage src="https://mynaui.com/avatars/avatar-01.jpg" />
      </Avatar>
      <Avatar>
        <AvatarImage src="https://mynaui.com/avatars/avatar-02.jpg" />
      </Avatar>
      <Avatar>
        <AvatarImage src="https://mynaui.com/avatars/avatar-03.jpg" />
      </Avatar>
    </div>
  );
}

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

export default function ReverseOrder() {
  return (
    <div className="flex flex-row-reverse justify-end -space-x-3 space-x-reverse *:ring-3 *:ring-background">
      <Avatar>
        <AvatarImage src="https://mynaui.com/avatars/avatar-04.jpg" />
      </Avatar>
      <Avatar>
        <AvatarImage src="https://mynaui.com/avatars/avatar-05.jpg" />
      </Avatar>
      <Avatar>
        <AvatarImage src="https://mynaui.com/avatars/avatar-06.jpg" />
      </Avatar>
    </div>
  );
}

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

export default function Centered() {
  return (
    <div className="z-0 flex items-center -space-x-2 *:ring-3 *:ring-background">
      <Avatar className="z-0 size-8">
        <AvatarImage src="https://mynaui.com/avatars/avatar-07.jpg" />
      </Avatar>
      <Avatar className="z-10 size-10">
        <AvatarImage src="https://mynaui.com/avatars/avatar-08.jpg" />
      </Avatar>
      <Avatar className="z-20 size-14">
        <AvatarImage src="https://mynaui.com/avatars/avatar-09.jpg" />
      </Avatar>
      <Avatar className="z-10 size-10">
        <AvatarImage src="https://mynaui.com/avatars/avatar-10.jpg" />
      </Avatar>
      <Avatar className="z-0 size-8">
        <AvatarImage src="https://mynaui.com/avatars/avatar-11.jpg" />
      </Avatar>
    </div>
  );
}

"use client";

import { useState } from "react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";

export default function AvatarGroup4() {
  const [activeIndex, setActiveIndex] = useState<number | null>(null);
  const users = [
    {
      name: "Liam Wilson",
      role: "Designer",
      image: "/avatars/avatar-10.jpg",
    },
    {
      name: "Emma Davis",
      role: "Developer",
      image: "/avatars/avatar-11.jpg",
    },
    {
      name: "Noah Brown",
      role: "Manager",
      image: "/avatars/avatar-12.jpg",
    },
    {
      name: "Olivia Johnson",
      role: "Marketing",
      image: "/avatars/avatar-13.jpg",
    },
  ];

  return (
    <TooltipProvider delayDuration={0}>
      <div className="flex -space-x-2 *:ring-3 *:ring-background">
        {users.map((user, index) => (
          <Tooltip key={index}>
            <TooltipTrigger asChild>
              <Avatar
                className={`transition-transform ${
                  activeIndex === index ? "z-10 scale-110" : ""
                }`}
                onMouseEnter={() => setActiveIndex(index)}
                onMouseLeave={() => setActiveIndex(null)}
              >
                <AvatarImage src={user.image} alt={user.name} />
                <AvatarFallback>
                  {user.name
                    .split(" ")
                    .map((n) => n[0])
                    .join("")}
                </AvatarFallback>
              </Avatar>
            </TooltipTrigger>
            <TooltipContent>
              <p className="font-semibold">{user.name}</p>
              <p className="text-sm">{user.role}</p>
            </TooltipContent>
          </Tooltip>
        ))}
      </div>
    </TooltipProvider>
  );
}

"use client";

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

export default function AvatarGroup5() {
  const users = [
    { name: "Sophie Martin", image: "/avatars/avatar-15.jpg" },
    { name: "Leo Anderson", image: "/avatars/avatar-16.jpg" },
    { name: "Chloe Thompson", image: "/avatars/avatar-17.jpg" },
    { name: "Max Rodriguez", image: "/avatars/avatar-18.jpg" },
    { name: "Zoe Garcia", image: "/avatars/avatar-19.jpg" },
    { name: "Additional Users", count: 3 },
  ];

  return (
    <div className="flex items-center -space-x-2 *:ring-3 *:ring-background">
      {users.slice(0, 4).map((user, index) => (
        <Avatar
          key={index}
        >
          <AvatarImage src={user.image} alt={user.name} />
          <AvatarFallback>
            {user.name
              .split(" ")
              .map((n) => n[0])
              .join("")}
          </AvatarFallback>
        </Avatar>
      ))}
      {users.length > 4 && (
        <Avatar className="z-10 text-sm font-medium text-muted-foreground">
          <AvatarFallback>
            +{users.slice(4).reduce((acc, user) => acc + (user.count || 1), 0)}
          </AvatarFallback>
        </Avatar>
      )}
    </div>
  );
}