Stack

Flex 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

Presets

Item 1

Item 2

Item 3

Props

direction

gap

align

justify

wrap

Code

<Component  direction="col"  gap={4}  align="stretch"  justify="center"  wrap={false}/>

Full prop browser

Item 1

Item 2

Item 3

object

Direction

<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:

<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).