Stack
A layout component for arranging elements in horizontal or vertical stacks with consistent spacing.
API Reference
Stack Props
| Prop | Type | Default | Description |
|---|---|---|---|
| direction | 'vertical' | 'horizontal' | Responsive | 'vertical' | Direction of the stack |
| spacing | number | string | Responsive | 4 | Spacing between stack items |
| align | 'start' | 'center' | 'end' | 'stretch' | Responsive | - | Alignment along cross axis |
| justify | 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | Responsive | - | Justification along main axis |
| wrap | boolean | Responsive | false | Whether items should wrap |
| reverse | boolean | false | Reverse the order of items |
| as | React.ElementType | 'div' | HTML element to render |
Vertical Stack
Item 1
Item 2
Item 3
<Stack spacing={4}>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</Stack>Horizontal Stack
Item 1
Item 2
Item 3
<Stack direction="horizontal" spacing={4}>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</Stack>Responsive Stack
Responsive 1
Responsive 2
Responsive 3
<Stack
direction={{ base: 'vertical', md: 'horizontal' }}
spacing={{ base: 2, md: 4 }}
>
<div>Responsive 1</div>
<div>Responsive 2</div>
<div>Responsive 3</div>
</Stack>Alignment
Center Aligned
Small
Medium
Large
<Stack direction="horizontal" spacing={4} align="center">
<div>Small</div>
<div>Medium</div>
<div>Large</div>
</Stack>Space Between
Start
Middle
End
<Stack direction="horizontal" justify="between"> <div>Start</div> <div>Middle</div> <div>End</div> </Stack>
Wrapping Stack
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
<Stack direction="horizontal" spacing={4} wrap>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
<div>Item 7</div>
<div>Item 8</div>
</Stack>Reverse Stack
First
Second
Third
<Stack direction="horizontal" spacing={4} reverse>
<div>First</div>
<div>Second</div>
<div>Third</div>
</Stack>