Chakra UI Stack - Horizon UI

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>

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

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>

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

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

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

"column" | "column-reverse" | "row" | "row-reverse" | ResponsiveArray<"column" | "column-reverse" | "row" | "row-reverse"> | Partial<Record<string, "column" | "column-reverse" | "row" | "row-reverse">>

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