{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-dialog13",
  "title": "Alert dialog",
  "description": "Alert dialog built with shadcn/ui.",
  "files": [
    {
      "path": "contents/components/alert-dialog/13/index.tsx",
      "content": "import { CheckIcon, RefreshCcwIcon } from \"lucide-react\";\nimport { useId } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\";\nimport { Label } from \"@/components/ui/label\";\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Change plan</Button>\n      </DialogTrigger>\n      <DialogContent className=\"lg:max-w-md\">\n        <div className=\"mb-2 flex flex-col gap-2\">\n          <DialogHeader>\n            <DialogTitle className=\"text-left font-normal\">\n              Change your plan\n            </DialogTitle>\n            <DialogDescription className=\"text-left\">\n              Pick one of the following plans.\n            </DialogDescription>\n          </DialogHeader>\n        </div>\n\n        <form className=\"space-y-5\">\n          <RadioGroup className=\"gap-2\" defaultValue=\"2\">\n            {/* Radio card #1 */}\n            <div className=\"border-input has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-accent relative flex w-full items-center gap-2 rounded-md border px-4 py-3 shadow-xs outline-none\">\n              <RadioGroupItem\n                aria-describedby={`${id}-1-description`}\n                className=\"order-1 after:absolute after:inset-0\"\n                id={`${id}-1`}\n                value=\"1\"\n              />\n              <div className=\"grid grow gap-1\">\n                <Label htmlFor={`${id}-1`}>Essential</Label>\n                <p\n                  className=\"text-muted-foreground text-xs\"\n                  id={`${id}-1-description`}\n                >\n                  $4 per member/month\n                </p>\n              </div>\n            </div>\n            {/* Radio card #2 */}\n            <div className=\"border-input has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-accent relative flex w-full items-center gap-2 rounded-md border px-4 py-3 shadow-xs outline-none\">\n              <RadioGroupItem\n                aria-describedby={`${id}-2-description`}\n                className=\"order-1 after:absolute after:inset-0\"\n                id={`${id}-2`}\n                value=\"2\"\n              />\n              <div className=\"grid grow gap-1\">\n                <Label htmlFor={`${id}-2`}>Standard</Label>\n                <p\n                  className=\"text-muted-foreground text-xs\"\n                  id={`${id}-2-description`}\n                >\n                  $19 per member/month\n                </p>\n              </div>\n            </div>\n            {/* Radio card #3 */}\n            <div className=\"border-input has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-accent relative flex w-full items-center gap-2 rounded-md border px-4 py-3 shadow-xs outline-none\">\n              <RadioGroupItem\n                aria-describedby={`${id}-3-description`}\n                className=\"order-1 after:absolute after:inset-0\"\n                id={`${id}-3`}\n                value=\"3\"\n              />\n              <div className=\"grid grow gap-1\">\n                <Label htmlFor={`${id}-3`}>Enterprise</Label>\n                <p\n                  className=\"text-muted-foreground text-xs\"\n                  id={`${id}-3-description`}\n                >\n                  $32 per member/month\n                </p>\n              </div>\n            </div>\n          </RadioGroup>\n\n          <div className=\"space-y-3\">\n            <p>\n              <strong className=\"text-sm font-medium\">Features include:</strong>\n            </p>\n            <ul className=\"text-muted-foreground space-y-2 text-sm\">\n              <li className=\"flex gap-2\">\n                <CheckIcon\n                  aria-hidden=\"true\"\n                  className=\"text-primary mt-0.5 shrink-0\"\n                  size={16}\n                />\n                Create unlimited projects.\n              </li>\n              <li className=\"flex gap-2\">\n                <CheckIcon\n                  aria-hidden=\"true\"\n                  className=\"text-primary mt-0.5 shrink-0\"\n                  size={16}\n                />\n                Remove watermarks.\n              </li>\n              <li className=\"flex gap-2\">\n                <CheckIcon\n                  aria-hidden=\"true\"\n                  className=\"text-primary mt-0.5 shrink-0\"\n                  size={16}\n                />\n                Add unlimited users and free viewers.\n              </li>\n              <li className=\"flex gap-2\">\n                <CheckIcon\n                  aria-hidden=\"true\"\n                  className=\"text-primary mt-0.5 shrink-0\"\n                  size={16}\n                />\n                Upload unlimited files.\n              </li>\n              <li className=\"flex gap-2\">\n                <CheckIcon\n                  aria-hidden=\"true\"\n                  className=\"text-primary mt-0.5 shrink-0\"\n                  size={16}\n                />\n                7-day money back guarantee.\n              </li>\n              <li className=\"flex gap-2\">\n                <CheckIcon\n                  aria-hidden=\"true\"\n                  className=\"text-primary mt-0.5 shrink-0\"\n                  size={16}\n                />\n                Advanced permissions.\n              </li>\n            </ul>\n          </div>\n\n          <div className=\"grid gap-2\">\n            <Button className=\"w-full\" type=\"button\">\n              Change plan\n            </Button>\n            <DialogClose asChild>\n              <Button className=\"w-full\" type=\"button\" variant=\"ghost\">\n                Cancel\n              </Button>\n            </DialogClose>\n          </div>\n        </form>\n      </DialogContent>\n    </Dialog>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/alert-dialog13.tsx"
    }
  ],
  "type": "registry:component"
}