---
meta:
title: Divider
description: Dividers are used to visually separate or group elements.
layout: component
---
```html:preview
```
```jsx:react
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
const App = () => ;
```
## Examples
### Width
Use the `--width` custom property to change the width of the divider.
```html:preview
```
{% raw %}
```jsx:react
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
const App = () => ;
```
{% endraw %}
### Color
Use the `--color` custom property to change the color of the divider.
```html:preview
```
{% raw %}
```jsx:react
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
const App = () => ;
```
{% endraw %}
### Spacing
Use the `--spacing` custom property to change the amount of space between the divider and it's neighboring elements.
```html:preview
Above
Below
```
{% raw %}
```jsx:react
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
const App = () => (
<>
Above
Below
>
);
```
{% endraw %}
### Vertical
Add the `vertical` attribute to draw the divider in a vertical orientation. The divider will span the full height of its container. Vertical dividers work especially well inside of a flex container.
```html:preview
First
Middle
Last
```
{% raw %}
```jsx:react
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
const App = () => (
First
Middle
Last
);
```
{% endraw %}
### Menu Dividers
Use dividers in [menus](/components/menu) to visually group menu items.
```html:preview
Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
```
{% raw %}
```jsx:react
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
const App = () => (
Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
);
```
{% endraw %}