---
title: Divider
description: A divider separates content and represents a thematic break between elements.
api_version: 2025-07
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/structure/divider
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/structure/divider.md
---

# Divider

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

## DividerProps

* alignment

  Alignment

  Default: 'center'

  Use to specify alignment of contents of divider.

* direction

  Direction

  Default: 'inline'

  Use to specify direction of divider.

* id

  string

  A unique identifier for the component.

* size

  Extract\<Size, 'small' | 'base' | 'large' | 'extraLarge'>

  Default: 'small'

  Use to create dividers with varying widths.

### Alignment

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

### Direction

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

### Size

```ts
'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'
```

### Examples

* #### Basic Divider

  ##### React

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

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

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

  ##### JS

  ```js
  import {extension, Divider} from '@shopify/ui-extensions/checkout';

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

    root.appendChild(divider);
  });
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/divider-default.png)