# Divider

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

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

render('Checkout::Dynamic::Render', () => <Extension />);

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

```

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

extend('Checkout::Dynamic::Render', (root) => {
  const divider = root.createComponent(Divider);

  root.appendChild(divider);
});

```

## DividerProps

### DividerProps

### size

value: `Extract<Size, 'small' | 'base' | 'large' | 'extraLarge'>`

Use to create dividers with varying widths.

### direction

value: `Direction`

Use to specify direction of divider.

### alignment

value: `Alignment`

Use to specify alignment of contents of divider.

### id

value: `string`

A unique identifier for the component.