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.

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:

Property	Description	Type	Default
color	Available color options for the divider.	primary secondary success warning error	secondary
size	Available sizes options for the divider.	sm md lg xl 2xl	md
variant	Available variants for the divider alignment.	start end center	center
className	Additional CSS classes to customize the divider appearance.	string	None
children	Content to be placed within the divider, if any.	ReactNode	None