docs(stack.mdx): documentation for the Stack component

packages/chakra-ui-docs/docs/stack.mdx

@@ -1 +1,87 @@
-# Stack
+import SEO from '../components/SEO'
+
+<SEO
+  title="Stack"
+  description="Stack is a layout utility component that makes it easy to stack elements together and apply a space between them."
+/>
+
+# 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](/flex) component.
+
+## Import
+
+```js
+import { CStack } from '@chakra-ui/vue'
+```
+
+By default, each item is stacked vertically. Stack clones it's children and passes the spacing to them using `margin-bottom` or `margin-right`.
+
+## Usage
+
+```vue live=true
+<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.
+
+```vue live=true
+<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`.
+
+```vue live=true
+<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>
+```
+
+## 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 |