Box

Box is the most primitive component of Dracula UI. Using Box allows for consumers of the components library to compose more complex patterns, components, and UIs. Box includes built-in Color and Spacing properties that make building complex components convenient and consistent.

Usage

A Box is analogous to an HTML div and can contain any other component. Use Box when you want to compose layouts, or multiple components.

Dracula 
<div class="drac-box">
  <span class="drac-text drac-line-height drac-text-white">Dracula</span>
</div>
<Box>
  <Text>Dracula</Text>
</Box>;

Colors

Boxes can be customized to use any of the Dracula UI theme colors, including all solid, gradient, and animated colors.

Pink Purple 
<div class="drac-box drac-bg-pink-purple">
  <span class="drac-text drac-line-height drac-text-black">Pink Purple</span>
</div>
<Box color="pinkPurple">
  <Text color="black">Pink Purple</Text>
</Box>;

Display

Control the display type of an element.

1
2
3 
<div class="drac-box">
  <div
    class="drac-box drac-bg-purple-cyan drac-d-inline-block drac-rounded-lg drac-p-xs drac-mr-xs"
  >
    <span class="drac-text drac-line-height drac-text-black">1</span>
  </div>
  <div
    class="drac-box drac-bg-purple-cyan drac-d-inline-block drac-rounded-lg drac-p-xs drac-mr-xs"
  >
    <span class="drac-text drac-line-height drac-text-black">2</span>
  </div>
  <div
    class="drac-box drac-bg-purple-cyan drac-d-inline-block drac-rounded-lg drac-p-xs drac-mr-xs"
  >
    <span class="drac-text drac-line-height drac-text-black">3</span>
  </div>
</div>
<Box>
  <Box color="purpleCyan" display="inline-block" rounded="lg" p="xs" mr="xs">
    <Text color="black">1</Text>
  </Box>
  <Box color="purpleCyan" display="inline-block" rounded="lg" p="xs" mr="xs">
    <Text color="black">2</Text>
  </Box>
  <Box color="purpleCyan" display="inline-block" rounded="lg" p="xs" mr="xs">
    <Text color="black">3</Text>
  </Box>
</Box>;

Rounded

Choose from one of the predefined `rounded` options for a Box.

Large round border
small round border 
<div class="drac-box">
  <div class="drac-box drac-bg-purple-cyan drac-rounded-lg drac-p-md">
    <span class="drac-text drac-line-height drac-text-black"
      >Large round border</span
    >
  </div>
  <div class="drac-box drac-bg-yellow-pink drac-rounded-sm drac-p-md">
    <span class="drac-text drac-line-height drac-text-black"
      >small round border</span
    >
  </div>
</div>
<Box>
  <Box rounded="lg" color="purpleCyan" p="md">
    <Text color="black">Large round border</Text>
  </Box>
  <Box rounded="sm" color="yellowPink" p="md">
    <Text color="black">small round border</Text>
  </Box>
</Box>;

Height

Set an element with a fixed height, including `auto` and `full`.

xxs
xs
sm
md 
<div style="display: flex; align-items: flex-end" class="drac-box">
  <div
    class="drac-box drac-h-xxs drac-bg-cyan-green drac-rounded-lg drac-p-xs drac-mr-xs"
  >
    <span class="drac-text drac-line-height drac-text-black">xxs</span>
  </div>
  <div
    class="drac-box drac-h-xs drac-bg-cyan-green drac-rounded-lg drac-p-xs drac-mr-xs"
  >
    <span class="drac-text drac-line-height drac-text-black">xs</span>
  </div>
  <div
    class="drac-box drac-h-sm drac-bg-cyan-green drac-rounded-lg drac-p-xs drac-mr-xs"
  >
    <span class="drac-text drac-line-height drac-text-black">sm</span>
  </div>
  <div
    class="drac-box drac-h-md drac-bg-cyan-green drac-rounded-lg drac-p-xs drac-mr-xs"
  >
    <span class="drac-text drac-line-height drac-text-black">md</span>
  </div>
