{
  "name": "badge-overflow-demo",
  "type": "registry:example",
  "registryDependencies": [
    "badge",
    "badge-overflow"
  ],
  "files": [
    {
      "path": "examples/badge-overflow-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { Badge } from \"@/registry/bases/base/ui/badge\";\nimport { BadgeOverflow } from \"@/registry/bases/base/ui/badge-overflow\";\n\nconst tags = [\n  \"React\",\n  \"TypeScript\",\n  \"Next.js\",\n  \"Tailwind CSS\",\n  \"Shadcn UI\",\n  \"Radix UI\",\n  \"Zustand\",\n  \"React Query\",\n  \"Prisma\",\n  \"PostgreSQL\",\n];\n\nexport default function BadgeOverflowDemo() {\n  return (\n    <div className=\"flex w-64 flex-col gap-8\">\n      <div className=\"flex flex-col gap-3\">\n        <h3 className=\"font-medium text-sm\">Badge Overflow</h3>\n        <div className=\"w-64 rounded-md border p-3\">\n          <BadgeOverflow\n            items={tags}\n            renderBadge={(_, label) => (\n              <Badge variant=\"secondary\">{label}</Badge>\n            )}\n          />\n        </div>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <h3 className=\"font-medium text-sm\">\n          Badge Overflow with Custom Overflow\n        </h3>\n        <div className=\"w-64 rounded-md border p-3\">\n          <BadgeOverflow\n            items={tags}\n            renderBadge={(_, label) => <Badge variant=\"default\">{label}</Badge>}\n            renderOverflow={(count) => (\n              <Badge variant=\"secondary\" className=\"bg-muted\">\n                +{count} more\n              </Badge>\n            )}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}