Stack

Stack is a layout component that makes it easy to stack elements together and apply a space between them.

Import#

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

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

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#

Stack components use a modified version of the CSS lobotomized owl selector to add spacing between it's children.

Stack's primary use case is to layout items 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.

Basic#

To stack elements in horizontal or vertical direction only, use the VStack and HStack 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>

Editable Example

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>

Editable Example

Adding dividers#

In some scenarios, you might want to add dividers between stacked elements. Pass the divider prop and set it's 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>

Editable Example

Example#

Plan Money

The future can be even brighter but a goal without a plan is just a wish

Save Money

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

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

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

Editable Example

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.

Plan Money

The future can be even brighter but a goal without a plan is just a wish

Save Money

You deserve good things. With a whooping 10-15% interest rate per annum, grow your savings.

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

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

Editable Example

Props#

Name	Type	Description
`direction`	`Responsive(row, column, row-reverse, column-reverse)`	The direction to stack the elements
`divider`	`ReactElement`	The divider element to use between elements
`children`	`ReactNode`	The elements to be stackes
`spacing`	`MarginProps`	The space between each stack item. Defaults to `0.5rem`
`align`	`FlexProps["alignItems"]`	The alignment of the stack item. Similar to `align-items`
`justify`	`FlexProps["justifyContent"]`	The distribution of the stack item. Similar to `justify-content`
`shouldWrapChildren`	`boolean`	If `true`, the children will be wrapped in a `Box` with `display: inline-block`, and the Box will take the spacing props

Edit this page

Stack

.css-12m0k8p{pointer-events:auto;}Import.css-1l2j62r{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-1l2j62r:focus,.css-1l2j62r[data-focus]{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Usage#

Basic#

Responsive direction#

Adding dividers#

Example#

Plan Money

Save Money

Stack items horizontally#

Plan Money

Save Money

Props#

Import#