Page Shell
Top-level `<main>` wrapper that centers content with token-driven max-width. Use `inset` for full-bleed tool layouts inside an AppShell.
Preview
Import
import { PageShell } from "@sigil-ui/components";Usage
<PageShell className="!w-full" style={{ padding: "var(--s-section-padding-compact)" }}>
<div className="border border-[var(--s-border)] bg-[var(--s-surface)] p-[var(--s-space-8)] text-center text-sm text-[var(--s-text)]">Token-constrained page content</div>
</PageShell>Props
| Prop | Type | Default | Description |
|---|---|---|---|
narrow | boolean | — | Constrain width further for reading-optimized layouts. |
inset | boolean | — | Full-width inset mode — no outer padding, fills parent with flex-1. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-content-max-width | Content max width |
--s-content-narrow-width | Content narrow width |