---
title: Divider
description: >-
  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.
api_version: 2025-07
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/divider
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/divider.md
---

Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) 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](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/card) instead.

### Support Targets (25)

### Supported targets

* Customer​Account::Kitchen​Sink
* [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/footer#footer-render-after-)
* [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-targets)
* [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-block-)
* [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-announcement-)
* [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-block-)
* [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-item-render-after-)
* [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-list-render-after-)
* [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#customer-information-render-after-)
* [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#payments-and-returns-targets)
* [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#return-details-render-after-)
* [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-menu-item-)
* [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-)
* [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#order-specific-full-page-)
* [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#customer-account-full-page-)
* [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#announcement-)
* [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-block-)
* [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#profile-page-b2b-targets-)
* [customer-account.​profile.​company-location-addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-addresses-render-after-)
* [customer-account.​profile.​company-location-payment.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-payment-render-after-)
* [customer-account.​profile.​company-location-staff.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-staff-render-after-)
* customer-account.​profile.​payment.​render-after

#### Use cases

* **Order totals**: Separate line items from the total in an order summary for clear visual distinction.
* **Settings sections**: Divide groups of related settings in an account preferences page.
* **List separation**: Add visual breaks between items in a list of addresses, payment methods, or subscriptions.
* **Inline metadata**: Use vertical dividers between inline elements like order numbers and dates.

***

## Properties

Configure the following properties on the Divider component.

* **alignment**

  **Alignment**

  **Default: 'center'**

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

* **direction**

  **Direction**

  **Default: 'inline'**

  The orientation of the divider, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).

  * `inline`: A horizontal divider that separates content stacked vertically.
  * `block`: A vertical divider that separates content arranged horizontally.

* **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.

* **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.

### Alignment

Controls how content is aligned along the cross axis. - \`'start'\`: Aligns content to the start of the container. - \`'center'\`: Centers content within the container. - \`'end'\`: Aligns content to the end of the container.

```ts
'start' | 'center' | 'end'
```

### Direction

The axis along which content is arranged, using \[logical properties]\(https://developer.mozilla.org/en-US/docs/Web/CSS/CSS\_logical\_properties\_and\_values). - \`inline\`: The horizontal axis (in horizontal writing modes). - \`block\`: The vertical axis (in horizontal writing modes).

```ts
'inline' | 'block'
```

***

## Examples

### Separate 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.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/divider-default-KZtr6bAn.png)

## Separate content sections

##### React

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

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

function Extension() {
  return <Divider />;
}
```

##### JS

```js
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);
});
```

***

## Best 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](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/card) for better semantic meaning.

***

## Limitations

* 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.

***