diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-stepper/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-stepper/page.tsx
index 81bc13081eeb64..8e135c3b896a2e 100644
--- a/apps/pigment-css-next-app/src/app/material-ui/react-stepper/page.tsx
+++ b/apps/pigment-css-next-app/src/app/material-ui/react-stepper/page.tsx
@@ -7,7 +7,6 @@ import HorizontalLinearStepper from '../../../../../../docs/data/material/compon
 import HorizontalNonLinearStepper from '../../../../../../docs/data/material/components/steppers/HorizontalNonLinearStepper';
 import HorizontalStepperWithError from '../../../../../../docs/data/material/components/steppers/HorizontalStepperWithError';
 import ProgressMobileStepper from '../../../../../../docs/data/material/components/steppers/ProgressMobileStepper';
-import SwipeableTextMobileStepper from '../../../../../../docs/data/material/components/steppers/SwipeableTextMobileStepper';
 import TextMobileStepper from '../../../../../../docs/data/material/components/steppers/TextMobileStepper';
 import VerticalLinearStepper from '../../../../../../docs/data/material/components/steppers/VerticalLinearStepper';
 
@@ -56,12 +55,6 @@ export default function Steppers() {
           <ProgressMobileStepper />
         </div>
       </section>
-      <section>
-        <h2> Swipeable Text Mobile Stepper</h2>
-        <div className="demo-container">
-          <SwipeableTextMobileStepper />
-        </div>
-      </section>
       <section>
         <h2> Text Mobile Stepper</h2>
         <div className="demo-container">
diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-stepper.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-stepper.tsx
index 5f9cc1d0e683d6..5a080f5f941d29 100644
--- a/apps/pigment-css-vite-app/src/pages/material-ui/react-stepper.tsx
+++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-stepper.tsx
@@ -7,7 +7,6 @@ import HorizontalLinearStepper from '../../../../../docs/data/material/component
 import HorizontalNonLinearStepper from '../../../../../docs/data/material/components/steppers/HorizontalNonLinearStepper.tsx';
 import HorizontalStepperWithError from '../../../../../docs/data/material/components/steppers/HorizontalStepperWithError.tsx';
 import ProgressMobileStepper from '../../../../../docs/data/material/components/steppers/ProgressMobileStepper.tsx';
-import SwipeableTextMobileStepper from '../../../../../docs/data/material/components/steppers/SwipeableTextMobileStepper.tsx';
 import TextMobileStepper from '../../../../../docs/data/material/components/steppers/TextMobileStepper.tsx';
 import VerticalLinearStepper from '../../../../../docs/data/material/components/steppers/VerticalLinearStepper.tsx';
 
@@ -57,12 +56,6 @@ export default function Steppers() {
           <ProgressMobileStepper />
         </div>
       </section>
-      <section>
-        <h2> Swipeable Text Mobile Stepper</h2>
-        <div className="demo-container">
-          <SwipeableTextMobileStepper />
-        </div>
-      </section>
       <section>
         <h2> Text Mobile Stepper</h2>
         <div className="demo-container">
diff --git a/docs/data/material/components/floating-action-button/FloatingActionButtonZoom.js b/docs/data/material/components/floating-action-button/FloatingActionButtonZoom.js
index e4945c497d8d87..c8313b1319066e 100644
--- a/docs/data/material/components/floating-action-button/FloatingActionButtonZoom.js
+++ b/docs/data/material/components/floating-action-button/FloatingActionButtonZoom.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import SwipeableViews from 'react-swipeable-views';
 import { useTheme } from '@mui/material/styles';
 import AppBar from '@mui/material/AppBar';
 import Tabs from '@mui/material/Tabs';
@@ -66,10 +65,6 @@ export default function FloatingActionButtonZoom() {
     setValue(newValue);
   };
 
-  const handleChangeIndex = (index) => {
-    setValue(index);
-  };
-
   const transitionDuration = {
     enter: theme.transitions.duration.enteringScreen,
     exit: theme.transitions.duration.leavingScreen,
@@ -119,21 +114,15 @@ export default function FloatingActionButtonZoom() {
           <Tab label="Item Three" {...a11yProps(2)} />
         </Tabs>
       </AppBar>
-      <SwipeableViews
-        axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
-        index={value}
-        onChangeIndex={handleChangeIndex}
-      >
-        <TabPanel value={value} index={0} dir={theme.direction}>
-          Item One
-        </TabPanel>
-        <TabPanel value={value} index={1} dir={theme.direction}>
-          Item Two
-        </TabPanel>
-        <TabPanel value={value} index={2} dir={theme.direction}>
-          Item Three
-        </TabPanel>
-      </SwipeableViews>
+      <TabPanel value={value} index={0} dir={theme.direction}>
+        Item One
+      </TabPanel>
+      <TabPanel value={value} index={1} dir={theme.direction}>
+        Item Two
+      </TabPanel>
+      <TabPanel value={value} index={2} dir={theme.direction}>
+        Item Three
+      </TabPanel>
       {fabs.map((fab, index) => (
         <Zoom
           key={fab.color}
diff --git a/docs/data/material/components/floating-action-button/FloatingActionButtonZoom.tsx b/docs/data/material/components/floating-action-button/FloatingActionButtonZoom.tsx
index 135d4d5050f273..25b26c991f5409 100644
--- a/docs/data/material/components/floating-action-button/FloatingActionButtonZoom.tsx
+++ b/docs/data/material/components/floating-action-button/FloatingActionButtonZoom.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import SwipeableViews from 'react-swipeable-views';
 import { useTheme } from '@mui/material/styles';
 import AppBar from '@mui/material/AppBar';
 import Tabs from '@mui/material/Tabs';
@@ -67,10 +66,6 @@ export default function FloatingActionButtonZoom() {
     setValue(newValue);
   };
 
-  const handleChangeIndex = (index: number) => {
-    setValue(index);
-  };
-
   const transitionDuration = {
     enter: theme.transitions.duration.enteringScreen,
     exit: theme.transitions.duration.leavingScreen,
@@ -120,21 +115,15 @@ export default function FloatingActionButtonZoom() {
           <Tab label="Item Three" {...a11yProps(2)} />
         </Tabs>
       </AppBar>
-      <SwipeableViews
-        axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
-        index={value}
-        onChangeIndex={handleChangeIndex}
-      >
-        <TabPanel value={value} index={0} dir={theme.direction}>
-          Item One
-        </TabPanel>
-        <TabPanel value={value} index={1} dir={theme.direction}>
-          Item Two
-        </TabPanel>
-        <TabPanel value={value} index={2} dir={theme.direction}>
-          Item Three
-        </TabPanel>
-      </SwipeableViews>
+      <TabPanel value={value} index={0} dir={theme.direction}>
+        Item One
+      </TabPanel>
+      <TabPanel value={value} index={1} dir={theme.direction}>
+        Item Two
+      </TabPanel>
+      <TabPanel value={value} index={2} dir={theme.direction}>
+        Item Three
+      </TabPanel>
       {fabs.map((fab, index) => (
         <Zoom
           key={fab.color}
diff --git a/docs/data/material/components/steppers/SwipeableTextMobileStepper.js b/docs/data/material/components/steppers/SwipeableTextMobileStepper.js
deleted file mode 100644
index d7fd286fadf318..00000000000000
--- a/docs/data/material/components/steppers/SwipeableTextMobileStepper.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import MobileStepper from '@mui/material/MobileStepper';
-import Paper from '@mui/material/Paper';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
-import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
-import SwipeableViews from 'react-swipeable-views';
-import { autoPlay } from 'react-swipeable-views-utils';
-
-const AutoPlaySwipeableViews = autoPlay(SwipeableViews);
-
-const images = [
-  {
-    label: 'San Francisco – Oakland Bay Bridge, United States',
-    imgPath:
-      'https://images.unsplash.com/photo-1537944434965-cf4679d1a598?auto=format&fit=crop&w=400&h=250&q=60',
-  },
-  {
-    label: 'Bird',
-    imgPath:
-      'https://images.unsplash.com/photo-1538032746644-0212e812a9e7?auto=format&fit=crop&w=400&h=250&q=60',
-  },
-  {
-    label: 'Bali, Indonesia',
-    imgPath:
-      'https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250',
-  },
-  {
-    label: 'Goč, Serbia',
-    imgPath:
-      'https://images.unsplash.com/photo-1512341689857-198e7e2f3ca8?auto=format&fit=crop&w=400&h=250&q=60',
-  },
-];
-
-function SwipeableTextMobileStepper() {
-  const theme = useTheme();
-  const [activeStep, setActiveStep] = React.useState(0);
-  const maxSteps = images.length;
-
-  const handleNext = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep + 1);
-  };
-
-  const handleBack = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep - 1);
-  };
-
-  const handleStepChange = (step) => {
-    setActiveStep(step);
-  };
-
-  return (
-    <Box sx={{ maxWidth: 400, flexGrow: 1 }}>
-      <Paper
-        square
-        elevation={0}
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          height: 50,
-          pl: 2,
-          bgcolor: 'background.default',
-        }}
-      >
-        <Typography>{images[activeStep].label}</Typography>
-      </Paper>
-      <AutoPlaySwipeableViews
-        axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
-        index={activeStep}
-        onChangeIndex={handleStepChange}
-        enableMouseEvents
-      >
-        {images.map((step, index) => (
-          <div key={step.label}>
-            {Math.abs(activeStep - index) <= 2 ? (
-              <Box
-                component="img"
-                sx={{
-                  height: 255,
-                  display: 'block',
-                  maxWidth: 400,
-                  overflow: 'hidden',
-                  width: '100%',
-                }}
-                src={step.imgPath}
-                alt={step.label}
-              />
-            ) : null}
-          </div>
-        ))}
-      </AutoPlaySwipeableViews>
-      <MobileStepper
-        steps={maxSteps}
-        position="static"
-        activeStep={activeStep}
-        nextButton={
-          <Button
-            size="small"
-            onClick={handleNext}
-            disabled={activeStep === maxSteps - 1}
-          >
-            Next
-            {theme.direction === 'rtl' ? (
-              <KeyboardArrowLeft />
-            ) : (
-              <KeyboardArrowRight />
-            )}
-          </Button>
-        }
-        backButton={
-          <Button size="small" onClick={handleBack} disabled={activeStep === 0}>
-            {theme.direction === 'rtl' ? (
-              <KeyboardArrowRight />
-            ) : (
-              <KeyboardArrowLeft />
-            )}
-            Back
-          </Button>
-        }
-      />
-    </Box>
-  );
-}
-
-export default SwipeableTextMobileStepper;
diff --git a/docs/data/material/components/steppers/SwipeableTextMobileStepper.tsx b/docs/data/material/components/steppers/SwipeableTextMobileStepper.tsx
deleted file mode 100644
index 7eb9ecd57e5960..00000000000000
--- a/docs/data/material/components/steppers/SwipeableTextMobileStepper.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import MobileStepper from '@mui/material/MobileStepper';
-import Paper from '@mui/material/Paper';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
-import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
-import SwipeableViews from 'react-swipeable-views';
-import { autoPlay } from 'react-swipeable-views-utils';
-
-const AutoPlaySwipeableViews = autoPlay(SwipeableViews);
-
-const images = [
-  {
-    label: 'San Francisco – Oakland Bay Bridge, United States',
-    imgPath:
-      'https://images.unsplash.com/photo-1537944434965-cf4679d1a598?auto=format&fit=crop&w=400&h=250&q=60',
-  },
-  {
-    label: 'Bird',
-    imgPath:
-      'https://images.unsplash.com/photo-1538032746644-0212e812a9e7?auto=format&fit=crop&w=400&h=250&q=60',
-  },
-  {
-    label: 'Bali, Indonesia',
-    imgPath:
-      'https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250',
-  },
-  {
-    label: 'Goč, Serbia',
-    imgPath:
-      'https://images.unsplash.com/photo-1512341689857-198e7e2f3ca8?auto=format&fit=crop&w=400&h=250&q=60',
-  },
-];
-
-function SwipeableTextMobileStepper() {
-  const theme = useTheme();
-  const [activeStep, setActiveStep] = React.useState(0);
-  const maxSteps = images.length;
-
-  const handleNext = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep + 1);
-  };
-
-  const handleBack = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep - 1);
-  };
-
-  const handleStepChange = (step: number) => {
-    setActiveStep(step);
-  };
-
-  return (
-    <Box sx={{ maxWidth: 400, flexGrow: 1 }}>
-      <Paper
-        square
-        elevation={0}
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          height: 50,
-          pl: 2,
-          bgcolor: 'background.default',
-        }}
-      >
-        <Typography>{images[activeStep].label}</Typography>
-      </Paper>
-      <AutoPlaySwipeableViews
-        axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
-        index={activeStep}
-        onChangeIndex={handleStepChange}
-        enableMouseEvents
-      >
-        {images.map((step, index) => (
-          <div key={step.label}>
-            {Math.abs(activeStep - index) <= 2 ? (
-              <Box
-                component="img"
-                sx={{
-                  height: 255,
-                  display: 'block',
-                  maxWidth: 400,
-                  overflow: 'hidden',
-                  width: '100%',
-                }}
-                src={step.imgPath}
-                alt={step.label}
-              />
-            ) : null}
-          </div>
-        ))}
-      </AutoPlaySwipeableViews>
-      <MobileStepper
-        steps={maxSteps}
-        position="static"
-        activeStep={activeStep}
-        nextButton={
-          <Button
-            size="small"
-            onClick={handleNext}
-            disabled={activeStep === maxSteps - 1}
-          >
-            Next
-            {theme.direction === 'rtl' ? (
-              <KeyboardArrowLeft />
-            ) : (
-              <KeyboardArrowRight />
-            )}
-          </Button>
-        }
-        backButton={
-          <Button size="small" onClick={handleBack} disabled={activeStep === 0}>
-            {theme.direction === 'rtl' ? (
-              <KeyboardArrowRight />
-            ) : (
-              <KeyboardArrowLeft />
-            )}
-            Back
-          </Button>
-        }
-      />
-    </Box>
-  );
-}
-
-export default SwipeableTextMobileStepper;
diff --git a/docs/data/material/components/steppers/steppers.md b/docs/data/material/components/steppers/steppers.md
index 909ed00bd884f3..8b8181d6db1497 100644
--- a/docs/data/material/components/steppers/steppers.md
+++ b/docs/data/material/components/steppers/steppers.md
@@ -94,13 +94,6 @@ The current step and total number of steps are displayed as text.
 
 {{"demo": "TextMobileStepper.js", "bg": true}}
 
