Divider

Divider is a static structure that provides a visible boundary for elements. It uses reakit's Separator component internally.

import { Divider } from "@renderlesskit/react-tailwind";

Usage

Divider direction

Divider comes with two directions: horizontal and vertical.

<div className="flex flex-col space-y-2">
  <div className="w-80">
    <Divider orientation="horizontal" />
  </div>
  <div className="flex items-center justify-center h-80">
    <Divider orientation="vertical" />
  </div>
</div>

<div className="flex flex-col space-y-2">
  <div className="w-80">
    <Divider orientation="horizontal" />
  </div>
  <div className="flex items-center justify-center h-80">
    <Divider orientation="vertical" />
  </div>
</div>

Divider label

Divider can have a label at the center to mark it as a section.

<div className="flex flex-col space-y-2">
 <Divider />
 <Divider label={<Button variant="outline">Continue</Button>} />
</div>

<div className="flex flex-col space-y-2">
 <Divider />
 <Divider label={<Button variant="outline">Continue</Button>} />
</div>

API Reference

Prop	Type	Default
`orientation`	`string`	`horizontal`
`label`	`React.ReactNode`	-

Last updated on July 18, 2022

Divider

Imports#

Usage#

Divider direction#

Divider label#

API Reference#

Imports

Usage

Divider direction

Divider label

API Reference