Recipes

Common patterns and examples for using the Box component.

2 elements side-by-side:

Live Editor

function SideBySideExample() {
  return (
    <Box display="flex">
      <Box
        width={1 / 2}
        height="150px"
        border={500}
        borderColor="blue.500"
        bg="blue.100"
      />
      <Box
        width={1 / 2}
        height="150px"
        border={500}
        borderColor="red.500"
        bg="red.100"
      />
    </Box>
  );
}

Centering elements horizontally and vertically:

Live Editor

function CenteredExample() {
  return (
    <Box
      display="flex"
      alignItems="center"
      justifyContent="center"
      bg="container.background.base"
      border={500}
      borderColor="container.border.base"
      p={600}
      minHeight="200px"
    >
      This content will be centered within the box.
    </Box>
  );
}