@nexus-state/form-builder-ui

React UI components for Nexus State Form Builder with drag-and-drop interface

🎯 Overview

Form Builder UI provides ready-to-use React components for building visual form builders with drag-and-drop functionality.

Features:

• 🎨 Drag-and-Drop with @dnd-kit
• 📦 Built-in component palette
• ⚙️ Properties panel
• 👁️ Live field preview
• ♿ Accessibility support
• 🎯 TypeScript support
• 💅 CSS variables theming

📦 Installation

npm install @nexus-state/form-builder-ui @nexus-state/form-builder @nexus-state/react

Peer dependencies:

• react — ^17.0.0 || ^18.0.0 || ^19.0.0
• react-dom — ^17.0.0 || ^18.0.0 || ^19.0.0

🚀 Quick Start

Basic Usage

import { FormBuilder } from '@nexus-state/form-builder-ui';
import '@nexus-state/form-builder-ui/dist/styles.css';

function App() {
  return (
    <div style={{ height: '100vh' }}>
      <FormBuilder />
    </div>
  );
}

With Custom Configuration

import { FormBuilder, Palette, Canvas, PropertiesPanel } from '@nexus-state/form-builder-ui';

function CustomBuilder() {
  return (
    <div className="form-builder">
      <Palette />
      <Canvas />
      <PropertiesPanel />
    </div>
  );
}

📖 Components

FormBuilder

Main component that wraps the entire builder with DnD context.

import { FormBuilder } from '@nexus-state/form-builder-ui';

<FormBuilder />

Palette

Component palette with draggable items.

import { Palette } from '@nexus-state/form-builder-ui';

<Palette />

Canvas

Drop zone for form fields.

import { Canvas } from '@nexus-state/form-builder-ui';

<Canvas />

PropertiesPanel

Panel for editing field properties.

import { PropertiesPanel } from '@nexus-state/form-builder-ui';

<PropertiesPanel />

SortableField

Draggable and sortable field item.

import { SortableField } from '@nexus-state/form-builder-ui';

<SortableField field={field} />

FieldPreview

Preview of form field.

import { FieldPreview } from '@nexus-state/form-builder-ui';

<FieldPreview field={field} />

🎨 Styling

CSS Variables

The builder uses CSS variables for theming:

:root {
  --fb-color-primary: #3b82f6;
  --fb-bg-primary: #ffffff;
  --fb-border-color: #e2e8f0;
  /* ... more variables */
}

Custom Styles

Override default styles:

.form-builder {
  --fb-color-primary: #your-color;
}

.palette-item {
  /* Custom palette item styles */
}

🔧 Customization

Custom Components

Register custom components in the registry:

import { defaultRegistry } from '@nexus-state/form-builder';

defaultRegistry.register({
  type: 'custom-rating',
  label: 'Star Rating',
  icon: '⭐',
  category: 'advanced',
  defaultProps: { maxStars: 5 },
  configSchema: { /* ... */ },
  renderPreview: (props) => {/* ... */},
  renderField: (props) => {/* ... */},
});

📚 Resources

• Nexus State Documentation
• GitHub Repository
• @dnd-kit Documentation

🔗 See Also

• Core: @nexus-state/core — Foundation (atoms, stores)
• Forms:
  • @nexus-state/form — Form management
  • @nexus-state/form-builder-react — Form builder React components
  • @nexus-state/form-schema-zod — Zod validation
  • @nexus-state/form-schema-yup — Yup validation
• Framework integration:
  • @nexus-state/react — React hooks

Full ecosystem: Nexus State Packages

📄 License

MIT © Nexus State Contributors