Alternatives

Inline — For horizontal layouts, with fluid child widths that may wrap
Columns — For horizontal layouts, with prescriptive and exact child widths
Flex — For custom layouts

Usage

Gap

The spacing between children can be adjusted using the gap prop.

Show imports

<Stack gap="large">
  <Box background="dim" height={24} />
  <Box background="dim" height={24} />
  <Box background="dim" height={24} />
</Stack>

<Stack gap="large">
  <Box background="dim" height={24} />
  <Box background="dim" height={24} />
  <Box background="dim" height={24} />
</Stack>

Horizontal alignment

Items can be aligned horizontally using the align prop.

left

center

right

Show imports

Open in Playroom

<Stack gap="medium" dividers>
  <Stack gap="small" align="left">
    <Box background="dim" padding="xsmall" height={32} />
    <Box background="dim" padding="xsmall" height={32}>
      <Text>left</Text>
    </Box>
    <Box background="dim" padding="xsmall" height={32} />
  </Stack>
  <Stack gap="small" align="center">
    <Box background="dim" padding="xsmall" height={32} />
    <Box background="dim" padding="xsmall" height={32}>
      <Text>center</Text>
    </Box>
    <Box background="dim" padding="xsmall" height={32} />
  </Stack>
  <Stack gap="small" align="right">
    <Box background="dim" padding="xsmall" height={32} />
    <Box background="dim" padding="xsmall" height={32}>
      <Text>right</Text>
    </Box>
    <Box background="dim" padding="xsmall" height={32} />
  </Stack>
</Stack>

<Stack gap="medium" dividers>
  <Stack gap="small" align="left">
    <Box background="dim" padding="xsmall" height={32} />
    <Box background="dim" padding="xsmall" height={32}>
      <Text>left</Text>
    </Box>
    <Box background="dim" padding="xsmall" height={32} />
  </Stack>
  <Stack gap="small" align="center">
    <Box background="dim" padding="xsmall" height={32} />
    <Box background="dim" padding="xsmall" height={32}>
      <Text>center</Text>
    </Box>
    <Box background="dim" padding="xsmall" height={32} />
  </Stack>
  <Stack gap="small" align="right">
    <Box background="dim" padding="xsmall" height={32} />
    <Box background="dim" padding="xsmall" height={32}>
      <Text>right</Text>
    </Box>
    <Box background="dim" padding="xsmall" height={32} />
  </Stack>
</Stack>

Dividers

Use the dividers property to render a Divider between each element in the Stack.

First item

Second item

Third item

Show imports

Open in Playroom

<Stack gap="small" dividers>
  <Text>First item</Text>
  <Text>Second item</Text>
  <Text>Third item</Text>
</Stack>

<Stack gap="small" dividers>
  <Text>First item</Text>
  <Text>Second item</Text>
  <Text>Third item</Text>
</Stack>

Nesting

Nest Stack components to create more complex white space rules.

Heading

Line 1

Line 2

Line 3

Line 1

Line 2

Line 3

Show imports

Open in Playroom

<Stack gap="large">
  <Heading level="4">Heading</Heading>
  <Stack gap="xsmall">
    <Text>Line 1</Text>
    <Text>Line 2</Text>
    <Text>Line 3</Text>
  </Stack>
  <Stack gap="xsmall">
    <Text>Line 1</Text>
    <Text>Line 2</Text>
    <Text>Line 3</Text>
  </Stack>
</Stack>

<Stack gap="large">
  <Heading level="4">Heading</Heading>
  <Stack gap="xsmall">
    <Text>Line 1</Text>
    <Text>Line 2</Text>
    <Text>Line 3</Text>
  </Stack>
  <Stack gap="xsmall">
    <Text>Line 1</Text>
    <Text>Line 2</Text>
    <Text>Line 3</Text>
  </Stack>
</Stack>