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'

VStack#

The VStack component is a component which is only facing the vertical direction. Additionally you can add a divider and vertical spacing between the items.

HStack#

The HStack component is a component which is only facing the horizontal direction. Additionally you can add a divider and horizontal spacing between the items.

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>

Stack 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>

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.

Feature Cards with Stack Component#

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} direction='row'>
      <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 />)

Feature Cards with HStack Component#

In the example following, we can notice that for the HStack component, we don't need the direction props, since this component is specifically for horizontally stacking items.

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 (
    <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 on your own terms with our completely automated process'
      />
    </HStack>
  )
}

render(<StackEx />)

Notes on Stack vs Flex#

Type

SystemProps["flexWrap"]