---
title: Spacing
description: Set of spacing constants to be used in the UI Extensions components library.
api_version: 2024-04
api_name: pos-ui-extensions
source_url:
  html: 'https://shopify.dev/docs/api/pos-ui-extensions/2024-04/components/spacing'
  md: 'https://shopify.dev/docs/api/pos-ui-extensions/2024-04/components/spacing.md'
---

# Spacingcomponent

Set of spacing constants to be used in the UI Extensions components library.

## VerticalSpacing

`'HalfPoint' | 'ExtraSmall' | 'Small' | 'Medium' | 'Large' | 'ExtraLarge'`

## HorizontalSpacing

`'HalfPoint' | 'ExtraSmall' | 'Small' | 'Medium' | 'Large' | 'ExtraLarge' | 'ExtraExtraLarge'`

### Examples

* #### Spacing

  ##### React

  ```tsx
  VerticalSpacing.ExtraSmall;
  HorizontalSpacing.ExtraSmall;
  ```

  ##### TS

  ```ts
  VerticalSpacing.ExtraSmall;
  HorizontalSpacing.ExtraSmall;
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/spacing-default.png)