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

Releasing a new version

Follow these steps whenever you've made changes and want to publish them to npm.

Prerequisites (one-time setup)

1. You must be a member of the @coachelloapp npm organization with publish rights.
2. Log in on your machine:

   npm login
   npm whoami   # should print your npm username

Step 1 — Make sure your changes are committed

git status
git add .
git commit -m "fix: <describe your change>"

The working tree must be clean before bumping the version.

Step 2 — Pick a version bump

Follow semver:

| Change type | Command | Example | |---|---|---| | Bug fix | npm version patch | 1.1.2 → 1.1.3 | | New feature (backwards-compatible) | npm version minor | 1.1.2 → 1.2.0 | | Breaking change | npm version major | 1.1.2 → 2.0.0 |

This single command:

• updates package.json and package-lock.json
• creates a git commit
• creates a git tag like v1.1.3

npm version patch

Step 3 — Publish to npm

npm publish --access public

The prepublishOnly script automatically runs npm run build first, so dist/ is always fresh.

--access public is required because the package is scoped (@coachelloapp/...).

Step 4 — Push the commit and tag to GitHub

git push origin main --follow-tags

Step 5 — Verify

npm view @coachelloapp/json-form-builder version

It should print the new version. You can also check the package on npm.

TL;DR — the whole flow

git add .
git commit -m "fix: <your change>"
npm version patch          # or minor / major
npm publish --access public
git push origin main --follow-tags

Common errors

| Error | Cause | Fix | |---|---|---| | 403 Forbidden on publish | Not a member of @coachelloapp org | Ask an owner to add you via npm owner add <user> @coachelloapp/json-form-builder | | You cannot publish over the previously published versions | Version already exists on npm | Bump the version again — npm versions are immutable | | Git working directory not clean | Uncommitted changes | Commit or stash before npm version | | EOTP / asks for one-time password | 2FA enabled on the npm org | Append --otp=123456 to the publish command |

License

MIT