ObjectUIComponentsComplex
Resizable
Resizable panel groups with draggable handles
The Resizable component creates adjustable panel layouts with draggable handles, perfect for split views and customizable interfaces.
Basic Usage
Horizontal Split
{
"type": "resizable",
"direction": "horizontal",
"minHeight": "200px",
"className": "rounded-lg border",
"panels": [
{
"defaultSize": 50,
"content": [
{
"type": "div",
"className": "p-4 h-full flex items-center justify-center bg-slate-50",
"children": [
{
"type": "text",
"content": "Panel 1"
}
]
}
]
},
{
"defaultSize": 50,
"content": [
{
"type": "div",
"className": "p-4 h-full flex items-center justify-center bg-slate-100",
"children": [
{
"type": "text",
"content": "Panel 2"
}
]
}
]
}
]
}Vertical Layout
Vertical Split
{
"type": "resizable",
"direction": "vertical",
"minHeight": "400px",
"className": "rounded-lg border",
"panels": [
{
"defaultSize": 60,
"content": [
{
"type": "div",
"className": "p-4 h-full bg-blue-50",
"children": [
{
"type": "text",
"content": "Top Panel",
"className": "font-semibold"
}
]
}
]
},
{
"defaultSize": 40,
"content": [
{
"type": "div",
"className": "p-4 h-full bg-green-50",
"children": [
{
"type": "text",
"content": "Bottom Panel",
"className": "font-semibold"
}
]
}
]
}
]
}Three Panels
Triple Split
{
"type": "resizable",
"direction": "horizontal",
"minHeight": "250px",
"withHandle": true,
"className": "rounded-lg border",
"panels": [
{
"defaultSize": 25,
"minSize": 15,
"content": [
{
"type": "div",
"className": "p-4 h-full bg-purple-50",
"children": [
{
"type": "text",
"content": "Sidebar"
}
]
}
]
},
{
"defaultSize": 50,
"content": [
{
"type": "div",
"className": "p-4 h-full bg-slate-50",
"children": [
{
"type": "text",
"content": "Main Content"
}
]
}
]
},
{
"defaultSize": 25,
"minSize": 15,
"content": [
{
"type": "div",
"className": "p-4 h-full bg-amber-50",
"children": [
{
"type": "text",
"content": "Inspector"
}
]
}
]
}
]
}Schema
interface ResizablePanel {
defaultSize: number; // Initial size percentage
minSize?: number; // Minimum size percentage
maxSize?: number; // Maximum size percentage
content: SchemaNode | SchemaNode[]; // Panel content
}
interface ResizableSchema {
type: 'resizable';
// Configuration
direction?: 'horizontal' | 'vertical'; // Panel direction (default: 'horizontal')
minHeight?: string; // Minimum container height
withHandle?: boolean; // Show handle icons (default: true)
// Panels
panels: ResizablePanel[]; // Array of panel configurations
// Styling
className?: string; // Tailwind CSS classes
// Base properties
id?: string;
visible?: boolean | string;
testId?: string;
}Examples
Code Editor Layout
Editor Interface
{
"type": "resizable",
"direction": "horizontal",
"minHeight": "400px",
"className": "rounded-lg border",
"panels": [
{
"defaultSize": 30,
"minSize": 20,
"content": [
{
"type": "div",
"className": "p-4 h-full bg-slate-900 text-slate-50",
"children": [
{
"type": "text",
"content": "File Explorer",
"className": "font-semibold mb-4 block"
},
{
"type": "tree-view",
"className": "bg-slate-800 text-slate-100",
"nodes": [
{
"id": "1",
"label": "src",
"icon": "folder",
"children": [
{
"id": "2",
"label": "components",
"icon": "folder"
},
{
"id": "3",
"label": "index.ts",
"icon": "file"
}
]
},
{
"id": "4",
"label": "README.md",
"icon": "file"
}
]
}
]
}
]
},
{
"defaultSize": 70,
"content": [
{
"type": "div",
"className": "p-4 h-full bg-slate-950 text-slate-50 font-mono text-sm",
"children": [
{
"type": "text",
"content": "// Code editor\nfunction hello() {\n console.log(\"Hello World\");\n}",
"className": "whitespace-pre"
}
]
}
]
}
]
}Dashboard Layout
Complex Layout
{
"type": "resizable",
"direction": "vertical",
"minHeight": "500px",
"className": "rounded-lg border",
"panels": [
{
"defaultSize": 70,
"content": [
{
"type": "resizable",
"direction": "horizontal",
"className": "h-full",
"panels": [
{
"defaultSize": 65,
"content": [
{
"type": "div",
"className": "p-6 h-full",
"children": [
{
"type": "text",
"content": "Main Dashboard",
"className": "text-xl font-bold mb-4"
},
{
"type": "grid",
"cols": 2,
"gap": 4,
"children": [
{
"type": "statistic",
"label": "Revenue",
"value": "$45,231"
},
{
"type": "statistic",
"label": "Users",
"value": "12,543"
}
]
}
]
}
]
},
{
"defaultSize": 35,
"minSize": 25,
"content": [
{
"type": "div",
"className": "p-6 h-full bg-slate-50",
"children": [
{
"type": "text",
"content": "Activity Feed",
"className": "font-semibold"
}
]
}
]
}
]
}
]
},
{
"defaultSize": 30,
"minSize": 20,
"content": [
{
"type": "div",
"className": "p-6 h-full bg-slate-100",
"children": [
{
"type": "text",
"content": "Details Panel",
"className": "font-semibold"
}
]
}
]
}
]
}Mail Client
Mail Layout
{
"type": "resizable",
"direction": "horizontal",
"minHeight": "350px",
"className": "rounded-lg border",
"panels": [
{
"defaultSize": 20,
"minSize": 15,
"content": [
{
"type": "div",
"className": "p-4 h-full border-r",
"children": [
{
"type": "text",
"content": "Folders",
"className": "font-semibold mb-3 block"
},
{
"type": "text",
"content": "📧 Inbox",
"className": "block py-2 cursor-pointer hover:bg-slate-50 px-2 rounded"
},
{
"type": "text",
"content": "📤 Sent",
"className": "block py-2 cursor-pointer hover:bg-slate-50 px-2 rounded"
},
{
"type": "text",
"content": "🗑️ Trash",
"className": "block py-2 cursor-pointer hover:bg-slate-50 px-2 rounded"
}
]
}
]
},
{
"defaultSize": 40,
"content": [
{
"type": "div",
"className": "p-4 h-full border-r",
"children": [
{
"type": "text",
"content": "Messages",
"className": "font-semibold mb-3 block"
},
{
"type": "text",
"content": "Message list...",
"className": "text-sm text-muted-foreground"
}
]
}
]
},
{
"defaultSize": 40,
"content": [
{
"type": "div",
"className": "p-4 h-full",
"children": [
{
"type": "text",
"content": "Message Content",
"className": "font-semibold mb-3 block"
},
{
"type": "text",
"content": "Email body appears here...",
"className": "text-sm text-muted-foreground"
}
]
}
]
}
]
}