Skip to main content
Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

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?