UI ComponentsLayout
Page Layout
Compose a header, main content, sidebars, and footer.
Import
import { PageLayout } from "@puzzle-ui/ui";Regions
Place region components directly inside PageLayout. They become semantic header, main, aside, and footer elements. Sidebars appear below main content on mobile/tablet and beside it on desktop by default.
API
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | Required | Direct region components. |
sidebarPlacement | Responsive "beside" | "below" | Mobile/tablet below, desktop beside | Responsive sidebar positioning. |
maxWidth | string | number | Theme CSS | Content width limit. |
gap, rowGap, columnGap | string | number | Theme CSS | Region spacing. |
contentPaddingInline, contentPaddingBlock | string | number | Theme CSS | Content padding. |
minHeight | string | number | Theme CSS | Page minimum height. |
className, contentClassName | string | - | Root and content-grid classes. |
style | CSSProperties | - | Root style. |
Numbers represent pixels; prefer theme variables for consistent sizing. Responsive values accept { mobile, tablet, desktop }.
PageLayout.Header, .Main, .LeftSidebar, .RightSidebar, and .Footer accept children and native HTMLElement attributes. Use each region once; duplicate regions replace earlier instances. Avoid nesting multiple main landmarks in a real page.