import * as React from "react";

import { cn } from "@/lib/utils";

export interface UserAvatarGroupUser {
  id: string;
  name: string;
  src?: string;
}

export type UserAvatarGroupSize = "sm" | "md" | "lg";

export interface UserAvatarGroupProps {
  users: UserAvatarGroupUser[];
  max?: number;
  size?: UserAvatarGroupSize;
  className?: string;
}

const sizeStyles: Record<UserAvatarGroupSize, string> = {
  sm: "h-7 w-7 text-[10px]",
  md: "h-9 w-9 text-xs",
  lg: "h-11 w-11 text-sm",
};

export function UserAvatarGroup({
  users,
  max = 4,
  size = "md",
  className,
}: UserAvatarGroupProps) {
  const visibleUsers = users.slice(0, max);
  const overflowCount = Math.max(users.length - max, 0);

  return (
    <div className={cn("flex items-center", className)}>
      <div className="flex -space-x-3">
        {visibleUsers.map((user) => (
          <div
            key={user.id}
            className={cn(
              "flex items-center justify-center overflow-hidden rounded-full border border-border bg-muted text-foreground",
              sizeStyles[size]
            )}
            title={user.name}
          >
            {user.src ? (
              <img src={user.src} alt={user.name} className="h-full w-full object-cover" />
            ) : (
              <span className="font-semibold">{getInitials(user.name)}</span>
            )}
          </div>
        ))}
        {overflowCount > 0 ? (
          <div
            className={cn(
              "flex items-center justify-center rounded-full border border-border bg-card text-muted-foreground",
              sizeStyles[size]
            )}
          >
            <span className="font-semibold">+{overflowCount}</span>
          </div>
        ) : null}
      </div>
    </div>
  );
}

function getInitials(name: string) {
  const parts = name.trim().split(" ").filter(Boolean);
  if (parts.length === 0) return "";
  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
  return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
}
User Avatar Group

Dependencies

Files

Installation
