# Divider

Use this to create a clear visual separation between different elements in your user interface.

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

render('Playground', () => <App />);

function App() {
  return (
    <BlockStack gap>
      <>First text</>
      <Divider />
      <>Second Text</>
    </BlockStack>
  );
}

```

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

  export default extension(
    'Playground',
    (root) => {
      const divier = root.createComponent(Divider);
      const firstText = root.createText('First Text');
      const secondText = root.createText('Second Text');

      root.appendChild(firstText);
      root.appendChild(divier);
      root.appendChild(secondText);
    },
  );

```

## DividerProps

### DividerProps

### direction

value: `'inline' | 'block'`

Specify the direction of the divider.