{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radio-group12",
  "title": "Radio group",
  "description": "Radio group built with shadcn/ui.",
  "files": [
    {
      "path": "contents/components/radio-group/12/index.tsx",
      "content": "import { useId } from \"react\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Label } from \"@/components/ui/label\";\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\";\n\nexport default function Component() {\n  const id = useId();\n\n  const items = [\n    { label: \"Basic\", price: \"$9/mo\", value: \"1\" },\n    { label: \"Pro\", price: \"$29/mo\", value: \"2\" },\n    { label: \"Business\", price: \"$79/mo\", value: \"3\" },\n    { label: \"Enterprise\", price: \"Custom\", value: \"4\" }\n  ];\n\n  return (\n    <fieldset className=\"space-y-4\">\n      <legend className=\"text-foreground text-sm leading-none font-medium\">Select subscription plan</legend>\n      <RadioGroup className=\"gap-0 -space-y-px rounded-md shadow-xs\" defaultValue=\"2\">\n        {items.map((item) => (\n          <div\n            className=\"border-input has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-accent relative flex flex-col gap-4 border p-4 outline-none first:rounded-t-md last:rounded-b-md has-data-[state=checked]:z-10\"\n            key={`${id}-${item.value}`}>\n            <div className=\"flex items-center justify-between\">\n              <div className=\"flex items-center gap-2\">\n                <RadioGroupItem\n                  aria-describedby={`${`${id}-${item.value}`}-price`}\n                  className=\"after:absolute after:inset-0\"\n                  id={`${id}-${item.value}`}\n                  value={item.value}\n                />\n                <Label className=\"inline-flex items-start\" htmlFor={`${id}-${item.value}`}>\n                  {item.label}\n                  {item.value === \"2\" && <Badge className=\"ms-2 -mt-1\">Popular</Badge>}\n                </Label>\n              </div>\n              <div\n                className=\"text-muted-foreground text-xs leading-[inherit]\"\n                id={`${`${id}-${item.value}`}-price`}>\n                {item.price}\n              </div>\n            </div>\n          </div>\n        ))}\n      </RadioGroup>\n    </fieldset>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/radio-group12.tsx"
    }
  ],
  "type": "registry:component"
}