All components

Sign in Forms 01

Sign in Forms 01 is a React and Tailwind CSS form component from Bund UI, licensed MIT. Copy it and paste it into your project.

Bund UI MIT forms

What it is

Sign in Forms 01 is a React and Tailwind CSS form component from Bund UI, licensed MIT. Copy it and paste it into your project.

How to use it

Open it in the catalogue, press copy, and paste it into your project. The prompt you copy carries the code and the rules that tell your agent to reproduce it without changing anything.

Open in the catalogue

Five free copies a month. No card.

Needs

npm i react-hook-form @hookform/resolvers zod

Licence

This component comes from Bund UI and is redistributed under the MIT licence, which permits commercial use. The copyright notice travels with the code.

Sign in Forms 01

examples/blocks/dashboard-ui/sign-in-forms/01/page.tsx
"use client";

import type React from "react";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from "@/components/ui/form";
import Link from "next/link";

const formSchema = z.object({
  email: z.email(),
  password: z.string().min(8, { message: "Password must be at least 8 characters" })
});

export default function LoginForm() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      email: "",
      password: ""
    }
  });

  function onSubmit(values: z.infer<typeof formSchema>) {
    console.log(values);
  }

  return (
    <div className="flex h-screen w-full items-center justify-center px-4">
      <div className="mx-auto flex w-full max-w-sm flex-col items-center gap-8">
        {/* Logo */}
        <div className="flex h-16 w-16 items-center justify-center">
          <img src="/logo.svg" className="size-10" alt="" />
        </div>

        {/* Heading */}
        <h1 className="font-heading text-center text-3xl">Sign in to your account</h1>

        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="w-full space-y-6">
            <FormField
              control={form.control}
              name="email"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Email</FormLabel>
                  <FormControl>
                    <Input type="email" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="password"
              render={({ field }) => (
                <FormItem>
                  <FormLabel className="flex justify-between">
                    Password{" "}
                    <Link href="#" className="text-muted-foreground text-sm underline">
                      Forgot password?
                    </Link>
                  </FormLabel>

                  <FormControl>
                    <Input type="password" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button type="submit" className="w-full">
              Sign in
            </Button>
          </form>
        </Form>

        <p className="text-muted-foreground text-sm">
          Not a member?{" "}
          <Link href="#" className="underline">
            Start a 14 day free trial
          </Link>
        </p>
      </div>
    </div>
  );
}

Similar components