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>
<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" borderColor="gray.700" {...rest}>
<Heading fontSize="xl" color="whiteAlpha.900">
{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" borderColor="gray.700" {...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"
borderColor="gray.700"
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"]

© 2021, Made with ❤️ by Creative Tim & Simmmple for a better web

  • Creative Tim
  • Simmmple
  • Blog
  • License