Stack | UI components - HubSpot docs

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 or Inline instead. Stack is one of several layout tools available in UI extensions, alongside Flex, Inline, Box, and AutoGrid.

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.

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.

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.

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.

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.

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>
);

Build apps

Add features

Publish to the HubSpot Marketplace

Skeleton group 5

Stack | UI components

Props

Usage examples

Basic vertical stack

Spacing between items

Alignment

Nesting stacks

​Props

​Usage examples

​Basic vertical stack

​Spacing between items

​Alignment

​Nesting stacks

​Related components

Props

Usage examples

Basic vertical stack

Spacing between items

Alignment

Nesting stacks

Related components