Multi-Step KYC Form ( Next.js, Typescript, React-Hook-Form )

This multi-step Know Your Customer (KYC) form features validation at every step, including fields such as Name, Email, Date Picker, and File Upload. Built using TypeScript, Zod, and React Hook Form, it demonstrates how to implement robust validation for various form fields. The form is cleanly designed and highly customizable, making it easy to adapt to different use cases.

Website preview

:star: Star me on GitHub — it helps!

Features 📋

⚡️ Fully Responsive
⚡️ Multi Step
⚡️ Form validation (input, email, radio, date, select, file upload)
⚡️ Easy to modify

Tech Stack

• Typescript - Language
• React - JS library
• Next.js - React framework
• TailwindCSS - CSS framework
• Shadcn - Component library
• React-Hook-Form - For form validation
• Zod - For schema validation

Installation :arrow_down:

You will need to download Git and Node to run this project

• Git
• Node

Ensure that your computer has the stable or latest versions of both Git and Node installed.

node --version
git --version

Getting Started :dart:

Fork and Clone the repo

To Fork the repo click on the fork button at the top right of the page. Once the repo is forked open your terminal and perform the following commands

git clone https://github.com/<YOUR GITHUB USERNAME>/multi-step-form.git

cd portfolio-template

Install packages from the root directory

npm install
# or
yarn

Then, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

Contributing 💡

Step 1

• Option 1

  • 🍴 Fork this repo!

• Option 2

  • 👯 Clone this repo to your local machine.

Step 2

• Build your code 🔨🔨🔨

Step 3

• 🔃 Create a new pull request.

License 📄

This project is licensed under the MIT License - see the LICENSE.md file for details.