{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge-15",
  "title": "Plan features with badge",
  "description": "A plan features with badge component",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "src/components/customized/badge/badge-15.tsx",
      "content": "import { CheckIcon, FlaskConicalIcon, SparklesIcon } from \"lucide-react\";\nimport { Badge } from \"@/registry/ui/badge\";\n\nconst features = [\n  {\n    title: \"Unlimited Projects\",\n  },\n  {\n    title: \"Custom Integrations\",\n    isNew: true,\n  },\n  {\n    title: \"Advanced Analytics\",\n    isExperimental: true,\n  },\n  {\n    title: \"Priority Support\",\n  },\n  {\n    title: \"Team Collaboration\",\n  },\n];\n\nconst PlanFeaturesWithBadge = () => {\n  return (\n    <ul className=\"space-y-2.5\">\n      {features.map((feature) => (\n        <li className=\"flex items-center gap-2 text-sm\" key={feature.title}>\n          <CheckIcon className=\"size-4\" />\n          {feature.title}\n          {feature.isExperimental && (\n            <Badge\n              className=\"ms-1 border-amber-600/30 bg-amber-600/10 text-amber-600 dark:bg-amber-600/15\"\n              variant=\"outline\"\n            >\n              <FlaskConicalIcon /> Experimental\n            </Badge>\n          )}\n          {feature.isNew && (\n            <Badge\n              className=\"ms-1 border-blue-600/30 bg-blue-600/10 text-blue-600 dark:bg-blue-600/20 dark:text-blue-400\"\n              variant=\"outline\"\n            >\n              <SparklesIcon /> New\n            </Badge>\n          )}\n        </li>\n      ))}\n    </ul>\n  );\n};\n\nexport default PlanFeaturesWithBadge;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}