PrimitivesStable

Stack

Parity report: docs/atoms.md

A typed flexbox. direction (column default / row), gap (a --space-* key, applied inline), align and justify (via data-* + CSS), wrap, inline (inline-flex) and as (same as <Box>).

It's the only way to space siblings in the DS — <Box> has no margin. align: start/center/end/stretch/baseline. justify: start/center/end/between/around/evenly.

When to use

Any column or row of elements with consistent spacing — a form, an action bar, a list of cards.
A container with background/border/padding (not arranging children) → Box. A 2D grid → CSS grid directly (the DS has no <Grid>).

Examples

Row

<Stack direction="row" gap="12" align="center">
  <Item>A</Item><Item>B</Item><Item>C</Item>
</Stack>

justify=between

Título da seção

Ação

<Stack direction="row" justify="between" align="center">
  <Text tone="headings">Título da seção</Text>
  <Item>Ação</Item>
</Stack>

wrap

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

<Stack direction="row" gap="8" wrap>
  {items.map((n) => <Item key={n}>Item {n}</Item>)}
</Stack>

Playground

Dois

Três

direction

gap

align

wrap

<Stack gap="12">
  {/* filhos */}
</Stack>

Props

Prop	Type	default	Description
`align`	`"start" \| "center" \| "end" \| "stretch" \| "baseline"`	`—`	—
`as`	`"div" \| "section" \| "article" \| "aside" \| "header" \| "footer" \| "main" \| "nav" \| "span" \| "ul" \| "ol" \| "li"`	`—`	—
`direction`	`"row" \| "column"`	`column`	Direção do flex. Default `"column"`.
`gap`	`"4" \| "8" \| "12" \| "16" \| "24" \| "32" \| "40" \| "48"`	`—`	Espaço entre os itens — chave de `--space-*`.
`inline`	`boolean`	`false`	`inline-flex` em vez de `flex`.
`justify`	`"start" \| "center" \| "end" \| "between" \| "around" \| "evenly"`	`—`	—
`wrap`	`boolean`	`false`	—

Accessibility

Layout only, no role. Choose the semantic as when the grouping has meaning (as="ul" for a list, with <Box as="li"> children).