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

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

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

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

```

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

```


## DividerProps

### DividerProps

### size
Use to create dividers with varying widths.
### direction
Use to specify direction of divider.
### alignment
Use to specify alignment of contents of divider.
### id
A unique identifier for the component.
### Size

'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'
### Direction

'inline' | 'block'
### Alignment

'start' | 'center' | 'end'