Stack

The <Stack> component lays out its children vertically with consistent spacing between them. Optionally, it can show dividers between its children.

Variants

Default

Open in Playroom

<Stack>
  <Placeholder height={48} />
  <Placeholder height={48} />
  <Placeholder height={48} />
</Stack>

Spacing

Open in Playroom

<Stack spacing={5}>
  <Placeholder height={48} />
  <Placeholder height={48} />
  <Placeholder height={48} />
</Stack>

Dividers

Open in Playroom

<Stack dividers={1}>
  <Placeholder height={48} />
  <Placeholder height={48} />
  <Placeholder height={48} />
</Stack>

Examples

Nested `<Stack>`s with different spacing

Card 1

Image

Some content in a card.

Card 2

Image

Some other content in a card.

Open in Playroom

<Stack>
  <Box padding={3} shadow={1} borderRadius={2}>
    <Stack spacing={2}>
      <Text bold component="h4">Card 1</Text>
      <Placeholder height={150} label="Image" />
      <Text>Some content in a card.</Text>
    </Stack>
  </Box>
  <Box padding={3} shadow={1} borderRadius={2}>
    <Stack spacing={2}>
      <Text bold component="h4">Card 2</Text>
      <Placeholder height={150} label="Image" />
      <Text>Some other content in a card.</Text>
    </Stack>
  </Box>
</Stack>

Props

<Stack>

children

Required

ReactNode

className

Deprecated

string

dividers

1 | 2 | 3

spacing

0 | 1 | 2 | 3 | 4 | 5 | "0" | "1" | "2" | "3" | "3-half" | "4" | "5"

ref

(instance: any) => void | RefObject<any>

Stack

Variants

Default

Spacing

Dividers

Examples

Nested <Stack>s with different spacing

Card 1

Card 2

Props

<Stack>

Nested `<Stack>`s with different spacing