The open-source, drag-and-drop form builder for React — powered by shadcn/ui.
Build production-ready forms visually. Get clean, copy-paste-ready code with react-hook-form and Zod validation. No lock-in, no accounts, no nonsense.
We got tired of writing the same form boilerplate over and over. You know the drill — set up react-hook-form, wire up Zod schemas, copy in the shadcn/ui components, hook everything together… for every single form.
formkitcn lets you skip all of that. Drag fields onto a canvas, tweak the settings, and export a clean React component that's ready to drop into your project. The generated code uses the same tools you'd pick yourself — shadcn/ui, react-hook-form, and Zod — so it fits right into your existing codebase.
No vendor lock-in. No proprietary runtime. Just clean code you own.
- 22 field types — Text, email, password, number, phone, URL, textarea, select, checkbox, radio, date, datetime, time, file, toggle, slider, rating, color, hidden, heading, paragraph, and divider.
- Drag-and-drop canvas — Reorder, duplicate, and delete fields with a visual builder powered by dnd-kit.
- Zod validation — Min/max, regex, email, custom rules — all generated automatically in the exported code.
- Conditional logic — Show or hide fields based on other field values (equals, not equals, contains, empty, not empty).
- Multi-step forms — Split your form into wizard-style steps with per-step validation.
- Live preview — See your form working in real time, with actual validation, as you build it.
- One-click code export — Get a complete React component with react-hook-form, Zod schema, and shadcn/ui — ready to paste.
- JSON schema output — Copy the raw schema to integrate with your own rendering pipeline.
- Undo / redo — Full history with Ctrl+Z / Ctrl+Y support.
- Template gallery — Pre-built templates for contact forms, signups, surveys, job applications, and more.
- Autosave — Your work is saved to localStorage as you go. Never lose a draft.
- Mobile-responsive — The builder adapts its panel layout on smaller screens.
- Fully open source — MIT licensed. Fork it, extend it, make it yours.
| Layer | Tool |
|---|---|
| Framework | Next.js 16 (App Router, Turbopack) |
| UI Components | shadcn/ui (Radix UI + Tailwind CSS) |
| Styling | Tailwind CSS v4 |
| Drag & Drop | @dnd-kit |
| Animations | Framer Motion |
| Form Handling (exported code) | react-hook-form + Zod |
| State | React hooks + custom useUndoRedo hook |
| Package Manager | Bun (npm/yarn/pnpm work too) |
- Node.js 18+ (or Bun)
- Git
# Clone the repo
git clone https://github.com/johuniq/formkitcn.git
cd formkitcn
# Install dependencies
bun install
# or: npm install / yarn / pnpm install
# Start the dev server
bun dev
# or: npm run dev / yarn dev / pnpm devOpen http://localhost:3000 and start building forms.
bun run build
bun startHere's a quick tour so you know where things live:
formkitcn/
├── app/ # Next.js App Router pages
│ ├── layout.tsx # Root layout (providers, metadata, SEO)
│ ├── page.tsx # Landing page
│ ├── not-found.tsx # 404 page
│ └── builder/
│ └── page.tsx # ⭐ The main form builder app
├── components/
│ ├── builder/ # Builder-specific components
│ │ ├── FieldPalette.tsx # Left sidebar — drag fields from here
│ │ ├── FormCanvas.tsx # Center — the drop zone / canvas
│ │ ├── FieldProperties.tsx # Right sidebar — configure selected field
│ │ ├── FormPreview.tsx # Live preview panel
│ │ ├── SchemaOutput.tsx # JSON schema viewer
│ │ └── TemplateGallery.tsx # Template picker modal
│ ├── landing/ # Marketing / landing page sections
│ ├── seo/ # JSON-LD structured data components
│ └── ui/ # shadcn/ui component library
├── data/
│ └── form-templates.ts # Pre-built form template definitions
├── hooks/
│ ├── use-undo-redo.ts # Generic undo/redo state hook
│ └── use-mobile.tsx # Responsive breakpoint hook
├── lib/
│ ├── export-react.ts # 🔥 Generates the React + Zod + RHF component code
│ ├── seo-config.ts # Centralized SEO constants
│ └── utils.ts # cn() and other shared utilities
├── types/
│ └── form.ts # TypeScript types, validation logic, field definitions
└── public/ # Static assets
- Pick a template or start from scratch on the
/builderpage. - Drag fields from the palette on the left onto the canvas.
- Configure each field — label, placeholder, validation rules, conditional visibility — in the properties panel.
- Preview your form in real time with working validation.
- Export → get a self-contained React component using
react-hook-form,zod, and shadcn/ui components. Paste it into your project. Done.
The exported code has zero dependency on formkitcn. It's just standard React code that uses the same libraries you already know.
We'd love your help! Whether it's fixing a typo, adding a new field type, or building a whole new feature — all contributions are welcome.
Please read our Contributing Guide to get started. The short version:
- Fork the repo
- Create a feature branch (
git checkout -b feat/amazing-feature) - Make your changes
- Run
bun run lintandbun run buildto make sure nothing's broken - Open a PR
See open issues for things to work on. Issues labeled good first issue are great starting points.
Here's what we're thinking about next. No promises on timelines, but PRs for any of these are very welcome:
- Form themes — Light/dark/custom theme support for exported forms
- Cloud save — Optional account to save and share forms
- Form analytics — Track submissions, completion rates, drop-offs
- Webhook integration — POST form data to any endpoint
- AI field suggestions — Describe your form, get fields auto-generated
- Import from JSON — Paste a schema to re-hydrate the builder
- Accessibility audit — WCAG 2.1 AA compliance checker for generated forms
- More export targets — Vue, Svelte, plain HTML
- Embeddable widget —
<script>tag to embed forms anywhere - Custom field plugins — Let users register their own field types
Got an idea? Open a feature request.
This project is licensed under the MIT License — do whatever you want with it. Seriously.
formkitcn wouldn't exist without these amazing projects:
- shadcn/ui — The beautiful component library at the heart of everything
- Next.js — The React framework that makes this fast
- dnd-kit — Smooth drag-and-drop primitives
- react-hook-form — Performant form state management
- Zod — TypeScript-first schema validation
- Tailwind CSS — Utility-first CSS that just works
- Framer Motion — Silky smooth animations
- Lucide — Clean, consistent icons
If formkitcn saves you time, consider giving it a ⭐ on GitHub.
It helps others find the project and makes us mass-produce serotonin.