Skip to main content

    formkitcn
    The shadcn/ui
    form builder

    Open-source drag-and-drop form builder powered by shadcn/ui. Zod validation, react-hook-form, multi-step flows, conditional logic, and instant code export. Stop rebuilding forms.

    Open BuilderLearn More
    schema.ts
    // That's it. Seriously.
const form = formkitcn({
  fields: ["name", "email"],
  validation: "zod",
  autosave: true,
  steps: ["info", "confirm"],
});
    Features

    Everything you need, nothing you don't

    A complete form building toolkit built on shadcn/ui, designed for developers who value speed, flexibility, and clean output.

    18+ Field Types

    Text, email, slider, date, color, toggle, file uploads, headings, dividers, and more.

    Drag & Drop Builder

    Reorder, duplicate, and configure fields with an intuitive visual canvas.

    Validation Engine

    Min/max, regex, email, required — all with custom error messages and Zod export.

    Conditional Logic

    Show or hide fields based on other field values with equals, contains, and more.

    Schema Output

    Real-time JSON schema preview, ready to copy or integrate into your codebase.

    React Export

    Download a production-ready React component with react-hook-form + Zod validation.

    Live Preview

    See your form render in real time, complete with validation and multi-step navigation.

    Undo / Redo

    Full history tracking with Ctrl+Z / Ctrl+Shift+Z and autosave with draft recovery.

    Mobile Ready

    Fully responsive builder with dedicated mobile panel layout.

    How it works

    Three steps to production forms

    From idea to exported React code in under a minute.

    1. Drag & drop fields

      Pick from 18+ field types and drop them onto the canvas. Reorder with drag handles.

    2. Configure & validate

      Set labels, placeholders, validation rules, conditional visibility, and multi-step flows.

    3. Export & ship

      Download a production-ready React component with react-hook-form, Zod, and conditional logic baked in.

    Templates

    Start from a template

    Pre-built forms for common use cases. Load one, customize it, export it.

    basic

    Contact Form

    Simple name, email, phone, and message form

    7 fields
    basic

    Sign Up

    Registration with website URL and terms

    9 fields
    feedback

    Customer Survey

    Multi-step satisfaction survey with sliders & ratings

    11 fields · 3 steps
    business

    Job Application

    Multi-step application with phone, URL & resume

    13 fields · 2 steps
    basic

    Event RSVP

    Event registration with time, dietary, and guest count

    10 fields
    feedback

    Bug Report

    Issue reporting with severity slider and URL

    9 fields
    Free & open source

    Ready to stop
    rebuilding forms?

    Build your next React form in under a minute with shadcn/ui components. Drag, configure, export — ship production-ready code instantly.

    Start Building — It's Free

    No sign-up · No credit card · No limits