Build a Form with Validation using Shadcn/ui - Step by Step

Описание

Shadcn/ui is a component library that gives us the capability to create good looking forms that are fully functional.

We will be using the Form component that is built on top of React-Hook-Form and Zod.

This gives us the ability to use the power of React-Hook-Form alongside the zod validation for our input fields.

Here is the github repo for the code in the video 👇
https://github.com/bwestwood11/register-form-youtube-video

Join our Discord server to interact with other developers 👇
https://discord.gg/rKXNDnE32N

In this video, we create reusable components that allow us to code the most efficient way inside of Next.js 14.

Time Stamps
0:00 Intro
1:12 Create Next.js Application
2:15 Install & Initialize Shadcn/ui
3:23 Add all of the components needs from Shadcn/ui
5:44 Organize the file and folder structure
10:32 Create a Reusable Card Component
25:40 Create the form with zod & react-hook-form
46:39 the useFormStatus Hook
49:49 Outro