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

The Divider component creates clear visual separation between elements in the interface. Use Divider to separate distinct content groups in forms, settings panels, lists, or page sections, helping customers scan and understand content organization.

Divider supports both horizontal and vertical orientations, along with different visual sizes for varying levels of emphasis. For more structured content grouping with headings, use a Card instead.

Support
Targets (25)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the Divider component.

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 Separate content sectionsSeparate content sections

Place a divider between content blocks to create a clear visual break. This example shows a horizontal divider at its default size.

Separate content sections

A horizontal divider creating visual separation between content sections.

Separate content sections

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

export default reactExtension(
'customer-account.page.render',
() => <Extension />,
);

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

export default extension('customer-account.page.render', (root) => {
const divider = root.createComponent(Divider);

root.appendChild(divider);
});

Anchor to Best practicesBest practices

  • Use sparingly: Too many dividers can make a page feel cluttered. Rely on spacing and grouping first, and add dividers only where boundaries aren't clear from layout alone.
  • Match direction to layout: Use horizontal dividers in vertical layouts and vertical dividers in horizontal layouts for natural visual flow.
  • Prefer structured grouping for labeled sections: If content groups have headings, use a Card for better semantic meaning.

Anchor to LimitationsLimitations

  • Dividers are purely decorative. They don't carry semantic meaning and aren't announced by assistive technologies.
  • Custom colors and thicknesses beyond the predefined sizes aren't supported.
  • Vertical dividers require a parent with a defined height to render visibly.
Was this page helpful?