PageLayout
moleculeFull-page shell with a fixed header, collapsible left sidebar, optional right sidebar, and scrollable main content area. Chrome regions can use a distinct background via chromeBackground for visual separation from the main content. Hidden scrollbars on all scrollable regions.
With header and sidebar
Full app shell layout.
Collapsed sidebar
Sidebar hidden via sidebarCollapsed.
With right sidebar
Optional right panel for contextual info or tools.
Chrome theming
surfaceSecondary chrome background distinguishes header and sidebar from the main content.
Usage
Installation
API Reference
PageLayout props — * required
| Prop | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | — | Main content area. |
header | React.ReactNode | — | Content for the fixed top header bar. |
sidebar | React.ReactNode | — | Content for the left sidebar. |
sidebarWidth | number | 240 | Sidebar width in pixels. |
headerHeight | number | 56 | Header height in pixels. |
sidebarCollapsed | boolean | false | Collapses the left sidebar when true. |
rightSidebar | React.ReactNode | — | Content for the right sidebar panel. |
rightSidebarWidth | number | string | 240 | Right sidebar width in px or any CSS value. |
rightSidebarCollapsed | boolean | false | Collapses the right sidebar when true. |
footer | React.ReactNode | — | Content for the footer bar rendered below the body row. |
footerHeight | number | string | 48 | Footer height in px or any CSS value. |
chromeBackground | "bgBase" | "bgSubtle" | "surface" | "surfaceSecondary" | — | Background token for chrome regions (header, sidebar, footer). Use "bgSubtle", "surface", or "surfaceSecondary" to visually distinguish chrome from the main content area. |
mainStyle | React.CSSProperties | — | Inline styles for the main content area. |
style | React.CSSProperties | — | Inline styles for the outer wrapper. |