Divider

Import#

import { Divider } from "@nature-ui/core";

Usage#

The Divider displays a thin horizontal or vertical line, and renders a hr tag.

<Divider />

Divider Orientation#

Pass the orientation prop and set it to either horizontal or vertical.

<Divider orientation="horizontal" />

If the vertical orientation is used, make sure that the parent element is assigned a height.

<Box
  css={{
    height: "50px",
  }}
>
  <Divider orientation="vertical" />
</Box>

Composition#

<Stack row className="h-32 p-4">
  <Divider orientation="vertical" />
  <p>Nature UI</p>
</Stack>

Props#