</div>
<Box style={{ display: "flex", alignItems: "flex-end" }}>
  <Box color="cyanGreen" height="xxs" rounded="lg" p="xs" mr="xs">
    <Text color="black">xxs</Text>
  </Box>
  <Box color="cyanGreen" height="xs" rounded="lg" p="xs" mr="xs">
    <Text color="black">xs</Text>
  </Box>
  <Box color="cyanGreen" height="sm" rounded="lg" p="xs" mr="xs">
    <Text color="black">sm</Text>
  </Box>
  <Box color="cyanGreen" height="md" rounded="lg" p="xs" mr="xs">
    <Text color="black">md</Text>
  </Box>
</Box>;

Width

Set an element with a fixed width, including `auto` and `full`.

xs
md
xl
full 
<div class="drac-box">
  <div
    class="drac-box drac-w-xs drac-bg-yellow-pink drac-rounded-lg drac-p-xs drac-mb-xs"
  >
    <span class="drac-text drac-line-height drac-text-black">xs</span>
  </div>
  <div
    class="drac-box drac-w-md drac-bg-yellow-pink drac-rounded-lg drac-p-xs drac-mb-xs"
  >
    <span class="drac-text drac-line-height drac-text-black">md</span>
  </div>
  <div
    class="drac-box drac-w-xl drac-bg-yellow-pink drac-rounded-lg drac-p-xs drac-mb-xs"
  >
    <span class="drac-text drac-line-height drac-text-black">xl</span>
  </div>
  <div
    class="drac-box drac-w-full drac-bg-yellow-pink drac-rounded-lg drac-p-xs drac-mb-xs"
  >
    <span class="drac-text drac-line-height drac-text-black">full</span>
  </div>
</div>
<Box>
  <Box color="yellowPink" width="xs" rounded="lg" p="xs" mb="xs">
    <Text color="black">xs</Text>
  </Box>
  <Box color="yellowPink" width="md" rounded="lg" p="xs" mb="xs">
    <Text color="black">md</Text>
  </Box>
  <Box color="yellowPink" width="xl" rounded="lg" p="xs" mb="xs">
    <Text color="black">xl</Text>
  </Box>
  <Box color="yellowPink" width="full" rounded="lg" p="xs" mb="xs">
    <Text color="black">full</Text>
  </Box>
</Box>;

Spacing

Boxes come with pre defined spacing primitives for padding and margin that allow for customizing the spacing inside and around boxes.

xs padding
sm padding
medium padding
xs margin
sm margin
medium margin 
<div class="drac-box">
  <div class="drac-box drac-bg-yellow-pink drac-p-xs">
    <span class="drac-text drac-line-height drac-text-black">xs padding</span>
  </div>
  <div class="drac-box drac-bg-purple-cyan drac-p-sm">
    <span class="drac-text drac-line-height drac-text-black">sm padding</span>
  </div>
  <div class="drac-box drac-bg-pink-purple drac-p-md">
    <span class="drac-text drac-line-height drac-text-black"
      >medium padding</span
    >
  </div>
  <div class="drac-box drac-bg-yellow-pink drac-m-xs">
    <span class="drac-text drac-line-height drac-text-black">xs margin</span>
  </div>
  <div class="drac-box drac-bg-purple-cyan drac-m-sm">
    <span class="drac-text drac-line-height drac-text-black">sm margin</span>
  </div>
  <div class="drac-box drac-bg-pink-purple drac-m-md">
    <span class="drac-text drac-line-height drac-text-black"
      >medium margin</span
    >
  </div>
</div>
<Box>
  <Box color="yellowPink" p="xs">
    <Text color="black">xs padding</Text>
  </Box>
  <Box color="purpleCyan" p="sm">
    <Text color="black">sm padding</Text>
  </Box>
  <Box color="pinkPurple" p="md">
    <Text color="black">medium padding</Text>
  </Box>
  <Box color="yellowPink" m="xs">
    <Text color="black">xs margin</Text>
  </Box>
  <Box color="purpleCyan" m="sm">
    <Text color="black">sm margin</Text>
  </Box>
  <Box color="pinkPurple" m="md">
    <Text color="black">medium margin</Text>
  </Box>
</Box>;

Scrollbar

You can customize the color of scrollbars for boxes with any of the existing Dracula UI base colors.

