logo image
  • Overview

    • View all components
    • Install required things
  • Common UI

    • App Logo
    • Avatar
    • Button
    • Badge
    • Typography

    • Forms

    • Notification
    • Modal
    • Card
    • Breadcrumb
    • Pagination
    • Top Progress Bar
    • Table
    • Item Grid
    • Youtube Video
  • Features UI

    • Live chat button
  • Sections

    • Hero Banner
    • FAQs
  • Layouts

    • common

    • TopBar Layout
    • SideBar Layout
  1. Home
  2. Components
  3. Common Ui
  4. Forms
  5. Signup Form

Sign-Up Form

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.


Signup Form preview

Get started for free

Already registered? Sign in to your account.

Or continue with

Please install everything that's required

Before setup and using this component, please install all the required dependencies from this link (if you have never installed).

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

Get started for free

Already registered? Sign in to your account.

Or continue with

On this page

  1. 1. Install lib and another components

  2. 2. Add Signin Form component