Box

The Box component is a low-level primitive used for layout purposes. It can be used to create grid layouts, apply padding or margin, and more.

Here is an example of how the Box component can be used to apply padding and border around its children.

Some Box

Live Editor

function BoxExample() {
  return (
    <Box display="flex" bg="app.background.base" padding={500}>
      <Box p={400} border={500} borderColor="container.border.base" bg="container.background.base" height="100%">
        This is a box.
      </Box>
    </Box>
  );
}

Properties

The Box component supports the following system props:

COMMON - Common styling props
BORDER - Border styling props
LAYOUT - Layout props (width, height, display, etc.)
POSITION - Position props (position, top, left, etc.)
FLEXBOX - Flexbox props (flex, alignItems, justifyContent, etc.)
GRID - CSS Grid props

Properties​

Properties