Stack

Stack is a layout component that makes it easy to stack elements together and apply a space between them. It uses a modified version of the CSS lobotomized owl selector to add spacing between its children.

Import#

import { Stack, HStack, VStack } from '@chakra-ui/react'

Stack: Used to add spacing between elements in the horizontal or vertical direction. It supports responsive values.
HStack: Used to add spacing between elements in horizontal direction, and centers them.
VStack: Used to add spacing between elements in vertical direction only, and centers them.

Usage#

To stack elements in horizontal or vertical direction only, use the HStack or VStack components. You can also use the Stack component as well and pass the direction prop.

<HStack spacing='24px'>
  <Box w='40px' h='40px' bg='yellow.200'>
    1
  </Box>
  <Box w='40px' h='40px' bg='tomato'>
    2
  </Box>
  <Box w='40px' h='40px' bg='pink.100'>
    3
  </Box>
</HStack>

Responsive direction#

You can pass responsive values to the Stack component to change stack direction and/or spacing between elements.

<Stack direction={['column', 'row']} spacing='24px'>
  <Box w='40px' h='40px' bg='yellow.200'>
    1
  </Box>
  <Box w='40px' h='40px' bg='tomato'>
    2
  </Box>
  <Box w='40px' h='40px' bg='pink.100'>
    3
  </Box>
</Stack>

Adding dividers#

In some scenarios, you may want to add dividers between stacked elements. Pass the divider prop and set its value to the StackDivider or any custom React element.

<VStack
  divider={<StackDivider borderColor='gray.200' />}
  spacing={4}
  align='stretch'
>
  <Box h='40px' bg='yellow.200'>
    1
  </Box>
  <Box h='40px' bg='tomato'>
    2
  </Box>
  <Box h='40px' bg='pink.100'>
    3
  </Box>
</VStack>

Example#

function Feature({ title, desc, ...rest }) {
  return (
    <Box p={5} shadow='md' borderWidth='1px' {...rest}>
      <Heading fontSize='xl'>{title}</Heading>
      <Text mt={4}>{desc}</Text>
    </Box>
  )
}

function StackEx() {
  return (
    <Stack spacing={8}>
      <Feature
        title='Plan Money'
        desc='The future can be even brighter but a goal without a plan is just a wish'
      />
      <Feature
        title='Save Money'
        desc='You deserve good things. With a whooping 10-15% interest rate per annum, grow your savings on your own terms with our completely automated process'
      />
    </Stack>
  )
}

render(<StackEx />)

Stack items horizontally#

Pass the direction and set it to row. Optionally, you can use align and justify to adjust the alignment and distribution of the items.

function Feature({ title, desc, ...rest }) {
  return (
    <Box
      p={5}
      shadow='md'
      borderWidth='1px'
      flex='1'
      borderRadius='md'
      {...rest}
    >
      <Heading fontSize='xl'>{title}</Heading>
      <Text mt={4}>{desc}</Text>
    </Box>
  )
}

function StackEx() {
  return (
    <HStack spacing={8}>
      <Feature
        title='Plan Money'
        desc='The future can be even brighter but a goal without a plan is just a wish'
      />
      <Feature
        title='Save Money'
        desc='You deserve good things. With a whooping 10-15% interest rate per annum, grow your savings.'
      />
    </HStack>
  )
}

render(<StackEx />)

Notes on Stack vs Flex#

Stack's primary use case is to lay items out and control the spacing between each item. If you have a more complicated use case, such as changing the margin on the last child, you can combine Stack and Flex and use justify-content: space-between for more control of the layout.

Props#

`align`

Description

Shorthand for alignItems style prop

Type

SystemProps["alignItems"]

`direction`

Description

The direction to stack the items.

Type

StackDirection

`divider`

Description

If true, each stack item will show a divider

Type

React.ReactElement

`isInline`

Description

If true the items will be stacked horizontally.

Type

boolean

`justify`

Description

Shorthand for justifyContent style prop

Type

SystemProps["justifyContent"]

`shouldWrapChildren`

Description

If true, the children will be wrapped in a Box with `display: inline-block`, and the Box will take the spacing props

Type

boolean

`spacing`

Description

The space between each stack item

Type

SystemProps["margin"]

`wrap`

Description

Shorthand for flexWrap style prop

Type

SystemProps["flexWrap"]