Stack
stableserver-safe
Vertical rhythm as a property of the container. Children never carry margins — margins collapse and double, gaps don't.
Gap steps
gap takes a step on the 4px scale, not a pixel value. There is no gap={13}.
gap 1
4px
gap 3
12px
gap 5
24px
<Stack gap={3}>
<Thing />
<Thing />
</Stack>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| gap | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 4 | Step on the spacing scale. |
| align | "stretch" | "center" | "stretch" | Cross-axis alignment. |
Guidance
Do
- Reach for Stack before writing a margin. Almost every margin in an app is a missing Stack.