Skip to main content


Divider is used to visually separate content in a list or group.


import { Divider } from "pearl-ui";


<Divider />

Divider orientation#

Use the orientation prop to change the direction of the divider.

<Divider orientation="horizontal" />
<Divider orientation="vertical" />

Override Style#

The Divider component also supports a variety of style props which can be used to override the pre-defined style in the theme. Manual style props passed into the component have a higher precedance than the default component config.

// passing style prop bg="red" overrides the default component config value of bg="neutral.300"<Divider bg="red" />



Supported style props#

The Divider component supports the following style props:

Additional props#

sizefalsePearlTheme.components.Divider["sizes"]The size of the divider
variantfalsePearlTheme.components.Divider["variants"]The variant of the divider
thicknessfalsenumber1The thickness of the divider
lengthfalsenumber | string"100%"The length of the divider
orientationfalse"horizontal" | "vertical""horizontal"The direction of the divider

Default Component Config#

export default {  baseStyle: {    orientation: "horizontal",    bg: {      light: "neutral.300",      dark: "neutral.900",    },    thickness: 1,    length: "100%",  },};