-### Text with carousel effect
-
-This demo uses
-[react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views) to create a carousel.
-
-{{"demo": "SwipeableTextMobileStepper.js", "bg": true}}
-
 ### Dots
 
 Use dots when the number of steps is small.
diff --git a/docs/data/material/components/tabs/FullWidthTabs.js b/docs/data/material/components/tabs/FullWidthTabs.js
index 8439038ffc54b5..2e8a08deba0e8a 100644
--- a/docs/data/material/components/tabs/FullWidthTabs.js
+++ b/docs/data/material/components/tabs/FullWidthTabs.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import SwipeableViews from 'react-swipeable-views';
 import { useTheme } from '@mui/material/styles';
 import AppBar from '@mui/material/AppBar';
 import Tabs from '@mui/material/Tabs';
@@ -49,10 +48,6 @@ export default function FullWidthTabs() {
     setValue(newValue);
   };
 
-  const handleChangeIndex = (index) => {
-    setValue(index);
-  };
-
   return (
     <Box sx={{ bgcolor: 'background.paper', width: 500 }}>
       <AppBar position="static">
@@ -69,21 +64,15 @@ export default function FullWidthTabs() {
           <Tab label="Item Three" {...a11yProps(2)} />
         </Tabs>
       </AppBar>
-      <SwipeableViews
-        axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
-        index={value}
-        onChangeIndex={handleChangeIndex}
-      >
-        <TabPanel value={value} index={0} dir={theme.direction}>
-          Item One
-        </TabPanel>
-        <TabPanel value={value} index={1} dir={theme.direction}>
-          Item Two
-        </TabPanel>
-        <TabPanel value={value} index={2} dir={theme.direction}>
-          Item Three
-        </TabPanel>
-      </SwipeableViews>
+      <TabPanel value={value} index={0} dir={theme.direction}>
+        Item One
+      </TabPanel>
+      <TabPanel value={value} index={1} dir={theme.direction}>
+        Item Two
+      </TabPanel>
+      <TabPanel value={value} index={2} dir={theme.direction}>
+        Item Three
+      </TabPanel>
     </Box>
   );
 }
