UI ComponentsData
Dashboard
Application dashboard with sidebar navigation, header, and widget grid
Application dashboard layout with sidebar navigation, header bar, and content area for widgets and data display.
Structure
┌──────────┬──────────────────────────────────┐
│ sidebar │ header │
│ ┌──────┐ │ ┌──────────────────────────────┐ │
│ │header│ │ │ title actions user │ │
│ └──────┘ │ └──────────────────────────────┘ │
│ ┌──────┐ ├──────────────────────────────────┤
│ │ nav │ │ breadcrumbs │
│ │ │ ├──────────────────────────────────┤
│ │ │ │ content │
│ │ │ │ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │ │ │ │ widget │ │ widget │ │ widget │ │
│ │ │ │ └────────┘ └────────┘ └────────┘ │
│ └──────┘ │ ┌────────────────────────────────┤
│ ┌──────┐ │ │ widget (full width) │
│ │footer│ │ └────────────────────────────────┤
│ └──────┘ │ │
└──────────┴──────────────────────────────────┘Usage
<Dashboard
title="Overview"
user={{ name: 'Alice', avatar: '/alice.jpg' }}
nav={[
{ label: 'Overview', href: '/', icon: 'home' },
{ label: 'Analytics', href: '/analytics', icon: 'chart' },
{ label: 'Users', href: '/users', icon: 'users' },
{ label: 'Settings', href: '/settings', icon: 'settings' },
]}
stats={[
{ label: 'Total Users', value: '12,345' },
{ label: 'Revenue', value: '$45,678' },
{ label: 'Active Sessions', value: '234' },
]}
>
<Widget title="Recent Activity">
<Table data={recentActivity} />
</Widget>
<Widget title="Performance">
<Chart data={performanceData} />
</Widget>
</Dashboard>CSS Parts
Dashboard::part(root) { }
Dashboard::part(sidebar) { }
Dashboard::part(sidebar-nav) { }
Dashboard::part(sidebar-nav-item) { }
Dashboard::part(header) { }
Dashboard::part(header-title) { }
Dashboard::part(content) { }
Dashboard::part(widgets) { }
Dashboard::part(widget) { }