Preview
PageShell owns main#main and the page column, so this focused document describes it without nesting invalid page landmarks. This server-rendered page does not imitate client behavior. Open the live playground.
Usage
PageShell usage<PageShell width="md">Page content</PageShell>API
PageShell APIPageShellProps
The page column every app was hand-rolling (demo, styleguide, kitprobe, gallery — four copies before this component): a labeled `<main id="main">` with a width variant and the kit's vertical rhythm. NOT a layout system — grids and stacks stay app-owned css(); this is the document column plus the skip-link contract (`#main` is the skip target; the Document renders the `.kp-skip-link` per the skill, or pass `skipLink` to colocate it).
| prop | type | notes |
|---|---|---|
| children? | RemixNode | |
| width? | 'narrow' | 'md' | 'wide' | Column width: 'narrow' 720px · 'md' 880px (default) · 'wide' 1100px. |
| skipLink? | boolean | Render the skip link here (only when the Document doesn't own one). |
| mix? | MixInput |