diff --git a/packages/components/src/stories-json/dashboard.stories.tsx b/packages/components/src/stories-json/dashboard.stories.tsx
index 2f272527b..50011e009 100644
--- a/packages/components/src/stories-json/dashboard.stories.tsx
+++ b/packages/components/src/stories-json/dashboard.stories.tsx
@@ -25,24 +25,30 @@ export const Default: Story = {
     type: 'dashboard',
     columns: 3,
     gap: 4,
-    children: [
+    widgets: [
       { 
-        type: 'metric', 
-        label: 'Total Revenue',
-        value: '$45,231.89',
-        className: 'col-span-1'
+        id: 'metric-1',
+        component: {
+          type: 'metric', 
+          label: 'Total Revenue',
+          value: '$45,231.89',
+        }
       },
       { 
-        type: 'metric', 
-        label: 'Active Users',
-        value: '2,350',
-        className: 'col-span-1'
+        id: 'metric-2',
+        component: {
+          type: 'metric', 
+          label: 'Active Users',
+          value: '2,350',
+        }
       },
       { 
-        type: 'metric', 
-        label: 'Conversion Rate',
-        value: '12.5%',
-        className: 'col-span-1'
+        id: 'metric-3',
+        component: {
+          type: 'metric', 
+          label: 'Conversion Rate',
+          value: '12.5%',
+        }
       }
     ]
   } as any,
@@ -54,24 +60,28 @@ export const WithCards: Story = {
     type: 'dashboard',
     columns: 2,
     gap: 6,
-    children: [
+    widgets: [
       {
-        type: 'card',
-        title: 'Schema/Plugins/Sales Overview',
-        children: [
-          { type: 'metric', label: 'Today', value: '$1,234' },
-          { type: 'metric', label: 'This Week', value: '$8,456' },
-        ],
-        className: 'col-span-1'
+        id: 'card-1',
+        title: 'Sales Overview',
+        component: {
+          type: 'card',
+          children: [
+            { type: 'metric', label: 'Today', value: '$1,234' },
+            { type: 'metric', label: 'This Week', value: '$8,456' },
+          ],
+        }
       },
       {
-        type: 'card',
-        title: 'Schema/Plugins/User Metrics',
-        children: [
-          { type: 'metric', label: 'Online', value: '456' },
-          { type: 'metric', label: 'New Today', value: '89' },
-        ],
-        className: 'col-span-1'
+        id: 'card-2',
+        title: 'User Metrics',
+        component: {
+          type: 'card',
+          children: [
+            { type: 'metric', label: 'Online', value: '456' },
+            { type: 'metric', label: 'New Today', value: '89' },
+          ],
+        }
       }
     ]
   } as any,
diff --git a/packages/react/src/SchemaRenderer.tsx b/packages/react/src/SchemaRenderer.tsx
index 1b3bc974e..dc607d279 100644
--- a/packages/react/src/SchemaRenderer.tsx
+++ b/packages/react/src/SchemaRenderer.tsx
@@ -55,9 +55,26 @@ export const SchemaRenderer = forwardRef<any, { schema: SchemaNode } & Record<st
 
   // Note: We don't forward the ref to the Component because components in the registry
   // may not support refs. The SchemaRenderer itself can still receive refs for its own use.
+  
+  // Extract schema metadata properties that should NOT be passed as React props
+  const {
+    type: _type,
+    children: _children,
+    body: _body,
+    schema: _schema,
+    visible: _visible,
+    visibleOn: _visibleOn,
+    hidden: _hidden,
+    hiddenOn: _hiddenOn,
+    disabled: _disabled,
+    disabledOn: _disabledOn,
+    ...componentProps
+  } = evaluatedSchema;
+
   return React.createElement(Component, {
     schema: evaluatedSchema,
-    ...(evaluatedSchema.props || {}),
+    ...componentProps,  // Spread non-metadata schema properties as props
+    ...(evaluatedSchema.props || {}),  // Override with explicit props if provided
     className: evaluatedSchema.className,
     'data-obj-id': evaluatedSchema.id,
     'data-obj-type': evaluatedSchema.type,