badge-demo.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge-demo",
  "type": "registry:example",
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/examples/badge-demo.tsx",
      "content": "import { AlertCircleIcon, BadgeCheckIcon, CheckIcon } from \"lucide-react\"\n\nimport { Badge } from \"@/registry/new-york-v4/ui/badge\"\n\nexport default function BadgeDemo() {\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <div className=\"flex w-full flex-wrap gap-2\">\n        <Badge>Badge</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n      </div>\n      <div className=\"flex w-full flex-wrap gap-2\">\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-500 text-white dark:bg-blue-600\"\n        >\n          <BadgeCheckIcon />\n          Verified\n        </Badge>\n        <Badge className=\"h-5 min-w-5 rounded-full px-1 font-mono tabular-nums\">\n          8\n        </Badge>\n        <Badge\n          className=\"h-5 min-w-5 rounded-full px-1 font-mono tabular-nums\"\n          variant=\"destructive\"\n        >\n          99\n        </Badge>\n        <Badge\n          className=\"h-5 min-w-5 rounded-full px-1 font-mono tabular-nums\"\n          variant=\"outline\"\n        >\n          20+\n        </Badge>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:example"
    }
  ]
}