Shadcn form examples
Preview a working form, copy the React component, then customize that spec with AI.
Shadcn Form Builder
Build a shadcn/ui form in the browser. Preview it, copy a React Hook Form and Zod component, then customize the fields with AI or host submissions.
Shadcn Client Intake Form
A shadcn/ui client intake form with React Hook Form and Zod. Preview the two-step flow, copy the component, and customize budget, timeline, and project goals.
Shadcn Job Application Form
A shadcn/ui job application form with React Hook Form and Zod. Collect profile links, experience level, a start date, and a note of interest.
Shadcn Waitlist Form
A shadcn/ui waitlist form with React Hook Form and Zod. Collect a name, email, company, and the use case someone wants access for.
Shadcn Contact Form
A shadcn/ui contact form with React Hook Form and Zod. Preview name, email, and message fields, then copy the component or customize it.
Shadcn Feedback Form
A shadcn/ui feedback form with React Hook Form and Zod. Collect a satisfaction rating and optional notes about what worked and what did not.
Shadcn Multi-Step Form
A shadcn/ui multi-step form with React Hook Form and Zod. Preview next and back, copy the step schemas, and customize the flow with AI.
Shadcn Conditional Form
A shadcn/ui conditional form with React Hook Form and Zod. Show severity for bugs and a use-case field for feature requests, then copy the component.
Install with MCP
Connect your assistant to the official shadcn MCP to browse and install forms in your Next.js app. Run pnpm dlx shadcn@latest init in that app first if shadcn is not set up.
1. Add this registry in your app
Merge this entry into your existing components.json registries.
1{2 "registries": {3 "@formsquid": "https://formsquid.com/r/{name}.json"4 }5}2. Connect your assistant
Merge the server entry into your client configuration, then restart or enable the shadcn server. Run the assistant from your Next.js app’s directory.
1{2 "mcpServers": {3 "shadcn": {4 "command": "npx",5 "args": [6 "shadcn@latest",7 "mcp"8 ]9 }10 }11}3. Ask your assistant
Install @formsquid/contact-form into this Next.js app and add it to a page. Wire its onSubmit callback to my API in a client component.The CLI installs the component, Zod schema, packages, and shadcn field components together.