objectstack-ai · huangyiirene · Jan 21, 2026 · Jan 21, 2026 · Jan 21, 2026 · Jan 21, 2026
diff --git a/apps/site/app/components/ComponentDemo.tsx 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
@@ -0,0 +1,9 @@
+'use client';
+
+// Import components to trigger registration
+import '@object-ui/components';
+
+export function ObjectUIProvider({ children }: { children: React.ReactNode }) {
+  // Components are auto-registered on import
+  return <>{children}</>;
+}
diff --git 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
@@ -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
@@ -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/html.mdx 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
@@ -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
@@ -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
@@ -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
@@ -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;
+}
+```