Skip to main content

Foundations

PageShell

Provide the shared page-width and vertical rhythm wrapper. The invisible corset that keeps your layout looking trim and proper.

Curated demo

PageShell controls readable page width and section rhythm.
Use it as the main wrapper for a full page.

Reference

Provide the shared page-width and vertical rhythm wrapper. The invisible corset that keeps your layout looking trim and proper.

  • Use it as the main content container for full pages.
  • Let local pages decide section order and surrounding landmarks.
  • It keeps your content from stretching all the way to the edges of a 49-inch ultrawide monitor.

Example snippet

<PageShell class="flex flex-col gap-8"><slot /></PageShell>