Divider Component Usage

ℹ️

This component is used to display a divider with a border and optional text.

Example Preview

Divider Example

Example Usage

ℹ️

This example shows how to use the component.

import { Divider } from "@/@core";
 
export default function MyComponent() {
  return (
    <>
      <h1>My Heading</h1>
      <Divider />
      <Divider text="Or" variant="horizontal" />
      <p>My Paragraph</p>
    </>
  );
}

Props

ℹ️

This table shows the props that can be passed into the component.

Name	Type	Default	Description
text	string	`null`	The text to display in the divider.
className	string	`null`	The class name to apply to the divider.
variant	string	`vertical`	The variant of the divider. `vertical`, `horizontal`

Variants Prop Values

ℹ️

This table shows the values that can be passed into the variant prop.

Value	Description
`vertical`	The divider will be displayed vertically with a border on the left and right
`horizontal`	The divider will be displayed horizontally with a border on the top and bottom

Diff Drawer