Skip to main content
Upgrade to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use Polaris web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the upgrade guide to upgrade your extension and avoid being blocked from updating your extension after October 1st 2026.

Divider

A divider separates content and represents a thematic break between elements.

Support
Targets (50)

Supported targets

Anchor to DividerPropsDividerProps

A divider separates content and represents a thematic break between elements.

Anchor to alignment
alignment
Default: 'center'

Use to specify alignment of contents of divider.

Anchor to direction
direction
Default: 'inline'

Use to specify direction of divider.

Anchor to id
id
string

A unique identifier for the component.

Anchor to size
size
'small' | 'large' | 'base' | 'extraLarge'
Default: 'small'

Use to create dividers with varying widths.

Anchor to ExamplesExamples

Anchor to Basic DividerBasic Divider

Basic Divider

Example

Basic Divider

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

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

function Extension() {
return <Divider />;
}
import {extension, Divider} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
const divider = root.createComponent(Divider);

root.appendChild(divider);
});
Was this page helpful?