Docs

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.

+70

Installation

Install dependencies

npm install

npm install clsx tailwind-merge

Add 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.	-