{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sign-in-forms-01",
  "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"
  ],
  "registryDependencies": [
    "button",
    "input"
  ],
  "files": [
    {
      "path": "examples/blocks/dashboard-ui/sign-in-forms/01/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\";\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 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        {/* 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\n        {/* Heading */}\n        <h1 className=\"font-heading text-center text-3xl\">Sign in to your account</h1>\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          </form>\n        </Form>\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      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/sign-in-forms-01.tsx"
    }
  ],
  "meta": {
    "isPro": false
  }
}