DashboardLayout
Dashboard page layout with stats strip, main content area, and optional aside.
Category: layout · WCAG 2.1-AA · layout, dashboard, page
Props
| Prop | Type | Default | Description |
|---|---|---|---|
stats | ReactNode | — | Stats/KPI row (auto-fit grid) |
main | ReactNode | — | Main content area |
aside | ReactNode | — | Optional aside panel (20rem) |
Design tokens
--cascivo-space-4--cascivo-space-6
When to use
- A dashboard page with a stats strip, main content area, and optional aside
- Composing KPI tiles and charts into a standard analytics layout
When not to use
- A bare app frame without dashboard structure — use AppShell
- A simple form or content page — use Section or SettingsLayout
Examples
With stats
Stats + main layout
<DashboardLayout stats={<div>KPIs</div>} main={<div>Content</div>} />Related components
- AppShell — Use the bare shell when you do not need dashboard structure
- StatsCards — KPI cards commonly fill the stats strip