Stack
PolymorphicFlex layout primitive. Vertical by default with a small gap — the dominant case in forms and dashboards.
Stack is a flex container with prebuilt direction, gap, align, justify, and wrap variants. Defaults to a vertical stack with gap=4 because that's what most form / dashboard sections want.
import { Stack } from '@42/ui-react/stack';
<Stack gap={3}>
<p>One</p>
<p>Two</p>
<p>Three</p>
</Stack>Playground
Component
Dir
Presets
Props
Code
<Component direction="col" gap={4} align="stretch"/>Full prop browser
Direction
Code
<Stack gap={2}><Button>One</Button><Button>Two</Button></Stack><Stack direction="row" gap={2}><Button>One</Button><Button>Two</Button></Stack>Alignment
Use align for cross-axis alignment and justify for main-axis. Common toolbar pattern:
Code
<Stack direction="row" justify="between" align="center"><Button variant="subtle">Cancel</Button><Stack direction="row" gap={2}> <Button variant="default">Save draft</Button> <Button>Publish</Button></Stack></Stack>API
Prop
Type
When to use Stack vs Grid
Stack flows children in one direction. Reach for Grid when you need equal-width tracks (cards on a dashboard, columns of a settings page).