Docs
Avatar Icons
Avatar Icons
Displays a row of Avatar avatars with a smooth scaling animation on hover. The avatars are presented in a compact layout, with an option to append an additional +count avatar.
Loading...
Installation
Install dependencies
npm install
npm install clsx tailwind-mergeAdd utils file
lib/utils.ts
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}Copy the source code
avatars-icons.tsx
import * as React from "react";
import { cn } from "@/lib/utils";
interface Avatar {
src: string;
alt: string;
}
interface AvatarIconsProps extends React.HTMLAttributes<HTMLDivElement> {
extraCount?: number;
avatars: Avatar[];
className?: string;
}
export default function AvatarIcons({
extraCount,
avatars,
className,
...props
}: AvatarIconsProps) {
return (
<div className={cn("-space-x-4 justy-start flex select-none", className)} {...props}>
{avatars.map((image, i) => (
<div
className={cn(
"w-12 h-12 border-4 overflow-hidden border-white dark:border-black shrink-0 rounded-full group relative",
className
)}
key={i}
>
<img
src={image.src}
alt={image.alt}
width={50}
height={50}
className="w-full h-full object-cover transition-transform duration-200 group-hover:scale-[115%] group-hover:-rotate-12"
/>
</div>
))}
{extraCount && (
<div className="w-12 h-12 border-4 border-white dark:border-black shrink-0 rounded-full bg-neutral-100 dark:bg-neutral-900 flex items-center justify-center z-20">
<span className="text-sm font-medium text-black dark:text-white">+{extraCount}</span>
</div>
)}
</div>
);
}Props
| Prop | Type | Description | Default |
|---|---|---|---|
| avatars | Array | An array of avatar objects containing "src" and "alt" attributes. | [] |
| extraCount | Number | Displays an additional avatar with the count in the center. | - |
| className | String | Additional custom classes for styling the component. | - |
