init project

docs/data/joy/components/sheet/SheetUsage.js

@@ -0,0 +1,40 @@
+import Sheet from '@mui/joy/Sheet';
+import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
+
+export default function SheetUsage() {
+  return (
+    <JoyUsageDemo
+      componentName="Sheet"
+      data={[
+        {
+          propName: 'variant',
+          knob: 'radio',
+          defaultValue: 'plain',
+          options: ['plain', 'outlined', 'soft', 'solid'],
+        },
+        {
+          propName: 'color',
+          knob: 'color',
+          defaultValue: 'neutral',
+          options: ['neutral', 'primary', 'danger', 'info', 'success', 'warning'],
+        },
+      ]}
+      renderDemo={(props) => (
+        <Sheet
+          {...props}
+          sx={{
+            width: 250,
+            height: 200,
+            m: 1,
+            mb: 4,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          Sheet
+        </Sheet>
+      )}
+    />
+  );
+}

docs/data/joy/components/sheet/SimpleSheet.js

@@ -0,0 +1,9 @@
+import Sheet from '@mui/joy/Sheet';
+
+export default function SimpleSheet() {
+  return (
+    <Sheet variant="outlined" color="neutral" sx={{ p: 4 }}>
+      Hello world!
+    </Sheet>
+  );
+}

docs/data/joy/components/sheet/SimpleSheet.tsx

@@ -0,0 +1,9 @@
+import Sheet from '@mui/joy/Sheet';
+
+export default function SimpleSheet() {
+  return (
+    <Sheet variant="outlined" color="neutral" sx={{ p: 4 }}>
+      Hello world!
+    </Sheet>
+  );
+}

docs/data/joy/components/sheet/SimpleSheet.tsx.preview

@@ -0,0 +1,3 @@
+<Sheet variant="outlined" color="neutral" sx={{ p: 4 }}>
+  Hello world!
+</Sheet>

docs/data/joy/components/sheet/sheet.md

@@ -0,0 +1,36 @@
+---
+productId: joy-ui
+title: React Sheet component
+components: Sheet
+---
+
+# Sheet
+
+<p class="description">Sheet is a generic container that supports Joy UI's global variants.</p>
+
+{{"component": "@mui/docs/ComponentLinkHeader"}}
+
+## Introduction
+
+The `Sheet` container is a generic container.
+It's a sibling to the [`Box`](/system/react-box/) component, and equivalent to Material UI's [`Paper`](/material-ui/react-paper/), with the difference being that it supports Joy UI's global variants out of the box.
+
+{{"demo": "SheetUsage.js", "hideToolbar": true, "bg": "gradient"}}
+
+## Component
+
+After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements:
+
+```jsx
+import Sheet from '@mui/joy/Sheet';
+
+export default function MyApp() {
+  return <Sheet>Holy sheet!</Sheet>;
+}
+```
+
+### Basic usage
+
+The `Sheet` component, in addition to the variants, also has access to the `color` prop, allowing you to use every palette of the theme.
+
+{{"demo": "SimpleSheet.js"}}