Flex

Flex is a Box component with display="flex" set by default. It makes it easier to layout and align child components in both horizontal and vertical directions. It is a fundamental layout component in Kuma UI.

Import

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

Usage

Hello world

const FlexExample = () => {
  return (
    <Flex justify="center" alignItems="center">
      <Box p={8} bg="blue" color="white">
        Hello world
      </Box>
    </Flex>
  );
};

Props

Flex accepts all the same props as Box.

Box Grid