diff --git a/packages/react/package.json b/packages/react/package.json
index 029d4c3ac..75e314488 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -21,7 +21,9 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@object-ui/core": "workspace:*"
+    "@object-ui/core": "workspace:*",
+    "@objectstack/spec": "^0.3.2",
+    "react-hook-form": "^7.71.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
diff --git a/packages/react/src/components/form/FieldFactory.tsx b/packages/react/src/components/form/FieldFactory.tsx
new file mode 100644
index 000000000..10003262f
--- /dev/null
+++ b/packages/react/src/components/form/FieldFactory.tsx
@@ -0,0 +1,231 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { UseFormReturn } from 'react-hook-form';
+import type { FormField } from '@objectstack/spec/ui';
+
+export interface FieldFactoryProps {
+  /**
+   * Field configuration from FormFieldSchema
+   */
+  field: FormField;
+  /**
+   * React Hook Form methods
+   */
+  methods: UseFormReturn<any>;
+  /**
+   * Whether the field is disabled
+   */
+  disabled?: boolean;
+}
+
+/**
+ * FieldFactory component that renders different input types based on
+ * the widget property or field type
+ */
+export const FieldFactory: React.FC<FieldFactoryProps> = ({
+  field,
+  methods,
+  disabled = false,
+}) => {
+  const { register, formState: { errors } } = methods;
+  
+  // Determine the widget type
+  const widgetType = field.widget || 'text';
+  const fieldName = field.field;
+  const error = errors[fieldName];
+
+  // Handle conditional visibility
+  // Note: visibleOn expression evaluation is not yet implemented
+  // Fields are always visible unless explicitly hidden
+  // Skip if explicitly hidden
+  if (field.hidden) {
+    return null;
+  }
+
+  // Common field wrapper
+  const renderField = (input: React.ReactNode) => (
+    <div className="space-y-2">
+      {field.label && (
+        <label htmlFor={fieldName} className="block text-sm font-medium text-gray-700">
+          {field.label}
+          {field.required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+      )}
+      {input}
+      {field.helpText && (
+        <p className="text-sm text-gray-500">{field.helpText}</p>
+      )}
+      {error && (
+        <p className="text-sm text-red-600">{error.message as string}</p>
+      )}
+    </div>
+  );
+
+  // Render based on widget type
+  switch (widgetType.toLowerCase()) {
+    case 'text':
+    case 'string':
+    case 'email':
+    case 'password':
+    case 'url':
+    case 'tel':
+      return renderField(
+        <input
+          id={fieldName}
+          type={widgetType === 'string' ? 'text' : widgetType}
+          placeholder={field.placeholder}
+          disabled={disabled}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
+          {...register(fieldName, {
+            required: field.required ? `${field.label || fieldName} is required` : false,
+          })}
+        />
+      );
+
+    case 'number':
+    case 'integer':
+    case 'float':
+      return renderField(
+        <input
+          id={fieldName}
+          type="number"
+          placeholder={field.placeholder}
+          disabled={disabled}
+          step={widgetType === 'integer' ? '1' : 'any'}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
+          {...register(fieldName, {
+            required: field.required ? `${field.label || fieldName} is required` : false,
+            valueAsNumber: true,
+          })}
+        />
+      );
+
+    case 'checkbox':
+    case 'boolean':
+      return (
+        <div className="flex items-start space-x-2">
+          <input
+            id={fieldName}
+            type="checkbox"
+            disabled={disabled}
+            className="mt-1 h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
+            {...register(fieldName)}
+          />
+          <div className="flex-1">
+            {field.label && (
+              <label htmlFor={fieldName} className="text-sm font-medium text-gray-700">
+                {field.label}
+                {field.required && <span className="text-red-500 ml-1">*</span>}
+              </label>
+            )}
+            {field.helpText && (
+              <p className="text-sm text-gray-500 mt-1">{field.helpText}</p>
+            )}
+            {error && (
+              <p className="text-sm text-red-600 mt-1">{error.message as string}</p>
+            )}
+          </div>
+        </div>
+      );
+
+    case 'textarea':
+      return renderField(
+        <textarea
+          id={fieldName}
+          placeholder={field.placeholder}
+          disabled={disabled}
+          rows={4}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
+          {...register(fieldName, {
+            required: field.required ? `${field.label || fieldName} is required` : false,
+          })}
+        />
+      );
+
+    case 'select':
+    case 'dropdown':
+      // Note: This is a basic implementation without options support
+      // To properly support select fields, options would need to be passed
+      // via an extended FormField schema or external configuration
+      return renderField(
+        <select
+          id={fieldName}
+          disabled={disabled}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
+          {...register(fieldName, {
+            required: field.required ? `${field.label || fieldName} is required` : false,
+          })}
+        >
+          <option value="">{field.placeholder || 'Select an option'}</option>
+          {/* TODO: Add options support - requires extending FormField schema or external options provider */}
+        </select>
+      );
+
+    case 'date':
+      return renderField(
+        <input
+          id={fieldName}
+          type="date"
+          placeholder={field.placeholder}
+          disabled={disabled}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
+          {...register(fieldName, {
+            required: field.required ? `${field.label || fieldName} is required` : false,
+          })}
+        />
+      );
+
+    case 'datetime':
+    case 'datetime-local':
+      return renderField(
+        <input
+          id={fieldName}
+          type="datetime-local"
+          placeholder={field.placeholder}
+          disabled={disabled}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
+          {...register(fieldName, {
+            required: field.required ? `${field.label || fieldName} is required` : false,
+          })}
+        />
+      );
+
+    case 'time':
+      return renderField(
+        <input
+          id={fieldName}
+          type="time"
+          placeholder={field.placeholder}
+          disabled={disabled}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
+          {...register(fieldName, {
+            required: field.required ? `${field.label || fieldName} is required` : false,
+          })}
+        />
+      );
+
+    default:
+      // Default to text input
+      return renderField(
+        <input
+          id={fieldName}
+          type="text"
+          placeholder={field.placeholder}
+          disabled={disabled}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
+          {...register(fieldName, {
+            required: field.required ? `${field.label || fieldName} is required` : false,
+          })}
+        />
+      );
+  }
+};
+
+FieldFactory.displayName = 'FieldFactory';
diff --git a/packages/react/src/components/form/FormRenderer.test.tsx b/packages/react/src/components/form/FormRenderer.test.tsx
new file mode 100644
index 000000000..d4a9435ed
--- /dev/null
+++ b/packages/react/src/components/form/FormRenderer.test.tsx
@@ -0,0 +1,276 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { FormRenderer } from './FormRenderer';
+import type { FormView } from '@objectstack/spec/ui';
+
+describe('FormRenderer', () => {
+  it('should render a simple form with text fields', () => {
+    const schema: FormView = {
+      type: 'simple',
+      sections: [
+        {
+          label: 'Personal Information',
+          collapsible: false,
+          collapsed: false,
+          columns: 2,
+          fields: [
+            {
+              field: 'firstName',
+              label: 'First Name',
+              required: true,
+              widget: 'text',
+            },
+            {
+              field: 'lastName',
+              label: 'Last Name',
+              required: true,
+              widget: 'text',
+            },
+          ],
+        },
+      ],
+    };
+
+    const { container } = render(<FormRenderer schema={schema} />);
+    
+    expect(screen.getByText('Personal Information')).toBeInTheDocument();
+    expect(screen.getByLabelText(/First Name/)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Last Name/)).toBeInTheDocument();
+  });
+
+  it('should render form with initial data', () => {
+    const schema: FormView = {
+      type: 'simple',
+      sections: [
+        {
+          label: 'User Details',
+          collapsible: false,
+          collapsed: false,
+          columns: 1,
+          fields: [
+            {
+              field: 'username',
+              label: 'Username',
+              widget: 'text',
+            },
+          ],
+        },
+      ],
+    };
+
+    const data = { username: 'john_doe' };
+
+    render(<FormRenderer schema={schema} data={data} />);
+    
+    const input = screen.getByLabelText('Username') as HTMLInputElement;
+    expect(input.value).toBe('john_doe');
+  });
+
+  it('should handle multi-column layout', () => {
+    const schema: FormView = {
+      type: 'simple',
+      sections: [
+        {
+          label: 'Contact',
+          collapsible: false,
+          collapsed: false,
+          columns: 3,
+          fields: [
+            {
+              field: 'email',
+              label: 'Email',
+              widget: 'email',
+            },
+            {
+              field: 'phone',
+              label: 'Phone',
+              widget: 'tel',
+            },
+            {
+              field: 'address',
+              label: 'Address',
+              widget: 'textarea',
+              colSpan: 3,
+            },
+          ],
+        },
+      ],
+    };
+
+    render(<FormRenderer schema={schema} />);
+    
+    expect(screen.getByLabelText('Email')).toBeInTheDocument();
+    expect(screen.getByLabelText('Phone')).toBeInTheDocument();
+    expect(screen.getByLabelText('Address')).toBeInTheDocument();
+  });
+
+  it('should hide fields marked as hidden', () => {
+    const schema: FormView = {
+      type: 'simple',
+      sections: [
+        {
+          label: 'Form',
+          collapsible: false,
+          collapsed: false,
+          columns: 1,
+          fields: [
+            {
+              field: 'visible',
+              label: 'Visible Field',
+              widget: 'text',
+            },
+            {
+              field: 'hidden',
+              label: 'Hidden Field',
+              widget: 'text',
+              hidden: true,
+            },
+          ],
+        },
+      ],
+    };
+
+    render(<FormRenderer schema={schema} />);
+    
+    expect(screen.getByLabelText('Visible Field')).toBeInTheDocument();
+    expect(screen.queryByLabelText('Hidden Field')).not.toBeInTheDocument();
+  });
+
+  it('should support legacy string field format', () => {
+    const schema: FormView = {
+      type: 'simple',
+      sections: [
+        {
+          label: 'Legacy Form',
+          collapsible: false,
+          collapsed: false,
+          columns: 1,
+          fields: ['username', 'email'],
+        },
+      ],
+    };
+
+    const { container } = render(<FormRenderer schema={schema} />);
+    
+    // String fields should still render as inputs
+    const inputs = container.querySelectorAll('input[type="text"]');
+    expect(inputs.length).toBeGreaterThan(0);
+  });
+
+  it('should handle number fields', () => {
+    const schema: FormView = {
+      type: 'simple',
+      sections: [
+        {
+          label: 'Numbers',
+          collapsible: false,
+          collapsed: false,
+          columns: 1,
+          fields: [
+            {
+              field: 'age',
+              label: 'Age',
+              widget: 'number',
+              required: true,
+            },
+          ],
+        },
+      ],
+    };
+
+    render(<FormRenderer schema={schema} />);
+    
+    const input = screen.getByLabelText(/Age/) as HTMLInputElement;
+    expect(input.type).toBe('number');
+  });
+
+  it('should handle checkbox fields', () => {
+    const schema: FormView = {
+      type: 'simple',
+      sections: [
+        {
+          label: 'Preferences',
+          collapsible: false,
+          collapsed: false,
+          columns: 1,
+          fields: [
+            {
+              field: 'subscribe',
+              label: 'Subscribe to newsletter',
+              widget: 'checkbox',
+            },
+          ],
+        },
+      ],
+    };
+
+    render(<FormRenderer schema={schema} />);
+    
+    const checkbox = screen.getByLabelText('Subscribe to newsletter') as HTMLInputElement;
+    expect(checkbox.type).toBe('checkbox');
+  });
+
+  it('should render help text when provided', () => {
+    const schema: FormView = {
+      type: 'simple',
+      sections: [
+        {
+          label: 'Help Text',
+          collapsible: false,
+          collapsed: false,
+          columns: 1,
+          fields: [
+            {
+              field: 'password',
+              label: 'Password',
+              widget: 'password',
+              helpText: 'Must be at least 8 characters',
+            },
+          ],
+        },
+      ],
+    };
+
+    render(<FormRenderer schema={schema} />);
+    
+    expect(screen.getByText('Must be at least 8 characters')).toBeInTheDocument();
+  });
+
+  it('should mark required fields with asterisk', () => {
+    const schema: FormView = {
+      type: 'simple',
+      sections: [
+        {
+          label: 'Required',
+          collapsible: false,
+          collapsed: false,
+          columns: 1,
+          fields: [
+            {
+              field: 'name',
+              label: 'Name',
+              widget: 'text',
+              required: true,
+            },
+          ],
+        },
+      ],
+    };
+
+    const { container } = render(<FormRenderer schema={schema} />);
+    
+    // Check for asterisk
+    const asterisk = container.querySelector('.text-red-500');
+    expect(asterisk).toBeInTheDocument();
+    expect(asterisk?.textContent).toContain('*');
+  });
+});
diff --git a/packages/react/src/components/form/FormRenderer.tsx b/packages/react/src/components/form/FormRenderer.tsx
new file mode 100644
index 000000000..d84a0cbf2
--- /dev/null
+++ b/packages/react/src/components/form/FormRenderer.tsx
@@ -0,0 +1,209 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { useForm, FormProvider, UseFormReturn } from 'react-hook-form';
+import type { FormView, FormSection } from '@objectstack/spec/ui';
+import { FieldFactory } from './FieldFactory';
+
+export interface FormRendererProps {
+  /**
+   * The FormView schema from @objectstack/spec
+   */
+  schema: FormView;
+  /**
+   * Initial form data
+   */
+  data?: Record<string, any>;
+  /**
+   * Form submission handler
+   */
+  onSubmit?: (data: Record<string, any>) => void | Promise<void>;
+  /**
+   * Form change handler
+   */
+  onChange?: (data: Record<string, any>) => void;
+  /**
+   * Custom class name for the form
+   */
+  className?: string;
+  /**
+   * Whether the form is disabled
+   */
+  disabled?: boolean;
+}
+
+/**
+ * FormRenderer component that renders forms based on FormViewSchema
+ * from @objectstack/spec
+ */
+export const FormRenderer: React.FC<FormRendererProps> = ({
+  schema,
+  data = {},
+  onSubmit,
+  onChange,
+  className = '',
+  disabled = false,
+}) => {
+  // Create form methods with react-hook-form
+  const methods = useForm({
+    defaultValues: data,
+    mode: 'onChange',
+  });
+
+  const { handleSubmit, watch } = methods;
+
+  // Watch for form changes
+  React.useEffect(() => {
+    if (onChange) {
+      const subscription = watch((value) => {
+        onChange(value as Record<string, any>);
+      });
+      return () => subscription.unsubscribe();
+    }
+  }, [watch, onChange]);
+
+  // Handle form submission
+  const onSubmitForm = handleSubmit(async (formData) => {
+    if (onSubmit) {
+      await onSubmit(formData);
+    }
+  });
+
+  // Render sections or fields
+  const renderContent = () => {
+    if (!schema.sections || schema.sections.length === 0) {
+      return null;
+    }
+
+    return (
+      <div className="space-y-6">
+        {schema.sections.map((section, index) => (
+          <FormSectionRenderer
+            key={index}
+            section={section}
+            methods={methods}
+            disabled={disabled}
+          />
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={onSubmitForm} className={`space-y-6 ${className}`}>
+        {renderContent()}
+        
+        {/* Submit button - optional, can be customized */}
+        <div className="flex justify-end gap-2">
+          <button
+            type="submit"
+            disabled={disabled}
+            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            Submit
+          </button>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
+
+interface FormSectionRendererProps {
+  section: FormSection;
+  methods: UseFormReturn<any>;
+  disabled?: boolean;
+}
+
+// Grid column classes for different column counts
+const GRID_COLS = {
+  1: 'grid-cols-1',
+  2: 'grid-cols-1 md:grid-cols-2',
+  3: 'grid-cols-1 md:grid-cols-3',
+  4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
+} as const;
+
+// Column span classes
+const COL_SPAN = {
+  1: 'col-span-1',
+  2: 'col-span-2',
+  3: 'col-span-3',
+  4: 'col-span-4',
+} as const;
+
+/**
+ * Renders a form section with grid layout
+ */
+const FormSectionRenderer: React.FC<FormSectionRendererProps> = ({
+  section,
+  methods,
+  disabled = false,
+}) => {
+  const [isCollapsed, setIsCollapsed] = React.useState(section.collapsed || false);
+
+  // Determine grid columns based on section.columns
+  const gridCols = GRID_COLS[section.columns || 1];
+
+  const handleToggleCollapse = () => {
+    if (section.collapsible) {
+      setIsCollapsed(!isCollapsed);
+    }
+  };
+
+  return (
+    <div className="border rounded-lg p-4">
+      {section.label && (
+        <div
+          className={`flex items-center justify-between mb-4 ${
+            section.collapsible ? 'cursor-pointer' : ''
+          }`}
+          onClick={handleToggleCollapse}
+        >
+          <h3 className="text-lg font-semibold">{section.label}</h3>
+          {section.collapsible && (
+            <span className="text-sm text-gray-500">
+              {isCollapsed ? '▶' : '▼'}
+            </span>
+          )}
+        </div>
+      )}
+
+      {!isCollapsed && (
+        <div className={`grid ${gridCols} gap-4`}>
+          {section.fields.map((field, index) => {
+            // Handle both string fields (legacy) and FormFieldSchema objects
+            const fieldName = typeof field === 'string' ? field : field.field;
+            const fieldConfig = typeof field === 'string' ? { field: fieldName } : field;
+
+            // Skip hidden fields
+            if (fieldConfig.hidden) {
+              return null;
+            }
+
+            // Calculate colSpan for grid
+            const colSpan = fieldConfig.colSpan || 1;
+            const colSpanClass = COL_SPAN[Math.min(colSpan, section.columns || 1) as keyof typeof COL_SPAN];
+
+            return (
+              <div key={`${fieldName}-${index}`} className={colSpanClass}>
+                <FieldFactory
+                  field={fieldConfig}
+                  methods={methods}
+                  disabled={disabled || fieldConfig.readonly}
+                />
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+FormRenderer.displayName = 'FormRenderer';
diff --git a/packages/react/src/components/form/README.md b/packages/react/src/components/form/README.md
new file mode 100644
index 000000000..c4fbe158c
--- /dev/null
+++ b/packages/react/src/components/form/README.md
@@ -0,0 +1,278 @@
+# FormRenderer Component
+
+The `FormRenderer` component is a React component that renders forms based on the `FormView` schema from `@objectstack/spec`. It provides a flexible and powerful way to create forms with minimal code.
+
+## Features
+
+- ✅ **Schema-driven**: Define forms using JSON schema from `@objectstack/spec`
+- ✅ **Multi-column layouts**: Support for 1-4 column grid layouts
+- ✅ **Collapsible sections**: Organize forms with collapsible sections
+- ✅ **Form state management**: Built-in state management using `react-hook-form`
+- ✅ **Multiple field types**: Text, Number, Checkbox, Textarea, Select, Date, DateTime, Time
+- ⏳ **Conditional fields**: Show/hide fields based on conditions (planned)
+- ⏳ **Schema validation**: Zod validation support (planned)
+- ✅ **Column spanning**: Fields can span multiple columns
+- ✅ **Help text**: Display helpful descriptions for fields
+- ✅ **Required fields**: Mark fields as required with validation
+
+## Installation
+
+The FormRenderer component is part of the `@object-ui/react` package:
+
+```bash
+npm install @object-ui/react @objectstack/spec react-hook-form
+```
+
+Or with pnpm:
+
+```bash
+pnpm add @object-ui/react @objectstack/spec react-hook-form
+```
+
+## Basic Usage
+
+```tsx
+import { FormRenderer } from '@object-ui/react';
+import type { FormView } from '@objectstack/spec/ui';
+
+const schema: FormView = {
+  type: 'simple',
+  sections: [
+    {
+      label: 'Contact Information',
+      collapsible: false,
+      collapsed: false,
+      columns: 2,
+      fields: [
+        {
+          field: 'firstName',
+          label: 'First Name',
+          required: true,
+          widget: 'text',
+        },
+        {
+          field: 'lastName',
+          label: 'Last Name',
+          required: true,
+          widget: 'text',
+        },
+        {
+          field: 'email',
+          label: 'Email',
+          required: true,
+          widget: 'email',
+          helpText: 'We will never share your email',
+        },
+      ],
+    },
+  ],
+};
+
+function MyForm() {
+  const handleSubmit = (data: Record<string, any>) => {
+    console.log('Form submitted:', data);
+  };
+
+  return (
+    <FormRenderer
+      schema={schema}
+      onSubmit={handleSubmit}
+    />
+  );
+}
+```
+
+## Props
+
+### FormRendererProps
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `schema` | `FormView` | Yes | The FormView schema from @objectstack/spec |
+| `data` | `Record<string, any>` | No | Initial form data |
+| `onSubmit` | `(data: Record<string, any>) => void \| Promise<void>` | No | Form submission handler |
+| `onChange` | `(data: Record<string, any>) => void` | No | Form change handler |
+| `className` | `string` | No | Custom CSS class for the form |
+| `disabled` | `boolean` | No | Whether the form is disabled |
+
+## Schema Structure
+
+### FormView
+
+The main schema that defines the entire form.
+
+```typescript
+interface FormView {
+  type: 'simple' | 'tabbed' | 'wizard';
+  sections?: FormSection[];
+  data?: DataSource; // Optional data source configuration
+}
+```
+
+### FormSection
+
+Defines a section of the form with its own layout.
+
+```typescript
+interface FormSection {
+  label?: string;
+  collapsible?: boolean;
+  collapsed?: boolean;
+  columns: 1 | 2 | 3 | 4;
+  fields: (string | FormField)[];
+}
+```
+
+### FormField
+
+Defines individual form fields.
+
+```typescript
+interface FormField {
+  field: string; // Field name
+  label?: string;
+  placeholder?: string;
+  helpText?: string;
+  readonly?: boolean;
+  required?: boolean;
+  hidden?: boolean;
+  colSpan?: number; // Number of columns to span (1-4)
+  widget?: string; // Widget type (text, number, checkbox, etc.)
+  dependsOn?: string; // Field dependency
+  visibleOn?: string; // Visibility condition
+}
+```
+
+## Supported Widget Types
+
+The `FieldFactory` component supports the following widget types:
+
+- `text`, `string` - Text input
+- `email` - Email input
+- `password` - Password input
+- `url` - URL input
+- `tel` - Telephone input
+- `number`, `integer`, `float` - Number input
+- `checkbox`, `boolean` - Checkbox
+- `textarea` - Textarea
+- `select`, `dropdown` - Select dropdown (basic implementation, options support planned)
+- `date` - Date picker
+- `datetime`, `datetime-local` - DateTime picker
+- `time` - Time picker
+
+## Known Limitations
+
+### Version 0.1.0
+
+- **Conditional Visibility**: The `visibleOn` and `dependsOn` properties are not yet implemented. Fields are visible by default unless explicitly marked as `hidden`.
+- **Select Options**: The select widget is a basic implementation without options support. Options will need to be passed via an extended schema or external configuration in a future version.
+- **Validation**: Currently only basic required field validation is supported via react-hook-form. Advanced Zod schema validation is planned for future releases.
+
+These features are planned for future releases.
+
+## Examples
+
+### Multi-Section Form
+
+```tsx
+const schema: FormView = {
+  type: 'simple',
+  sections: [
+    {
+      label: 'Personal Information',
+      collapsible: true,
+      collapsed: false,
+      columns: 2,
+      fields: [
+        { field: 'firstName', label: 'First Name', required: true, widget: 'text' },
+        { field: 'lastName', label: 'Last Name', required: true, widget: 'text' },
+        { field: 'email', label: 'Email', required: true, widget: 'email' },
+        { field: 'phone', label: 'Phone', widget: 'tel' },
+      ],
+    },
+    {
+      label: 'Preferences',
+      collapsible: true,
+      collapsed: true,
+      columns: 1,
+      fields: [
+        {
+          field: 'newsletter',
+          label: 'Subscribe to newsletter',
+          widget: 'checkbox',
+          helpText: 'Receive updates about our products',
+        },
+      ],
+    },
+  ],
+};
+```
+
+### Form with Initial Data
+
+```tsx
+const initialData = {
+  firstName: 'John',
+  lastName: 'Doe',
+  email: 'john@example.com',
+  newsletter: true,
+};
+
+<FormRenderer
+  schema={schema}
+  data={initialData}
+  onSubmit={handleSubmit}
+/>
+```
+
+### Form with Column Spanning
+
+```tsx
+const schema: FormView = {
+  type: 'simple',
+  sections: [
+    {
+      label: 'Contact',
+      columns: 2,
+      fields: [
+        { field: 'name', label: 'Name', widget: 'text' },
+        { field: 'email', label: 'Email', widget: 'email' },
+        {
+          field: 'message',
+          label: 'Message',
+          widget: 'textarea',
+          colSpan: 2, // Spans both columns
+        },
+      ],
+    },
+  ],
+};
+```
+
+## Architecture
+
+The FormRenderer is built on top of:
+
+- **react-hook-form**: For form state management and validation
+- **@objectstack/spec**: For schema definitions
+
+## Customization
+
+You can customize the appearance of the form by:
+
+1. Using the `className` prop on the FormRenderer
+2. Using Tailwind CSS classes in your application
+3. Extending the FieldFactory component for custom widgets
+
+## Related Components
+
+- `FieldFactory`: Renders individual form fields based on widget type
+- `SchemaRenderer`: General-purpose schema renderer for ObjectUI
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please read the [CONTRIBUTING.md](../../CONTRIBUTING.md) for details.
diff --git a/packages/react/src/components/form/index.ts b/packages/react/src/components/form/index.ts
new file mode 100644
index 000000000..3855a32d2
--- /dev/null
+++ b/packages/react/src/components/form/index.ts
@@ -0,0 +1,12 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { FormRenderer } from './FormRenderer';
+export type { FormRendererProps } from './FormRenderer';
+export { FieldFactory } from './FieldFactory';
+export type { FieldFactoryProps } from './FieldFactory';
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 950556206..87ca7ae0b 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -9,4 +9,5 @@
 export * from './SchemaRenderer';
 export * from './hooks'; // will be empty for now
 export * from './context'; // will be empty for now
+export * from './components/form';
 
diff --git a/packages/types/examples/form-renderer-example.ts b/packages/types/examples/form-renderer-example.ts
new file mode 100644
index 000000000..acb7530b6
--- /dev/null
+++ b/packages/types/examples/form-renderer-example.ts
@@ -0,0 +1,189 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Example: FormRenderer Usage
+ * 
+ * This example demonstrates how to use the FormRenderer component
+ * with @objectstack/spec FormView schema.
+ */
+
+import type { FormView } from '@objectstack/spec/ui';
+
+/**
+ * Simple contact form example
+ */
+export const contactFormSchema: FormView = {
+  type: 'simple',
+  sections: [
+    {
+      label: 'Contact Information',
+      collapsible: false,
+      collapsed: false,
+      columns: 2,
+      fields: [
+        {
+          field: 'firstName',
+          label: 'First Name',
+          placeholder: 'John',
+          required: true,
+          widget: 'text',
+        },
+        {
+          field: 'lastName',
+          label: 'Last Name',
+          placeholder: 'Doe',
+          required: true,
+          widget: 'text',
+        },
+        {
+          field: 'email',
+          label: 'Email Address',
+          placeholder: 'john.doe@example.com',
+          required: true,
+          widget: 'email',
+          helpText: 'We will never share your email',
+        },
+        {
+          field: 'phone',
+          label: 'Phone Number',
+          placeholder: '+1 (555) 123-4567',
+          widget: 'tel',
+        },
+        {
+          field: 'message',
+          label: 'Message',
+          placeholder: 'Your message here...',
+          required: true,
+          widget: 'textarea',
+          colSpan: 2, // Span across both columns
+        },
+        {
+          field: 'newsletter',
+          label: 'Subscribe to newsletter',
+          widget: 'checkbox',
+          helpText: 'Get updates about our products',
+        },
+      ],
+    },
+  ],
+};
+
+/**
+ * User profile form with multiple sections
+ */
+export const userProfileSchema: FormView = {
+  type: 'simple',
+  sections: [
+    {
+      label: 'Personal Details',
+      collapsible: true,
+      collapsed: false,
+      columns: 2,
+      fields: [
+        {
+          field: 'username',
+          label: 'Username',
+          placeholder: 'johndoe',
+          required: true,
+          widget: 'text',
+        },
+        {
+          field: 'age',
+          label: 'Age',
+          placeholder: '25',
+          widget: 'number',
+        },
+        {
+          field: 'birthdate',
+          label: 'Date of Birth',
+          widget: 'date',
+        },
+        {
+          field: 'bio',
+          label: 'Biography',
+          placeholder: 'Tell us about yourself...',
+          widget: 'textarea',
+          colSpan: 2,
+        },
+      ],
+    },
+    {
+      label: 'Account Settings',
+      collapsible: true,
+      collapsed: true,
+      columns: 1,
+      fields: [
+        {
+          field: 'emailNotifications',
+          label: 'Email Notifications',
+          widget: 'checkbox',
+          helpText: 'Receive notifications via email',
+        },
+        {
+          field: 'twoFactorAuth',
+          label: 'Enable Two-Factor Authentication',
+          widget: 'checkbox',
+          helpText: 'Add an extra layer of security',
+        },
+      ],
+    },
+  ],
+};
+
+/**
+ * Example usage in a React component:
+ * 
+ * ```tsx
+ * import { FormRenderer } from '@object-ui/react';
+ * import { contactFormSchema } from './examples/form-renderer-example';
+ * 
+ * function ContactPage() {
+ *   const handleSubmit = (data: Record<string, any>) => {
+ *     console.log('Form submitted:', data);
+ *     // Handle form submission
+ *   };
+ * 
+ *   const handleChange = (data: Record<string, any>) => {
+ *     console.log('Form changed:', data);
+ *     // Handle form changes
+ *   };
+ * 
+ *   return (
+ *     <div className="container mx-auto p-4">
+ *       <h1>Contact Us</h1>
+ *       <FormRenderer
+ *         schema={contactFormSchema}
+ *         onSubmit={handleSubmit}
+ *         onChange={handleChange}
+ *       />
+ *     </div>
+ *   );
+ * }
+ * ```
+ * 
+ * With initial data:
+ * ```tsx
+ * function EditProfilePage() {
+ *   const initialData = {
+ *     username: 'johndoe',
+ *     age: 25,
+ *     bio: 'Software developer',
+ *     emailNotifications: true,
+ *   };
+ * 
+ *   return (
+ *     <FormRenderer
+ *       schema={userProfileSchema}
+ *       data={initialData}
+ *       onSubmit={(data) => console.log('Updated:', data)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ef1387b9d..ce6f14760 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -730,12 +730,18 @@ importers:
       '@object-ui/core':
         specifier: workspace:*
         version: link:../core
+      '@objectstack/spec':
+        specifier: ^0.3.2
+        version: 0.3.2
       react:
         specifier: 19.2.3
         version: 19.2.3
       react-dom:
         specifier: 19.2.3
         version: 19.2.3(react@19.2.3)
+      react-hook-form:
+        specifier: ^7.71.1
+        version: 7.71.1(react@19.2.3)
     devDependencies:
       '@types/react':
         specifier: 19.0.6