shadcn/app/public/registry/styles/default/avatar-group.json

{
  "name": "avatar-group",
  "description": "Grouped avatar display",
  "registryDependencies": [
    "avatar"
  ],
  "files": [
    {
      "name": "avatar-group.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\n\nexport interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: Array<{\n    src?: string\n    alt?: string\n    fallback: string\n  }>\n  max?: number\n}\n\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  ({ className, items, max = 5, ...props }, ref) => {\n    const displayItems = items.slice(0, max)\n    const remaining = items.length - max\n\n    return (\n      <div ref={ref} className={cn(\"flex -space-x-4\", className)} {...props}>\n        {displayItems.map((item, index) => (\n          <Avatar key={index} className=\"border-2 border-background\">\n            <AvatarImage src={item.src} alt={item.alt} />\n            <AvatarFallback>{item.fallback}</AvatarFallback>\n          </Avatar>\n        ))}\n        {remaining > 0 && (\n          <Avatar className=\"border-2 border-background\">\n            <AvatarFallback>+{remaining}</AvatarFallback>\n          </Avatar>\n        )}\n      </div>\n    )\n  }\n)\nAvatarGroup.displayName = \"AvatarGroup\"\n\nexport { AvatarGroup }\n"
    }
  ],
  "type": "components:ui"
}