Primitive

Stack

Vertical rhythm primitive for dense groups, forms, traces, and editorial blocks.

Use Stack before inventing component-local vertical spacing. Density chooses the rhythm; divided adds low-noise separation.
layout
DOM renderImage render
StackDefault

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Comfortable vertical rhythm for repeated content.
Render state

Divided

Dense separated rows without a new surface.
ReadyGeneratedBlocked
Render state

Editorial

Looser rhythm for reading and explanation.
Context
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
density'compact' | 'comfortable' | 'editorial'-Vertical rhythm density.
align'start' | 'center' | 'end' | 'stretch'-Cross-axis alignment.
dividedbooleanfalseAdds separators between direct children.
childrenReactNode-Stacked content.