Divider

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>
  );
};

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

<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>
  );
};

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>
  );
};

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>
  );
};