Migrate to the Polaris divider component
The Polaris divider component renders a visual separator between content sections. It replaces the previous Divider component and is available as <s-divider> in API versions 2025-10 and newer.
Anchor to Removed propertiesRemoved 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
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>
);
}
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>
);
}
Latest (Preact)
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)
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>
);
}Was this page helpful?