FormCN: Generate React Forms in Seconds

Source: Dev.to

Forms are one of the most common components in web applications. Whether it’s a login form, registration, or a multi-step wizard, we often find ourselves writing the same boilerplate code over and over again.

I wanted to change that, so I built FormCN, my first CLI tool designed to generate fully‑typed, validated React forms in seconds, integrating ShadCN UI, React Hook Form, and Zod.

Why Build FormCN?

In most projects, forms are a repetitive task:

• We either rewrite them from scratch
• Or copy & tweak old code
• Or rely on AI generators, which aren’t always precise

FormCN solves this problem by automating form creation, giving you a ready‑to‑use structure while keeping full control over the design and validation.

Key Features

• Single‑step or Multi‑step forms — generate forms for simple or complex workflows.
• Ready‑made templates — login, registration, or custom forms.
• Styling presets — predefined UI styles using ShadCN components.
• Manual mode — step‑by‑step configuration if you want full control.
• Automatic folder & file generation — creates the component folder with all schemas and files ready to use.
• Smart CLI checks — prevents duplicate forms, checks empty fields, ensures required dependencies like Zod, React Hook Form, and resolvers are installed.

How It Works

After installing FormCN via npm:

npm install -g formcn

Run the CLI:

formcn

You’ll be prompted to:

• Enter form name — e.g., register → creates RegisterForm.
• Choose form type — single‑step or multi‑step.
• Pick a template — ready template or manual configuration.
• Select a styling preset — default, minimal, or custom.

FormCN then generates a complete folder, for example a single‑step form:

src/components/forms/{FormName}/
├── schema.ts
└── form.tsx

Or, for multi‑step forms:

src/components/forms/{FormName}/
├── step1-schema.ts
├── step1Step.tsx
└── {FormName}Form.tsx

Everything is ready to use or tweak in seconds.

Why Developers Will Love It

FormCN is built for React developers who want to focus on features instead of boilerplate:

• TypeScript‑first with Zod validation
• Beautiful UI with ShadCN components
• Professional CLI that prevents errors and guides the developer
• Saves hours of repetitive work

Try It Now

• NPM:
• GitHub:

FormCN is actively maintained, and I’d love to get your feedback, ideas, or contributions. If you try it out, let me know what templates or presets you’d like to see next!