Stack

Vertical stack (default)

Item 1

Item 2

Item 3

<FuiStack spacing="s">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</FuiStack>

Horizontal stack with wrap

<FuiStack direction="horizontal" spacing="m" wrap>
  <FuiButton>Button 1</FuiButton>
  <FuiButton>Button 2</FuiButton>
</FuiStack>

Alignment

justify="center"

<FuiStack direction="horizontal" justify="center">
  <FuiButton>Left</FuiButton>
  <FuiButton>Center</FuiButton>
  <FuiButton>Right</FuiButton>
</FuiStack>

Props

Prop	Type	Default	Description
direction	horizontal | vertical	vertical	Layout direction
spacing	none | xs | s | m | l | xl | xxl	m	Gap between items
wrap	boolean	false	Allow wrapping
align	start | center | end | stretch	stretch	Cross-axis alignment
justify	start | center | end | between	start	Main-axis alignment