diff --git a/packages/components/package.json b/packages/components/package.json
index f0f14a07a..9131f689d 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -25,6 +25,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@object-ui/core": "workspace:*",
     "@object-ui/react": "workspace:*",
+    "@object-ui/types": "workspace:*",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-aspect-ratio": "^1.1.8",
diff --git a/packages/components/src/renderers/basic/div.tsx b/packages/components/src/renderers/basic/div.tsx
index d0b1ee00e..8b5c96cc1 100644
--- a/packages/components/src/renderers/basic/div.tsx
+++ b/packages/components/src/renderers/basic/div.tsx
@@ -1,8 +1,9 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { DivSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('div', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: DivSchema; className?: string; [key: string]: any }) => (
     <div className={className} {...props}>
       {renderChildren(schema.body)}
     </div>
diff --git a/packages/components/src/renderers/basic/icon.tsx b/packages/components/src/renderers/basic/icon.tsx
index 1f3c83e68..5e4dfd540 100644
--- a/packages/components/src/renderers/basic/icon.tsx
+++ b/packages/components/src/renderers/basic/icon.tsx
@@ -1,8 +1,9 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { IconSchema } from '@object-ui/types';
 import { icons } from 'lucide-react';
 
 ComponentRegistry.register('icon',
-  ({ schema, className, ...props }) => {
+  ({ schema, className, ...props }: { schema: IconSchema; className?: string; [key: string]: any }) => {
     const Icon = (icons as any)[schema.name || schema.icon];
     if (!Icon) return null;
     return <Icon className={className} {...props} />;
diff --git a/packages/components/src/renderers/basic/image.tsx b/packages/components/src/renderers/basic/image.tsx
index c7b739674..01b277aac 100644
--- a/packages/components/src/renderers/basic/image.tsx
+++ b/packages/components/src/renderers/basic/image.tsx
@@ -1,7 +1,8 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { ImageSchema } from '@object-ui/types';
 
 ComponentRegistry.register('image',
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: ImageSchema; className?: string; [key: string]: any }) => (
     <img
       src={schema.src}
       alt={schema.alt || ''}
diff --git a/packages/components/src/renderers/basic/separator.tsx b/packages/components/src/renderers/basic/separator.tsx
index d01c6d601..a5b54cde0 100644
--- a/packages/components/src/renderers/basic/separator.tsx
+++ b/packages/components/src/renderers/basic/separator.tsx
@@ -1,9 +1,10 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { SeparatorSchema } from '@object-ui/types';
 import { Separator } from '@/ui';
 
 ComponentRegistry.register('separator', 
-  ({ className, ...props }) => (
-    <Separator className={className} {...props} />
+  ({ schema, className, ...props }: { schema: SeparatorSchema; className?: string; [key: string]: any }) => (
+    <Separator orientation={schema.orientation} className={className} {...props} />
   ),
   {
     label: 'Separator',
diff --git a/packages/components/src/renderers/basic/span.tsx b/packages/components/src/renderers/basic/span.tsx
index 64f54fbeb..5aff830b2 100644
--- a/packages/components/src/renderers/basic/span.tsx
+++ b/packages/components/src/renderers/basic/span.tsx
@@ -1,8 +1,9 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { SpanSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('span', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: SpanSchema; className?: string; [key: string]: any }) => (
     <span className={className} {...props}>
       {renderChildren(schema.body)}
     </span>
diff --git a/packages/components/src/renderers/basic/text.tsx b/packages/components/src/renderers/basic/text.tsx
index 8063db362..236f84c93 100644
--- a/packages/components/src/renderers/basic/text.tsx
+++ b/packages/components/src/renderers/basic/text.tsx
@@ -1,7 +1,8 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { TextSchema } from '@object-ui/types';
 
 ComponentRegistry.register('text', 
-  ({ schema }) => (
+  ({ schema }: { schema: TextSchema }) => (
     <>{schema.content}</>
   ),
   {
diff --git a/packages/components/src/renderers/complex/calendar-view.tsx b/packages/components/src/renderers/complex/calendar-view.tsx
index b620c9956..b8acf7bdd 100644
--- a/packages/components/src/renderers/complex/calendar-view.tsx
+++ b/packages/components/src/renderers/complex/calendar-view.tsx
@@ -1,10 +1,11 @@
 import { ComponentRegistry } from '@object-ui/core';
-import { CalendarView, type CalendarEvent } from '@/ui';
+import type { CalendarViewSchema, CalendarEvent } from '@object-ui/types';
+import { CalendarView } from '@/ui';
 import React from 'react';
 
 // Calendar View Renderer - Airtable-style calendar for displaying records as events
 ComponentRegistry.register('calendar-view', 
-  ({ schema, className, onAction, ...props }) => {
+  ({ schema, className, onAction, ...props }: { schema: CalendarViewSchema; className?: string; onAction?: (action: any) => void; [key: string]: any }) => {
     // Transform schema data to CalendarEvent format
     const events: CalendarEvent[] = React.useMemo(() => {
       if (!schema.data || !Array.isArray(schema.data)) return [];
diff --git a/packages/components/src/renderers/complex/carousel.tsx b/packages/components/src/renderers/complex/carousel.tsx
index 7947b6dc7..09942122b 100644
--- a/packages/components/src/renderers/complex/carousel.tsx
+++ b/packages/components/src/renderers/complex/carousel.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { CarouselSchema } from '@object-ui/types';
 import { 
   Carousel, 
   CarouselContent, 
@@ -9,7 +10,7 @@ import {
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('carousel', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: CarouselSchema; className?: string; [key: string]: any }) => (
     <Carousel 
       opts={schema.opts} 
       orientation={schema.orientation || 'horizontal'}
diff --git a/packages/components/src/renderers/complex/chatbot.tsx b/packages/components/src/renderers/complex/chatbot.tsx
index cab9e847e..5709ac931 100644
--- a/packages/components/src/renderers/complex/chatbot.tsx
+++ b/packages/components/src/renderers/complex/chatbot.tsx
@@ -1,5 +1,6 @@
 import { ComponentRegistry } from '@object-ui/core';
-import { Chatbot, type ChatMessage } from '@/ui';
+import type { ChatbotSchema, ChatMessage } from '@object-ui/types';
+import { Chatbot } from '@/ui';
 import { useState } from 'react';
 
 /**
diff --git a/packages/components/src/renderers/complex/data-table.tsx b/packages/components/src/renderers/complex/data-table.tsx
index 0c4c6d58f..0e1e65497 100644
--- a/packages/components/src/renderers/complex/data-table.tsx
+++ b/packages/components/src/renderers/complex/data-table.tsx
@@ -1,6 +1,7 @@
 // Enterprise-level DataTable Component (Airtable-like)
 import React, { useState, useMemo, useRef, useEffect } from 'react';
 import { ComponentRegistry } from '@object-ui/core';
+import type { DataTableSchema } from '@object-ui/types';
 import { 
   Table, 
   TableHeader, 
@@ -38,71 +39,6 @@ import {
 
 type SortDirection = 'asc' | 'desc' | null;
 
-/**
- * Column configuration for the data table.
- * @interface Column
- */
-interface Column {
-  /** Display name of the column */
-  header: string;
-  /** Key to access the data field in each row object */
-  accessorKey: string;
-  /** Optional CSS classes for the column header */
-  className?: string;
-  /** Optional CSS classes for the column cells */
-  cellClassName?: string;
-  /** Width of the column (e.g., '80px' or 80) */
-  width?: string | number;
-  /** Whether sorting is enabled for this column (default: true) */
-  sortable?: boolean;
-  /** Whether filtering is enabled for this column (default: true) */
-  filterable?: boolean;
-  /** Whether column resizing is enabled (default: true) */
-  resizable?: boolean;
-}
-
-/**
- * Schema definition for the enterprise data table component.
- * Supports sorting, pagination, search, row selection, CSV export, and row actions.
- * @interface DataTableSchema
- */
-interface DataTableSchema {
-  /** Optional caption text displayed above the table */
-  caption?: string;
-  /** Array of column definitions */
-  columns: Column[];
-  /** Array of data objects to display. Each object should have an 'id' field for stable row identification */
-  data: any[];
-  /** Enable/disable pagination (default: true) */
-  pagination?: boolean;
-  /** Number of rows per page (default: 10) */
-  pageSize?: number;
-  /** Enable/disable search across all columns (default: true) */
-  searchable?: boolean;
-  /** Enable/disable row selection with checkboxes (default: false) */
-  selectable?: boolean;
-  /** Enable/disable column sorting (default: true) */
-  sortable?: boolean;
-  /** Enable/disable CSV export button (default: false) */
-  exportable?: boolean;
-  /** Show/hide edit and delete action buttons for each row (default: false) */
-  rowActions?: boolean;
-  /** Enable/disable column resizing by dragging (default: true) */
-  resizableColumns?: boolean;
-  /** Enable/disable column reordering by dragging (default: true) */
-  reorderableColumns?: boolean;
-  /** Callback function triggered when the edit button is clicked */
-  onRowEdit?: (row: any) => void;
-  /** Callback function triggered when the delete button is clicked */
-  onRowDelete?: (row: any) => void;
-  /** Callback function triggered when row selection changes, receives array of selected rows */
-  onSelectionChange?: (selectedRows: any[]) => void;
-  /** Callback function triggered when columns are reordered */
-  onColumnsReorder?: (columns: Column[]) => void;
-  /** Optional CSS classes for the table container */
-  className?: string;
-}
-
 /**
  * Enterprise-level data table component with Airtable-like features.
  * 
diff --git a/packages/components/src/renderers/complex/filter-builder.tsx b/packages/components/src/renderers/complex/filter-builder.tsx
index 0518d2f84..ddef9e4e9 100644
--- a/packages/components/src/renderers/complex/filter-builder.tsx
+++ b/packages/components/src/renderers/complex/filter-builder.tsx
@@ -1,8 +1,9 @@
 import { ComponentRegistry } from '@object-ui/core';
-import { FilterBuilder, type FilterGroup } from '@/ui/filter-builder';
+import type { FilterBuilderSchema, FilterGroup } from '@object-ui/types';
+import { FilterBuilder } from '@/ui/filter-builder';
 
 ComponentRegistry.register('filter-builder', 
-  ({ schema, className, onChange, ...props }) => {
+  ({ schema, className, onChange, ...props }: { schema: FilterBuilderSchema; className?: string; onChange?: (event: any) => void; [key: string]: any }) => {
     const handleChange = (value: FilterGroup) => {
       if (onChange) {
         onChange({
diff --git a/packages/components/src/renderers/complex/kanban.tsx b/packages/components/src/renderers/complex/kanban.tsx
index 51f2fa929..b65929b15 100644
--- a/packages/components/src/renderers/complex/kanban.tsx
+++ b/packages/components/src/renderers/complex/kanban.tsx
@@ -1,9 +1,10 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { KanbanSchema } from '@object-ui/types';
 import { KanbanBoard, type KanbanColumn, type KanbanCard } from '@/ui';
 import React from 'react';
 
 ComponentRegistry.register('kanban', 
-  ({ schema, className, ...props }) => {
+  ({ schema, className, ...props }: { schema: KanbanSchema; className?: string; [key: string]: any }) => {
     return (
       <KanbanBoard 
         columns={schema.columns || []}
diff --git a/packages/components/src/renderers/complex/resizable.tsx b/packages/components/src/renderers/complex/resizable.tsx
index 41f496f72..35ad366bb 100644
--- a/packages/components/src/renderers/complex/resizable.tsx
+++ b/packages/components/src/renderers/complex/resizable.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { ComponentRegistry } from '@object-ui/core';
+import type { ResizableSchema } from '@object-ui/types';
 import { 
   ResizablePanelGroup, 
   ResizablePanel, 
@@ -8,7 +9,7 @@ import {
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('resizable', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: ResizableSchema; className?: string; [key: string]: any }) => (
     <ResizablePanelGroup 
         direction={schema.direction || 'horizontal'} 
         className={className} 
diff --git a/packages/components/src/renderers/complex/scroll-area.tsx b/packages/components/src/renderers/complex/scroll-area.tsx
index ab1da37cc..32f291501 100644
--- a/packages/components/src/renderers/complex/scroll-area.tsx
+++ b/packages/components/src/renderers/complex/scroll-area.tsx
@@ -1,9 +1,10 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { ScrollAreaSchema } from '@object-ui/types';
 import { ScrollArea, ScrollBar } from '@/ui';
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('scroll-area', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: ScrollAreaSchema; className?: string; [key: string]: any }) => (
     <ScrollArea className={className} style={{ height: schema.height, width: schema.width }} {...props}>
       {renderChildren(schema.content || schema.children)}
       {schema.orientation === 'horizontal' && <ScrollBar orientation="horizontal" />}
diff --git a/packages/components/src/renderers/complex/table.tsx b/packages/components/src/renderers/complex/table.tsx
index 6c4e8dff3..c7fdfd257 100644
--- a/packages/components/src/renderers/complex/table.tsx
+++ b/packages/components/src/renderers/complex/table.tsx
@@ -1,5 +1,6 @@
 // table.tsx implementation
 import { ComponentRegistry } from '@object-ui/core';
+import type { TableSchema } from '@object-ui/types';
 import { 
   Table, 
   TableHeader, 
@@ -13,7 +14,7 @@ import {
 
 // A simple data-driven table
 ComponentRegistry.register('table', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: TableSchema; className?: string; [key: string]: any }) => (
     <Table className={className} {...props}>
       {schema.caption && <TableCaption>{schema.caption}</TableCaption>}
       <TableHeader>
diff --git a/packages/components/src/renderers/complex/timeline.tsx b/packages/components/src/renderers/complex/timeline.tsx
index 6652f780e..0add7fe19 100644
--- a/packages/components/src/renderers/complex/timeline.tsx
+++ b/packages/components/src/renderers/complex/timeline.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { TimelineSchema } from '@object-ui/types';
 import {
   Timeline,
   TimelineItem,
@@ -78,7 +79,7 @@ function formatDate(dateString: string, format?: string): string {
 
 ComponentRegistry.register(
   'timeline',
-  ({ schema, className, ...props }) => {
+  ({ schema, className, ...props }: { schema: TimelineSchema; className?: string; [key: string]: any }) => {
     const {
       variant = 'vertical',
       items = [],
diff --git a/packages/components/src/renderers/data-display/alert.tsx b/packages/components/src/renderers/data-display/alert.tsx
index 949281432..8bcbec400 100644
--- a/packages/components/src/renderers/data-display/alert.tsx
+++ b/packages/components/src/renderers/data-display/alert.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { AlertSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
 import {
   Alert,
@@ -7,7 +8,7 @@ import {
 } from '@/ui';
 
 ComponentRegistry.register('alert', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: AlertSchema; className?: string; [key: string]: any }) => (
     <Alert variant={schema.variant} className={className} {...props}>
       <AlertTitle>{schema.title}</AlertTitle>
       <AlertDescription>{schema.description || renderChildren(schema.body)}</AlertDescription>
diff --git a/packages/components/src/renderers/data-display/avatar.tsx b/packages/components/src/renderers/data-display/avatar.tsx
index e2da09943..1302f5b6a 100644
--- a/packages/components/src/renderers/data-display/avatar.tsx
+++ b/packages/components/src/renderers/data-display/avatar.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { AvatarSchema } from '@object-ui/types';
 import {
   Avatar,
   AvatarImage,
@@ -6,7 +7,7 @@ import {
 } from '@/ui';
 
 ComponentRegistry.register('avatar', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: AvatarSchema; className?: string; [key: string]: any }) => (
     <Avatar className={className} {...props}>
       <AvatarImage src={schema.src} alt={schema.alt} />
       <AvatarFallback>{schema.fallback}</AvatarFallback>
diff --git a/packages/components/src/renderers/data-display/badge.tsx b/packages/components/src/renderers/data-display/badge.tsx
index 0b77ff25f..a2b085fe9 100644
--- a/packages/components/src/renderers/data-display/badge.tsx
+++ b/packages/components/src/renderers/data-display/badge.tsx
@@ -1,9 +1,10 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { BadgeSchema } from '@object-ui/types';
 import { Badge } from '@/ui';
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('badge', 
-  ({ schema, ...props }) => (
+  ({ schema, ...props }: { schema: BadgeSchema; [key: string]: any }) => (
     <Badge variant={schema.variant} className={schema.className} {...props}>
       {schema.label || renderChildren(schema.body)}
     </Badge>
diff --git a/packages/components/src/renderers/data-display/chart.tsx b/packages/components/src/renderers/data-display/chart.tsx
index 32788452c..b897d0f7c 100644
--- a/packages/components/src/renderers/data-display/chart.tsx
+++ b/packages/components/src/renderers/data-display/chart.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { ChartSchema } from '@object-ui/types';
 import {
   ChartContainer,
   ChartTooltip,
@@ -20,7 +21,7 @@ import {
 } from 'recharts';
 
 ComponentRegistry.register('chart',
-  ({ schema, className }) => {
+  ({ schema, className }: { schema: ChartSchema; className?: string }) => {
     const { chartType = 'bar', data = [], config = {}, xAxisKey, series = [] } = schema;
 
     const ChartComponent = {
diff --git a/packages/components/src/renderers/data-display/list.tsx b/packages/components/src/renderers/data-display/list.tsx
index 08bd0fd5b..0f2cdd3ca 100644
--- a/packages/components/src/renderers/data-display/list.tsx
+++ b/packages/components/src/renderers/data-display/list.tsx
@@ -1,9 +1,10 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { ListSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
 import { cn } from '@/lib/utils';
 
 ComponentRegistry.register('list', 
-  ({ schema, className, ...props }) => {
+  ({ schema, className, ...props }: { schema: ListSchema; className?: string; [key: string]: any }) => {
     const ListTag = schema.ordered ? 'ol' : 'ul';
     
     return (
diff --git a/packages/components/src/renderers/data-display/markdown.tsx b/packages/components/src/renderers/data-display/markdown.tsx
index b700114f4..dab1d4da2 100644
--- a/packages/components/src/renderers/data-display/markdown.tsx
+++ b/packages/components/src/renderers/data-display/markdown.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { MarkdownSchema } from '@object-ui/types';
 import { Markdown } from '@/ui';
 
 /**
@@ -23,7 +24,7 @@ import { Markdown } from '@/ui';
  * - Tailwind CSS prose styling
  */
 ComponentRegistry.register('markdown', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: MarkdownSchema; className?: string; [key: string]: any }) => (
     <Markdown 
       content={schema.content || ''} 
       className={className}
diff --git a/packages/components/src/renderers/data-display/tree-view.tsx b/packages/components/src/renderers/data-display/tree-view.tsx
index 732ba04de..96d928b7a 100644
--- a/packages/components/src/renderers/data-display/tree-view.tsx
+++ b/packages/components/src/renderers/data-display/tree-view.tsx
@@ -1,16 +1,9 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { TreeViewSchema, TreeNode } from '@object-ui/types';
 import { ChevronRight, ChevronDown, Folder, File } from 'lucide-react';
 import { useState } from 'react';
 import { cn } from '@/lib/utils';
 
-interface TreeNode {
-  id: string;
-  label: string;
-  icon?: string;
-  children?: TreeNode[];
-  data?: any;
-}
-
 const TreeNodeComponent = ({ 
   node, 
   level = 0, 
diff --git a/packages/components/src/renderers/disclosure/accordion.tsx b/packages/components/src/renderers/disclosure/accordion.tsx
index a19f5fd0e..714410f35 100644
--- a/packages/components/src/renderers/disclosure/accordion.tsx
+++ b/packages/components/src/renderers/disclosure/accordion.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { AccordionSchema } from '@object-ui/types';
 import { 
   Accordion, 
   AccordionItem, 
@@ -8,11 +9,11 @@ import {
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('accordion', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: AccordionSchema; className?: string; [key: string]: any }) => (
     <Accordion type={schema.accordionType || 'single'} collapsible={schema.collapsible} className={className} {...props}>
-      {schema.items?.map((item: any, index: number) => (
+      {schema.items?.map((item, index: number) => (
         <AccordionItem key={item.value || index} value={item.value || `item-${index}`}>
-          <AccordionTrigger>{item.trigger || item.label}</AccordionTrigger>
+          <AccordionTrigger>{item.title}</AccordionTrigger>
           <AccordionContent>
             {renderChildren(item.content)}
           </AccordionContent>
diff --git a/packages/components/src/renderers/disclosure/collapsible.tsx b/packages/components/src/renderers/disclosure/collapsible.tsx
index 340149345..b3a4a0570 100644
--- a/packages/components/src/renderers/disclosure/collapsible.tsx
+++ b/packages/components/src/renderers/disclosure/collapsible.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { CollapsibleSchema } from '@object-ui/types';
 import { 
   Collapsible, 
   CollapsibleTrigger, 
@@ -7,7 +8,7 @@ import {
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('collapsible', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: CollapsibleSchema; className?: string; [key: string]: any }) => (
     <Collapsible defaultOpen={schema.defaultOpen} disabled={schema.disabled} className={className} {...props}>
        <CollapsibleTrigger asChild>
          {renderChildren(schema.trigger)}
diff --git a/packages/components/src/renderers/feedback/loading.tsx b/packages/components/src/renderers/feedback/loading.tsx
index 45c91f048..5928f77dc 100644
--- a/packages/components/src/renderers/feedback/loading.tsx
+++ b/packages/components/src/renderers/feedback/loading.tsx
@@ -1,9 +1,10 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { LoadingSchema } from '@object-ui/types';
 import { Spinner } from '@/ui';
 import { cn } from '@/lib/utils';
 
 ComponentRegistry.register('loading', 
-  ({ schema, className, ...props }) => {
+  ({ schema, className, ...props }: { schema: LoadingSchema; className?: string; [key: string]: any }) => {
     const size = schema.size || 'md';
     const fullscreen = schema.fullscreen || false;
     
diff --git a/packages/components/src/renderers/feedback/progress.tsx b/packages/components/src/renderers/feedback/progress.tsx
index 133d4641d..d2a3489d8 100644
--- a/packages/components/src/renderers/feedback/progress.tsx
+++ b/packages/components/src/renderers/feedback/progress.tsx
@@ -1,8 +1,9 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { ProgressSchema } from '@object-ui/types';
 import { Progress } from '@/ui';
 
 ComponentRegistry.register('progress', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: ProgressSchema; className?: string; [key: string]: any }) => (
     <Progress value={schema.value} className={className} {...props} />
   ),
   {
diff --git a/packages/components/src/renderers/feedback/skeleton.tsx b/packages/components/src/renderers/feedback/skeleton.tsx
index ae2a9c96c..4c798dab9 100644
--- a/packages/components/src/renderers/feedback/skeleton.tsx
+++ b/packages/components/src/renderers/feedback/skeleton.tsx
@@ -1,8 +1,9 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { SkeletonSchema } from '@object-ui/types';
 import { Skeleton } from '@/ui';
 
 ComponentRegistry.register('skeleton', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: SkeletonSchema; className?: string; [key: string]: any }) => (
     <Skeleton className={className} {...props} style={{ width: schema.width, height: schema.height }} />
   ),
   {
diff --git a/packages/components/src/renderers/feedback/toaster.tsx b/packages/components/src/renderers/feedback/toaster.tsx
index 6fe8e3945..398daac1d 100644
--- a/packages/components/src/renderers/feedback/toaster.tsx
+++ b/packages/components/src/renderers/feedback/toaster.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { ToasterSchema } from '@object-ui/types';
 import { Toaster as SonnerToaster } from '@/ui';
 import { Toaster as DefaultToaster } from '@/ui'; 
 // Note: In shadcn/ui typical setup, Toaster is exported from 'components/ui/toaster' and 'components/ui/sonner'.
@@ -7,7 +8,7 @@ import { Toaster as DefaultToaster } from '@/ui';
 // Let's assume standard exports.
 
 ComponentRegistry.register('toaster', 
-  ({ schema }) => {
+  ({ schema }: { schema: ToasterSchema }) => {
     if (schema.provider === 'sonner') {
         return <SonnerToaster />;
     }
diff --git a/packages/components/src/renderers/form/button.tsx b/packages/components/src/renderers/form/button.tsx
index 1ad51607d..0b6f5b4c5 100644
--- a/packages/components/src/renderers/form/button.tsx
+++ b/packages/components/src/renderers/form/button.tsx
@@ -1,9 +1,10 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { ButtonSchema } from '@object-ui/types';
 import { Button } from '@/ui';
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('button', 
-  ({ schema, ...props }) => (
+  ({ schema, ...props }: { schema: ButtonSchema; [key: string]: any }) => (
     <Button variant={schema.variant} size={schema.size} className={schema.className} {...props}>
       {schema.label || renderChildren(schema.body)}
     </Button>
diff --git a/packages/components/src/renderers/form/calendar.tsx b/packages/components/src/renderers/form/calendar.tsx
index bd86e25c2..36595f174 100644
--- a/packages/components/src/renderers/form/calendar.tsx
+++ b/packages/components/src/renderers/form/calendar.tsx
@@ -1,11 +1,12 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { CalendarSchema } from '@object-ui/types';
 import { Calendar } from '@/ui';
 
 ComponentRegistry.register('calendar', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: CalendarSchema; className?: string; [key: string]: any }) => (
     <Calendar
       mode={schema.mode || "single"}
-      selected={schema.selected} // This would need state management in a real app
+      selected={schema.value || schema.defaultValue}
       className={className}
       {...props}
     />
diff --git a/packages/components/src/renderers/form/checkbox.tsx b/packages/components/src/renderers/form/checkbox.tsx
index 6167e7889..fde46c03e 100644
--- a/packages/components/src/renderers/form/checkbox.tsx
+++ b/packages/components/src/renderers/form/checkbox.tsx
@@ -1,8 +1,9 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { CheckboxSchema } from '@object-ui/types';
 import { Checkbox, Label } from '@/ui';
 
 ComponentRegistry.register('checkbox', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: CheckboxSchema; className?: string; [key: string]: any }) => (
     <div className={`flex items-center space-x-2 ${schema.wrapperClass || ''}`}>
       <Checkbox id={schema.id} className={className} {...props} />
       <Label htmlFor={schema.id} className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
diff --git a/packages/components/src/renderers/form/date-picker.tsx b/packages/components/src/renderers/form/date-picker.tsx
index 1864c8530..9ac03ae5c 100644
--- a/packages/components/src/renderers/form/date-picker.tsx
+++ b/packages/components/src/renderers/form/date-picker.tsx
@@ -1,11 +1,12 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { DatePickerSchema } from '@object-ui/types';
 import { Calendar, Button, Popover, PopoverTrigger, PopoverContent, Label } from '@/ui';
 import { CalendarIcon } from 'lucide-react';
 import { format } from 'date-fns';
 import { cn } from '@/lib/utils';
 
 ComponentRegistry.register('date-picker', 
-  ({ schema, className, value, onChange, ...props }) => {
+  ({ schema, className, value, onChange, ...props }: { schema: DatePickerSchema; className?: string; value?: Date; onChange?: (date: Date | undefined) => void; [key: string]: any }) => {
     const handleSelect = (date: Date | undefined) => {
       if (onChange) {
         onChange(date);
diff --git a/packages/components/src/renderers/form/file-upload.tsx b/packages/components/src/renderers/form/file-upload.tsx
index d182f2694..fd17fc381 100644
--- a/packages/components/src/renderers/form/file-upload.tsx
+++ b/packages/components/src/renderers/form/file-upload.tsx
@@ -1,11 +1,12 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { FileUploadSchema } from '@object-ui/types';
 import { Label, Button } from '@/ui';
 import { Upload, X } from 'lucide-react';
 import { useState, useRef } from 'react';
 import { cn } from '@/lib/utils';
 
 ComponentRegistry.register('file-upload', 
-  ({ schema, className, value, onChange, ...props }) => {
+  ({ schema, className, value, onChange, ...props }: { schema: FileUploadSchema; className?: string; value?: File[]; onChange?: (files: File[]) => void; [key: string]: any }) => {
     const [files, setFiles] = useState<File[]>(value || []);
     const inputRef = useRef<HTMLInputElement>(null);
 
diff --git a/packages/components/src/renderers/form/form.tsx b/packages/components/src/renderers/form/form.tsx
index 14f828372..f9d276779 100644
--- a/packages/components/src/renderers/form/form.tsx
+++ b/packages/components/src/renderers/form/form.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { FormSchema, FormField as FormFieldConfig, ValidationRule, FieldCondition, SelectOption } from '@object-ui/types';
 import { useForm } from 'react-hook-form';
 import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription } from '@/ui/form';
 import { Button } from '@/ui/button';
@@ -18,48 +19,9 @@ import { AlertCircle, Loader2 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import React from 'react';
 
-// TypeScript interfaces for type safety
-interface SelectOption {
-  label: string;
-  value: string;
-}
-
-interface FieldValidation {
-  required?: string | boolean;
-  minLength?: { value: number; message: string };
-  maxLength?: { value: number; message: string };
-  min?: { value: number; message: string };
-  max?: { value: number; message: string };
-  pattern?: { value: string | RegExp; message: string };
-  validate?: (value: any) => boolean | string;
-}
-
-interface FieldCondition {
-  field: string;
-  equals?: any;
-  notEquals?: any;
-  in?: any[];
-}
-
-interface FormFieldConfig {
-  id?: string;
-  name: string;
-  label?: string;
-  description?: string;
-  type?: string;
-  inputType?: string;
-  required?: boolean;
-  disabled?: boolean;
-  placeholder?: string;
-  options?: SelectOption[];
-  validation?: FieldValidation;
-  condition?: FieldCondition;
-  [key: string]: any;
-}
-
 // Form renderer component - Airtable-style feature-complete form
 ComponentRegistry.register('form',
-  ({ schema, className, onAction, ...props }) => {
+  ({ schema, className, onAction, ...props }: { schema: FormSchema; className?: string; onAction?: (action: any) => void; [key: string]: any }) => {
     const {
       defaultValues = {},
       fields = [],
diff --git a/packages/components/src/renderers/form/input-otp.tsx b/packages/components/src/renderers/form/input-otp.tsx
index 01ac94034..a73e9cda4 100644
--- a/packages/components/src/renderers/form/input-otp.tsx
+++ b/packages/components/src/renderers/form/input-otp.tsx
@@ -1,9 +1,10 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { InputOTPSchema } from '@object-ui/types';
 import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@/ui';
 
 ComponentRegistry.register('input-otp', 
-  ({ schema, className, ...props }) => (
-    <InputOTP maxLength={schema.maxLength || 6} className={className} {...props}>
+  ({ schema, className, ...props }: { schema: InputOTPSchema; className?: string; [key: string]: any }) => (
+    <InputOTP maxLength={schema.length || 6} className={className} {...props}>
       <InputOTPGroup>
         <InputOTPSlot index={0} />
         <InputOTPSlot index={1} />
diff --git a/packages/components/src/renderers/form/input.tsx b/packages/components/src/renderers/form/input.tsx
index 14f4f9036..d26e7ae0e 100644
--- a/packages/components/src/renderers/form/input.tsx
+++ b/packages/components/src/renderers/form/input.tsx
@@ -1,8 +1,9 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { InputSchema } from '@object-ui/types';
 import { Input, Label } from '@/ui';
 
 ComponentRegistry.register('input', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: InputSchema; className?: string; [key: string]: any }) => (
     <div className={`grid w-full max-w-sm items-center gap-1.5 ${schema.wrapperClass || ''}`}>
       {schema.label && <Label htmlFor={schema.id}>{schema.label}</Label>}
       <Input 
diff --git a/packages/components/src/renderers/form/radio-group.tsx b/packages/components/src/renderers/form/radio-group.tsx
index e2b1de622..7fbb753ef 100644
--- a/packages/components/src/renderers/form/radio-group.tsx
+++ b/packages/components/src/renderers/form/radio-group.tsx
@@ -1,10 +1,11 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { RadioGroupSchema } from '@object-ui/types';
 import { RadioGroup, RadioGroupItem, Label } from '@/ui';
 
 ComponentRegistry.register('radio-group', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: RadioGroupSchema; className?: string; [key: string]: any }) => (
     <RadioGroup defaultValue={schema.defaultValue} className={className} {...props}>
-      {schema.items?.map((item: any) => (
+      {schema.options?.map((item) => (
         <div key={item.value} className="flex items-center space-x-2">
           <RadioGroupItem value={item.value} id={`${schema.id}-${item.value}`} />
           <Label htmlFor={`${schema.id}-${item.value}`}>{item.label}</Label>
@@ -18,16 +19,16 @@ ComponentRegistry.register('radio-group',
       { name: 'defaultValue', type: 'string', label: 'Default Value' },
       { name: 'id', type: 'string', label: 'Group ID', required: true },
       { 
-        name: 'items', 
+        name: 'options', 
         type: 'array', 
-        label: 'Items',
+        label: 'Options',
         description: 'Array of {label, value} objects'
       },
       { name: 'className', type: 'string', label: 'CSS Class' }
     ],
     defaultProps: {
       id: 'radio-group', // Will be made unique by designer's ensureNodeIds
-      items: [
+      options: [
         { label: 'Option 1', value: 'option1' },
         { label: 'Option 2', value: 'option2' },
         { label: 'Option 3', value: 'option3' }
diff --git a/packages/components/src/renderers/form/select.tsx b/packages/components/src/renderers/form/select.tsx
index 85861721b..2486c42ab 100644
--- a/packages/components/src/renderers/form/select.tsx
+++ b/packages/components/src/renderers/form/select.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { SelectSchema } from '@object-ui/types';
 import {
   Select,
   SelectTrigger,
@@ -9,7 +10,7 @@ import {
 } from '@/ui';
 
 ComponentRegistry.register('select', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: SelectSchema; className?: string; [key: string]: any }) => (
     <div className={`grid w-full max-w-sm items-center gap-1.5 ${schema.wrapperClass || ''}`}>
       {schema.label && <Label>{schema.label}</Label>}
       <Select defaultValue={schema.defaultValue} {...props}>
@@ -17,7 +18,7 @@ ComponentRegistry.register('select',
           <SelectValue placeholder={schema.placeholder} />
         </SelectTrigger>
         <SelectContent>
-          {schema.options?.map((opt: any) => (
+          {schema.options?.map((opt) => (
              <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
           ))}
         </SelectContent>
diff --git a/packages/components/src/renderers/form/slider.tsx b/packages/components/src/renderers/form/slider.tsx
index 39dfb4431..50c662550 100644
--- a/packages/components/src/renderers/form/slider.tsx
+++ b/packages/components/src/renderers/form/slider.tsx
@@ -1,8 +1,9 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { SliderSchema } from '@object-ui/types';
 import { Slider } from '@/ui';
 
 ComponentRegistry.register('slider', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: SliderSchema; className?: string; [key: string]: any }) => (
     <Slider 
       defaultValue={schema.defaultValue} 
       max={schema.max} 
diff --git a/packages/components/src/renderers/form/switch.tsx b/packages/components/src/renderers/form/switch.tsx
index c88d69ed2..4df9caddd 100644
--- a/packages/components/src/renderers/form/switch.tsx
+++ b/packages/components/src/renderers/form/switch.tsx
@@ -1,8 +1,9 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { SwitchSchema } from '@object-ui/types';
 import { Switch, Label } from '@/ui';
 
 ComponentRegistry.register('switch', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: SwitchSchema; className?: string; [key: string]: any }) => (
     <div className={`flex items-center space-x-2 ${schema.wrapperClass || ''}`}>
       <Switch id={schema.id} className={className} {...props} />
       <Label htmlFor={schema.id}>{schema.label}</Label>
diff --git a/packages/components/src/renderers/form/textarea.tsx b/packages/components/src/renderers/form/textarea.tsx
index 106954384..d997bc160 100644
--- a/packages/components/src/renderers/form/textarea.tsx
+++ b/packages/components/src/renderers/form/textarea.tsx
@@ -1,8 +1,9 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { TextareaSchema } from '@object-ui/types';
 import { Textarea, Label } from '@/ui';
 
 ComponentRegistry.register('textarea', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: TextareaSchema; className?: string; [key: string]: any }) => (
     <div className={`grid w-full gap-1.5 ${schema.wrapperClass || ''}`}>
       {schema.label && <Label htmlFor={schema.id}>{schema.label}</Label>}
       <Textarea 
diff --git a/packages/components/src/renderers/form/toggle.tsx b/packages/components/src/renderers/form/toggle.tsx
index 7a1e2a196..582015a34 100644
--- a/packages/components/src/renderers/form/toggle.tsx
+++ b/packages/components/src/renderers/form/toggle.tsx
@@ -1,9 +1,10 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { ToggleSchema } from '@object-ui/types';
 import { Toggle, ToggleGroup, ToggleGroupItem } from '@/ui';
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('toggle', 
-  ({ schema, ...props }) => (
+  ({ schema, ...props }: { schema: ToggleSchema; [key: string]: any }) => (
     <Toggle 
       variant={schema.variant} 
       size={schema.size} 
@@ -11,7 +12,7 @@ ComponentRegistry.register('toggle',
       aria-label={schema.ariaLabel}
       {...props}
     >
-      {schema.label || renderChildren(schema.body)}
+      {schema.label || renderChildren(schema.children)}
     </Toggle>
   ),
   {
diff --git a/packages/components/src/renderers/layout/card.tsx b/packages/components/src/renderers/layout/card.tsx
index 7fab345f4..4a5b7bb29 100644
--- a/packages/components/src/renderers/layout/card.tsx
+++ b/packages/components/src/renderers/layout/card.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { CardSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
 import {
   Card,
@@ -10,7 +11,7 @@ import {
 } from '@/ui';
 
 ComponentRegistry.register('card', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: CardSchema; className?: string; [key: string]: any }) => (
     <Card className={className} {...props}>
       {(schema.title || schema.description) && (
         <CardHeader>
diff --git a/packages/components/src/renderers/layout/container.tsx b/packages/components/src/renderers/layout/container.tsx
index 3e2846920..179bf7131 100644
--- a/packages/components/src/renderers/layout/container.tsx
+++ b/packages/components/src/renderers/layout/container.tsx
@@ -1,9 +1,10 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { ContainerSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
 import { cn } from '@/lib/utils';
 
 ComponentRegistry.register('container', 
-  ({ schema, className, ...props }) => {
+  ({ schema, className, ...props }: { schema: ContainerSchema; className?: string; [key: string]: any }) => {
     const maxWidth = schema.maxWidth || 'xl';
     const padding = schema.padding || 4;
     const centered = schema.centered !== false; // Default to true
diff --git a/packages/components/src/renderers/layout/flex.tsx b/packages/components/src/renderers/layout/flex.tsx
index c905d86eb..39fa18ca6 100644
--- a/packages/components/src/renderers/layout/flex.tsx
+++ b/packages/components/src/renderers/layout/flex.tsx
@@ -1,9 +1,10 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { FlexSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
 import { cn } from '@/lib/utils';
 
 ComponentRegistry.register('flex', 
-  ({ schema, className, ...props }) => {
+  ({ schema, className, ...props }: { schema: FlexSchema; className?: string; [key: string]: any }) => {
     const direction = schema.direction || 'row';
     const justify = schema.justify || 'start';
     const align = schema.align || 'start';
diff --git a/packages/components/src/renderers/layout/grid.tsx b/packages/components/src/renderers/layout/grid.tsx
index d74dbc5c7..6d2268908 100644
--- a/packages/components/src/renderers/layout/grid.tsx
+++ b/packages/components/src/renderers/layout/grid.tsx
@@ -1,9 +1,10 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { GridSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
 import { cn } from '@/lib/utils';
 
 ComponentRegistry.register('grid', 
-  ({ schema, className, ...props }) => {
+  ({ schema, className, ...props }: { schema: GridSchema; className?: string; [key: string]: any }) => {
     const gridCols = schema.columns || 2;
     const gap = schema.gap || 4;
     
diff --git a/packages/components/src/renderers/layout/tabs.tsx b/packages/components/src/renderers/layout/tabs.tsx
index 77591b8bc..fb2fbc7c9 100644
--- a/packages/components/src/renderers/layout/tabs.tsx
+++ b/packages/components/src/renderers/layout/tabs.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { TabsSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
 import {
   Tabs,
@@ -8,14 +9,14 @@ import {
 } from '@/ui';
 
 ComponentRegistry.register('tabs', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: TabsSchema; className?: string; [key: string]: any }) => (
     <Tabs defaultValue={schema.defaultValue} className={className} {...props}>
       <TabsList>
-        {schema.items?.map((item: any) => (
+        {schema.items?.map((item) => (
           <TabsTrigger key={item.value} value={item.value}>{item.label}</TabsTrigger>
         ))}
       </TabsList>
-      {schema.items?.map((item: any) => (
+      {schema.items?.map((item) => (
         <TabsContent key={item.value} value={item.value}>
           {renderChildren(item.body)}
         </TabsContent>
diff --git a/packages/components/src/renderers/navigation/header-bar.tsx b/packages/components/src/renderers/navigation/header-bar.tsx
index 58ea97e21..bcf0dce62 100644
--- a/packages/components/src/renderers/navigation/header-bar.tsx
+++ b/packages/components/src/renderers/navigation/header-bar.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { ComponentRegistry } from '@object-ui/core';
+import type { HeaderBarSchema } from '@object-ui/types';
 import {
   SidebarTrigger,
   Separator,
@@ -12,7 +13,7 @@ import {
 } from '@/ui';
 
 ComponentRegistry.register('header-bar', 
-  ({ schema }) => (
+  ({ schema }: { schema: HeaderBarSchema }) => (
     <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
       <SidebarTrigger />
       <Separator orientation="vertical" className="mr-2 h-4" />
diff --git a/packages/components/src/renderers/navigation/sidebar.tsx b/packages/components/src/renderers/navigation/sidebar.tsx
index cc673d448..82b8fb6c1 100644
--- a/packages/components/src/renderers/navigation/sidebar.tsx
+++ b/packages/components/src/renderers/navigation/sidebar.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { SidebarSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
 import {
   SidebarProvider,
@@ -36,7 +37,7 @@ ComponentRegistry.register('sidebar-provider',
 );
 
 ComponentRegistry.register('sidebar', 
-  ({ schema, ...props }) => (
+  ({ schema, ...props }: { schema: SidebarSchema; [key: string]: any }) => (
     <Sidebar {...props}>{renderChildren(schema.body)}</Sidebar>
   ),
   {
diff --git a/packages/components/src/renderers/overlay/alert-dialog.tsx b/packages/components/src/renderers/overlay/alert-dialog.tsx
index 5352c9af6..929268437 100644
--- a/packages/components/src/renderers/overlay/alert-dialog.tsx
+++ b/packages/components/src/renderers/overlay/alert-dialog.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { AlertDialogSchema } from '@object-ui/types';
 import { 
   AlertDialog, 
   AlertDialogTrigger, 
@@ -13,7 +14,7 @@ import {
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('alert-dialog', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: AlertDialogSchema; className?: string; [key: string]: any }) => (
     <AlertDialog defaultOpen={schema.defaultOpen} {...props}>
       <AlertDialogTrigger asChild>
         {renderChildren(schema.trigger)}
diff --git a/packages/components/src/renderers/overlay/context-menu.tsx b/packages/components/src/renderers/overlay/context-menu.tsx
index 12c2fdda5..f77845b1f 100644
--- a/packages/components/src/renderers/overlay/context-menu.tsx
+++ b/packages/components/src/renderers/overlay/context-menu.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { ContextMenuSchema } from '@object-ui/types';
 import { 
   ContextMenu, 
   ContextMenuTrigger, 
@@ -42,7 +43,7 @@ const renderContextMenuItems = (items: any[]) => {
 };
 
 ComponentRegistry.register('context-menu', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: ContextMenuSchema; className?: string; [key: string]: any }) => (
     <ContextMenu modal={schema.modal} {...props}>
       <ContextMenuTrigger asChild>
           {/* Usually a Right Click area */}
diff --git a/packages/components/src/renderers/overlay/dialog.tsx b/packages/components/src/renderers/overlay/dialog.tsx
index a64c1c922..d4fa56030 100644
--- a/packages/components/src/renderers/overlay/dialog.tsx
+++ b/packages/components/src/renderers/overlay/dialog.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { DialogSchema } from '@object-ui/types';
 import { 
   Dialog, 
   DialogTrigger, 
@@ -11,7 +12,7 @@ import {
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('dialog', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: DialogSchema; className?: string; [key: string]: any }) => (
     <Dialog modal={schema.modal} defaultOpen={schema.defaultOpen} {...props}>
       <DialogTrigger asChild>
         {renderChildren(schema.trigger)}
diff --git a/packages/components/src/renderers/overlay/drawer.tsx b/packages/components/src/renderers/overlay/drawer.tsx
index dfbc37c4c..d411bbe6b 100644
--- a/packages/components/src/renderers/overlay/drawer.tsx
+++ b/packages/components/src/renderers/overlay/drawer.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { DrawerSchema } from '@object-ui/types';
 import { 
   Drawer, 
   DrawerTrigger, 
@@ -12,7 +13,7 @@ import {
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('drawer', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: DrawerSchema; className?: string; [key: string]: any }) => (
     <Drawer shouldScaleBackground={schema.shouldScaleBackground} defaultOpen={schema.defaultOpen} {...props}>
       <DrawerTrigger asChild>
         {renderChildren(schema.trigger)}
diff --git a/packages/components/src/renderers/overlay/dropdown-menu.tsx b/packages/components/src/renderers/overlay/dropdown-menu.tsx
index e1287d074..782fb7705 100644
--- a/packages/components/src/renderers/overlay/dropdown-menu.tsx
+++ b/packages/components/src/renderers/overlay/dropdown-menu.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { DropdownMenuSchema } from '@object-ui/types';
 import { 
   DropdownMenu, 
   DropdownMenuTrigger, 
@@ -43,7 +44,7 @@ const renderMenuItems = (items: any[]) => {
 };
 
 ComponentRegistry.register('dropdown-menu', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: DropdownMenuSchema; className?: string; [key: string]: any }) => (
     <DropdownMenu modal={schema.modal} defaultOpen={schema.defaultOpen} {...props}>
       <DropdownMenuTrigger asChild>
          {renderChildren(schema.trigger)}
diff --git a/packages/components/src/renderers/overlay/hover-card.tsx b/packages/components/src/renderers/overlay/hover-card.tsx
index e6344e29c..4271e5f1d 100644
--- a/packages/components/src/renderers/overlay/hover-card.tsx
+++ b/packages/components/src/renderers/overlay/hover-card.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { HoverCardSchema } from '@object-ui/types';
 import { 
   HoverCard, 
   HoverCardTrigger, 
@@ -7,7 +8,7 @@ import {
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('hover-card', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: HoverCardSchema; className?: string; [key: string]: any }) => (
     <HoverCard openDelay={schema.openDelay} closeDelay={schema.closeDelay} {...props}>
       <HoverCardTrigger asChild>
         {renderChildren(schema.trigger)}
diff --git a/packages/components/src/renderers/overlay/popover.tsx b/packages/components/src/renderers/overlay/popover.tsx
index 95d500288..01ee0fd67 100644
--- a/packages/components/src/renderers/overlay/popover.tsx
+++ b/packages/components/src/renderers/overlay/popover.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { PopoverSchema } from '@object-ui/types';
 import { 
   Popover, 
   PopoverTrigger, 
@@ -7,7 +8,7 @@ import {
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('popover', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: PopoverSchema; className?: string; [key: string]: any }) => (
     <Popover modal={schema.modal} defaultOpen={schema.defaultOpen} {...props}>
       <PopoverTrigger asChild>
         {renderChildren(schema.trigger)}
diff --git a/packages/components/src/renderers/overlay/sheet.tsx b/packages/components/src/renderers/overlay/sheet.tsx
index 993208e34..52f5a7e53 100644
--- a/packages/components/src/renderers/overlay/sheet.tsx
+++ b/packages/components/src/renderers/overlay/sheet.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { SheetSchema } from '@object-ui/types';
 import { 
   Sheet, 
   SheetTrigger, 
@@ -11,7 +12,7 @@ import {
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('sheet', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: SheetSchema; className?: string; [key: string]: any }) => (
     <Sheet modal={schema.modal} defaultOpen={schema.defaultOpen} {...props}>
       <SheetTrigger asChild>
         {renderChildren(schema.trigger)}
diff --git a/packages/components/src/renderers/overlay/tooltip.tsx b/packages/components/src/renderers/overlay/tooltip.tsx
index 520d2c4ca..4ca745eb6 100644
--- a/packages/components/src/renderers/overlay/tooltip.tsx
+++ b/packages/components/src/renderers/overlay/tooltip.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { TooltipSchema } from '@object-ui/types';
 import { 
   TooltipProvider,
   Tooltip, 
@@ -12,7 +13,7 @@ import { renderChildren } from '../../lib/utils';
 // Wrapping here is safer for isolated usage.
 
 ComponentRegistry.register('tooltip', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: TooltipSchema; className?: string; [key: string]: any }) => (
     <TooltipProvider delayDuration={schema.delayDuration}>
       <Tooltip {...props}>
         <TooltipTrigger asChild>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dbac689c6..eb346bf3e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -242,6 +242,9 @@ importers:
       '@object-ui/react':
         specifier: workspace:*
         version: link:../react
+      '@object-ui/types':
+        specifier: workspace:*
+        version: link:../types
       '@radix-ui/react-accordion':
         specifier: ^1.2.12
         version: 1.2.12(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -429,7 +432,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: ^1.0.0
-        version: 1.6.1(@types/node@24.10.8)(@vitest/ui@2.1.9(vitest@2.1.9))(happy-dom@20.1.0)(jsdom@27.4.0)
+        version: 1.6.1(@types/node@24.10.8)(@vitest/ui@2.1.9)(happy-dom@20.1.0)(jsdom@27.4.0)
 
   packages/designer:
     dependencies:
@@ -9174,7 +9177,7 @@ snapshots:
       - typescript
       - universal-cookie
 
-  vitest@1.6.1(@types/node@24.10.8)(@vitest/ui@2.1.9(vitest@2.1.9))(happy-dom@20.1.0)(jsdom@27.4.0):
+  vitest@1.6.1(@types/node@24.10.8)(@vitest/ui@2.1.9)(happy-dom@20.1.0)(jsdom@27.4.0):
     dependencies:
       '@vitest/expect': 1.6.1
       '@vitest/runner': 1.6.1