---
title: Stack
description: >-
  A one-dimensional layout primitive for vertical or horizontal stacking with
  configurable gap spacing.
---

# Stack

## Overview

Stack is a layout component that arranges content in a single direction, such as form fields. It maintains consistent across sequences of elements.

```tsx
<Stack gap={4}>...</Stack>
```

## Usage Guidelines

- **Use for ordered groups:** Use Stack to arrange content that should be read or used in sequence, such as form fields, settings rows, or sections of related information.
- **Prefer vertical by default:** Use the default vertical orientation for most layouts. Switch to horizontal only when items still read clearly in a row and the relationship between them stays obvious.
- **Let Stack manage spacing:** Use the `gap` prop to control separation between children. Avoid adding one-off margins to child elements.

## API Reference

### `Stack`

| Prop          | Type                         | Default      |
| ------------- | ---------------------------- | ------------ |
| `gap`         | `number \| string`           | `0`          |
| `orientation` | `"vertical" \| "horizontal"` | `"vertical"` |
| `children`    | `ReactNode`                  | `undefined`  |

## Examples

### Orientation

Stacks display items in a vertical layout by default, but can become horizontal via the `orientation` property.

```tsx
<Stack orientation="vertical" gap={4}>...</Stack>
<Stack orientation="horizontal" gap={4}>...</Stack>
```