---
title: Separator
description: Separators create visual separation between sections of an interface.
api_name: checkout-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/separator
  md: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/separator.md
---

# Separator

Separators create visual separation between sections of an interface.

***

### Example

![separator](https://shopify.dev/assets/assets/images/api/checkout-extensions/post-purchase/components/separator-BmqASeFc.png)

##### JS

```ts
import {extend, Separator} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {
  const separator = root.createComponent(Separator);

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

##### React

```tsx
import {render, Separator} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {
  return <Separator />;
}
```

***

## Props

optional = ?

| Name | Type | Description |
| - | - | - |
| width? | `"thin" \| "medium" \| "thick" \| "xthick"` | |
| direction? | `"horizontal" \| "vertical"` | |

***