Box

A box is just a div by default, useful if you need to wrap other elements to add padding or a background color:

<Box p="md" bg="gray600">
  <Box w="lg" h="lg" bg="red200" />
</Box>

Box implements a set of shorthand attributes, they are: p, px, py, pt, pb, pl, pr (for padding), radius (border-radius), bg (background), w (width), h (height), d (display), as (for changing the underlying html tag). Box is the basis of many other plastic components such as Stack and Inline, which inherit the same attributes.