Box

Box is a fundamental layout component that serves as a building block for other components. It supports all styled-system properties.

Usage

<Box 
  p="md" 
  bg="primary-500"
  borderRadius={5}
>
  Content goes here
</Box>

<Box 
  backgroundColor="primary-alpha-500"
  padding="lg"
  opacity={0.8}
>
  Content with opacity
</Box>

Box accepts all styled-system props from the following categories:

Space Props
- margin, m, mt, mr, mb, ml, mx, my
- padding, p, pt, pr, pb, pl, px, py
Layout Props
- width, height, minWidth, maxWidth
- minHeight, maxHeight, size, display
Color Props
- color, backgroundColor, bg
Border Props
- border, borderWidth, borderStyle
- borderColor, borderRadius
- borderTop, borderRight, borderBottom, borderLeft
Background Props
- background, backgroundImage
- backgroundSize, backgroundPosition
- backgroundRepeat
Flexbox Props
- alignItems, alignContent, justifyItems
- justifyContent, flexWrap, flexDirection
- flex, flexGrow, flexShrink, flexBasis
- justifySelf, alignSelf, order
Opacity Props
- opacity

Optional number value between 0 and 1 to control the component's opacity: