Skip to main content

Divider

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

'inline' | 'block'
Default: 'inline'

Specify the direction of the divider.

Was this section helpful?

Simple Divider example

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

Preview