{
  "name": "variant-selector-images-ex-01",
  "type": "registry:example",
  "dependencies": [
    "lucide-react",
    "@radix-ui/react-radio-group"
  ],
  "registryDependencies": [
    "https://ui.stackzero.co/r/variant-selector-images.json"
  ],
  "files": [
    {
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport VariantSelectorImages from \"@/components/commerce-ui/variant-selector-images\";\n\nconst variants = [\n  {\n    id: \"cat-default\",\n    label: \"Default Cat\",\n    url: \"/placeholders/cat-default.webp\",\n    value: \"cat-default\",\n  },\n  {\n    id: \"cat-steampunk\",\n    label: \"Steampunk Cat\",\n    url: \"/placeholders/cat-steampunk.webp\",\n    value: \"cat-steampunk\",\n  },\n  {\n    id: \"cat-cyberpunk\",\n    label: \"Cyberpunk Cat\",\n    url: \"/placeholders/cat-cyberpunk.webp\",\n    value: \"cat-cyberpunk\",\n  },\n];\n\nexport default function VariantSelector_Images_Ex_01() {\n  const [selected, setSelected] = useState(\"cat-default\");\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <fieldset className=\"space-y-4\">\n        <legend className=\"mb-2 text-sm font-medium\">Select Variant:</legend>\n        <VariantSelectorImages\n          value={selected}\n          onValueChange={setSelected}\n          variants={variants}\n        />\n      </fieldset>\n      <p className=\"text-muted-foreground text-center text-sm\">\n        Selected variant: {selected}\n      </p>\n    </div>\n  );\n}\n",
      "path": "/components/commerce-ui/components/variant-selector/images/variant-selector-images-ex-01.tsx",
      "target": "components/commerce-ui/variant-selector-images-ex-01.tsx"
    }
  ]
}