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

Horizontal:

Horizontal with Text:

Vertical:

Usage

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

const Divider = () => {
  return (
    <div>
      <h1 className="text-foreground mb-3 text-lg">Horizontal:</h1>
      <NDivider orientation="horizontal" className="my-3" />
      <h1 className="text-foreground mb-3 text-lg">Horizontal with Text:</h1>
      <NDivider orientation="horizontal" className="h-5">OR</NDivider>
      <h1 className="text-foreground mb-3 text-lg">Vertical:</h1>
      <NDivider orientation="vertical" className="h-5" />
    </div>
  );
};

export default Divider;

Attributes

Name	Type	Default	Details
children	React.ReactNode	Optional	Content to display in the divider.
childrenClassName	string	' '	You can customise children by passing tailwind classes.
separatorClassName	string	' '	You can customise separator by passing tailwind classes.