Installation
Copy and paste the following code into your project.
components/magicui/avatar-circles.tsx
"use client";
import { cn } from "@/lib/utils";
import React from "react";
interface AvatarCirclesProps {
className?: string;
numPeople?: number;
avatarUrls: string[];
}
const AvatarCircles = ({ numPeople, className, avatarUrls }: AvatarCirclesProps) => {
return (
<div className={cn("z-10 flex -space-x-4 rtl:space-x-reverse", className)}>
{avatarUrls.map((url, index) => (
<img
key={index}
className="h-10 w-10 rounded-full border-2 border-white dark:border-gray-800"
src={url}
width={40}
height={40}
alt={`Avatar ${index + 1}`}
/>
))}
<a
className="flex h-10 w-10 items-center justify-center rounded-full border-2 border-white bg-black text-center text-xs font-medium text-white hover:bg-gray-600 dark:border-gray-800 dark:bg-white dark:text-black"
href=""
>
+{numPeople}
</a>
</div>
);
};
export default AvatarCircles;
Props
Prop | Type | Description | Default |
---|---|---|---|
className | string | The class name to be applied to the component | |
numPeople | number | The number appearing in the last circle | 99 |