Stack

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

Import#

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

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

Usage#

See the Vue

Vue makes front-end development a breeze.

Go Nuxt!

Nuxt makes writing Vue even easier.

Editable Example

<c-stack :spacing="5">
  <c-box :p="5" shadow="md" border-width="1px">
    <c-heading>See the Vue</c-heading>
    <c-text :mt="4">Vue makes front-end development a breeze.</c-text>
  </c-box>
  <c-box :p="5" shadow="md" border-width="1px">
    <c-heading>Go Nuxt!</c-heading>
    <c-text :mt="4">Nuxt makes writing Vue even easier.</c-text>
  </c-box>
</c-stack>

Stack items horizontally#

To stack CStack children horizontally, pass the isInline prop or direction and set it to row.

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

See the Vue

Vue makes front-end development a breeze.

Go Nuxt!

Nuxt makes writing Vue even easier.

Editable Example

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

Reverse display order of items#

Pass the isReversed prop or 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.

Editable Example

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

Stacking HTML elements#

The CStack element is able also to stack HTML elements. Internally it wraps HTML elements inside a CBox primitive component and spaces it like it would any other Chakra component.

Chakra component 1

HTML paragraph element

HTML heading element

Chakra component 2

Editable Example

<c-stack :spacing="4">
  <c-text>Chakra component 1</c-text>
  <p>HTML paragraph element</p>
  <h3>HTML heading element</h3>
  <c-text>Chakra component 2</c-text>
</c-stack>

Props#

Name	Type	Default	Description
`isInline`	`boolean`	false	If `true` the items will be stacked horizontally.
`isReversed`	`boolean`	false	If `true` the items will be displayed in reverse order.
`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`		If `true`, the children will be wrapped in a `Box` with `display: inline-block`, and the Box will take the spacing props

Slots#

Name	Description
default	The content of the stack

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!