The Box component is a generic, theme-aware container with access to CSS utilities from MUI System.
The Box component is a generic container for grouping other components.
It's a fundamental building block when working with Joy UI—you can think of it as a
<div> with extra built-in features, like access to your app's theme and the
The Box component differs from other containers available in Joy UI in that its usage is intended to be multipurpose and open-ended, just like a
Components like Stack and Sheet, by contrast, feature usage-specific props that make them ideal for certain use cases: Stack for one-dimensional layouts, and Sheet for surfaces that need access to Joy UI's global variants.
import Box from '@mui/joy/Box';
The Box component renders as a
<div> by default, but you can swap in any other valid HTML tag or React component using the
The demo below replaces the
<div> with a
As a CSS utility component, the Box supports all MUI System properties. You can use them as props directly on the component.
sx prop to quickly customize any Box instance using a superset of CSS that has access to all the style functions and theme-aware properties exposed in the MUI System package.
The demo below shows how to apply colors from the theme using this prop:
The Box component is composed of a single root
<!-- contents of the Box -->
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.