# Layout components

> Arrange native controls with stacks, scrolling, lists, spacing, and dividers.

Canonical: https://natui.dev/docs/components/layout

## VStack [#vstack]

Arranges children vertically. `spacing` controls the gap, and `alignment` accepts `leading`, `center`, or `trailing`.

### VStackProps


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| `spacing` | `number \| undefined` | No |  |
| `alignment` | `"leading" \| "center" \| "trailing" \| undefined` | No |  |
| `children` | `ReactNode` | No |  |
| `padding` | `number \| EdgeInsets \| undefined` | No |  |
| `background` | `string \| undefined` | No |  |
| `cornerRadius` | `number \| undefined` | No |  |
| `frame` | `Frame \| undefined` | No |  |
| `opacity` | `number \| undefined` | No |  |
| `disabled` | `boolean \| undefined` | No |  |
| `hidden` | `boolean \| undefined` | No |  |
| `color` | `string \| undefined` | No | Foreground color. |
| `help` | `string \| undefined` | No | Tooltip. |
| `tag` | `string \| undefined` | No | Stable row identity for selectable containers (List/Table selection). A selectable List reports and receives selection as its rows' tags. |
| `badge` | `string \| number \| undefined` | No | Badge shown on Tab items and List rows (counts, short strings). |
| `accessibilityLabel` | `string \| undefined` | No | Assistive-tech label (VoiceOver / Narrator). |
| `accessibilityHint` | `string \| undefined` | No | Assistive-tech hint describing the result of activating the element. |
| `accessibilityIdentifier` | `string \| undefined` | No | Stable identifier for UI automation (AX identifier / AutomationId). |
| `key` | `string \| number \| undefined` | No |  |

```tsx
<VStack spacing={12} padding={20} alignment="leading">
  <Text font="headline">Account</Text>
  <TextField value={name} onChange={setName} />
</VStack>
```

## HStack [#hstack]

Arranges children horizontally. `alignment` accepts `top`, `center`, or `bottom`.

### HStackProps


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| `spacing` | `number \| undefined` | No |  |
| `alignment` | `"center" \| "top" \| "bottom" \| undefined` | No |  |
| `children` | `ReactNode` | No |  |
| `padding` | `number \| EdgeInsets \| undefined` | No |  |
| `background` | `string \| undefined` | No |  |
| `cornerRadius` | `number \| undefined` | No |  |
| `frame` | `Frame \| undefined` | No |  |
| `opacity` | `number \| undefined` | No |  |
| `disabled` | `boolean \| undefined` | No |  |
| `hidden` | `boolean \| undefined` | No |  |
| `color` | `string \| undefined` | No | Foreground color. |
| `help` | `string \| undefined` | No | Tooltip. |
| `tag` | `string \| undefined` | No | Stable row identity for selectable containers (List/Table selection). A selectable List reports and receives selection as its rows' tags. |
| `badge` | `string \| number \| undefined` | No | Badge shown on Tab items and List rows (counts, short strings). |
| `accessibilityLabel` | `string \| undefined` | No | Assistive-tech label (VoiceOver / Narrator). |
| `accessibilityHint` | `string \| undefined` | No | Assistive-tech hint describing the result of activating the element. |
| `accessibilityIdentifier` | `string \| undefined` | No | Stable identifier for UI automation (AX identifier / AutomationId). |
| `key` | `string \| number \| undefined` | No |  |

```tsx
<HStack spacing={8} alignment="center">
  <Label systemImage="person">Profile</Label>
  <Spacer />
  <Button onPress={save}>Save</Button>
</HStack>
```

## ZStack [#zstack]

Overlays children in the same native layout region. On Windows it maps to a `Grid`. A `Spacer` inside a Windows `ZStack` has no track to fill and collapses.

