Stack

A layout component for arranging elements in horizontal or vertical stacks with consistent spacing.

API Reference

Stack Props

PropTypeDefaultDescription
direction'vertical' | 'horizontal' | Responsive'vertical'Direction of the stack
spacingnumber | string | Responsive4Spacing 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
wrapboolean | ResponsivefalseWhether items should wrap
reversebooleanfalseReverse the order of items
asReact.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>