Stack

Stack is a layout component used to group elements together and apply a space between them.

Source

@chakra-ui/layout

Props#

`align`

Description

Shorthand for alignItems style prop

Type

ResponsiveValue<AlignItems>

`direction`

Description

The direction to stack the items.

Type

StackDirection

Default

column

`divider`

Description

If true, each stack item will show a divider

Type

ReactElement<any, string | JSXElementConstructor<any>>

`isInline`

Description

If true the items will be stacked horizontally.

Type

boolean

Default

false

`justify`

Description

Shorthand for justifyContent style prop

Type

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

Default

false

`spacing`

Description

The space between each stack item

Type

ResponsiveValue<string | number | (string & {})>

Default

0.5rem

`wrap`

Description

Shorthand for flexWrap style prop

Type

ResponsiveValue<FlexWrap>

Edit this page on GitHub