ObjectUIComponentsLayout
Page
Full-page container with title, description, and content sections
The Page component provides a standardized full-page layout with built-in support for titles, descriptions, and organized content sections.
Basic Usage
Simple Page
{
"type": "page",
"title": "Dashboard",
"description": "Welcome to your dashboard",
"body": [
{
"type": "text",
"content": "Page content goes here"
}
]
}With Title and Description
Page with Header
{
"type": "page",
"title": "Analytics Overview",
"description": "Track your key metrics and performance indicators",
"body": [
{
"type": "grid",
"cols": 3,
"gap": 4,
"children": [
{
"type": "statistic",
"label": "Total Users",
"value": "12,543"
},
{
"type": "statistic",
"label": "Revenue",
"value": "$45,231"
},
{
"type": "statistic",
"label": "Growth",
"value": "+12.5%"
}
]
}
]
}Schema
interface PageSchema {
type: 'page';
// Header
title?: string; // Page title
icon?: string; // Page icon (Lucide icon name)
description?: string; // Page description
// Content
body?: SchemaNode[]; // Main content array
children?: SchemaNode | SchemaNode[]; // Alternative content prop
// Styling
className?: string; // Tailwind CSS classes
// Base properties
id?: string;
visible?: boolean | string;
testId?: string;
}Examples
Dashboard Page
Full Dashboard
{
"type": "page",
"title": "Dashboard",
"description": "Monitor your business metrics in real-time",
"body": [
{
"type": "grid",
"cols": 4,
"gap": 4,
"className": "mb-6",
"children": [
{
"type": "statistic",
"label": "Revenue",
"value": "$45,231",
"trend": "up",
"description": "+20.1%"
},
{
"type": "statistic",
"label": "Orders",
"value": "2,350",
"trend": "up",
"description": "+180"
},
{
"type": "statistic",
"label": "Customers",
"value": "12,543",
"trend": "up",
"description": "+573"
},
{
"type": "statistic",
"label": "Active",
"value": "573",
"trend": "neutral",
"description": "No change"
}
]
},
{
"type": "card",
"title": "Recent Activity",
"children": [
{
"type": "text",
"content": "Activity content..."
}
]
}
]
}Settings Page
Settings Layout
{
"type": "page",
"title": "Settings",
"description": "Manage your account settings and preferences",
"body": [
{
"type": "card",
"className": "mb-6",
"children": [
{
"type": "text",
"content": "Profile Settings",
"className": "text-lg font-semibold mb-4"
},
{
"type": "input",
"label": "Name",
"placeholder": "Enter your name"
},
{
"type": "input",
"label": "Email",
"placeholder": "Enter your email"
}
]
},
{
"type": "card",
"children": [
{
"type": "text",
"content": "Notifications",
"className": "text-lg font-semibold mb-4"
},
{
"type": "flex",
"justify": "between",
"children": [
{
"type": "text",
"content": "Email notifications"
},
{
"type": "switch"
}
]
}
]
}
]
}Content Page
Documentation Page
{
"type": "page",
"title": "Getting Started",
"description": "Learn how to use the platform",
"body": [
{
"type": "div",
"className": "prose prose-slate max-w-none",
"children": [
{
"type": "text",
"content": "Welcome!",
"className": "text-2xl font-bold mb-4"
},
{
"type": "text",
"content": "This guide will help you get started with the platform.",
"className": "mb-4"
},
{
"type": "separator",
"className": "my-6"
},
{
"type": "text",
"content": "Step 1: Setup",
"className": "text-xl font-semibold mb-2"
},
{
"type": "text",
"content": "Follow these instructions to set up your account..."
}
]
}
]
}