From 35af516ba18560102b17a207e67bec2e2414fb8e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 21 Jan 2026 15:22:00 +0000
Subject: [PATCH 1/4] Initial plan


From dff0a48d606d9edc4eca8b780fd95ff68c9fdabf Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 21 Jan 2026 15:29:57 +0000
Subject: [PATCH 2/4] Add component demo infrastructure and sample component
 docs

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
---
 apps/site/app/components/ComponentDemo.tsx    |  63 +++++
 apps/site/app/components/ObjectUIProvider.tsx |  13 ++
 apps/site/app/layout.tsx                      |   7 +-
 apps/site/mdx-components.tsx                  |  10 +-
 apps/site/package.json                        |   5 +
 docs/reference/components/basic/text.mdx      | 136 +++++++++++
 docs/reference/components/form/button.mdx     | 217 ++++++++++++++++++
 7 files changed, 449 insertions(+), 2 deletions(-)
 create mode 100644 apps/site/app/components/ComponentDemo.tsx
 create mode 100644 apps/site/app/components/ObjectUIProvider.tsx
 create mode 100644 docs/reference/components/basic/text.mdx
 create mode 100644 docs/reference/components/form/button.mdx

diff --git a/apps/site/app/components/ComponentDemo.tsx b/apps/site/app/components/ComponentDemo.tsx
new file mode 100644
index 000000000..73b4ed91a
--- /dev/null
+++ b/apps/site/app/components/ComponentDemo.tsx
@@ -0,0 +1,63 @@
+'use client';
+
+import React from 'react';
+import { SchemaRenderer } from '@object-ui/react';
+import type { SchemaNode } from '@object-ui/core';
+
+interface ComponentDemoProps {
+  schema: SchemaNode;
+  title?: string;
+  description?: string;
+}
+
+export function ComponentDemo({ schema, title, description }: ComponentDemoProps) {
+  return (
+    <div className="not-prose my-6">
+      {(title || description) && (
+        <div className="mb-3">
+          {title && <h4 className="text-sm font-semibold mb-1">{title}</h4>}
+          {description && <p className="text-sm text-muted-foreground">{description}</p>}
+        </div>
+      )}
+      <div className="border rounded-lg p-6 bg-background">
+        <SchemaRenderer schema={schema} />
+      </div>
+    </div>
+  );
+}
+
+interface DemoGridProps {
+  children: React.ReactNode;
+}
+
+export function DemoGrid({ children }: DemoGridProps) {
+  return (
+    <div className="not-prose grid gap-4 md:grid-cols-2 my-6">
+      {children}
+    </div>
+  );
+}
+
+interface CodeDemoProps {
+  schema: SchemaNode;
+  code: string;
+  title?: string;
+}
+
+export function CodeDemo({ schema, code, title }: CodeDemoProps) {
+  return (
+    <div className="not-prose my-6">
+      {title && <h4 className="text-sm font-semibold mb-3">{title}</h4>}
+      <div className="grid gap-4 lg:grid-cols-2">
+        <div className="border rounded-lg p-6 bg-background">
+          <SchemaRenderer schema={schema} />
+        </div>
+        <div className="border rounded-lg overflow-hidden">
+          <pre className="p-4 text-xs overflow-auto max-h-96 bg-muted">
+            <code>{code}</code>
+          </pre>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/site/app/components/ObjectUIProvider.tsx b/apps/site/app/components/ObjectUIProvider.tsx
new file mode 100644
index 000000000..2422dd36c
--- /dev/null
+++ b/apps/site/app/components/ObjectUIProvider.tsx
@@ -0,0 +1,13 @@
+'use client';
+
+import { useEffect } from 'react';
+import { registerDefaultRenderers } from '@object-ui/components';
+
+export function ObjectUIProvider({ children }: { children: React.ReactNode }) {
+  useEffect(() => {
+    // Register all default ObjectUI components
+    registerDefaultRenderers();
+  }, []);
+
+  return <>{children}</>;
+}
diff --git a/apps/site/app/layout.tsx b/apps/site/app/layout.tsx
index 1e30864de..3f3a6ac2e 100644
--- a/apps/site/app/layout.tsx
+++ b/apps/site/app/layout.tsx
@@ -1,12 +1,17 @@
 import './global.css';
 import { RootProvider } from 'fumadocs-ui/provider/next';
+import { ObjectUIProvider } from './components/ObjectUIProvider';
 import type { ReactNode } from 'react';
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" suppressHydrationWarning>
       <body>
-        <RootProvider>{children}</RootProvider>
+        <RootProvider>
+          <ObjectUIProvider>
+            {children}
+          </ObjectUIProvider>
+        </RootProvider>
       </body>
     </html>
   );
diff --git a/apps/site/mdx-components.tsx b/apps/site/mdx-components.tsx
index 9cec88bd4..7bf4fe97c 100644
--- a/apps/site/mdx-components.tsx
+++ b/apps/site/mdx-components.tsx
@@ -1 +1,9 @@
-export { default } from 'fumadocs-ui/mdx'
+import defaultComponents from 'fumadocs-ui/mdx';
+import { ComponentDemo, DemoGrid, CodeDemo } from './app/components/ComponentDemo';
+
+export default {
+  ...defaultComponents,
+  ComponentDemo,
+  DemoGrid,
+  CodeDemo,
+};
diff --git a/apps/site/package.json b/apps/site/package.json
index 6a03e58b7..d21bd8482 100644
--- a/apps/site/package.json
+++ b/apps/site/package.json
@@ -10,9 +10,14 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@object-ui/components": "workspace:*",
+    "@object-ui/core": "workspace:*",
+    "@object-ui/react": "workspace:*",
+    "@object-ui/types": "workspace:*",
     "fumadocs-core": "^16.4.7",
     "fumadocs-mdx": "^14.2.6",
     "fumadocs-ui": "^16.4.7",
+    "lucide-react": "^0.468.0",
     "next": "^16.1.4",
     "react": "19.2.3",
     "react-dom": "19.2.3",
diff --git a/docs/reference/components/basic/text.mdx b/docs/reference/components/basic/text.mdx
new file mode 100644
index 000000000..dc313f512
--- /dev/null
+++ b/docs/reference/components/basic/text.mdx
@@ -0,0 +1,136 @@
+---
+title: "Text"
+description: "Display text with standardized typography styles"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Text
+
+The Text component displays text content with predefined typography variants.
+
+## Basic Usage
+
+<ComponentDemo
+  schema={{
+    type: 'text',
+    content: 'Hello, World!'
+  }}
+  title="Simple Text"
+  description="Basic text without any styling"
+/>
+
+## Variants
+
+<DemoGrid>
+  <ComponentDemo
+    schema={{
+      type: 'text',
+      content: 'Heading 1',
+      variant: 'h1'
+    }}
+    title="Heading 1"
+  />
+  <ComponentDemo
+    schema={{
+      type: 'text',
+      content: 'Heading 2',
+      variant: 'h2'
+    }}
+    title="Heading 2"
+  />
+  <ComponentDemo
+    schema={{
+      type: 'text',
+      content: 'Heading 3',
+      variant: 'h3'
+    }}
+    title="Heading 3"
+  />
+  <ComponentDemo
+    schema={{
+      type: 'text',
+      content: 'Paragraph text',
+      variant: 'p'
+    }}
+    title="Paragraph"
+  />
+  <ComponentDemo
+    schema={{
+      type: 'text',
+      content: 'Lead text for introductions',
+      variant: 'lead'
+    }}
+    title="Lead"
+  />
+  <ComponentDemo
+    schema={{
+      type: 'text',
+      content: 'Large text',
+      variant: 'large'
+    }}
+    title="Large"
+  />
+  <ComponentDemo
+    schema={{
+      type: 'text',
+      content: 'Small text',
+      variant: 'small'
+    }}
+    title="Small"
+  />
+  <ComponentDemo
+    schema={{
+      type: 'text',
+      content: 'Muted text',
+      variant: 'muted'
+    }}
+    title="Muted"
+  />
+</DemoGrid>
+
+## Schema
+
+```typescript
+interface TextSchema {
+  type: 'text';
+  content: string;           // Text content to display
+  value?: string;            // Alias for content
+  variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'lead' | 'large' | 'small' | 'muted';
+  align?: 'left' | 'center' | 'right' | 'justify';
+  color?: string;            // Tailwind color class
+  className?: string;        // Additional CSS classes
+}
+```
+
+## Examples
+
+### Colored Text
+
+<ComponentDemo
+  schema={{
+    type: 'flex',
+    gap: 4,
+    children: [
+      { type: 'text', content: 'Primary Text', color: 'text-primary' },
+      { type: 'text', content: 'Destructive Text', color: 'text-destructive' },
+      { type: 'text', content: 'Muted Text', color: 'text-muted-foreground' }
+    ]
+  }}
+  title="Text with Colors"
+/>
+
+### Text Alignment
+
+<ComponentDemo
+  schema={{
+    type: 'stack',
+    gap: 4,
+    children: [
+      { type: 'text', content: 'Left aligned text', align: 'left' },
+      { type: 'text', content: 'Center aligned text', align: 'center' },
+      { type: 'text', content: 'Right aligned text', align: 'right' }
+    ]
+  }}
+  title="Text Alignment"
+/>
diff --git a/docs/reference/components/form/button.mdx b/docs/reference/components/form/button.mdx
new file mode 100644
index 000000000..a320dfdac
--- /dev/null
+++ b/docs/reference/components/form/button.mdx
@@ -0,0 +1,217 @@
+---
+title: "Button"
+description: "Trigger actions and events with customizable button styles"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Button
+
+The Button component triggers actions when clicked. It supports multiple variants, sizes, and states.
+
+## Basic Usage
+
+<ComponentDemo
+  schema={{
+    type: 'button',
+    label: 'Click Me'
+  }}
+  title="Simple Button"
+/>
+
+## Variants
+
+<DemoGrid>
+  <ComponentDemo
+    schema={{
+      type: 'button',
+      label: 'Default',
+      variant: 'default'
+    }}
+    title="Default"
+  />
+  <ComponentDemo
+    schema={{
+      type: 'button',
+      label: 'Destructive',
+      variant: 'destructive'
+    }}
+    title="Destructive"
+  />
+  <ComponentDemo
+    schema={{
+      type: 'button',
+      label: 'Outline',
+      variant: 'outline'
+    }}
+    title="Outline"
+  />
+  <ComponentDemo
+    schema={{
+      type: 'button',
+      label: 'Secondary',
+      variant: 'secondary'
+    }}
+    title="Secondary"
+  />
+  <ComponentDemo
+    schema={{
+      type: 'button',
+      label: 'Ghost',
+      variant: 'ghost'
+    }}
+    title="Ghost"
+  />
+  <ComponentDemo
+    schema={{
+      type: 'button',
+      label: 'Link',
+      variant: 'link'
+    }}
+    title="Link"
+  />
+</DemoGrid>
+
+## Sizes
+
+<DemoGrid>
+  <ComponentDemo
+    schema={{
+      type: 'flex',
+      gap: 2,
+      align: 'center',
+      children: [
+        { type: 'button', label: 'Small', size: 'sm' },
+        { type: 'button', label: 'Default', size: 'default' },
+        { type: 'button', label: 'Large', size: 'lg' }
+      ]
+    }}
+    title="Button Sizes"
+  />
+  <ComponentDemo
+    schema={{
+      type: 'flex',
+      gap: 2,
+      align: 'center',
+      children: [
+        { type: 'button', label: '🎯', size: 'icon' }
+      ]
+    }}
+    title="Icon Button"
+  />
+</DemoGrid>
+
+## With Icons
+
+<DemoGrid>
+  <ComponentDemo
+    schema={{
+      type: 'button',
+      label: 'Send Email',
+      icon: 'mail',
+      variant: 'default'
+    }}
+    title="Button with Icon"
+  />
+  <ComponentDemo
+    schema={{
+      type: 'button',
+      label: 'Download',
+      icon: 'download',
+      iconPosition: 'right',
+      variant: 'outline'
+    }}
+    title="Icon on Right"
+  />
+</DemoGrid>
+
+## States
+
+<DemoGrid>
+  <ComponentDemo
+    schema={{
+      type: 'button',
+      label: 'Disabled',
+      disabled: true
+    }}
+    title="Disabled State"
+  />
+  <ComponentDemo
+    schema={{
+      type: 'button',
+      label: 'Loading',
+      loading: true
+    }}
+    title="Loading State"
+  />
+</DemoGrid>
+
+## Schema
+
+```typescript
+interface ButtonSchema {
+  type: 'button';
+  label: string;                    // Button text
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+  size?: 'sm' | 'default' | 'lg' | 'icon';
+  
+  // Icons
+  icon?: string;                    // Lucide icon name
+  iconPosition?: 'left' | 'right'; // Icon placement
+  
+  // States
+  disabled?: boolean;
+  loading?: boolean;
+  
+  // Actions
+  onClick?: string | ActionConfig;  // Action on click
+  href?: string;                    // Link URL (renders as link)
+  
+  // Styling
+  className?: string;
+  fullWidth?: boolean;
+}
+```
+
+## Examples
+
+### Action Buttons
+
+<ComponentDemo
+  schema={{
+    type: 'flex',
+    gap: 3,
+    children: [
+      { 
+        type: 'button', 
+        label: 'Save', 
+        variant: 'default',
+        icon: 'save'
+      },
+      { 
+        type: 'button', 
+        label: 'Cancel', 
+        variant: 'outline'
+      },
+      { 
+        type: 'button', 
+        label: 'Delete', 
+        variant: 'destructive',
+        icon: 'trash'
+      }
+    ]
+  }}
+  title="Common Action Buttons"
+/>
+
+### Full Width
+
+<ComponentDemo
+  schema={{
+    type: 'button',
+    label: 'Full Width Button',
+    fullWidth: true,
+    variant: 'default'
+  }}
+  title="Full Width Button"
+/>

From 6b24660b1cd014de296a20c3695d9f4805fa8d6d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 21 Jan 2026 15:34:01 +0000
Subject: [PATCH 3/4] Generate individual component documentation pages with
 live demos

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
---
 docs/reference/components/basic/html.mdx      | 29 ++++++
 docs/reference/components/basic/icon.mdx      | 88 +++++++++++++++++++
 docs/reference/components/basic/image.mdx     | 46 ++++++++++
 docs/reference/components/basic/meta.json     | 10 +++
 docs/reference/components/basic/separator.mdx | 65 ++++++++++++++
 docs/reference/components/complex/meta.json   |  6 ++
 docs/reference/components/complex/table.mdx   | 49 +++++++++++
 .../components/data-display/alert.mdx         | 44 ++++++++++
 .../components/data-display/avatar.mdx        | 42 +++++++++
 .../components/data-display/badge.mdx         | 52 +++++++++++
 .../components/data-display/list.mdx          | 44 ++++++++++
 .../components/data-display/meta.json         |  9 ++
 .../components/disclosure/accordion.mdx       | 47 ++++++++++
 .../components/disclosure/collapsible.mdx     | 40 +++++++++
 .../reference/components/disclosure/meta.json |  7 ++
 .../reference/components/feedback/loading.mdx | 48 ++++++++++
 docs/reference/components/feedback/meta.json  |  8 ++
 .../components/feedback/progress.mdx          | 52 +++++++++++
 .../components/feedback/skeleton.mdx          | 48 ++++++++++
 docs/reference/components/form/checkbox.mdx   | 55 ++++++++++++
 docs/reference/components/form/input.mdx      | 74 ++++++++++++++++
 docs/reference/components/form/meta.json      | 12 +++
 docs/reference/components/form/select.mdx     | 70 +++++++++++++++
 docs/reference/components/form/slider.mdx     | 35 ++++++++
 docs/reference/components/form/switch.mdx     | 54 ++++++++++++
 docs/reference/components/form/textarea.mdx   | 44 ++++++++++
 docs/reference/components/index.md            | 59 ++++++++++---
 docs/reference/components/layout/card.mdx     | 74 ++++++++++++++++
 .../reference/components/layout/container.mdx | 36 ++++++++
 docs/reference/components/layout/flex.mdx     | 49 +++++++++++
 docs/reference/components/layout/grid.mdx     | 55 ++++++++++++
 docs/reference/components/layout/meta.json    | 11 +++
 docs/reference/components/layout/stack.mdx    | 46 ++++++++++
 docs/reference/components/layout/tabs.mdx     | 61 +++++++++++++
 docs/reference/components/overlay/dialog.mdx  | 44 ++++++++++
 docs/reference/components/overlay/drawer.mdx  | 42 +++++++++
 docs/reference/components/overlay/meta.json   |  9 ++
 docs/reference/components/overlay/popover.mdx | 40 +++++++++
 docs/reference/components/overlay/tooltip.mdx | 37 ++++++++
 39 files changed, 1629 insertions(+), 12 deletions(-)
 create mode 100644 docs/reference/components/basic/html.mdx
 create mode 100644 docs/reference/components/basic/icon.mdx
 create mode 100644 docs/reference/components/basic/image.mdx
 create mode 100644 docs/reference/components/basic/meta.json
 create mode 100644 docs/reference/components/basic/separator.mdx
 create mode 100644 docs/reference/components/complex/meta.json
 create mode 100644 docs/reference/components/complex/table.mdx
 create mode 100644 docs/reference/components/data-display/alert.mdx
 create mode 100644 docs/reference/components/data-display/avatar.mdx
 create mode 100644 docs/reference/components/data-display/badge.mdx
 create mode 100644 docs/reference/components/data-display/list.mdx
 create mode 100644 docs/reference/components/data-display/meta.json
 create mode 100644 docs/reference/components/disclosure/accordion.mdx
 create mode 100644 docs/reference/components/disclosure/collapsible.mdx
 create mode 100644 docs/reference/components/disclosure/meta.json
 create mode 100644 docs/reference/components/feedback/loading.mdx
 create mode 100644 docs/reference/components/feedback/meta.json
 create mode 100644 docs/reference/components/feedback/progress.mdx
 create mode 100644 docs/reference/components/feedback/skeleton.mdx
 create mode 100644 docs/reference/components/form/checkbox.mdx
 create mode 100644 docs/reference/components/form/input.mdx
 create mode 100644 docs/reference/components/form/meta.json
 create mode 100644 docs/reference/components/form/select.mdx
 create mode 100644 docs/reference/components/form/slider.mdx
 create mode 100644 docs/reference/components/form/switch.mdx
 create mode 100644 docs/reference/components/form/textarea.mdx
 create mode 100644 docs/reference/components/layout/card.mdx
 create mode 100644 docs/reference/components/layout/container.mdx
 create mode 100644 docs/reference/components/layout/flex.mdx
 create mode 100644 docs/reference/components/layout/grid.mdx
 create mode 100644 docs/reference/components/layout/meta.json
 create mode 100644 docs/reference/components/layout/stack.mdx
 create mode 100644 docs/reference/components/layout/tabs.mdx
 create mode 100644 docs/reference/components/overlay/dialog.mdx
 create mode 100644 docs/reference/components/overlay/drawer.mdx
 create mode 100644 docs/reference/components/overlay/meta.json
 create mode 100644 docs/reference/components/overlay/popover.mdx
 create mode 100644 docs/reference/components/overlay/tooltip.mdx

diff --git a/docs/reference/components/basic/html.mdx b/docs/reference/components/basic/html.mdx
new file mode 100644
index 000000000..a727a6496
--- /dev/null
+++ b/docs/reference/components/basic/html.mdx
@@ -0,0 +1,29 @@
+---
+title: "HTML"
+description: "Render raw HTML content safely"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# HTML
+
+Render raw HTML content safely
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "html",
+      html: "<p>This is <strong>HTML</strong> content</p>"
+}}
+    title="Basic HTML"
+  />
+
+## Schema
+
+```typescript
+interface HtmlSchema {
+  type: 'html';
+  html: string;
+}
+```
diff --git a/docs/reference/components/basic/icon.mdx b/docs/reference/components/basic/icon.mdx
new file mode 100644
index 000000000..3b81084f5
--- /dev/null
+++ b/docs/reference/components/basic/icon.mdx
@@ -0,0 +1,88 @@
+---
+title: "Icon"
+description: "Display icons from the Lucide icon library"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Icon
+
+Display icons from the Lucide icon library
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "icon",
+      name: "home"
+}}
+    title="Basic Icon"
+  />
+
+  <ComponentDemo
+    schema={{
+      type: "flex",
+      gap: 4,
+      align: "center",
+      children: [
+            {
+                  type: "icon",
+                  name: "star",
+                  size: "sm"
+            },
+            {
+                  type: "icon",
+                  name: "star",
+                  size: "md"
+            },
+            {
+                  type: "icon",
+                  name: "star",
+                  size: "lg"
+            },
+            {
+                  type: "icon",
+                  name: "star",
+                  size: "xl"
+            }
+      ]
+}}
+    title="Icon Sizes"
+  />
+
+  <ComponentDemo
+    schema={{
+      type: "flex",
+      gap: 4,
+      children: [
+            {
+                  type: "icon",
+                  name: "heart",
+                  color: "text-red-500"
+            },
+            {
+                  type: "icon",
+                  name: "star",
+                  color: "text-yellow-500"
+            },
+            {
+                  type: "icon",
+                  name: "check",
+                  color: "text-green-500"
+            }
+      ]
+}}
+    title="Colored Icons"
+  />
+
+## Schema
+
+```typescript
+interface IconSchema {
+  type: 'icon';
+  name: string;              // Lucide icon name (kebab-case)
+  size?: number | 'sm' | 'md' | 'lg' | 'xl';
+  color?: string;            // Tailwind color class
+  className?: string;
+}
+```
diff --git a/docs/reference/components/basic/image.mdx b/docs/reference/components/basic/image.mdx
new file mode 100644
index 000000000..b03bc496b
--- /dev/null
+++ b/docs/reference/components/basic/image.mdx
@@ -0,0 +1,46 @@
+---
+title: "Image"
+description: "Display images with optional fallback"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Image
+
+Display images with optional fallback
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "image",
+      src: "https://via.placeholder.com/300x200",
+      alt: "Placeholder"
+}}
+    title="Basic Image"
+  />
+
+  <ComponentDemo
+    schema={{
+      type: "image",
+      src: "https://via.placeholder.com/400x300",
+      width: 200,
+      height: 150,
+      alt: "Sized Image"
+}}
+    title="With Sizing"
+  />
+
+## Schema
+
+```typescript
+interface ImageSchema {
+  type: 'image';
+  src: string;
+  alt?: string;
+  width?: number | string;
+  height?: number | string;
+  fallback?: string;
+  fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+}
+```
diff --git a/docs/reference/components/basic/meta.json b/docs/reference/components/basic/meta.json
new file mode 100644
index 000000000..0a7b5fb78
--- /dev/null
+++ b/docs/reference/components/basic/meta.json
@@ -0,0 +1,10 @@
+{
+  "title": "Basic",
+  "pages": [
+    "text",
+    "icon",
+    "image",
+    "separator",
+    "html"
+  ]
+}
diff --git a/docs/reference/components/basic/separator.mdx b/docs/reference/components/basic/separator.mdx
new file mode 100644
index 000000000..7ca03edd6
--- /dev/null
+++ b/docs/reference/components/basic/separator.mdx
@@ -0,0 +1,65 @@
+---
+title: "Separator"
+description: "Visual divider between content sections"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Separator
+
+Visual divider between content sections
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "stack",
+      gap: 4,
+      children: [
+            {
+                  type: "text",
+                  content: "Content Above"
+            },
+            {
+                  type: "separator"
+            },
+            {
+                  type: "text",
+                  content: "Content Below"
+            }
+      ]
+}}
+    title="Horizontal"
+  />
+
+  <ComponentDemo
+    schema={{
+      type: "flex",
+      gap: 4,
+      children: [
+            {
+                  type: "text",
+                  content: "Left"
+            },
+            {
+                  type: "separator",
+                  orientation: "vertical"
+            },
+            {
+                  type: "text",
+                  content: "Right"
+            }
+      ]
+}}
+    title="Vertical"
+  />
+
+## Schema
+
+```typescript
+interface SeparatorSchema {
+  type: 'separator';
+  orientation?: 'horizontal' | 'vertical';
+  className?: string;
+}
+```
diff --git a/docs/reference/components/complex/meta.json b/docs/reference/components/complex/meta.json
new file mode 100644
index 000000000..3b8b8be67
--- /dev/null
+++ b/docs/reference/components/complex/meta.json
@@ -0,0 +1,6 @@
+{
+  "title": "Complex",
+  "pages": [
+    "table"
+  ]
+}
diff --git a/docs/reference/components/complex/table.mdx b/docs/reference/components/complex/table.mdx
new file mode 100644
index 000000000..4a7d73496
--- /dev/null
+++ b/docs/reference/components/complex/table.mdx
@@ -0,0 +1,49 @@
+---
+title: "Table"
+description: "Display data in tabular format"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Table
+
+Display data in tabular format
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "table",
+      columns: [
+            {
+                  key: "name",
+                  title: "Name"
+            },
+            {
+                  key: "email",
+                  title: "Email"
+            }
+      ],
+      data: [
+            {
+                  name: "John Doe",
+                  email: "john@example.com"
+            },
+            {
+                  name: "Jane Smith",
+                  email: "jane@example.com"
+            }
+      ]
+}}
+    title="Basic Table"
+  />
+
+## Schema
+
+```typescript
+interface TableSchema {
+  type: 'table';
+  columns: Array<{ key: string; title: string }>;
+  data: Record<string, any>[];
+}
+```
diff --git a/docs/reference/components/data-display/alert.mdx b/docs/reference/components/data-display/alert.mdx
new file mode 100644
index 000000000..98a47c70f
--- /dev/null
+++ b/docs/reference/components/data-display/alert.mdx
@@ -0,0 +1,44 @@
+---
+title: "Alert"
+description: "Display important messages and notifications"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Alert
+
+Display important messages and notifications
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "alert",
+      title: "Info",
+      description: "This is an informational message"
+}}
+    title="Info Alert"
+  />
+
+  <ComponentDemo
+    schema={{
+      type: "alert",
+      title: "Error",
+      description: "Something went wrong",
+      variant: "destructive"
+}}
+    title="Destructive Alert"
+  />
+
+## Schema
+
+```typescript
+interface AlertSchema {
+  type: 'alert';
+  title?: string;
+  description?: string;
+  variant?: 'default' | 'destructive';
+  icon?: string;
+  className?: string;
+}
+```
diff --git a/docs/reference/components/data-display/avatar.mdx b/docs/reference/components/data-display/avatar.mdx
new file mode 100644
index 000000000..c949522f1
--- /dev/null
+++ b/docs/reference/components/data-display/avatar.mdx
@@ -0,0 +1,42 @@
+---
+title: "Avatar"
+description: "User profile image or fallback initials"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Avatar
+
+User profile image or fallback initials
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "avatar",
+      src: "https://github.com/shadcn.png",
+      alt: "User"
+}}
+    title="Avatar with Image"
+  />
+
+  <ComponentDemo
+    schema={{
+      type: "avatar",
+      fallback: "JD"
+}}
+    title="Avatar with Fallback"
+  />
+
+## Schema
+
+```typescript
+interface AvatarSchema {
+  type: 'avatar';
+  src?: string;
+  alt?: string;
+  fallback?: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+```
diff --git a/docs/reference/components/data-display/badge.mdx b/docs/reference/components/data-display/badge.mdx
new file mode 100644
index 000000000..0dac1fcf0
--- /dev/null
+++ b/docs/reference/components/data-display/badge.mdx
@@ -0,0 +1,52 @@
+---
+title: "Badge"
+description: "Small status or label indicator"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Badge
+
+Small status or label indicator
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "flex",
+      gap: 2,
+      children: [
+            {
+                  type: "badge",
+                  label: "Default"
+            },
+            {
+                  type: "badge",
+                  label: "Secondary",
+                  variant: "secondary"
+            },
+            {
+                  type: "badge",
+                  label: "Outline",
+                  variant: "outline"
+            },
+            {
+                  type: "badge",
+                  label: "Destructive",
+                  variant: "destructive"
+            }
+      ]
+}}
+    title="Badge Variants"
+  />
+
+## Schema
+
+```typescript
+interface BadgeSchema {
+  type: 'badge';
+  label: string;
+  variant?: 'default' | 'secondary' | 'outline' | 'destructive';
+  className?: string;
+}
+```
diff --git a/docs/reference/components/data-display/list.mdx b/docs/reference/components/data-display/list.mdx
new file mode 100644
index 000000000..6b72e366a
--- /dev/null
+++ b/docs/reference/components/data-display/list.mdx
@@ -0,0 +1,44 @@
+---
+title: "List"
+description: "Display a list of items"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# List
+
+Display a list of items
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "list",
+      items: [
+            {
+                  type: "text",
+                  content: "Item 1"
+            },
+            {
+                  type: "text",
+                  content: "Item 2"
+            },
+            {
+                  type: "text",
+                  content: "Item 3"
+            }
+      ]
+}}
+    title="Basic List"
+  />
+
+## Schema
+
+```typescript
+interface ListSchema {
+  type: 'list';
+  items: SchemaNode[];
+  ordered?: boolean;
+  className?: string;
+}
+```
diff --git a/docs/reference/components/data-display/meta.json b/docs/reference/components/data-display/meta.json
new file mode 100644
index 000000000..84cd041cc
--- /dev/null
+++ b/docs/reference/components/data-display/meta.json
@@ -0,0 +1,9 @@
+{
+  "title": "Data Display",
+  "pages": [
+    "badge",
+    "avatar",
+    "alert",
+    "list"
+  ]
+}
diff --git a/docs/reference/components/disclosure/accordion.mdx b/docs/reference/components/disclosure/accordion.mdx
new file mode 100644
index 000000000..31aa752d8
--- /dev/null
+++ b/docs/reference/components/disclosure/accordion.mdx
@@ -0,0 +1,47 @@
+---
+title: "Accordion"
+description: "Expandable content sections"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Accordion
+
+Expandable content sections
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "accordion",
+      items: [
+            {
+                  title: "Section 1",
+                  content: "Content for section 1"
+            },
+            {
+                  title: "Section 2",
+                  content: "Content for section 2"
+            },
+            {
+                  title: "Section 3",
+                  content: "Content for section 3"
+            }
+      ]
+}}
+    title="Basic Accordion"
+  />
+
+## Schema
+
+```typescript
+interface AccordionSchema {
+  type: 'accordion';
+  items: Array<{
+    title: string;
+    content: string | SchemaNode;
+  }>;
+  defaultOpen?: number[];
+  multiple?: boolean;
+}
+```
diff --git a/docs/reference/components/disclosure/collapsible.mdx b/docs/reference/components/disclosure/collapsible.mdx
new file mode 100644
index 000000000..0417f3962
--- /dev/null
+++ b/docs/reference/components/disclosure/collapsible.mdx
@@ -0,0 +1,40 @@
+---
+title: "Collapsible"
+description: "Toggle visibility of content"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Collapsible
+
+Toggle visibility of content
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "collapsible",
+      trigger: {
+            type: "button",
+            label: "Toggle"
+      },
+      children: [
+            {
+                  type: "text",
+                  content: "Hidden content"
+            }
+      ]
+}}
+    title="Basic Collapsible"
+  />
+
+## Schema
+
+```typescript
+interface CollapsibleSchema {
+  type: 'collapsible';
+  trigger: SchemaNode;
+  children: SchemaNode[];
+  defaultOpen?: boolean;
+}
+```
diff --git a/docs/reference/components/disclosure/meta.json b/docs/reference/components/disclosure/meta.json
new file mode 100644
index 000000000..019b84645
--- /dev/null
+++ b/docs/reference/components/disclosure/meta.json
@@ -0,0 +1,7 @@
+{
+  "title": "Disclosure",
+  "pages": [
+    "accordion",
+    "collapsible"
+  ]
+}
diff --git a/docs/reference/components/feedback/loading.mdx b/docs/reference/components/feedback/loading.mdx
new file mode 100644
index 000000000..7888a48d2
--- /dev/null
+++ b/docs/reference/components/feedback/loading.mdx
@@ -0,0 +1,48 @@
+---
+title: "Loading"
+description: "Loading spinner to indicate processing"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Loading
+
+Loading spinner to indicate processing
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "loading"
+}}
+    title="Basic Loading"
+  />
+
+  <ComponentDemo
+    schema={{
+      type: "stack",
+      gap: 2,
+      align: "center",
+      children: [
+            {
+                  type: "loading"
+            },
+            {
+                  type: "text",
+                  content: "Loading...",
+                  variant: "muted"
+            }
+      ]
+}}
+    title="With Text"
+  />
+
+## Schema
+
+```typescript
+interface LoadingSchema {
+  type: 'loading';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+```
diff --git a/docs/reference/components/feedback/meta.json b/docs/reference/components/feedback/meta.json
new file mode 100644
index 000000000..9353c60c4
--- /dev/null
+++ b/docs/reference/components/feedback/meta.json
@@ -0,0 +1,8 @@
+{
+  "title": "Feedback",
+  "pages": [
+    "loading",
+    "progress",
+    "skeleton"
+  ]
+}
diff --git a/docs/reference/components/feedback/progress.mdx b/docs/reference/components/feedback/progress.mdx
new file mode 100644
index 000000000..ab9ce5465
--- /dev/null
+++ b/docs/reference/components/feedback/progress.mdx
@@ -0,0 +1,52 @@
+---
+title: "Progress"
+description: "Progress bar to show completion status"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Progress
+
+Progress bar to show completion status
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "progress",
+      value: 60
+}}
+    title="Progress Bar"
+  />
+
+  <ComponentDemo
+    schema={{
+      type: "stack",
+      gap: 3,
+      children: [
+            {
+                  type: "progress",
+                  value: 25
+            },
+            {
+                  type: "progress",
+                  value: 50
+            },
+            {
+                  type: "progress",
+                  value: 75
+            }
+      ]
+}}
+    title="Different Values"
+  />
+
+## Schema
+
+```typescript
+interface ProgressSchema {
+  type: 'progress';
+  value: number;           // 0-100
+  className?: string;
+}
+```
diff --git a/docs/reference/components/feedback/skeleton.mdx b/docs/reference/components/feedback/skeleton.mdx
new file mode 100644
index 000000000..d2442b044
--- /dev/null
+++ b/docs/reference/components/feedback/skeleton.mdx
@@ -0,0 +1,48 @@
+---
+title: "Skeleton"
+description: "Placeholder for loading content"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Skeleton
+
+Placeholder for loading content
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "stack",
+      gap: 2,
+      children: [
+            {
+                  type: "skeleton",
+                  width: "100%",
+                  height: 20
+            },
+            {
+                  type: "skeleton",
+                  width: "80%",
+                  height: 20
+            },
+            {
+                  type: "skeleton",
+                  width: "90%",
+                  height: 20
+            }
+      ]
+}}
+    title="Text Skeleton"
+  />
+
+## Schema
+
+```typescript
+interface SkeletonSchema {
+  type: 'skeleton';
+  width?: string | number;
+  height?: string | number;
+  className?: string;
+}
+```
diff --git a/docs/reference/components/form/checkbox.mdx b/docs/reference/components/form/checkbox.mdx
new file mode 100644
index 000000000..2918b80bd
--- /dev/null
+++ b/docs/reference/components/form/checkbox.mdx
@@ -0,0 +1,55 @@
+---
+title: "Checkbox"
+description: "Toggle selection with checkboxes"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Checkbox
+
+Toggle selection with checkboxes
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "checkbox",
+      label: "Accept terms and conditions"
+}}
+    title="Basic Checkbox"
+  />
+
+  <ComponentDemo
+    schema={{
+      type: "stack",
+      gap: 2,
+      children: [
+            {
+                  type: "checkbox",
+                  label: "Option 1"
+            },
+            {
+                  type: "checkbox",
+                  label: "Option 2"
+            },
+            {
+                  type: "checkbox",
+                  label: "Option 3"
+            }
+      ]
+}}
+    title="Multiple Checkboxes"
+  />
+
+## Schema
+
+```typescript
+interface CheckboxSchema {
+  type: 'checkbox';
+  name?: string;
+  label?: string;
+  defaultChecked?: boolean;
+  required?: boolean;
+  disabled?: boolean;
+}
+```
diff --git a/docs/reference/components/form/input.mdx b/docs/reference/components/form/input.mdx
new file mode 100644
index 000000000..0af0479fb
--- /dev/null
+++ b/docs/reference/components/form/input.mdx
@@ -0,0 +1,74 @@
+---
+title: "Input"
+description: "Basic text input field for user data entry"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Input
+
+Basic text input field for user data entry
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "input",
+      placeholder: "Enter text..."
+}}
+    title="Basic Input"
+  />
+
+  <ComponentDemo
+    schema={{
+      type: "input",
+      name: "email",
+      label: "Email",
+      placeholder: "you@example.com"
+}}
+    title="With Label"
+  />
+
+  <ComponentDemo
+    schema={{
+      type: "stack",
+      gap: 3,
+      children: [
+            {
+                  type: "input",
+                  label: "Email",
+                  inputType: "email",
+                  placeholder: "email@example.com"
+            },
+            {
+                  type: "input",
+                  label: "Password",
+                  inputType: "password",
+                  placeholder: "••••••••"
+            },
+            {
+                  type: "input",
+                  label: "Number",
+                  inputType: "number",
+                  placeholder: "123"
+            }
+      ]
+}}
+    title="Input Types"
+  />
+
+## Schema
+
+```typescript
+interface InputSchema {
+  type: 'input';
+  name?: string;
+  label?: string;
+  inputType?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
+  placeholder?: string;
+  defaultValue?: string | number;
+  required?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+}
+```
diff --git a/docs/reference/components/form/meta.json b/docs/reference/components/form/meta.json
new file mode 100644
index 000000000..449b89971
--- /dev/null
+++ b/docs/reference/components/form/meta.json
@@ -0,0 +1,12 @@
+{
+  "title": "Form",
+  "pages": [
+    "button",
+    "input",
+    "select",
+    "checkbox",
+    "switch",
+    "textarea",
+    "slider"
+  ]
+}
diff --git a/docs/reference/components/form/select.mdx b/docs/reference/components/form/select.mdx
new file mode 100644
index 000000000..36f2f72fc
--- /dev/null
+++ b/docs/reference/components/form/select.mdx
@@ -0,0 +1,70 @@
+---
+title: "Select"
+description: "Dropdown selection from a list of options"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Select
+
+Dropdown selection from a list of options
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "select",
+      label: "Choose an option",
+      options: [
+            {
+                  label: "Option 1",
+                  value: "1"
+            },
+            {
+                  label: "Option 2",
+                  value: "2"
+            },
+            {
+                  type: "Option 3",
+                  value: "3"
+            }
+      ]
+}}
+    title="Basic Select"
+  />
+
+  <ComponentDemo
+    schema={{
+      type: "select",
+      placeholder: "Select...",
+      options: [
+            {
+                  label: "Red",
+                  value: "red"
+            },
+            {
+                  label: "Green",
+                  value: "green"
+            },
+            {
+                  label: "Blue",
+                  value: "blue"
+            }
+      ]
+}}
+    title="With Placeholder"
+  />
+
+## Schema
+
+```typescript
+interface SelectSchema {
+  type: 'select';
+  name?: string;
+  label?: string;
+  options: { label: string; value: string | number }[];
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+}
+```
diff --git a/docs/reference/components/form/slider.mdx b/docs/reference/components/form/slider.mdx
new file mode 100644
index 000000000..1ee607c8f
--- /dev/null
+++ b/docs/reference/components/form/slider.mdx
@@ -0,0 +1,35 @@
+---
+title: "Slider"
+description: "Select a value from a range"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Slider
+
+Select a value from a range
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "slider",
+      label: "Volume",
+      defaultValue: 50
+}}
+    title="Basic Slider"
+  />
+
+## Schema
+
+```typescript
+interface SliderSchema {
+  type: 'slider';
+  name?: string;
+  label?: string;
+  min?: number;
+  max?: number;
+  step?: number;
+  defaultValue?: number;
+}
+```
diff --git a/docs/reference/components/form/switch.mdx b/docs/reference/components/form/switch.mdx
new file mode 100644
index 000000000..1cef938ef
--- /dev/null
+++ b/docs/reference/components/form/switch.mdx
@@ -0,0 +1,54 @@
+---
+title: "Switch"
+description: "Toggle switch for binary options"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Switch
+
+Toggle switch for binary options
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "switch",
+      label: "Enable notifications"
+}}
+    title="Basic Switch"
+  />
+
+  <ComponentDemo
+    schema={{
+      type: "stack",
+      gap: 3,
+      children: [
+            {
+                  type: "switch",
+                  label: "Email notifications"
+            },
+            {
+                  type: "switch",
+                  label: "Push notifications"
+            },
+            {
+                  type: "switch",
+                  label: "SMS notifications"
+            }
+      ]
+}}
+    title="Multiple Switches"
+  />
+
+## Schema
+
+```typescript
+interface SwitchSchema {
+  type: 'switch';
+  name?: string;
+  label?: string;
+  defaultChecked?: boolean;
+  disabled?: boolean;
+}
+```
diff --git a/docs/reference/components/form/textarea.mdx b/docs/reference/components/form/textarea.mdx
new file mode 100644
index 000000000..acf9e98e2
--- /dev/null
+++ b/docs/reference/components/form/textarea.mdx
@@ -0,0 +1,44 @@
+---
+title: "Textarea"
+description: "Multi-line text input for longer content"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Textarea
+
+Multi-line text input for longer content
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "textarea",
+      placeholder: "Enter your message..."
+}}
+    title="Basic Textarea"
+  />
+
+  <ComponentDemo
+    schema={{
+      type: "textarea",
+      label: "Description",
+      placeholder: "Describe your issue...",
+      rows: 5
+}}
+    title="With Label"
+  />
+
+## Schema
+
+```typescript
+interface TextareaSchema {
+  type: 'textarea';
+  name?: string;
+  label?: string;
+  placeholder?: string;
+  rows?: number;
+  required?: boolean;
+  disabled?: boolean;
+}
+```
diff --git a/docs/reference/components/index.md b/docs/reference/components/index.md
index e8643e0e5..7a27428d2 100644
--- a/docs/reference/components/index.md
+++ b/docs/reference/components/index.md
@@ -20,20 +20,55 @@ import { registerDefaultRenderers } from '@object-ui/components'
 registerDefaultRenderers()
 ```
 
-## Component Reference
+## Component Categories
 
-Detailed documentation for each component category:
+Browse components organized by category:
 
-*   [Basic Components](./basic.md) (Text, Image, Icon, HTML)
-*   [Layout Components](./layout.md) (Grid, Card, Container, etc.)
-*   [Form Components](./form.md) (Input, Select, Checkbox, Form, etc.)
-*   [Data Display](./data-display.md) (Table, List, Tag, Tree, etc.)
-*   [Navigation](./navigation.md) (Button, Link, Menu, etc.)
-*   [Feedback](./feedback.md) (Alert, Progress, Toast, etc.)
-*   [Overlay](./overlay.md) (Dialog, Drawer, Tooltip, etc.)
+### [Basic Components](./basic)
+
+Fundamental UI elements for displaying simple content.
+- Text, Icon, Image, HTML, Separator
+
+### [Form Components](./form)
+
+Components for user input and data collection.
+- Button, Input, Select, Checkbox, Switch, Textarea, Slider
+
+### [Layout Components](./layout)
+
+Organize and structure your interface.
+- Container, Card, Grid, Flex, Stack, Tabs
+
+### [Data Display](./data-display)
+
+Present information and data to users.
+- Badge, Avatar, Alert, List
+
+### [Feedback](./feedback)
+
+Provide visual feedback to user actions.
+- Loading, Progress, Skeleton
+
+### [Overlay](./overlay)
+
+Floating UI elements and modals.
+- Dialog, Drawer, Tooltip, Popover
+
+### [Disclosure](./disclosure)
+
+Show and hide content progressively.
+- Accordion, Collapsible
+
+### [Complex](./complex)
+
+Advanced components for complex UIs.
+- Table
 
 ## Plugins
 
-*   [Charts](./charts.md) (Bar, Line, Pie, etc.)
-*   [Kanban](./kanban.md) (Board View)
-*   [Markdown](./markdown.md) (Rich Text)
+Additional specialized components are available as plugins:
+
+*   [Charts](./charts) - Visualization components (Bar, Line, Pie, etc.)
+*   [Kanban](./kanban) - Board view for task management
+*   [Markdown](./markdown) - Rich text rendering
+*   [Calendar View](./calendar-view) - Full-featured calendar
diff --git a/docs/reference/components/layout/card.mdx b/docs/reference/components/layout/card.mdx
new file mode 100644
index 000000000..4fe376ea2
--- /dev/null
+++ b/docs/reference/components/layout/card.mdx
@@ -0,0 +1,74 @@
+---
+title: "Card"
+description: "Container with header, content, and footer sections"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Card
+
+Container with header, content, and footer sections
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "card",
+      title: "Card Title",
+      description: "Card description",
+      children: [
+            {
+                  type: "text",
+                  content: "Card content goes here"
+            }
+      ]
+}}
+    title="Basic Card"
+  />
+
+  <ComponentDemo
+    schema={{
+      type: "card",
+      title: "Settings",
+      children: [
+            {
+                  type: "text",
+                  content: "Configure your preferences"
+            }
+      ],
+      footer: [
+            {
+                  type: "flex",
+                  gap: 2,
+                  justify: "end",
+                  children: [
+                        {
+                              type: "button",
+                              label: "Cancel",
+                              variant: "outline"
+                        },
+                        {
+                              type: "button",
+                              label: "Save",
+                              variant: "default"
+                        }
+                  ]
+            }
+      ]
+}}
+    title="With Footer"
+  />
+
+## Schema
+
+```typescript
+interface CardSchema {
+  type: 'card';
+  title?: string;
+  description?: string;
+  children?: SchemaNode[];
+  header?: SchemaNode[];
+  footer?: SchemaNode[];
+  className?: string;
+}
+```
diff --git a/docs/reference/components/layout/container.mdx b/docs/reference/components/layout/container.mdx
new file mode 100644
index 000000000..4a695a76e
--- /dev/null
+++ b/docs/reference/components/layout/container.mdx
@@ -0,0 +1,36 @@
+---
+title: "Container"
+description: "Centered content container with max-width"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Container
+
+Centered content container with max-width
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "container",
+      children: [
+            {
+                  type: "text",
+                  content: "Content inside container",
+                  variant: "h3"
+            }
+      ]
+}}
+    title="Basic Container"
+  />
+
+## Schema
+
+```typescript
+interface ContainerSchema {
+  type: 'container';
+  children: SchemaNode[];
+  className?: string;
+}
+```
diff --git a/docs/reference/components/layout/flex.mdx b/docs/reference/components/layout/flex.mdx
new file mode 100644
index 000000000..846f848b0
--- /dev/null
+++ b/docs/reference/components/layout/flex.mdx
@@ -0,0 +1,49 @@
+---
+title: "Flex"
+description: "Flexible box layout container"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Flex
+
+Flexible box layout container
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "flex",
+      gap: 3,
+      children: [
+            {
+                  type: "button",
+                  label: "Button 1"
+            },
+            {
+                  type: "button",
+                  label: "Button 2"
+            },
+            {
+                  type: "button",
+                  label: "Button 3"
+            }
+      ]
+}}
+    title="Horizontal Layout"
+  />
+
+## Schema
+
+```typescript
+interface FlexSchema {
+  type: 'flex';
+  direction?: 'row' | 'column';
+  gap?: number;
+  align?: 'start' | 'center' | 'end';
+  justify?: 'start' | 'center' | 'end' | 'between';
+  wrap?: boolean;
+  children: SchemaNode[];
+  className?: string;
+}
+```
diff --git a/docs/reference/components/layout/grid.mdx b/docs/reference/components/layout/grid.mdx
new file mode 100644
index 000000000..33def30c0
--- /dev/null
+++ b/docs/reference/components/layout/grid.mdx
@@ -0,0 +1,55 @@
+---
+title: "Grid"
+description: "Responsive grid layout container"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Grid
+
+Responsive grid layout container
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "grid",
+      columns: 2,
+      gap: 4,
+      children: [
+            {
+                  type: "card",
+                  title: "Card 1",
+                  children: [
+                        {
+                              type: "text",
+                              content: "Content 1"
+                        }
+                  ]
+            },
+            {
+                  type: "card",
+                  title: "Card 2",
+                  children: [
+                        {
+                              type: "text",
+                              content: "Content 2"
+                        }
+                  ]
+            }
+      ]
+}}
+    title="2 Column Grid"
+  />
+
+## Schema
+
+```typescript
+interface GridSchema {
+  type: 'grid';
+  columns?: number;
+  gap?: number;
+  children: SchemaNode[];
+  className?: string;
+}
+```
diff --git a/docs/reference/components/layout/meta.json b/docs/reference/components/layout/meta.json
new file mode 100644
index 000000000..52c471e6a
--- /dev/null
+++ b/docs/reference/components/layout/meta.json
@@ -0,0 +1,11 @@
+{
+  "title": "Layout",
+  "pages": [
+    "container",
+    "card",
+    "grid",
+    "flex",
+    "stack",
+    "tabs"
+  ]
+}
diff --git a/docs/reference/components/layout/stack.mdx b/docs/reference/components/layout/stack.mdx
new file mode 100644
index 000000000..dfb115d42
--- /dev/null
+++ b/docs/reference/components/layout/stack.mdx
@@ -0,0 +1,46 @@
+---
+title: "Stack"
+description: "Vertical stack layout for organizing content"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Stack
+
+Vertical stack layout for organizing content
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "stack",
+      gap: 3,
+      children: [
+            {
+                  type: "text",
+                  content: "Item 1",
+                  variant: "h3"
+            },
+            {
+                  type: "text",
+                  content: "Item 2"
+            },
+            {
+                  type: "text",
+                  content: "Item 3"
+            }
+      ]
+}}
+    title="Basic Stack"
+  />
+
+## Schema
+
+```typescript
+interface StackSchema {
+  type: 'stack';
+  gap?: number;
+  children: SchemaNode[];
+  className?: string;
+}
+```
diff --git a/docs/reference/components/layout/tabs.mdx b/docs/reference/components/layout/tabs.mdx
new file mode 100644
index 000000000..ba9ccae80
--- /dev/null
+++ b/docs/reference/components/layout/tabs.mdx
@@ -0,0 +1,61 @@
+---
+title: "Tabs"
+description: "Organize content into switchable tabs"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Tabs
+
+Organize content into switchable tabs
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "tabs",
+      items: [
+            {
+                  label: "Tab 1",
+                  content: [
+                        {
+                              type: "text",
+                              content: "Content 1"
+                        }
+                  ]
+            },
+            {
+                  label: "Tab 2",
+                  content: [
+                        {
+                              type: "text",
+                              content: "Content 2"
+                        }
+                  ]
+            },
+            {
+                  label: "Tab 3",
+                  content: [
+                        {
+                              type: "text",
+                              content: "Content 3"
+                        }
+                  ]
+            }
+      ]
+}}
+    title="Basic Tabs"
+  />
+
+## Schema
+
+```typescript
+interface TabsSchema {
+  type: 'tabs';
+  items: Array<{
+    label: string;
+    content: SchemaNode[];
+  }>;
+  defaultValue?: number;
+}
+```
diff --git a/docs/reference/components/overlay/dialog.mdx b/docs/reference/components/overlay/dialog.mdx
new file mode 100644
index 000000000..11b54b305
--- /dev/null
+++ b/docs/reference/components/overlay/dialog.mdx
@@ -0,0 +1,44 @@
+---
+title: "Dialog"
+description: "Modal dialog overlay for focused interactions"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Dialog
+
+Modal dialog overlay for focused interactions
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "dialog",
+      trigger: {
+            type: "button",
+            label: "Open Dialog"
+      },
+      title: "Dialog Title",
+      description: "Dialog description",
+      children: [
+            {
+                  type: "text",
+                  content: "Dialog content goes here"
+            }
+      ]
+}}
+    title="Dialog Trigger"
+  />
+
+## Schema
+
+```typescript
+interface DialogSchema {
+  type: 'dialog';
+  trigger: SchemaNode;
+  title?: string;
+  description?: string;
+  children: SchemaNode[];
+  footer?: SchemaNode[];
+}
+```
diff --git a/docs/reference/components/overlay/drawer.mdx b/docs/reference/components/overlay/drawer.mdx
new file mode 100644
index 000000000..ee6e3473e
--- /dev/null
+++ b/docs/reference/components/overlay/drawer.mdx
@@ -0,0 +1,42 @@
+---
+title: "Drawer"
+description: "Sliding panel from edge of screen"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Drawer
+
+Sliding panel from edge of screen
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "drawer",
+      trigger: {
+            type: "button",
+            label: "Open Drawer"
+      },
+      title: "Drawer Title",
+      children: [
+            {
+                  type: "text",
+                  content: "Drawer content"
+            }
+      ]
+}}
+    title="Basic Drawer"
+  />
+
+## Schema
+
+```typescript
+interface DrawerSchema {
+  type: 'drawer';
+  trigger: SchemaNode;
+  title?: string;
+  children: SchemaNode[];
+  side?: 'left' | 'right' | 'top' | 'bottom';
+}
+```
diff --git a/docs/reference/components/overlay/meta.json b/docs/reference/components/overlay/meta.json
new file mode 100644
index 000000000..706a4540d
--- /dev/null
+++ b/docs/reference/components/overlay/meta.json
@@ -0,0 +1,9 @@
+{
+  "title": "Overlay",
+  "pages": [
+    "dialog",
+    "drawer",
+    "tooltip",
+    "popover"
+  ]
+}
diff --git a/docs/reference/components/overlay/popover.mdx b/docs/reference/components/overlay/popover.mdx
new file mode 100644
index 000000000..04dd6d781
--- /dev/null
+++ b/docs/reference/components/overlay/popover.mdx
@@ -0,0 +1,40 @@
+---
+title: "Popover"
+description: "Floating content panel"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Popover
+
+Floating content panel
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "popover",
+      trigger: {
+            type: "button",
+            label: "Open Popover"
+      },
+      children: [
+            {
+                  type: "text",
+                  content: "Popover content"
+            }
+      ]
+}}
+    title="Basic Popover"
+  />
+
+## Schema
+
+```typescript
+interface PopoverSchema {
+  type: 'popover';
+  trigger: SchemaNode;
+  children: SchemaNode[];
+  side?: 'top' | 'right' | 'bottom' | 'left';
+}
+```
diff --git a/docs/reference/components/overlay/tooltip.mdx b/docs/reference/components/overlay/tooltip.mdx
new file mode 100644
index 000000000..9c79c1837
--- /dev/null
+++ b/docs/reference/components/overlay/tooltip.mdx
@@ -0,0 +1,37 @@
+---
+title: "Tooltip"
+description: "Contextual information on hover"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+# Tooltip
+
+Contextual information on hover
+
+## Examples
+
+  <ComponentDemo
+    schema={{
+      type: "tooltip",
+      content: "Helpful information",
+      children: [
+            {
+                  type: "button",
+                  label: "Hover me"
+            }
+      ]
+}}
+    title="Basic Tooltip"
+  />
+
+## Schema
+
+```typescript
+interface TooltipSchema {
+  type: 'tooltip';
+  content: string;
+  children: SchemaNode;
+  side?: 'top' | 'right' | 'bottom' | 'left';
+}
+```

From baf41370dcbf816d4193c348f55f0bc3a201bf25 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 21 Jan 2026 15:41:49 +0000
Subject: [PATCH 4/4] Fix ObjectUIProvider and update pnpm lockfile

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
---
 apps/site/app/components/ObjectUIProvider.tsx | 10 ++--
 pnpm-lock.yaml                                | 48 ++++++++++++++-----
 2 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/apps/site/app/components/ObjectUIProvider.tsx b/apps/site/app/components/ObjectUIProvider.tsx
index 2422dd36c..ff309ca3c 100644
--- a/apps/site/app/components/ObjectUIProvider.tsx
+++ b/apps/site/app/components/ObjectUIProvider.tsx
@@ -1,13 +1,9 @@
 'use client';
 
-import { useEffect } from 'react';
-import { registerDefaultRenderers } from '@object-ui/components';
+// Import components to trigger registration
+import '@object-ui/components';
 
 export function ObjectUIProvider({ children }: { children: React.ReactNode }) {
-  useEffect(() => {
-    // Register all default ObjectUI components
-    registerDefaultRenderers();
-  }, []);
-
+  // Components are auto-registered on import
   return <>{children}</>;
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dfa935534..81ceece3b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -105,15 +105,30 @@ importers:
 
   apps/site:
     dependencies:
+      '@object-ui/components':
+        specifier: workspace:*
+        version: link:../../packages/components
+      '@object-ui/core':
+        specifier: workspace:*
+        version: link:../../packages/core
+      '@object-ui/react':
+        specifier: workspace:*
+        version: link:../../packages/react
+      '@object-ui/types':
+        specifier: workspace:*
+        version: link:../../packages/types
       fumadocs-core:
         specifier: ^16.4.7
-        version: 16.4.7(@types/react@19.0.6)(algoliasearch@5.46.3)(lucide-react@0.562.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@3.25.76)
+        version: 16.4.7(@types/react@19.0.6)(algoliasearch@5.46.3)(lucide-react@0.468.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@3.25.76)
       fumadocs-mdx:
         specifier: ^14.2.6
-        version: 14.2.6(@types/react@19.0.6)(fumadocs-core@16.4.7(@types/react@19.0.6)(algoliasearch@5.46.3)(lucide-react@0.562.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@3.25.76))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2))
+        version: 14.2.6(@types/react@19.0.6)(fumadocs-core@16.4.7(@types/react@19.0.6)(algoliasearch@5.46.3)(lucide-react@0.468.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@3.25.76))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2))
       fumadocs-ui:
         specifier: ^16.4.7
-        version: 16.4.7(@types/react-dom@19.0.3(@types/react@19.0.6))(@types/react@19.0.6)(fumadocs-core@16.4.7(@types/react@19.0.6)(algoliasearch@5.46.3)(lucide-react@0.562.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@3.25.76))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(tailwindcss@4.1.18)
+        version: 16.4.7(@types/react-dom@19.0.3(@types/react@19.0.6))(@types/react@19.0.6)(fumadocs-core@16.4.7(@types/react@19.0.6)(algoliasearch@5.46.3)(lucide-react@0.468.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@3.25.76))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(tailwindcss@4.1.18)
+      lucide-react:
+        specifier: ^0.468.0
+        version: 0.468.0(react@19.2.3)
       next:
         specifier: ^16.1.4
         version: 16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -4827,6 +4842,11 @@ packages:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
 
+  lucide-react@0.468.0:
+    resolution: {integrity: sha512-6koYRhnM2N0GGZIdXzSeiNwguv1gt/FAjZOiPl76roBi3xKEXa4WmfpxgQwTTL4KipXjefrnf3oV4IsYhi4JFA==}
+    peerDependencies:
+      react: 19.2.3
+
   lucide-react@0.562.0:
     resolution: {integrity: sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw==}
     peerDependencies:
@@ -7209,9 +7229,9 @@ snapshots:
       '@formatjs/fast-memoize': 3.0.3
       tslib: 2.8.1
 
-  '@fumadocs/ui@16.4.7(@types/react@19.0.6)(fumadocs-core@16.4.7(@types/react@19.0.6)(algoliasearch@5.46.3)(lucide-react@0.562.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@3.25.76))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(tailwindcss@4.1.18)':
+  '@fumadocs/ui@16.4.7(@types/react@19.0.6)(fumadocs-core@16.4.7(@types/react@19.0.6)(algoliasearch@5.46.3)(lucide-react@0.468.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@3.25.76))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(tailwindcss@4.1.18)':
     dependencies:
-      fumadocs-core: 16.4.7(@types/react@19.0.6)(algoliasearch@5.46.3)(lucide-react@0.562.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@3.25.76)
+      fumadocs-core: 16.4.7(@types/react@19.0.6)(algoliasearch@5.46.3)(lucide-react@0.468.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@3.25.76)
       next-themes: 0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       postcss-selector-parser: 7.1.1
       react: 19.2.3
@@ -10086,7 +10106,7 @@ snapshots:
   fsevents@2.3.3:
     optional: true
 
-  fumadocs-core@16.4.7(@types/react@19.0.6)(algoliasearch@5.46.3)(lucide-react@0.562.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@3.25.76):
+  fumadocs-core@16.4.7(@types/react@19.0.6)(algoliasearch@5.46.3)(lucide-react@0.468.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@3.25.76):
     dependencies:
       '@formatjs/intl-localematcher': 0.7.5
       '@orama/orama': 3.1.18
@@ -10110,7 +10130,7 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.0.6
       algoliasearch: 5.46.3
-      lucide-react: 0.562.0(react@19.2.3)
+      lucide-react: 0.468.0(react@19.2.3)
       next: 16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
@@ -10119,14 +10139,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  fumadocs-mdx@14.2.6(@types/react@19.0.6)(fumadocs-core@16.4.7(@types/react@19.0.6)(algoliasearch@5.46.3)(lucide-react@0.562.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@3.25.76))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)):
+  fumadocs-mdx@14.2.6(@types/react@19.0.6)(fumadocs-core@16.4.7(@types/react@19.0.6)(algoliasearch@5.46.3)(lucide-react@0.468.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@3.25.76))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)):
     dependencies:
       '@mdx-js/mdx': 3.1.1
       '@standard-schema/spec': 1.1.0
       chokidar: 5.0.0
       esbuild: 0.27.2
       estree-util-value-to-estree: 3.5.0
-      fumadocs-core: 16.4.7(@types/react@19.0.6)(algoliasearch@5.46.3)(lucide-react@0.562.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@3.25.76)
+      fumadocs-core: 16.4.7(@types/react@19.0.6)(algoliasearch@5.46.3)(lucide-react@0.468.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@3.25.76)
       js-yaml: 4.1.1
       mdast-util-to-markdown: 2.1.2
       picocolors: 1.1.1
@@ -10147,9 +10167,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  fumadocs-ui@16.4.7(@types/react-dom@19.0.3(@types/react@19.0.6))(@types/react@19.0.6)(fumadocs-core@16.4.7(@types/react@19.0.6)(algoliasearch@5.46.3)(lucide-react@0.562.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@3.25.76))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(tailwindcss@4.1.18):
+  fumadocs-ui@16.4.7(@types/react-dom@19.0.3(@types/react@19.0.6))(@types/react@19.0.6)(fumadocs-core@16.4.7(@types/react@19.0.6)(algoliasearch@5.46.3)(lucide-react@0.468.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@3.25.76))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(tailwindcss@4.1.18):
     dependencies:
-      '@fumadocs/ui': 16.4.7(@types/react@19.0.6)(fumadocs-core@16.4.7(@types/react@19.0.6)(algoliasearch@5.46.3)(lucide-react@0.562.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@3.25.76))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(tailwindcss@4.1.18)
+      '@fumadocs/ui': 16.4.7(@types/react@19.0.6)(fumadocs-core@16.4.7(@types/react@19.0.6)(algoliasearch@5.46.3)(lucide-react@0.468.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@3.25.76))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(tailwindcss@4.1.18)
       '@radix-ui/react-accordion': 1.2.12(@types/react-dom@19.0.3(@types/react@19.0.6))(@types/react@19.0.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@19.0.3(@types/react@19.0.6))(@types/react@19.0.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.0.3(@types/react@19.0.6))(@types/react@19.0.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -10161,7 +10181,7 @@ snapshots:
       '@radix-ui/react-slot': 1.2.4(@types/react@19.0.6)(react@19.2.3)
       '@radix-ui/react-tabs': 1.1.13(@types/react-dom@19.0.3(@types/react@19.0.6))(@types/react@19.0.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       class-variance-authority: 0.7.1
-      fumadocs-core: 16.4.7(@types/react@19.0.6)(algoliasearch@5.46.3)(lucide-react@0.562.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@3.25.76)
+      fumadocs-core: 16.4.7(@types/react@19.0.6)(algoliasearch@5.46.3)(lucide-react@0.468.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@3.25.76)
       lucide-react: 0.562.0(react@19.2.3)
       next-themes: 0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react: 19.2.3
@@ -10734,6 +10754,10 @@ snapshots:
     dependencies:
       yallist: 4.0.0
 
+  lucide-react@0.468.0(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+
   lucide-react@0.562.0(react@19.2.3):
     dependencies:
       react: 19.2.3