layout component
Drop-in semantic component. See examples, sizes, variants, and source.
Layout Components
Layout components replace utility-class chains in component markup. Each one is a semantic noun
that takes orthogonal adjectives — primarily compact/spacious for density
and horizontal/vertical for orientation.
See CLASS_SYSTEM.md for the full grammar.
Stack
Vertical layout. Default density is cozy (gap-4); use compact for tighter
stacks or spacious for breathing room.
Default (cozy)
<div class="stack">
<div class="bg-gray-100 p-3 rounded">Item 1</div>
<div class="bg-gray-100 p-3 rounded">Item 2</div>
<div class="bg-gray-100 p-3 rounded">Item 3</div>
</div>
Compact
<div class="stack compact">
<div class="bg-gray-100 p-3 rounded">Item 1</div>
<div class="bg-gray-100 p-3 rounded">Item 2</div>
<div class="bg-gray-100 p-3 rounded">Item 3</div>
</div>
Spacious
<div class="stack spacious">
<div class="bg-gray-100 p-3 rounded">Item 1</div>
<div class="bg-gray-100 p-3 rounded">Item 2</div>
<div class="bg-gray-100 p-3 rounded">Item 3</div>
</div>
Row
Horizontal layout, items vertically centered by default.
Default (cozy)
<div class="row">
<button class="button primary">Save</button>
<button class="button outline">Cancel</button>
<div class="spacer"></div>
<button class="button ghost">Help</button>
</div>
Compact
<div class="row compact">
<span class="badge primary">New</span>
<span class="badge positive">Active</span>
<span class="badge negative">Error</span>
</div>
Spacious
<div class="row spacious">
<div class="bg-gray-100 p-3 rounded">A</div>
<div class="bg-gray-100 p-3 rounded">B</div>
<div class="bg-gray-100 p-3 rounded">C</div>
</div>
Grid
Auto-responsive grid: 1 column on mobile, 2 on tablet, 3 on desktop.
Default
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
<div class="grid">
<div class="bg-gray-100 p-4 rounded">Card 1</div>
<div class="bg-gray-100 p-4 rounded">Card 2</div>
<div class="bg-gray-100 p-4 rounded">Card 3</div>
<div class="bg-gray-100 p-4 rounded">Card 4</div>
<div class="bg-gray-100 p-4 rounded">Card 5</div>
<div class="bg-gray-100 p-4 rounded">Card 6</div>
</div>
Spacious
<div class="grid spacious">
<div class="bg-gray-100 p-4 rounded">Card 1</div>
<div class="bg-gray-100 p-4 rounded">Card 2</div>
<div class="bg-gray-100 p-4 rounded">Card 3</div>
</div>
Container
Centered, max-width content wrapper. Default caps at max-w-7xl; compact
narrows to max-w-3xl, spacious opens to max-w-screen-2xl.
Default
Page content sits inside this max-width wrapper.
<div class="container bg-gray-100 p-4 rounded">
Page content sits inside this max-width wrapper.
</div>
Compact (article width)
Narrower for prose-heavy content.
<div class="container compact bg-gray-100 p-4 rounded">Narrower for prose-heavy content.</div>
Spacer
Flex spacer. Bare spacer grows to fill available space. Sized variants
(xs/sm/md/lg/xl) take a fixed amount.
Pushing items apart
<div class="row">
<button class="button">Back</button>
<div class="spacer"></div>
<button class="button primary">Next</button>
</div>
Fixed spacer (lg)
<div class="row">
<button class="button">A</button>
<div class="spacer lg"></div>
<button class="button">B</button>
</div>
Bento
Asymmetric grid for marketing/feature blocks. The featured role spans 2×2.
Bento with a featured block
<div class="bento">
<div class="bg-gray-100 p-4 rounded featured">Featured (2×2)</div>
<div class="bg-gray-100 p-4 rounded">B</div>
<div class="bg-gray-100 p-4 rounded">C</div>
<div class="bg-gray-100 p-4 rounded">D</div>
<div class="bg-gray-100 p-4 rounded">E</div>
</div>
Shell
Full-page application frame: a CSS Grid with header / sidebar / main areas. Used as the page-root
wrapper for app-shaped layouts. Not previewed inline because it requires height: 100vh.
<div class="shell">
<header class="header">…</header>
<aside class="sidebar">…</aside>
<main class="main">…</main>
</div>