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.

chakra ui pro

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.

1
2
3
Editable Example

Responsive direction#

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

1
2
3
Editable Example

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.

1
2
3
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

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.

Editable Example

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

Proudly made inNigeria by Segun Adebayo