From e86e94482cd3f36dbd0cd8e41ad153b7aa0488eb Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 25 Sep 2023 15:23:23 -0300
Subject: [PATCH] add the Box page barebones

---
 docs/data/joy/components/box/box.md | 47 +++++++++++++++++++++++++++++
 docs/data/joy/pages.ts              |  6 +++-
 docs/pages/joy-ui/react-box.js      |  7 +++++
 3 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 docs/data/joy/components/box/box.md
 create mode 100644 docs/pages/joy-ui/react-box.js

diff --git a/docs/data/joy/components/box/box.md b/docs/data/joy/components/box/box.md
new file mode 100644
index 00000000000000..7b77cd2de66963
--- /dev/null
+++ b/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
diff --git a/docs/data/joy/pages.ts b/docs/data/joy/pages.ts
index 93ea42e037a70a..fa322145cfd9ad 100644
--- a/docs/data/joy/pages.ts
+++ b/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',
diff --git a/docs/pages/joy-ui/react-box.js b/docs/pages/joy-ui/react-box.js
new file mode 100644
index 00000000000000..0846b5df5ca244
--- /dev/null
+++ b/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} />;
+}