Skip to main content


The Divider component in Pearl UI is a versatile tool used to create a visual separation between different sections of content in a list or group. It can be customized in terms of orientation, color, size, and more.


import { Divider } from "pearl-ui";


// Basic usage of Divider<Divider />
// Customizing Divider with orientation and color<Divider orientation="horizontal" bgColor="red" />
// Using Divider in a list<View>  <Text>Item 1</Text>  <Divider orientation="horizontal" />  <Text>Item 2</Text>  <Divider orientation="horizontal" />  <Text>Item 3</Text></View>

Changing Divider Orientation#

The Divider's orientation can be changed using the orientation prop. This allows you to set the direction of the divider as either horizontal or vertical.

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

Overriding Default Styles#

The Divider component supports a variety of style props which can be used to override the pre-defined styles in the theme. Any manual style props passed into the component will take precedence over the default component configuration.

// Example: Overriding the default background color<Divider bgColor="red" />


Component Properties#

Supported Style Properties#

The Divider component supports the following style props:

Animation Properties#

The Divider component inherits animation properties from the Box component, which are managed by the Moti library. This allows for the creation of dynamic and interactive UI elements. The useMotiWithStyleProps hook from the Moti library is utilized to manage these animation properties.

fromobjectDefines the starting state of the animation.
toobjectDefines the ending state of the animation.
transitionobjectSpecifies the type of transition that the animation will use.
exitTransitionobjectDetermines the transition type that will be used when the component is unmounted. By default, exit uses transition to configure its animations, so this prop is not required. However, if you pass exitTransition, it will override transition for exit animations.
stateobjectManages the overall state of the animation, including the from and to states.
delaynumberManage the delay for the animate field. (Use the transition prop for more granular control)
onDidAnimate() => voidCallback function called after finishing an animation.
stylePriority"state" | "animate""animate"This is not a prop you will likely find yourself using. If set to "animate", then styles passed from the animate prop will take precedent. Otherwise, if set to "state", then the state prop will take precedent for matching styles.
animateInitialStatebooleanfalseIf true, the from prop will be set to animate. This will be noticeable for some spring animations, and might make them jumpy on mount.

Additional Properties#

The Divider component also accepts the following 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