> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Stack | UI components

> Learn about the Stack component for use in UI extensions.

The `Stack` component arranges child components vertically using flexbox. It always stacks content in a single column. For horizontal or mixed-direction layouts, use [`Flex`](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/flex) or [`Inline`](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/inline) instead.

`Stack` is one of several layout tools available in UI extensions, alongside [`Flex`](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/flex), [`Inline`](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/inline), [`Box`](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/box), and [`AutoGrid`](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/autogrid).

> [!NOTE]
>
> The `Stack` component was introduced as part of the v1.0 release of the UI extensions SDK. Learn more about the latest release and how to upgrade in the [UI extensions SDK versioning article](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk/versioning.md).

## Props

| Prop | Type | Default | Description |
| - | - | - | - |
| `gap` | `'flush'` \| `'extra-small'` / `'xs'` \| `'small'` / `'sm'` \| `'medium'` / `'md'` \| `'large'` / `'lg'` \| `'extra-large'` / `'xl'` | `'flush'` | Sets the spacing between child components. |
| `align` | `'start'` \| `'center'` \| `'end'` \| `'baseline'` \| `'stretch'` | `'stretch'` | Distributes components along the cross-axis (horizontal) using the available free space. |
| `justify` | `'start'` \| `'center'` \| `'end'` \| `'around'` \| `'between'` | `'start'` | Distributes components along the main axis (vertical) using the available free space. |

## Usage examples

### Basic vertical stack

The simplest use: a `Stack` with no props arranges its children top-to-bottom with no gap between them.

```js theme={null}
import { Stack, Text } from '@hubspot/ui-extensions';

export const Extension = () => (
  <Stack>
    <Text>First item</Text>
    <Text>Second item</Text>
    <Text>Third item</Text>
  </Stack>
);
```

### Spacing between items

Use the `gap` prop to add consistent spacing between children.

```js theme={null}
import { Stack, Button } from '@hubspot/ui-extensions';

export const Extension = () => (
  <Stack gap="medium">
    <Button>Save</Button>
    <Button variant="secondary">Cancel</Button>
  </Stack>
);
```

### Alignment

Use `align` to control how children are positioned horizontally within the stack.

```js theme={null}
import { Stack, Button } from '@hubspot/ui-extensions';

export const Extension = () => (
  <Stack gap="small" align="center">
    <Button>Primary action</Button>
    <Button variant="secondary">Secondary action</Button>
  </Stack>
);
```

### Nesting stacks

`Stack` components can be nested to create complex vertical layouts with different gap sizes at different levels.

```js theme={null}
import { Stack, Text, Divider } from '@hubspot/ui-extensions';

export const Extension = () => (
  <Stack gap="large">
    <Stack gap="extra-small">
      <Text format={{ fontWeight: 'bold' }}>Section one</Text>
      <Text>First item</Text>
      <Text>Second item</Text>
    </Stack>
    <Divider />
    <Stack gap="extra-small">
      <Text format={{ fontWeight: 'bold' }}>Section two</Text>
      <Text>Third item</Text>
      <Text>Fourth item</Text>
    </Stack>
  </Stack>
);
```

## Related components

* [Flex](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/flex.md)
* [Inline](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/inline.md)
* [Box](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/box.md)
* [Divider](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/divider.md)