{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar-group",
  "type": "registry:ui",
  "title": "Avatar Group",
  "description": "Overlapping avatars with initials fallback, hover lift and a +N overflow counter.",
  "files": [
    {
      "path": "registry/ui/avatar-group.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\n\nexport interface AvatarGroupProps {\n  people: { name: string; src?: string }[];\n  max?: number;\n  className?: string;\n}\n\nconst initials = (name: string) =>\n  name\n    .split(\" \")\n    .map((part) => part[0])\n    .join(\"\")\n    .slice(0, 2)\n    .toUpperCase();\n\nexport function AvatarGroup({ people, max = 4, className = \"\" }: AvatarGroupProps) {\n  const shown = people.slice(0, max);\n  const rest = people.length - shown.length;\n\n  return (\n    <div className={[\"flex\", className].join(\" \")}>\n      {shown.map((person, i) => (\n        <span\n          key={person.name}\n          title={person.name}\n          className={[\n            \"grid size-[38px] place-items-center overflow-hidden rounded-full border-2 border-black\",\n            \"text-[11px] font-medium transition-transform duration-200 hover:-translate-y-1\",\n            i === 0 ? \"bg-sky-300 text-sky-950\" : \"-ml-2 bg-zinc-900 text-zinc-400\",\n          ].join(\" \")}\n        >\n          {person.src ? <img src={person.src} alt={person.name} className=\"size-full object-cover\" /> : initials(person.name)}\n        </span>\n      ))}\n      {rest > 0 && (\n        <span className=\"-ml-2 grid size-[38px] place-items-center rounded-full border-2 border-black bg-zinc-900 text-[11px] font-medium text-sky-300\">\n          +{rest}\n        </span>\n      )}\n    </div>\n  );\n}\n"
    }
  ]
}