Components / Layout & Shells

Shared app-side layout primitives.

The current shared truth for product layout includes the shared app shell, page header, section card, and toolbar row. These should be used before route-local wrappers are introduced.

PageHeader and ToolbarRow

Projects

Shared page headers keep title, body copy, meta, and actions structurally consistent.

Use for settings, projects, templates, onboarding, and other named app surfaces.

SectionCard and notices

SectionCard

Reusable app-surface framing for sections with title, body, and optional actions.

Structure rule

If this pattern repeats across more than one product surface, prefer `SectionCard` over ad hoc route shells.

Shared app shell

`AppShell` is now the shared two-column layout truth for both the product app and the brand guide. The left sidebar and right content column should come from the shared shell contract, not from docs-only layout code.

Its mobile trigger pattern is also the canonical menu treatment: a menu icon plus `Menu`, switching to a close icon plus `Close` while the drawer is open.