{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sign-in-forms-03",
  "type": "registry:component",
  "title": "Sign-in Forms",
  "author": "Toby Belhome",
  "description": "Create secure and user-friendly sign-in experiences with Tailwind CSS sign-in forms. These layouts combine clear fields, prominent buttons, and subtle visual cues to guide users effortlessly. Perfect for SaaS platforms, web apps, and dashboards seeking modern, accessible, and conversion-focused authentication interfaces.",
  "dependencies": [
    "react-hook-form",
    "@hookform/resolvers",
    "zod",
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "input",
    "divider",
    "card"
  ],
  "files": [
    {
      "path": "examples/blocks/dashboard-ui/sign-in-forms/03/page.tsx",
      "content": "\"use client\";\n\nimport type 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 { GithubIcon, TwitterIcon } from \"lucide-react\";\nimport { Divider } from \"@/components/ui/divider\";\nimport { Card, CardContent } from \"@/components/ui/card\";\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 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 min-h-screen w-full items-center justify-center bg-[url('https://images.unsplash.com/photo-1755593574938-6d66d28f8e57?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1080')] bg-cover bg-center bg-no-repeat lg:grid-cols-2\">\n      <Card className=\"mx-auto flex w-full max-w-sm flex-col items-center gap-8 border-0 shadow-none\">\n        <CardContent className=\"space-y-8 text-center\">\n          {/* Logo */}\n          <div className=\"mb-10 flex flex-col items-center justify-center gap-4 text-center\">\n            <img src=\"/logo.svg\" className=\"size-8\" alt=\"\" />\n            <h1 className=\"font-heading text-center text-3xl\">Sign in to your account</h1>\n          </div>\n\n          <Form {...form}>\n            <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-full 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-sm 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\n              <p className=\"text-muted-foreground text-sm\">\n                Not a member?{\" \"}\n                <Link href=\"#\" className=\"underline\">\n                  Start a 14 day free trial\n                </Link>\n              </p>\n            </form>\n          </Form>\n\n          <Divider>or continue with</Divider>\n\n          <div className=\"mt-6 flex w-full flex-col gap-3\">\n            <Button variant=\"outline\">\n              <GithubIcon />\n              <span className=\"sr-only\">GitHub</span>\n              Continue with GitHub\n            </Button>\n            <Button variant=\"outline\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n                width=\"24\"\n                height=\"24\">\n                <path d=\"M12 2a9.96 9.96 0 0 1 6.29 2.226a1 1 0 0 1 .04 1.52l-1.51 1.362a1 1 0 0 1 -1.265 .06a6 6 0 1 0 2.103 6.836l.001 -.004h-3.66a1 1 0 0 1 -.992 -.883l-.007 -.117v-2a1 1 0 0 1 1 -1h6.945a1 1 0 0 1 .994 .89c.04 .367 .061 .737 .061 1.11c0 5.523 -4.477 10 -10 10s-10 -4.477 -10 -10s4.477 -10 10 -10z\"></path>\n              </svg>\n              <span className=\"sr-only\">Google</span>\n              Continue with Google\n            </Button>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/sign-in-forms-03.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}