FormCn

Overview

Formcn is an open-source form builder that produces production-ready forms from shadcn/ui components. It was created because hand-written and AI-generated form code tends to be repetitive or inconsistent, so Formcn generates the same well-structured code every time and lets developers bring it into a project with one shadcn registry command.

Forms can be single-step or multi-step, with client and server validation through Zod and ARIA-accessible fields. Formcn AI can scaffold the form fields from a description instead of adding each field by hand. The registry also publishes the extra field components the builder relies on, such as a stepper, tag input and file upload.

Features

• Single and multi-step forms: Choose a one-step layout or a multi-step flow with navigation.
• Type-safe validation: Client-side and server-side validation with Zod.
• Formcn AI: Scaffold form fields automatically.
• One-command install: Generated code and dependencies are added through the shadcn registry CLI.
• Extra field components: Tag input, password, multi-select, rating, file upload and stepper.
• Hooks: use-file-upload and use-multi-step-viewer for custom form logic.
• Accessible output: Fields are built with ARIA support and shadcn/ui styling.

Tech stack

• React
• shadcn/ui, Tailwind CSS
• Zod
• Motion

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @formcn/component-name