{
  "name": "variant-selector-basic-ex-03",
  "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 model variants\nconst modelVariants: VariantItem[] = [\n  { id: \"model-light\", label: \"Light\", value: \"model-light\" },\n  { id: \"model-medium\", label: \"Medium\", value: \"model-medium\" },\n  { id: \"model-large\", label: \"Large\", value: \"model-large\" },\n  { id: \"model-ultra\", label: \"Ultra\", value: \"model-ultra\" },\n];\n\nexport default function VariantSelector_Basic_Ex_03() {\n  const [selectedModel, setSelectedModel] = React.useState(\"model-light\");\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          Choose your model\n        </h3>\n        <p className=\"text-sm text-gray-600 dark:text-gray-400\">\n          Select the model you want to purchase.\n        </p>\n\n        <div className=\"space-y-2\">\n          <label className=\"text-sm font-medium text-gray-700 dark:text-gray-300\">\n            Select Color:\n          </label>\n          <VariantSelectorBasic\n            value={selectedModel}\n            onValueChange={setSelectedModel}\n            variants={modelVariants}\n            itemClassName=\"bg-gray-50 border-gray-200 hover:border-teal-300 dark:bg-gray-800 dark:border-gray-700\n                         data-[state=checked]:border-teal-500 data-[state=checked]:bg-gradient-to-r \n                         data-[state=checked]:from-teal-50 data-[state=checked]:to-cyan-50 \n                         data-[state=checked]:text-teal-700 dark:data-[state=checked]:bg-gradient-to-r \n                         dark:data-[state=checked]:from-teal-900/40 dark:data-[state=checked]:to-cyan-900/40 \n                         dark:data-[state=checked]:border-teal-500 dark:data-[state=checked]:text-teal-300\n                         focus:ring-2 focus:ring-teal-500/50 focus:ring-offset-2 focus:border-teal-400\n                         dark:focus:ring-teal-500/40 dark:focus:ring-offset-gray-900\"\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "path": "/components/commerce-ui/components/variant-selector/basic/variant-selector-basic-ex-03.tsx",
      "target": "components/commerce-ui/variant-selector-basic-ex-03.tsx"
    }
  ]
}