diff --git a/docs/data/joy/components/sheet/SheetColors.js b/docs/data/joy/components/sheet/SheetColors.js
new file mode 100644
index 00000000000000..6b1b42ea158b03
--- /dev/null
+++ b/docs/data/joy/components/sheet/SheetColors.js
@@ -0,0 +1,73 @@
+import Box from '@mui/joy/Box';
+import Radio from '@mui/joy/Radio';
+import RadioGroup from '@mui/joy/RadioGroup';
+import Sheet, { sheetClasses } from '@mui/joy/Sheet';
+
+import Typography from '@mui/joy/Typography';
+import * as React from 'react';
+
+export default function SheetColors() {
+ const [variant, setVariant] = React.useState('plain');
+ return (
+ .${sheetClasses.root}`]: {
+ m: 2,
+ width: 128,
+ height: 128,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ }}
+ >
+
+
+ Variant:
+
+ setVariant(event.target.value)}
+ >
+
+
+
+
+
+
+
+ Primary
+
+
+ Neutral
+
+
+ Danger
+
+
+ Info
+
+
+ Success
+
+
+ Warning
+
+
+ );
+}
diff --git a/docs/data/joy/components/sheet/SheetColors.tsx b/docs/data/joy/components/sheet/SheetColors.tsx
new file mode 100644
index 00000000000000..ba434e793e1853
--- /dev/null
+++ b/docs/data/joy/components/sheet/SheetColors.tsx
@@ -0,0 +1,73 @@
+import Box from '@mui/joy/Box';
+import Radio from '@mui/joy/Radio';
+import RadioGroup from '@mui/joy/RadioGroup';
+import Sheet, { sheetClasses } from '@mui/joy/Sheet';
+import { VariantProp } from '@mui/joy/styles';
+import Typography from '@mui/joy/Typography';
+import * as React from 'react';
+
+export default function SheetColors() {
+ const [variant, setVariant] = React.useState('plain');
+ return (
+ .${sheetClasses.root}`]: {
+ m: 2,
+ width: 128,
+ height: 128,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ }}
+ >
+
+
+ Variant:
+
+ setVariant(event.target.value as VariantProp)}
+ >
+
+
+
+
+
+
+
+ Primary
+
+
+ Neutral
+
+
+ Danger
+
+
+ Info
+
+
+ Success
+
+
+ Warning
+
+
+ );
+}
diff --git a/docs/data/joy/components/sheet/SimpleSheet.js b/docs/data/joy/components/sheet/SheetElevations.js
similarity index 85%
rename from docs/data/joy/components/sheet/SimpleSheet.js
rename to docs/data/joy/components/sheet/SheetElevations.js
index 94abd06e6ebc84..5fdecf91b3766c 100644
--- a/docs/data/joy/components/sheet/SimpleSheet.js
+++ b/docs/data/joy/components/sheet/SheetElevations.js
@@ -2,12 +2,11 @@ import Box from '@mui/joy/Box';
import Sheet from '@mui/joy/Sheet';
import * as React from 'react';
-export default function SimpleSheet() {
+export default function SheetElevations() {
return (
div': {
m: 2,
width: 128,
diff --git a/docs/data/joy/components/sheet/SimpleSheet.tsx.preview b/docs/data/joy/components/sheet/SheetElevations.preview
similarity index 100%
rename from docs/data/joy/components/sheet/SimpleSheet.tsx.preview
rename to docs/data/joy/components/sheet/SheetElevations.preview
diff --git a/docs/data/joy/components/sheet/SimpleSheet.tsx b/docs/data/joy/components/sheet/SheetElevations.tsx
similarity index 85%
rename from docs/data/joy/components/sheet/SimpleSheet.tsx
rename to docs/data/joy/components/sheet/SheetElevations.tsx
index 94abd06e6ebc84..5fdecf91b3766c 100644
--- a/docs/data/joy/components/sheet/SimpleSheet.tsx
+++ b/docs/data/joy/components/sheet/SheetElevations.tsx
@@ -2,12 +2,11 @@ import Box from '@mui/joy/Box';
import Sheet from '@mui/joy/Sheet';
import * as React from 'react';
-export default function SimpleSheet() {
+export default function SheetElevations() {
return (
div': {
m: 2,
width: 128,
diff --git a/docs/data/joy/components/sheet/SheetElevations.tsx.preview b/docs/data/joy/components/sheet/SheetElevations.tsx.preview
new file mode 100644
index 00000000000000..a054cf6ef25b41
--- /dev/null
+++ b/docs/data/joy/components/sheet/SheetElevations.tsx.preview
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/docs/data/joy/components/sheet/SheetVariants.js b/docs/data/joy/components/sheet/SheetVariants.js
new file mode 100644
index 00000000000000..48e5dbc5d2c159
--- /dev/null
+++ b/docs/data/joy/components/sheet/SheetVariants.js
@@ -0,0 +1,28 @@
+import Box from '@mui/joy/Box';
+import Sheet from '@mui/joy/Sheet';
+import * as React from 'react';
+
+export default function SheetElevations() {
+ return (
+ div': {
+ m: 2,
+ width: 128,
+ height: 128,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ }}
+ >
+ Plain
+ Solid
+ Outlined
+ Soft
+
+ );
+}
diff --git a/docs/data/joy/components/sheet/SheetVariants.tsx b/docs/data/joy/components/sheet/SheetVariants.tsx
new file mode 100644
index 00000000000000..48e5dbc5d2c159
--- /dev/null
+++ b/docs/data/joy/components/sheet/SheetVariants.tsx
@@ -0,0 +1,28 @@
+import Box from '@mui/joy/Box';
+import Sheet from '@mui/joy/Sheet';
+import * as React from 'react';
+
+export default function SheetElevations() {
+ return (
+ div': {
+ m: 2,
+ width: 128,
+ height: 128,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ }}
+ >
+ Plain
+ Solid
+ Outlined
+ Soft
+
+ );
+}
diff --git a/docs/data/joy/components/sheet/SheetVariants.tsx.preview b/docs/data/joy/components/sheet/SheetVariants.tsx.preview
new file mode 100644
index 00000000000000..522138a0745fcc
--- /dev/null
+++ b/docs/data/joy/components/sheet/SheetVariants.tsx.preview
@@ -0,0 +1,4 @@
+Plain
+Solid
+Outlined
+Soft
\ No newline at end of file
diff --git a/docs/data/joy/components/sheet/sheet.md b/docs/data/joy/components/sheet/sheet.md
index d1ebd0fe04a173..0548cb9f644d3b 100644
--- a/docs/data/joy/components/sheet/sheet.md
+++ b/docs/data/joy/components/sheet/sheet.md
@@ -11,15 +11,25 @@ unstyled: /base/react-sheet/
{{"component": "modules/components/ComponentLinkHeader.js"}}
-## Basic
-
Use the `Sheet` component as a generic container for your components.
You can play around with variants, color, and elevation to achieve the desired result.
{{"demo": "SheetUsage.js", "hideToolbar": true}}
-## Elevation
+## Variants
+
+The `Sheet` comes with four global variants: `plain` (default), `outlined`, `soft` and `solid`.
+
+{{"demo": "SheetVariants.js"}}
+
+## Colors
+
+All theme palettes are available via the `color` prop which can be combined with the `variant` prop.
+
+{{"demo": "SheetColors.js"}}
+
+## Elevations
-`Sheet` comes with three predefined elevation values: `sm`, `md`, and `lg`.
+The `Sheet` comes with three predefined elevation values: `sm`, `md`, and `lg`.
-{{"demo": "SimpleSheet.js"}}
+{{"demo": "SheetElevations.js"}}