FormCN：在几秒钟内生成 React 表单

Source: Dev.to

表单是 Web 应用中最常见的组件之一。无论是 登录表单、注册表单，还是 多步骤向导，我们经常会一遍又一遍地编写相同的样板代码。

我想改变这种情况，于是构建了 FormCN——我的第一个 CLI 工具，旨在 在几秒钟内生成全类型、带验证的 React 表单，并集成 ShadCN UI、React Hook Form 与 Zod。

为什么要构建 FormCN？

在大多数项目中，表单是一项重复性工作：

• 我们要么 从头重新编写
• 要么 复制并微调旧代码
• 要么 依赖 AI 生成器，但它们并不总是精准

FormCN 通过自动化表单创建来解决这个问题，为你提供 即用的结构，同时保持对设计和验证的完整控制。

主要特性

• 单步或多步表单 — 为简单或复杂的工作流生成表单。
• 现成模板 — 登录、注册或自定义表单。
• 样式预设 — 使用 ShadCN 组件的预定义 UI 样式。
• 手动模式 — 若想完全掌控，可一步步配置。
• 自动文件夹 & 文件生成 — 创建包含所有 schema 和文件的组件文件夹，直接可用。
• 智能 CLI 检查 — 防止重复表单，检查空字段，确保已安装 Zod、React Hook Form 以及解析器等必需依赖。

工作原理

通过 npm 安装 FormCN：

npm install -g formcn

运行 CLI：

formcn

系统会提示你：

• 输入表单名称 — 例如 register → 创建 RegisterForm。
• 选择表单类型 — 单步或多步。
• 挑选模板 — 现成模板或手动配置。
• 选择样式预设 — 默认、简约或自定义。

随后 FormCN 会生成完整的文件夹，例如单步表单：

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

或者多步表单：

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

所有内容 即刻可用或进一步微调。

开发者为何会爱上它

FormCN 为 希望专注业务而非样板代码的 React 开发者 而生：

• TypeScript 优先，配合 Zod 验证
• 使用 ShadCN 组件的精美 UI
• 专业的 CLI，防止错误并提供指引
• 节省 大量重复工作时间

立即尝试

• NPM:
• GitHub:

FormCN 正在 积极维护，欢迎提供 反馈、想法或贡献。如果你使用了它，请告诉我你希望下一个加入哪些模板或预设！