Layout
Stack
Vertical flex column with token-driven gap, align, and justify. The default Wave-1 layout primitive.
Examples
Default
One Two Three
<Stack>
<Badge>One</Badge>
<Badge>Two</Badge>
<Badge>Three</Badge>
</Stack>Custom gap
One Two Three
<Stack gap={5}>…</Stack>align="center"
One Two Three
<Stack gap={3} align="center">…</Stack>justify="between"
Top Middle Bottom
<Stack gap={2} justify="between" style="height:120px;">…</Stack>Props
| Prop | Type | Default | Description |
|---|---|---|---|
gap | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 2 | Maps to 0 or spacing tokens --uin-s-1 through --uin-s-8. |
align | 'start' | 'center' | 'end' | 'stretch' | 'stretch' | align-items value for the flex column. |
justify | 'start' | 'center' | 'end' | 'between' | 'start' | justify-content value. |
...rest | HTMLAttributes<HTMLDivElement> | — | Spread onto the underlying <div>. |
Install
CLI
npx @a3tai/mittsu add stack