### ZStackProps


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | No |  |
| `padding` | `number \| EdgeInsets \| undefined` | No |  |
| `background` | `string \| undefined` | No |  |
| `cornerRadius` | `number \| undefined` | No |  |
| `frame` | `Frame \| undefined` | No |  |
| `opacity` | `number \| undefined` | No |  |
| `disabled` | `boolean \| undefined` | No |  |
| `hidden` | `boolean \| undefined` | No |  |
| `color` | `string \| undefined` | No | Foreground color. |
| `help` | `string \| undefined` | No | Tooltip. |
| `tag` | `string \| undefined` | No | Stable row identity for selectable containers (List/Table selection). A selectable List reports and receives selection as its rows' tags. |
| `badge` | `string \| number \| undefined` | No | Badge shown on Tab items and List rows (counts, short strings). |
| `accessibilityLabel` | `string \| undefined` | No | Assistive-tech label (VoiceOver / Narrator). |
| `accessibilityHint` | `string \| undefined` | No | Assistive-tech hint describing the result of activating the element. |
| `accessibilityIdentifier` | `string \| undefined` | No | Stable identifier for UI automation (AX identifier / AutomationId). |
| `key` | `string \| number \| undefined` | No |  |

```tsx
<ZStack frame={{ width: 240, height: 140 }}>
  <Image systemName="rectangle.fill" size={120} />
  <Text weight="bold">Overlay</Text>
</ZStack>
```

## Spacer [#spacer]

Consumes available space along a stack's main axis. Set `minLength` to preserve a minimum gap.

### SpacerProps


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| `minLength` | `number \| undefined` | No |  |
| `padding` | `number \| EdgeInsets \| undefined` | No |  |
| `background` | `string \| undefined` | No |  |
| `cornerRadius` | `number \| undefined` | No |  |
| `frame` | `Frame \| undefined` | No |  |
| `opacity` | `number \| undefined` | No |  |
| `disabled` | `boolean \| undefined` | No |  |
| `hidden` | `boolean \| undefined` | No |  |
| `color` | `string \| undefined` | No | Foreground color. |
| `help` | `string \| undefined` | No | Tooltip. |
| `tag` | `string \| undefined` | No | Stable row identity for selectable containers (List/Table selection). A selectable List reports and receives selection as its rows' tags. |
| `badge` | `string \| number \| undefined` | No | Badge shown on Tab items and List rows (counts, short strings). |
| `accessibilityLabel` | `string \| undefined` | No | Assistive-tech label (VoiceOver / Narrator). |
| `accessibilityHint` | `string \| undefined` | No | Assistive-tech hint describing the result of activating the element. |
| `accessibilityIdentifier` | `string \| undefined` | No | Stable identifier for UI automation (AX identifier / AutomationId). |
| `key` | `string \| number \| undefined` | No |  |

```tsx
<HStack>
  <Text>Leading</Text>
  <Spacer minLength={16} />
  <Text>Trailing</Text>
</HStack>
```

## Divider [#divider]

Renders the platform divider. It has no component-specific props beyond common props.

### DividerProps


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| `padding` | `number \| EdgeInsets \| undefined` | No |  |
| `background` | `string \| undefined` | No |  |
| `cornerRadius` | `number \| undefined` | No |  |
| `frame` | `Frame \| undefined` | No |  |
| `opacity` | `number \| undefined` | No |  |
| `disabled` | `boolean \| undefined` | No |  |
| `hidden` | `boolean \| undefined` | No |  |
| `color` | `string \| undefined` | No | Foreground color. |
| `help` | `string \| undefined` | No | Tooltip. |
| `tag` | `string \| undefined` | No | Stable row identity for selectable containers (List/Table selection). A selectable List reports and receives selection as its rows' tags. |
| `badge` | `string \| number \| undefined` | No | Badge shown on Tab items and List rows (counts, short strings). |
| `accessibilityLabel` | `string \| undefined` | No | Assistive-tech label (VoiceOver / Narrator). |
| `accessibilityHint` | `string \| undefined` | No | Assistive-tech hint describing the result of activating the element. |
| `accessibilityIdentifier` | `string \| undefined` | No | Stable identifier for UI automation (AX identifier / AutomationId). |
| `key` | `string \| number \| undefined` | No |  |

