{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sign-in-forms-02",
  "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"
  ],
  "files": [
    {
      "path": "examples/blocks/dashboard-ui/sign-in-forms/02/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\";\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=\"grid min-h-screen w-full items-center justify-center lg:grid-cols-2\">\n      <div className=\"mx-auto flex w-full max-w-sm flex-col items-center gap-8\">\n        {/* Logo */}\n        <div className=\"flex h-16 w-16 items-center justify-center\">\n          <img src=\"/logo.svg\" className=\"size-10\" alt=\"\" />\n        </div>\n        {/* Heading */}\n        <h1 className=\"font-heading text-center text-3xl\">Sign in to your account</h1>\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          </form>\n        </Form>\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\n        <Divider>or continue with</Divider>\n\n        <div className=\"mt-6 grid w-full grid-cols-3 gap-3\">\n          <Button variant=\"outline\">\n            <GithubIcon />\n            <span className=\"sr-only\">GitHub</span>\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          </Button>\n          <Button variant=\"outline\">\n            <TwitterIcon />\n            <span className=\"sr-only\">Twitter</span>\n          </Button>\n        </div>\n      </div>\n      <figure className=\"relative hidden h-full bg-red-400 lg:block\">\n        <img\n          src=\"https://images.unsplash.com/photo-1755593574938-6d66d28f8e57?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1080\"\n          className=\"absolute inset-0 h-full w-full object-cover\"\n          alt=\"login cover\"\n        />\n      </figure>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/sign-in-forms-02.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}