{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "modal-dialogs-01",
  "type": "registry:component",
  "title": "Modal Dialogs",
  "author": "Toby Belhome",
  "description": "Present important content, alerts, or interactions elegantly with Tailwind CSS modal dialogs. These layouts use overlays, clear headings, and responsive design to focus user attention without disrupting the page. Perfect for web apps, dashboards, and SaaS platforms seeking modern, accessible, and user-friendly modal experiences.",
  "dependencies": [
    "react-hook-form",
    "@hookform/resolvers",
    "zod"
  ],
  "registryDependencies": [
    "button",
    "input",
    "dialog"
  ],
  "files": [
    {
      "path": "examples/blocks/dashboard-ui/modal-dialogs/01/page.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { useForm } from \"react-hook-form\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport { z } from \"zod\";\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage\n} from \"@/components/ui/form\";\nimport Link from \"next/link\";\nimport { Dialog, DialogContent, DialogFooter, DialogTrigger } from \"@/components/ui/dialog\";\n\nconst formSchema = z.object({\n  email: z.email(),\n  password: z.string().min(8, { message: \"Password must be at least 8 characters\" })\n});\n\nexport default function LoginForm() {\n  const [open, setOpen] = React.useState(true);\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      email: \"\",\n      password: \"\"\n    }\n  });\n\n  function onSubmit(values: z.infer<typeof formSchema>) {\n    console.log(values);\n  }\n\n  return (\n    <div className=\"flex h-screen w-full items-center justify-center px-4\">\n      <div className=\"mx-auto flex w-full max-w-sm flex-col items-center gap-8\">\n        <Dialog open={open} onOpenChange={setOpen}>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Login</Button>\n          </DialogTrigger>\n          <DialogContent className=\"sm:max-w-sm\">\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"mb-6 space-y-4 text-center\">\n                <img src=\"/logo.svg\" className=\"mx-auto size-10\" alt=\"\" />\n                <h1 className=\"font-heading text-center text-2xl\">Sign in to your account</h1>\n              </div>\n\n              <Form {...form}>\n                <form\n                  onSubmit={form.handleSubmit(onSubmit)}\n                  className=\"w-full space-y-4 lg:space-y-6\">\n                  <FormField\n                    control={form.control}\n                    name=\"email\"\n                    render={({ field }) => (\n                      <FormItem>\n                        <FormLabel>Email</FormLabel>\n                        <FormControl>\n                          <Input type=\"email\" {...field} />\n                        </FormControl>\n                        <FormMessage />\n                      </FormItem>\n                    )}\n                  />\n                  <FormField\n                    control={form.control}\n                    name=\"password\"\n                    render={({ field }) => (\n                      <FormItem>\n                        <FormLabel className=\"flex justify-between\">\n                          Password{\" \"}\n                          <Link href=\"#\" className=\"text-muted-foreground text-xs underline\">\n                            Forgot password?\n                          </Link>\n                        </FormLabel>\n\n                        <FormControl>\n                          <Input type=\"password\" {...field} />\n                        </FormControl>\n                        <FormMessage />\n                      </FormItem>\n                    )}\n                  />\n                  <Button type=\"submit\" className=\"w-full\">\n                    Sign in\n                  </Button>\n                </form>\n\n                <p className=\"text-muted-foreground text-center text-xs\">\n                  Not a member?{\" \"}\n                  <Link href=\"#\" className=\"underline\">\n                    Start a 14 day free trial\n                  </Link>\n                </p>\n              </Form>\n            </div>\n          </DialogContent>\n        </Dialog>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/modal-dialogs-01.tsx"
    }
  ],
  "meta": {
    "isPro": false
  }
}