shadcn-labs/form-builder

README

Form Builder

A dynamic form-building tool that allows users to create, customize, and validate forms seamlessly within web applications. Built with React, Next.js, and various other technologies, Form Builder provides an intuitive interface for developers and users alike.

Form Builder

Features

Dynamic Form Creation: Easily create forms with various input types including text, checkbox, radio buttons, and more.
Real-Time Validation: Validate user inputs using the Zod library, ensuring data integrity and user-friendly feedback.
Responsive Design: Built with Tailwind CSS, ensuring forms look great on all devices.
Customizable Components: Leverage ShadCN components for a consistent and modern UI experience.
Two Form Libraries: Generate React Hook Form or TanStack Form code, each starting with the one shadcn add command it needs.
shadcn Registry: Every extra component and template installs with the shadcn CLI, in Radix and Base UI projects alike.
Server-Side Rendering: Utilize Next.js for optimized performance and SEO.

Live Demo

Check out the live demo of the Form Builder here.

YouTube Demo

Installation

To get started with Form Builder, follow these steps:

Clone the repository:

git clone https://github.com/hasanharman/form-builder.git

Navigate into the project directory:
```
cd form-builder
```
Install the necessary dependencies:
```
pnpm install
```

Usage

To start the development server, run:

pnpm dev

pnpm dev and pnpm build first build the registry into public/r. Run the tests with pnpm test.

Open your browser and navigate to http://localhost:3000 to see the application in action.

Creating a Form

Access the Builder: Once the app is running, navigate to the form builder interface.
Add Inputs: Use the toolbar to add different types of inputs.
Customize Inputs: Click on any input field to configure properties such as label, placeholder, required validation, etc.
Save & Preview: Once your form is built, save it and preview the output.

Components

The site's UI is shadcn/ui on Base UI (components.json style base-vega). The extra form components (phone input, multi select, credit card, signature pad, …) are documented at /components.

shadcn Registry

Everything under /components and /templates is published as a shadcn registry. Install an item with the shadcn CLI:

npx shadcn@latest add https://www.shadcn-form.com/r/phone-input.json

Items only use props every shadcn style shares, so they install into Radix (radix-*, new-york) and Base UI (base-*) projects alike. The generated form code in the playground starts with the command that installs everything it imports.

registry.json is the source of truth: titles, descriptions, files, dependencies.
pnpm registry:build runs shadcn build into public/r; pnpm registry:validate checks the source.
__tests__/registry-catalog.spec.ts checks each item's declared dependencies against its imports.

Project Structure

Domain terms are defined in CONTEXT.md.

components/field-variants/: one module per playground field type (preview control, validation, default value, generated code). Add a field type by adding a module and listing it in index.ts.
lib/form-code/: the form code generator, with one adapter per form library.
lib/registry-catalog.ts: reads registry.json for docs pages, sidebars and install commands.
components/ui/: shadcn wrappers; the only place allowed to import @base-ui/react.

Validation

Form Builder utilizes Zod for input validation. You can define schemas for your forms as follows:

import { z } from 'zod';

const formSchema = z.object({
  name: z.string().min(1, "Name is required"),
  email: z.string().email("Invalid email address"),
  age: z.number().min(18, "You must be at least 18 years old"),
});

This schema can be applied to your form to enforce validation rules.

API

Form Submission

Once your form is ready, you can handle submissions with a simple API call. Here’s an example of how to submit the form data:

const handleSubmit = async (data) => {
  try {
    const response = await fetch('/api/form-submit', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json',
      },
    });
    const result = await response.json();
    console.log('Form submitted successfully:', result);
  } catch (error) {
    console.error('Error submitting form:', error);
  }
};

Contributing

Contributions are welcome! If you would like to contribute to Form Builder, please follow these steps:

Fork the Repository: Click on the “Fork” button at the top right corner of the repository page.
Create a Branch:
```
git checkout -b feature/YourFeatureName
```
Make Changes: Implement your feature or fix.
Commit Changes:
```
git commit -m "Add a feature"
```
Push Changes:
```
git push origin feature/YourFeatureName
```
Create a Pull Request: Go to the original repository and create a pull request.

License

This project is licensed under the MIT License.

Acknowledgements

React - A JavaScript library for building user interfaces.
Next.js - The React framework for production.
Tailwind CSS - A utility-first CSS framework for creating custom designs.
Zod - TypeScript-first schema declaration and validation.