Build a Responsive Sign-Up Form with Formik and Tailwind CSS in Next.js

This tutorial shows you how to create a clean and user-friendly sign-up form using Formik and Tailwind CSS in a Next.js app. Learn how to handle form state, validation, and styling step by step.

1. Install lib and another components

First we need to install Formik to handle logic form

bash
yarn add formik

or 

npm install formik

You need some common UI components:

• Button
• EmailField
• PasswordField
• AuthFormProviders

2. Add Signin Form component

Create a file components/ui/Forms/SignupForm.tsx

jsx
"use client";

import React from "react";

import { Form, Formik } from "formik";
import * as Yup from "yup";

import Button from "@/components/ui/Button";

import AuthFormProviders from "./common/AuthFormProviders";
import EmailField, { emailFieldValidation } from "./common/EmailField";
import PasswordField, { passwordFieldValidation } from "./common/PasswordField";
import TextField from "./common/TextField";

interface SignupFormValues {
  firstName: string;
  lastName: string;
  email: string;
  password: string;
}

export const SignupForm = () => {
  const initialValues: SignupFormValues = {
    firstName: "",
    lastName: "",
    email: "",
    password: "",
  };

  const validationSchema = Yup.object().shape({
    firstName: Yup.string()
      .required("First name Required")
      .min(2, "First name must be at least 2 characters")
      .max(20, "First name must not exceed 20 characters")
      .matches(/^[a-zA-Z0-9_ ]+$/, "Only letters, numbers, underscores and spaces are allowed"),
    lastName: Yup.string()
      .required("Last name Required")
      .min(2, "Last name must be at least 2 characters")
      .max(20, "Last name must not exceed 20 characters")
      .matches(/^[a-zA-Z0-9_ ]+$/, "Only letters, numbers, underscores and spaces are allowed"),
    email: emailFieldValidation,
    password: passwordFieldValidation,
  });

  const handleSubmit = async (values: SignupFormValues) => {
    alert(values);
  };

  return (
    <div className="bg-white px-6 py-4 shadow sm:rounded-lg md:py-8">
      <Formik<SignupFormValues>
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={handleSubmit}
      >
        <Form action="#" className="grid grid-cols-1 gap-x-3 gap-y-4 sm:grid-cols-2">
          <TextField id="firstName" name="firstName" label="First name" autoComplete="given-name" />
          <TextField id="lastName" name="lastName" label="Last name" autoComplete="family-name" />
          <EmailField className="col-span-full" />
          <PasswordField className="col-span-full" />

          <div className="col-span-full mt-3">
            <Button type="submit" variant="primary" color="blue" className="w-full">
              <span>
                Sign up <span aria-hidden="true">&rarr;</span>
              </span>
            </Button>
          </div>

          <AuthFormProviders className="col-span-full" />
        </Form>
      </Formik>
    </div>
  );
};

export default SignupForm;

Now you can use the form in the app/(auth)/signup/page.tsx like that

jsx
import Link from "next/link";
import React from "react";

import SignUpForm from "@/components/Form/AuthForms/SignUpForm";
import { ROUTES } from "@/constants/routes";

const DocSignupForm = () => {
  return (
    <div className="not-prose">
      <div className="bg-white px-6 py-4 shadow sm:rounded-lg md:py-8">
        <h2 className="text-3xl font-bold text-gray-900">Get started for free</h2>
        <p className="mt-2 text-sm text-gray-700">
          Already registered?{" "}
          <Link href={ROUTES.signIn} className="font-medium text-blue-600 hover:underline">
            Sign in
          </Link>{" "}
          to your account.
        </p>

        <SignUpForm />
      </div>
    </div>
  );
};

export default DocSignupForm;

The UI will be shown