Spacer

The Spacer is a utility component used to create space between other components in a Kuma UI application. It accepts size and horizontal props, which specify the size of the space and its orientation, respectively.

Import

import { Spacer } from "@kuma-ui/core";

Usage

Vertical Spacing

const ExampleSpacerVertical = () => {
  return (
    <>
      <Box p={8} bg="blue" color="white">
        Component A
      </Box>
      <Spacer size="20px" />
      <Box p={8} bg="green" color="white">
        Component B
      </Box>
    </>
  );
};

Horizontal Spacing

const ExampleSpacerHorizontal = () => {
  return (
    <Flex>
      <Box p={8} bg="blue" color="white">
        Component A
      </Box>
      <Spacer size="20px" horizontal />
      <Box p={8} bg="green" color="white">
        Component B
      </Box>
    </Flex>
  );
};

Props

size

The size prop determines the size of the space. You can specify this as a string (e.g., "20px") or as a number (which will be converted to pixels).

horizontal

The horizontal prop determines the orientation of the space. If set to true, the space will be horizontal. If left unset or set to false, the space will be vertical.