Get Started
Components
Styling
Theming

Divider

Used to create visual separation between content.

import { Divider, Box, HStack } from "styled-system/jsx";
import { DecorativeBox } from "compositions/lib/decorative-box";


const Demo = () => {
  return (
    <HStack gap="md">
      <DecorativeBox height="20">Left</DecorativeBox>
      <Divider />
      <DecorativeBox height="20">Right</DecorativeBox>
    </HStack>
  );
};

Usage

import { Divider } from "styled-system/jsx";
<Divider />

Examples

Orientation

Use the orientation prop to change the orientation of the divider.

import { Divider, VStack } from "styled-system/jsx";
import { DecorativeBox } from "compositions/lib/decorative-box";


const Demo = () => {
  return (
    <VStack gap="8">
      <Divider orientation="horizontal" />
      <Divider orientation="vertical" />
    </VStack>
  );
};

Thickness

Use the thickness prop to change the thickness of the divider.

import { Divider, VStack } from "styled-system/jsx";
import { DecorativeBox } from "compositions/lib/decorative-box";


const Demo = () => {
  return (
    <VStack gap="8">
      <Divider thickness="1px" />
      <Divider thickness="2px" />
      <Divider thickness="4px" />
    </VStack>
  );
};

Color

Use the color prop to change the color of the divider.

import { Divider, VStack } from "styled-system/jsx";
import { DecorativeBox } from "compositions/lib/decorative-box";


const Demo = () => {
  return (
    <VStack gap="8">
      <Divider color="gray.200" />
      <Divider color="blue.500" />
      <Divider color="red.500" />
    </VStack>
  );
};

Props

PropTypeDescription
orientationhorizontal,verticalThe orientation of the divider. Defaults to "horizontal".
thicknessstringThe thickness of the divider. Defaults to "1px".
colorstringThe color of the divider. Defaults to "gray.200".

On this page