{
  "name": "avatar-group-custom-overflow-demo",
  "type": "registry:example",
  "registryDependencies": [
    "avatar",
    "avatar-group"
  ],
  "files": [
    {
      "path": "examples/avatar-group-custom-overflow-demo.tsx",
      "type": "registry:example",
      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\";\nimport { AvatarGroup } from \"@/registry/bases/base/ui/avatar-group\";\n\nconst avatars = [\n  {\n    name: \"shadcn\",\n    src: \"https://github.com/shadcn.png\",\n    fallback: \"CN\",\n  },\n  {\n    name: \"Ethan Niser\",\n    src: \"https://github.com/ethanniser.png\",\n    fallback: \"EN\",\n  },\n  {\n    name: \"Guillermo Rauch\",\n    src: \"https://github.com/rauchg.png\",\n    fallback: \"GR\",\n  },\n  {\n    name: \"Lee Robinson\",\n    src: \"https://github.com/leerob.png\",\n    fallback: \"LR\",\n  },\n  {\n    name: \"Evil Rabbit\",\n    src: \"https://github.com/evilrabbit.png\",\n    fallback: \"ER\",\n  },\n  {\n    name: \"Tim Neutkens\",\n    src: \"https://github.com/timneutkens.png\",\n    fallback: \"TN\",\n  },\n  {\n    name: \"JJ Kasper\",\n    src: \"https://github.com/ijjk.png\",\n    fallback: \"JK\",\n  },\n  {\n    name: \"Sebastian Markbåge\",\n    src: \"https://github.com/sebmarkbage.png\",\n    fallback: \"SM\",\n  },\n];\n\nexport default function AvatarGroupCustomOverflowDemo() {\n  return (\n    <div className=\"flex flex-col gap-8\">\n      <div className=\"flex flex-col gap-3\">\n        <h3 className=\"font-medium text-sm\">Default Overflow</h3>\n        <AvatarGroup max={4}>\n          {avatars.map((avatar, index) => (\n            <Avatar key={index}>\n              <AvatarImage src={avatar.src} />\n              <AvatarFallback>{avatar.fallback}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <h3 className=\"font-medium text-sm\">Custom Overflow with Badge</h3>\n        <AvatarGroup\n          max={4}\n          renderOverflow={(count) => (\n            <div className=\"flex size-full items-center justify-center rounded-full border-2 border-primary border-dashed bg-primary/10 font-semibold text-primary text-xs\">\n              {count}+\n            </div>\n          )}\n        >\n          {avatars.map((avatar, index) => (\n            <Avatar key={index}>\n              <AvatarImage src={avatar.src} />\n              <AvatarFallback>{avatar.fallback}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <h3 className=\"font-medium text-sm\">Custom Overflow with Gradient</h3>\n        <AvatarGroup\n          max={3}\n          renderOverflow={(count) => (\n            <div className=\"flex size-full items-center justify-center rounded-full bg-linear-to-br from-purple-500 to-pink-500 font-bold text-white text-xs\">\n              +{count}\n            </div>\n          )}\n        >\n          {avatars.map((avatar, index) => (\n            <Avatar key={index}>\n              <AvatarImage src={avatar.src} />\n              <AvatarFallback>{avatar.fallback}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n      </div>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}