Divider

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

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

Usage

<Divider />

<Divider />

Divider direction

Divider comes with two directions: horizontal and vertical.

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

export const App = props => {
  return (
    <div className="flex flex-col space-y-2">
      <div className="w-80">
        <Divider orientation="horizontal" />
      </div>
      <div className="flex h-80 items-center justify-center">
        <Divider orientation="vertical" />
      </div>
    </div>
  );
};

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

export const App = props => {
  return (
    <div className="flex flex-col space-y-2">
      <div className="w-80">
        <Divider orientation="horizontal" />
      </div>
      <div className="flex h-80 items-center justify-center">
        <Divider orientation="vertical" />
      </div>
    </div>
  );
};

Divider label

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

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

export const App = props => {
  return (
    <div className="flex flex-col space-y-2">
      <Divider />
      <Divider label={<Button variant="outline">Continue</Button>} />
    </div>
  );
};

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

export const App = props => {
  return (
    <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 26, 2022

Divider

Imports#

Usage#

Divider direction#

Divider label#

API Reference#

Imports

Usage

Divider direction

Divider label

API Reference