```tsx
<VStack spacing={8}>
  <Text>Above</Text>
  <Divider />
  <Text>Below</Text>
</VStack>
```

## ScrollView [#scrollview]

Scrolls children on the `vertical` axis by default, or on the `horizontal` axis.

### ScrollViewProps


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| `axis` | `"vertical" \| "horizontal" \| undefined` | No |  |
| `children` | `ReactNode` | No |  |
| `padding` | `number \| EdgeInsets \| undefined` | No |  |
| `background` | `string \| undefined` | No |  |
| `cornerRadius` | `number \| undefined` | No |  |
| `frame` | `Frame \| undefined` | No |  |
| `opacity` | `number \| undefined` | No |  |
| `disabled` | `boolean \| undefined` | No |  |
| `hidden` | `boolean \| undefined` | No |  |
| `color` | `string \| undefined` | No | Foreground color. |
| `help` | `string \| undefined` | No | Tooltip. |
| `tag` | `string \| undefined` | No | Stable row identity for selectable containers (List/Table selection). A selectable List reports and receives selection as its rows' tags. |
| `badge` | `string \| number \| undefined` | No | Badge shown on Tab items and List rows (counts, short strings). |
| `accessibilityLabel` | `string \| undefined` | No | Assistive-tech label (VoiceOver / Narrator). |
| `accessibilityHint` | `string \| undefined` | No | Assistive-tech hint describing the result of activating the element. |
| `accessibilityIdentifier` | `string \| undefined` | No | Stable identifier for UI automation (AX identifier / AutomationId). |
| `key` | `string \| number \| undefined` | No |  |

```tsx
<ScrollView axis="vertical" frame={{ maxHeight: 'infinity' }}>
  <VStack spacing={8}>{rows}</VStack>
</ScrollView>
```

## List [#list]

Renders native list rows and optionally controls selection through child `tag` props.

### ListProps


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| `value` | `string \| string[] \| null \| undefined` | No | Controlled selection: a child row's `tag` (single), an array of tags (multiple), or null for no selection. The presence of this prop (even null) is what makes the list selectable; rows identify themselves via the `tag` common prop. |
| `selectionMode` | `"single" \| "multiple" \| undefined` | No |  |
| `style` | `"automatic" \| "sidebar" \| undefined` | No | 'sidebar' renders the platform source-list material (macOS sidebars). |
| `onChange` | `((value: string \| string[] \| null) => void) \| undefined` | No |  |
| `children` | `ReactNode` | No |  |
| `padding` | `number \| EdgeInsets \| undefined` | No |  |
| `background` | `string \| undefined` | No |  |
| `cornerRadius` | `number \| undefined` | No |  |
| `frame` | `Frame \| undefined` | No |  |
| `opacity` | `number \| undefined` | No |  |
| `disabled` | `boolean \| undefined` | No |  |
| `hidden` | `boolean \| undefined` | No |  |
| `color` | `string \| undefined` | No | Foreground color. |
| `help` | `string \| undefined` | No | Tooltip. |
| `tag` | `string \| undefined` | No | Stable row identity for selectable containers (List/Table selection). A selectable List reports and receives selection as its rows' tags. |
| `badge` | `string \| number \| undefined` | No | Badge shown on Tab items and List rows (counts, short strings). |
| `accessibilityLabel` | `string \| undefined` | No | Assistive-tech label (VoiceOver / Narrator). |
| `accessibilityHint` | `string \| undefined` | No | Assistive-tech hint describing the result of activating the element. |
| `accessibilityIdentifier` | `string \| undefined` | No | Stable identifier for UI automation (AX identifier / AutomationId). |
| `key` | `string \| number \| undefined` | No |  |

```tsx
<List value={selected} onChange={setSelected} selectionMode="single">
  <Text tag="one">First</Text>
  <Text tag="two">Second</Text>
</List>
```

The presence of `value`, including `value={null}`, makes the list selectable. Use `selectionMode="multiple"` with a string array. The `sidebar` style uses platform source-list treatment where available.

On Windows, rows nested inside `Section` are not individually selectable and list row badges are not rendered.