{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-dialog11",
  "title": "Alert dialog",
  "description": "Alert dialog built with shadcn/ui.",
  "files": [
    {
      "path": "contents/components/alert-dialog/11/index.tsx",
      "content": "import { useId } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Sign in</Button>\n      </DialogTrigger>\n      <DialogContent className=\"lg:max-w-md\">\n        <div className=\"flex flex-col items-center gap-2\">\n          <div\n            aria-hidden=\"true\"\n            className=\"flex size-11 shrink-0 items-center justify-center rounded-full border\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              className=\"lucide lucide-drama-icon lucide-drama\"\n            >\n              <path d=\"M10 11h.01\" />\n              <path d=\"M14 6h.01\" />\n              <path d=\"M18 6h.01\" />\n              <path d=\"M6.5 13.1h.01\" />\n              <path d=\"M22 5c0 9-4 12-6 12s-6-3-6-12c0-2 2-3 6-3s6 1 6 3\" />\n              <path d=\"M17.4 9.9c-.8.8-2 .8-2.8 0\" />\n              <path d=\"M10.1 7.1C9 7.2 7.7 7.7 6 8.6c-3.5 2-4.7 3.9-3.7 5.6 4.5 7.8 9.5 8.4 11.2 7.4.9-.5 1.9-2.1 1.9-4.7\" />\n              <path d=\"M9.1 16.5c.3-1.1 1.4-1.7 2.4-1.4\" />\n            </svg>\n          </div>\n          <DialogHeader>\n            <DialogTitle className=\"font-normal sm:text-center\">\n              Welcome back\n            </DialogTitle>\n            <DialogDescription className=\"sm:text-center\">\n              Enter your credentials to login to your account.\n            </DialogDescription>\n          </DialogHeader>\n        </div>\n\n        <form className=\"space-y-5\">\n          <div className=\"space-y-4\">\n            <div className=\"*:not-first:mt-2\">\n              <Label htmlFor={`${id}-email`}>Email</Label>\n              <Input\n                id={`${id}-email`}\n                placeholder=\"hi@yourcompany.com\"\n                required\n                type=\"email\"\n              />\n            </div>\n            <div className=\"*:not-first:mt-2\">\n              <Label htmlFor={`${id}-password`}>Password</Label>\n              <Input\n                id={`${id}-password`}\n                placeholder=\"Enter your password\"\n                required\n                type=\"password\"\n              />\n            </div>\n          </div>\n          <div className=\"flex justify-between gap-2\">\n            <div className=\"flex items-center gap-2\">\n              <Checkbox id={`${id}-remember`} />\n              <Label\n                className=\"text-muted-foreground font-normal\"\n                htmlFor={`${id}-remember`}\n              >\n                Remember me\n              </Label>\n            </div>\n            <a className=\"text-sm underline hover:no-underline\" href=\"#\">\n              Forgot password?\n            </a>\n          </div>\n          <Button className=\"w-full\" type=\"button\">\n            Sign in\n          </Button>\n        </form>\n\n        <div className=\"before:bg-border after:bg-border flex items-center gap-3 before:h-px before:flex-1 after:h-px after:flex-1\">\n          <span className=\"text-muted-foreground text-xs\">Or</span>\n        </div>\n\n        <Button variant=\"outline\">Login with Google</Button>\n      </DialogContent>\n    </Dialog>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/alert-dialog11.tsx"
    }
  ],
  "type": "registry:component"
}