Stack · Inline · Grid
Layout primitives that only accept token gaps. Compose any layout with these three; you should rarely need a raw flex/grid wrapper.
Stack (column)
Vertical stack with token gap.
1
2
3
<Stack gap="2">
<Box /> <Box /> <Box />
</Stack>Inline (row)
Horizontal stack with vertical centring by default.
1
2
3
<Inline gap="3">
<Box /> <Box /> <Box />
</Inline>Grid
Responsive grid with preset breakpoints — 1 / 2 / 3 / 4 / 6 cols.
1
2
3
4
5
6
<Grid cols="3" gap="3">
<Box /> <Box /> <Box /> <Box /> <Box /> <Box />
</Grid>