shadcn-forms

What problem does it solve?

Building robust, accessible forms in React can be repetitive and error-prone. This Skill provides a cohesive pattern for creating validated forms using shadcn/ui, react-hook-form, and zod, reducing boilerplate and ensuring consistent UX across apps.

Core Features & Use Cases

• Form state management with react-hook-form
• Zod-based schema validation and error handling
• Shadcn UI form components integration (Form, FormField, FormControl, FormMessage)
• Common use cases: login, registration, profile settings, and multi-step forms
• Real-world example: a user registration form with live validation and error messages

Quick Start

Install dependencies: npm install react-hook-form zod @hookform/resolvers Add shadcn form components: npx shadcn@latest add form input label Start building forms by using Form, FormField, FormItem, FormLabel, FormControl, and FormMessage in your React components.