Divider

Dividers are horizontal lines used to separate semantic blocks of content or UI patterns.

On this page

Usage

Dividers are used to define a thematic break in a page.

Preview
HTML
React

<hr class="drac-divider" />

<Divider />;

Colors

Dividers can be customized to use any of the Dracula UI theme colors.

Preview
HTML
React

<div class="drac-box">
  <div class="drac-box drac-mb-sm">
    <hr class="drac-divider drac-border-cyan" />
  </div>
  <div class="drac-box drac-mb-sm">
    <hr class="drac-divider drac-border-green" />
  </div>
  <div class="drac-box drac-mb-sm">
    <hr class="drac-divider drac-border-orange" />
  </div>
  <div class="drac-box drac-mb-sm">
    <hr class="drac-divider drac-border-pink" />
  </div>
  <div class="drac-box drac-mb-sm">
    <hr class="drac-divider drac-border-purple" />
  </div>
  <div class="drac-box drac-mb-sm">
    <hr class="drac-divider drac-border-red" />
  </div>
  <div class="drac-box drac-mb-sm">
    <hr class="drac-divider drac-border-yellow" />
  </div>
</div>

<Box>
  <Box mb="sm">
    <Divider color="cyan" />
  </Box>
  <Box mb="sm">
    <Divider color="green" />
  </Box>
  <Box mb="sm">
    <Divider color="orange" />
  </Box>
  <Box mb="sm">
    <Divider color="pink" />
  </Box>
  <Box mb="sm">
    <Divider color="purple" />
  </Box>
  <Box mb="sm">
    <Divider color="red" />
  </Box>
  <Box mb="sm">
    <Divider color="yellow" />
  </Box>
</Box>;

Properties

color

The Dracula UI color for the Divider.