Components

This page focuses on the components that power the Form Builder experience and the components it generates. Use these blocks to assemble, render, and export forms with the same structure produced by the builder.

Info: All components are built on Radix UI + Tailwind, are accessible, and match the field types listed in Field Types.

Core Builder Surface

FormBuilder (main editor)

Visual drag & drop editor with live preview and export hooks.

import { FormBuilder } from "@/components/screens/form-builder";

export default function BuilderPage() {
  return (
    <div className="container mx-auto">
      <FormBuilder
        initialFields={[]}
        onSave={(fields) => console.log("saved", fields)}
        onExport={(format) => console.log("export", format)}
      />
    </div>
  );
}

FieldSelector (add fields)

Left panel that lists every available field type from the Form Builder catalog.

import { FieldSelector } from "@/components/screens/field-selector";

<FieldSelector onFieldSelect={(field) => addField(field)} />;

FormFieldList + FieldItem (manage list)

Sortable list of the current fields with per-field actions.

import { FormFieldList } from "@/components/screens/form-field-list";

<FormFieldList
  fields={fields}
  onReorder={setFields}
  onRemove={(id) => setFields((f) => f.filter((item) => item.id === id))}
/>;

FormPreview (live rendering)

Renders the current fields exactly as they will appear to end users.

import { FormPreview } from "@/components/screens/form-preview";

<FormPreview fields={fields} />;

Rendering the Generated Form

FormWrapper

Provides layout, RHF integration, and submit handling for a generated field set.

import { FormWrapper } from "@/components/screens/form-wrapper";
import { RenderFormField } from "@/components/screens/render-form-field";

<FormWrapper
  fields={fields}
  onSubmit={(values) => console.log("submitted", values)}
>
  <RenderFormField fields={fields} />
</FormWrapper>;

RenderFormField

Renders each field type (text, select, date, phone, credit card, file upload, etc.) matching the Form Builder output. Pairs with the schema described in Field Types.

import { RenderFormField } from "@/components/screens/render-form-field";

<RenderFormField fields={fields} />;

Code & Export Utilities

GenerateCodeField

Creates a React component that matches the current Form Builder configuration.

import { GenerateCodeField } from "@/components/screens/generate-code-field";

<GenerateCodeField fields={fields} />;

GenerateCodeParts

Exports split code blocks (schema, components, RHF integration) for copy/paste.

import { GenerateCodeParts } from "@/components/screens/generate-code-parts";

<GenerateCodeParts fields={fields} />;

JSON Schema generator

Create JSON Schema directly from the field list (same structure the builder emits).

import { generateJsonSchema } from "@/lib/json-schema-generator";

const schema = generateJsonSchema(fields);
console.log(schema);

Layout & Columns

ColumnManager

Utility to arrange fields in columns for more complex layouts.

import { ColumnManager } from "@/components/editor/column-manager";

<ColumnManager fields={fields} onChange={setFields} />;

Base UI (used inside the builder)

The Form Builder uses the shared UI kit in src/components/ui (Button, Input, Card, Tabs, Dialog, Select, DateTimePicker, etc.). You can use these primitives directly if you need to extend the generated forms, but the builder components above already assemble them for you.

Next step

Review Field Types to see every field the Form Builder can render.

Components

On this page