Scrollbar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra dictum imperdiet. Praesent at interdum sem. Suspendisse congue, nibh sit amet facilisis egestas, leo leo tempus ligula, sit amet tristique lacus diam non massa. Quisque egestas magna ligula, vel aliquet quam auctor sed. Maecenas quam dui, tincidunt in rutrum vel, porttitor non nulla. Praesent eu congue magna, nec pellentesque justo. Nulla viverra, eros a vulputate sollicitudin, erat erat lacinia risus, sed eleifend nibh neque eu turpis. Maecenas vitae nulla finibus, faucibus diam et, posuere est. In non leo et est ornare laoreet ac vel odio. Vestibulum tempor, quam eleifend suscipit tempus, nisl nibh eleifend nunc, vitae sollicitudin mi purus sed nisl. Vivamus dapibus dui ac viverra aliquam. Vestibulum non luctus risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra dictum imperdiet. Praesent at interdum sem. Suspendisse congue, nibh sit amet facilisis egestas, leo leo tempus ligula, sit amet tristique lacus diam non massa. Quisque egestas magna ligula, vel aliquet quam auctor sed. Maecenas quam dui, tincidunt in rutrum vel, porttitor non nulla. Praesent eu congue magna, nec pellentesque justo. Nulla viverra, eros a vulputate sollicitudin, erat erat lacinia risus, sed eleifend nibh neque eu turpis. Maecenas vitae nulla finibus, faucibus diam et, posuere est. In non leo et est ornare laoreet ac vel odio. Vestibulum tempor, quam eleifend suscipit tempus, nisl nibh eleifend nunc, vitae sollicitudin mi purus sed nisl. Vivamus dapibus dui ac viverra aliquam. Vestibulum non luctus risus.

Scrollbar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra dictum imperdiet. Praesent at interdum sem. Suspendisse congue, nibh sit amet facilisis egestas, leo leo tempus ligula, sit amet tristique lacus diam non massa. Quisque egestas magna ligula, vel aliquet quam auctor sed. Maecenas quam dui, tincidunt in rutrum vel, porttitor non nulla. Praesent eu congue magna, nec pellentesque justo. Nulla viverra, eros a vulputate sollicitudin, erat erat lacinia risus, sed eleifend nibh neque eu turpis. Maecenas vitae nulla finibus, faucibus diam et, posuere est. In non leo et est ornare laoreet ac vel odio. Vestibulum tempor, quam eleifend suscipit tempus, nisl nibh eleifend nunc, vitae sollicitudin mi purus sed nisl. Vivamus dapibus dui ac viverra aliquam. Vestibulum non luctus risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra dictum imperdiet. Praesent at interdum sem. Suspendisse congue, nibh sit amet facilisis egestas, leo leo tempus ligula, sit amet tristique lacus diam non massa. Quisque egestas magna ligula, vel aliquet quam auctor sed. Maecenas quam dui, tincidunt in rutrum vel, porttitor non nulla. Praesent eu congue magna, nec pellentesque justo. Nulla viverra, eros a vulputate sollicitudin, erat erat lacinia risus, sed eleifend nibh neque eu turpis. Maecenas vitae nulla finibus, faucibus diam et, posuere est. In non leo et est ornare laoreet ac vel odio. Vestibulum tempor, quam eleifend suscipit tempus, nisl nibh eleifend nunc, vitae sollicitudin mi purus sed nisl. Vivamus dapibus dui ac viverra aliquam. Vestibulum non luctus risus. 

