ObjectUIComponentsComplex
Scroll Area
Customizable scrollable container with styled scrollbars
The Scroll Area component provides a scrollable container with styled scrollbars that match your design system.
Basic Usage
Vertical Scroll
{
"type": "scroll-area",
"height": "200px",
"className": "rounded-md border p-4",
"content": [
{
"type": "div",
"children": [
{
"type": "text",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}
]
}
]
}Horizontal Scroll
Horizontal Scroll
{
"type": "scroll-area",
"width": "100%",
"height": "150px",
"orientation": "horizontal",
"className": "rounded-md border",
"content": [
{
"type": "flex",
"gap": 4,
"className": "p-4",
"children": [
{
"type": "div",
"className": "w-40 h-32 bg-slate-200 rounded flex-shrink-0 flex items-center justify-center",
"children": [
{
"type": "text",
"content": "Item 1"
}
]
},
{
"type": "div",
"className": "w-40 h-32 bg-slate-200 rounded flex-shrink-0 flex items-center justify-center",
"children": [
{
"type": "text",
"content": "Item 2"
}
]
},
{
"type": "div",
"className": "w-40 h-32 bg-slate-200 rounded flex-shrink-0 flex items-center justify-center",
"children": [
{
"type": "text",
"content": "Item 3"
}
]
},
{
"type": "div",
"className": "w-40 h-32 bg-slate-200 rounded flex-shrink-0 flex items-center justify-center",
"children": [
{
"type": "text",
"content": "Item 4"
}
]
},
{
"type": "div",
"className": "w-40 h-32 bg-slate-200 rounded flex-shrink-0 flex items-center justify-center",
"children": [
{
"type": "text",
"content": "Item 5"
}
]
},
{
"type": "div",
"className": "w-40 h-32 bg-slate-200 rounded flex-shrink-0 flex items-center justify-center",
"children": [
{
"type": "text",
"content": "Item 6"
}
]
},
{
"type": "div",
"className": "w-40 h-32 bg-slate-200 rounded flex-shrink-0 flex items-center justify-center",
"children": [
{
"type": "text",
"content": "Item 7"
}
]
},
{
"type": "div",
"className": "w-40 h-32 bg-slate-200 rounded flex-shrink-0 flex items-center justify-center",
"children": [
{
"type": "text",
"content": "Item 8"
}
]
},
{
"type": "div",
"className": "w-40 h-32 bg-slate-200 rounded flex-shrink-0 flex items-center justify-center",
"children": [
{
"type": "text",
"content": "Item 9"
}
]
},
{
"type": "div",
"className": "w-40 h-32 bg-slate-200 rounded flex-shrink-0 flex items-center justify-center",
"children": [
{
"type": "text",
"content": "Item 10"
}
]
}
]
}
]
}Custom Heights
Short (150px)
{
"type": "scroll-area",
"height": "150px",
"className": "rounded-md border p-4",
"content": [
{
"type": "div",
"className": "space-y-2",
"children": [
{
"type": "text",
"content": "Line 1",
"className": "block"
},
{
"type": "text",
"content": "Line 2",
"className": "block"
},
{
"type": "text",
"content": "Line 3",
"className": "block"
},
{
"type": "text",
"content": "Line 4",
"className": "block"
},
{
"type": "text",
"content": "Line 5",
"className": "block"
},
{
"type": "text",
"content": "Line 6",
"className": "block"
},
{
"type": "text",
"content": "Line 7",
"className": "block"
},
{
"type": "text",
"content": "Line 8",
"className": "block"
},
{
"type": "text",
"content": "Line 9",
"className": "block"
},
{
"type": "text",
"content": "Line 10",
"className": "block"
},
{
"type": "text",
"content": "Line 11",
"className": "block"
},
{
"type": "text",
"content": "Line 12",
"className": "block"
},
{
"type": "text",
"content": "Line 13",
"className": "block"
},
{
"type": "text",
"content": "Line 14",
"className": "block"
},
{
"type": "text",
"content": "Line 15",
"className": "block"
},
{
"type": "text",
"content": "Line 16",
"className": "block"
},
{
"type": "text",
"content": "Line 17",
"className": "block"
},
{
"type": "text",
"content": "Line 18",
"className": "block"
},
{
"type": "text",
"content": "Line 19",
"className": "block"
},
{
"type": "text",
"content": "Line 20",
"className": "block"
}
]
}
]
}Tall (300px)
{
"type": "scroll-area",
"height": "300px",
"className": "rounded-md border p-4",
"content": [
{
"type": "div",
"className": "space-y-2",
"children": [
{
"type": "text",
"content": "Line 1",
"className": "block"
},
{
"type": "text",
"content": "Line 2",
"className": "block"
},
{
"type": "text",
"content": "Line 3",
"className": "block"
},
{
"type": "text",
"content": "Line 4",
"className": "block"
},
{
"type": "text",
"content": "Line 5",
"className": "block"
},
{
"type": "text",
"content": "Line 6",
"className": "block"
},
{
"type": "text",
"content": "Line 7",
"className": "block"
},
{
"type": "text",
"content": "Line 8",
"className": "block"
},
{
"type": "text",
"content": "Line 9",
"className": "block"
},
{
"type": "text",
"content": "Line 10",
"className": "block"
},
{
"type": "text",
"content": "Line 11",
"className": "block"
},
{
"type": "text",
"content": "Line 12",
"className": "block"
},
{
"type": "text",
"content": "Line 13",
"className": "block"
},
{
"type": "text",
"content": "Line 14",
"className": "block"
},
{
"type": "text",
"content": "Line 15",
"className": "block"
},
{
"type": "text",
"content": "Line 16",
"className": "block"
},
{
"type": "text",
"content": "Line 17",
"className": "block"
},
{
"type": "text",
"content": "Line 18",
"className": "block"
},
{
"type": "text",
"content": "Line 19",
"className": "block"
},
{
"type": "text",
"content": "Line 20",
"className": "block"
},
{
"type": "text",
"content": "Line 21",
"className": "block"
},
{
"type": "text",
"content": "Line 22",
"className": "block"
},
{
"type": "text",
"content": "Line 23",
"className": "block"
},
{
"type": "text",
"content": "Line 24",
"className": "block"
},
{
"type": "text",
"content": "Line 25",
"className": "block"
},
{
"type": "text",
"content": "Line 26",
"className": "block"
},
{
"type": "text",
"content": "Line 27",
"className": "block"
},
{
"type": "text",
"content": "Line 28",
"className": "block"
},
{
"type": "text",
"content": "Line 29",
"className": "block"
},
{
"type": "text",
"content": "Line 30",
"className": "block"
}
]
}
]
}Schema
interface ScrollAreaSchema {
type: 'scroll-area';
// Dimensions
height?: string; // Container height (e.g., '200px', '50vh')
width?: string; // Container width (default: '100%')
// Configuration
orientation?: 'vertical' | 'horizontal' | 'both'; // Scroll direction (default: 'vertical')
// Content
content?: SchemaNode | SchemaNode[]; // Scrollable content
children?: SchemaNode | SchemaNode[]; // Alternative content prop
// Styling
className?: string; // Tailwind CSS classes
// Base properties
id?: string;
visible?: boolean | string;
testId?: string;
}Examples
Message List
Chat Messages
{
"type": "scroll-area",
"height": "300px",
"className": "rounded-md border",
"content": [
{
"type": "div",
"className": "p-4 space-y-3",
"children": [
{
"type": "div",
"className": "flex gap-3 p-3 rounded-lg bg-slate-50 hover:bg-slate-100",
"children": [
{
"type": "div",
"className": "w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold flex-shrink-0",
"children": [
{
"type": "text",
"content": "A"
}
]
},
{
"type": "div",
"className": "flex-1",
"children": [
{
"type": "text",
"content": "User 1",
"className": "font-semibold block"
},
{
"type": "text",
"content": "This is a sample message...",
"className": "text-sm text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "flex gap-3 p-3 rounded-lg bg-slate-50 hover:bg-slate-100",
"children": [
{
"type": "div",
"className": "w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold flex-shrink-0",
"children": [
{
"type": "text",
"content": "B"
}
]
},
{
"type": "div",
"className": "flex-1",
"children": [
{
"type": "text",
"content": "User 2",
"className": "font-semibold block"
},
{
"type": "text",
"content": "This is a sample message...",
"className": "text-sm text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "flex gap-3 p-3 rounded-lg bg-slate-50 hover:bg-slate-100",
"children": [
{
"type": "div",
"className": "w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold flex-shrink-0",
"children": [
{
"type": "text",
"content": "C"
}
]
},
{
"type": "div",
"className": "flex-1",
"children": [
{
"type": "text",
"content": "User 3",
"className": "font-semibold block"
},
{
"type": "text",
"content": "This is a sample message...",
"className": "text-sm text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "flex gap-3 p-3 rounded-lg bg-slate-50 hover:bg-slate-100",
"children": [
{
"type": "div",
"className": "w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold flex-shrink-0",
"children": [
{
"type": "text",
"content": "D"
}
]
},
{
"type": "div",
"className": "flex-1",
"children": [
{
"type": "text",
"content": "User 4",
"className": "font-semibold block"
},
{
"type": "text",
"content": "This is a sample message...",
"className": "text-sm text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "flex gap-3 p-3 rounded-lg bg-slate-50 hover:bg-slate-100",
"children": [
{
"type": "div",
"className": "w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold flex-shrink-0",
"children": [
{
"type": "text",
"content": "E"
}
]
},
{
"type": "div",
"className": "flex-1",
"children": [
{
"type": "text",
"content": "User 5",
"className": "font-semibold block"
},
{
"type": "text",
"content": "This is a sample message...",
"className": "text-sm text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "flex gap-3 p-3 rounded-lg bg-slate-50 hover:bg-slate-100",
"children": [
{
"type": "div",
"className": "w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold flex-shrink-0",
"children": [
{
"type": "text",
"content": "F"
}
]
},
{
"type": "div",
"className": "flex-1",
"children": [
{
"type": "text",
"content": "User 6",
"className": "font-semibold block"
},
{
"type": "text",
"content": "This is a sample message...",
"className": "text-sm text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "flex gap-3 p-3 rounded-lg bg-slate-50 hover:bg-slate-100",
"children": [
{
"type": "div",
"className": "w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold flex-shrink-0",
"children": [
{
"type": "text",
"content": "G"
}
]
},
{
"type": "div",
"className": "flex-1",
"children": [
{
"type": "text",
"content": "User 7",
"className": "font-semibold block"
},
{
"type": "text",
"content": "This is a sample message...",
"className": "text-sm text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "flex gap-3 p-3 rounded-lg bg-slate-50 hover:bg-slate-100",
"children": [
{
"type": "div",
"className": "w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold flex-shrink-0",
"children": [
{
"type": "text",
"content": "H"
}
]
},
{
"type": "div",
"className": "flex-1",
"children": [
{
"type": "text",
"content": "User 8",
"className": "font-semibold block"
},
{
"type": "text",
"content": "This is a sample message...",
"className": "text-sm text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "flex gap-3 p-3 rounded-lg bg-slate-50 hover:bg-slate-100",
"children": [
{
"type": "div",
"className": "w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold flex-shrink-0",
"children": [
{
"type": "text",
"content": "I"
}
]
},
{
"type": "div",
"className": "flex-1",
"children": [
{
"type": "text",
"content": "User 9",
"className": "font-semibold block"
},
{
"type": "text",
"content": "This is a sample message...",
"className": "text-sm text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "flex gap-3 p-3 rounded-lg bg-slate-50 hover:bg-slate-100",
"children": [
{
"type": "div",
"className": "w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold flex-shrink-0",
"children": [
{
"type": "text",
"content": "J"
}
]
},
{
"type": "div",
"className": "flex-1",
"children": [
{
"type": "text",
"content": "User 10",
"className": "font-semibold block"
},
{
"type": "text",
"content": "This is a sample message...",
"className": "text-sm text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "flex gap-3 p-3 rounded-lg bg-slate-50 hover:bg-slate-100",
"children": [
{
"type": "div",
"className": "w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold flex-shrink-0",
"children": [
{
"type": "text",
"content": "K"
}
]
},
{
"type": "div",
"className": "flex-1",
"children": [
{
"type": "text",
"content": "User 11",
"className": "font-semibold block"
},
{
"type": "text",
"content": "This is a sample message...",
"className": "text-sm text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "flex gap-3 p-3 rounded-lg bg-slate-50 hover:bg-slate-100",
"children": [
{
"type": "div",
"className": "w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold flex-shrink-0",
"children": [
{
"type": "text",
"content": "L"
}
]
},
{
"type": "div",
"className": "flex-1",
"children": [
{
"type": "text",
"content": "User 12",
"className": "font-semibold block"
},
{
"type": "text",
"content": "This is a sample message...",
"className": "text-sm text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "flex gap-3 p-3 rounded-lg bg-slate-50 hover:bg-slate-100",
"children": [
{
"type": "div",
"className": "w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold flex-shrink-0",
"children": [
{
"type": "text",
"content": "M"
}
]
},
{
"type": "div",
"className": "flex-1",
"children": [
{
"type": "text",
"content": "User 13",
"className": "font-semibold block"
},
{
"type": "text",
"content": "This is a sample message...",
"className": "text-sm text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "flex gap-3 p-3 rounded-lg bg-slate-50 hover:bg-slate-100",
"children": [
{
"type": "div",
"className": "w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold flex-shrink-0",
"children": [
{
"type": "text",
"content": "N"
}
]
},
{
"type": "div",
"className": "flex-1",
"children": [
{
"type": "text",
"content": "User 14",
"className": "font-semibold block"
},
{
"type": "text",
"content": "This is a sample message...",
"className": "text-sm text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "flex gap-3 p-3 rounded-lg bg-slate-50 hover:bg-slate-100",
"children": [
{
"type": "div",
"className": "w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold flex-shrink-0",
"children": [
{
"type": "text",
"content": "O"
}
]
},
{
"type": "div",
"className": "flex-1",
"children": [
{
"type": "text",
"content": "User 15",
"className": "font-semibold block"
},
{
"type": "text",
"content": "This is a sample message...",
"className": "text-sm text-muted-foreground block"
}
]
}
]
}
]
}
]
}File List
Document Browser
{
"type": "scroll-area",
"height": "250px",
"className": "rounded-md border",
"content": [
{
"type": "div",
"className": "divide-y",
"children": [
{
"type": "div",
"className": "p-3 hover:bg-slate-50 cursor-pointer flex items-center gap-3",
"children": [
{
"type": "text",
"content": "📄",
"className": "text-2xl"
},
{
"type": "div",
"children": [
{
"type": "text",
"content": "document_1.pdf",
"className": "block font-medium"
},
{
"type": "text",
"content": "243KB",
"className": "text-xs text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "p-3 hover:bg-slate-50 cursor-pointer flex items-center gap-3",
"children": [
{
"type": "text",
"content": "📄",
"className": "text-2xl"
},
{
"type": "div",
"children": [
{
"type": "text",
"content": "document_2.pdf",
"className": "block font-medium"
},
{
"type": "text",
"content": "92KB",
"className": "text-xs text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "p-3 hover:bg-slate-50 cursor-pointer flex items-center gap-3",
"children": [
{
"type": "text",
"content": "📄",
"className": "text-2xl"
},
{
"type": "div",
"children": [
{
"type": "text",
"content": "document_3.pdf",
"className": "block font-medium"
},
{
"type": "text",
"content": "401KB",
"className": "text-xs text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "p-3 hover:bg-slate-50 cursor-pointer flex items-center gap-3",
"children": [
{
"type": "text",
"content": "📄",
"className": "text-2xl"
},
{
"type": "div",
"children": [
{
"type": "text",
"content": "document_4.pdf",
"className": "block font-medium"
},
{
"type": "text",
"content": "219KB",
"className": "text-xs text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "p-3 hover:bg-slate-50 cursor-pointer flex items-center gap-3",
"children": [
{
"type": "text",
"content": "📄",
"className": "text-2xl"
},
{
"type": "div",
"children": [
{
"type": "text",
"content": "document_5.pdf",
"className": "block font-medium"
},
{
"type": "text",
"content": "132KB",
"className": "text-xs text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "p-3 hover:bg-slate-50 cursor-pointer flex items-center gap-3",
"children": [
{
"type": "text",
"content": "📄",
"className": "text-2xl"
},
{
"type": "div",
"children": [
{
"type": "text",
"content": "document_6.pdf",
"className": "block font-medium"
},
{
"type": "text",
"content": "478KB",
"className": "text-xs text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "p-3 hover:bg-slate-50 cursor-pointer flex items-center gap-3",
"children": [
{
"type": "text",
"content": "📄",
"className": "text-2xl"
},
{
"type": "div",
"children": [
{
"type": "text",
"content": "document_7.pdf",
"className": "block font-medium"
},
{
"type": "text",
"content": "423KB",
"className": "text-xs text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "p-3 hover:bg-slate-50 cursor-pointer flex items-center gap-3",
"children": [
{
"type": "text",
"content": "📄",
"className": "text-2xl"
},
{
"type": "div",
"children": [
{
"type": "text",
"content": "document_8.pdf",
"className": "block font-medium"
},
{
"type": "text",
"content": "224KB",
"className": "text-xs text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "p-3 hover:bg-slate-50 cursor-pointer flex items-center gap-3",
"children": [
{
"type": "text",
"content": "📄",
"className": "text-2xl"
},
{
"type": "div",
"children": [
{
"type": "text",
"content": "document_9.pdf",
"className": "block font-medium"
},
{
"type": "text",
"content": "351KB",
"className": "text-xs text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "p-3 hover:bg-slate-50 cursor-pointer flex items-center gap-3",
"children": [
{
"type": "text",
"content": "📄",
"className": "text-2xl"
},
{
"type": "div",
"children": [
{
"type": "text",
"content": "document_10.pdf",
"className": "block font-medium"
},
{
"type": "text",
"content": "340KB",
"className": "text-xs text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "p-3 hover:bg-slate-50 cursor-pointer flex items-center gap-3",
"children": [
{
"type": "text",
"content": "📄",
"className": "text-2xl"
},
{
"type": "div",
"children": [
{
"type": "text",
"content": "document_11.pdf",
"className": "block font-medium"
},
{
"type": "text",
"content": "122KB",
"className": "text-xs text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "p-3 hover:bg-slate-50 cursor-pointer flex items-center gap-3",
"children": [
{
"type": "text",
"content": "📄",
"className": "text-2xl"
},
{
"type": "div",
"children": [
{
"type": "text",
"content": "document_12.pdf",
"className": "block font-medium"
},
{
"type": "text",
"content": "235KB",
"className": "text-xs text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "p-3 hover:bg-slate-50 cursor-pointer flex items-center gap-3",
"children": [
{
"type": "text",
"content": "📄",
"className": "text-2xl"
},
{
"type": "div",
"children": [
{
"type": "text",
"content": "document_13.pdf",
"className": "block font-medium"
},
{
"type": "text",
"content": "480KB",
"className": "text-xs text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "p-3 hover:bg-slate-50 cursor-pointer flex items-center gap-3",
"children": [
{
"type": "text",
"content": "📄",
"className": "text-2xl"
},
{
"type": "div",
"children": [
{
"type": "text",
"content": "document_14.pdf",
"className": "block font-medium"
},
{
"type": "text",
"content": "271KB",
"className": "text-xs text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "p-3 hover:bg-slate-50 cursor-pointer flex items-center gap-3",
"children": [
{
"type": "text",
"content": "📄",
"className": "text-2xl"
},
{
"type": "div",
"children": [
{
"type": "text",
"content": "document_15.pdf",
"className": "block font-medium"
},
{
"type": "text",
"content": "146KB",
"className": "text-xs text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "p-3 hover:bg-slate-50 cursor-pointer flex items-center gap-3",
"children": [
{
"type": "text",
"content": "📄",
"className": "text-2xl"
},
{
"type": "div",
"children": [
{
"type": "text",
"content": "document_16.pdf",
"className": "block font-medium"
},
{
"type": "text",
"content": "65KB",
"className": "text-xs text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "p-3 hover:bg-slate-50 cursor-pointer flex items-center gap-3",
"children": [
{
"type": "text",
"content": "📄",
"className": "text-2xl"
},
{
"type": "div",
"children": [
{
"type": "text",
"content": "document_17.pdf",
"className": "block font-medium"
},
{
"type": "text",
"content": "122KB",
"className": "text-xs text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "p-3 hover:bg-slate-50 cursor-pointer flex items-center gap-3",
"children": [
{
"type": "text",
"content": "📄",
"className": "text-2xl"
},
{
"type": "div",
"children": [
{
"type": "text",
"content": "document_18.pdf",
"className": "block font-medium"
},
{
"type": "text",
"content": "141KB",
"className": "text-xs text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "p-3 hover:bg-slate-50 cursor-pointer flex items-center gap-3",
"children": [
{
"type": "text",
"content": "📄",
"className": "text-2xl"
},
{
"type": "div",
"children": [
{
"type": "text",
"content": "document_19.pdf",
"className": "block font-medium"
},
{
"type": "text",
"content": "487KB",
"className": "text-xs text-muted-foreground block"
}
]
}
]
},
{
"type": "div",
"className": "p-3 hover:bg-slate-50 cursor-pointer flex items-center gap-3",
"children": [
{
"type": "text",
"content": "📄",
"className": "text-2xl"
},
{
"type": "div",
"children": [
{
"type": "text",
"content": "document_20.pdf",
"className": "block font-medium"
},
{
"type": "text",
"content": "134KB",
"className": "text-xs text-muted-foreground block"
}
]
}
]
}
]
}
]
}Code Block
Code Preview
{
"type": "scroll-area",
"height": "200px",
"width": "100%",
"orientation": "both",
"className": "rounded-md border bg-slate-950 text-slate-50",
"content": [
{
"type": "div",
"className": "p-4 font-mono text-sm",
"children": [
{
"type": "text",
"content": "function example() {\n const data = { name: 'ObjectUI', version: '1.0.0', features: ['components', 'layouts', 'forms'] };\n return data.features.map(f => f.toUpperCase());\n}\n\nconst result = example();",
"className": "whitespace-pre block"
}
]
}
]
}