Vertical (default)
Item 1
Item 2
Item 3
Horizontal
Item 1
Item 2
Item 3
Gap Sizes
gap="xs"
A
B
C
gap="sm"
A
B
C
gap="md"
A
B
C
gap="lg"
A
B
C
gap="xl"
A
B
C
gap="2xl"
A
B
C
Alignment
Left
Center (taller)
Right
align="center" justify="between"
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| direction | "vertical" | "horizontal" | "vertical" | Stack direction |
| gap | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "md" | Space between items |
| align | "start" | "center" | "end" | "stretch" | "baseline" | — | Cross-axis alignment (items-*) |
| justify | "start" | "center" | "end" | "between" | "around" | "evenly" | — | Main-axis alignment (justify-*) |
| as | React.ElementType | "div" | Rendered HTML element |
| className | string | — | Additional classes on the root element |
Usage
import { Stack } from "substrateui";
<Stack gap="lg">
<Card>First</Card>
<Card>Second</Card>
<Card>Third</Card>
</Stack>
<Stack direction="horizontal" align="center" justify="between">
<Logo />
<Nav />
<UserMenu />
</Stack>