{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-147",
  "type": "registry:component",
  "registryDependencies": [
    "https://coss.com/origin/r/checkbox.json",
    "https://coss.com/origin/r/label.json"
  ],
  "files": [
    {
      "path": "registry/default/components/comp-147.tsx",
      "content": "import { Brush, Eraser, Scissors, SwatchBook } from \"lucide-react\";\nimport { useId } from \"react\";\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n\n  const items = [\n    { defaultChecked: true, Icon: SwatchBook, label: \"Palette\", value: \"1\" },\n    { Icon: Brush, label: \"Brush\", value: \"2\" },\n    { Icon: Eraser, label: \"Eraser\", value: \"3\" },\n    { Icon: Scissors, label: \"Cut\", value: \"4\" },\n  ];\n\n  return (\n    <div className=\"grid grid-cols-2 gap-3\">\n      {items.map((item) => (\n        <div\n          className=\"relative flex cursor-pointer flex-col gap-4 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\"\n          key={`${id}-${item.value}`}\n        >\n          <div className=\"flex justify-between gap-2\">\n            <Checkbox\n              className=\"order-1 after:absolute after:inset-0\"\n              defaultChecked={item.defaultChecked}\n              id={`${id}-${item.value}`}\n              value={item.value}\n            />\n            <item.Icon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n          </div>\n          <Label htmlFor={`${id}-${item.value}`}>{item.label}</Label>\n        </div>\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "checkbox",
      "label",
      "card",
      "radix"
    ]
  }
}