{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge-with-dismiss",
  "type": "registry:component",
  "title": "Badge",
  "author": "Toby Belhome",
  "description": "Displays a badge or status indicator.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "examples/components/badge/with-dismiss/page.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { XIcon } from \"lucide-react\";\n\nexport default function BadgeWithDismiss() {\n  const [badges, setBadges] = useState([\n    { id: 1, label: \"Next.js\" },\n    { id: 2, label: \"Tailwind CSS\" },\n    { id: 3, label: \"Laravel\" }\n  ]);\n\n  function removeBadge(id: number) {\n    setBadges((prev) => prev.filter((badge) => badge.id !== id));\n  }\n\n  return (\n    <div className=\"flex items-center justify-center gap-2\">\n      {badges.map(({ id, label }) => (\n        <Badge\n          key={id}\n          variant=\"secondary\"\n          className=\"flex cursor-pointer items-center gap-1 hover:opacity-80\"\n          onClick={() => removeBadge(id)}>\n          {label}\n          <XIcon className=\"size-3\" />\n        </Badge>\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/badge-with-dismiss.tsx"
    }
  ],
  "meta": {
    "isPro": false
  }
}