Skip to content
+

Box

The Box component is a generic, theme-aware container with access to CSS utilities from MUI System.

Introduction

The Box component is a generic container for grouping other components. It's a fundamental building block—you can think of it as a <div> with special features (like access to your app's theme and the sx prop).

Basics

import Box from '@mui/system/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 component prop. The demo below replaces the <div> with a <section> element:

This is a section container
Press Enter to start editing

Component

Using the sx prop

Use the sx prop to quickly customize any Box instance using a superset of CSS with access to all the style functions and theme-aware properties exposed in the MUI System package.

Press Enter to start editing

System props

As a CSS utility component, the Box supports all MUI System properties. You can use them as prop directly on the component.

<Box height={20} width={20} my={4} display="flex" alignItems="center" gap={4}>

Create your own Box component

Use the createBox() utility to create your version of the Box component. This is useful if you need to expose your container to a theme that's different from the default theme of the library you're working with:

import { createBox, createTheme } from '@mui/system';

const defaultTheme = createTheme({
  // your custom theme values
});

const Box = createBox({ defaultTheme });

export default Box;

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.