# Form Builder Library
A powerful React library for building dynamic, drag-and-drop forms with a rich set of field types and customization options. Uses Tailwind CSS classes - requires Tailwind CSS as a peer dependency in your project.
## Features
- 🎨 **Visual Form Builder** - Drag and drop interface for creating forms
- 📝 **Rich Field Types** - 25+ field types including text, numbers, choices, dates, uploads, and more
- 🔧 **Field Customization** - Extensive settings for each field type
- 👀 **Real-time Preview** - See your form as users will see it
- 📱 **Responsive Design** - Works perfectly on desktop and mobile
- 💾 **Local Storage** - Automatic form persistence
- 🎯 **Form Validation** - Built-in validation rules and custom logic
- 🎨 **Icon Support** - Choose from 30+ icons for each field
- 🎨 **Tailwind CSS** - Uses Tailwind utility classes for styling
- 📦 **Minimal Dependencies** - Only React, React DOM, and Tailwind CSS required
## Installation
```bash
npm install @diludilshad/form-builder-library
```
### Prerequisites
This library requires Tailwind CSS to be installed and configured in your project. If you haven't already set up Tailwind CSS, follow these steps:
1. **Install Tailwind CSS:**
```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
2. **Configure your `tailwind.config.js`:**
```javascript
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
// Add this line to scan the form builder library
"./node_modules/@diludilshad/form-builder-library/**/*.{js,jsx}",
],
theme: {
extend: {},
},
plugins: [],
};
```
3. **Add Tailwind directives to your CSS:**
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
### Why Peer Dependency?
The Form Builder Library uses Tailwind CSS classes for styling. By using Tailwind as a peer dependency instead of bundling it:
- ✅ **No Style Conflicts** - Avoids duplicate Tailwind base styles
- ✅ **Consistent Theming** - Components use your project's Tailwind configuration
- ✅ **Smaller Bundle Size** - No duplicate CSS utilities
- ✅ **Customization** - Easy to customize colors, spacing, and other design tokens
## Using in Your Project
### Step 1: Create a New React Project
```bash
# Create a new React project
npx create-react-app my-form-app
cd my-form-app
# Or with Vite (recommended)
npm create vite@latest my-form-app -- --template react
cd my-form-app
npm install
```
### Step 2: Install Dependencies
```bash
# Install the form builder library
npm install @diludilshad/form-builder-library
# Install required peer dependencies
npm install tailwindcss postcss autoprefixer
```
### Step 3: Setup Tailwind CSS
```bash
# Initialize Tailwind
npx tailwindcss init -p
```
Update your `tailwind.config.js`:
```javascript
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
// IMPORTANT: Include the form builder library
"./node_modules/@diludilshad/form-builder-library/**/*.{js,jsx}",
],
theme: {
extend: {
// You can extend the theme to customize form builder appearance
colors: {
primary: {
50: "#eff6ff",
500: "#3b82f6",
600: "#2563eb",
700: "#1d4ed8",
},
},
},
},
plugins: [],
};
```
Add to your `src/index.css`:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
### Step 4: Basic Implementation
Create `src/App.jsx`:
```jsx
import React, { useState } from "react";
import { BuilderForm, FormReader } from "@diludilshad/form-builder-library";
function App() {
const [currentView, setCurrentView] = useState("builder");
const [form, setForm] = useState({
name: "",
type: "",
description: "",
structure: [],
formsRules: [],
});
const handleSave = (formData) => {
console.log("Form saved:", formData);
setForm(formData);
// Here you would typically save to your backend
};
const handleFormSubmit = (values) => {
console.log("Form submitted:", values);
// Handle form submission
};
return (