Layout Primitives
Stack
A vertical flex layout component that distributes children along the block axis with configurable gap and alignment. Use Stack to compose consistent vertical spacing throughout your interface.
Gap Variants
gap="sm"
Item 1
Item 2
Item 3
gap="md"
Item 1
Item 2
Item 3
gap="lg"
Item 1
Item 2
Item 3
gap="xl"
Item 1
Item 2
Item 3
Alignment
align="start"
Start
Aligned
Items
align="center"
Center
Aligned
Items
align="end"
End
Aligned
Items
align="stretch"
Stretch
Full Width
Items
Nested Stacks
Outer Item
Nested Item 1
Nested Item 2
Nested Item 3
Outer Item
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
gap | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "md" | Controls the vertical spacing between child elements. |
align | "start" | "center" | "end" | "stretch" | "stretch" | Cross-axis alignment of children within the stack. |
render | ReactElement | — | Render a different element instead of a wrapping div, merging this component's props onto it (e.g. render={<section />}). |
Import
import { Stack } from "@mikenotthepope/substrateui"