Page structure primitives with consistent spacing and responsive behavior

AppShell
Full application layout with header, footer, and main content area. Supports sticky header and configurable max width.
header
footer
maxWidth
padded
stickyHeader
VIEW AppShell
DashboardShell
Dashboard layout with fixed sidebar, top bar, and scrollable content area. Includes mobile sidebar support.
sidebar
topbar
scrollArea
sidebarWidth
inset
VIEW DashboardShell
SidebarLayout
Two-column layout with sidebar and main content for documentation and content-heavy pages.
sidebar
position
sidebarWidth
stickySidebar
breakpoint
VIEW SidebarLayout
Split
Two-column split layout with flexible ratios for hero sections, features, and content blocks.
left
right
ratio
stackBelow
gap
minHeight
VIEW Split
Section
Full-width sections with optional inner containers for flexible content layouts. Supports bleed mode.
bleed
withContainer
containerSize
containerPadding
VIEW Section
Debug Overlay
Visual layout debugger for development. Inspect containers, padding, margins, and grid systems.
enabled
VIEW Debug Overlay

Full Applications

Use AppShell for standard websites and DashboardShell for admin panels and data-heavy interfaces.

Content Pages

Use SidebarLayout for documentation or settings pages, and Section for landing pages with alternating content blocks.

Flexible Compositions

Use Split for hero sections, feature showcases, and any two-column content that needs responsive stacking on mobile.

For ready-to-use page compositions using these primitives, check out the layout templates section with grid, sidebar, split, centered, and full-width patterns.

VIEW LAYOUT TEMPLATES