<div>
  <div class="drac-box drac-scrollbar-purple drac-h-sm">
    <span class="drac-text drac-line-height drac-text-white">Scrollbar</span>
    <p class="drac-text drac-line-height drac-text-white">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra
      dictum imperdiet. Praesent at interdum sem. Suspendisse congue, nibh sit
      amet facilisis egestas, leo leo tempus ligula, sit amet tristique lacus
      diam non massa. Quisque egestas magna ligula, vel aliquet quam auctor sed.
      Maecenas quam dui, tincidunt in rutrum vel, porttitor non nulla. Praesent
      eu congue magna, nec pellentesque justo. Nulla viverra, eros a vulputate
      sollicitudin, erat erat lacinia risus, sed eleifend nibh neque eu turpis.
      Maecenas vitae nulla finibus, faucibus diam et, posuere est. In non leo et
      est ornare laoreet ac vel odio. Vestibulum tempor, quam eleifend suscipit
      tempus, nisl nibh eleifend nunc, vitae sollicitudin mi purus sed nisl.
      Vivamus dapibus dui ac viverra aliquam. Vestibulum non luctus risus.
    </p>
    <p class="drac-text drac-line-height drac-text-white">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra
      dictum imperdiet. Praesent at interdum sem. Suspendisse congue, nibh sit
      amet facilisis egestas, leo leo tempus ligula, sit amet tristique lacus
      diam non massa. Quisque egestas magna ligula, vel aliquet quam auctor sed.
      Maecenas quam dui, tincidunt in rutrum vel, porttitor non nulla. Praesent
      eu congue magna, nec pellentesque justo. Nulla viverra, eros a vulputate
      sollicitudin, erat erat lacinia risus, sed eleifend nibh neque eu turpis.
      Maecenas vitae nulla finibus, faucibus diam et, posuere est. In non leo et
      est ornare laoreet ac vel odio. Vestibulum tempor, quam eleifend suscipit
      tempus, nisl nibh eleifend nunc, vitae sollicitudin mi purus sed nisl.
      Vivamus dapibus dui ac viverra aliquam. Vestibulum non luctus risus.
    </p>
  </div>
  <div class="drac-box drac-scrollbar-pink drac-h-xs drac-p-xs">
    <span class="drac-text drac-line-height drac-text-white">Scrollbar</span>
    <p class="drac-text drac-line-height drac-text-white">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra
      dictum imperdiet. Praesent at interdum sem. Suspendisse congue, nibh sit
      amet facilisis egestas, leo leo tempus ligula, sit amet tristique lacus
      diam non massa. Quisque egestas magna ligula, vel aliquet quam auctor sed.
      Maecenas quam dui, tincidunt in rutrum vel, porttitor non nulla. Praesent
      eu congue magna, nec pellentesque justo. Nulla viverra, eros a vulputate
      sollicitudin, erat erat lacinia risus, sed eleifend nibh neque eu turpis.
      Maecenas vitae nulla finibus, faucibus diam et, posuere est. In non leo et
      est ornare laoreet ac vel odio. Vestibulum tempor, quam eleifend suscipit
      tempus, nisl nibh eleifend nunc, vitae sollicitudin mi purus sed nisl.
      Vivamus dapibus dui ac viverra aliquam. Vestibulum non luctus risus.
    </p>
    <p class="drac-text drac-line-height drac-text-white">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra
      dictum imperdiet. Praesent at interdum sem. Suspendisse congue, nibh sit
      amet facilisis egestas, leo leo tempus ligula, sit amet tristique lacus
      diam non massa. Quisque egestas magna ligula, vel aliquet quam auctor sed.
      Maecenas quam dui, tincidunt in rutrum vel, porttitor non nulla. Praesent
      eu congue magna, nec pellentesque justo. Nulla viverra, eros a vulputate
      sollicitudin, erat erat lacinia risus, sed eleifend nibh neque eu turpis.
      Maecenas vitae nulla finibus, faucibus diam et, posuere est. In non leo et
      est ornare laoreet ac vel odio. Vestibulum tempor, quam eleifend suscipit
      tempus, nisl nibh eleifend nunc, vitae sollicitudin mi purus sed nisl.
      Vivamus dapibus dui ac viverra aliquam. Vestibulum non luctus risus.
    </p>
  </div>
