Components

Stack

Lays children out vertically and sets the space between them with a token.

When to use

Use Stack to lay children out in a vertical flow with a fixed, token-based gap: form fields, card content, settings lists, page sections.

To lay out horizontally: Use Inline for items side by side.
For columns: Use Grid for a layout with rows and columns.
To reverse the visual order: Stack has no reverse direction. Reading order is DOM order; write the items in the order you want.
For a box look: If you need padding, a surface or a border, use Box; you can put a Stack inside a Box.

Stack has two parts:

Container: a vertical flex container (flex-col). gap and align apply to this element.
Children: children, in DOM order. With separator on, every child after the first gets a 1 px rule above it.

Stack is static: it does not change on hover, click or focus, and it is not in the tab order.
Defaults: gap md, align stretch, separator false.
With separator on, the gap becomes padding on both sides of the rule; the rule sits in the middle of the gap.
Visual order is always DOM order; there is no reverse direction or order setting.

Give related items a small gap; with no gap at all, items read as one block of text.

First itemSecond item

DoGap `sm`: the items read separately.

First itemSecond item

Don'tGap `none`: the items run together.

separator helps in settings and description lists. With a single child no rule shows.

First itemSecond item

DoThe rule separates the rows of a list.

First item

Don'tIn a Stack with one child no rule shows; the separator is on for nothing.

Stack carries no text of its own.
When you pass render={<ul />} to Stack, write every child as an <li>; do not put non-list children in it.
Keep example text neutral: “First item”, “Second item”.