HStack

HStack is a Box component with display="flex" and flex-direction: row set by default. It makes it easier to layout and align child components in a horizontal direction. It is a fundamental layout component in Kuma UI.

Import

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

Usage

Hello world

Hello again

const HStackExample = () => {
  return (
    <HStack justify="center" alignItems="center" gap={8}>
      <Box p={8} bg="blue" color="white">
        Hello world
      </Box>
      <Box p={8} bg="green" color="white">
        Hello again
      </Box>
    </HStack>
  );
};

Grid VStack