---
title: VStack
description: "`VStack` is used to stack child elements vertically."
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/z-stack
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-stack--vertical
---

```tsx
<VStack>
  {Array.from({ length: 4 }).map((_, index) => (
    <Box key={index} bg="bg.contrast" color="fg.contrast" p="md">
      Box
    </Box>
  ))}
</VStack>
```

## Usage

```tsx
import { VStack } from "@yamada-ui/react"
```

```tsx
import { VStack } from "@/components/ui"
```

```tsx
import { VStack } from "@workspaces/ui"
```

```tsx
<VStack />
```

### Adding Separators Between Child Elements

Use the `separator` prop to add a separator between the child elements.

```tsx
<VStack separator={<Separator />}>
  {Array.from({ length: 4 }).map((_, index) => (
    <Box key={index} bg="bg.contrast" color="fg.contrast" p="md">
      Box
    </Box>
  ))}
</VStack>
```

## Props

| Prop          | Default | Type                                                                                                                                              | Description                                       |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
| `as`          | -       | `As`                                                                                                                                              | The HTML element to render.                       |
| `asChild`     | -       | `boolean`                                                                                                                                         | Merges its props onto its immediate child.        |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                                        | The CSS object.                                   |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                         | Set color scheme variables.                       |
| `align`       | -       | `"-moz-initial" \| "baseline" \| "center" \| "end" \| "flex-end" \| "flex-start" \| "inherit" \| "initial" \| "normal" \| "revert-layer" ...`     | The CSS `align-items` property.                   |
| `direction`   | -       | `"-moz-initial" \| "column-reverse" \| "column" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "row-reverse" \| "row" \| "unset" ...` | The CSS `flex-direction` property.                |
| `justify`     | -       | `"-moz-initial" \| "center" \| "end" \| "flex-end" \| "flex-start" \| "inherit" \| "initial" \| "left" \| "normal" \| "revert-layer" ...`         | The CSS `justify-content` property.               |
| `separator`   | -       | `ReactElement<unknown, string \| JSXElementConstructor<any>>`                                                                                     | If `true`, each stack item will show a separator. |
| `wrap`        | -       | `"-moz-initial" \| "inherit" \| "initial" \| "nowrap" \| "revert-layer" \| "revert" \| "unset" \| "wrap-reverse" \| "wrap" ...`                   | The CSS `flex-wrap` property.                     |