Box is our most fundamental layout component

Box can largely be seen as an abstraction over the div element. It is most useful when used as a generic containing component, and when paired with as and css allows a high degree of composition and flexibility.

Box falls back to rendering a div, but we should use it to render more sematically relevant container elements e.g. <Box as="section">. As an example, a card component could use Box to render a section, header and footer.

Avoid rendering any of these elements directly in our components — Box has all the same flexibility, but with the addition of the powerful css prop and various styling utilities based on our themes.


To show an example of the benefits of using Box, the card below is composed together using Box alongside other relevant components:

Edit me!

API Reference