Avatar Group · Animate UI

import {
  AvatarGroup,
  AvatarGroupTooltip,
  AvatarGroupTooltipArrow,
} from '@animate-ui/react/primitives/avatar-group';

export function Team({ people }: { people: { name: string; src: string }[] }) {
  return (
    <AvatarGroup className="h-12 -space-x-3" invertOverlap>
      {people.map((person) => (
        <img
          key={person.name}
          src={person.src}
          alt={person.name}
          className="size-12 rounded-full border-3 border-background"
        />
      ))}
    </AvatarGroup>
  );
}

<div className="size-12 rounded-full border-3 border-background bg-muted">
  SK
  <AvatarGroupTooltip className="rounded-md bg-foreground px-3 py-1.5 text-xs text-background">
    <AvatarGroupTooltipArrow className="size-2.5 fill-foreground" />
    <p>Skyleen</p>
  </AvatarGroupTooltip>
</div>