---
title: Migrate BlockSpacer
description: >-
  Learn about the removal of the BlockSpacer component in checkout and customer
  account UI extensions.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/block-spacer
  md: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/block-spacer.md
---

# Migrate BlockSpacer

The previous [`BlockSpacer`](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/ui-components/layout-and-structure/blockspacer) component has been removed. There's no direct replacement. Use [`<s-stack>`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack) with the [`gap`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack#properties-propertydetail-gap) prop to create spacing between sibling elements.

## Migrating BlockSpacer to stack

##### Latest (Preact)

```tsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-stack gap="large-200">
      <s-text>First item</s-text>
      <s-text>Second item</s-text>
    </s-stack>
  );
}
```

##### Pre-Polaris (2025-07)

```tsx
import {
  reactExtension,
  BlockSpacer,
  Text,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <>
      <Text>First item</Text>
      <BlockSpacer spacing="loose" />
      <Text>Second item</Text>
    </>
  );
}
```

**Responsive values:**

If you used `Style.default().when()` to make this property responsive, container queries replace the `Style` helper. Wrap your content in `<s-query-container>` and use `@container` syntax in the property value. Learn more in [Migrate StyleHelper to container queries](https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/style-helper).

***

## Spacing values

The previous `BlockSpacer` `spacing` values map to the Polaris stack `gap` token scale:

| Previous | New |
| - | - |
| `'none'` | `'none'` |
| `'extraTight'` | `'small-400'` |
| `'tight'` | `'small-200'` |
| `'base'` | `'base'` |
| `'loose'` | `'large-200'` |
| `'extraLoose'` | `'large-500'` |

The new token scale also adds `'small-500'`, `'small-300'`, `'small-100'`, `'small'`, `'large'`, `'large-100'`, `'large-300'`, and `'large-400'`.

For more on the scale system, see [Scale](https://shopify.dev/docs/api/checkout-ui-extensions/latest/using-polaris-components#scale).

***