JSON Form Builder with Shadcn UI & Tailwind CSS

A powerful, customizable form builder for React that lets you create dynamic forms using JSON configuration. Built with Shadcn UI and Tailwind CSS for a modern, beautiful, and accessible user experience.

Features

• ✨ JSON-Based Configuration: Define entire forms using simple JSON files
• 🎨 Modern UI: Built with Shadcn UI components and Tailwind CSS
• 📦 Rich Field Types: Support for text, number, textarea, select, radio, checkbox, date, and file inputs
• ✅ Built-in Validation: Multiple validation rules
• 🔀 Conditional Fields: Show/hide fields dynamically
• 📐 Flexible Layouts: Vertical, horizontal, and inline layouts
• 🔤 TypeScript Support: Fully typed
• 🎯 Customizable: Easy to extend with Tailwind classes
• 📱 Responsive: Works on all screen sizes
• ♿ Accessible: Built on Radix UI primitives

Quick Start

npm install
npm run dev

Open http://localhost:3000 to see the demo.

Usage

import { FormBuilder } from './src/components/FormBuilder';
import './src/styles/globals.css';

const formConfig = {
  id: 'contact-form',
  title: 'Contact Us',
  fields: [
    {
      id: 'name',
      name: 'name',
      label: 'Name',
      type: 'text',
      required: true
    },
    {
      id: 'email',
      name: 'email',
      label: 'Email',
      type: 'email',
      required: true,
      validation: [{ type: 'email' }]
    }
  ],
  submitButton: { text: 'Submit' }
};

function App() {
  return <FormBuilder config={formConfig} onSubmit={(data) => console.log(data)} />;
}

Examples

See examples/ directory for complete form configurations:

• contact-form.json - Simple contact form
• registration-form.json - User registration
• job-application.json - Job application with file upload
• survey-form.json - Survey with conditional fields

Tech Stack

• React 18
• TypeScript
• Tailwind CSS
• Shadcn UI
• Radix UI
• Vite

License

MIT