{
  "name": "variant-selector-basic-ex-05",
  "type": "registry:example",
  "dependencies": [
    "lucide-react",
    "@radix-ui/react-radio-group"
  ],
  "registryDependencies": [
    "https://ui.stackzero.co/r/variant-selector-basic.json"
  ],
  "files": [
    {
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport VariantSelectorBasic, {\n  VariantItem,\n} from \"@/components/commerce-ui/variant-selector-basic\";\n\n// Example material variants\nconst materialVariants: VariantItem[] = [\n  { id: \"material-cotton\", label: \"Cotton\", value: \"material-cotton\" },\n  { id: \"material-polyester\", label: \"Polyester\", value: \"material-polyester\" },\n  { id: \"material-blend\", label: \"Blend\", value: \"material-blend\" },\n];\n\nexport default function VariantSelector_Basic_Ex_05() {\n  const [selectedMaterial, setSelectedMaterial] =\n    React.useState(\"material-cotton\");\n\n  return (\n    <div className=\"space-y-8\">\n      <div className=\"space-y-4 rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900\">\n        <h3 className=\"text-lg font-semibold text-gray-900 dark:text-gray-100\">\n          Pick your material\n        </h3>\n        <p className=\"text-sm text-gray-600 dark:text-gray-400\">\n          Choose the material that best suits your needs.\n        </p>\n\n        <div className=\"space-y-2\">\n          <label className=\"mb-2 text-sm font-medium text-gray-700 dark:text-gray-300\">\n            Select Material:\n          </label>\n          <VariantSelectorBasic\n            value={selectedMaterial}\n            onValueChange={setSelectedMaterial}\n            variants={materialVariants}\n            itemClassName=\"bg-transparent border-dashed hover:border-solid hover:border-indigo-300 dark:hover:border-indigo-700 \n                          focus:ring-indigo-200 focus:ring-offset-1 focus:ring-opacity-60 dark:focus:ring-indigo-800 \n                          dark:focus:ring-opacity-40 focus:border-indigo-400 dark:focus:border-indigo-600\n                          data-[state=checked]:border-2 data-[state=checked]:border-solid data-[state=checked]:border-indigo-500 \n                          data-[state=checked]:bg-indigo-50 data-[state=checked]:text-indigo-700 \n                          dark:data-[state=checked]:bg-indigo-900/30 dark:data-[state=checked]:text-indigo-300 \n                          dark:data-[state=checked]:border-indigo-400 \n                          data-[state=checked]:shadow-[0_0_0_1px_rgba(79,70,229,0.2)] \n                          dark:data-[state=checked]:shadow-[0_0_0_1px_rgba(99,102,241,0.3)]\"\n            labelClassName=\"font-normal\"\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "path": "/components/commerce-ui/components/variant-selector/basic/variant-selector-basic-ex-05.tsx",
      "target": "components/commerce-ui/variant-selector-basic-ex-05.tsx"
    }
  ]
}