---
title: VStack
description: 'VStack (or Vertical Stack) is a layout component that arranges child elements in a vertical line.'
type: layout
slug: /components/vstack/
keywords: ['vstack', 'layout', 'vertical', 'align']
---

# VStack

`VStack` (or Vertical Stack) is a layout component that arranges child elements in a vertical line.

## Table of contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

-   [Usage](#usage)
-   [Props](#props)
-   [Spacer](#spacer)
-   [See Also](#see-also)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

<!-- Automatically Generated. DO NOT EDIT THIS FILE. -->
<!-- Instead, edit packages/website/src/docs/components/foundations/vstack.mdx -->

<!-- props -->

<!-- Automatically Generated -->

## Usage

`VStack` can render anything inside.

```jsx live
import { VStack, Text, View } from '@wp-g2/components';
import { ui } from '@wp-g2/styles';

function Example() {
	return (
		<VStack css={[ui.frame.height(200)]}>
			<View css={[ui.background.blue]}>
				<Text>Ana</Text>
			</View>
			<View css={[ui.background.blue]}>
				<Text>Elsa</Text>
			</View>
			<View css={[ui.background.blue]}>
				<Text>Olaf</Text>
			</View>
		</VStack>
	);
}
```

## Props

##### alignment

**Type**: `HStackAlignment`,`CSS['alignItems']`

Determines how the child elements are aligned.

-   `top`: Aligns content to the top.
-   `topLeft`: Aligns content to the top/left.
-   `topRight`: Aligns content to the top/right.
-   `left`: Aligns content to the left.
-   `center`: Aligns content to the center.
-   `right`: Aligns content to the right.
-   `bottom`: Aligns content to the bottom.
-   `bottomLeft`: Aligns content to the bottom/left.
-   `bottomRight`: Aligns content to the bottom/right.
-   `edge`: Aligns content to the edges of the container.
-   `stretch`: Stretches content to the edges of the container.

##### direction

**Type**: `FlexDirection`

The direction flow of the children content can be adjusted with `direction`. `column` will align children vertically and `row` will align children horizontally.

##### expanded

**Type**: `boolean`

Expands to the maximum available width (if horizontal) or height (if vertical).

##### justify

**Type**: `CSS['justifyContent']`

Horizontally aligns content if the `direction` is `row`, or vertically aligns content if the `direction` is `column`.
In the example below, `flex-start` will align the children content to the left.

##### spacing

**Type**: `CSS['width']`

The amount of space between each child element. Spacing in between each child can be adjusted by using `spacing`.
The value of `spacing` works as a multiplier to the library's grid system (base of `4px`).

##### wrap

**Type**: `boolean`

Determines if children should wrap.

<!-- /Automatically Generated -->
<!-- /props -->

## Spacer

When a `Spacer` is used within an `VStack`, the `Spacer` adaptively expands to take up the remaining space.

```jsx live
import { VStack, Spacer, Text, View } from '@wp-g2/components';
import { ui } from '@wp-g2/styles';

function Example() {
	return (
		<VStack css={[ui.frame.height(200)]}>
			<View css={[ui.background.blue]}>
				<Text>Ana</Text>
			</View>
			<Spacer css={[ui.background.blue]}>
				<Text>Elsa</Text>
			</Spacer>
			<View css={[ui.background.blue]}>
				<Text>Olaf</Text>
			</View>
		</VStack>
	);
}
```

`Spacer` can also be used in-between items to push them apart.

```jsx live
import { VStack, Spacer, Text, View } from '@wp-g2/components';
import { ui } from '@wp-g2/styles';

function Example() {
	return (
		<VStack css={[ui.frame.height(200)]}>
			<View css={[ui.background.blue]}>
				<Text>Ana</Text>
			</View>
			<Spacer />
			<View css={[ui.background.blue]}>
				<Text>Elsa</Text>
			</View>
			<View css={[ui.background.blue]}>
				<Text>Olaf</Text>
			</View>
		</VStack>
	);
}
```

## See Also

-   [`HStack`](../hstack/)
-   [`Flex`](../flex/)
-   [`Spacer`](../spacer/)