diff --git a/docs/data/material/components/skeleton/Facebook.js b/docs/data/material/components/skeleton/Facebook.js
index eca186ecb4465d..aa5cdd934282ab 100644
--- a/docs/data/material/components/skeleton/Facebook.js
+++ b/docs/data/material/components/skeleton/Facebook.js
@@ -18,7 +18,13 @@ function Media(props) {
       <CardHeader
         avatar={
           loading ? (
-            <Skeleton animation="wave" variant="circular" width={40} height={40} />
+            <Skeleton
+              animation="wave"
+              size="box"
+              shape="circular"
+              width={40}
+              height={40}
+            />
           ) : (
             <Avatar
               alt="Ted talk"
@@ -54,7 +60,12 @@ function Media(props) {
         }
       />
       {loading ? (
-        <Skeleton sx={{ height: 190 }} animation="wave" variant="rectangular" />
+        <Skeleton
+          sx={{ height: 190 }}
+          animation="wave"
+          size="box"
+          shape="rectangular"
+        />
       ) : (
         <CardMedia
           component="img"
diff --git a/docs/data/material/components/skeleton/Facebook.tsx b/docs/data/material/components/skeleton/Facebook.tsx
index c575410f1f8058..7f3cddd3011192 100644
--- a/docs/data/material/components/skeleton/Facebook.tsx
+++ b/docs/data/material/components/skeleton/Facebook.tsx
@@ -21,7 +21,13 @@ function Media(props: MediaProps) {
       <CardHeader
         avatar={
           loading ? (
-            <Skeleton animation="wave" variant="circular" width={40} height={40} />
+            <Skeleton
+              animation="wave"
+              size="box"
+              shape="circular"
+              width={40}
+              height={40}
+            />
           ) : (
             <Avatar
               alt="Ted talk"
@@ -57,7 +63,12 @@ function Media(props: MediaProps) {
         }
       />
       {loading ? (
-        <Skeleton sx={{ height: 190 }} animation="wave" variant="rectangular" />
+        <Skeleton
+          sx={{ height: 190 }}
+          animation="wave"
+          size="box"
+          shape="rectangular"
+        />
       ) : (
         <CardMedia
           component="img"
diff --git a/docs/data/material/components/skeleton/Shapes.js b/docs/data/material/components/skeleton/Shapes.js
new file mode 100644
index 00000000000000..814ed30a70e8d3
--- /dev/null
+++ b/docs/data/material/components/skeleton/Shapes.js
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+
+export default function Shapes() {
+  return (
+    <Stack spacing={1}>
+      <Skeleton shape="circular" size="box" width={40} height={40} />
+      <Skeleton shape="rectangular" size="box" width={210} height={60} />
+      <Skeleton shape="rounded" size="box" width={210} height={60} />
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/skeleton/Shapes.tsx b/docs/data/material/components/skeleton/Shapes.tsx
new file mode 100644
index 00000000000000..814ed30a70e8d3
--- /dev/null
+++ b/docs/data/material/components/skeleton/Shapes.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+
+export default function Shapes() {
+  return (
+    <Stack spacing={1}>
+      <Skeleton shape="circular" size="box" width={40} height={40} />
+      <Skeleton shape="rectangular" size="box" width={210} height={60} />
+      <Skeleton shape="rounded" size="box" width={210} height={60} />
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/skeleton/Shapes.tsx.preview b/docs/data/material/components/skeleton/Shapes.tsx.preview
new file mode 100644
index 00000000000000..6fa0fbe5152508
--- /dev/null
+++ b/docs/data/material/components/skeleton/Shapes.tsx.preview
@@ -0,0 +1,3 @@
+<Skeleton shape="circular" size="box" width={40} height={40} />
+<Skeleton shape="rectangular" size="box" width={210} height={60} />
+<Skeleton shape="rounded" size="box" width={210} height={60} />
\ No newline at end of file
diff --git a/docs/data/material/components/skeleton/Sizes.js b/docs/data/material/components/skeleton/Sizes.js
new file mode 100644
index 00000000000000..38fcfdc8d7439c
--- /dev/null
+++ b/docs/data/material/components/skeleton/Sizes.js
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+
+export default function Sizes() {
+  return (
+    <Stack spacing={1} width={210}>
+      {/* For size="text", adjust the height via font-size */}
+      <Skeleton size="text" sx={{ fontSize: '1rem' }} />
+      {/* For size="box", adjust height based on bounding box */}
+      <Skeleton size="box" height={40} />
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/skeleton/Sizes.tsx b/docs/data/material/components/skeleton/Sizes.tsx
new file mode 100644
index 00000000000000..38fcfdc8d7439c
--- /dev/null
+++ b/docs/data/material/components/skeleton/Sizes.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+
+export default function Sizes() {
+  return (
+    <Stack spacing={1} width={210}>
+      {/* For size="text", adjust the height via font-size */}
+      <Skeleton size="text" sx={{ fontSize: '1rem' }} />
+      {/* For size="box", adjust height based on bounding box */}
+      <Skeleton size="box" height={40} />
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/skeleton/Sizes.tsx.preview b/docs/data/material/components/skeleton/Sizes.tsx.preview
new file mode 100644
index 00000000000000..bd2e9812c47488
--- /dev/null
+++ b/docs/data/material/components/skeleton/Sizes.tsx.preview
@@ -0,0 +1,4 @@
+{/* For size="text", adjust the height via font-size */}
+<Skeleton size="text" sx={{ fontSize: '1rem' }} />
+{/* For size="box", adjust height based on bounding box */}
+<Skeleton size="box" height={40} />
\ No newline at end of file
diff --git a/docs/data/material/components/skeleton/SkeletonChildren.js b/docs/data/material/components/skeleton/SkeletonChildren.js
index dea54ea2feb889..4238e3ebd076ce 100644
--- a/docs/data/material/components/skeleton/SkeletonChildren.js
+++ b/docs/data/material/components/skeleton/SkeletonChildren.js
@@ -19,7 +19,7 @@ function SkeletonChildrenDemo(props) {
       <Box sx={{ display: 'flex', alignItems: 'center' }}>
         <Box sx={{ margin: 1 }}>
           {loading ? (
-            <Skeleton variant="circular">
+            <Skeleton size="box" shape="circular">
               <Avatar />
             </Skeleton>
           ) : (
@@ -37,7 +37,7 @@ function SkeletonChildrenDemo(props) {
         </Box>
       </Box>
       {loading ? (
-        <Skeleton variant="rectangular" width="100%">
+        <Skeleton size="box" shape="rectangular" width="100%">
           <div style={{ paddingTop: '57%' }} />
         </Skeleton>
       ) : (
diff --git a/docs/data/material/components/skeleton/SkeletonChildren.tsx b/docs/data/material/components/skeleton/SkeletonChildren.tsx
index bf27ebb7fad364..cc560617a7862b 100644
--- a/docs/data/material/components/skeleton/SkeletonChildren.tsx
+++ b/docs/data/material/components/skeleton/SkeletonChildren.tsx
@@ -18,7 +18,7 @@ function SkeletonChildrenDemo(props: { loading?: boolean }) {
       <Box sx={{ display: 'flex', alignItems: 'center' }}>
         <Box sx={{ margin: 1 }}>
           {loading ? (
-            <Skeleton variant="circular">
+            <Skeleton size="box" shape="circular">
               <Avatar />
             </Skeleton>
           ) : (
@@ -36,7 +36,7 @@ function SkeletonChildrenDemo(props: { loading?: boolean }) {
         </Box>
       </Box>
       {loading ? (
-        <Skeleton variant="rectangular" width="100%">
+        <Skeleton size="box" shape="rectangular" width="100%">
           <div style={{ paddingTop: '57%' }} />
         </Skeleton>
       ) : (
diff --git a/docs/data/material/components/skeleton/SkeletonColor.js b/docs/data/material/components/skeleton/SkeletonColor.js
index ddad47d6302af8..9342f876680276 100644
--- a/docs/data/material/components/skeleton/SkeletonColor.js
+++ b/docs/data/material/components/skeleton/SkeletonColor.js
@@ -15,7 +15,8 @@ export default function SkeletonColor() {
     >
       <Skeleton
         sx={{ bgcolor: 'grey.900' }}
-        variant="rectangular"
+        shape="rectangular"
+        size="box"
         width={210}
         height={118}
       />
diff --git a/docs/data/material/components/skeleton/SkeletonColor.tsx b/docs/data/material/components/skeleton/SkeletonColor.tsx
index ddad47d6302af8..9342f876680276 100644
--- a/docs/data/material/components/skeleton/SkeletonColor.tsx
+++ b/docs/data/material/components/skeleton/SkeletonColor.tsx
@@ -15,7 +15,8 @@ export default function SkeletonColor() {
     >
       <Skeleton
         sx={{ bgcolor: 'grey.900' }}
-        variant="rectangular"
+        shape="rectangular"
+        size="box"
         width={210}
         height={118}
       />
diff --git a/docs/data/material/components/skeleton/SkeletonColor.tsx.preview b/docs/data/material/components/skeleton/SkeletonColor.tsx.preview
index 47ff5795e47d3c..1c90e20e617b1c 100644
--- a/docs/data/material/components/skeleton/SkeletonColor.tsx.preview
+++ b/docs/data/material/components/skeleton/SkeletonColor.tsx.preview
@@ -1,6 +1,7 @@
 <Skeleton
   sx={{ bgcolor: 'grey.900' }}
-  variant="rectangular"
+  shape="rectangular"
+  size="box"
   width={210}
   height={118}
 />
\ No newline at end of file
diff --git a/docs/data/material/components/skeleton/Variants.js b/docs/data/material/components/skeleton/Variants.js
deleted file mode 100644
index c6a075daad4feb..00000000000000
--- a/docs/data/material/components/skeleton/Variants.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react';
-import Skeleton from '@mui/material/Skeleton';
-import Stack from '@mui/material/Stack';
-
-export default function Variants() {
-  return (
-    <Stack spacing={1}>
-      {/* For variant="text", adjust the height via font-size */}
-      <Skeleton variant="text" sx={{ fontSize: '1rem' }} />
-      {/* For other variants, adjust the size with `width` and `height` */}
-      <Skeleton variant="circular" width={40} height={40} />
-      <Skeleton variant="rectangular" width={210} height={60} />
-      <Skeleton variant="rounded" width={210} height={60} />
-    </Stack>
-  );
-}
diff --git a/docs/data/material/components/skeleton/Variants.tsx b/docs/data/material/components/skeleton/Variants.tsx
deleted file mode 100644
index cb1bb0905d617d..00000000000000
--- a/docs/data/material/components/skeleton/Variants.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react';
-import Skeleton from '@mui/material/Skeleton';
-import Stack from '@mui/material/Stack';
-
-export default function Variants() {
-  return (
-    <Stack spacing={1}>
-      {/* For variant="text", adjust the height via font-size */}
-      <Skeleton variant="text" sx={{ fontSize: '1rem' }} />
-
-      {/* For other variants, adjust the size with `width` and `height` */}
-      <Skeleton variant="circular" width={40} height={40} />
-      <Skeleton variant="rectangular" width={210} height={60} />
-      <Skeleton variant="rounded" width={210} height={60} />
-    </Stack>
-  );
-}
diff --git a/docs/data/material/components/skeleton/Variants.tsx.preview b/docs/data/material/components/skeleton/Variants.tsx.preview
deleted file mode 100644
index 8b1bb76eaa17b2..00000000000000
--- a/docs/data/material/components/skeleton/Variants.tsx.preview
+++ /dev/null
@@ -1,7 +0,0 @@
-{/* For variant="text", adjust the height via font-size */}
-<Skeleton variant="text" sx={{ fontSize: '1rem' }} />
-
-{/* For other variants, adjust the size with `width` and `height` */}
-<Skeleton variant="circular" width={40} height={40} />
-<Skeleton variant="rectangular" width={210} height={60} />
-<Skeleton variant="rounded" width={210} height={60} />
\ No newline at end of file
diff --git a/docs/data/material/components/skeleton/YouTube.js b/docs/data/material/components/skeleton/YouTube.js
index ad14816a766901..aa9a82aba7fc53 100644
--- a/docs/data/material/components/skeleton/YouTube.js
+++ b/docs/data/material/components/skeleton/YouTube.js
@@ -43,7 +43,7 @@ function Media(props) {
               src={item.src}
             />
           ) : (
-            <Skeleton variant="rectangular" width={210} height={118} />
+            <Skeleton shape="rectangular" size="box" width={210} height={118} />
           )}
 
           {item ? (
diff --git a/docs/data/material/components/skeleton/YouTube.tsx b/docs/data/material/components/skeleton/YouTube.tsx
index b0ac646c1853fd..fb3800dac24385 100644
--- a/docs/data/material/components/skeleton/YouTube.tsx
+++ b/docs/data/material/components/skeleton/YouTube.tsx
@@ -46,7 +46,7 @@ function Media(props: MediaProps) {
               src={item.src}
             />
           ) : (
-            <Skeleton variant="rectangular" width={210} height={118} />
+            <Skeleton shape="rectangular" size="box" width={210} height={118} />
           )}
           {item ? (
             <Box sx={{ pr: 2 }}>
diff --git a/docs/data/material/components/skeleton/skeleton-pt.md b/docs/data/material/components/skeleton/skeleton-pt.md
index 535dcec9ac44a4..dbd07db167c28d 100644
--- a/docs/data/material/components/skeleton/skeleton-pt.md
+++ b/docs/data/material/components/skeleton/skeleton-pt.md
@@ -22,19 +22,27 @@ O componente é projetado para ser usado **diretamente em seus componentes**. Po
   item ? (
     <img style={{ width: 210, height: 118 }} alt={item.title} src={item.src} />
   ) : (
-    <Skeleton variant="rect" width={210} height={118} />
+    <Skeleton shape="rect" width={210} height={118} />
   );
 }
 ```
 
-## Variantes
+## Formas
 
-The component supports 4 shape variants:
+O componente suporta 3 formas:
 
-- `text` (default): represents a single line of text (you can adjust the height via font size).
-- `circular`, `rectangular`, and `rounded`: come with different border radius to let you take control of the size.
+- `circular`, `rectangular`, e `rounded`: Venha com um raio de borda diferente para permitir que você assuma o controle da forma.
 
-{{"demo": "Variants.js"}}
+{{"demo": "Shapes.js"}}
+
+## Tamanhos
+
+Você pode usar os seguintes valores para especificar o tamanho do componente:
+
+- `text` (default): representa uma única linha de texto (você pode ajustar a altura por tamanho da fonte).
+- `box`: Escala o componente para o tamanho da caixa delimitadora.
+
+{{"demo": "Sizes.js"}}
 
 ## Animações
 
diff --git a/docs/data/material/components/skeleton/skeleton-zh.md b/docs/data/material/components/skeleton/skeleton-zh.md
index 4654b4dc0cfdc6..30e94804e49756 100644
--- a/docs/data/material/components/skeleton/skeleton-zh.md
+++ b/docs/data/material/components/skeleton/skeleton-zh.md
@@ -29,19 +29,27 @@ githubLabel: 'component: skeleton'
       src={item.src}
     />
   ) : (
-    <Skeleton variant="rectangular" width={210} height={118} />
+    <Skeleton shape="rectangular" width={210} height={118} />
   );
 }
 ```
 
-## 变体
+## 形状
 
-The component supports 4 shape variants:
+组件支持 3 种形状:
 
-- `text` (default): represents a single line of text (you can adjust the height via font size).
-- `circular`, `rectangular`, and `rounded`: come with different border radius to let you take control of the size.
+- `circular`, `rectangular`, 和 `rounded`: 带有不同的边界半径，让您控制形状
 
-{{"demo": "Variants.js"}}
+{{"demo": "Shapes.js"}}
+
+## 尺寸
+
+您可以使用以下值来指定组件的大小:
+
+- `text` （默认值）：表示一行文本（您可以通过字体大小调整高度）。
+- `box`: 将组件扩展到边界框的大小。
+
+{{"demo": "Sizes.js"}}
 
 ## 动画
 
@@ -73,7 +81,7 @@ The component supports 4 shape variants:
 
 ```jsx
 loading ? (
-  <Skeleton variant="circular">
+  <Skeleton shape="circular">
     <Avatar />
   </Skeleton>
 ) : (
diff --git a/docs/data/material/components/skeleton/skeleton.md b/docs/data/material/components/skeleton/skeleton.md
index da7cacad060fb6..81bd839c55039b 100644
--- a/docs/data/material/components/skeleton/skeleton.md
+++ b/docs/data/material/components/skeleton/skeleton.md
@@ -30,19 +30,27 @@ For instance:
       src={item.src}
     />
   ) : (
-    <Skeleton variant="rectangular" width={210} height={118} />
+    <Skeleton shape="rectangular" size="box" width={210} height={118} />
   );
 }
 ```
 
-## Variants
+## Shapes
 
-The component supports 4 shape variants:
+The component supports 3 shapes:
+
+- `circular`, `rectangular`, and `rounded`: come with different border radius to let you take control of the shape.
+
+{{"demo": "Shapes.js"}}
+
+## Sizes
+
+You can use the following values to specify the size of the component:
 
 - `text` (default): represents a single line of text (you can adjust the height via font size).
-- `circular`, `rectangular`, and `rounded`: come with different border radius to let you take control of the size.
+- `box`: scale the component to the size of the bounding box.
 
-{{"demo": "Variants.js"}}
+{{"demo": "Sizes.js"}}
 
 ## Animations
 
@@ -76,7 +84,7 @@ infer its width and height from them.
 
 ```jsx
 loading ? (
-  <Skeleton variant="circular">
+  <Skeleton shape="circular" size="box">
     <Avatar />
   </Skeleton>
 ) : (
diff --git a/docs/pages/material-ui/api/skeleton.json b/docs/pages/material-ui/api/skeleton.json
index 0204b0370994ae..ff6da79c3fdf12 100644
--- a/docs/pages/material-ui/api/skeleton.json
+++ b/docs/pages/material-ui/api/skeleton.json
@@ -11,6 +11,13 @@
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "component": { "type": { "name": "elementType" } },
     "height": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } },
+    "shape": {
+      "type": {
+        "name": "enum",
+        "description": "'circular'<br>&#124;&nbsp;'rectangular'<br>&#124;&nbsp;'rounded'"
+      }
+    },
+    "size": { "type": { "name": "enum", "description": "'text'<br>&#124;&nbsp;'box'" } },
     "sx": {
       "type": {
         "name": "union",
@@ -23,7 +30,9 @@
         "name": "union",
         "description": "'circular'<br>&#124;&nbsp;'rectangular'<br>&#124;&nbsp;'rounded'<br>&#124;&nbsp;'text'<br>&#124;&nbsp;string"
       },
-      "default": "'text'"
+      "default": "'text'",
+      "deprecated": true,
+      "deprecationInfo": "Use <code>shape</code> prop to set the shape of the skeleton and <code>size</code> prop to set the scale adaptation."
     },
     "width": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } }
   },
@@ -36,6 +45,7 @@
     "classes": [
       "root",
       "text",
+      "box",
       "rectangular",
       "rounded",
       "circular",
diff --git a/docs/translations/api-docs/skeleton/skeleton.json b/docs/translations/api-docs/skeleton/skeleton.json
index 7eeb123f3b37f6..f143b853e7f211 100644
--- a/docs/translations/api-docs/skeleton/skeleton.json
+++ b/docs/translations/api-docs/skeleton/skeleton.json
@@ -12,6 +12,10 @@
     "height": {
       "description": "Height of the skeleton. Useful when you don&#39;t want to adapt the skeleton to a text element but for instance a card."
     },
+    "shape": { "description": "The shape of the skeleton." },
+    "size": {
+      "description": "Determines whether the skeleton should scale to the element&#39;s text or bounding box."
+    },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
@@ -25,22 +29,27 @@
     "text": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"text\"</code>"
+      "conditions": "<code>size=\"text\"</code> or <code>variant=\"text\"</code>"
+    },
+    "box": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"box\"</code>"
     },
     "rectangular": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"rectangular\"</code>"
+      "conditions": "<code>shape=\"rectangular\"</code> or <code>variant=\"rectangular\"</code>"
     },
     "rounded": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"rounded\"</code>"
+      "conditions": "<code>shape=\"rounded\"</code> or <code>variant=\"rounded\"</code>"
     },
     "circular": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"circular\"</code>"
+      "conditions": "<code>shape=\"circular\"</code> or <code>variant=\"circular\"</code>"
     },
     "pulse": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
diff --git a/packages/mui-material/src/Skeleton/Skeleton.d.ts b/packages/mui-material/src/Skeleton/Skeleton.d.ts
index 1d4e9eda13c324..090feef3106453 100644
--- a/packages/mui-material/src/Skeleton/Skeleton.d.ts
+++ b/packages/mui-material/src/Skeleton/Skeleton.d.ts
@@ -7,6 +7,10 @@ import { SkeletonClasses } from './skeletonClasses';
 
 export interface SkeletonPropsVariantOverrides {}
 
+export interface SkeletonPropsSizeOverrides {}
+
+export interface SkeletonPropsShapeOverrides {}
+
 export interface SkeletonOwnProps {
   /**
    * The animation.
@@ -27,6 +31,17 @@ export interface SkeletonOwnProps {
    * Useful when you don't want to adapt the skeleton to a text element but for instance a card.
    */
   height?: number | string;
+  /**
+   * The shape of the skeleton.
+   */
+  shape?: OverridableStringUnion<
+    'rectangular' | 'rounded' | 'circular',
+    SkeletonPropsShapeOverrides
+  >;
+  /**
+   * Determines whether the skeleton should scale to the element's text or bounding box.
+   */
+  size?: OverridableStringUnion<'text' | 'box', SkeletonPropsSizeOverrides>;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -34,6 +49,7 @@ export interface SkeletonOwnProps {
   /**
    * The type of content that will be rendered.
    * @default 'text'
+   * @deprecated Use `shape` prop to set the shape of the skeleton and `size` prop to set the scale adaptation.
    */
   variant?: OverridableStringUnion<
     'text' | 'rectangular' | 'rounded' | 'circular',
diff --git a/packages/mui-material/src/Skeleton/Skeleton.js b/packages/mui-material/src/Skeleton/Skeleton.js
index 3fc8bf1a052627..8c81103f752862 100644
--- a/packages/mui-material/src/Skeleton/Skeleton.js
+++ b/packages/mui-material/src/Skeleton/Skeleton.js
@@ -4,18 +4,19 @@ import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { keyframes, css } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
-import { alpha, unstable_getUnit as getUnit, unstable_toUnitless as toUnitless } from '../styles';
+import { alpha } from '../styles';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getSkeletonUtilityClass } from './skeletonClasses';
 
 const useUtilityClasses = (ownerState) => {
-  const { classes, variant, animation, hasChildren, width, height } = ownerState;
+  const { classes, shape, size, animation, hasChildren, width, height } = ownerState;
 
   const slots = {
     root: [
       'root',
-      variant,
+      size,
+      shape,
       animation,
       hasChildren && 'withChildren',
       hasChildren && !width && 'fitContent',
@@ -60,10 +61,10 @@ const SkeletonRoot = styled('span', {
   slot: 'Root',
   overridesResolver: (props, styles) => {
     const { ownerState } = props;
-
     return [
       styles.root,
-      styles[ownerState.variant],
+      ownerState.shape && styles[ownerState.shape],
+      ownerState.size && styles[ownerState.size],
       ownerState.animation !== false && styles[ownerState.animation],
       ownerState.hasChildren && styles.withChildren,
       ownerState.hasChildren && !ownerState.width && styles.fitContent,
@@ -71,51 +72,44 @@ const SkeletonRoot = styled('span', {
     ];
   },
 })(
-  ({ theme, ownerState }) => {
-    const radiusUnit = getUnit(theme.shape.borderRadius) || 'px';
-    const radiusValue = toUnitless(theme.shape.borderRadius);
-
-    return {
-      display: 'block',
-      // Create a "on paper" color with sufficient contrast retaining the color
-      backgroundColor: theme.vars
-        ? theme.vars.palette.Skeleton.bg
-        : alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
-      height: '1.2em',
-      ...(ownerState.variant === 'text' && {
-        marginTop: 0,
-        marginBottom: 0,
-        height: 'auto',
-        transformOrigin: '0 55%',
-        transform: 'scale(1, 0.60)',
-        borderRadius: `${radiusValue}${radiusUnit}/${
-          Math.round((radiusValue / 0.6) * 10) / 10
-        }${radiusUnit}`,
-        '&:empty:before': {
-          content: '"\\00a0"',
-        },
-      }),
-      ...(ownerState.variant === 'circular' && {
-        borderRadius: '50%',
+  ({ theme, ownerState }) => ({
+    display: 'block',
+    // Create a "on paper" color with sufficient contrast retaining the color
+    backgroundColor: theme.vars
+      ? theme.vars.palette.Skeleton.bg
+      : alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
+    height: '1.2em',
+    borderRadius: (theme.vars || theme).shape.borderRadius,
+    ...(ownerState.size === 'text' && {
+      marginTop: 0,
+      marginBottom: 0,
+      height: 'auto',
+      transformOrigin: '0 55%',
+      transform: 'scale(1, 0.60)',
+      '&:empty:before': {
+        content: '"\\00a0"',
+      },
+    }),
+    ...(ownerState.shape === 'circular' && {
+      borderRadius: '50%',
+    }),
+    ...(ownerState.shape === 'rectangular' && {
+      borderRadius: 0,
+    }),
+    ...(ownerState.hasChildren && {
+      '& > *': {
+        visibility: 'hidden',
+      },
+    }),
+    ...(ownerState.hasChildren &&
+      !ownerState.width && {
+        maxWidth: 'fit-content',
       }),
-      ...(ownerState.variant === 'rounded' && {
-        borderRadius: (theme.vars || theme).shape.borderRadius,
-      }),
-      ...(ownerState.hasChildren && {
-        '& > *': {
-          visibility: 'hidden',
-        },
+    ...(ownerState.hasChildren &&
+      !ownerState.height && {
+        height: 'auto',
       }),
-      ...(ownerState.hasChildren &&
-        !ownerState.width && {
-          maxWidth: 'fit-content',
-        }),
-      ...(ownerState.hasChildren &&
-        !ownerState.height && {
-          height: 'auto',
-        }),
-    };
-  },
+  }),
   ({ ownerState }) =>
     ownerState.animation === 'pulse' &&
     css`
@@ -156,17 +150,25 @@ const Skeleton = React.forwardRef(function Skeleton(inProps, ref) {
     className,
     component = 'span',
     height,
+    // TODO v6: add defaults
+    shape,
+    size,
     style,
     variant = 'text',
     width,
     ...other
   } = props;
 
+  const sizeValue = size ?? (variant === 'text' ? variant : undefined);
+  const shapeValue =
+    shape ?? (['circular', 'rectangular', 'rounded'].includes(variant) ? variant : undefined);
+
   const ownerState = {
     ...props,
     animation,
     component,
-    variant,
+    size: sizeValue,
+    shape: shapeValue,
     hasChildren: Boolean(other.children),
   };
 
@@ -221,6 +223,14 @@ Skeleton.propTypes /* remove-proptypes */ = {
    * Useful when you don't want to adapt the skeleton to a text element but for instance a card.
    */
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The shape of the skeleton.
+   */
+  shape: PropTypes.oneOf(['circular', 'rectangular', 'rounded']),
+  /**
+   * Determines whether the skeleton should scale to the element's text or bounding box.
+   */
+  size: PropTypes.oneOf(['text', 'box']),
   /**
    * @ignore
    */
@@ -236,6 +246,7 @@ Skeleton.propTypes /* remove-proptypes */ = {
   /**
    * The type of content that will be rendered.
    * @default 'text'
+   * @deprecated Use `shape` prop to set the shape of the skeleton and `size` prop to set the scale adaptation.
    */
   variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
     PropTypes.oneOf(['circular', 'rectangular', 'rounded', 'text']),
diff --git a/packages/mui-material/src/Skeleton/Skeleton.test.js b/packages/mui-material/src/Skeleton/Skeleton.test.js
index 41bd8d67eec034..f217b8c8bb7abd 100644
--- a/packages/mui-material/src/Skeleton/Skeleton.test.js
+++ b/packages/mui-material/src/Skeleton/Skeleton.test.js
@@ -67,4 +67,90 @@ describe('<Skeleton />', () => {
 
     expect(containerWithHeight.firstChild).not.to.have.class(classes.heightAuto);
   });
+
+  describe('Variant Prop', () => {
+    it('should get `text` class when no variant is specified', () => {
+      const { container } = render(
+        <Skeleton>
+          <span />
+        </Skeleton>,
+      );
+
+      expect(container.firstChild).to.have.class(classes.text);
+    });
+
+    it('should get `circular` when variant is set to `circular`', () => {
+      const { container } = render(
+        <Skeleton variant="circular">
+          <span />
+        </Skeleton>,
+      );
+
+      expect(container.firstChild).to.have.class(classes.circular);
+    });
+
+    it('should get `rounded` when variant is set to `rounded`', () => {
+      const { container } = render(
+        <Skeleton variant="rounded">
+          <span />
+        </Skeleton>,
+      );
+
+      expect(container.firstChild).to.have.class(classes.rounded);
+    });
+
+    it('should get `rectangular` when variant is set to `rectangular`', () => {
+      const { container } = render(
+        <Skeleton variant="rectangular">
+          <span />
+        </Skeleton>,
+      );
+
+      expect(container.firstChild).to.have.class(classes.rectangular);
+    });
+  });
+
+  describe('Size & Shape Prop', () => {
+    it('should get `box` class when size is set to `box`', () => {
+      const { container } = render(
+        <Skeleton size="box">
+          <span />
+        </Skeleton>,
+      );
+
+      expect(container.firstChild).to.have.class(classes.box);
+    });
+
+    it('should set `size` prop over `variant` prop', () => {
+      const { container } = render(
+        <Skeleton size="box" variant="text">
+          <span />
+        </Skeleton>,
+      );
+
+      expect(container.firstChild).to.have.class(classes.box);
+      expect(container.firstChild).not.to.have.class(classes.text);
+    });
+
+    it('should get `circular` when shape is set to `circular`', () => {
+      const { container } = render(
+        <Skeleton shape="circular">
+          <span />
+        </Skeleton>,
+      );
+
+      expect(container.firstChild).to.have.class(classes.circular);
+    });
+
+    it('should set `shape` prop over `variant` prop', () => {
+      const { container } = render(
+        <Skeleton variant="rounded" shape="rectangular">
+          <span />
+        </Skeleton>,
+      );
+
+      expect(container.firstChild).to.have.class(classes.rectangular);
+      expect(container.firstChild).not.to.have.class(classes.rounded);
+    });
+  });
 });
diff --git a/packages/mui-material/src/Skeleton/skeletonClasses.ts b/packages/mui-material/src/Skeleton/skeletonClasses.ts
index b57813f9d176b3..b9ad6bacc8ce4f 100644
--- a/packages/mui-material/src/Skeleton/skeletonClasses.ts
+++ b/packages/mui-material/src/Skeleton/skeletonClasses.ts
@@ -4,13 +4,15 @@ import generateUtilityClass from '../generateUtilityClass';
 export interface SkeletonClasses {
   /** Styles applied to the root element. */
   root: string;
-  /** Styles applied to the root element if `variant="text"`. */
+  /** Styles applied to the root element if `size="text"` or `variant="text"`. */
   text: string;
-  /** Styles applied to the root element if `variant="rectangular"`. */
+  /** Styles applied to the root element if `size="box"`. */
+  box: string;
+  /** Styles applied to the root element if `shape="rectangular"` or `variant="rectangular"`. */
   rectangular: string;
-  /** Styles applied to the root element if `variant="rounded"`. */
+  /** Styles applied to the root element if `shape="rounded"` or `variant="rounded"`. */
   rounded: string;
-  /** Styles applied to the root element if `variant="circular"`. */
+  /** Styles applied to the root element if `shape="circular"` or `variant="circular"`. */
   circular: string;
   /** Styles applied to the root element if `animation="pulse"`. */
   pulse: string;
@@ -33,6 +35,7 @@ export function getSkeletonUtilityClass(slot: string): string {
 const skeletonClasses: SkeletonClasses = generateUtilityClasses('MuiSkeleton', [
   'root',
   'text',
+  'box',
   'rectangular',
   'rounded',
   'circular',