Stack

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.

Responsive direction#

You can pass responsive values to the Stack component to change stack direction and/or spacing between elements.

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.

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#

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.

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#