diff --git a/docs/data/material/components/tabs/FullWidthTabs.tsx b/docs/data/material/components/tabs/FullWidthTabs.tsx
index 0b3b1c34d556cf..99ff253bb02f63 100644
--- a/docs/data/material/components/tabs/FullWidthTabs.tsx
+++ b/docs/data/material/components/tabs/FullWidthTabs.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import SwipeableViews from 'react-swipeable-views';
 import { useTheme } from '@mui/material/styles';
 import AppBar from '@mui/material/AppBar';
 import Tabs from '@mui/material/Tabs';
@@ -49,10 +48,6 @@ export default function FullWidthTabs() {
     setValue(newValue);
   };
 
-  const handleChangeIndex = (index: number) => {
-    setValue(index);
-  };
-
   return (
     <Box sx={{ bgcolor: 'background.paper', width: 500 }}>
       <AppBar position="static">
@@ -69,21 +64,15 @@ export default function FullWidthTabs() {
           <Tab label="Item Three" {...a11yProps(2)} />
         </Tabs>
       </AppBar>
-      <SwipeableViews
-        axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
-        index={value}
-        onChangeIndex={handleChangeIndex}
-      >
-        <TabPanel value={value} index={0} dir={theme.direction}>
-          Item One
-        </TabPanel>
-        <TabPanel value={value} index={1} dir={theme.direction}>
-          Item Two
-        </TabPanel>
-        <TabPanel value={value} index={2} dir={theme.direction}>
-          Item Three
-        </TabPanel>
-      </SwipeableViews>
+      <TabPanel value={value} index={0} dir={theme.direction}>
+        Item One
+      </TabPanel>
+      <TabPanel value={value} index={1} dir={theme.direction}>
+        Item Two
+      </TabPanel>
+      <TabPanel value={value} index={2} dir={theme.direction}>
+        Item Three
+      </TabPanel>
     </Box>
   );
 }
diff --git a/docs/data/material/components/tabs/tabs.md b/docs/data/material/components/tabs/tabs.md
index f75936d72dee57..443e2daf8cda99 100644
--- a/docs/data/material/components/tabs/tabs.md
+++ b/docs/data/material/components/tabs/tabs.md
@@ -67,7 +67,6 @@ Fixed tabs should be used with a limited number of tabs, and when a consistent p
 ### Full width
 
 The `variant="fullWidth"` prop should be used for smaller views.
-This demo also uses [react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views) to animate the Tab transition, and allowing tabs to be swiped on touch devices.
 
 {{"demo": "FullWidthTabs.js", "bg": true}}