add the Box page barebones

docs/data/joy/components/box/box.md

@@ -0,0 +1,47 @@
+---
+productId: joy-ui
+title: React Box
+components: Box
+githubLabel: 'component: Box'
+---
+
+# Box
+
+<p class="description">The Box component serves as a wrapper component for most of the CSS utility needs.</p>
+
+## Introduction
+
+The Box component is a generic component that offers all the style functions exposed in [`@mui/system`](/system/getting-started/).
+
+Demo here
+
+## Basics
+
+```jsx
+import Box from '@mui/joy/Box';
+```
+
+The Box differs slightly from other Joy UI components as it doesn't support the props you'd expect such as `variant`, `color`, and `size`.
+
+That's because it's a component based on the MUI System, a collection of CSS utilities for rapidly laying out custom designs.
+
+Demo here
+
+## Customization
+
+### The sx prop
+
+The sx prop lets you work with a superset of CSS that packages all of the style functions exposed in `@mui/system`.
+You can specify any valid CSS using this prop, as well as many theme-aware properties that are unique to MUI System
+
+Demo here
+
+### The component prop
+
+Demo here
+
+### System props
+
+Demo here
+
+## Anatomy

docs/data/joy/pages.ts

@@ -99,7 +99,11 @@ const pages: readonly MuiPage[] = [
       {
         pathname: '/joy-ui/components/layout',
         subheader: 'layout',
-        children: [{ pathname: '/joy-ui/react-grid' }, { pathname: '/joy-ui/react-stack' }],
+        children: [
+          { pathname: '/joy-ui/react-box' },
+          { pathname: '/joy-ui/react-grid' },
+          { pathname: '/joy-ui/react-stack' },
+        ],
       },
       {
         pathname: '/joy-ui/components/utils',

docs/pages/joy-ui/react-box.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import * as pageProps from 'docs/data/joy/components/box/box.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs {...pageProps} />;
+}