Stack

Stack is a layout component used to group elements together and apply a space between them.

Import

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

• VStack: used to stack elements in the vertical direction
• HStack: used to stack elements in the horizontal direction
• Stack: used to stack elements in the vertical or horizontal direction

Usage

Stack uses a modified version of the CSS lobotomized owl selector to add spacing between its children.

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>

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

<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 CustomStack() { const Feature = ({ title, desc, ...rest }) => ( <Box p={5} shadow="md" borderWidth="1px" {...rest}> <Heading fontSize="xl">{title}</Heading> <Text mt={4}>{desc}</Text> </Box> ); 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> ); }

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

  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>
  );
}

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 CustomStack() { const Feature = ({ title, desc, ...rest }) => ( <Box p={5} shadow="md" borderWidth="1px" {...rest}> <Heading fontSize="xl">{title}</Heading> <Text mt={4}>{desc}</Text> </Box> ); 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> ); }

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

  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>
  );
}

Notes on Stack vs Flex

The Stack component and the Flex component have their children spaced out evenly but the key difference is that the Stack won't span the entire width of the container whereas the Flex will. Another thing to note is that the items in both Stack and Flex are aligned in the center by default.

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"]