init project

docs/data/system/components/box/BoxBasic.js

@@ -0,0 +1,9 @@
+import Box from '@mui/system/Box';
+
+export default function BoxBasic() {
+  return (
+    <Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
+      This Box renders as an HTML section element.
+    </Box>
+  );
+}

docs/data/system/components/box/BoxBasic.tsx

@@ -0,0 +1,9 @@
+import Box from '@mui/system/Box';
+
+export default function BoxBasic() {
+  return (
+    <Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
+      This Box renders as an HTML section element.
+    </Box>
+  );
+}

docs/data/system/components/box/BoxBasic.tsx.preview

@@ -0,0 +1,2 @@
+
+  This Box renders as an HTML section element.

docs/data/system/components/box/BoxSx.js

@@ -0,0 +1,28 @@
+import { Box, ThemeProvider } from '@mui/system';
+
+export default function BoxSx() {
+  return (
+    <ThemeProvider
+      theme={{
+        palette: {
+          primary: {
+            main: '#007FFF',
+            dark: '#0066CC',
+          },
+        },
+      }}
+    >
+      <Box
+        sx={{
+          width: 100,
+          height: 100,
+          borderRadius: 1,
+          bgcolor: 'primary.main',
+          '&:hover': {
+            bgcolor: 'primary.dark',
+          },
+        }}
+      />
+    </ThemeProvider>
+  );
+}

docs/data/system/components/box/BoxSx.tsx

@@ -0,0 +1,28 @@
+import { Box, ThemeProvider } from '@mui/system';
+
+export default function BoxSx() {
+  return (
+    <ThemeProvider
+      theme={{
+        palette: {
+          primary: {
+            main: '#007FFF',
+            dark: '#0066CC',
+          },
+        },
+      }}
+    >
+      <Box
+        sx={{
+          width: 100,
+          height: 100,
+          borderRadius: 1,
+          bgcolor: 'primary.main',
+          '&:hover': {
+            bgcolor: 'primary.dark',
+          },
+        }}
+      />
+    </ThemeProvider>
+  );
+}

docs/data/system/components/box/BoxSystemProps.js

@@ -0,0 +1,20 @@
+import Box from '@mui/system/Box';
+
+export default function BoxSystemProps() {
+  return (
+    <Box
+      sx={{
+        height: 200,
+        width: 200,
+        my: 4,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 4,
+        p: 2,
+        border: '2px solid grey',
+      }}
+    >
+      This Box uses MUI System props for quick customization.
+    </Box>
+  );
+}

docs/data/system/components/box/BoxSystemProps.tsx

@@ -0,0 +1,20 @@
+import Box from '@mui/system/Box';
+
+export default function BoxSystemProps() {
+  return (
+    <Box
+      sx={{
+        height: 200,
+        width: 200,
+        my: 4,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 4,
+        p: 2,
+        border: '2px solid grey',
+      }}
+    >
+      This Box uses MUI System props for quick customization.
+    </Box>
+  );
+}

docs/data/system/components/box/BoxSystemProps.tsx.preview

@@ -0,0 +1,2 @@
+
+  This Box uses MUI System props for quick customization.

docs/data/system/components/box/box.md

@@ -0,0 +1,78 @@
+---
+productId: system
+title: React Box component
+components: Box
+githubLabel: 'component: Box'
+---
+
+<!-- This page's content is duplicated (with some product-specific details) across the Material UI, Joy UI, and MUI System docs. Any changes should be applied to all three pages at the same time. -->
+
+# Box
+
+<p class="description">The Box component is a generic, theme-aware container with access to CSS utilities from MUI System.</p>
+
+{{"component": "@mui/docs/ComponentLinkHeader", "design": false}}
+
+## Introduction
+
+The Box component is a generic container for grouping other components.
+It's a fundamental building block when working with MUI System—you can think of it as a `<div>` with extra built-in features, like access to your app's theme and the [`sx` prop](/system/getting-started/the-sx-prop/).
+
+### Usage
+
+The Box component differs from other containers available in MUI System in that its usage is intended to be multipurpose and open-ended, just like a `<div>`.
+Components like [Container](/system/react-container/) and [Stack](/system/react-stack/), by contrast, feature usage-specific props that make them ideal for certain use cases: Container for main layout orientation, and Stack for one-dimensional layouts.
+
+## Basics
+
+```jsx
+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:
+
+{{"demo": "BoxBasic.js", "defaultCodeOpen": true }}
+
+## Customization
+
+### With MUI System props
+
+As a CSS utility component, the Box supports all [MUI System properties](/system/properties/).
+You can use them as props directly on the component.
+
+{{"demo": "BoxSystemProps.js", "defaultCodeOpen": true }}
+
+### With the sx prop
+
+Use the [`sx` prop](/system/getting-started/the-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:
+
+{{"demo": "BoxSx.js", "defaultCodeOpen": true }}
+
+### Create your own Box
+
+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:
+
+```js
+import { createBox, createTheme } from '@mui/system';
+
+const defaultTheme = createTheme({
+  // your custom theme values
+});
+
+const Box = createBox({ defaultTheme });
+
+export default Box;
+```
+
+## Anatomy
+
+The Box component is composed of a single root `<div>` element:
+
+```html
+<div className="MuiBox-root">
+  <!-- contents of the Box -->
+</div>
+```