{
  "name": "badge-overflow-multiline-demo",
  "type": "registry:example",
  "registryDependencies": [
    "badge",
    "badge-overflow"
  ],
  "files": [
    {
      "path": "examples/badge-overflow-multiline-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 technologies = [\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  \"Docker\",\n  \"Kubernetes\",\n  \"AWS\",\n  \"Vercel\",\n  \"GitHub Actions\",\n];\n\nexport default function BadgeOverflowMultilineDemo() {\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\">Single Line (default)</h3>\n        <div className=\"w-64 rounded-md border p-3\">\n          <BadgeOverflow\n            items={technologies}\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\">Two Lines</h3>\n        <div className=\"w-64 rounded-md border p-3\">\n          <BadgeOverflow\n            items={technologies}\n            lineCount={2}\n            renderBadge={(_, label) => <Badge variant=\"outline\">{label}</Badge>}\n          />\n        </div>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <h3 className=\"font-medium text-sm\">Three Lines</h3>\n        <div className=\"w-64 rounded-md border p-3\">\n          <BadgeOverflow\n            items={technologies}\n            lineCount={3}\n            renderBadge={(_, label) => <Badge variant=\"default\">{label}</Badge>}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}