How to Integrate Shadcn UI Form & Zod

Step 1: Install Package Dependencies

First, make sure you have React Hook Form, Zod, date-fns (if date-picker is used), and components installed in your project:

# Core form and validation libraries
npm install react-hook-form zod @hookform/resolvers/zod lucide-react date-fns

# Shadcn Form CLI components
npx shadcn@latest add form input button label select checkbox switch textarea calendar popover command slider card
			

Step 2: Add schema.ts File

Create a file named schema.ts inside your form component folder (e.g. components/form/schema.ts) and paste the code from the generator's schema.ts (Zod) tab.

Step 3: Create the form-component.tsx Component

Next, create form-component.tsx. This is the UI form representation component that maps Zod values to Hook Form states. Paste the code from the form-component.tsx tab.

Step 4: Load Form & Render Page

Finally, render the form inside your page. Paste the code structure from the page.tsx tab.

import { ProfileForm } from "./form-component";

export default function Page() {
  return (
    <div className="max-w-xl mx-auto py-10">
      <ProfileForm />
    </div>
  );
}