In this video, I’ll show you how to build a modern form using ShadCN’s new Field component, React Hook Form, and Zod validation in a Next.js + TypeScript project.
The old Form component from ShadCN is no longer actively developed, so it’s time to switch!
🛠️ Tools & Packages Used:
- [Nextjs]: https://nextjs.org/
- [Shadcn]: https://ui.shadcn.com/
⏱️ Timestamps:
00:00 - Introduction
01:33 - Install and set up Next.js
02:05 - Setup shadcn UI
03:20 - Create the UI form use Field
14:04 - Integrate the form with react-hook-form
🌐 Check out more content:
- My Portfolio: https://www.cand.site/
- Medium: https://medium.com/@ckriswinarto
💻 Get the Source Code:
- GitHub: https://github.com/candraKriswinarto/shadcn-form-demo
🌐 Recommended Digital Tools (Affiliate Links):
- Hostinger: Get 20% Off on Web Hosting - https://dub.sh/zrpWarU
👍 If you found this video helpful, please like, and subscribe!
❓ Any questions? Drop them in the comments below!
#shadcn
Download
0 formats
No download links available.
Stop Using Form from ShadCN! The NEW Field Component Explained (React Hook Form + Zod) | NatokHD