Divider - Keep React

The Divider component serves as a visual separator, helping to organize content and improve readability in user interfaces. It allows you to add horizontal lines or dividers between different sections of a page or within a component. With customizable options for color, size, and alignment, the Divider component enhances the overall design and structure of your application.

Table of Contents#

Default Divider#

Displays a default divider with the secondary color.

I am alone, and feel the charm of existence in this spot.


I should be incapable of drawing a single stroke at the present moment.


A wonderful serenity has taken possession of my entire soul.

Divider color variant#

You can customize the color of the divider using the color prop. Available options are 'primary', 'secondary', 'success', 'warning', and 'error'.






Divider size variant#

Adjust the size of the divider with the size prop. Options include 'sm', 'md', 'lg', 'xl', and '2xl'.






Divider align variant#

Control the alignment of the divider with the variant prop. Choose from 'start', 'end', or 'center'.

Left Align
Center Align
Right Align

API Reference#

Here is a list of the props that you can pass to the Divider component:

PropertyDescriptionTypeDefault
colorAvailable color options for the divider.
primary
secondary
success
warning
error
secondary
sizeAvailable sizes options for the divider.
sm
md
lg
xl
2xl
md
variantAvailable variants for the divider alignment.
start
end
center
center
childrenContent to be placed within the divider, if any.ReactNodeNone