Spirit UI

import { Box, Stack } from "@spirit-ui/design-system/components";
 
export default function Component() {
  return (
    <Stack>
      <Box
        background="neutral950"
        borderRadius="medium"
        height="x10"
        width="x10"
      />
      <Box
        background="neutral950"
        borderRadius="medium"
        height="x10"
        width="x10"
      />
      <Box
        background="neutral950"
        borderRadius="medium"
        height="x10"
        width="x10"
      />
    </Stack>
  );
}

Direction

The direction prop can be used to decide if the elements should be laid out vertically or horizontally.

import { Box, Stack } from "@spirit-ui/design-system/components";
 
export default function Component() {
  return (
    <Stack direction="row">
      <Box
        background="neutral950"
        borderRadius="medium"
        height="x10"
        width="x10"
      />
      <Box
        background="neutral950"
        borderRadius="medium"
        height="x10"
        width="x10"
      />
      <Box
        background="neutral950"
        borderRadius="medium"
        height="x10"
        width="x10"
      />
    </Stack>
  );
}

Gap

The gap prop can be used to decide the amount of spacing that should be applied. The values follow the 4px spacing scale and is represented by it's multiplier.

import { Box, Stack } from "@spirit-ui/design-system/components";
 
export default function Component() {
  return (
    <Stack direction="row" gap="x10">
      <Box
        background="neutral950"
        borderRadius="medium"
        height="x10"
        width="x10"
      />
      <Box
        background="neutral950"
        borderRadius="medium"
        height="x10"
        width="x10"
      />
      <Box
        background="neutral950"
        borderRadius="medium"
        height="x10"
        width="x10"
      />
    </Stack>
  );
}