Divider

The Divider component is a versatile UI element used to create visual separation between content sections, groups, or list items. It helps improve readability and provides a clean, structured layout in user interfaces.

Import

import { VKDivider } from "@vivakits/react-components";

Direction

The Divider component supports both horizontal and vertical orientations using the direction prop.

Color

The Divider component comes with 7 different colors that you can change using the color prop.

Variant

The Divider supports different line styles through the variant prop.

Thickness

The Divider thickness can be customized using the thickness prop.

Position

The content position can be adjusted using the position prop.

Inset

The Divider can be inset from its container using the inset prop.

Content Color

The color of the content text can be customized independently using the contentColor prop.

API Reference