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

Anchor to alignment
alignment
Default: 'center'

The alignment of the divider's content within its container.

Anchor to direction
direction
Default: 'inline'

The orientation of the divider, using logical properties.

  • inline: A horizontal divider that separates content stacked vertically.
  • block: A vertical divider that separates content arranged horizontally.
Anchor to id
id
string

A unique identifier for the component. Use this to target the component in scripts or stylesheets, or to distinguish it from other instances of the same component.

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

The thickness of the divider line.

  • small: A thin, subtle line.
  • base: The standard divider thickness.
  • large: A thicker line for stronger visual separation.
  • extraLarge: The thickest available line.

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?