Skip to main content

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.

The Box component renders an empty div container for fine tuning the spacing of components. Commonly used with the Flex component.
ui-extensions-layout-box
import { Flex, Box, Tile } from "@hubspot/ui-extensions";

const Extension = () => {
  return (
    <Flex direction={"row"} justify={"start"} gap={"small"}>
      <Box flex={1}>
        <Tile>flex = 1</Tile>
      </Box>
      <Box flex={2}>
        <Tile>flex = 2</Tile>
      </Box>
      <Box flex={3}>
        <Tile>flex = 3</Tile>
      </Box>
      <Box flex={4}>
        <Tile>flex = 4</Tile>
      </Box>
    </Flex>
  );
};

​
Props

PropTypeDescription
alignSelf'start' | 'center' | 'end' | 'baseline' | 'stretch' | ‘auto’Distributes a child component along the cross-axis using the available free space. Use this prop for nested Box components to align them differently from other child components in the Flex group.
flex'initial' | 'auto' (default) | 'none' | NumberDistributes components based on the available empty space around them. Options are as follows:
  • initial (default): the item is sized according to its height and width. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container.
  • auto: the item is sized according to its height and width, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container.
  • none: the item is sized according to its height and width. It is fully inflexible: it neither shrinks nor grows in relation to the flex container.
  • Number: tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the flex given, the higher the ratio of space a component will take compared to its siblings.
You only need to use Box as a wrapper for components that you want to adjust. For example, if you wrap one component in a Box with a flex value, only that one component will have its width adjusted based on the available empty space.
ui-extension-components-box-flex
<Flex direction={"row"} justify={"start"} gap={"small"}>
  <Box flex={1}>
    <Tile>Tile 1</Tile>
  </Box>
  <Tile>Tile 2</Tile>
  <Tile>Tile 3</Tile>
</Flex>;

​
Usage examples

​
Using numbers in flex

Use the flex prop in a Box component to assign any extra spacing to components using either a default value (e.g. auto) or a specific number. When using a number, the components will be distributed based on the ratio of their assigned numbers. This also means that, when assigning a flex value for only one Box, you can use any number, because any number by itself will result in all available space being assigned to that Box. For example, the four tiles below take up an increasing amount of space based on their flex values.
ui-extensions-layout-box
<Flex direction={"row"} justify={"start"} gap={"small"}>
  <Box flex={1}>
    <Tile>flex = 1</Tile>
  </Box>
  <Box flex={2}>
    <Tile>flex = 2</Tile>
  </Box>
  <Box flex={3}>
    <Tile>flex = 3</Tile>
  </Box>
  <Box flex={4}>
    <Tile>flex = 4</Tile>
  </Box>
</Flex>;

​
Using alignSelf

Use the alignSelf prop to override alignment rules for individual Box components.
ui-extensions-layout-box-alignself
<Flex direction={"column"} gap={"small"} align={"start"}>
  <Box alignSelf={"end"}>
    <Tile>Top right</Tile>
  </Box>
  <Box alignSelf={"center"}>
    <Tile>Middle</Tile>
  </Box>
  <Tile>Bottom left</Tile>
</Flex>;
Last modified on March 31, 2026