Layout
primitive · 8 in oneEight composable primitives — Stack, Cluster, Switcher, Sidebar, Center, Grid, Spacer, Divider — that replace 90% of the CSS you'd hand-roll. Tiny, semantic, theme-aware.
Installation
$pnpm dlx disenio add layoutUsage
import {
Stack, Cluster, Switcher, Sidebar,
Center, Grid, Spacer, Divider,
} from "@/components/ui/layout";Stack
Vertical layout with consistent gap. The most-used primitive.
Cluster
Horizontal flex-wrap with gap, alignment, and justification. The toolbar primitive.
Switcher
Items share a row above a threshold and stack below it — using only flex-basis math, no media queries. Resize the preview to watch it flip.
Center
Constrains a max-width and centers it. Presets: narrow, prose, wide, or any CSS length.
Grid
Auto-fit responsive grid. Set the minimum column width, columns flow.
Spacer
Fills available space inside a flex parent. Useful inside Cluster.
Divider
Horizontal or vertical hairline. Optional centered label.
Composing
The whole point: glue them together. A profile card is a Stack of Clusters. A pricing trio is a Grid of Cards. A docs page is a Sidebar wrapping a Center wrapping a Stack.
Disenio Pro
popularPremium blocks + 30 themes.