Layout
Layout primitives
Semantic page structure for consumer apps: shells, sections, stacks, clusters, grids, splits, and main content wrappers.
PageShell + Section
/layout/page-shell/Start pages with a dark shell and a semantic section instead of hand-writing page backgrounds and spacing.
Props
PageShellProps| Prop | Type |
|---|---|
as? | 'div' | 'main' |
background? | PageShellBackground |
density? | PageShellDensity |
Phase 2
Build with components first.
Use Tailwind only for small local glue in consumer apps.
Stack + Cluster
/layout/stack-cluster/Use Stack for vertical rhythm and Cluster for wrapping action rows, chips, toolbars, and nav groups.
Props
StackProps| Prop | Type |
|---|---|
as? | 'div' | 'section' | 'article' | 'header' | 'footer' |
gap? | StackGap |
align? | StackAlign |
Production guardrails
Every action is logged and reversible.
OnlineReview required
Grid + CardGrid
/layout/grid-cardgrid/Use Grid for generic responsive tracks and CardGrid for card collections with Tollerud spacing defaults.
Props
GridProps| Prop | Type |
|---|---|
as? | 'div' | 'section' |
columns? | GridColumns |
gap? | GridGap |
Emma
Iris
Pia
systemctl status tollerud-agentdocker compose psSplit + MainContent
/layout/split-maincontent/Use Split for content/aside pages and MainContent for app routes that need consistent width, padding, and density.
Props
SplitProps| Prop | Type |
|---|---|
as? | 'div' | 'section' |
ratio? | SplitRatio |
gap? | SplitGap |
align? | SplitAlign |
reverse? | boolean |
Primary content
A wider column for tables, forms, or detail content.
Aside
A narrower panel for metadata, actions, or status.