---
title: Migrate to the Polaris divider component
description: >-
  Learn how to migrate the Divider component to Polaris web components in
  checkout and customer account UI extensions.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/divider
  md: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/divider.md
---

# Migrate to the Polaris divider component

The Polaris divider component renders a visual separator between content sections. It replaces the previous [`Divider`](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/ui-components/layout-and-structure/divider) component and is available as [`<s-divider>`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/divider) in API versions 2025-10 and newer.

***

## Removed properties

The following properties aren't supported:

* `size` — no longer supported. The divider now has a consistent visual weight.
* `alignment` — no longer supported.

## Migrating Divider

##### 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>
      <s-text>Section one</s-text>
      <s-divider />
      <s-text>Section two</s-text>
    </s-stack>
  );
}
```

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

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

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

function Extension() {
  return (
    <BlockStack>
      <Text>Section one</Text>
      <Divider size="base" />
      <Text>Section two</Text>
    </BlockStack>
  );
}
```

***