{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-radio-group-17","type":"registry:block","title":"Pricing plan radio cards","description":"Pricing plan radio cards","dependencies":[],"registryDependencies":["field","radio-group"],"files":[{"path":"c-radio-group-17.tsx","type":"registry:block","content":"import {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/components/ui/field\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/components/ui/radio-group\"\n\nconst plans = [\n  {\n    value: \"free\",\n    title: \"Free\",\n    price: \"$0\",\n    description: \"For personal projects and experiments.\",\n  },\n  {\n    value: \"pro\",\n    title: \"Pro\",\n    price: \"$19\",\n    description: \"For professionals and small teams.\",\n  },\n  {\n    value: \"enterprise\",\n    title: \"Enterprise\",\n    price: \"$49\",\n    description: \"For organizations with advanced needs.\",\n  },\n]\n\nexport function Pattern() {\n  return (\n    <RadioGroup defaultValue=\"pro\" className=\"w-full max-w-xs\">\n      {plans.map((plan) => (\n        <FieldLabel key={plan.value} htmlFor={plan.value}>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value={plan.value} id={plan.value} />\n            <FieldContent>\n              <FieldTitle className=\"flex items-center justify-between\">\n                <span>{plan.title}</span>\n                <span className=\"text-sm font-semibold\">{plan.price}/mo</span>\n              </FieldTitle>\n              <FieldDescription>{plan.description}</FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n      ))}\n    </RadioGroup>\n  )\n}","target":"components/examples/c-radio-group-17.tsx"}],"meta":{"order":17}}