Avatar Group

1import * as React from "react";
2import { cn } from "@/lib/utils";
3import { Avatar, AvatarFallback, AvatarImage } from "@/registry/ui/avatar";
4 
5type AvatarProps = React.ComponentProps<typeof Avatar>;
6 
7interface AvatarGroupProps extends React.ComponentProps<"div"> {
8  children: React.ReactElement<AvatarProps>[];
9  max?: number;
10}
11 
12const AvatarGroup = ({
13  children,
14  max,
15  className,
16  ...props
17}: AvatarGroupProps) => {
18  const totalAvatars = React.Children.count(children);
19  const displayedAvatars = React.Children.toArray(children)
20    .slice(0, max)
21    .reverse();
22  const remainingAvatars = max ? Math.max(totalAvatars - max, 1) : 0;
23 
24  return (
25    <div
26      className={cn("flex flex-row-reverse items-center", className)}
27      {...props}
28    >
29      {remainingAvatars > 0 && (
30        <Avatar className="relative -ml-2 ring-2 ring-background hover:z-10">
31          <AvatarFallback className="bg-muted-foreground text-white">
32            +{remainingAvatars}
33          </AvatarFallback>
34        </Avatar>
35      )}
36      {displayedAvatars.map((avatar, index) => {
37        if (!React.isValidElement(avatar)) {
38          return null;
39        }
40 
41        return (
42          <div className="relative -ml-2 hover:z-10" key={index}>
43            {React.cloneElement(avatar as React.ReactElement<AvatarProps>, {
44              className: "ring-2 ring-background",
45            })}
46          </div>
47        );
48      })}
49    </div>
50  );
51};
52 
53export default function AvatarGroupDemo() {
54  return (
55    <AvatarGroup>
56      <Avatar className="-ml-2 cursor-pointer first:ml-0">
57        <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
58        <AvatarFallback className="bg-indigo-500 text-white">CN</AvatarFallback>
59      </Avatar>
60      <Avatar className="-ml-2 cursor-pointer first:ml-0">
61        <AvatarFallback className="bg-green-600 text-white">CN</AvatarFallback>
62      </Avatar>
63      <Avatar className="-ml-2 cursor-pointer first:ml-0">
64        <AvatarFallback className="bg-red-500 text-white">AB</AvatarFallback>
65      </Avatar>
66      <Avatar className="-ml-2 cursor-pointer first:ml-0">
67        <AvatarFallback className="bg-indigo-500 text-white">VK</AvatarFallback>
68      </Avatar>
69      <Avatar className="-ml-2 cursor-pointer first:ml-0">
70        <AvatarFallback className="bg-orange-500 text-white">RS</AvatarFallback>
71      </Avatar>
72    </AvatarGroup>
73  );
74}