Stack

Stack is a container component for arranging elements vertically or horizontally.

Introduction

The Stack component manages the layout of its immediate children along the vertical or horizontal axis, with optional spacing and dividers between each child.

Basics

import Stack from '@mui/joy/Stack';

The Stack component acts as a generic container, wrapping around the elements to be arranged.

Use the spacing prop to control the space between children. The spacing value can be any number, including decimals, or a string. (The prop is converted into a CSS property using the theme.spacing() helper.)

Item 1

Item 2

Item 3

<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>

<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>

Press Enter to start editing

Customization

Direction

By default, Stack arranges items vertically in a column. Use the direction prop to position items horizontally in a row:

Item 1

Item 2

Item 3

<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>

<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>

Press Enter to start editing

Dividers

Use the divider prop to insert an element between each child. This works particularly well with the Divider component, as shown below:

Item 1

Item 2

Item 3

<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>

<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>

Press Enter to start editing

Responsive values

You can switch the direction or spacing values based on the active breakpoint.

Item 1

Item 2

Item 3

<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>

<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>

Press Enter to start editing

System props

As a CSS utility component, Stack supports all MUI System properties. You can use them as props directly on the component. For instance, a margin-top:

<Stack mt={2}>

Interactive demo

Below is an interactive demo that lets you explore the visual results of the different settings:

Item 1

Item 2

Item 3

<Stack
  direction="row"
  justifyContent="center"
  alignItems="center"
  spacing={2}
>

Limitations

Margin on the children

Customizing the margin on the children is not supported.

For instance, the top-margin on the Button component below will be ignored.

<Stack>
  <Button sx={{ marginTop: '30px' }}>...</Button>
</Stack>

A RFC to address this issue is already open.

white-space: nowrap

The initial setting on flex items is min-width: auto. This causes a positioning conflict when children use white-space: nowrap;. You can reproduce the issue with:

<Stack direction="row">
  <Typography noWrap>

In order for the item to stay within the container you need to set min-width: 0.

<Stack direction="row" sx={{ minWidth: 0 }}>
  <Typography noWrap>

Truncation should be conditionally applicable on this long line of text as this is a much longer line than what the container can support.

Anatomy

The Stack component is composed of a single root <div> element:

<div class="MuiStack-root">
  <!-- Stack contents -->
</div>