Divider

A Divider component is a simple UI element used to separate content within a layout, creating visual distinction between sections. It helps enhance the organization and readability of the interface by providing clear boundaries between different elements, such as text blocks, images, or other components. Dividers can be styled in various ways (solid, dashed, or dotted) and can vary in thickness and color to match the overall design of the application.

Demo

Rendered live, with the same build of the library you install.

Horizontal:

Horizontal with Text:

Vertical:

Usage

Source

Divider.tsx

import { NDivider } from '@nayan-ui/react';

const Divider = () => {
  return (
    <div>
      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Horizontal:</h3>
      <NDivider orientation="horizontal" className="my-3" />

      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Horizontal with Text:</h3>
      <NDivider orientation="horizontal" className="h-5">
        OR
      </NDivider>

      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Vertical:</h3>
      <NDivider orientation="vertical" className="h-5" />
    </div>
  );
};

export default Divider;

Attributes

5 props

Name	Type	Default	Details
className	string	' '	You can customise by passing tailwind classes.
orientation	'horizontal' \| 'vertical'	'horizontal'	Direction of the divider.
children	React.ReactNode	Optional	Content to display in the divider.
childrenClassName	string	' '	Custom class for the children wrapper.
separatorClassName	string	' '	Custom class for the separator line.