Layout
Page shell primitives: Base, Container, AppShell, Stack, theme.
# Layout Primitives
Container (width variants)
Centered max-width wrapper with responsive padding. Replaces the repeated max-w-Nxl mx-auto px-4 sm:px-6 lg:px-8 snippet.
Stack (vertical rhythm)
Typed gap enum replaces repeated space-y-N strings. 1D vertical (flex, not grid).
Stack item 1
Stack item 2
Stack item 3 — each child gets consistent spacing
Split (content + aside)
2-column grid for article+sidebar / detail+metadata. RTL-aware logical positioning (Start/End). Stacks below md.
Main content (2/3)
Article body, detail view, or primary content lives here.
AppShell (sidebar + header + main)
The #1 admin dashboard pattern. Uses minmax(0,1fr) to prevent grid blowout from wide tables. Sidebar hidden on mobile (use MobileNav slot for drawer).
Main content area
Wide tables, grids, and content live here. minmax(0,1fr) prevents this column from blowing out the viewport.
Stat card
Stat card
Footer (multi-column grid)
Backward-compatible extension: Columns empty = legacy single-row. Non-empty = responsive multi-column grid with optional brand + BottomBar.