Divider

A RhDivider is used to group content in lists and layouts, which is commonly known as a divider.

Usage

Once installed, you can import the RhDivider component into your React application:

copy

import {RhDivider} from "@rhythm-ui/react"

Then, you can use the RhDivider component in your JSX code:

copy

<RhDivider />

Divider Props

Name	Type	Default	Description
componentCenter	React.ReactNode		Component to show at the center of divider
componentStart	React.ReactNode		Component to show at the start of the divider
componentEnd	React.ReactNode		Component to show at end of the divider
isVertical	boolean	false	Show vertical divider
width	"sm" \| "lg" \| "md"		Set weight of the divider

Start

The componentStart prop is a property that can be used with certain UI components, such as a Divider or RhDivider, to define the starting point of the line.

copy

<RhDivider
  componentStart={
    <RhIcon icon="heroicons:plus-circle" className="text-gray-400 text-xl" />
  }
/>

Middle

The componentCenter prop is a property that can be used with certain UI components, such as a Divider, to horizontally or vertically center the component between two other components.

copy

<RhDivider
  componentCenter={
    <RhIcon icon="heroicons:plus-circle" className="text-gray-400 text-xl" />
  }
/>

End

The componentEnd prop is a property that can be used with certain UI components, such as a Divider, to define the ending point of the line.

copy

<RhDivider
  componentEnd={
    <RhIcon icon="heroicons:plus-circle" className="text-gray-400 text-xl" />
  }
/>

Width Variant

The width props determines the thickness of the divider.

copy

<div className="flex flex-col gap-10">
  <div className="ml-4">
    <h4>Small</h4>
    <RhDivider width="sm" />
  </div>
  <div className="ml-4">
    <h4>Medium</h4>
    <RhDivider width="md" />
  </div>
  <div className="ml-4">
    <h4>Large</h4>
    <RhDivider width="lg" />
  </div>
</div>

Vertical Alignment

The vertical props determine whether the divider should be oriented vertically or horizontally.

copy

<div className="flex items-center h-16 gap-12">
  <div className="p-8">Left</div>
  <RhDivider isVertical width="md" />
  <div className="p-8">Right</div>
</div>