</div>
<div>
  <Box scrollbar={true} height="sm">
    <Text color="white">Scrollbar</Text>
    <Paragraph>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra
      dictum imperdiet. Praesent at interdum sem. Suspendisse congue, nibh sit
      amet facilisis egestas, leo leo tempus ligula, sit amet tristique lacus
      diam non massa. Quisque egestas magna ligula, vel aliquet quam auctor sed.
      Maecenas quam dui, tincidunt in rutrum vel, porttitor non nulla. Praesent
      eu congue magna, nec pellentesque justo. Nulla viverra, eros a vulputate
      sollicitudin, erat erat lacinia risus, sed eleifend nibh neque eu turpis.
      Maecenas vitae nulla finibus, faucibus diam et, posuere est. In non leo et
      est ornare laoreet ac vel odio. Vestibulum tempor, quam eleifend suscipit
      tempus, nisl nibh eleifend nunc, vitae sollicitudin mi purus sed nisl.
      Vivamus dapibus dui ac viverra aliquam. Vestibulum non luctus risus.
    </Paragraph>
    <Paragraph>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra
      dictum imperdiet. Praesent at interdum sem. Suspendisse congue, nibh sit
      amet facilisis egestas, leo leo tempus ligula, sit amet tristique lacus
      diam non massa. Quisque egestas magna ligula, vel aliquet quam auctor sed.
      Maecenas quam dui, tincidunt in rutrum vel, porttitor non nulla. Praesent
      eu congue magna, nec pellentesque justo. Nulla viverra, eros a vulputate
      sollicitudin, erat erat lacinia risus, sed eleifend nibh neque eu turpis.
      Maecenas vitae nulla finibus, faucibus diam et, posuere est. In non leo et
      est ornare laoreet ac vel odio. Vestibulum tempor, quam eleifend suscipit
      tempus, nisl nibh eleifend nunc, vitae sollicitudin mi purus sed nisl.
      Vivamus dapibus dui ac viverra aliquam. Vestibulum non luctus risus.
    </Paragraph>
  </Box>
  <Box scrollbar="pink" p="xs" height="xs">
    <Text color="white">Scrollbar</Text>
    <Paragraph>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra
      dictum imperdiet. Praesent at interdum sem. Suspendisse congue, nibh sit
      amet facilisis egestas, leo leo tempus ligula, sit amet tristique lacus
      diam non massa. Quisque egestas magna ligula, vel aliquet quam auctor sed.
      Maecenas quam dui, tincidunt in rutrum vel, porttitor non nulla. Praesent
      eu congue magna, nec pellentesque justo. Nulla viverra, eros a vulputate
      sollicitudin, erat erat lacinia risus, sed eleifend nibh neque eu turpis.
      Maecenas vitae nulla finibus, faucibus diam et, posuere est. In non leo et
      est ornare laoreet ac vel odio. Vestibulum tempor, quam eleifend suscipit
      tempus, nisl nibh eleifend nunc, vitae sollicitudin mi purus sed nisl.
      Vivamus dapibus dui ac viverra aliquam. Vestibulum non luctus risus.
    </Paragraph>
    <Paragraph>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra
      dictum imperdiet. Praesent at interdum sem. Suspendisse congue, nibh sit
      amet facilisis egestas, leo leo tempus ligula, sit amet tristique lacus
      diam non massa. Quisque egestas magna ligula, vel aliquet quam auctor sed.
      Maecenas quam dui, tincidunt in rutrum vel, porttitor non nulla. Praesent
      eu congue magna, nec pellentesque justo. Nulla viverra, eros a vulputate
      sollicitudin, erat erat lacinia risus, sed eleifend nibh neque eu turpis.
      Maecenas vitae nulla finibus, faucibus diam et, posuere est. In non leo et
      est ornare laoreet ac vel odio. Vestibulum tempor, quam eleifend suscipit
      tempus, nisl nibh eleifend nunc, vitae sollicitudin mi purus sed nisl.
      Vivamus dapibus dui ac viverra aliquam. Vestibulum non luctus risus.
    </Paragraph>
  </Box>
</div>;

Properties

color

The background color.

"animated" | "purpleCyan" | "yellowPink" | "cyanGreen" | "pinkPurple" | "cyan" | "green" | "orange" | "pink" | "purple" | "red" | "yellow" | "white" | "black" | "blackSecondary" | "blackLight"
display

The display of the element.

"none" | "block" | "flex" | "grid" | "table" | "inline" | "inline-block" | "inline-flex" | "inline-grid" | "inline-table"
glowColor

The glow color.

"cyan" | "green" | "orange" | "pink" | "purple" | "red" | "yellow"
borderColor

The border color.

"cyan" | "green" | "orange" | "pink" | "purple" | "red" | "yellow"
rounded

The border radius.

"none" | "full" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "base"
height

The height of the element.

"auto" | "none" | "full" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl"
width

The width of the element.

"auto" | "none" | "full" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl"
as

The HTML element to be used

"object" | "table" | "base" | "time" | "link" | "menu" | "dialog" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "basefont" | "bdi" | "bdo" | ... 100 more ...
scrollbar

If the custom scrollbar is to be used and its color.

boolean | "cyan" | "green" | "orange" | "pink" | "purple" | "red" | "yellow"