Website: forms.bridger.to

A powerful form builder built with Next.js, React, Tanstack Forms, and shadcn/ui. This project features a drag-and-drop form builder component and a shareable component registry for seamless reuse.

npx shadcn@latest add https://forms.bridger.to/r/form-builder.json

This automatically installs all dependencies including the inline-edit component.

• 🎨 Visual Form Builder – Intuitive drag-and-drop UI for designing forms
• 📝 Flexible Field Types – Text, email, phone, number, textarea, select, radio, checkbox, switch, slider, and more
• ✅ Form Validation – Built-in validation powered by Zod schemas
• 🎯 Component Registry – Easily install components via the shadcn CLI
• ⚡ shadcn/ui Compatible – Built on top of shadcn/ui for great design and flexibility

• Node.js 18+
• pnpm (recommended), or npm/yarn

# Clone the repository git clone https://github.com/brijr/forms.git cd forms # Install dependencies pnpm install # Start the development server pnpm dev

Visit http://localhost:3000 to use the form builder.

This project provides a shadcn-compatible component registry for easy integration into other projects.

A click-to-edit component supporting both single-line and multiline inline editing.

Registry Dependencies: input, textarea

A fully-featured form builder with drag-and-drop, field validation, and form rendering.

Registry Dependencies: inline-edit, button, input, textarea, select, checkbox, radio-group, switch, slider, field, dialog, label, dropdown-menu, sidebar

NPM Dependencies: @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities, @tanstack/react-form, @tanstack/zod-form-adapter, zod, sonner, lucide-react

To generate the registry files:

pnpm run registry:build

This command creates JSON bundles in public/r/ for use by the shadcn CLI.

Install the form builder (includes all dependencies):

npx shadcn@latest add https://forms.bridger.to/r/form-builder.json

Or install just the inline-edit component:

npx shadcn@latest add https://forms.bridger.to/r/inline-edit.json

npx shadcn@latest add http://localhost:3000/r/form-builder.json

Note: Components will be installed to components/forms/ directory. The inline-edit component will be installed to components/ui/inline-edit/.

After installation, you can use the FormBuilder component:

import { FormBuilder } from "@/components/form-builder"; export default function Page() { return <FormBuilder />; }

The form builder includes JSON import/export utilities that can be used independently:

import { downloadFormConfig, parseFormConfig, type FormConfig } from "@/components/form-builder"; // Export a form configuration to JSON const formConfig: FormConfig = { id: "form_123", title: "My Form", fields: [...] }; downloadFormConfig(formConfig); // Downloads as JSON file // Parse and validate an imported form configuration const jsonString = `{"id": "form_123", "title": "My Form", "fields": []}`; const config = parseFormConfig(jsonString); if (config) { // Use the validated config console.log(config); }

From @/components/form-builder:

Components:

• FormBuilder - The main form builder component
• FormRenderer - Component to render forms from configuration

Hooks:

• useFormBuilder - Hook for form state management (fields, selection, view mode, CRUD operations)

Types:

• FormConfig - Complete form configuration
• FieldConfig - Individual field configuration
• FieldType - Available field types
• FieldOption - Options for select/radio/checkbox fields
• ValidationRule - Validation rules for fields
• ViewMode - Builder view modes ("builder" | "preview" | "json")

Utilities:

• downloadFormConfig(formConfig) - Export form config as JSON file
• parseFormConfig(jsonString) - Parse and validate JSON form config
• createDefaultField(type, index) - Create a field with defaults
• createEmptyForm() - Create an empty form configuration
• generateFormSchema(config) - Generate Zod schema for form validation
• getDefaultValues(config) - Extract default values from config
• FIELD_TYPES - Array of available field type configurations
• CATEGORIES - Field type categories for the toolbox

registry/ ├── inline-edit/ │ └── inline-edit.tsx └── form-builder/ ├── lib/ │ ├── form-config.ts │ └── form-utils.ts ├── field-editor.tsx ├── field-preview.tsx ├── field-toolbox.tsx ├── floating-controls.tsx ├── form-builder.tsx ├── form-renderer.tsx ├── index.ts ├── option-list.tsx ├── sortable-field.tsx └── use-form-builder.ts 

Installation Structure: When installed via shadcn, everything goes into components/form-builder/:

components/ ├── form-builder/ │ ├── lib/ │ │ ├── form-config.ts │ │ └── form-utils.ts │ ├── field-editor.tsx │ ├── field-preview.tsx │ ├── field-toolbox.tsx │ ├── floating-controls.tsx │ ├── form-builder.tsx │ ├── form-renderer.tsx │ ├── index.ts │ ├── option-list.tsx │ ├── sortable-field.tsx │ └── use-form-builder.ts └── ui/ └── inline-edit.tsx 

├── app/ # Next.js app directory ├── components/ │ └── ui/ # shadcn/ui components ├── lib/ # Shared utilities ├── registry/ # Component registry (source of truth) │ ├── form-builder/ # Form builder components │ └── inline-edit/ # Inline edit component ├── public/ │ └── r/ # Generated registry JSON files └── registry.json # Registry entry point 

• pnpm dev – Start development server
• pnpm build – Build for production
• pnpm start – Run production server
• pnpm lint – Run ESLint
• pnpm registry:build – Build registry JSON files

• Next.js Documentation
• shadcn/ui Documentation
• shadcn Registry Guide

MIT