Box

The <Box /> is a primitive layout component that is heavily used to build other components, but can also be used to create custom layouts and components in your app.

Show codeCopy code

By default, it renders a <div>. You can render it with a different HTML element tag by using the as prop:

Show codeCopy code

Apply styles like padding, margin, border radius, background color and more, by using available props. Here's a small example:

Show codeCopy code

The <Box /> component supports the responsive prop syntax on most props (for a full list see props). Try resizing your viewport to see the effects in the examples below.

Use the breakpoint names to define a value at that minimum width:

Show codeCopy code

If you want to skip over a breakpoint, you can do so by excluding it:

Show codeCopy code