Stack

Stack is a layout utility component that makes it easy to stack elements together and apply a space between them. It composes the CFlex component.

Import

By default, each item is stacked vertically. CStack clones its children and passes the spacing to them using margin-bottom or margin-right.

import { CStack } from '@chakra-ui/vue-next';

In addition, Chakra-UI Vue exports two additional CStack components

CVStack: used to stack elements in the vertical direction
CHStack: used to stack elements in the horizontal direction

import { CStack, CHStack, CVStack } from '@chakra-ui/vue-next';

Usage

See the Vue

Vue makes front-end development a breeze.

Go Nuxt!

Nuxt makes writing Vue even easier.

<CStack :spacing="5">  <CBox :p="5" shadow="md" border-width="1px">    <CHeading>See the Vue</CHeading>    <CText :mt="4">Vue makes front-end development a breeze.</CText>  </CBox>  <CBox :p="5" shadow="md" border-width="1px">    <CHeading>Go Nuxt!</CHeading>    <CText :mt="4">Nuxt makes writing Vue even easier.</CText>  </CBox></CStack>

Stack items horizontally

You can stack the items horizontally either:

By passing the is-inline prop or direction and set it to row to the CStack component.

See the Vue

Vue makes front-end development a breeze.

Go Nuxt!

Nuxt makes writing Vue even easier.

<CStack :spacing="5" is-inline>  <CBox :p="5" shadow="md" border-width="1px">    <CHeading>See the Vue</CHeading>    <CText :mt="4">Vue makes front-end development a breeze.</CText>  </CBox>  <CBox :p="5" shadow="md" border-width="1px">    <CHeading>Go Nuxt!</CHeading>    <CText :mt="4">Nuxt makes writing Vue even easier.</CText>  </CBox></CStack>

Using the CHStack component.

See the Vue

Vue makes front-end development a breeze.

Go Nuxt!

Nuxt makes writing Vue even easier.

<CHStack :spacing="5">  <CBox :p="5" shadow="md" border-width="1px">    <CHeading>See the Vue</CHeading>    <CText :mt="4">Vue makes front-end development a breeze.</CText>  </CBox>  <CBox :p="5" shadow="md" border-width="1px">    <CHeading>Go Nuxt!</CHeading>    <CText :mt="4">Nuxt makes writing Vue even easier.</CText>  </CBox></CHStack>

Optionally, you can use align and justify to adjust the alignment and distribution of the items.

Reverse display order of items

Set direction to row-reverse or column-reverse.

See the Vue

Vue makes front-end development a breeze.

Go Nuxt!

Nuxt makes writing Vue even easier.

<CStack :spacing="5" is-reversed>  <CBox :p="5" shadow="md" border-width="1px">    <CHeading>See the Vue</CHeading>    <CText :mt="4">Vue makes front-end development a breeze.</CText>  </CBox>  <CBox :p="5" shadow="md" border-width="1px">    <CHeading>Go Nuxt!</CHeading>    <CText :mt="4">Nuxt makes writing Vue even easier.</CText>  </CBox></CStack>

Stacking HTML elements

Chakra component 1

HTML paragraph element

HTML heading element

Chakra component 2

<CStack :spacing="4">  <CText>Chakra component 1</CText>  <p>HTML paragraph element</p>  <h3>HTML heading element</h3>  <CText>Chakra component 2</CText></CStack>

Props

Name	Type	Default	Description
`isInline`	`boolean`	false	If `true` the items will be stacked horizontally.
`direction`	`FlexProps["flexDirection"]`		The direction to stack the items.
`spacing`	`StyledSystem.MarginProps`		The space between each stack item
`align`	`FlexProps["alignItems"]`		The alignment of the stack item. Similar to `align-items`
`justify`	`FlexProps["justifyContent"]`		The distribution of the stack item. Similar to `justify-content`
`shouldWrapChildren`	`boolean`	false	If `true`, the children will be wrapped in a `Box` with `display: inline-block`, and the Box will take the spacing props
`divider`	`boolean`	false	If `true`, the stack items will be divided by a straight line

Edit this page on GitHub