Waiting for action
Open a sub-component to view its docs and settings.
Copy this complete component into a page file. Edit and run it in the Playground.
Loading editor…
Application shell with optional left and right sidebars around a central content area. Sidebars resize with keyboard-accessible drag handles and can persist their widths in localStorage.
| Prop | Type | Default | Description |
|---|---|---|---|
left / right | ReactNode | — | Optional sidebar content. |
children | ReactNode | — | Main centre pane content. |
storageKey | string | — | localStorage key used for persisted sidebar widths. |
persist | boolean | true | Enables persistence when storageKey is provided. |
defaultLeftWidth / defaultRightWidth | number | 260 / 320 | Initial sidebar widths in pixels. |
minLeftWidth / maxLeftWidth | number | 160 / 520 | Left sidebar resize bounds. |
minRightWidth / maxRightWidth | number | 180 / 560 | Right sidebar resize bounds. |
handleBackground | "subtle" | "accent" | "contrast" | "none" | "subtle" | Resize strip background treatment. |
handleHeight | "short" | "medium" | "tall" | "full" | "medium" | Grip marker length before hover/focus expansion. |
style | CSSProperties | — | Pass height: "100%" when the layout should fill an available-height container. |
role="separator", arrow-key resizing, and current width values.