diff --git a/.circleci/config.yml b/.circleci/config.yml
index 290ae1aec22cc8..392e1981059680 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -223,6 +223,9 @@ jobs:
       - run:
           name: '`yarn proptypes` changes committed?'
           command: git diff --exit-code
+      - run:
+          name: '`yarn rsc:build` changes committed?'
+          command: git diff --exit-code
       - run:
           name: Generate the documentation
           command: yarn docs:api
diff --git a/.eslintrc.js b/.eslintrc.js
index ce2431d9577b2c..93b9a674c28484 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -201,6 +201,7 @@ module.exports = {
     'react/no-invalid-html-attribute': 'off',
 
     'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }],
+    'lines-around-directive': 'off',
   },
   overrides: [
     {
diff --git a/docs/data/base/getting-started/quickstart/quickstart.md b/docs/data/base/getting-started/quickstart/quickstart.md
index cf26c8cda89e5e..8b68a19ecca748 100644
--- a/docs/data/base/getting-started/quickstart/quickstart.md
+++ b/docs/data/base/getting-started/quickstart/quickstart.md
@@ -2,6 +2,10 @@
 
 <p class="description">Get started with Base UI, a library of headless ("unstyled") React UI components and low-level hooks.</p>
 
+:::info
+If you're using Next.js 13.4 or later, check out the [Next.js App Router guide](/base-ui/guides/next-js-app-router/)
+:::
+
 ## Installation
 
 `@mui/base` is completely standalone – run one of the following commands to add Base UI to your React project:
diff --git a/docs/data/base/guides/next-js-app-router/next-js-app-router.md b/docs/data/base/guides/next-js-app-router/next-js-app-router.md
new file mode 100644
index 00000000000000..53cbd75777e329
--- /dev/null
+++ b/docs/data/base/guides/next-js-app-router/next-js-app-router.md
@@ -0,0 +1,198 @@
+# Next.js App Router
+
+<p class="description">Learn how to use Base UI with the Next.js App Router.</p>
+
+:::info
+Starting fresh on a new App Router-based project?
+
+Jump right into the code with this [example repo](https://github.com/mui/material-ui/blob/master/examples/base-next-app-router-ts).
+:::
+
+## Next.js and React Server Components
+
+The Next.js App Router implements React Server Components, a [new feature](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#changes-since-v1) introduced in React 18.
+
+To support the App Router, currently all components and hooks from Base UI and other MUI libraries are exported with the `"use client"` directive.
+
+:::warning
+React Server Components should not be conflated with the concept of server-side rendering (SSR).
+So-called Client Components are still server-rendered to HTML.
+
+For more details, see [this explanation](https://github.com/reactwg/server-components/discussions/4) of Client Components and SSR from the React Working Group.
+:::
+
+## Setting up Base UI with the App Router
+
+Base UI gives you the freedom to choose your own styling solution, so setting up a Next.js App Router project largely depends on what you choose.
+This guide covers Tailwind CSS, Emotion, and other CSS-in-JS solutions like styled-components.
+
+### Tailwind CSS
+
+Follow the [Tailwind CSS guide on working with Next.js](https://tailwindcss.com/docs/guides/nextjs), and be sure to add the `app` directory and other directories to `tailwind.config.js`, as shown below:
+
+```js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}'
+
+    // or if not using the `src` directory:
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+```
+
+Refer to this [example repo](https://github.com/mui/material-ui/blob/master/examples/base-next-app-router-tailwind-ts) for a full working demo of a Next.js 13 app using Base UI and Tailwind CSS.
+
+### Emotion
+
+If you're using Emotion, or something Emotion-based like MUI System, create a custom `ThemeRegistry` component that combines the Emotion `CacheProvider`, the Material UI `ThemeProvider`, and the `useServerInsertedHTML` hook from `next/navigation` as follows:
+
+```tsx
+// app/ThemeRegistry.tsx
+'use client';
+import createCache from '@emotion/cache';
+import { useServerInsertedHTML } from 'next/navigation';
+import { CacheProvider, ThemeProvider } from '@emotion/react';
+import theme from '/path/to/your/theme';
+
+// This implementation is from emotion-js
+// https://github.com/emotion-js/emotion/issues/2928#issuecomment-1319747902
+export default function ThemeRegistry(props) {
+  const { options, children } = props;
+
+  const [{ cache, flush }] = React.useState(() => {
+    const cache = createCache(options);
+    cache.compat = true;
+    const prevInsert = cache.insert;
+    let inserted: string[] = [];
+    cache.insert = (...args) => {
+      const serialized = args[1];
+      if (cache.inserted[serialized.name] === undefined) {
+        inserted.push(serialized.name);
+      }
+      return prevInsert(...args);
+    };
+    const flush = () => {
+      const prevInserted = inserted;
+      inserted = [];
+      return prevInserted;
+    };
+    return { cache, flush };
+  });
+
+  useServerInsertedHTML(() => {
+    const names = flush();
+    if (names.length === 0) {
+      return null;
+    }
+    let styles = '';
+    for (const name of names) {
+      styles += cache.inserted[name];
+    }
+    return (
+      <style
+        key={cache.key}
+        data-emotion={`${cache.key} ${names.join(' ')}`}
+        dangerouslySetInnerHTML={{
+          __html: styles,
+        }}
+      />
+    );
+  });
+
+  return (
+    <CacheProvider value={cache}>
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+    </CacheProvider>
+  );
+}
+
+// app/layout.js
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        <ThemeRegistry options={{ key: 'mui' }}>{children}</ThemeRegistry>
+      </body>
+    </html>
+  );
+}
+```
+
+If you need to further override theme styles (e.g. using CSS modules), Emotion provides the `prepend: true` option for `createCache` to reverse the injection order, so custom styles can override the theme without using `!important`.
+
+Currently, `prepend` does not work reliably with the App Router, but you can work around it by wrapping Emotion styles in a CSS `@layer` with a modification to the snippet above:
+
+```diff
+ useServerInsertedHTML(() => {
+   const names = flush();
+   if (names.length === 0) {
+     return null;
+   }
+   let styles = '';
+   for (const name of names) {
+     styles += cache.inserted[name];
+   }
+   return (
+     <style
+       key={cache.key}
+       data-emotion={`${cache.key} ${names.join(' ')}`}
+       dangerouslySetInnerHTML={{
+-        __html: styles,
++        __html: options.prepend ? `@layer emotion {${styles}}` : styles,
+       }}
+     />
+   );
+ });
+```
+
+### Other CSS-in-JS libraries
+
+To use Next.js with Base UI and styled-components or other CSS-in-JS solutions, follow the [Next.js doc on CSS-in-JS](https://nextjs.org/docs/app/building-your-application/styling/css-in-js).
+
+## Customization
+
+### Using callbacks for slot props
+
+A common customization method in Base UI is to pass a callback to slots in `slotProps` in order to apply dynamic props. For example, you might want to change the background color by applying a different class when a Button is disabled:
+
+```tsx
+// page.tsx
+
+export default function Page() {
+  return (
+    <>
+      {/* Next.js won't render this button without 'use-client'*/}
+      <Button
+        slotProps={{
+          root: (ownerState: ButtonOwnerState) => ({
+            className: ownerState.disabled ? 'bg-gray-400' : 'bg-blue-400',
+          }),
+        }}
+      >
+        Submit
+      </Button>
+
+      {/* Next.js can render this */}
+      <Button
+        slotProps={{
+          root: {
+            className: 'bg-gray-400',
+          },
+        }}
+      >
+        Return
+      </Button>
+    </>
+  );
+}
+```
+
+Unfortunately, **this does not work in a Server Component** since function props are [non-serializable](https://nextjs.org/docs/getting-started/react-essentials#passing-props-from-server-to-client-components-serialization).
+Instead, the Next.js team recommend moving components like these ["to the leaves"](https://nextjs.org/docs/getting-started/react-essentials#moving-client-components-to-the-leaves) to avoid this issue and improve overall performance.
diff --git a/docs/data/base/pages.ts b/docs/data/base/pages.ts
index 584511c135d432..007d98a6038f07 100644
--- a/docs/data/base/pages.ts
+++ b/docs/data/base/pages.ts
@@ -108,6 +108,10 @@ const pages = [
         pathname: '/base-ui/guides/overriding-component-structure',
         title: 'Overriding component structure',
       },
+      {
+        pathname: '/base-ui/guides/next-js-app-router',
+        title: 'Integrating with Next.js App Router',
+      },
     ],
   },
 ];
diff --git a/docs/data/joy/guides/next-js-app-router/next-js-app-router.md b/docs/data/joy/guides/next-js-app-router/next-js-app-router.md
new file mode 100644
index 00000000000000..73c4d7b685b1a3
--- /dev/null
+++ b/docs/data/joy/guides/next-js-app-router/next-js-app-router.md
@@ -0,0 +1,156 @@
+# Next.js App Router
+
+<p class="description">Learn how to use Joy UI with the Next.js App Router.</p>
+
+:::info
+Starting fresh on a new App Router-based project?
+
+Jump right into the code with this [example repo](https://github.com/mui/material-ui/blob/master/examples/joy-next-app-router-ts).
+:::
+
+## Next.js and React Server Components
+
+The Next.js App Router implements React Server Components, a [new feature](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#changes-since-v1) introduced in React 18.
+
+To support the App Router, currently all components and hooks from Joy UI and other MUI libraries are exported with the `"use client"` directive.
+
+:::warning
+React Server Components should not be conflated with the concept of server-side rendering (SSR).
+So-called Client Components are still server-rendered to HTML.
+
+For more details, see [this explanation](https://github.com/reactwg/server-components/discussions/4) of Client Components and SSR from the React Working Group.
+:::
+
+## Using Joy UI with the App Router
+
+To set up Joy UI, create a custom `ThemeRegistry` component that combines the Emotion `CacheProvider`, Joy UI's `CssVarsProvider` and the `useServerInsertedHTML` hook from `next/navigation` as follows:
+
+```tsx
+// app/ThemeRegistry.tsx
+'use client';
+import createCache from '@emotion/cache';
+import { useServerInsertedHTML } from 'next/navigation';
+import { CacheProvider } from '@emotion/react';
+import { CssVarsProvider } from '@mui/joy/styles';
+import CssBaseline from '@mui/joy/CssBaseline';
+import theme from '/path/to/custom/theme'; // OPTIONAL
+
+// This implementation is from emotion-js
+// https://github.com/emotion-js/emotion/issues/2928#issuecomment-1319747902
+export default function ThemeRegistry(props) {
+  const { options, children } = props;
+
+  const [{ cache, flush }] = React.useState(() => {
+    const cache = createCache(options);
+    cache.compat = true;
+    const prevInsert = cache.insert;
+    let inserted: string[] = [];
+    cache.insert = (...args) => {
+      const serialized = args[1];
+      if (cache.inserted[serialized.name] === undefined) {
+        inserted.push(serialized.name);
+      }
+      return prevInsert(...args);
+    };
+    const flush = () => {
+      const prevInserted = inserted;
+      inserted = [];
+      return prevInserted;
+    };
+    return { cache, flush };
+  });
+
+  useServerInsertedHTML(() => {
+    const names = flush();
+    if (names.length === 0) {
+      return null;
+    }
+    let styles = '';
+    for (const name of names) {
+      styles += cache.inserted[name];
+    }
+    return (
+      <style
+        key={cache.key}
+        data-emotion={`${cache.key} ${names.join(' ')}`}
+        dangerouslySetInnerHTML={{
+          __html: styles,
+        }}
+      />
+    );
+  });
+
+  return (
+    <CacheProvider value={cache}>
+      <CssVarsProvider theme={theme}>
+        {/* the custom theme is optional */}
+        <CssBaseline />
+        {children}
+      </CssVarsProvider>
+    </CacheProvider>
+  );
+}
+
+// app/layout.tsx
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        <ThemeRegistry options={{ key: 'joy' }}>{children}</ThemeRegistry>
+      </body>
+    </html>
+  );
+}
+```
+
+## Function props
+
+Props passed from server components—for example `page.js` or other routing files—must be [serializable](https://nextjs.org/docs/getting-started/react-essentials#passing-props-from-server-to-client-components-serialization).
+
+This works without any additional directives:
+
+```jsx
+// app/page.tsx
+import Sheet from '@mui/joy/Sheet';
+import Typography from '@mui/joy/Typography';
+
+export default function Page() {
+  return (
+    <>
+      <Sheet variant="outlined">
+        <Typography fontSize="sm">Hello World</Typography>
+      </Sheet>
+    </>
+  );
+}
+```
+
+:::error
+🚨 This code snippet _doesn't work_, because the Button's click handler is **non-serializable**:
+
+```tsx
+// page.tsx
+import Button from '@mui/joy/Button';
+import Sheet from '@mui/joy/Sheet';
+
+export default function Page() {
+  return (
+    <>
+      <Sheet variant="outlined">
+        {/* Next.js won't render this button without 'use-client' */}
+        <Button
+          variant="outlined"
+          onClick={() => {
+            console.log('handle click');
+          }}
+        >
+          Submit
+        </Button>
+      </Sheet>
+    </>
+  );
+}
+```
+
+Instead, the Next.js team recommend moving components like these ["to the leaves"](https://nextjs.org/docs/getting-started/react-essentials#moving-client-components-to-the-leaves) to avoid this issue and improve overall performance.
+:::
diff --git a/docs/data/joy/pages.ts b/docs/data/joy/pages.ts
index ca1d73de3b48d8..fcb39c47d2c263 100644
--- a/docs/data/joy/pages.ts
+++ b/docs/data/joy/pages.ts
@@ -156,6 +156,10 @@ const pages = [
         pathname: '/joy-ui/guides/using-icon-libraries',
         title: 'Using icon libraries',
       },
+      {
+        pathname: '/joy-ui/guides/next-js-app-router',
+        title: 'Integrating with Next.js App Router',
+      },
     ],
   },
 ];
diff --git a/docs/data/material/getting-started/installation/installation.md b/docs/data/material/getting-started/installation/installation.md
index 13b38e103ec9bb..dccf338e55ae91 100644
--- a/docs/data/material/getting-started/installation/installation.md
+++ b/docs/data/material/getting-started/installation/installation.md
@@ -2,6 +2,14 @@
 
 <p class="description">Install Material UI, the world's most popular React UI framework.</p>
 
+:::warning
+We are currently working on supporting React Server Components in Material UI.
+
+All components and hooks are exported as [Client Components](https://nextjs.org/docs/getting-started/react-essentials#client-components) with the `"use client"` directive.
+If you're using Next.js 13.4 or later, check out the [Next.js App Router guide](/material-ui/guides/next-js-app-router/)
+
+:::
+
 ## Default installation
 
 Run one of the following commands to add Material UI to your project:
diff --git a/docs/data/material/guides/next-js-app-router/next-js-app-router.md b/docs/data/material/guides/next-js-app-router/next-js-app-router.md
new file mode 100644
index 00000000000000..51bef576132fd0
--- /dev/null
+++ b/docs/data/material/guides/next-js-app-router/next-js-app-router.md
@@ -0,0 +1,233 @@
+# Next.js App Router
+
+<p class="description">Learn how to use Material UI with the Next.js App Router.</p>
+
+:::info
+Starting fresh on a new App Router-based project?
+
+Jump right into the code with this [example repo](https://github.com/mui/material-ui/blob/master/examples/material-next-app-router-ts).
+:::
+
+## Next.js and React Server Components
+
+The Next.js App Router implements React Server Components, a [new feature](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#changes-since-v1) introduced in React 18.
+
+To support the App Router, currently all components and hooks from MUI libraries (Material UI, Joy UI, Base UI etc.) are exported with the `"use client"` directive.
+
+:::warning
+React Server Components should not be conflated with the concept of server-side rendering (SSR).
+So-called Client Components are still server-rendered to HTML.
+
+For more details, see [this explanation](https://github.com/reactwg/server-components/discussions/4) of Client Components and SSR from the React Working Group.
+:::
+
+## Using Material UI with the default theme
+
+If you're using the default theme, you can add Material UI components to Next.js routing files such as `layout.js` or `page.js` (which are Server Components by default) without any additional configuration, as shown below:
+
+<!-- TODO: investigate whether it still needs an explicit <head/> to prevent FOUC https://github.com/mui/material-ui/issues/34905#issuecomment-1332040656 -->
+
+```jsx
+// app/layout.js - no directives needed
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+
+// app/page.js - no directives needed
+import Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import Container from "@mui/material/Container";
+import Typography from "@mui/material/Typography";
+
+export default function Home() {
+  return (
+    <main>
+      <Container>
+        <Box>
+          <Card>
+            <Typography variant="h2">Hello World ~</Typography>
+          </Card>
+        </Box>
+      </Container>
+    </main>
+  );
+}
+```
+
+## Using Material UI with a custom theme
+
+### Theme Registry
+
+To set up the theme context, create a custom `ThemeRegistry` component that combines the Emotion `CacheProvider`, the Material UI `ThemeProvider`, and the `useServerInsertedHTML` hook from `next/navigation` as follows:
+
+```tsx
+// app/ThemeRegistry.tsx
+'use client';
+import createCache from '@emotion/cache';
+import { useServerInsertedHTML } from 'next/navigation';
+import { CacheProvider } from '@emotion/react';
+import { ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import theme from '/path/to/your/theme';
+
+// This implementation is from emotion-js
+// https://github.com/emotion-js/emotion/issues/2928#issuecomment-1319747902
+export default function ThemeRegistry(props) {
+  const { options, children } = props;
+
+  const [{ cache, flush }] = React.useState(() => {
+    const cache = createCache(options);
+    cache.compat = true;
+    const prevInsert = cache.insert;
+    let inserted: string[] = [];
+    cache.insert = (...args) => {
+      const serialized = args[1];
+      if (cache.inserted[serialized.name] === undefined) {
+        inserted.push(serialized.name);
+      }
+      return prevInsert(...args);
+    };
+    const flush = () => {
+      const prevInserted = inserted;
+      inserted = [];
+      return prevInserted;
+    };
+    return { cache, flush };
+  });
+
+  useServerInsertedHTML(() => {
+    const names = flush();
+    if (names.length === 0) {
+      return null;
+    }
+    let styles = '';
+    for (const name of names) {
+      styles += cache.inserted[name];
+    }
+    return (
+      <style
+        key={cache.key}
+        data-emotion={`${cache.key} ${names.join(' ')}`}
+        dangerouslySetInnerHTML={{
+          __html: styles,
+        }}
+      />
+    );
+  });
+
+  return (
+    <CacheProvider value={cache}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </CacheProvider>
+  );
+}
+
+// app/layout.js
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        <ThemeRegistry options={{ key: 'mui' }}>{children}</ThemeRegistry>
+      </body>
+    </html>
+  );
+}
+```
+
+### CSS injection order
+
+<!-- https://github.com/emotion-js/emotion/issues/3059 -->
+
+By default, Emotion injects Material UI styles at the bottom of the HTML `<head>`, which gives them precedence over custom styles—for example if you' ar'e customizing Material UI with CSS modules, Tailwind CSS, or even plain CSS.
+
+Emotion provides the `prepend: true` option for `createCache` to reverse the injection order, so custom styles can override Material UI styles without using `!important`.
+
+Currently, `prepend` does not work reliably with the App Router, but you can work around it by wrapping Emotion styles in a CSS `@layer` with a modification to the snippet above:
+
+```diff
+ useServerInsertedHTML(() => {
+   const names = flush();
+   if (names.length === 0) {
+     return null;
+   }
+   let styles = '';
+   for (const name of names) {
+     styles += cache.inserted[name];
+   }
+   return (
+     <style
+       key={cache.key}
+       data-emotion={`${cache.key} ${names.join(' ')}`}
+       dangerouslySetInnerHTML={{
+-        __html: styles,
++        __html: options.prepend ? `@layer emotion {${styles}}` : styles,
+       }}
+     />
+   );
+ });
+```
+
+## Function props
+
+Props passed from Server Components—for example `page.js` or other routing files—must be [serializable](https://nextjs.org/docs/getting-started/react-essentials#passing-props-from-server-to-client-components-serialization).
+
+This works without any additional directives:
+
+```jsx
+// app/page.tsx
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
+
+export default function Page() {
+  return (
+    <>
+      <Container maxWidth="lg">
+        <Box>
+          <Card raised>
+            <Typography variant="h2">Hello World</Typography>
+          </Card>
+        </Box>
+      </Container>
+    </>
+  );
+}
+```
+
+:::error
+🚨 This code snippet _doesn't work_, because the Button's click handler is **non-serializable**:
+
+```tsx
+// page.tsx
+import Button from '@mui/material/Button';
+import Container from '@mui/material/Container';
+
+export default function Page() {
+  return (
+    <>
+      <Container maxWidth="lg">
+        {/* Next.js won't render this button without 'use-client' */}
+        <Button
+          variant="text"
+          onClick={() => {
+            console.log('handle click');
+          }}
+        >
+          Submit
+        </Button>
+      </Container>
+    </>
+  );
+}
+```
+
+Instead, the Next.js team recommend moving components like these ["to the leaves"](https://nextjs.org/docs/getting-started/react-essentials#moving-client-components-to-the-leaves) to avoid this issue and improve overall performance.
+:::
diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts
index 80cdb6191b0fd3..840a58ef39c60f 100644
--- a/docs/data/material/pages.ts
+++ b/docs/data/material/pages.ts
@@ -205,6 +205,10 @@ const pages: MuiPage[] = [
       { pathname: '/material-ui/guides/content-security-policy', title: 'Content Security Policy' },
       { pathname: '/material-ui/guides/right-to-left', title: 'Right-to-left' },
       { pathname: '/material-ui/guides/shadow-dom', title: 'Shadow DOM' },
+      {
+        pathname: '/material-ui/guides/next-js-app-router',
+        title: 'Integrating with Next.js App Router',
+      },
     ],
   },
   {
diff --git a/docs/pages/base-ui/guides/next-js-app-router.js b/docs/pages/base-ui/guides/next-js-app-router.js
new file mode 100644
index 00000000000000..f014e355697f53
--- /dev/null
+++ b/docs/pages/base-ui/guides/next-js-app-router.js
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import * as pageProps from 'docs/data/base/guides/next-js-app-router/next-js-app-router.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs {...pageProps} />;
+}
diff --git a/docs/pages/joy-ui/guides/next-js-app-router.js b/docs/pages/joy-ui/guides/next-js-app-router.js
new file mode 100644
index 00000000000000..de1b58b7aaf873
--- /dev/null
+++ b/docs/pages/joy-ui/guides/next-js-app-router.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/guides/next-js-app-router/next-js-app-router.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs {...pageProps} />;
+}
diff --git a/docs/pages/material-ui/guides/next-js-app-router.js b/docs/pages/material-ui/guides/next-js-app-router.js
new file mode 100644
index 00000000000000..0781075119120f
--- /dev/null
+++ b/docs/pages/material-ui/guides/next-js-app-router.js
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import * as pageProps from 'docs/data/material/guides/next-js-app-router/next-js-app-router.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs {...pageProps} />;
+}
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index 7940b5816da2f4..ecc1f95bf44350 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -300,6 +300,7 @@
     "/base-ui/guides": "How-to guides",
     "/base-ui/guides/working-with-tailwind-css": "Working with Tailwind CSS",
     "/base-ui/guides/overriding-component-structure": "Overriding component structure",
+    "/base-ui/guides/next-js-app-router": "Integrating with Next.js App Router",
     "/material-ui/getting-started-group": "Getting started",
     "/material-ui/getting-started": "Overview",
     "/material-ui/getting-started/installation": "Installation",
@@ -410,6 +411,7 @@
     "/material-ui/guides/content-security-policy": "Content Security Policy",
     "/material-ui/guides/right-to-left": "Right-to-left",
     "/material-ui/guides/shadow-dom": "Shadow DOM",
+    "/material-ui/guides/next-js-app-router": "Integrating with Next.js App Router",
     "/material-ui/experimental-api": "Experimental APIs",
     "/material-ui/experimental-api/classname-generator": "ClassName generator",
     "CSS theme variables": "CSS theme variables",
@@ -502,6 +504,7 @@
     "/joy-ui/guides": "How-to guides",
     "/joy-ui/guides/overriding-component-structure": "Overriding component structure",
     "/joy-ui/guides/using-joy-ui-and-material-ui-together": "Joy UI and Material UI together",
-    "/joy-ui/guides/using-icon-libraries": "Using icon libraries"
+    "/joy-ui/guides/using-icon-libraries": "Using icon libraries",
+    "/joy-ui/guides/next-js-app-router": "Integrating with Next.js App Router"
   }
 }
diff --git a/examples/base-next-app-router-tailwind-ts/.gitignore b/examples/base-next-app-router-tailwind-ts/.gitignore
new file mode 100644
index 00000000000000..8f322f0d8f4957
--- /dev/null
+++ b/examples/base-next-app-router-tailwind-ts/.gitignore
@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/examples/base-next-app-router-tailwind-ts/README.md b/examples/base-next-app-router-tailwind-ts/README.md
new file mode 100644
index 00000000000000..87a0e6f0ec6ddf
--- /dev/null
+++ b/examples/base-next-app-router-tailwind-ts/README.md
@@ -0,0 +1,43 @@
+# Base UI - Next.js App Router with Tailwind CSS example in TypeScript
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped using [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with Base UI installed and Tailwind CSS for styles.
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/mui/material-ui):
+
+<!-- #default-branch-switch -->
+
+```bash
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/base-next-app-router-tailwind-ts
+cd base-next-app-router-tailwind-ts
+```
+
+Install dependencies and run:
+
+```bash
+# npm
+npm install
+npm run dev
+
+# yarn
+yarn
+yarn dev
+
+# pnpm
+pnpm install
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This example uses [`next/font/google`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts#google-fonts) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about this example:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Customizing Base UI](https://mui.com/base-ui/getting-started/customization/) - strategies for styling and customizing Base UI.
diff --git a/examples/base-next-app-router-tailwind-ts/next.config.js b/examples/base-next-app-router-tailwind-ts/next.config.js
new file mode 100644
index 00000000000000..3d3bc9990d8b56
--- /dev/null
+++ b/examples/base-next-app-router-tailwind-ts/next.config.js
@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+};
+
+module.exports = nextConfig;
diff --git a/examples/base-next-app-router-tailwind-ts/package.json b/examples/base-next-app-router-tailwind-ts/package.json
new file mode 100644
index 00000000000000..52ba5b9ddd5337
--- /dev/null
+++ b/examples/base-next-app-router-tailwind-ts/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "base-next-app-router-tailwind-ts",
+  "version": "5.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "post-update": "echo \"codesandbox preview only, need an update\" && yarn upgrade --latest"
+  },
+  "dependencies": {
+    "@mui/base": "latest",
+    "clsx": "latest",
+    "next": "13.x",
+    "react": "18.x",
+    "react-dom": "18.x"
+  },
+  "devDependencies": {
+    "@types/node": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "autoprefixer": "latest",
+    "eslint": "latest",
+    "eslint-config-next": "latest",
+    "postcss": "latest",
+    "tailwindcss": "latest",
+    "typescript": "latest"
+  }
+}
diff --git a/examples/base-next-app-router-tailwind-ts/postcss.config.js b/examples/base-next-app-router-tailwind-ts/postcss.config.js
new file mode 100644
index 00000000000000..12a703d900da81
--- /dev/null
+++ b/examples/base-next-app-router-tailwind-ts/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/examples/base-next-app-router-tailwind-ts/public/.gitkeep b/examples/base-next-app-router-tailwind-ts/public/.gitkeep
new file mode 100644
index 00000000000000..e69de29bb2d1d6
diff --git a/examples/base-next-app-router-tailwind-ts/src/app/components.tsx b/examples/base-next-app-router-tailwind-ts/src/app/components.tsx
new file mode 100644
index 00000000000000..3fc2b86c631dc0
--- /dev/null
+++ b/examples/base-next-app-router-tailwind-ts/src/app/components.tsx
@@ -0,0 +1,158 @@
+'use client';
+import * as React from 'react';
+import clsx from 'clsx';
+import BaseSelect, { SelectProps, SelectOwnerState, SelectRootSlotProps } from '@mui/base/Select';
+import Option, { OptionProps, OptionOwnerState } from '@mui/base/Option';
+import BaseSlider, { SliderProps, SliderOwnerState } from '@mui/base/Slider';
+
+const SelectButton = React.forwardRef(function SelectButton<
+  TValue extends {},
+  Multiple extends boolean,
+>(props: SelectRootSlotProps<TValue, Multiple>, ref: React.ForwardedRef<HTMLButtonElement>) {
+  const { ownerState, ...other } = props;
+  return (
+    <button type="button" {...other} ref={ref}>
+      {other.children}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        className="text-base absolute h-full top-0 right-1"
+      >
+        <path d="m7 10 5 5 5-5H7z" />
+      </svg>
+    </button>
+  );
+});
+
+// the components exported from this file have function props which are non-serializable
+// therefore they are additionally wrapped with 'use client' here
+// https://nextjs.org/docs/getting-started/react-essentials#passing-props-from-server-to-client-components-serialization
+
+export function SelectOption(props: OptionProps<string>) {
+  const {
+    slotProps = {
+      root: {},
+    },
+    ...rest
+  } = props;
+  return (
+    <Option
+      slotProps={{
+        root: (ownerState: OptionOwnerState<string>) => ({
+          ...slotProps.root,
+          className: clsx(
+            'list-none p-2 rounded-[1px] cursor-pointer last-of-type:border-b-0',
+            ownerState.selected && 'bg-blue-100 text-blue-900',
+            ownerState.highlighted && 'bg-gray-100 text-gray-900',
+            ownerState.highlighted && ownerState.selected && 'bg-gray-700 text-gray-50',
+            ownerState.disabled ? 'text-gray-400' : 'hover:bg-gray-100, hover:text-gray-300',
+          ),
+        }),
+      }}
+      {...rest}
+    />
+  );
+}
+
+export const Select = React.forwardRef(function Select<TValue extends {}, Multiple extends boolean>(
+  props: SelectProps<TValue, Multiple>,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const {
+    slotProps = {
+      root: {},
+      listbox: {},
+      popper: {},
+    },
+    ...rest
+  } = props;
+  return (
+    <BaseSelect
+      {...rest}
+      ref={ref}
+      slots={{
+        root: SelectButton,
+        ...props.slots,
+      }}
+      slotProps={{
+        root: (ownerState: SelectOwnerState<string, false>) => ({
+          ...slotProps.root,
+          className: clsx(
+            'text-gray-300 text-sm box-border min-width-[72px] py-2 px-3 rounded-sm text-left leading-normal bg-gray-900 border-[0] font-medium relative hover:bg-gray-400 hover:text-gray-900',
+            ownerState.focusVisible &&
+              'border-blue-400 outline-[3px] outline-solid outline-blue-200',
+          ),
+        }),
+        listbox: {
+          ...slotProps.listbox,
+          className:
+            'text-sm box-border p-0 mb-3 rounded-sm overflow-auto outline-0 bg-[rgb(14,20,27)] border border-solid border-gray-700 text-gray-300 shadow-[0_1px_2px_#a0aab4] max-h-[240px]',
+        },
+        popper: {
+          ...slotProps.popper,
+          className: 'z-[1]',
+        },
+      }}
+    />
+  );
+});
+
+export const Slider = React.forwardRef(function Slider(
+  props: SliderProps,
+  ref: React.ForwardedRef<HTMLElement>,
+) {
+  const {
+    slotProps = {
+      root: {},
+      rail: {},
+      track: {},
+      thumb: {},
+      mark: {},
+      markLabel: {},
+      valueLabel: {},
+    },
+    ...rest
+  } = props;
+  return (
+    <BaseSlider
+      {...rest}
+      slotProps={{
+        root: (ownerState: SliderOwnerState) => ({
+          ...slotProps.root,
+          className: clsx(
+            'text-blue-500 h-1.5 w-full py-4 inline-block relative cursor-pointer touch-none top-[-1px] hover:opacity-100',
+            ownerState.disabled && 'pointer-events-none cursor-default text-gray-300 opacity-50',
+          ),
+        }),
+        rail: {
+          ...slotProps.rail,
+          className: 'block absolute w-full h-1.5 rounded-full bg-gray-700 opacity-40',
+        },
+        track: {
+          ...slotProps.track,
+          className: 'block absolute h-1.5 rounded-full bg-current',
+        },
+        thumb: {
+          ...slotProps.thumb,
+          className:
+            'absolute w-5 h-5 ml-[-8px] mt-[-7.5px] box-border rounded-[50%] outline-0 bg-white',
+          // TODO: add hover/focusVisible/active box-shadow
+        },
+        // TODO: where does markActive go?
+        mark: {
+          ...slotProps.mark,
+          className: 'absolute w-1 h-1 rounded-sm bg-current top-2/4 opacity-0',
+        },
+        markLabel: {
+          ...slotProps.markLabel,
+          className:
+            'text-[10px] font-extrabold uppercase text-gray-300 absolute top-5 mt-2 data-[index="1"]:translate-x-[-100%]',
+        },
+      }}
+      ref={ref}
+    />
+  );
+});
diff --git a/examples/base-next-app-router-tailwind-ts/src/app/favicon.ico b/examples/base-next-app-router-tailwind-ts/src/app/favicon.ico
new file mode 100644
index 00000000000000..718d6fea4835ec
Binary files /dev/null and b/examples/base-next-app-router-tailwind-ts/src/app/favicon.ico differ
diff --git a/examples/base-next-app-router-tailwind-ts/src/app/globals.css b/examples/base-next-app-router-tailwind-ts/src/app/globals.css
new file mode 100644
index 00000000000000..7621a618a6e407
--- /dev/null
+++ b/examples/base-next-app-router-tailwind-ts/src/app/globals.css
@@ -0,0 +1,28 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  /* This is an alternative to using function props and ownerState to style a component. The corresponding Switch component can be rendered in page.tsx without a use-client directive, but you cannot easily import the class names like in JS/TS.
+
+  However this may not be a viable pattern since you'll typically pass other non-serializable props like event handers to components, which means you will have to add your own 'use-client' boundaries in your app anyway. */
+  .switch {
+    &.Mui-checked {
+      .MuiSwitch-thumb {
+        @apply left-[20px] top-[2.5px] bg-white;
+      }
+
+      .MuiSwitch-track {
+        @apply bg-blue-400;
+      }
+    }
+
+    &.Mui-focusVisible .MuiSwitch-thumb {
+      @apply shadow-[0_0_1px_8px_rgba(0,0,0,0.25)];
+    }
+
+    &.Mui-disabled {
+      @apply opacity-40 cursor-not-allowed;
+    }
+  }
+}
diff --git a/examples/base-next-app-router-tailwind-ts/src/app/layout.tsx b/examples/base-next-app-router-tailwind-ts/src/app/layout.tsx
new file mode 100644
index 00000000000000..5315adf5e2dd39
--- /dev/null
+++ b/examples/base-next-app-router-tailwind-ts/src/app/layout.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { IBM_Plex_Sans } from 'next/font/google';
+import './globals.css';
+
+const font = IBM_Plex_Sans({ weight: ['400', '500', '700'], subsets: ['latin'] });
+
+export const metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body className={font.className}>{children}</body>
+    </html>
+  );
+}
diff --git a/examples/base-next-app-router-tailwind-ts/src/app/page.tsx b/examples/base-next-app-router-tailwind-ts/src/app/page.tsx
new file mode 100644
index 00000000000000..a1ce366514b028
--- /dev/null
+++ b/examples/base-next-app-router-tailwind-ts/src/app/page.tsx
@@ -0,0 +1,121 @@
+import * as React from 'react';
+import Switch from '@mui/base/Switch';
+import { Select, SelectOption, Slider } from './components';
+
+function Heading({ children }: { children: React.ReactNode }) {
+  return <h2 className="font-bold text-gray-400 uppercase text-base mt-3 mb-2">{children}</h2>;
+}
+
+function Section({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="grid grid-cols-3 grid-rows-[40px] gap-x-16 items-center min-h-[40px] py-1.5 border-t-[1px] border-solid border-gray-700">
+      {children}
+    </div>
+  );
+}
+
+function Label({ children }: { children: React.ReactNode }) {
+  return <h3 className="font-medium leading-none text-gray-300 col-span-2">{children}</h3>;
+}
+
+const HOURS = [
+  '12AM',
+  '1AM',
+  '2AM',
+  '3AM',
+  '4AM',
+  '5AM',
+  '6AM',
+  '7AM',
+  '8AM',
+  '9AM',
+  '10AM',
+  '11AM',
+  '12PM',
+  '1PM',
+  '2PM',
+  '3PM',
+  '4PM',
+  '5PM',
+  '6PM',
+  '7PM',
+  '8PM',
+  '9PM',
+  '10PM',
+  '11PM',
+];
+
+export default function Home() {
+  return (
+    <main className="flex justify-center items-center w-full h-screen">
+      <div className="bg-[rgb(14,20,27)] rounded-lg p-6">
+        <Heading>Night Mode</Heading>
+        <Section>
+          <Label>Schedule Night Mode</Label>
+          <Switch
+            slotProps={{
+              root: {
+                className:
+                  'switch col-span-1 relative inline-block w-[40px] h-[24px] cursor-pointer justify-self-end',
+              },
+              input: {
+                'aria-label': 'Schedule Night Mode',
+                className: 'cursor-inherit absolute w-full h-full top-0 left-0 opacity-0 z-[1] m-0',
+              },
+              track: {
+                className:
+                  'bg-gray-400 rounded-2xl block w-full h-full absolute border-[3px] border-solid border-[rgb(14,20,27)]',
+              },
+              thumb: {
+                className:
+                  'block w-[20px] h-[20px] top-[2.5px] left-[-2px] rounded-2xl bg-white relative',
+              },
+            }}
+            defaultChecked
+          />
+        </Section>
+
+        <Section>
+          <Label>Auto-Enable Between</Label>
+          <div className="col-span-1 grid grid-cols-[1fr_auto_1fr] items-center">
+            <Select defaultValue="9PM">
+              {HOURS.map((hour) => (
+                <SelectOption key={`from-${hour}`} value={hour}>
+                  {hour}
+                </SelectOption>
+              ))}
+            </Select>
+            <span className="text-gray-300 text-sm text-medium mx-2">and</span>
+            <Select defaultValue="6AM">
+              {HOURS.map((hour) => (
+                <SelectOption key={`to-${hour}`} value={hour}>
+                  {hour}
+                </SelectOption>
+              ))}
+            </Select>
+          </div>
+        </Section>
+
+        <Section>
+          <Label>Night Mode Tint</Label>
+          <div className="col-span-1 self-stretch">
+            <Slider
+              aria-label="Night mode tint"
+              defaultValue={37}
+              marks={[
+                {
+                  value: 0,
+                  label: 'Cool',
+                },
+                {
+                  value: 100,
+                  label: 'Warm',
+                },
+              ]}
+            />
+          </div>
+        </Section>
+      </div>
+    </main>
+  );
+}
diff --git a/examples/base-next-app-router-tailwind-ts/tailwind.config.js b/examples/base-next-app-router-tailwind-ts/tailwind.config.js
new file mode 100644
index 00000000000000..5464991fe0b6a6
--- /dev/null
+++ b/examples/base-next-app-router-tailwind-ts/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/app/**/*.{js,ts,jsx,tsx,mdx}', './src/components/**/*.{js,ts,jsx,tsx,mdx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/examples/base-next-app-router-tailwind-ts/tsconfig.json b/examples/base-next-app-router-tailwind-ts/tsconfig.json
new file mode 100644
index 00000000000000..0c7555fa765cc1
--- /dev/null
+++ b/examples/base-next-app-router-tailwind-ts/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/joy-next-app-router-ts/.gitignore b/examples/joy-next-app-router-ts/.gitignore
new file mode 100644
index 00000000000000..8f322f0d8f4957
--- /dev/null
+++ b/examples/joy-next-app-router-ts/.gitignore
@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/examples/joy-next-app-router-ts/README.md b/examples/joy-next-app-router-ts/README.md
new file mode 100644
index 00000000000000..a5e8eadaa6dbc7
--- /dev/null
+++ b/examples/joy-next-app-router-ts/README.md
@@ -0,0 +1,43 @@
+# Joy UI - Next.js App Router with TypeScript
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+Download the example [or clone the repo](https://github.com/mui/material-ui):
+
+<!-- #default-branch-switch -->
+
+```bash
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/joy-next-app-router-ts
+cd joy-next-app-router-ts
+```
+
+Install dependencies and run:
+
+```bash
+# npm
+npm install
+npm run dev
+
+# yarn
+yarn
+yarn dev
+
+# pnpm
+pnpm install
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your web browser to see the result.
+
+You can start editing the page by modifying `src/app/page.tsx`. The page auto-updates as you edit the file.
+
+This example uses [`next/font/google`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts#google-fonts) to automatically optimize and load Public Sans, a custom Google Font.
+
+## Learn More
+
+To learn more about this example:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Customizing Joy UI](https://mui.com/joy-ui/customization/approaches/) - approaches to customizing Joy UI.
diff --git a/examples/joy-next-app-router-ts/next.config.js b/examples/joy-next-app-router-ts/next.config.js
new file mode 100644
index 00000000000000..3d3bc9990d8b56
--- /dev/null
+++ b/examples/joy-next-app-router-ts/next.config.js
@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+};
+
+module.exports = nextConfig;
diff --git a/examples/joy-next-app-router-ts/package.json b/examples/joy-next-app-router-ts/package.json
new file mode 100644
index 00000000000000..f787f03882be40
--- /dev/null
+++ b/examples/joy-next-app-router-ts/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "joy-next-app-router-ts",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "post-update": "echo \"codesandbox preview only, need an update\" && yarn upgrade --latest"
+  },
+  "dependencies": {
+    "@emotion/cache": "latest",
+    "@emotion/react": "latest",
+    "@emotion/styled": "latest",
+    "@mui/joy": "latest",
+    "next": "13.x",
+    "react": "18.x",
+    "react-dom": "18.x"
+  },
+  "devDependencies": {
+    "@types/node": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "eslint": "latest",
+    "eslint-config-next": "latest",
+    "typescript": "latest"
+  }
+}
diff --git a/examples/joy-next-app-router-ts/public/.gitkeep b/examples/joy-next-app-router-ts/public/.gitkeep
new file mode 100644
index 00000000000000..e69de29bb2d1d6
diff --git a/examples/joy-next-app-router-ts/src/app/favicon.ico b/examples/joy-next-app-router-ts/src/app/favicon.ico
new file mode 100644
index 00000000000000..718d6fea4835ec
Binary files /dev/null and b/examples/joy-next-app-router-ts/src/app/favicon.ico differ
diff --git a/examples/joy-next-app-router-ts/src/app/layout.tsx b/examples/joy-next-app-router-ts/src/app/layout.tsx
new file mode 100644
index 00000000000000..954f4b78cc5794
--- /dev/null
+++ b/examples/joy-next-app-router-ts/src/app/layout.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Public_Sans } from 'next/font/google';
+import ThemeRegistry from '@/components/ThemeRegistry/ThemeRegistry';
+
+const publicSans = Public_Sans({ subsets: ['latin'] });
+
+export const metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body className={publicSans.className}>
+        <ThemeRegistry>{children}</ThemeRegistry>
+      </body>
+    </html>
+  );
+}
diff --git a/examples/joy-next-app-router-ts/src/app/page.tsx b/examples/joy-next-app-router-ts/src/app/page.tsx
new file mode 100644
index 00000000000000..8ea83be21dc3c6
--- /dev/null
+++ b/examples/joy-next-app-router-ts/src/app/page.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+import Sheet from '@mui/joy/Sheet';
+import Typography from '@mui/joy/Typography';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Input from '@mui/joy/Input';
+import Button from '@mui/joy/Button';
+import Link from '@mui/joy/Link';
+
+export default function Home() {
+  return (
+    <Sheet
+      sx={{
+        display: 'flex',
+        flexFlow: 'row nowrap',
+        justifyContent: 'center',
+        alignItems: 'center',
+        minHeight: '100vh',
+      }}
+    >
+      <Sheet
+        sx={{
+          width: 300,
+          mx: 'auto',
+          my: 4,
+          py: 3,
+          px: 2,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+          borderRadius: 'sm',
+          boxShadow: 'md',
+        }}
+        variant="outlined"
+      >
+        <div>
+          <Typography level="h4" component="h1">
+            <strong>Welcome back 👋</strong>
+          </Typography>
+          <Typography level="body2">Sign in to continue.</Typography>
+        </div>
+        <FormControl>
+          <FormLabel>Email</FormLabel>
+          <Input name="email" type="email" placeholder="johndoe@email.com" />
+        </FormControl>
+        <FormControl>
+          <FormLabel>Password</FormLabel>
+          <Input name="password" type="password" placeholder="password" />
+        </FormControl>
+
+        <Button sx={{ mt: 1 }}>Log in</Button>
+        <Typography
+          endDecorator={<Link href="/sign-up">Sign up</Link>}
+          fontSize="sm"
+          sx={{ alignSelf: 'center' }}
+        >
+          Don&apos;t have an account?
+        </Typography>
+      </Sheet>
+    </Sheet>
+  );
+}
diff --git a/examples/joy-next-app-router-ts/src/app/sign-up/page.tsx b/examples/joy-next-app-router-ts/src/app/sign-up/page.tsx
new file mode 100644
index 00000000000000..7a8883dc131dba
--- /dev/null
+++ b/examples/joy-next-app-router-ts/src/app/sign-up/page.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+import Sheet from '@mui/joy/Sheet';
+import Typography from '@mui/joy/Typography';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Input from '@mui/joy/Input';
+import Button from '@mui/joy/Button';
+import Link from '@mui/joy/Link';
+
+export default function SignUp() {
+  return (
+    <Sheet
+      sx={{
+        display: 'flex',
+        flexFlow: 'row nowrap',
+        justifyContent: 'center',
+        alignItems: 'center',
+        minHeight: '100vh',
+      }}
+    >
+      <Sheet
+        sx={{
+          width: 300,
+          mx: 'auto',
+          my: 4,
+          py: 3,
+          px: 2,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+          borderRadius: 'sm',
+          boxShadow: 'md',
+        }}
+        variant="outlined"
+      >
+        <div>
+          <Typography level="h4" component="h1">
+            <strong>Welcome 👋</strong>
+          </Typography>
+          <Typography level="body2">Sign up for an account.</Typography>
+        </div>
+        <FormControl>
+          <FormLabel>Email</FormLabel>
+          <Input name="email" type="email" placeholder="johndoe@email.com" />
+        </FormControl>
+        <FormControl>
+          <FormLabel>Password</FormLabel>
+          <Input name="password" type="password" placeholder="password" />
+        </FormControl>
+
+        <Button sx={{ mt: 1 }}>Create account</Button>
+        <Typography
+          endDecorator={<Link href="/">Log in</Link>}
+          fontSize="sm"
+          sx={{ alignSelf: 'center' }}
+        >
+          Already have an account?
+        </Typography>
+      </Sheet>
+    </Sheet>
+  );
+}
diff --git a/examples/material-next-app-router-ts/src/components/Theme/ThemeRegistry/EmotionCache.tsx b/examples/joy-next-app-router-ts/src/components/ThemeRegistry/EmotionCache.tsx
similarity index 95%
rename from examples/material-next-app-router-ts/src/components/Theme/ThemeRegistry/EmotionCache.tsx
rename to examples/joy-next-app-router-ts/src/components/ThemeRegistry/EmotionCache.tsx
index 3be27ae2e4cc74..2aeb43e64957c4 100644
--- a/examples/material-next-app-router-ts/src/components/Theme/ThemeRegistry/EmotionCache.tsx
+++ b/examples/joy-next-app-router-ts/src/components/ThemeRegistry/EmotionCache.tsx
@@ -18,7 +18,7 @@ export type NextAppDirEmotionCacheProviderProps = {
 };
 
 // This implementation is taken from https://github.com/garronej/tss-react/blob/main/src/next/appDir.tsx
-export function NextAppDirEmotionCacheProvider(props: NextAppDirEmotionCacheProviderProps) {
+export default function NextAppDirEmotionCacheProvider(props: NextAppDirEmotionCacheProviderProps) {
   const { options, CacheProvider = DefaultCacheProvider, children } = props;
 
   const [{ cache, flush }] = React.useState(() => {
diff --git a/examples/joy-next-app-router-ts/src/components/ThemeRegistry/ThemeRegistry.tsx b/examples/joy-next-app-router-ts/src/components/ThemeRegistry/ThemeRegistry.tsx
new file mode 100644
index 00000000000000..582920f7b742a6
--- /dev/null
+++ b/examples/joy-next-app-router-ts/src/components/ThemeRegistry/ThemeRegistry.tsx
@@ -0,0 +1,17 @@
+'use client';
+import * as React from 'react';
+import { CssVarsProvider } from '@mui/joy/styles';
+import CssBaseline from '@mui/joy/CssBaseline';
+import NextAppDirEmotionCacheProvider from './EmotionCache';
+import theme from './theme';
+
+export default function ThemeRegistry({ children }: { children: React.ReactNode }) {
+  return (
+    <NextAppDirEmotionCacheProvider options={{ key: 'joy' }}>
+      <CssVarsProvider theme={theme}>
+        <CssBaseline />
+        {children}
+      </CssVarsProvider>
+    </NextAppDirEmotionCacheProvider>
+  );
+}
diff --git a/examples/joy-next-app-router-ts/src/components/ThemeRegistry/theme.js b/examples/joy-next-app-router-ts/src/components/ThemeRegistry/theme.js
new file mode 100644
index 00000000000000..99dbe79cbd6685
--- /dev/null
+++ b/examples/joy-next-app-router-ts/src/components/ThemeRegistry/theme.js
@@ -0,0 +1,17 @@
+import { extendTheme } from '@mui/joy/styles';
+
+const theme = extendTheme({
+  components: {
+    JoyButton: {
+      styleOverrides: {
+        root: ({ ownerState }) => ({
+          ...(ownerState.color === 'primary' && {
+            backgroundColor: '#4338ca',
+          }),
+        }),
+      },
+    },
+  },
+});
+
+export default theme;
diff --git a/examples/joy-next-app-router-ts/tsconfig.json b/examples/joy-next-app-router-ts/tsconfig.json
new file mode 100644
index 00000000000000..0c7555fa765cc1
--- /dev/null
+++ b/examples/joy-next-app-router-ts/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/material-next-app-router-ts/README.md b/examples/material-next-app-router-ts/README.md
index 2be8929fb0e94f..9996e900e758e3 100644
--- a/examples/material-next-app-router-ts/README.md
+++ b/examples/material-next-app-router-ts/README.md
@@ -1,5 +1,7 @@
 # Material UI - Next.js App Router example in TypeScript
 
+This is a [Next.js](https://nextjs.org/) project bootstrapped using [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with Material UI installed.
+
 ## How to use
 
 Download the example [or clone the repo](https://github.com/mui/material-ui):
@@ -11,21 +13,31 @@ curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip
 cd material-next-app-router-ts
 ```
 
-Install it and run:
+Install dependencies and run:
 
 ```bash
+# npm
 npm install
 npm run dev
+
+# yarn
+yarn
+yarn dev
+
+# pnpm
+pnpm install
+pnpm dev
 ```
 
-## The idea behind the example
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-The project uses [Next.js](https://github.com/vercel/next.js), which is a framework for server-rendered React apps.
-It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5. If you prefer, you can [use styled-components instead](https://mui.com/material-ui/guides/interoperability/#styled-components).
+You can start editing the page by modifying `src/app/page.tsx`. The page auto-updates as you edit the file.
 
-## What's next?
+This example uses [`next/font/google`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts#google-fonts) to automatically optimize and load Roboto, a custom Google Font.
 
-<!-- #default-branch-switch -->
+## Learn More
+
+To learn more about this example:
 
-You now have a working example project.
-You can head back to the documentation, continuing browsing it from the [templates](https://mui.com/material-ui/getting-started/templates/) section.
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Customizing Material UI](https://mui.com/material-ui/customization/how-to-customize/) - approaches to customizing Material UI.
diff --git a/examples/material-next-app-router-ts/next.config.js b/examples/material-next-app-router-ts/next.config.js
index 78ff974e7e2f4e..bdb623cc18ba74 100644
--- a/examples/material-next-app-router-ts/next.config.js
+++ b/examples/material-next-app-router-ts/next.config.js
@@ -7,6 +7,16 @@ const nextConfig = {
       transform: '@mui/icons-material/{{member}}',
     },
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'source.unsplash.com',
+        port: '',
+        pathname: '/random',
+      },
+    ],
+  },
 };
 
 module.exports = nextConfig;
diff --git a/examples/material-next-app-router-ts/package.json b/examples/material-next-app-router-ts/package.json
index c1375cb7c48b24..f6cd3f9696c4d1 100644
--- a/examples/material-next-app-router-ts/package.json
+++ b/examples/material-next-app-router-ts/package.json
@@ -15,9 +15,9 @@
     "@emotion/styled": "latest",
     "@mui/icons-material": "latest",
     "@mui/material": "latest",
-    "next": "latest",
-    "react": "latest",
-    "react-dom": "latest"
+    "next": "13.x",
+    "react": "18.x",
+    "react-dom": "18.x"
   },
   "devDependencies": {
     "@types/node": "latest",
diff --git a/examples/material-next-app-router-ts/src/app/about/page.tsx b/examples/material-next-app-router-ts/src/app/about/page.tsx
deleted file mode 100644
index 96ffd6aaf99fb6..00000000000000
--- a/examples/material-next-app-router-ts/src/app/about/page.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import About from '@/layouts/About/About';
-
-export default function AboutPage() {
-  return <About />;
-}
diff --git a/examples/material-next-app-router-ts/src/app/fonts/fonts.ts b/examples/material-next-app-router-ts/src/app/fonts/fonts.ts
deleted file mode 100644
index 3aed094a9f319b..00000000000000
--- a/examples/material-next-app-router-ts/src/app/fonts/fonts.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// Fonts Example
-import { Inter } from 'next/font/google';
-
-const GoogleInterFont = Inter({ subsets: ['latin'] });
-
-export default GoogleInterFont;
-
-// Local Fonts example
-// more details here: https://nextjs.org/docs/app/building-your-application/optimizing/fonts#local-fonts
-// import localFont from 'next/font/local';
-// const LocalFont = localFont({src: [{path: './path-of-font-file-regular.woff', weight: '400', style: 'normal'}], fallback: ['Arial', 'sans-serif']})
-// export default LocalFont;
diff --git a/examples/material-next-app-router-ts/src/app/layout.tsx b/examples/material-next-app-router-ts/src/app/layout.tsx
index 0bf9d7a47e0df0..402472f26d706b 100644
--- a/examples/material-next-app-router-ts/src/app/layout.tsx
+++ b/examples/material-next-app-router-ts/src/app/layout.tsx
@@ -1,16 +1,115 @@
 import * as React from 'react';
-import ThemeRegistry from '@/components/Theme/ThemeRegistry/ThemeRegistry';
+import { Roboto } from 'next/font/google';
+import Link from 'next/link';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Drawer from '@mui/material/Drawer';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import HomeIcon from '@mui/icons-material/Home';
+import StarIcon from '@mui/icons-material/Star';
+import ChecklistIcon from '@mui/icons-material/Checklist';
+import SettingsIcon from '@mui/icons-material/Settings';
+import SupportIcon from '@mui/icons-material/Support';
+import LogoutIcon from '@mui/icons-material/Logout';
+import ThemeRegistry from '@/components/ThemeRegistry/ThemeRegistry';
 
 export const metadata = {
-  title: 'Next App with MUI5',
-  description: 'next app with mui5',
+  title: 'Next.js App Router + Material UI v5',
+  description: 'Next.js App Router + Material UI v5',
 };
 
+const roboto = Roboto({ weight: ['300', '400', '500', '700'], subsets: ['latin'] });
+
+const DRAWER_WIDTH = 240;
+
+const LINKS = [
+  { text: 'Home', href: '/', icon: HomeIcon },
+  { text: 'Starred', href: '/starred', icon: StarIcon },
+  { text: 'Tasks', href: '/tasks', icon: ChecklistIcon },
+];
+
+const PLACEHOLDER_LINKS = [
+  { text: 'Settings', icon: SettingsIcon },
+  { text: 'Support', icon: SupportIcon },
+  { text: 'Logout', icon: LogoutIcon },
+];
+
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body>
-        <ThemeRegistry>{children}</ThemeRegistry>
+      <body className={roboto.className}>
+        <ThemeRegistry>
+          <AppBar position="fixed" sx={{ zIndex: 2000 }}>
+            <Toolbar sx={{ backgroundColor: 'background.paper' }}>
+              <DashboardIcon sx={{ color: '#444', mr: 2, transform: 'translateY(-2px)' }} />
+              <Typography variant="h6" noWrap component="div" color="black">
+                Next.js App Router
+              </Typography>
+            </Toolbar>
+          </AppBar>
+          <Drawer
+            sx={{
+              width: DRAWER_WIDTH,
+              flexShrink: 0,
+              '& .MuiDrawer-paper': {
+                width: DRAWER_WIDTH,
+                boxSizing: 'border-box',
+                top: ['48px', '56px', '64px'],
+                height: 'auto',
+                bottom: 0,
+              },
+            }}
+            variant="permanent"
+            anchor="left"
+          >
+            <Divider />
+            <List>
+              {LINKS.map(({ text, href, icon: Icon }) => (
+                <ListItem key={href} disablePadding>
+                  <ListItemButton component={Link} href={href}>
+                    <ListItemIcon>
+                      <Icon />
+                    </ListItemIcon>
+                    <ListItemText primary={text} />
+                  </ListItemButton>
+                </ListItem>
+              ))}
+            </List>
+            <Divider sx={{ mt: 'auto' }} />
+            <List>
+              {PLACEHOLDER_LINKS.map(({ text, icon: Icon }) => (
+                <ListItem key={text} disablePadding>
+                  <ListItemButton>
+                    <ListItemIcon>
+                      <Icon />
+                    </ListItemIcon>
+                    <ListItemText primary={text} />
+                  </ListItemButton>
+                </ListItem>
+              ))}
+            </List>
+          </Drawer>
+          <Box
+            component="main"
+            sx={{
+              flexGrow: 1,
+              bgcolor: 'background.default',
+              ml: `${DRAWER_WIDTH}px`,
+              mt: ['48px', '56px', '64px'],
+              p: 3,
+            }}
+          >
+            {children}
+          </Box>
+        </ThemeRegistry>
       </body>
     </html>
   );
diff --git a/examples/material-next-app-router-ts/src/app/page.tsx b/examples/material-next-app-router-ts/src/app/page.tsx
index a91df75626a081..9c6d50b14b8e3f 100644
--- a/examples/material-next-app-router-ts/src/app/page.tsx
+++ b/examples/material-next-app-router-ts/src/app/page.tsx
@@ -1,6 +1,78 @@
 import * as React from 'react';
-import Home from '@/layouts/Home/Home';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Unstable_Grid2';
+import Drawer from '@mui/material/Drawer';
+import Typography from '@mui/material/Typography';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import MediaCard from '@/components/MediaCard';
 
-export default function RootPage() {
-  return <Home />;
+export default function HomePage() {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+      }}
+    >
+      <Box>
+        <Alert severity="info" sx={{ mt: 2, mb: 5 }}>
+          <AlertTitle>Hello 👋</AlertTitle>
+          This app uses the Next.js App Router and Material UI v5.
+        </Alert>
+
+        <Grid container rowSpacing={3} columnSpacing={3}>
+          <Grid xs={6}>
+            <MediaCard
+              heading="CMYK"
+              text="The CMYK color model (also known as process color, or four color) is a subtractive color model, based on the CMY color model, used in color printing, and is also used to describe the printing process itself."
+            />
+          </Grid>
+          <Grid xs={6}>
+            <MediaCard
+              heading="HSL and HSV"
+              text="HSL (for hue, saturation, lightness) and HSV (for hue, saturation, value; also known as HSB, for hue, saturation, brightness) are alternative representations of the RGB color model, designed in the 1970s by computer graphics researchers."
+            />
+          </Grid>
+          <Grid xs={6}>
+            <MediaCard
+              heading="RGB"
+              text="An RGB color space is any additive color space based on the RGB color model. RGB color spaces are commonly found describing the input signal to display devices such as television screens and computer monitors."
+            />
+          </Grid>
+          <Grid xs={6}>
+            <MediaCard
+              heading="CIELAB"
+              text="The CIELAB color space, also referred to as L*a*b*, was intended as a perceptually uniform space, where a given numerical change corresponds to a similar perceived change in color."
+            />
+          </Grid>
+        </Grid>
+      </Box>
+
+      <Drawer
+        sx={{
+          width: 320,
+          flexShrink: 0,
+          '& .MuiDrawer-paper': {
+            width: 320,
+            boxSizing: 'border-box',
+            top: ['48px', '56px', '64px'],
+            height: 'auto',
+            bottom: 0,
+          },
+        }}
+        variant="permanent"
+        anchor="right"
+      >
+        <List sx={{ px: 2 }}>
+          <ListItem disablePadding>
+            <Typography variant="overline" sx={{ fontWeight: 500 }}>
+              On this page
+            </Typography>
+          </ListItem>
+        </List>
+      </Drawer>
+    </Box>
+  );
 }
diff --git a/examples/material-next-app-router-ts/src/app/starred/page.tsx b/examples/material-next-app-router-ts/src/app/starred/page.tsx
new file mode 100644
index 00000000000000..84fe92c445045e
--- /dev/null
+++ b/examples/material-next-app-router-ts/src/app/starred/page.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Container from '@mui/material/Container';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+
+export default function StarredPage() {
+  return (
+    <Container>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Typography variant="body1" gutterBottom>
+          Starred Page
+        </Typography>
+      </Box>
+    </Container>
+  );
+}
diff --git a/examples/material-next-app-router-ts/src/app/tasks/page.tsx b/examples/material-next-app-router-ts/src/app/tasks/page.tsx
new file mode 100644
index 00000000000000..c69bddae328dfc
--- /dev/null
+++ b/examples/material-next-app-router-ts/src/app/tasks/page.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Container from '@mui/material/Container';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+
+export default function TasksPage() {
+  return (
+    <Container>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Typography variant="body1" gutterBottom>
+          Tasks Page
+        </Typography>
+      </Box>
+    </Container>
+  );
+}
diff --git a/examples/material-next-app-router-ts/src/components/CopyRight/Copyright.tsx b/examples/material-next-app-router-ts/src/components/CopyRight/Copyright.tsx
deleted file mode 100644
index 02dd5984cd85cb..00000000000000
--- a/examples/material-next-app-router-ts/src/components/CopyRight/Copyright.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import Typography from '@mui/material/Typography';
-import Link from '@mui/material/Link';
-
-export default function Copyright() {
-  return (
-    <Typography variant="body2" color="text.secondary" align="center">
-      {'Copyright © '}
-      <Link color="inherit" href="https://mui.com/">
-        Your Website
-      </Link>
-      {new Date().getFullYear()}.
-    </Typography>
-  );
-}
diff --git a/examples/material-next-app-router-ts/src/components/MediaCard.tsx b/examples/material-next-app-router-ts/src/components/MediaCard.tsx
new file mode 100644
index 00000000000000..7ac16ddc558cf9
--- /dev/null
+++ b/examples/material-next-app-router-ts/src/components/MediaCard.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import Image from 'next/image';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+
+export default function MediaCard({ heading, text }: { heading: string; text: string }) {
+  return (
+    <Card>
+      <Image
+        alt="Random image"
+        src="https://source.unsplash.com/random"
+        width={640}
+        height={480}
+        style={{
+          maxWidth: '100%',
+          height: '200px',
+          objectFit: 'cover',
+        }}
+      />
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          {heading}
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          {text}
+        </Typography>
+      </CardContent>
+      <CardActions>
+        <Button size="small">Share</Button>
+        <Button size="small">Learn More</Button>
+      </CardActions>
+    </Card>
+  );
+}
diff --git a/examples/material-next-app-router-ts/src/components/ProTip/ProTip.tsx b/examples/material-next-app-router-ts/src/components/ProTip/ProTip.tsx
deleted file mode 100644
index 746aeb8ce5a60e..00000000000000
--- a/examples/material-next-app-router-ts/src/components/ProTip/ProTip.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import Typography from '@mui/material/Typography';
-import Link from '@mui/material/Link';
-import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
-
-function LightBulbIcon(props: SvgIconProps) {
-  return (
-    <SvgIcon {...props}>
-      <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
-    </SvgIcon>
-  );
-}
-
-export default function ProTip() {
-  return (
-    <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
-      <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
-      Pro tip: See more <Link href="https://mui.com/getting-started/templates/">templates</Link> in
-      the MUI documentation.
-    </Typography>
-  );
-}
diff --git a/examples/material-next-app-router-ts/src/components/Theme/ThemeRegistry/theme.ts b/examples/material-next-app-router-ts/src/components/Theme/ThemeRegistry/theme.ts
deleted file mode 100644
index 59a9cce95f27a7..00000000000000
--- a/examples/material-next-app-router-ts/src/components/Theme/ThemeRegistry/theme.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-'use client';
-
-import { createTheme } from '@mui/material/styles';
-import GoogleInterFont from '@/app/fonts/fonts';
-
-// When needed::: first argument is needed if you have common enterprise theme, and second argument is to override your enterprise theme.
-// apply fonts to all other typography options like headings, subtitles, etc...
-const defaultTheme = createTheme({
-  typography: {
-    fontFamily: GoogleInterFont.style.fontFamily,
-    body1: { fontFamily: GoogleInterFont.style.fontFamily },
-    body2: { fontFamily: GoogleInterFont.style.fontFamily },
-  },
-});
-
-export default defaultTheme;
diff --git a/examples/material-next-app-router-ts/src/components/ThemeRegistry/EmotionCache.tsx b/examples/material-next-app-router-ts/src/components/ThemeRegistry/EmotionCache.tsx
new file mode 100644
index 00000000000000..2aeb43e64957c4
--- /dev/null
+++ b/examples/material-next-app-router-ts/src/components/ThemeRegistry/EmotionCache.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import * as React from 'react';
+import createCache from '@emotion/cache';
+import { useServerInsertedHTML } from 'next/navigation';
+import { CacheProvider as DefaultCacheProvider } from '@emotion/react';
+import type { EmotionCache, Options as OptionsOfCreateCache } from '@emotion/cache';
+
+export type NextAppDirEmotionCacheProviderProps = {
+  /** This is the options passed to createCache() from 'import createCache from "@emotion/cache"' */
+  options: Omit<OptionsOfCreateCache, 'insertionPoint'>;
+  /** By default <CacheProvider /> from 'import { CacheProvider } from "@emotion/react"' */
+  CacheProvider?: (props: {
+    value: EmotionCache;
+    children: React.ReactNode;
+  }) => React.JSX.Element | null;
+  children: React.ReactNode;
+};
+
+// This implementation is taken from https://github.com/garronej/tss-react/blob/main/src/next/appDir.tsx
+export default function NextAppDirEmotionCacheProvider(props: NextAppDirEmotionCacheProviderProps) {
+  const { options, CacheProvider = DefaultCacheProvider, children } = props;
+
+  const [{ cache, flush }] = React.useState(() => {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const cache = createCache(options);
+    cache.compat = true;
+    const prevInsert = cache.insert;
+    let inserted: string[] = [];
+    cache.insert = (...args) => {
+      const serialized = args[1];
+      if (cache.inserted[serialized.name] === undefined) {
+        inserted.push(serialized.name);
+      }
+      return prevInsert(...args);
+    };
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const flush = () => {
+      const prevInserted = inserted;
+      inserted = [];
+      return prevInserted;
+    };
+    return { cache, flush };
+  });
+
+  useServerInsertedHTML(() => {
+    const names = flush();
+    if (names.length === 0) {
+      return null;
+    }
+    let styles = '';
+    // eslint-disable-next-line no-restricted-syntax
+    for (const name of names) {
+      styles += cache.inserted[name];
+    }
+    return (
+      <style
+        key={cache.key}
+        data-emotion={`${cache.key} ${names.join(' ')}`}
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{
+          __html: styles,
+        }}
+      />
+    );
+  });
+
+  return <CacheProvider value={cache}>{children}</CacheProvider>;
+}
diff --git a/examples/material-next-app-router-ts/src/components/Theme/ThemeRegistry/ThemeRegistry.tsx b/examples/material-next-app-router-ts/src/components/ThemeRegistry/ThemeRegistry.tsx
similarity index 85%
rename from examples/material-next-app-router-ts/src/components/Theme/ThemeRegistry/ThemeRegistry.tsx
rename to examples/material-next-app-router-ts/src/components/ThemeRegistry/ThemeRegistry.tsx
index f5cd20e832226e..ea47d771cdc7b7 100644
--- a/examples/material-next-app-router-ts/src/components/Theme/ThemeRegistry/ThemeRegistry.tsx
+++ b/examples/material-next-app-router-ts/src/components/ThemeRegistry/ThemeRegistry.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
-import { NextAppDirEmotionCacheProvider } from '@/components/Theme/ThemeRegistry/EmotionCache';
+import NextAppDirEmotionCacheProvider from './EmotionCache';
 import theme from './theme';
 
 export default function ThemeRegistry({ children }: { children: React.ReactNode }) {
diff --git a/examples/material-next-app-router-ts/src/components/ThemeRegistry/theme.ts b/examples/material-next-app-router-ts/src/components/ThemeRegistry/theme.ts
new file mode 100644
index 00000000000000..6fd270b00ead62
--- /dev/null
+++ b/examples/material-next-app-router-ts/src/components/ThemeRegistry/theme.ts
@@ -0,0 +1,20 @@
+import { createTheme } from '@mui/material/styles';
+
+const defaultTheme = createTheme({
+  palette: {
+    mode: 'light',
+  },
+  components: {
+    MuiAlert: {
+      styleOverrides: {
+        root: ({ ownerState }) => ({
+          ...(ownerState.severity === 'info' && {
+            backgroundColor: '#60a5fa',
+          }),
+        }),
+      },
+    },
+  },
+});
+
+export default defaultTheme;
diff --git a/examples/material-next-app-router-ts/src/layouts/About/About.tsx b/examples/material-next-app-router-ts/src/layouts/About/About.tsx
deleted file mode 100644
index 7392f26d3d41f0..00000000000000
--- a/examples/material-next-app-router-ts/src/layouts/About/About.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import Container from '@mui/material/Container';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import Link from 'next/link';
-import ProTip from '@/components/ProTip/ProTip';
-import Copyright from '@/components/CopyRight/Copyright';
-
-export default function About() {
-  return (
-    <Container maxWidth="lg">
-      <Box
-        sx={{
-          my: 4,
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-      >
-        <Typography variant="h4" component="h1" gutterBottom>
-          Material UI - Next.js example using App Router in TypeScript
-        </Typography>
-        <Link href="/">Go to the main page</Link>
-        <ProTip />
-        <Copyright />
-      </Box>
-    </Container>
-  );
-}
diff --git a/examples/material-next-app-router-ts/src/layouts/Home/Home.tsx b/examples/material-next-app-router-ts/src/layouts/Home/Home.tsx
deleted file mode 100644
index 436d7c1b686065..00000000000000
--- a/examples/material-next-app-router-ts/src/layouts/Home/Home.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import Container from '@mui/material/Container';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import Copyright from '@/components/CopyRight/Copyright';
-import ProTip from '@/components/ProTip/ProTip';
-import Link from 'next/link';
-
-export default function Home() {
-  return (
-    <Container maxWidth="lg">
-      <Box
-        sx={{
-          my: 4,
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-      >
-        <Typography variant="h4" component="h1" gutterBottom>
-          Material UI - Next.js example using App Router in TypeScript
-        </Typography>
-        <Link href="/about">Go to the about page</Link>
-        <ProTip />
-        <Copyright />
-      </Box>
-    </Container>
-  );
-}
diff --git a/package.json b/package.json
index 0d90a593e776e6..7f8f624395d3a8 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "docs:typescript:formatted": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/formattedTSDemos",
     "docs:mdicons:synonyms": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js,.mjs\" ./docs/scripts/updateIconSynonyms && yarn prettier",
     "extract-error-codes": "cross-env MUI_EXTRACT_ERROR_CODES=true lerna run --parallel build:modern",
+    "rsc:build": "ts-node ./packages/rsc-builder/buildRsc.ts",
     "template:screenshot": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/generateTemplateScreenshots",
     "install:codesandbox": "PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 yarn install --ignore-engines",
     "jsonlint": "node ./scripts/jsonlint.mjs",
diff --git a/packages/api-docs-builder/buildApi.ts b/packages/api-docs-builder/buildApi.ts
index 4853ca4369cfec..e98f511e32e2a7 100644
--- a/packages/api-docs-builder/buildApi.ts
+++ b/packages/api-docs-builder/buildApi.ts
@@ -207,6 +207,7 @@ async function run(argv: yargs.ArgumentsCamelCase<CommandOptions>) {
           if (
             component.filename.includes('ThemeProvider') ||
             component.filename.includes('CssVarsProvider') ||
+            (component.filename.includes('mui-material') && component.filename.includes('Grid2')) ||
             (component.filename.includes('mui-joy') &&
               // Box's demo isn't ready
               // Container's demo isn't ready
diff --git a/packages/api-docs-builder/utils/findComponents.ts b/packages/api-docs-builder/utils/findComponents.ts
index ddc15d4f08e01b..df1d562f04d460 100644
--- a/packages/api-docs-builder/utils/findComponents.ts
+++ b/packages/api-docs-builder/utils/findComponents.ts
@@ -1,14 +1,18 @@
 import fs from 'fs';
 import path from 'path';
+import findIndexFile from './findIndexFile';
 
-const componentRegex = /^(Unstable_)?([A-Z][a-z]+)+\.(js|tsx)/;
+const componentRegex = /^(Unstable_)?([A-Z][a-z]+)+2?\.(js|tsx)/;
 
 /**
  * Returns the component source in a flat array.
  * @param {string} directory
- * @param {Array<{ filename: string }>} components
+ * @param {Array<{ filename: string, indexFilename: string }>} components
  */
-export default function findComponents(directory: string, components: { filename: string }[] = []) {
+export default function findComponents(
+  directory: string,
+  components: { filename: string; indexFilename: string | null }[] = [],
+) {
   const items = fs.readdirSync(directory);
 
   items.forEach((item) => {
@@ -23,8 +27,11 @@ export default function findComponents(directory: string, components: { filename
       return;
     }
 
+    const indexFile = findIndexFile(directory);
+
     components.push({
       filename: itemPath,
+      ...indexFile,
     });
   });
 
diff --git a/packages/api-docs-builder/utils/findHooks.ts b/packages/api-docs-builder/utils/findHooks.ts
index 758c76bf2cee74..d6cdb943fd6cce 100644
--- a/packages/api-docs-builder/utils/findHooks.ts
+++ b/packages/api-docs-builder/utils/findHooks.ts
@@ -1,5 +1,6 @@
 import fs from 'fs';
 import path from 'path';
+import findIndexFile from './findIndexFile';
 
 const hooksRegexp = /use([A-Z][a-z]+)+\.(js|tsx|ts)/;
 
@@ -8,7 +9,10 @@ const hooksRegexp = /use([A-Z][a-z]+)+\.(js|tsx|ts)/;
  * @param {string} directory
  * @param {Array<{ filename: string }>} hooks
  */
-export default function findHooks(directory: string, hooks: { filename: string }[] = []) {
+export default function findHooks(
+  directory: string,
+  hooks: { filename: string; indexFilename: string | null }[] = [],
+) {
   const items = fs.readdirSync(directory);
 
   items.forEach((item) => {
@@ -23,8 +27,11 @@ export default function findHooks(directory: string, hooks: { filename: string }
       return;
     }
 
+    const indexFile = findIndexFile(directory);
+
     hooks.push({
       filename: itemPath,
+      ...indexFile,
     });
   });
 
diff --git a/packages/api-docs-builder/utils/findIndexFile.ts b/packages/api-docs-builder/utils/findIndexFile.ts
new file mode 100644
index 00000000000000..26c6e6b798d811
--- /dev/null
+++ b/packages/api-docs-builder/utils/findIndexFile.ts
@@ -0,0 +1,23 @@
+import fs from 'fs';
+import path from 'path';
+
+const indexFileRegex = /^index.(js|ts)$/;
+
+/**
+ * Returns index.js/ts in any directory or null
+ * @param {string} directory
+ */
+export default function getIndexFile(directory: string) {
+  const items = fs.readdirSync(directory);
+
+  const indexFile = items.reduce((prev, curr) => {
+    if (!indexFileRegex.test(curr)) {
+      return prev;
+    }
+    return curr;
+  }, '');
+
+  return {
+    indexFilename: indexFile ? path.join(directory, indexFile) : null,
+  };
+}
diff --git a/packages/mui-base/src/Badge/Badge.tsx b/packages/mui-base/src/Badge/Badge.tsx
index b1b4366909b84d..2ac6dcf1b25bdc 100644
--- a/packages/mui-base/src/Badge/Badge.tsx
+++ b/packages/mui-base/src/Badge/Badge.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { PolymorphicComponent } from '../utils/PolymorphicComponent';
diff --git a/packages/mui-base/src/Badge/index.ts b/packages/mui-base/src/Badge/index.ts
index fbf464c1e10aed..ec37dae25d443c 100644
--- a/packages/mui-base/src/Badge/index.ts
+++ b/packages/mui-base/src/Badge/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Badge';
 
 export * from './Badge.types';
diff --git a/packages/mui-base/src/Button/Button.tsx b/packages/mui-base/src/Button/Button.tsx
index 09a13908e81bb5..2cc9286a9dfbbc 100644
--- a/packages/mui-base/src/Button/Button.tsx
+++ b/packages/mui-base/src/Button/Button.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { PolymorphicComponent } from '../utils/PolymorphicComponent';
diff --git a/packages/mui-base/src/Button/index.ts b/packages/mui-base/src/Button/index.ts
index cada058d73d00a..b14f8a3dea396e 100644
--- a/packages/mui-base/src/Button/index.ts
+++ b/packages/mui-base/src/Button/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Button';
 export { default as buttonClasses } from './buttonClasses';
 export * from './buttonClasses';
diff --git a/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx b/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx
index bfd64dd4cc1b10..9002e9e7eb1296 100644
--- a/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx
+++ b/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import {
diff --git a/packages/mui-base/src/ClickAwayListener/index.ts b/packages/mui-base/src/ClickAwayListener/index.ts
index b701cb14342b2e..849085dffb828e 100644
--- a/packages/mui-base/src/ClickAwayListener/index.ts
+++ b/packages/mui-base/src/ClickAwayListener/index.ts
@@ -1,2 +1,3 @@
+'use client';
 export { default } from './ClickAwayListener';
 export * from './ClickAwayListener';
diff --git a/packages/mui-base/src/FocusTrap/FocusTrap.tsx b/packages/mui-base/src/FocusTrap/FocusTrap.tsx
index feccaa573e4e1a..bc0f81e4ea2710 100644
--- a/packages/mui-base/src/FocusTrap/FocusTrap.tsx
+++ b/packages/mui-base/src/FocusTrap/FocusTrap.tsx
@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable consistent-return, jsx-a11y/no-noninteractive-tabindex */
 import * as React from 'react';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-base/src/FocusTrap/index.ts b/packages/mui-base/src/FocusTrap/index.ts
index 93f0fe84d13a4a..dfa3bf3ab91d61 100644
--- a/packages/mui-base/src/FocusTrap/index.ts
+++ b/packages/mui-base/src/FocusTrap/index.ts
@@ -1,2 +1,3 @@
+'use client';
 export { default } from './FocusTrap';
 export * from './FocusTrap.types';
diff --git a/packages/mui-base/src/FormControl/FormControl.tsx b/packages/mui-base/src/FormControl/FormControl.tsx
index 04bcb7b340adb3..771ad6cade02c8 100644
--- a/packages/mui-base/src/FormControl/FormControl.tsx
+++ b/packages/mui-base/src/FormControl/FormControl.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useControlled as useControlled } from '@mui/utils';
diff --git a/packages/mui-base/src/FormControl/index.ts b/packages/mui-base/src/FormControl/index.ts
index f976434c36191c..9f45da6933e4e4 100644
--- a/packages/mui-base/src/FormControl/index.ts
+++ b/packages/mui-base/src/FormControl/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './FormControl';
 
 export { default as FormControlContext } from './FormControlContext';
diff --git a/packages/mui-base/src/FormControl/useFormControlContext.ts b/packages/mui-base/src/FormControl/useFormControlContext.ts
index 51757319b8d4be..7da53dd883f8eb 100644
--- a/packages/mui-base/src/FormControl/useFormControlContext.ts
+++ b/packages/mui-base/src/FormControl/useFormControlContext.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { UseFormControlContextReturnValue } from './FormControl.types';
 import FormControlContext from './FormControlContext';
diff --git a/packages/mui-base/src/Input/Input.tsx b/packages/mui-base/src/Input/Input.tsx
index 15692f75d14f4d..3203927d390c45 100644
--- a/packages/mui-base/src/Input/Input.tsx
+++ b/packages/mui-base/src/Input/Input.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { PolymorphicComponent } from '../utils/PolymorphicComponent';
diff --git a/packages/mui-base/src/Input/index.ts b/packages/mui-base/src/Input/index.ts
index 93e565dc11890b..09b7dbf557187a 100644
--- a/packages/mui-base/src/Input/index.ts
+++ b/packages/mui-base/src/Input/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Input';
 
 export * from './Input.types';
diff --git a/packages/mui-base/src/Menu/Menu.tsx b/packages/mui-base/src/Menu/Menu.tsx
index 19f82c20a5dcf2..a197181898ddfe 100644
--- a/packages/mui-base/src/Menu/Menu.tsx
+++ b/packages/mui-base/src/Menu/Menu.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { HTMLElementType, refType } from '@mui/utils';
diff --git a/packages/mui-base/src/MenuItem/MenuItem.tsx b/packages/mui-base/src/MenuItem/MenuItem.tsx
index b73c2a138a753c..c4805ac9c77e83 100644
--- a/packages/mui-base/src/MenuItem/MenuItem.tsx
+++ b/packages/mui-base/src/MenuItem/MenuItem.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { PolymorphicComponent } from '../utils/PolymorphicComponent';
diff --git a/packages/mui-base/src/Modal/Modal.tsx b/packages/mui-base/src/Modal/Modal.tsx
index 6aec9f3ff95e00..b7e6558cf57a67 100644
--- a/packages/mui-base/src/Modal/Modal.tsx
+++ b/packages/mui-base/src/Modal/Modal.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import {
diff --git a/packages/mui-base/src/Modal/index.ts b/packages/mui-base/src/Modal/index.ts
index 584c95c3bb301d..f73278c560b048 100644
--- a/packages/mui-base/src/Modal/index.ts
+++ b/packages/mui-base/src/Modal/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Modal';
 
 export * from './Modal.types';
diff --git a/packages/mui-base/src/MultiSelect/MultiSelect.tsx b/packages/mui-base/src/MultiSelect/MultiSelect.tsx
index 79afa84c9ad89f..a41000e1c831af 100644
--- a/packages/mui-base/src/MultiSelect/MultiSelect.tsx
+++ b/packages/mui-base/src/MultiSelect/MultiSelect.tsx
@@ -1,3 +1,4 @@
+'use client';
 let warnedOnce = false;
 
 const warn = () => {
diff --git a/packages/mui-base/src/MultiSelect/index.ts b/packages/mui-base/src/MultiSelect/index.ts
index 8cda42c7cb0303..d0e1f790dc558f 100644
--- a/packages/mui-base/src/MultiSelect/index.ts
+++ b/packages/mui-base/src/MultiSelect/index.ts
@@ -1 +1,2 @@
+'use client';
 export { default } from './MultiSelect';
diff --git a/packages/mui-base/src/NoSsr/NoSsr.tsx b/packages/mui-base/src/NoSsr/NoSsr.tsx
index c800ab75f17480..8a7a5ece5cf9e7 100644
--- a/packages/mui-base/src/NoSsr/NoSsr.tsx
+++ b/packages/mui-base/src/NoSsr/NoSsr.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { exactProp, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
diff --git a/packages/mui-base/src/NoSsr/index.ts b/packages/mui-base/src/NoSsr/index.ts
index ecdf9e564c1376..598319033adf0e 100644
--- a/packages/mui-base/src/NoSsr/index.ts
+++ b/packages/mui-base/src/NoSsr/index.ts
@@ -1,2 +1,3 @@
+'use client';
 export { default } from './NoSsr';
 export * from './NoSsr.types';
diff --git a/packages/mui-base/src/Option/Option.tsx b/packages/mui-base/src/Option/Option.tsx
index 0d2ddac5e91063..9d1aa04cec9034 100644
--- a/packages/mui-base/src/Option/Option.tsx
+++ b/packages/mui-base/src/Option/Option.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
diff --git a/packages/mui-base/src/Option/index.ts b/packages/mui-base/src/Option/index.ts
index 22d2ee8f19df7e..60ce6ba481aa7b 100644
--- a/packages/mui-base/src/Option/index.ts
+++ b/packages/mui-base/src/Option/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Option';
 
 export * from './Option.types';
diff --git a/packages/mui-base/src/OptionGroup/OptionGroup.tsx b/packages/mui-base/src/OptionGroup/OptionGroup.tsx
index 53e911e4d37a9b..066d7b853760ca 100644
--- a/packages/mui-base/src/OptionGroup/OptionGroup.tsx
+++ b/packages/mui-base/src/OptionGroup/OptionGroup.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { PolymorphicComponent } from '../utils/PolymorphicComponent';
diff --git a/packages/mui-base/src/OptionGroup/index.ts b/packages/mui-base/src/OptionGroup/index.ts
index c0bb0d50ea5bcd..9d481a3948dff3 100644
--- a/packages/mui-base/src/OptionGroup/index.ts
+++ b/packages/mui-base/src/OptionGroup/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './OptionGroup';
 
 export * from './OptionGroup.types';
diff --git a/packages/mui-base/src/Popper/Popper.tsx b/packages/mui-base/src/Popper/Popper.tsx
index 1715a2e78c93d3..88e790cbe41405 100644
--- a/packages/mui-base/src/Popper/Popper.tsx
+++ b/packages/mui-base/src/Popper/Popper.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import {
   chainPropTypes,
diff --git a/packages/mui-base/src/Popper/index.ts b/packages/mui-base/src/Popper/index.ts
index 3aaa3b357a3726..bc79f7d5fc734d 100644
--- a/packages/mui-base/src/Popper/index.ts
+++ b/packages/mui-base/src/Popper/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Popper';
 export type {
   PopperPlacementType,
diff --git a/packages/mui-base/src/Portal/Portal.tsx b/packages/mui-base/src/Portal/Portal.tsx
index c97399c694fcde..396f79b7b77aaf 100644
--- a/packages/mui-base/src/Portal/Portal.tsx
+++ b/packages/mui-base/src/Portal/Portal.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-base/src/Portal/index.ts b/packages/mui-base/src/Portal/index.ts
index 4d2d9abb114f9b..bf32667e6383b7 100644
--- a/packages/mui-base/src/Portal/index.ts
+++ b/packages/mui-base/src/Portal/index.ts
@@ -1,2 +1,3 @@
+'use client';
 export { default } from './Portal';
 export * from './Portal.types';
diff --git a/packages/mui-base/src/Select/Select.tsx b/packages/mui-base/src/Select/Select.tsx
index 0dbb04b175b649..d9f4d48fb056d9 100644
--- a/packages/mui-base/src/Select/Select.tsx
+++ b/packages/mui-base/src/Select/Select.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
diff --git a/packages/mui-base/src/Select/index.ts b/packages/mui-base/src/Select/index.ts
index 750e0db44014b3..91ba98bae63364 100644
--- a/packages/mui-base/src/Select/index.ts
+++ b/packages/mui-base/src/Select/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Select';
 
 export { default as selectClasses } from './selectClasses';
diff --git a/packages/mui-base/src/Slider/Slider.tsx b/packages/mui-base/src/Slider/Slider.tsx
index 518112f0db7800..e9662b1ea62f21 100644
--- a/packages/mui-base/src/Slider/Slider.tsx
+++ b/packages/mui-base/src/Slider/Slider.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-base/src/Slider/index.ts b/packages/mui-base/src/Slider/index.ts
index 43a778527c82b4..2bceee7f2da939 100644
--- a/packages/mui-base/src/Slider/index.ts
+++ b/packages/mui-base/src/Slider/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Slider';
 export * from './Slider.types';
 
diff --git a/packages/mui-base/src/Snackbar/Snackbar.tsx b/packages/mui-base/src/Snackbar/Snackbar.tsx
index 9b21ab5f8f74c0..9597787201ef94 100644
--- a/packages/mui-base/src/Snackbar/Snackbar.tsx
+++ b/packages/mui-base/src/Snackbar/Snackbar.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import ClickAwayListener from '../ClickAwayListener';
diff --git a/packages/mui-base/src/Snackbar/index.ts b/packages/mui-base/src/Snackbar/index.ts
index 6380b409d3006f..d65ea447344784 100644
--- a/packages/mui-base/src/Snackbar/index.ts
+++ b/packages/mui-base/src/Snackbar/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Snackbar';
 
 export * from './Snackbar.types';
diff --git a/packages/mui-base/src/Switch/Switch.tsx b/packages/mui-base/src/Switch/Switch.tsx
index f174bbc818d0cb..ea714b7740e11b 100644
--- a/packages/mui-base/src/Switch/Switch.tsx
+++ b/packages/mui-base/src/Switch/Switch.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { PolymorphicComponent } from '../utils/PolymorphicComponent';
diff --git a/packages/mui-base/src/Switch/index.ts b/packages/mui-base/src/Switch/index.ts
index cfcbb4ea09b3f7..b7679468c2347d 100644
--- a/packages/mui-base/src/Switch/index.ts
+++ b/packages/mui-base/src/Switch/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Switch';
 export * from './Switch.types';
 
diff --git a/packages/mui-base/src/Tab/Tab.tsx b/packages/mui-base/src/Tab/Tab.tsx
index dd5a01f24af5ae..a43fbd7cecbeb0 100644
--- a/packages/mui-base/src/Tab/Tab.tsx
+++ b/packages/mui-base/src/Tab/Tab.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
diff --git a/packages/mui-base/src/Tab/index.ts b/packages/mui-base/src/Tab/index.ts
index f770371bf81176..501f4eeea12196 100644
--- a/packages/mui-base/src/Tab/index.ts
+++ b/packages/mui-base/src/Tab/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Tab';
 export * from './Tab.types';
 
diff --git a/packages/mui-base/src/TabPanel/TabPanel.tsx b/packages/mui-base/src/TabPanel/TabPanel.tsx
index 1a970a06804010..709476c5b56707 100644
--- a/packages/mui-base/src/TabPanel/TabPanel.tsx
+++ b/packages/mui-base/src/TabPanel/TabPanel.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils';
diff --git a/packages/mui-base/src/TabPanel/index.ts b/packages/mui-base/src/TabPanel/index.ts
index dde4e1c12f6165..abbeb0a8c98c1c 100644
--- a/packages/mui-base/src/TabPanel/index.ts
+++ b/packages/mui-base/src/TabPanel/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './TabPanel';
 export * from './TabPanel.types';
 
diff --git a/packages/mui-base/src/TablePagination/TablePagination.tsx b/packages/mui-base/src/TablePagination/TablePagination.tsx
index 1fd955a4837c04..1ec45846d198a3 100644
--- a/packages/mui-base/src/TablePagination/TablePagination.tsx
+++ b/packages/mui-base/src/TablePagination/TablePagination.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId, chainPropTypes, integerPropType } from '@mui/utils';
diff --git a/packages/mui-base/src/TablePagination/TablePaginationActions.tsx b/packages/mui-base/src/TablePagination/TablePaginationActions.tsx
index 1795d541831f60..26a362db0cf144 100644
--- a/packages/mui-base/src/TablePagination/TablePaginationActions.tsx
+++ b/packages/mui-base/src/TablePagination/TablePaginationActions.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils';
 import {
diff --git a/packages/mui-base/src/TablePagination/index.ts b/packages/mui-base/src/TablePagination/index.ts
index 49d455c4e81f58..b6b63b9fa45237 100644
--- a/packages/mui-base/src/TablePagination/index.ts
+++ b/packages/mui-base/src/TablePagination/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './TablePagination';
 export * from './TablePagination.types';
 
diff --git a/packages/mui-base/src/Tabs/Tabs.tsx b/packages/mui-base/src/Tabs/Tabs.tsx
index 7ce43b37b8d7b9..983c2c2d794307 100644
--- a/packages/mui-base/src/Tabs/Tabs.tsx
+++ b/packages/mui-base/src/Tabs/Tabs.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils';
diff --git a/packages/mui-base/src/Tabs/index.ts b/packages/mui-base/src/Tabs/index.ts
index bfb9ac6b0af59b..9067f8fc76e8e7 100644
--- a/packages/mui-base/src/Tabs/index.ts
+++ b/packages/mui-base/src/Tabs/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Tabs';
 
 export { default as TabsContext } from './TabsContext';
diff --git a/packages/mui-base/src/TabsList/TabsList.tsx b/packages/mui-base/src/TabsList/TabsList.tsx
index 8ed6b555529094..61dfd4bc9c3caa 100644
--- a/packages/mui-base/src/TabsList/TabsList.tsx
+++ b/packages/mui-base/src/TabsList/TabsList.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '../composeClasses';
diff --git a/packages/mui-base/src/TabsList/index.ts b/packages/mui-base/src/TabsList/index.ts
index 4be5ad315fc60d..b69c7a5d251b5f 100644
--- a/packages/mui-base/src/TabsList/index.ts
+++ b/packages/mui-base/src/TabsList/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './TabsList';
 export * from './TabsList.types';
 
diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
index 6bb02de063f8c0..88534176f74ab4 100644
--- a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
+++ b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import * as ReactDOM from 'react-dom';
diff --git a/packages/mui-base/src/TextareaAutosize/index.ts b/packages/mui-base/src/TextareaAutosize/index.ts
index 4561e403520716..60098384da5643 100644
--- a/packages/mui-base/src/TextareaAutosize/index.ts
+++ b/packages/mui-base/src/TextareaAutosize/index.ts
@@ -1,2 +1,3 @@
+'use client';
 export { default } from './TextareaAutosize';
 export * from './TextareaAutosize.types';
diff --git a/packages/mui-base/src/index.js b/packages/mui-base/src/index.js
index 90e0ba0608c512..3b80eab6ece52d 100644
--- a/packages/mui-base/src/index.js
+++ b/packages/mui-base/src/index.js
@@ -1,3 +1,4 @@
+'use client';
 export * from './utils';
 
 export { default as Badge } from './Badge';
diff --git a/packages/mui-base/src/useAutocomplete/index.js b/packages/mui-base/src/useAutocomplete/index.js
index 6f01318688c9f2..871dee0a922643 100644
--- a/packages/mui-base/src/useAutocomplete/index.js
+++ b/packages/mui-base/src/useAutocomplete/index.js
@@ -1,2 +1,3 @@
+'use client';
 export { default } from './useAutocomplete';
 export * from './useAutocomplete';
diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.js b/packages/mui-base/src/useAutocomplete/useAutocomplete.js
index 9612d56b810610..ce6bd96f549125 100644
--- a/packages/mui-base/src/useAutocomplete/useAutocomplete.js
+++ b/packages/mui-base/src/useAutocomplete/useAutocomplete.js
@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable no-constant-condition */
 import * as React from 'react';
 import {
diff --git a/packages/mui-base/src/useBadge/index.ts b/packages/mui-base/src/useBadge/index.ts
index d693a8ed6e7894..a44bb2d69f76b9 100644
--- a/packages/mui-base/src/useBadge/index.ts
+++ b/packages/mui-base/src/useBadge/index.ts
@@ -1,2 +1,3 @@
+'use client';
 export { default } from './useBadge';
 export * from './useBadge.types';
diff --git a/packages/mui-base/src/useBadge/useBadge.ts b/packages/mui-base/src/useBadge/useBadge.ts
index 4182f9a32b5a59..61fe45c243ad0c 100644
--- a/packages/mui-base/src/useBadge/useBadge.ts
+++ b/packages/mui-base/src/useBadge/useBadge.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { usePreviousProps } from '@mui/utils';
 import { UseBadgeParameters, UseBadgeReturnValue } from './useBadge.types';
diff --git a/packages/mui-base/src/useButton/index.ts b/packages/mui-base/src/useButton/index.ts
index 201414254fda2b..e9420b10ba50a8 100644
--- a/packages/mui-base/src/useButton/index.ts
+++ b/packages/mui-base/src/useButton/index.ts
@@ -1,2 +1,3 @@
+'use client';
 export { default } from './useButton';
 export * from './useButton.types';
diff --git a/packages/mui-base/src/useButton/useButton.ts b/packages/mui-base/src/useButton/useButton.ts
index aa2110afe31b84..c7e44fc014a4d9 100644
--- a/packages/mui-base/src/useButton/useButton.ts
+++ b/packages/mui-base/src/useButton/useButton.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import {
   unstable_useForkRef as useForkRef,
diff --git a/packages/mui-base/src/useInput/index.ts b/packages/mui-base/src/useInput/index.ts
index 54a4641b2470bb..412e5bbab43989 100644
--- a/packages/mui-base/src/useInput/index.ts
+++ b/packages/mui-base/src/useInput/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './useInput';
 
 export * from './useInput.types';
diff --git a/packages/mui-base/src/useInput/useInput.ts b/packages/mui-base/src/useInput/useInput.ts
index 5b25c5477b2fd3..5d71e443d9bfc5 100644
--- a/packages/mui-base/src/useInput/useInput.ts
+++ b/packages/mui-base/src/useInput/useInput.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import MuiError from '@mui/utils/macros/MuiError.macro';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
diff --git a/packages/mui-base/src/useList/index.ts b/packages/mui-base/src/useList/index.ts
index 78dd449f74e7c3..951d8f64d77374 100644
--- a/packages/mui-base/src/useList/index.ts
+++ b/packages/mui-base/src/useList/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './useList';
 export * from './useList.types';
 
diff --git a/packages/mui-base/src/useList/useList.ts b/packages/mui-base/src/useList/useList.ts
index 94735fd0db348e..7747b5f4288909 100644
--- a/packages/mui-base/src/useList/useList.ts
+++ b/packages/mui-base/src/useList/useList.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import {
diff --git a/packages/mui-base/src/useList/useListChangeNotifiers.ts b/packages/mui-base/src/useList/useListChangeNotifiers.ts
index a5529fdb1ebe40..0f3335b3200270 100644
--- a/packages/mui-base/src/useList/useListChangeNotifiers.ts
+++ b/packages/mui-base/src/useList/useListChangeNotifiers.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import useMessageBus from '../utils/useMessageBus';
 
diff --git a/packages/mui-base/src/useList/useListItem.ts b/packages/mui-base/src/useList/useListItem.ts
index cf8da792eae057..8de7b6207bf6e0 100644
--- a/packages/mui-base/src/useList/useListItem.ts
+++ b/packages/mui-base/src/useList/useListItem.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import {
   unstable_useForkRef as useForkRef,
diff --git a/packages/mui-base/src/useMenu/MenuProvider.tsx b/packages/mui-base/src/useMenu/MenuProvider.tsx
index a6d23c6ebe14a7..e3057ba9d2506d 100644
--- a/packages/mui-base/src/useMenu/MenuProvider.tsx
+++ b/packages/mui-base/src/useMenu/MenuProvider.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { ListContext, ListContextValue } from '../useList/ListContext';
 import { MenuItemMetadata } from '../useMenuItem';
diff --git a/packages/mui-base/src/useMenu/index.ts b/packages/mui-base/src/useMenu/index.ts
index 5d464e91afe4e7..0bf346f8c22e89 100644
--- a/packages/mui-base/src/useMenu/index.ts
+++ b/packages/mui-base/src/useMenu/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './useMenu';
 export * from './useMenu.types';
 
diff --git a/packages/mui-base/src/useMenu/useMenu.ts b/packages/mui-base/src/useMenu/useMenu.ts
index 03b538f71da690..6358184226315e 100644
--- a/packages/mui-base/src/useMenu/useMenu.ts
+++ b/packages/mui-base/src/useMenu/useMenu.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import useList from '../useList';
diff --git a/packages/mui-base/src/useMenuItem/index.ts b/packages/mui-base/src/useMenuItem/index.ts
index 6d8b5504eec36a..f9192a1824bb78 100644
--- a/packages/mui-base/src/useMenuItem/index.ts
+++ b/packages/mui-base/src/useMenuItem/index.ts
@@ -1,2 +1,3 @@
+'use client';
 export { default } from './useMenuItem';
 export * from './useMenuItem.types';
diff --git a/packages/mui-base/src/useMenuItem/useMenuItem.ts b/packages/mui-base/src/useMenuItem/useMenuItem.ts
index 224f50a0f8c3b7..e618b1a7f2087e 100644
--- a/packages/mui-base/src/useMenuItem/useMenuItem.ts
+++ b/packages/mui-base/src/useMenuItem/useMenuItem.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
 import { EventHandlers } from '../utils/types';
diff --git a/packages/mui-base/src/useOption/index.ts b/packages/mui-base/src/useOption/index.ts
index 62ea64d8a67661..5acfa54e48de38 100644
--- a/packages/mui-base/src/useOption/index.ts
+++ b/packages/mui-base/src/useOption/index.ts
@@ -1,2 +1,3 @@
+'use client';
 export { default } from './useOption';
 export * from './useOption.types';
diff --git a/packages/mui-base/src/useOption/useOption.ts b/packages/mui-base/src/useOption/useOption.ts
index a1e9a4a952da1f..3790f1c993cf96 100644
--- a/packages/mui-base/src/useOption/useOption.ts
+++ b/packages/mui-base/src/useOption/useOption.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { unstable_useForkRef as useForkRef, unstable_useId as useId } from '@mui/utils';
 import { SelectOption, UseOptionParameters, UseOptionReturnValue } from './useOption.types';
diff --git a/packages/mui-base/src/useSelect/SelectProvider.tsx b/packages/mui-base/src/useSelect/SelectProvider.tsx
index eb8d54157526e1..2a6bc095e075db 100644
--- a/packages/mui-base/src/useSelect/SelectProvider.tsx
+++ b/packages/mui-base/src/useSelect/SelectProvider.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { ListContextValue, ListContext } from '../useList/ListContext';
 import { SelectOption } from '../useOption/useOption.types';
diff --git a/packages/mui-base/src/useSelect/index.ts b/packages/mui-base/src/useSelect/index.ts
index fdf70bd247967a..41b97fe5de2d14 100644
--- a/packages/mui-base/src/useSelect/index.ts
+++ b/packages/mui-base/src/useSelect/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './useSelect';
 export * from './useSelect.types';
 
diff --git a/packages/mui-base/src/useSelect/useSelect.ts b/packages/mui-base/src/useSelect/useSelect.ts
index 4252484ae03ea4..e2863a4d1e8d4b 100644
--- a/packages/mui-base/src/useSelect/useSelect.ts
+++ b/packages/mui-base/src/useSelect/useSelect.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import {
   unstable_useForkRef as useForkRef,
diff --git a/packages/mui-base/src/useSlider/index.ts b/packages/mui-base/src/useSlider/index.ts
index 8365ed6c5579d7..81e83970cc6c96 100644
--- a/packages/mui-base/src/useSlider/index.ts
+++ b/packages/mui-base/src/useSlider/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './useSlider';
 export * from './useSlider';
 export * from './useSlider.types';
diff --git a/packages/mui-base/src/useSlider/useSlider.ts b/packages/mui-base/src/useSlider/useSlider.ts
index 0ffa6704b801c7..9a76021a5f60e1 100644
--- a/packages/mui-base/src/useSlider/useSlider.ts
+++ b/packages/mui-base/src/useSlider/useSlider.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import {
   unstable_ownerDocument as ownerDocument,
diff --git a/packages/mui-base/src/useSnackbar/index.ts b/packages/mui-base/src/useSnackbar/index.ts
index ffa7773fe1f7a4..22dbf942587623 100644
--- a/packages/mui-base/src/useSnackbar/index.ts
+++ b/packages/mui-base/src/useSnackbar/index.ts
@@ -1,2 +1,3 @@
+'use client';
 export { default } from './useSnackbar';
 export * from './useSnackbar.types';
diff --git a/packages/mui-base/src/useSnackbar/useSnackbar.ts b/packages/mui-base/src/useSnackbar/useSnackbar.ts
index 7a7f2ec8e69d6f..b3a051a3df3126 100644
--- a/packages/mui-base/src/useSnackbar/useSnackbar.ts
+++ b/packages/mui-base/src/useSnackbar/useSnackbar.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import {
diff --git a/packages/mui-base/src/useSwitch/index.ts b/packages/mui-base/src/useSwitch/index.ts
index 4903f0b72f328f..64d4cfea97d923 100644
--- a/packages/mui-base/src/useSwitch/index.ts
+++ b/packages/mui-base/src/useSwitch/index.ts
@@ -1,2 +1,3 @@
+'use client';
 export { default } from './useSwitch';
 export * from './useSwitch.types';
diff --git a/packages/mui-base/src/useSwitch/useSwitch.ts b/packages/mui-base/src/useSwitch/useSwitch.ts
index 894dcb2df95536..09a58a7afc0b28 100644
--- a/packages/mui-base/src/useSwitch/useSwitch.ts
+++ b/packages/mui-base/src/useSwitch/useSwitch.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import {
   unstable_useControlled as useControlled,
diff --git a/packages/mui-base/src/useTab/index.ts b/packages/mui-base/src/useTab/index.ts
index fc65f1587ae4ac..6faffccf614199 100644
--- a/packages/mui-base/src/useTab/index.ts
+++ b/packages/mui-base/src/useTab/index.ts
@@ -1,2 +1,3 @@
+'use client';
 export { default } from './useTab';
 export * from './useTab.types';
diff --git a/packages/mui-base/src/useTab/useTab.ts b/packages/mui-base/src/useTab/useTab.ts
index 87ba287ba6c15b..069485baca0948 100644
--- a/packages/mui-base/src/useTab/useTab.ts
+++ b/packages/mui-base/src/useTab/useTab.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
 import { useTabsContext } from '../Tabs';
diff --git a/packages/mui-base/src/useTabPanel/index.ts b/packages/mui-base/src/useTabPanel/index.ts
index 49a69428126d5c..341ac0a990afd1 100644
--- a/packages/mui-base/src/useTabPanel/index.ts
+++ b/packages/mui-base/src/useTabPanel/index.ts
@@ -1,2 +1,3 @@
+'use client';
 export { default } from './useTabPanel';
 export * from './useTabPanel.types';
diff --git a/packages/mui-base/src/useTabPanel/useTabPanel.ts b/packages/mui-base/src/useTabPanel/useTabPanel.ts
index 9bd7d5e960e16b..bf376dfdc6ff81 100644
--- a/packages/mui-base/src/useTabPanel/useTabPanel.ts
+++ b/packages/mui-base/src/useTabPanel/useTabPanel.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
 import { useTabsContext } from '../Tabs';
diff --git a/packages/mui-base/src/useTabs/TabsProvider.tsx b/packages/mui-base/src/useTabs/TabsProvider.tsx
index 634566a478e021..88fa4ce5ce6573 100644
--- a/packages/mui-base/src/useTabs/TabsProvider.tsx
+++ b/packages/mui-base/src/useTabs/TabsProvider.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import TabsContext, { TabsContextValue } from '../Tabs/TabsContext';
 import { CompoundComponentContext, CompoundComponentContextValue } from '../utils/useCompound';
diff --git a/packages/mui-base/src/useTabs/index.ts b/packages/mui-base/src/useTabs/index.ts
index 7f7e023692592c..936c4dae175b3f 100644
--- a/packages/mui-base/src/useTabs/index.ts
+++ b/packages/mui-base/src/useTabs/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './useTabs';
 export * from './useTabs';
 export * from './useTabs.types';
diff --git a/packages/mui-base/src/useTabs/useTabs.ts b/packages/mui-base/src/useTabs/useTabs.ts
index f5f4241ef77ef6..f6a1e2b2f6fe27 100644
--- a/packages/mui-base/src/useTabs/useTabs.ts
+++ b/packages/mui-base/src/useTabs/useTabs.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { unstable_useControlled as useControlled } from '@mui/utils';
 import { UseTabsParameters, UseTabsReturnValue } from './useTabs.types';
diff --git a/packages/mui-base/src/useTabsList/TabsListProvider.tsx b/packages/mui-base/src/useTabsList/TabsListProvider.tsx
index fcef5ff3baebe4..593342d1d84fa2 100644
--- a/packages/mui-base/src/useTabsList/TabsListProvider.tsx
+++ b/packages/mui-base/src/useTabsList/TabsListProvider.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { ListContextValue, ListContext } from '../useList/ListContext';
 import { TabMetadata } from '../useTabs/useTabs';
diff --git a/packages/mui-base/src/useTabsList/index.ts b/packages/mui-base/src/useTabsList/index.ts
index 3432c5427462b3..eb5a206fd4c486 100644
--- a/packages/mui-base/src/useTabsList/index.ts
+++ b/packages/mui-base/src/useTabsList/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './useTabsList';
 export * from './useTabsList.types';
 
diff --git a/packages/mui-base/src/useTabsList/useTabsList.ts b/packages/mui-base/src/useTabsList/useTabsList.ts
index 3279fb3e58b6d1..a30470abee19b8 100644
--- a/packages/mui-base/src/useTabsList/useTabsList.ts
+++ b/packages/mui-base/src/useTabsList/useTabsList.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useTabsContext } from '../Tabs';
 import {
diff --git a/packages/mui-base/src/utils/ClassNameConfigurator.tsx b/packages/mui-base/src/utils/ClassNameConfigurator.tsx
index aee0a168dd5f11..a6e41366a7aaa3 100644
--- a/packages/mui-base/src/utils/ClassNameConfigurator.tsx
+++ b/packages/mui-base/src/utils/ClassNameConfigurator.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 type ClassNameConfiguration = {
diff --git a/packages/mui-base/src/utils/index.ts b/packages/mui-base/src/utils/index.ts
index 5ad2a254192e6f..4e1ad740f07774 100644
--- a/packages/mui-base/src/utils/index.ts
+++ b/packages/mui-base/src/utils/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default as appendOwnerState } from './appendOwnerState';
 export { default as areArraysEqual } from './areArraysEqual';
 export { default as ClassNameConfigurator } from './ClassNameConfigurator';
diff --git a/packages/mui-base/src/utils/useCompound.ts b/packages/mui-base/src/utils/useCompound.ts
index a9cf7db0858a09..61826f1e3392f2 100644
--- a/packages/mui-base/src/utils/useCompound.ts
+++ b/packages/mui-base/src/utils/useCompound.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 interface RegisterItemReturnValue<Key> {
diff --git a/packages/mui-base/src/utils/useCompoundItem.ts b/packages/mui-base/src/utils/useCompoundItem.ts
index 0809864072c5ec..7c468e386a9fba 100644
--- a/packages/mui-base/src/utils/useCompoundItem.ts
+++ b/packages/mui-base/src/utils/useCompoundItem.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import {
diff --git a/packages/mui-base/src/utils/useControllableReducer.ts b/packages/mui-base/src/utils/useControllableReducer.ts
index 48f2ee2ec93ee3..b1bb4aa3ad734d 100644
--- a/packages/mui-base/src/utils/useControllableReducer.ts
+++ b/packages/mui-base/src/utils/useControllableReducer.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import {
   ActionWithContext,
diff --git a/packages/mui-base/src/utils/useForcedRerendering.ts b/packages/mui-base/src/utils/useForcedRerendering.ts
index a3bdedb9377858..2e3f27b4c04388 100644
--- a/packages/mui-base/src/utils/useForcedRerendering.ts
+++ b/packages/mui-base/src/utils/useForcedRerendering.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 /**
  * @ignore - internal hook.
diff --git a/packages/mui-base/src/utils/useLatest.ts b/packages/mui-base/src/utils/useLatest.ts
index 71f506ebaf6344..06f930cc5befb8 100644
--- a/packages/mui-base/src/utils/useLatest.ts
+++ b/packages/mui-base/src/utils/useLatest.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 /**
diff --git a/packages/mui-base/src/utils/useMessageBus.ts b/packages/mui-base/src/utils/useMessageBus.ts
index ef2d8d9f898c4b..480f343412078c 100644
--- a/packages/mui-base/src/utils/useMessageBus.ts
+++ b/packages/mui-base/src/utils/useMessageBus.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 export interface MessageBus {
diff --git a/packages/mui-base/src/utils/useSlotProps.ts b/packages/mui-base/src/utils/useSlotProps.ts
index dfbd4bf651784f..5c596e5fd4972c 100644
--- a/packages/mui-base/src/utils/useSlotProps.ts
+++ b/packages/mui-base/src/utils/useSlotProps.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import appendOwnerState, { AppendOwnerStateReturnType } from './appendOwnerState';
diff --git a/packages/mui-base/src/utils/useTextNavigation.ts b/packages/mui-base/src/utils/useTextNavigation.ts
index 105945f8996f24..e62c575e387670 100644
--- a/packages/mui-base/src/utils/useTextNavigation.ts
+++ b/packages/mui-base/src/utils/useTextNavigation.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 const TEXT_NAVIGATION_RESET_TIMEOUT = 500; // milliseconds
diff --git a/packages/mui-icons-material/src/utils/createSvgIcon.js b/packages/mui-icons-material/src/utils/createSvgIcon.js
index 432a63eb6e13b0..6faecb703583ce 100644
--- a/packages/mui-icons-material/src/utils/createSvgIcon.js
+++ b/packages/mui-icons-material/src/utils/createSvgIcon.js
@@ -1 +1,2 @@
+'use client';
 export { createSvgIcon as default } from '@mui/material/utils';
diff --git a/packages/mui-icons-material/templateSvgIcon.js b/packages/mui-icons-material/templateSvgIcon.js
index 7e78c776064ff8..462cbe3b78fe90 100644
--- a/packages/mui-icons-material/templateSvgIcon.js
+++ b/packages/mui-icons-material/templateSvgIcon.js
@@ -1,3 +1,4 @@
+"use client";
 import createSvgIcon from './utils/createSvgIcon';
 
 export default createSvgIcon(
diff --git a/packages/mui-joy/src/Alert/Alert.tsx b/packages/mui-joy/src/Alert/Alert.tsx
index b9f71b6b7fad8b..c27b23b1b41078 100644
--- a/packages/mui-joy/src/Alert/Alert.tsx
+++ b/packages/mui-joy/src/Alert/Alert.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-joy/src/Alert/index.ts b/packages/mui-joy/src/Alert/index.ts
index e9dd48d0d9d252..882206c74b9405 100644
--- a/packages/mui-joy/src/Alert/index.ts
+++ b/packages/mui-joy/src/Alert/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Alert';
 export * from './alertClasses';
 export { default as alertClasses } from './alertClasses';
diff --git a/packages/mui-joy/src/AspectRatio/AspectRatio.tsx b/packages/mui-joy/src/AspectRatio/AspectRatio.tsx
index f38d981c18573a..7d1690153ba0c4 100644
--- a/packages/mui-joy/src/AspectRatio/AspectRatio.tsx
+++ b/packages/mui-joy/src/AspectRatio/AspectRatio.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
diff --git a/packages/mui-joy/src/AspectRatio/index.ts b/packages/mui-joy/src/AspectRatio/index.ts
index 6b183a3decfb1d..b944d18a233acb 100644
--- a/packages/mui-joy/src/AspectRatio/index.ts
+++ b/packages/mui-joy/src/AspectRatio/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './AspectRatio';
 export * from './aspectRatioClasses';
 export { default as aspectRatioClasses } from './aspectRatioClasses';
diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.tsx
index ec666b5cf4a205..1b5ae610b7c4ab 100644
--- a/packages/mui-joy/src/Autocomplete/Autocomplete.tsx
+++ b/packages/mui-joy/src/Autocomplete/Autocomplete.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-joy/src/Autocomplete/index.ts b/packages/mui-joy/src/Autocomplete/index.ts
index 5b01684270b978..86393486cd32ef 100644
--- a/packages/mui-joy/src/Autocomplete/index.ts
+++ b/packages/mui-joy/src/Autocomplete/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { createFilterOptions } from '@mui/base/useAutocomplete';
 export { default } from './Autocomplete';
 export * from './autocompleteClasses';
diff --git a/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx b/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx
index 2e4deb729bf0b7..cbf3ac020b1d22 100644
--- a/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx
+++ b/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-joy/src/AutocompleteListbox/index.ts b/packages/mui-joy/src/AutocompleteListbox/index.ts
index 0fc430b15af660..3bbaf0162e1d25 100644
--- a/packages/mui-joy/src/AutocompleteListbox/index.ts
+++ b/packages/mui-joy/src/AutocompleteListbox/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './AutocompleteListbox';
 export * from './autocompleteListboxClasses';
 export { default as autocompleteListboxClasses } from './autocompleteListboxClasses';
diff --git a/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx b/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx
index f15615b82b5945..38608b3aeaf3d0 100644
--- a/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx
+++ b/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-joy/src/AutocompleteOption/index.ts b/packages/mui-joy/src/AutocompleteOption/index.ts
index dda31b68a6b501..6565f5e41e6ac6 100644
--- a/packages/mui-joy/src/AutocompleteOption/index.ts
+++ b/packages/mui-joy/src/AutocompleteOption/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './AutocompleteOption';
 export * from './autocompleteOptionClasses';
 export { default as autocompleteOptionClasses } from './autocompleteOptionClasses';
diff --git a/packages/mui-joy/src/Avatar/Avatar.tsx b/packages/mui-joy/src/Avatar/Avatar.tsx
index a078a6ca659f82..24b8bfb066f4a6 100644
--- a/packages/mui-joy/src/Avatar/Avatar.tsx
+++ b/packages/mui-joy/src/Avatar/Avatar.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
diff --git a/packages/mui-joy/src/Avatar/index.ts b/packages/mui-joy/src/Avatar/index.ts
index fca351ee6db5b0..5a6648ea3e3bca 100644
--- a/packages/mui-joy/src/Avatar/index.ts
+++ b/packages/mui-joy/src/Avatar/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Avatar';
 export * from './avatarClasses';
 export { default as avatarClasses } from './avatarClasses';
diff --git a/packages/mui-joy/src/AvatarGroup/AvatarGroup.tsx b/packages/mui-joy/src/AvatarGroup/AvatarGroup.tsx
index 75e588f6b8a338..28deb0f6038d23 100644
--- a/packages/mui-joy/src/AvatarGroup/AvatarGroup.tsx
+++ b/packages/mui-joy/src/AvatarGroup/AvatarGroup.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-joy/src/AvatarGroup/index.ts b/packages/mui-joy/src/AvatarGroup/index.ts
index 77ef2c0f011827..14a51f45869fb0 100644
--- a/packages/mui-joy/src/AvatarGroup/index.ts
+++ b/packages/mui-joy/src/AvatarGroup/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './AvatarGroup';
 export * from './avatarGroupClasses';
 export { default as avatarGroupClasses } from './avatarGroupClasses';
diff --git a/packages/mui-joy/src/Badge/Badge.tsx b/packages/mui-joy/src/Badge/Badge.tsx
index acfca53931535d..e05eb3c2d3e18d 100644
--- a/packages/mui-joy/src/Badge/Badge.tsx
+++ b/packages/mui-joy/src/Badge/Badge.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
diff --git a/packages/mui-joy/src/Badge/index.ts b/packages/mui-joy/src/Badge/index.ts
index 212caa85460e27..90a5aef5a7e0d2 100644
--- a/packages/mui-joy/src/Badge/index.ts
+++ b/packages/mui-joy/src/Badge/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Badge';
 export * from './BadgeProps';
 export { default as badgeClasses } from './badgeClasses';
diff --git a/packages/mui-joy/src/Box/Box.tsx b/packages/mui-joy/src/Box/Box.tsx
index 09f77d8297bd35..58508190a5acfc 100644
--- a/packages/mui-joy/src/Box/Box.tsx
+++ b/packages/mui-joy/src/Box/Box.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { createBox } from '@mui/system';
 import PropTypes from 'prop-types';
 import { unstable_ClassNameGenerator as ClassNameGenerator } from '../className';
diff --git a/packages/mui-joy/src/Box/index.ts b/packages/mui-joy/src/Box/index.ts
index 00b5d436de00d6..c07d9cce7973a3 100644
--- a/packages/mui-joy/src/Box/index.ts
+++ b/packages/mui-joy/src/Box/index.ts
@@ -1,2 +1,3 @@
+'use client';
 export { default } from './Box';
 export * from './BoxProps';
diff --git a/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx b/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx
index a9991916a4538d..0befd96117fd15 100644
--- a/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
diff --git a/packages/mui-joy/src/Breadcrumbs/index.ts b/packages/mui-joy/src/Breadcrumbs/index.ts
index 0ee5614fa62d66..a7ece78f6f3925 100644
--- a/packages/mui-joy/src/Breadcrumbs/index.ts
+++ b/packages/mui-joy/src/Breadcrumbs/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Breadcrumbs';
 export * from './breadcrumbsClasses';
 export { default as breadcrumbsClasses } from './breadcrumbsClasses';
diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx
index 02c04cf5d315bc..5f86501d638812 100644
--- a/packages/mui-joy/src/Button/Button.tsx
+++ b/packages/mui-joy/src/Button/Button.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useButton from '@mui/base/useButton';
diff --git a/packages/mui-joy/src/Button/index.ts b/packages/mui-joy/src/Button/index.ts
index c702730d3c766b..cd516179783471 100644
--- a/packages/mui-joy/src/Button/index.ts
+++ b/packages/mui-joy/src/Button/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Button';
 export * from './ButtonProps';
 export { default as buttonClasses } from './buttonClasses';
diff --git a/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx b/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx
index 1ea2a563c158f3..2ee59edf357b5b 100644
--- a/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx
+++ b/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-joy/src/ButtonGroup/index.ts b/packages/mui-joy/src/ButtonGroup/index.ts
index 29d7aa3afef8b7..b7a7c00fba44b7 100644
--- a/packages/mui-joy/src/ButtonGroup/index.ts
+++ b/packages/mui-joy/src/ButtonGroup/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ButtonGroup';
 export * from './buttonGroupClasses';
 export { default as buttonGroupClasses } from './buttonGroupClasses';
diff --git a/packages/mui-joy/src/Card/Card.tsx b/packages/mui-joy/src/Card/Card.tsx
index f970acf61f1199..b9112f5072963b 100644
--- a/packages/mui-joy/src/Card/Card.tsx
+++ b/packages/mui-joy/src/Card/Card.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-joy/src/Card/index.ts b/packages/mui-joy/src/Card/index.ts
index 9c879224fe3ed2..029b2b9c2c8d58 100644
--- a/packages/mui-joy/src/Card/index.ts
+++ b/packages/mui-joy/src/Card/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Card';
 export * from './cardClasses';
 export { default as cardClasses } from './cardClasses';
diff --git a/packages/mui-joy/src/CardActions/CardActions.tsx b/packages/mui-joy/src/CardActions/CardActions.tsx
index a32cae91a12022..2644980f1c89e7 100644
--- a/packages/mui-joy/src/CardActions/CardActions.tsx
+++ b/packages/mui-joy/src/CardActions/CardActions.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-joy/src/CardActions/index.ts b/packages/mui-joy/src/CardActions/index.ts
index 651c8315dffeea..67beb5527f3169 100644
--- a/packages/mui-joy/src/CardActions/index.ts
+++ b/packages/mui-joy/src/CardActions/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './CardActions';
 export * from './cardActionsClasses';
 export { default as cardActionsClasses } from './cardActionsClasses';
diff --git a/packages/mui-joy/src/CardContent/CardContent.tsx b/packages/mui-joy/src/CardContent/CardContent.tsx
index a6f93979e989c1..1f17d614da353e 100644
--- a/packages/mui-joy/src/CardContent/CardContent.tsx
+++ b/packages/mui-joy/src/CardContent/CardContent.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-joy/src/CardContent/index.ts b/packages/mui-joy/src/CardContent/index.ts
index 495e9679a8961d..dc2468896707c0 100644
--- a/packages/mui-joy/src/CardContent/index.ts
+++ b/packages/mui-joy/src/CardContent/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './CardContent';
 export * from './cardContentClasses';
 export { default as cardContentClasses } from './cardContentClasses';
diff --git a/packages/mui-joy/src/CardCover/CardCover.tsx b/packages/mui-joy/src/CardCover/CardCover.tsx
index b82c81a19150ce..3ad41c30377d7d 100644
--- a/packages/mui-joy/src/CardCover/CardCover.tsx
+++ b/packages/mui-joy/src/CardCover/CardCover.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-joy/src/CardCover/index.ts b/packages/mui-joy/src/CardCover/index.ts
index 13d43920b08a09..a3e7ec8b368fc0 100644
--- a/packages/mui-joy/src/CardCover/index.ts
+++ b/packages/mui-joy/src/CardCover/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './CardCover';
 export * from './cardCoverClasses';
 export { default as cardCoverClasses } from './cardCoverClasses';
diff --git a/packages/mui-joy/src/CardOverflow/CardOverflow.tsx b/packages/mui-joy/src/CardOverflow/CardOverflow.tsx
index 6684379c78095d..1938e8b3bdf03d 100644
--- a/packages/mui-joy/src/CardOverflow/CardOverflow.tsx
+++ b/packages/mui-joy/src/CardOverflow/CardOverflow.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-joy/src/CardOverflow/index.ts b/packages/mui-joy/src/CardOverflow/index.ts
index 70f27c2d158095..c24fb4f93ea292 100644
--- a/packages/mui-joy/src/CardOverflow/index.ts
+++ b/packages/mui-joy/src/CardOverflow/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './CardOverflow';
 export * from './cardOverflowClasses';
 export { default as cardOverflowClasses } from './cardOverflowClasses';
diff --git a/packages/mui-joy/src/Checkbox/Checkbox.tsx b/packages/mui-joy/src/Checkbox/Checkbox.tsx
index 35b84f01587a76..eb8078dc8452df 100644
--- a/packages/mui-joy/src/Checkbox/Checkbox.tsx
+++ b/packages/mui-joy/src/Checkbox/Checkbox.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
diff --git a/packages/mui-joy/src/Checkbox/index.ts b/packages/mui-joy/src/Checkbox/index.ts
index cfc79285e72f39..008c62e5bda20a 100644
--- a/packages/mui-joy/src/Checkbox/index.ts
+++ b/packages/mui-joy/src/Checkbox/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Checkbox';
 export { default as checkboxClasses } from './checkboxClasses';
 export * from './checkboxClasses';
diff --git a/packages/mui-joy/src/Chip/Chip.tsx b/packages/mui-joy/src/Chip/Chip.tsx
index fceaf37febb5a3..7dc7f8928ee938 100644
--- a/packages/mui-joy/src/Chip/Chip.tsx
+++ b/packages/mui-joy/src/Chip/Chip.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-joy/src/Chip/index.ts b/packages/mui-joy/src/Chip/index.ts
index 969b8f1e69b313..12fd2fe3dc1a09 100644
--- a/packages/mui-joy/src/Chip/index.ts
+++ b/packages/mui-joy/src/Chip/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Chip';
 export { default as chipClasses } from './chipClasses';
 export * from './chipClasses';
diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx
index 24256017aa9e03..307a511dacb66a 100644
--- a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx
+++ b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
diff --git a/packages/mui-joy/src/ChipDelete/index.ts b/packages/mui-joy/src/ChipDelete/index.ts
index def36173c652da..6e1848d4c3211d 100644
--- a/packages/mui-joy/src/ChipDelete/index.ts
+++ b/packages/mui-joy/src/ChipDelete/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ChipDelete';
 export * from './chipDeleteClasses';
 export { default as chipDeleteClasses } from './chipDeleteClasses';
diff --git a/packages/mui-joy/src/CircularProgress/CircularProgress.tsx b/packages/mui-joy/src/CircularProgress/CircularProgress.tsx
index a59a23b6025fda..870032b0e3e5be 100644
--- a/packages/mui-joy/src/CircularProgress/CircularProgress.tsx
+++ b/packages/mui-joy/src/CircularProgress/CircularProgress.tsx
@@ -1,3 +1,4 @@
+'use client';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import clsx from 'clsx';
diff --git a/packages/mui-joy/src/CircularProgress/index.ts b/packages/mui-joy/src/CircularProgress/index.ts
index 44a57d7f65fa32..48eed89ec0fb28 100644
--- a/packages/mui-joy/src/CircularProgress/index.ts
+++ b/packages/mui-joy/src/CircularProgress/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './CircularProgress';
 export * from './circularProgressClasses';
 export { default as circularProgressClasses } from './circularProgressClasses';
diff --git a/packages/mui-joy/src/Container/Container.tsx b/packages/mui-joy/src/Container/Container.tsx
index 0a6d93069b0311..ced9a1d8cc3bf2 100644
--- a/packages/mui-joy/src/Container/Container.tsx
+++ b/packages/mui-joy/src/Container/Container.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { createContainer } from '@mui/system';
 import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
diff --git a/packages/mui-joy/src/Container/index.ts b/packages/mui-joy/src/Container/index.ts
index 40915571d90e2d..6ddd38a25d7ed6 100644
--- a/packages/mui-joy/src/Container/index.ts
+++ b/packages/mui-joy/src/Container/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Container';
 export * from './ContainerProps';
 
diff --git a/packages/mui-joy/src/CssBaseline/CssBaseline.tsx b/packages/mui-joy/src/CssBaseline/CssBaseline.tsx
index a300d506ddf657..c84cdca45b0b3b 100644
--- a/packages/mui-joy/src/CssBaseline/CssBaseline.tsx
+++ b/packages/mui-joy/src/CssBaseline/CssBaseline.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles } from '@mui/system';
diff --git a/packages/mui-joy/src/CssBaseline/index.ts b/packages/mui-joy/src/CssBaseline/index.ts
index 179c14be74d7e1..46a25c92336177 100644
--- a/packages/mui-joy/src/CssBaseline/index.ts
+++ b/packages/mui-joy/src/CssBaseline/index.ts
@@ -1,2 +1,3 @@
+'use client';
 export { default } from './CssBaseline';
 export * from './CssBaselineProps';
diff --git a/packages/mui-joy/src/Divider/Divider.tsx b/packages/mui-joy/src/Divider/Divider.tsx
index fc31b81da60040..024d64f565c0b4 100644
--- a/packages/mui-joy/src/Divider/Divider.tsx
+++ b/packages/mui-joy/src/Divider/Divider.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-joy/src/Divider/index.ts b/packages/mui-joy/src/Divider/index.ts
index 98725df4f93c68..463c38d3c0f6b0 100644
--- a/packages/mui-joy/src/Divider/index.ts
+++ b/packages/mui-joy/src/Divider/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Divider';
 export { default as dividerClasses } from './dividerClasses';
 export * from './dividerClasses';
diff --git a/packages/mui-joy/src/FormControl/FormControl.tsx b/packages/mui-joy/src/FormControl/FormControl.tsx
index 77423f2044e98e..91a43e6cb93228 100644
--- a/packages/mui-joy/src/FormControl/FormControl.tsx
+++ b/packages/mui-joy/src/FormControl/FormControl.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-joy/src/FormControl/index.ts b/packages/mui-joy/src/FormControl/index.ts
index 0a506dbac76ac0..08cbd066eef357 100644
--- a/packages/mui-joy/src/FormControl/index.ts
+++ b/packages/mui-joy/src/FormControl/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './FormControl';
 export * from './formControlClasses';
 export { default as formControlClasses } from './formControlClasses';
diff --git a/packages/mui-joy/src/FormHelperText/FormHelperText.tsx b/packages/mui-joy/src/FormHelperText/FormHelperText.tsx
index d034471d91978b..26ac0d341b12f2 100644
--- a/packages/mui-joy/src/FormHelperText/FormHelperText.tsx
+++ b/packages/mui-joy/src/FormHelperText/FormHelperText.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
diff --git a/packages/mui-joy/src/FormHelperText/index.ts b/packages/mui-joy/src/FormHelperText/index.ts
index 8531159ad19a86..e7ab52fb176e8b 100644
--- a/packages/mui-joy/src/FormHelperText/index.ts
+++ b/packages/mui-joy/src/FormHelperText/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './FormHelperText';
 export { default as formHelperTextClasses } from './formHelperTextClasses';
 export * from './formHelperTextClasses';
diff --git a/packages/mui-joy/src/FormLabel/FormLabel.tsx b/packages/mui-joy/src/FormLabel/FormLabel.tsx
index 322241176e24ee..f2de55989caae9 100644
--- a/packages/mui-joy/src/FormLabel/FormLabel.tsx
+++ b/packages/mui-joy/src/FormLabel/FormLabel.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
diff --git a/packages/mui-joy/src/FormLabel/index.ts b/packages/mui-joy/src/FormLabel/index.ts
index 2859bb1ff04879..3c37eda127833d 100644
--- a/packages/mui-joy/src/FormLabel/index.ts
+++ b/packages/mui-joy/src/FormLabel/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './FormLabel';
 export { default as formLabelClasses } from './formLabelClasses';
 export * from './formLabelClasses';
diff --git a/packages/mui-joy/src/Grid/Grid.tsx b/packages/mui-joy/src/Grid/Grid.tsx
index b9f0de1b8490ee..36ff967c1f3de4 100644
--- a/packages/mui-joy/src/Grid/Grid.tsx
+++ b/packages/mui-joy/src/Grid/Grid.tsx
@@ -1,3 +1,4 @@
+'use client';
 import PropTypes from 'prop-types';
 import { createGrid } from '@mui/system/Unstable_Grid';
 import { OverridableComponent } from '@mui/types';
diff --git a/packages/mui-joy/src/Grid/index.ts b/packages/mui-joy/src/Grid/index.ts
index 5a981d71842eb3..d9e2e3542ecc98 100644
--- a/packages/mui-joy/src/Grid/index.ts
+++ b/packages/mui-joy/src/Grid/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Grid';
 export * from './GridProps';
 export { default as gridClasses } from './gridClasses';
diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx
index 49d708ea50cb96..a0b69a70a77a48 100644
--- a/packages/mui-joy/src/IconButton/IconButton.tsx
+++ b/packages/mui-joy/src/IconButton/IconButton.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_capitalize as capitalize, unstable_useForkRef as useForkRef } from '@mui/utils';
diff --git a/packages/mui-joy/src/IconButton/index.ts b/packages/mui-joy/src/IconButton/index.ts
index f30d909e64c437..475c12c4a62ab6 100644
--- a/packages/mui-joy/src/IconButton/index.ts
+++ b/packages/mui-joy/src/IconButton/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './IconButton';
 export * from './IconButtonProps';
 export { default as iconButtonClasses } from './iconButtonClasses';
diff --git a/packages/mui-joy/src/Input/Input.tsx b/packages/mui-joy/src/Input/Input.tsx
index 2106ce42d07434..fbe8f3f679eb8f 100644
--- a/packages/mui-joy/src/Input/Input.tsx
+++ b/packages/mui-joy/src/Input/Input.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
diff --git a/packages/mui-joy/src/Input/index.ts b/packages/mui-joy/src/Input/index.ts
index 6e1694aa348886..bda49e416efc31 100644
--- a/packages/mui-joy/src/Input/index.ts
+++ b/packages/mui-joy/src/Input/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Input';
 export * from './InputProps';
 export { default as inputClasses } from './inputClasses';
diff --git a/packages/mui-joy/src/Input/useForwardedInput.ts b/packages/mui-joy/src/Input/useForwardedInput.ts
index 71f784fc886344..c6b84f47c6f24e 100644
--- a/packages/mui-joy/src/Input/useForwardedInput.ts
+++ b/packages/mui-joy/src/Input/useForwardedInput.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import useInput from '@mui/base/useInput';
 import FormControlContext, { FormControlContextValue } from '../FormControl/FormControlContext';
diff --git a/packages/mui-joy/src/LinearProgress/LinearProgress.tsx b/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
index 500d072d6d9846..9c073337b14f29 100644
--- a/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
+++ b/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-joy/src/LinearProgress/index.ts b/packages/mui-joy/src/LinearProgress/index.ts
index 4ed393247c7524..38162c030ee9e6 100644
--- a/packages/mui-joy/src/LinearProgress/index.ts
+++ b/packages/mui-joy/src/LinearProgress/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './LinearProgress';
 export * from './linearProgressClasses';
 export { default as linearProgressClasses } from './linearProgressClasses';
diff --git a/packages/mui-joy/src/Link/Link.tsx b/packages/mui-joy/src/Link/Link.tsx
index e3af640cba8b72..c61f7601f67a70 100644
--- a/packages/mui-joy/src/Link/Link.tsx
+++ b/packages/mui-joy/src/Link/Link.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
diff --git a/packages/mui-joy/src/Link/index.ts b/packages/mui-joy/src/Link/index.ts
index 6d27032b85f297..a914ee466d9bd6 100644
--- a/packages/mui-joy/src/Link/index.ts
+++ b/packages/mui-joy/src/Link/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Link';
 export * from './linkClasses';
 export { default as linkClasses } from './linkClasses';
diff --git a/packages/mui-joy/src/List/List.tsx b/packages/mui-joy/src/List/List.tsx
index 2ec8b0457c0f51..8363384cd5c90c 100644
--- a/packages/mui-joy/src/List/List.tsx
+++ b/packages/mui-joy/src/List/List.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-joy/src/List/ListProvider.tsx b/packages/mui-joy/src/List/ListProvider.tsx
index ede16d584c5e5a..1659e47fbdbe19 100644
--- a/packages/mui-joy/src/List/ListProvider.tsx
+++ b/packages/mui-joy/src/List/ListProvider.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import RowListContext from './RowListContext';
 import WrapListContext from './WrapListContext';
diff --git a/packages/mui-joy/src/List/index.ts b/packages/mui-joy/src/List/index.ts
index 0c4820c05816dc..5f99c44d12ace4 100644
--- a/packages/mui-joy/src/List/index.ts
+++ b/packages/mui-joy/src/List/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './List';
 export { default as listClasses } from './listClasses';
 export * from './listClasses';
diff --git a/packages/mui-joy/src/ListDivider/ListDivider.tsx b/packages/mui-joy/src/ListDivider/ListDivider.tsx
index da72ca0f259e66..6cddaa59367f56 100644
--- a/packages/mui-joy/src/ListDivider/ListDivider.tsx
+++ b/packages/mui-joy/src/ListDivider/ListDivider.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-joy/src/ListDivider/index.ts b/packages/mui-joy/src/ListDivider/index.ts
index 5f6e2e0af599eb..1d7f1428fd42ee 100644
--- a/packages/mui-joy/src/ListDivider/index.ts
+++ b/packages/mui-joy/src/ListDivider/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ListDivider';
 export { default as listDividerClasses } from './listDividerClasses';
 export * from './listDividerClasses';
diff --git a/packages/mui-joy/src/ListItem/ListItem.tsx b/packages/mui-joy/src/ListItem/ListItem.tsx
index 825842cbabb183..203fda83e63274 100644
--- a/packages/mui-joy/src/ListItem/ListItem.tsx
+++ b/packages/mui-joy/src/ListItem/ListItem.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-joy/src/ListItem/index.ts b/packages/mui-joy/src/ListItem/index.ts
index c4a83c1b180527..0f5a15fbf4e562 100644
--- a/packages/mui-joy/src/ListItem/index.ts
+++ b/packages/mui-joy/src/ListItem/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ListItem';
 export { default as listItemClasses } from './listItemClasses';
 export * from './listItemClasses';
diff --git a/packages/mui-joy/src/ListItemButton/ListItemButton.tsx b/packages/mui-joy/src/ListItemButton/ListItemButton.tsx
index d6fadc9724dd6c..c1977eac09fbd9 100644
--- a/packages/mui-joy/src/ListItemButton/ListItemButton.tsx
+++ b/packages/mui-joy/src/ListItemButton/ListItemButton.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-joy/src/ListItemButton/index.ts b/packages/mui-joy/src/ListItemButton/index.ts
index c7db1d9a690d3f..655a937dcd6d47 100644
--- a/packages/mui-joy/src/ListItemButton/index.ts
+++ b/packages/mui-joy/src/ListItemButton/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ListItemButton';
 export { default as listItemButtonClasses } from './listItemButtonClasses';
 export * from './listItemButtonClasses';
diff --git a/packages/mui-joy/src/ListItemContent/ListItemContent.tsx b/packages/mui-joy/src/ListItemContent/ListItemContent.tsx
index c70e58f9b39f75..1b111e42762113 100644
--- a/packages/mui-joy/src/ListItemContent/ListItemContent.tsx
+++ b/packages/mui-joy/src/ListItemContent/ListItemContent.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-joy/src/ListItemContent/index.ts b/packages/mui-joy/src/ListItemContent/index.ts
index 5c55dcf74bd894..16f7cfbca6031f 100644
--- a/packages/mui-joy/src/ListItemContent/index.ts
+++ b/packages/mui-joy/src/ListItemContent/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ListItemContent';
 export { default as listItemContentClasses } from './listItemContentClasses';
 export * from './listItemContentClasses';
diff --git a/packages/mui-joy/src/ListItemDecorator/ListItemDecorator.tsx b/packages/mui-joy/src/ListItemDecorator/ListItemDecorator.tsx
index 3ab06c702b7b65..8ee585c68c3297 100644
--- a/packages/mui-joy/src/ListItemDecorator/ListItemDecorator.tsx
+++ b/packages/mui-joy/src/ListItemDecorator/ListItemDecorator.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-joy/src/ListItemDecorator/index.ts b/packages/mui-joy/src/ListItemDecorator/index.ts
index 64caaecba13594..8a100627f29271 100644
--- a/packages/mui-joy/src/ListItemDecorator/index.ts
+++ b/packages/mui-joy/src/ListItemDecorator/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ListItemDecorator';
 export { default as listItemDecoratorClasses } from './listItemDecoratorClasses';
 export * from './listItemDecoratorClasses';
diff --git a/packages/mui-joy/src/ListSubheader/ListSubheader.tsx b/packages/mui-joy/src/ListSubheader/ListSubheader.tsx
index 9e51de50060691..ae18eb49638931 100644
--- a/packages/mui-joy/src/ListSubheader/ListSubheader.tsx
+++ b/packages/mui-joy/src/ListSubheader/ListSubheader.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-joy/src/ListSubheader/index.ts b/packages/mui-joy/src/ListSubheader/index.ts
index 7e85a94191be8d..4166c0494c5028 100644
--- a/packages/mui-joy/src/ListSubheader/index.ts
+++ b/packages/mui-joy/src/ListSubheader/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ListSubheader';
 export { default as listSubheaderClasses } from './listSubheaderClasses';
 export * from './listSubheaderClasses';
diff --git a/packages/mui-joy/src/Menu/Menu.tsx b/packages/mui-joy/src/Menu/Menu.tsx
index bdb3463806fb02..fa09a1741d6aee 100644
--- a/packages/mui-joy/src/Menu/Menu.tsx
+++ b/packages/mui-joy/src/Menu/Menu.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_capitalize as capitalize, HTMLElementType, refType } from '@mui/utils';
diff --git a/packages/mui-joy/src/Menu/index.ts b/packages/mui-joy/src/Menu/index.ts
index 2124dff2567749..fd7e898536e4e5 100644
--- a/packages/mui-joy/src/Menu/index.ts
+++ b/packages/mui-joy/src/Menu/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Menu';
 export { default as menuClasses } from './menuClasses';
 export * from './menuClasses';
diff --git a/packages/mui-joy/src/MenuItem/MenuItem.tsx b/packages/mui-joy/src/MenuItem/MenuItem.tsx
index 6a56baeba294dc..4d01c4e6dfb286 100644
--- a/packages/mui-joy/src/MenuItem/MenuItem.tsx
+++ b/packages/mui-joy/src/MenuItem/MenuItem.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
diff --git a/packages/mui-joy/src/MenuItem/index.ts b/packages/mui-joy/src/MenuItem/index.ts
index ae19cf4f840060..7370b8101c1c91 100644
--- a/packages/mui-joy/src/MenuItem/index.ts
+++ b/packages/mui-joy/src/MenuItem/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './MenuItem';
 export { default as menuItemClasses } from './menuItemClasses';
 export * from './menuItemClasses';
diff --git a/packages/mui-joy/src/MenuList/MenuList.tsx b/packages/mui-joy/src/MenuList/MenuList.tsx
index 885d43a5e1555a..33083ad4c45c01 100644
--- a/packages/mui-joy/src/MenuList/MenuList.tsx
+++ b/packages/mui-joy/src/MenuList/MenuList.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_capitalize as capitalize, refType } from '@mui/utils';
diff --git a/packages/mui-joy/src/MenuList/index.ts b/packages/mui-joy/src/MenuList/index.ts
index 0d68d9bcb40f4e..93ddb6f926c6da 100644
--- a/packages/mui-joy/src/MenuList/index.ts
+++ b/packages/mui-joy/src/MenuList/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './MenuList';
 export { default as menuListClasses } from './menuListClasses';
 export * from './menuListClasses';
diff --git a/packages/mui-joy/src/Modal/Modal.tsx b/packages/mui-joy/src/Modal/Modal.tsx
index 9f760aec930a8f..ea0be026b306a8 100644
--- a/packages/mui-joy/src/Modal/Modal.tsx
+++ b/packages/mui-joy/src/Modal/Modal.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
diff --git a/packages/mui-joy/src/Modal/index.ts b/packages/mui-joy/src/Modal/index.ts
index 426ec988208a72..73b29561062658 100644
--- a/packages/mui-joy/src/Modal/index.ts
+++ b/packages/mui-joy/src/Modal/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Modal';
 export * from './modalClasses';
 export { default as modalClasses } from './modalClasses';
diff --git a/packages/mui-joy/src/ModalClose/ModalClose.tsx b/packages/mui-joy/src/ModalClose/ModalClose.tsx
index e941feb1dbfe5f..71938f8862d81f 100644
--- a/packages/mui-joy/src/ModalClose/ModalClose.tsx
+++ b/packages/mui-joy/src/ModalClose/ModalClose.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
diff --git a/packages/mui-joy/src/ModalClose/index.ts b/packages/mui-joy/src/ModalClose/index.ts
index 3612cb7bfcfdab..6e1119abfd5e9e 100644
--- a/packages/mui-joy/src/ModalClose/index.ts
+++ b/packages/mui-joy/src/ModalClose/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ModalClose';
 export * from './modalCloseClasses';
 export { default as modalCloseClasses } from './modalCloseClasses';
diff --git a/packages/mui-joy/src/ModalDialog/ModalDialog.tsx b/packages/mui-joy/src/ModalDialog/ModalDialog.tsx
index 6fa868dd36a33b..5111d07a2ae83c 100644
--- a/packages/mui-joy/src/ModalDialog/ModalDialog.tsx
+++ b/packages/mui-joy/src/ModalDialog/ModalDialog.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-joy/src/ModalDialog/index.ts b/packages/mui-joy/src/ModalDialog/index.ts
index c15073416b2509..09a7ee9533637d 100644
--- a/packages/mui-joy/src/ModalDialog/index.ts
+++ b/packages/mui-joy/src/ModalDialog/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ModalDialog';
 export * from './modalDialogClasses';
 export { default as modalDialogClasses } from './modalDialogClasses';
diff --git a/packages/mui-joy/src/ModalOverflow/ModalOverflow.tsx b/packages/mui-joy/src/ModalOverflow/ModalOverflow.tsx
index 8381be18309c6a..53b028c10745db 100644
--- a/packages/mui-joy/src/ModalOverflow/ModalOverflow.tsx
+++ b/packages/mui-joy/src/ModalOverflow/ModalOverflow.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
diff --git a/packages/mui-joy/src/ModalOverflow/index.ts b/packages/mui-joy/src/ModalOverflow/index.ts
index de9a6a34c491c1..696abb5b8b5cef 100644
--- a/packages/mui-joy/src/ModalOverflow/index.ts
+++ b/packages/mui-joy/src/ModalOverflow/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ModalOverflow';
 export * from './modalOverflowClasses';
 export { default as modalOverflowClasses } from './modalOverflowClasses';
diff --git a/packages/mui-joy/src/Option/Option.tsx b/packages/mui-joy/src/Option/Option.tsx
index dfcdffdb68e6bd..f02b596f99ebab 100644
--- a/packages/mui-joy/src/Option/Option.tsx
+++ b/packages/mui-joy/src/Option/Option.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/base/composeClasses';
diff --git a/packages/mui-joy/src/Option/index.ts b/packages/mui-joy/src/Option/index.ts
index 36144d0672fa1d..6e5716eb8df59e 100644
--- a/packages/mui-joy/src/Option/index.ts
+++ b/packages/mui-joy/src/Option/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Option';
 export { default as optionClasses } from './optionClasses';
 export * from './optionClasses';
diff --git a/packages/mui-joy/src/Radio/Radio.tsx b/packages/mui-joy/src/Radio/Radio.tsx
index ad59705634338a..8057a0238a932b 100644
--- a/packages/mui-joy/src/Radio/Radio.tsx
+++ b/packages/mui-joy/src/Radio/Radio.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
diff --git a/packages/mui-joy/src/Radio/index.ts b/packages/mui-joy/src/Radio/index.ts
index f315fa4d29b963..e4697a3f7ec187 100644
--- a/packages/mui-joy/src/Radio/index.ts
+++ b/packages/mui-joy/src/Radio/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Radio';
 export { default as radioClasses } from './radioClasses';
 export * from './radioClasses';
diff --git a/packages/mui-joy/src/RadioGroup/RadioGroup.tsx b/packages/mui-joy/src/RadioGroup/RadioGroup.tsx
index 4dd54a369f2872..6355d6d915e832 100644
--- a/packages/mui-joy/src/RadioGroup/RadioGroup.tsx
+++ b/packages/mui-joy/src/RadioGroup/RadioGroup.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-joy/src/RadioGroup/index.ts b/packages/mui-joy/src/RadioGroup/index.ts
index 02e1ca75139914..aea701723c2b4f 100644
--- a/packages/mui-joy/src/RadioGroup/index.ts
+++ b/packages/mui-joy/src/RadioGroup/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './RadioGroup';
 export { default as radioGroupClasses } from './radioGroupClasses';
 export * from './radioGroupClasses';
diff --git a/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.tsx b/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.tsx
index e235a3f9fc1028..8bb9188e984075 100644
--- a/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.tsx
+++ b/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-joy/src/ScopedCssBaseline/index.ts b/packages/mui-joy/src/ScopedCssBaseline/index.ts
index bec39f16cd316c..c8982287ca6d12 100644
--- a/packages/mui-joy/src/ScopedCssBaseline/index.ts
+++ b/packages/mui-joy/src/ScopedCssBaseline/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ScopedCssBaseline';
 export * from './ScopedCssBaselineProps';
 export { default as scopedCssBaselineClasses } from './scopedCssBaselineClasses';
diff --git a/packages/mui-joy/src/Select/Select.tsx b/packages/mui-joy/src/Select/Select.tsx
index e62acafe34df73..daf2329cbf7bbd 100644
--- a/packages/mui-joy/src/Select/Select.tsx
+++ b/packages/mui-joy/src/Select/Select.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-joy/src/Select/index.ts b/packages/mui-joy/src/Select/index.ts
index 8838449fd5d6fa..dd6c63c90fcfce 100644
--- a/packages/mui-joy/src/Select/index.ts
+++ b/packages/mui-joy/src/Select/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Select';
 export * from './SelectProps';
 export { default as selectClasses } from './selectClasses';
diff --git a/packages/mui-joy/src/Sheet/Sheet.tsx b/packages/mui-joy/src/Sheet/Sheet.tsx
index ec7ef96773f4fd..45c12af82be191 100644
--- a/packages/mui-joy/src/Sheet/Sheet.tsx
+++ b/packages/mui-joy/src/Sheet/Sheet.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-joy/src/Sheet/index.ts b/packages/mui-joy/src/Sheet/index.ts
index 3a45d047c73333..121b70ced0cf87 100644
--- a/packages/mui-joy/src/Sheet/index.ts
+++ b/packages/mui-joy/src/Sheet/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Sheet';
 export * from './sheetClasses';
 export { default as sheetClasses } from './sheetClasses';
diff --git a/packages/mui-joy/src/Slider/Slider.tsx b/packages/mui-joy/src/Slider/Slider.tsx
index 00b4ee4dc65134..873a4e32cc69e4 100644
--- a/packages/mui-joy/src/Slider/Slider.tsx
+++ b/packages/mui-joy/src/Slider/Slider.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-joy/src/Slider/index.ts b/packages/mui-joy/src/Slider/index.ts
index 1cfe65a7186029..9c831ddb98d38b 100644
--- a/packages/mui-joy/src/Slider/index.ts
+++ b/packages/mui-joy/src/Slider/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Slider';
 export * from './sliderClasses';
 export { default as sliderClasses } from './sliderClasses';
diff --git a/packages/mui-joy/src/Stack/Stack.tsx b/packages/mui-joy/src/Stack/Stack.tsx
index dd9f27d4440991..050701533181d7 100644
--- a/packages/mui-joy/src/Stack/Stack.tsx
+++ b/packages/mui-joy/src/Stack/Stack.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { createStack } from '@mui/system';
 import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
diff --git a/packages/mui-joy/src/Stack/index.ts b/packages/mui-joy/src/Stack/index.ts
index 4f3fa2e1c84858..4cb10618d7d1be 100644
--- a/packages/mui-joy/src/Stack/index.ts
+++ b/packages/mui-joy/src/Stack/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Stack';
 export * from './StackProps';
 
diff --git a/packages/mui-joy/src/SvgIcon/SvgIcon.tsx b/packages/mui-joy/src/SvgIcon/SvgIcon.tsx
index 574861409faa3d..747dbbef864537 100644
--- a/packages/mui-joy/src/SvgIcon/SvgIcon.tsx
+++ b/packages/mui-joy/src/SvgIcon/SvgIcon.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { OverridableComponent } from '@mui/types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
diff --git a/packages/mui-joy/src/SvgIcon/index.ts b/packages/mui-joy/src/SvgIcon/index.ts
index 4ecec6ee8d814e..059c67f7f2c035 100644
--- a/packages/mui-joy/src/SvgIcon/index.ts
+++ b/packages/mui-joy/src/SvgIcon/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './SvgIcon';
 export * from './SvgIconProps';
 export { default as svgIconClasses } from './svgIconClasses';
diff --git a/packages/mui-joy/src/Switch/Switch.tsx b/packages/mui-joy/src/Switch/Switch.tsx
index 18f9a45533952c..0d413d1d733c44 100644
--- a/packages/mui-joy/src/Switch/Switch.tsx
+++ b/packages/mui-joy/src/Switch/Switch.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
diff --git a/packages/mui-joy/src/Switch/index.ts b/packages/mui-joy/src/Switch/index.ts
index 2c190ccd5f69b4..fc73710fc6b750 100644
--- a/packages/mui-joy/src/Switch/index.ts
+++ b/packages/mui-joy/src/Switch/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Switch';
 export { default as switchClasses } from './switchClasses';
 export * from './switchClasses';
diff --git a/packages/mui-joy/src/Tab/Tab.tsx b/packages/mui-joy/src/Tab/Tab.tsx
index 962013d589165b..ddec79c4b9c51b 100644
--- a/packages/mui-joy/src/Tab/Tab.tsx
+++ b/packages/mui-joy/src/Tab/Tab.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
diff --git a/packages/mui-joy/src/Tab/index.ts b/packages/mui-joy/src/Tab/index.ts
index 974eb9868050d3..c9d3d35b2d54cb 100644
--- a/packages/mui-joy/src/Tab/index.ts
+++ b/packages/mui-joy/src/Tab/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Tab';
 export * from './tabClasses';
 export { default as tabClasses } from './tabClasses';
diff --git a/packages/mui-joy/src/TabList/TabList.tsx b/packages/mui-joy/src/TabList/TabList.tsx
index a47ab032e990de..84f01900a8649c 100644
--- a/packages/mui-joy/src/TabList/TabList.tsx
+++ b/packages/mui-joy/src/TabList/TabList.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
diff --git a/packages/mui-joy/src/TabList/index.ts b/packages/mui-joy/src/TabList/index.ts
index b35c807435d338..8a21cc29136f75 100644
--- a/packages/mui-joy/src/TabList/index.ts
+++ b/packages/mui-joy/src/TabList/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './TabList';
 export * from './tabListClasses';
 export { default as tabListClasses } from './tabListClasses';
diff --git a/packages/mui-joy/src/TabPanel/TabPanel.tsx b/packages/mui-joy/src/TabPanel/TabPanel.tsx
index ab8dca9721aad3..903da6bcf620da 100644
--- a/packages/mui-joy/src/TabPanel/TabPanel.tsx
+++ b/packages/mui-joy/src/TabPanel/TabPanel.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
diff --git a/packages/mui-joy/src/TabPanel/index.ts b/packages/mui-joy/src/TabPanel/index.ts
index ff9a08902de0f3..9171601c462a1e 100644
--- a/packages/mui-joy/src/TabPanel/index.ts
+++ b/packages/mui-joy/src/TabPanel/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './TabPanel';
 export * from './tabPanelClasses';
 export { default as tabPanelClasses } from './tabPanelClasses';
diff --git a/packages/mui-joy/src/Table/Table.tsx b/packages/mui-joy/src/Table/Table.tsx
index 62bb1ef3ed95eb..08e090d95e6544 100644
--- a/packages/mui-joy/src/Table/Table.tsx
+++ b/packages/mui-joy/src/Table/Table.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-joy/src/Table/index.ts b/packages/mui-joy/src/Table/index.ts
index 0bcd389394be06..63b5fc013fd3b2 100644
--- a/packages/mui-joy/src/Table/index.ts
+++ b/packages/mui-joy/src/Table/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Table';
 export * from './tableClasses';
 export { default as tableClasses } from './tableClasses';
diff --git a/packages/mui-joy/src/Tabs/Tabs.tsx b/packages/mui-joy/src/Tabs/Tabs.tsx
index d629d7349e3d07..4d5e3aedba32c6 100644
--- a/packages/mui-joy/src/Tabs/Tabs.tsx
+++ b/packages/mui-joy/src/Tabs/Tabs.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
diff --git a/packages/mui-joy/src/Tabs/index.ts b/packages/mui-joy/src/Tabs/index.ts
index 6396048dca1ec7..70378920b5b207 100644
--- a/packages/mui-joy/src/Tabs/index.ts
+++ b/packages/mui-joy/src/Tabs/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Tabs';
 export * from './tabsClasses';
 export { default as tabsClasses } from './tabsClasses';
diff --git a/packages/mui-joy/src/TextField/TextField.tsx b/packages/mui-joy/src/TextField/TextField.tsx
index 70a34d59f6e751..2485248fe52813 100644
--- a/packages/mui-joy/src/TextField/TextField.tsx
+++ b/packages/mui-joy/src/TextField/TextField.tsx
@@ -1,3 +1,4 @@
+'use client';
 /**
  * @ignore - do not document.
  */
diff --git a/packages/mui-joy/src/TextField/index.ts b/packages/mui-joy/src/TextField/index.ts
index 0198002999a808..f8cd03c69cdf5e 100644
--- a/packages/mui-joy/src/TextField/index.ts
+++ b/packages/mui-joy/src/TextField/index.ts
@@ -1 +1,2 @@
+'use client';
 export { default } from './TextField';
diff --git a/packages/mui-joy/src/Textarea/Textarea.tsx b/packages/mui-joy/src/Textarea/Textarea.tsx
index edc6372e3686d7..85ca855f68fa77 100644
--- a/packages/mui-joy/src/Textarea/Textarea.tsx
+++ b/packages/mui-joy/src/Textarea/Textarea.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
diff --git a/packages/mui-joy/src/Textarea/index.ts b/packages/mui-joy/src/Textarea/index.ts
index 4b7d47c97ebc6d..c1df8aa9f77a55 100644
--- a/packages/mui-joy/src/Textarea/index.ts
+++ b/packages/mui-joy/src/Textarea/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Textarea';
 export * from './TextareaProps';
 export { default as textareaClasses } from './textareaClasses';
diff --git a/packages/mui-joy/src/Tooltip/Tooltip.tsx b/packages/mui-joy/src/Tooltip/Tooltip.tsx
index 170ef30b3085a7..e232e274a43bb2 100644
--- a/packages/mui-joy/src/Tooltip/Tooltip.tsx
+++ b/packages/mui-joy/src/Tooltip/Tooltip.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-joy/src/Tooltip/index.ts b/packages/mui-joy/src/Tooltip/index.ts
index d9fccd402f603d..52eb39f3ec0778 100644
--- a/packages/mui-joy/src/Tooltip/index.ts
+++ b/packages/mui-joy/src/Tooltip/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Tooltip';
 export * from './tooltipClasses';
 export { default as tooltipClasses } from './tooltipClasses';
diff --git a/packages/mui-joy/src/Typography/Typography.tsx b/packages/mui-joy/src/Typography/Typography.tsx
index 003f674c11963e..b378c35aff5e6f 100644
--- a/packages/mui-joy/src/Typography/Typography.tsx
+++ b/packages/mui-joy/src/Typography/Typography.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
diff --git a/packages/mui-joy/src/Typography/index.ts b/packages/mui-joy/src/Typography/index.ts
index bbaa51027683f6..48221d9679291b 100644
--- a/packages/mui-joy/src/Typography/index.ts
+++ b/packages/mui-joy/src/Typography/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Typography';
 export * from './TypographyProps';
 export { default as typographyClasses } from './typographyClasses';
diff --git a/packages/mui-joy/src/index.ts b/packages/mui-joy/src/index.ts
index cc9490c014b730..660ae522b08279 100644
--- a/packages/mui-joy/src/index.ts
+++ b/packages/mui-joy/src/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default as colors } from './colors';
 export * from './styles';
 
diff --git a/packages/mui-joy/src/internal/svg-icons/ArrowDropDown.tsx b/packages/mui-joy/src/internal/svg-icons/ArrowDropDown.tsx
index 2c6a702fc7ccf8..a6726a90b39ce6 100644
--- a/packages/mui-joy/src/internal/svg-icons/ArrowDropDown.tsx
+++ b/packages/mui-joy/src/internal/svg-icons/ArrowDropDown.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-joy/src/internal/svg-icons/Cancel.tsx b/packages/mui-joy/src/internal/svg-icons/Cancel.tsx
index c7d894363dcf6f..190e4cfafb5ff4 100644
--- a/packages/mui-joy/src/internal/svg-icons/Cancel.tsx
+++ b/packages/mui-joy/src/internal/svg-icons/Cancel.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-joy/src/internal/svg-icons/Check.tsx b/packages/mui-joy/src/internal/svg-icons/Check.tsx
index df60ce3b8ec51f..809e36906bf83e 100644
--- a/packages/mui-joy/src/internal/svg-icons/Check.tsx
+++ b/packages/mui-joy/src/internal/svg-icons/Check.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-joy/src/internal/svg-icons/Close.tsx b/packages/mui-joy/src/internal/svg-icons/Close.tsx
index 5b34cb5af35359..4d2792dbaee63c 100644
--- a/packages/mui-joy/src/internal/svg-icons/Close.tsx
+++ b/packages/mui-joy/src/internal/svg-icons/Close.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-joy/src/internal/svg-icons/HorizontalRule.tsx b/packages/mui-joy/src/internal/svg-icons/HorizontalRule.tsx
index a5dcd0ee43d5cd..15a36b25ce71e7 100644
--- a/packages/mui-joy/src/internal/svg-icons/HorizontalRule.tsx
+++ b/packages/mui-joy/src/internal/svg-icons/HorizontalRule.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-joy/src/internal/svg-icons/Person.tsx b/packages/mui-joy/src/internal/svg-icons/Person.tsx
index ade5e396968bbf..52de5b678ac881 100644
--- a/packages/mui-joy/src/internal/svg-icons/Person.tsx
+++ b/packages/mui-joy/src/internal/svg-icons/Person.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-joy/src/internal/svg-icons/Unfold.tsx b/packages/mui-joy/src/internal/svg-icons/Unfold.tsx
index 67b5e240bc80f1..7162fca648c357 100644
--- a/packages/mui-joy/src/internal/svg-icons/Unfold.tsx
+++ b/packages/mui-joy/src/internal/svg-icons/Unfold.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-joy/src/styles/ColorInversion.tsx b/packages/mui-joy/src/styles/ColorInversion.tsx
index 6cd07bbe721f71..3c03b8277a59f0 100644
--- a/packages/mui-joy/src/styles/ColorInversion.tsx
+++ b/packages/mui-joy/src/styles/ColorInversion.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useTheme } from './ThemeProvider';
 import defaultTheme from './defaultTheme';
diff --git a/packages/mui-joy/src/styles/CssVarsProvider.tsx b/packages/mui-joy/src/styles/CssVarsProvider.tsx
index e68e68f3959749..0195d61b27ea59 100644
--- a/packages/mui-joy/src/styles/CssVarsProvider.tsx
+++ b/packages/mui-joy/src/styles/CssVarsProvider.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { deepmerge } from '@mui/utils';
 import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
 import defaultTheme from './defaultTheme';
diff --git a/packages/mui-joy/src/styles/ThemeProvider.tsx b/packages/mui-joy/src/styles/ThemeProvider.tsx
index 555d7c2ce2f98b..f0ba9c0ad63c95 100644
--- a/packages/mui-joy/src/styles/ThemeProvider.tsx
+++ b/packages/mui-joy/src/styles/ThemeProvider.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { ThemeProvider as SystemThemeProvider, useTheme as useSystemTheme } from '@mui/system';
 import defaultTheme from './defaultTheme';
diff --git a/packages/mui-joy/src/styles/index.ts b/packages/mui-joy/src/styles/index.ts
index d55d378582eaae..6e1d99df90d37e 100644
--- a/packages/mui-joy/src/styles/index.ts
+++ b/packages/mui-joy/src/styles/index.ts
@@ -1,3 +1,4 @@
+'use client';
 // reexports from system for module augmentation
 export type { BreakpointOverrides } from '@mui/system';
 
diff --git a/packages/mui-joy/src/styles/useThemeProps.ts b/packages/mui-joy/src/styles/useThemeProps.ts
index 982a7d860daa4e..0d1e9c3eec55e0 100644
--- a/packages/mui-joy/src/styles/useThemeProps.ts
+++ b/packages/mui-joy/src/styles/useThemeProps.ts
@@ -1,3 +1,4 @@
+'use client';
 import { useThemeProps as systemUseThemeProps } from '@mui/system';
 import defaultTheme from './defaultTheme';
 import THEME_ID from './identifier';
diff --git a/packages/mui-joy/src/utils/index.ts b/packages/mui-joy/src/utils/index.ts
index 75299a21ac5071..62124dcc5cefdb 100644
--- a/packages/mui-joy/src/utils/index.ts
+++ b/packages/mui-joy/src/utils/index.ts
@@ -1,2 +1,3 @@
+'use client';
 // eslint-disable-next-line import/prefer-default-export
 export { default as createSvgIcon } from './createSvgIcon';
diff --git a/packages/mui-joy/src/utils/useSlot.ts b/packages/mui-joy/src/utils/useSlot.ts
index a2ea3aa622015d..78ba64fe8fd1b7 100644
--- a/packages/mui-joy/src/utils/useSlot.ts
+++ b/packages/mui-joy/src/utils/useSlot.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { ClassValue } from 'clsx';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
diff --git a/packages/mui-material-next/src/Button/Button.tsx b/packages/mui-material-next/src/Button/Button.tsx
index ad28159f51f949..df462b9d2f2277 100644
--- a/packages/mui-material-next/src/Button/Button.tsx
+++ b/packages/mui-material-next/src/Button/Button.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material-next/src/Button/Ripple.tsx b/packages/mui-material-next/src/Button/Ripple.tsx
index a64144dc94aa37..d9a936048f7b53 100644
--- a/packages/mui-material-next/src/Button/Ripple.tsx
+++ b/packages/mui-material-next/src/Button/Ripple.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material-next/src/Button/TouchRipple.tsx b/packages/mui-material-next/src/Button/TouchRipple.tsx
index 24d2b18d1854a5..3c7eb27767a83b 100644
--- a/packages/mui-material-next/src/Button/TouchRipple.tsx
+++ b/packages/mui-material-next/src/Button/TouchRipple.tsx
@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable material-ui/mui-name-matches-component-name */
 import * as React from 'react';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-material-next/src/Button/index.ts b/packages/mui-material-next/src/Button/index.ts
index 176aaa81470666..226bd02a0f124c 100644
--- a/packages/mui-material-next/src/Button/index.ts
+++ b/packages/mui-material-next/src/Button/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Button';
 export * from './Button';
 
diff --git a/packages/mui-material-next/src/Button/useTouchRipple.ts b/packages/mui-material-next/src/Button/useTouchRipple.ts
index 83d0146eabad70..0411092b8efc3a 100644
--- a/packages/mui-material-next/src/Button/useTouchRipple.ts
+++ b/packages/mui-material-next/src/Button/useTouchRipple.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useEventCallback } from '@mui/material/utils';
 import { TouchRippleActions } from './TouchRipple.types';
diff --git a/packages/mui-material-next/src/Input/Input.js b/packages/mui-material-next/src/Input/Input.js
index 612b00c7ab2d72..c20a0e38dfa333 100644
--- a/packages/mui-material-next/src/Input/Input.js
+++ b/packages/mui-material-next/src/Input/Input.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material-next/src/Input/index.ts b/packages/mui-material-next/src/Input/index.ts
index 3524122b86f4c8..19804cf1e64e01 100644
--- a/packages/mui-material-next/src/Input/index.ts
+++ b/packages/mui-material-next/src/Input/index.ts
@@ -1,2 +1,3 @@
+'use client';
 export { default } from './Input';
 export { default as inputClasses } from './inputClasses';
diff --git a/packages/mui-material-next/src/Slider/Slider.tsx b/packages/mui-material-next/src/Slider/Slider.tsx
index 32068351679c1c..906e6a28ae4621 100644
--- a/packages/mui-material-next/src/Slider/Slider.tsx
+++ b/packages/mui-material-next/src/Slider/Slider.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material-next/src/Slider/index.ts b/packages/mui-material-next/src/Slider/index.ts
index ac3427028230ed..4e20c2e2b8a724 100644
--- a/packages/mui-material-next/src/Slider/index.ts
+++ b/packages/mui-material-next/src/Slider/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Slider';
 export * from './Slider';
 
diff --git a/packages/mui-material-next/src/Tab/Tab.js b/packages/mui-material-next/src/Tab/Tab.js
index bfb4e3b2ca6d9d..6de0aa28015869 100644
--- a/packages/mui-material-next/src/Tab/Tab.js
+++ b/packages/mui-material-next/src/Tab/Tab.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material-next/src/Tab/index.js b/packages/mui-material-next/src/Tab/index.js
index 7c828ba9dd2757..29213284d8cbd8 100644
--- a/packages/mui-material-next/src/Tab/index.js
+++ b/packages/mui-material-next/src/Tab/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Tab';
 
 export { default as tabClasses } from './tabClasses';
diff --git a/packages/mui-material-next/src/TabScrollButton/TabScrollButton.js b/packages/mui-material-next/src/TabScrollButton/TabScrollButton.js
index c3cfd142081bff..7fd686b57ed0e6 100644
--- a/packages/mui-material-next/src/TabScrollButton/TabScrollButton.js
+++ b/packages/mui-material-next/src/TabScrollButton/TabScrollButton.js
@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable jsx-a11y/aria-role */
 import * as React from 'react';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-material-next/src/TabScrollButton/index.js b/packages/mui-material-next/src/TabScrollButton/index.js
index 6c84cb4dca3377..15aa330441752b 100644
--- a/packages/mui-material-next/src/TabScrollButton/index.js
+++ b/packages/mui-material-next/src/TabScrollButton/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './TabScrollButton';
 
 export { default as tabScrollButtonClasses } from './tabScrollButtonClasses';
diff --git a/packages/mui-material-next/src/TablePagination/TablePagination.js b/packages/mui-material-next/src/TablePagination/TablePagination.js
index 36ab161dbcb944..94fad6a8d663c7 100644
--- a/packages/mui-material-next/src/TablePagination/TablePagination.js
+++ b/packages/mui-material-next/src/TablePagination/TablePagination.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material-next/src/TablePagination/index.js b/packages/mui-material-next/src/TablePagination/index.js
index a331f1abcf6e48..12c25d2f980416 100644
--- a/packages/mui-material-next/src/TablePagination/index.js
+++ b/packages/mui-material-next/src/TablePagination/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './TablePagination';
 
 export { default as tablePaginationClasses } from './tablePaginationClasses';
diff --git a/packages/mui-material-next/src/Tabs/ScrollbarSize.js b/packages/mui-material-next/src/Tabs/ScrollbarSize.js
index c34ea165e85684..1c75f89f6f6acd 100644
--- a/packages/mui-material-next/src/Tabs/ScrollbarSize.js
+++ b/packages/mui-material-next/src/Tabs/ScrollbarSize.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_debounce as debounce, unstable_ownerWindow as ownerWindow } from '@mui/utils';
diff --git a/packages/mui-material-next/src/Tabs/Tabs.js b/packages/mui-material-next/src/Tabs/Tabs.js
index 9dcca65a0d32a2..f92e0f53378ed1 100644
--- a/packages/mui-material-next/src/Tabs/Tabs.js
+++ b/packages/mui-material-next/src/Tabs/Tabs.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material-next/src/Tabs/TabsList.js b/packages/mui-material-next/src/Tabs/TabsList.js
index 3359506906d912..099c06b73342dd 100644
--- a/packages/mui-material-next/src/Tabs/TabsList.js
+++ b/packages/mui-material-next/src/Tabs/TabsList.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
diff --git a/packages/mui-material-next/src/Tabs/TabsListContext.js b/packages/mui-material-next/src/Tabs/TabsListContext.js
index 8230cb50b80e39..7628450081b116 100644
--- a/packages/mui-material-next/src/Tabs/TabsListContext.js
+++ b/packages/mui-material-next/src/Tabs/TabsListContext.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 const TabsListContext = React.createContext(null);
diff --git a/packages/mui-material-next/src/Tabs/index.js b/packages/mui-material-next/src/Tabs/index.js
index c0e4122744acdb..e026a0ff9036ed 100644
--- a/packages/mui-material-next/src/Tabs/index.js
+++ b/packages/mui-material-next/src/Tabs/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Tabs';
 
 export { default as tabsClasses } from './tabsClasses';
diff --git a/packages/mui-material-next/src/index.ts b/packages/mui-material-next/src/index.ts
index 3a22ac3d8989a5..5188a73e9713b2 100644
--- a/packages/mui-material-next/src/index.ts
+++ b/packages/mui-material-next/src/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default as Button } from './Button';
 export * from './Button';
 
diff --git a/packages/mui-material-next/src/styles/CssVarsProvider.tsx b/packages/mui-material-next/src/styles/CssVarsProvider.tsx
index 38b3926119c0a7..178f52bff56320 100644
--- a/packages/mui-material-next/src/styles/CssVarsProvider.tsx
+++ b/packages/mui-material-next/src/styles/CssVarsProvider.tsx
@@ -1,3 +1,4 @@
+'use client';
 import {
   unstable_createCssVarsProvider as createCssVarsProvider,
   unstable_styleFunctionSx as styleFunctionSx,
diff --git a/packages/mui-material-next/src/styles/index.ts b/packages/mui-material-next/src/styles/index.ts
index af7fba1e1cda44..80f4acb6429d54 100644
--- a/packages/mui-material-next/src/styles/index.ts
+++ b/packages/mui-material-next/src/styles/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export * from './Theme.types';
 export * from './extendTheme';
 export { default as extendTheme } from './extendTheme';
diff --git a/packages/mui-material-next/src/styles/useTheme.ts b/packages/mui-material-next/src/styles/useTheme.ts
index 1b697bb953a99a..7ed3bde0980c9c 100644
--- a/packages/mui-material-next/src/styles/useTheme.ts
+++ b/packages/mui-material-next/src/styles/useTheme.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useTheme as useSystemTheme } from '@mui/system';
 import defaultTheme from './defaultTheme';
diff --git a/packages/mui-material-next/src/styles/useThemeProps.ts b/packages/mui-material-next/src/styles/useThemeProps.ts
index 982a7d860daa4e..0d1e9c3eec55e0 100644
--- a/packages/mui-material-next/src/styles/useThemeProps.ts
+++ b/packages/mui-material-next/src/styles/useThemeProps.ts
@@ -1,3 +1,4 @@
+'use client';
 import { useThemeProps as systemUseThemeProps } from '@mui/system';
 import defaultTheme from './defaultTheme';
 import THEME_ID from './identifier';
diff --git a/packages/mui-material/scripts/rollup.config.js b/packages/mui-material/scripts/rollup.config.js
index d2c908030ba59f..bf9c5210451e08 100644
--- a/packages/mui-material/scripts/rollup.config.js
+++ b/packages/mui-material/scripts/rollup.config.js
@@ -154,6 +154,9 @@ const nodeOptions = {
 };
 
 function onwarn(warning) {
+  if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
+    return;
+  }
   if (
     warning.code === 'UNUSED_EXTERNAL_IMPORT' &&
     warning.source === 'react' &&
@@ -180,6 +183,7 @@ export default [
       format: 'umd',
       name: 'MaterialUI',
       globals,
+      intro: "'use client';",
     },
     external: Object.keys(globals),
     plugins: [
@@ -199,6 +203,7 @@ export default [
       format: 'umd',
       name: 'MaterialUI',
       globals,
+      intro: "'use client';",
     },
     external: Object.keys(globals),
     plugins: [
diff --git a/packages/mui-material/src/Accordion/Accordion.js b/packages/mui-material/src/Accordion/Accordion.js
index 50edbe4ff75a08..9b8499361c5e92 100644
--- a/packages/mui-material/src/Accordion/Accordion.js
+++ b/packages/mui-material/src/Accordion/Accordion.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-material/src/Accordion/AccordionContext.js b/packages/mui-material/src/Accordion/AccordionContext.js
index 03678e262b9678..fa7897bcb2cdc7 100644
--- a/packages/mui-material/src/Accordion/AccordionContext.js
+++ b/packages/mui-material/src/Accordion/AccordionContext.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 /**
diff --git a/packages/mui-material/src/Accordion/index.js b/packages/mui-material/src/Accordion/index.js
index b2837010c768f9..03d1665af340de 100644
--- a/packages/mui-material/src/Accordion/index.js
+++ b/packages/mui-material/src/Accordion/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Accordion';
 
 export { default as accordionClasses } from './accordionClasses';
diff --git a/packages/mui-material/src/AccordionActions/AccordionActions.js b/packages/mui-material/src/AccordionActions/AccordionActions.js
index 72c4c55af628c6..4d8042807c3847 100644
--- a/packages/mui-material/src/AccordionActions/AccordionActions.js
+++ b/packages/mui-material/src/AccordionActions/AccordionActions.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/AccordionActions/index.js b/packages/mui-material/src/AccordionActions/index.js
index a3292ff6ef4ed3..d90d77d966b30a 100644
--- a/packages/mui-material/src/AccordionActions/index.js
+++ b/packages/mui-material/src/AccordionActions/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './AccordionActions';
 
 export { default as accordionActionsClasses } from './accordionActionsClasses';
diff --git a/packages/mui-material/src/AccordionDetails/AccordionDetails.js b/packages/mui-material/src/AccordionDetails/AccordionDetails.js
index a00c59aca3f1b4..f565f911a54ec0 100644
--- a/packages/mui-material/src/AccordionDetails/AccordionDetails.js
+++ b/packages/mui-material/src/AccordionDetails/AccordionDetails.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/AccordionDetails/index.js b/packages/mui-material/src/AccordionDetails/index.js
index c08755bfc6b29a..38dc39b1ffc14d 100644
--- a/packages/mui-material/src/AccordionDetails/index.js
+++ b/packages/mui-material/src/AccordionDetails/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './AccordionDetails';
 
 export { default as accordionDetailsClasses } from './accordionDetailsClasses';
diff --git a/packages/mui-material/src/AccordionSummary/AccordionSummary.js b/packages/mui-material/src/AccordionSummary/AccordionSummary.js
index 5510841e172be0..e53643d6888597 100644
--- a/packages/mui-material/src/AccordionSummary/AccordionSummary.js
+++ b/packages/mui-material/src/AccordionSummary/AccordionSummary.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/AccordionSummary/index.js b/packages/mui-material/src/AccordionSummary/index.js
index cc296ecd83e54e..8117df1e4a0f50 100644
--- a/packages/mui-material/src/AccordionSummary/index.js
+++ b/packages/mui-material/src/AccordionSummary/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './AccordionSummary';
 
 export { default as accordionSummaryClasses } from './accordionSummaryClasses';
diff --git a/packages/mui-material/src/Alert/Alert.js b/packages/mui-material/src/Alert/Alert.js
index 701361a5fe81a5..f495e76b62f47a 100644
--- a/packages/mui-material/src/Alert/Alert.js
+++ b/packages/mui-material/src/Alert/Alert.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Alert/index.js b/packages/mui-material/src/Alert/index.js
index ae354db3f6bcac..c978509837fd40 100644
--- a/packages/mui-material/src/Alert/index.js
+++ b/packages/mui-material/src/Alert/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Alert';
 
 export { default as alertClasses } from './alertClasses';
diff --git a/packages/mui-material/src/AlertTitle/AlertTitle.js b/packages/mui-material/src/AlertTitle/AlertTitle.js
index 2cb0a395346476..e1d3f59115e6d0 100644
--- a/packages/mui-material/src/AlertTitle/AlertTitle.js
+++ b/packages/mui-material/src/AlertTitle/AlertTitle.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/AlertTitle/index.js b/packages/mui-material/src/AlertTitle/index.js
index a8d06452a44bfa..88dfd77e0aa3fb 100644
--- a/packages/mui-material/src/AlertTitle/index.js
+++ b/packages/mui-material/src/AlertTitle/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './AlertTitle';
 
 export { default as alertTitleClasses } from './alertTitleClasses';
diff --git a/packages/mui-material/src/AppBar/AppBar.js b/packages/mui-material/src/AppBar/AppBar.js
index c554d23751ee2d..9283bbc16e2b9c 100644
--- a/packages/mui-material/src/AppBar/AppBar.js
+++ b/packages/mui-material/src/AppBar/AppBar.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/AppBar/index.js b/packages/mui-material/src/AppBar/index.js
index d1102ae64ed7c5..117d47f9047283 100644
--- a/packages/mui-material/src/AppBar/index.js
+++ b/packages/mui-material/src/AppBar/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './AppBar';
 
 export { default as appBarClasses } from './appBarClasses';
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
index 38ee8605c8baf7..49a8bc6fc5f823 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Autocomplete/index.js b/packages/mui-material/src/Autocomplete/index.js
index bc2577ca4c03c3..e57635491208e4 100644
--- a/packages/mui-material/src/Autocomplete/index.js
+++ b/packages/mui-material/src/Autocomplete/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default, createFilterOptions } from './Autocomplete';
 
 export { default as autocompleteClasses } from './autocompleteClasses';
diff --git a/packages/mui-material/src/Avatar/Avatar.js b/packages/mui-material/src/Avatar/Avatar.js
index 9a99024a115fb8..96d9920c5fc794 100644
--- a/packages/mui-material/src/Avatar/Avatar.js
+++ b/packages/mui-material/src/Avatar/Avatar.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Avatar/index.js b/packages/mui-material/src/Avatar/index.js
index 08248f841869fb..7343e9915fb2b8 100644
--- a/packages/mui-material/src/Avatar/index.js
+++ b/packages/mui-material/src/Avatar/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Avatar';
 
 export { default as avatarClasses } from './avatarClasses';
diff --git a/packages/mui-material/src/AvatarGroup/AvatarGroup.js b/packages/mui-material/src/AvatarGroup/AvatarGroup.js
index f61fd8f0bdaed5..f253a9660cec1a 100644
--- a/packages/mui-material/src/AvatarGroup/AvatarGroup.js
+++ b/packages/mui-material/src/AvatarGroup/AvatarGroup.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { isFragment } from 'react-is';
diff --git a/packages/mui-material/src/AvatarGroup/index.js b/packages/mui-material/src/AvatarGroup/index.js
index d3a39cb2673cf5..16930c7dc05548 100644
--- a/packages/mui-material/src/AvatarGroup/index.js
+++ b/packages/mui-material/src/AvatarGroup/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './AvatarGroup';
 export { default as avatarGroupClasses } from './avatarGroupClasses';
 export * from './avatarGroupClasses';
diff --git a/packages/mui-material/src/Backdrop/Backdrop.js b/packages/mui-material/src/Backdrop/Backdrop.js
index 9dd2f4081fd818..6723aba3aff94a 100644
--- a/packages/mui-material/src/Backdrop/Backdrop.js
+++ b/packages/mui-material/src/Backdrop/Backdrop.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Backdrop/index.js b/packages/mui-material/src/Backdrop/index.js
index 31e877d1ad425d..3fe812acfeef22 100644
--- a/packages/mui-material/src/Backdrop/index.js
+++ b/packages/mui-material/src/Backdrop/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Backdrop';
 export { default as backdropClasses } from './backdropClasses';
 export * from './backdropClasses';
diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js
index 2f84b6b0515176..de46bb3b232a2d 100644
--- a/packages/mui-material/src/Badge/Badge.js
+++ b/packages/mui-material/src/Badge/Badge.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Badge/index.js b/packages/mui-material/src/Badge/index.js
index 42f9d0102195b5..7ac0cf0142bf01 100644
--- a/packages/mui-material/src/Badge/index.js
+++ b/packages/mui-material/src/Badge/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Badge';
 
 export { default as badgeClasses } from './badgeClasses';
diff --git a/packages/mui-material/src/BottomNavigation/BottomNavigation.js b/packages/mui-material/src/BottomNavigation/BottomNavigation.js
index c67686e7df8ce4..21039b2a75fb48 100755
--- a/packages/mui-material/src/BottomNavigation/BottomNavigation.js
+++ b/packages/mui-material/src/BottomNavigation/BottomNavigation.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-material/src/BottomNavigation/index.js b/packages/mui-material/src/BottomNavigation/index.js
index e35a344d097b26..f9b197b0f72014 100644
--- a/packages/mui-material/src/BottomNavigation/index.js
+++ b/packages/mui-material/src/BottomNavigation/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './BottomNavigation';
 
 export { default as bottomNavigationClasses } from './bottomNavigationClasses';
diff --git a/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.js b/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.js
index 6bcb8ef71f8249..9defd35d077201 100644
--- a/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.js
+++ b/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/BottomNavigationAction/index.js b/packages/mui-material/src/BottomNavigationAction/index.js
index 377af4979d46ac..2cfdda3d675d4e 100644
--- a/packages/mui-material/src/BottomNavigationAction/index.js
+++ b/packages/mui-material/src/BottomNavigationAction/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './BottomNavigationAction';
 
 export { default as bottomNavigationActionClasses } from './bottomNavigationActionClasses';
diff --git a/packages/mui-material/src/Box/Box.js b/packages/mui-material/src/Box/Box.js
index 1e371d0a6fecbe..898282f9d4fd59 100644
--- a/packages/mui-material/src/Box/Box.js
+++ b/packages/mui-material/src/Box/Box.js
@@ -1,3 +1,4 @@
+'use client';
 import { createBox } from '@mui/system';
 import PropTypes from 'prop-types';
 import { unstable_ClassNameGenerator as ClassNameGenerator } from '../className';
diff --git a/packages/mui-material/src/Box/index.js b/packages/mui-material/src/Box/index.js
index a3e93ac53516a6..b59b10fc26a0bf 100644
--- a/packages/mui-material/src/Box/index.js
+++ b/packages/mui-material/src/Box/index.js
@@ -1 +1,2 @@
+'use client';
 export { default } from './Box';
diff --git a/packages/mui-material/src/Breadcrumbs/BreadcrumbCollapsed.js b/packages/mui-material/src/Breadcrumbs/BreadcrumbCollapsed.js
index de9040d347001b..7ae564eca375dc 100644
--- a/packages/mui-material/src/Breadcrumbs/BreadcrumbCollapsed.js
+++ b/packages/mui-material/src/Breadcrumbs/BreadcrumbCollapsed.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { emphasize } from '@mui/system';
diff --git a/packages/mui-material/src/Breadcrumbs/Breadcrumbs.js b/packages/mui-material/src/Breadcrumbs/Breadcrumbs.js
index 126bf7c1ad0d6e..8e2db08de8be01 100644
--- a/packages/mui-material/src/Breadcrumbs/Breadcrumbs.js
+++ b/packages/mui-material/src/Breadcrumbs/Breadcrumbs.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-material/src/Breadcrumbs/index.js b/packages/mui-material/src/Breadcrumbs/index.js
index 77829cbf764cab..bc5f92abb8214b 100644
--- a/packages/mui-material/src/Breadcrumbs/index.js
+++ b/packages/mui-material/src/Breadcrumbs/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Breadcrumbs';
 
 export { default as breadcrumbsClasses } from './breadcrumbsClasses';
diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js
index 9200bfc02ed727..94f62bc229c36b 100644
--- a/packages/mui-material/src/Button/Button.js
+++ b/packages/mui-material/src/Button/Button.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Button/index.js b/packages/mui-material/src/Button/index.js
index f100af2969849b..e45e9d01cf1efc 100644
--- a/packages/mui-material/src/Button/index.js
+++ b/packages/mui-material/src/Button/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Button';
 
 export { default as buttonClasses } from './buttonClasses';
diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.js b/packages/mui-material/src/ButtonBase/ButtonBase.js
index eb5f352dceffd0..414a9d640303c3 100644
--- a/packages/mui-material/src/ButtonBase/ButtonBase.js
+++ b/packages/mui-material/src/ButtonBase/ButtonBase.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/ButtonBase/Ripple.js b/packages/mui-material/src/ButtonBase/Ripple.js
index ae9ac4f6e965d1..8435331a1d098a 100644
--- a/packages/mui-material/src/ButtonBase/Ripple.js
+++ b/packages/mui-material/src/ButtonBase/Ripple.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/ButtonBase/TouchRipple.js b/packages/mui-material/src/ButtonBase/TouchRipple.js
index bbd0061a1d0484..fc6b3f2ba34a5f 100644
--- a/packages/mui-material/src/ButtonBase/TouchRipple.js
+++ b/packages/mui-material/src/ButtonBase/TouchRipple.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { TransitionGroup } from 'react-transition-group';
diff --git a/packages/mui-material/src/ButtonBase/index.js b/packages/mui-material/src/ButtonBase/index.js
index ffa71222f42f55..5410b8280a670a 100644
--- a/packages/mui-material/src/ButtonBase/index.js
+++ b/packages/mui-material/src/ButtonBase/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ButtonBase';
 
 export { default as buttonBaseClasses } from './buttonBaseClasses';
diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.js
index dcb85716b68e47..5da40ef477a658 100644
--- a/packages/mui-material/src/ButtonGroup/ButtonGroup.js
+++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/ButtonGroup/index.js b/packages/mui-material/src/ButtonGroup/index.js
index ec97e2482590a9..3a585146bc9596 100644
--- a/packages/mui-material/src/ButtonGroup/index.js
+++ b/packages/mui-material/src/ButtonGroup/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ButtonGroup';
 export { default as buttonGroupClasses } from './buttonGroupClasses';
 export * from './buttonGroupClasses';
diff --git a/packages/mui-material/src/Card/Card.js b/packages/mui-material/src/Card/Card.js
index cf0c80261a9994..4096024e4a22b2 100644
--- a/packages/mui-material/src/Card/Card.js
+++ b/packages/mui-material/src/Card/Card.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Card/index.js b/packages/mui-material/src/Card/index.js
index ee2a4ca12c471b..69fb6f6d7854fc 100644
--- a/packages/mui-material/src/Card/index.js
+++ b/packages/mui-material/src/Card/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Card';
 
 export { default as cardClasses } from './cardClasses';
diff --git a/packages/mui-material/src/CardActionArea/CardActionArea.js b/packages/mui-material/src/CardActionArea/CardActionArea.js
index 6362ea987a501a..73d57f745819e4 100644
--- a/packages/mui-material/src/CardActionArea/CardActionArea.js
+++ b/packages/mui-material/src/CardActionArea/CardActionArea.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/CardActionArea/index.js b/packages/mui-material/src/CardActionArea/index.js
index 88e3b45b30a7e0..72966e9aecc281 100644
--- a/packages/mui-material/src/CardActionArea/index.js
+++ b/packages/mui-material/src/CardActionArea/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './CardActionArea';
 
 export { default as cardActionAreaClasses } from './cardActionAreaClasses';
diff --git a/packages/mui-material/src/CardActions/CardActions.js b/packages/mui-material/src/CardActions/CardActions.js
index 1d50d694d4f6d3..20ff129c06930f 100644
--- a/packages/mui-material/src/CardActions/CardActions.js
+++ b/packages/mui-material/src/CardActions/CardActions.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/CardActions/index.js b/packages/mui-material/src/CardActions/index.js
index 42d895fc2fbaf2..574cafdd683eb5 100644
--- a/packages/mui-material/src/CardActions/index.js
+++ b/packages/mui-material/src/CardActions/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './CardActions';
 
 export { default as cardActionsClasses } from './cardActionsClasses';
diff --git a/packages/mui-material/src/CardContent/CardContent.js b/packages/mui-material/src/CardContent/CardContent.js
index ba5a7cd979d7dc..d16f79166eeff0 100644
--- a/packages/mui-material/src/CardContent/CardContent.js
+++ b/packages/mui-material/src/CardContent/CardContent.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/CardContent/index.js b/packages/mui-material/src/CardContent/index.js
index 3ee40db9b57671..d3fd480cb35648 100644
--- a/packages/mui-material/src/CardContent/index.js
+++ b/packages/mui-material/src/CardContent/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './CardContent';
 
 export { default as cardContentClasses } from './cardContentClasses';
diff --git a/packages/mui-material/src/CardHeader/CardHeader.js b/packages/mui-material/src/CardHeader/CardHeader.js
index f99c5d24333f69..f2451270e23a9e 100644
--- a/packages/mui-material/src/CardHeader/CardHeader.js
+++ b/packages/mui-material/src/CardHeader/CardHeader.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/CardHeader/index.js b/packages/mui-material/src/CardHeader/index.js
index 7f66c751b27942..7c4f88d11adb39 100644
--- a/packages/mui-material/src/CardHeader/index.js
+++ b/packages/mui-material/src/CardHeader/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './CardHeader';
 
 export { default as cardHeaderClasses } from './cardHeaderClasses';
diff --git a/packages/mui-material/src/CardMedia/CardMedia.js b/packages/mui-material/src/CardMedia/CardMedia.js
index df6d43a72854d8..9ce402e7af12e1 100644
--- a/packages/mui-material/src/CardMedia/CardMedia.js
+++ b/packages/mui-material/src/CardMedia/CardMedia.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/CardMedia/index.js b/packages/mui-material/src/CardMedia/index.js
index b20f3170c16b8a..58d227e9bc2d21 100644
--- a/packages/mui-material/src/CardMedia/index.js
+++ b/packages/mui-material/src/CardMedia/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './CardMedia';
 
 export { default as cardMediaClasses } from './cardMediaClasses';
diff --git a/packages/mui-material/src/Checkbox/Checkbox.js b/packages/mui-material/src/Checkbox/Checkbox.js
index feeb8a7b3725ae..a25d4fc8ee4807 100644
--- a/packages/mui-material/src/Checkbox/Checkbox.js
+++ b/packages/mui-material/src/Checkbox/Checkbox.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Checkbox/index.js b/packages/mui-material/src/Checkbox/index.js
index 55883a5457b284..5211c7ab6487b7 100644
--- a/packages/mui-material/src/Checkbox/index.js
+++ b/packages/mui-material/src/Checkbox/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Checkbox';
 
 export { default as checkboxClasses } from './checkboxClasses';
diff --git a/packages/mui-material/src/Chip/Chip.js b/packages/mui-material/src/Chip/Chip.js
index dbbd6e03929186..2157251c44b2ea 100644
--- a/packages/mui-material/src/Chip/Chip.js
+++ b/packages/mui-material/src/Chip/Chip.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Chip/index.js b/packages/mui-material/src/Chip/index.js
index 5c7f16c51acddf..81875ce0035fcc 100644
--- a/packages/mui-material/src/Chip/index.js
+++ b/packages/mui-material/src/Chip/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Chip';
 
 export { default as chipClasses } from './chipClasses';
diff --git a/packages/mui-material/src/CircularProgress/CircularProgress.js b/packages/mui-material/src/CircularProgress/CircularProgress.js
index 824b9086c9bf0b..8f2b4950121bda 100644
--- a/packages/mui-material/src/CircularProgress/CircularProgress.js
+++ b/packages/mui-material/src/CircularProgress/CircularProgress.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/CircularProgress/index.js b/packages/mui-material/src/CircularProgress/index.js
index 16ab4399604db7..0541327cc71d2d 100644
--- a/packages/mui-material/src/CircularProgress/index.js
+++ b/packages/mui-material/src/CircularProgress/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './CircularProgress';
 
 export { default as circularProgressClasses } from './circularProgressClasses';
diff --git a/packages/mui-material/src/Collapse/Collapse.js b/packages/mui-material/src/Collapse/Collapse.js
index 20c231fee46a3e..5e1e5834b804c6 100644
--- a/packages/mui-material/src/Collapse/Collapse.js
+++ b/packages/mui-material/src/Collapse/Collapse.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-material/src/Collapse/index.js b/packages/mui-material/src/Collapse/index.js
index 1d0361f84f2fb6..2c51ce3e77ed46 100644
--- a/packages/mui-material/src/Collapse/index.js
+++ b/packages/mui-material/src/Collapse/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Collapse';
 
 export { default as collapseClasses } from './collapseClasses';
diff --git a/packages/mui-material/src/Container/Container.js b/packages/mui-material/src/Container/Container.js
index 63c2f720d13736..bfb7fdb3850a82 100644
--- a/packages/mui-material/src/Container/Container.js
+++ b/packages/mui-material/src/Container/Container.js
@@ -1,3 +1,4 @@
+'use client';
 import PropTypes from 'prop-types';
 import { createContainer } from '@mui/system';
 import capitalize from '../utils/capitalize';
diff --git a/packages/mui-material/src/Container/index.js b/packages/mui-material/src/Container/index.js
index be7c5c912f5943..0a922c1c8dee82 100644
--- a/packages/mui-material/src/Container/index.js
+++ b/packages/mui-material/src/Container/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Container';
 
 export { default as containerClasses } from './containerClasses';
diff --git a/packages/mui-material/src/CssBaseline/CssBaseline.js b/packages/mui-material/src/CssBaseline/CssBaseline.js
index c2a55eb7ebbebe..61746fc991f5ef 100644
--- a/packages/mui-material/src/CssBaseline/CssBaseline.js
+++ b/packages/mui-material/src/CssBaseline/CssBaseline.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useThemeProps from '../styles/useThemeProps';
diff --git a/packages/mui-material/src/CssBaseline/index.js b/packages/mui-material/src/CssBaseline/index.js
index fbc808d4492709..348940ca2ea43a 100644
--- a/packages/mui-material/src/CssBaseline/index.js
+++ b/packages/mui-material/src/CssBaseline/index.js
@@ -1 +1,2 @@
+'use client';
 export { default } from './CssBaseline';
diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js
index 44b3f894d8fbe2..011e72cdd283e5 100644
--- a/packages/mui-material/src/Dialog/Dialog.js
+++ b/packages/mui-material/src/Dialog/Dialog.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Dialog/index.js b/packages/mui-material/src/Dialog/index.js
index 88fdcc2dbdef96..f6428c3e45d610 100644
--- a/packages/mui-material/src/Dialog/index.js
+++ b/packages/mui-material/src/Dialog/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Dialog';
 
 export { default as dialogClasses } from './dialogClasses';
diff --git a/packages/mui-material/src/DialogActions/DialogActions.js b/packages/mui-material/src/DialogActions/DialogActions.js
index 46c08503e10744..0f32ee87b86cfb 100644
--- a/packages/mui-material/src/DialogActions/DialogActions.js
+++ b/packages/mui-material/src/DialogActions/DialogActions.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/DialogActions/index.js b/packages/mui-material/src/DialogActions/index.js
index e01426ff8b3ecb..2cd37c898aa606 100644
--- a/packages/mui-material/src/DialogActions/index.js
+++ b/packages/mui-material/src/DialogActions/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './DialogActions';
 
 export { default as dialogActionsClasses } from './dialogActionsClasses';
diff --git a/packages/mui-material/src/DialogContent/DialogContent.js b/packages/mui-material/src/DialogContent/DialogContent.js
index 70ad93b8f83cb8..aa7033f0df8c6c 100644
--- a/packages/mui-material/src/DialogContent/DialogContent.js
+++ b/packages/mui-material/src/DialogContent/DialogContent.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/DialogContent/index.js b/packages/mui-material/src/DialogContent/index.js
index 6a64cd0760cb1e..8594f9de368d11 100644
--- a/packages/mui-material/src/DialogContent/index.js
+++ b/packages/mui-material/src/DialogContent/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './DialogContent';
 
 export { default as dialogContentClasses } from './dialogContentClasses';
diff --git a/packages/mui-material/src/DialogContentText/DialogContentText.js b/packages/mui-material/src/DialogContentText/DialogContentText.js
index 3af86c1590ba3d..01ec5a6284d617 100644
--- a/packages/mui-material/src/DialogContentText/DialogContentText.js
+++ b/packages/mui-material/src/DialogContentText/DialogContentText.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/DialogContentText/index.js b/packages/mui-material/src/DialogContentText/index.js
index ac4e6138a5497d..c3d56494787dbd 100644
--- a/packages/mui-material/src/DialogContentText/index.js
+++ b/packages/mui-material/src/DialogContentText/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './DialogContentText';
 
 export { default as dialogContentTextClasses } from './dialogContentTextClasses';
diff --git a/packages/mui-material/src/DialogTitle/DialogTitle.js b/packages/mui-material/src/DialogTitle/DialogTitle.js
index 534c19d0d5d5cd..5d47f018668e60 100644
--- a/packages/mui-material/src/DialogTitle/DialogTitle.js
+++ b/packages/mui-material/src/DialogTitle/DialogTitle.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/DialogTitle/index.js b/packages/mui-material/src/DialogTitle/index.js
index 05be8d699e12dd..7d2af51cd0824d 100644
--- a/packages/mui-material/src/DialogTitle/index.js
+++ b/packages/mui-material/src/DialogTitle/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './DialogTitle';
 
 export { default as dialogTitleClasses } from './dialogTitleClasses';
diff --git a/packages/mui-material/src/Divider/Divider.js b/packages/mui-material/src/Divider/Divider.js
index fb188a6450e74d..68402587ddd813 100644
--- a/packages/mui-material/src/Divider/Divider.js
+++ b/packages/mui-material/src/Divider/Divider.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Divider/index.js b/packages/mui-material/src/Divider/index.js
index cd0c47ad59025f..6f37070be42115 100644
--- a/packages/mui-material/src/Divider/index.js
+++ b/packages/mui-material/src/Divider/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Divider';
 
 export { default as dividerClasses } from './dividerClasses';
diff --git a/packages/mui-material/src/Drawer/Drawer.js b/packages/mui-material/src/Drawer/Drawer.js
index bd9024214b870e..6b72ea6e0ec764 100644
--- a/packages/mui-material/src/Drawer/Drawer.js
+++ b/packages/mui-material/src/Drawer/Drawer.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Drawer/index.js b/packages/mui-material/src/Drawer/index.js
index 2df2f33268b1f5..c86f5d60e1cd06 100644
--- a/packages/mui-material/src/Drawer/index.js
+++ b/packages/mui-material/src/Drawer/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Drawer';
 
 export { default as drawerClasses } from './drawerClasses';
diff --git a/packages/mui-material/src/Fab/Fab.js b/packages/mui-material/src/Fab/Fab.js
index e11aa1fa02b34d..335cff571e03ab 100644
--- a/packages/mui-material/src/Fab/Fab.js
+++ b/packages/mui-material/src/Fab/Fab.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Fab/index.js b/packages/mui-material/src/Fab/index.js
index e5fd203ad858c0..7a50d9ba5b8ddd 100644
--- a/packages/mui-material/src/Fab/index.js
+++ b/packages/mui-material/src/Fab/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Fab';
 
 export { default as fabClasses } from './fabClasses';
diff --git a/packages/mui-material/src/Fade/Fade.js b/packages/mui-material/src/Fade/Fade.js
index 20f8e44dfb72aa..57df4cd5011747 100644
--- a/packages/mui-material/src/Fade/Fade.js
+++ b/packages/mui-material/src/Fade/Fade.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
diff --git a/packages/mui-material/src/Fade/index.js b/packages/mui-material/src/Fade/index.js
index f2e7306180a9ad..72383924f48901 100644
--- a/packages/mui-material/src/Fade/index.js
+++ b/packages/mui-material/src/Fade/index.js
@@ -1 +1,2 @@
+'use client';
 export { default } from './Fade';
diff --git a/packages/mui-material/src/FilledInput/FilledInput.js b/packages/mui-material/src/FilledInput/FilledInput.js
index fd450188ce4dfb..560ef5fab787da 100644
--- a/packages/mui-material/src/FilledInput/FilledInput.js
+++ b/packages/mui-material/src/FilledInput/FilledInput.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { refType, deepmerge } from '@mui/utils';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-material/src/FilledInput/index.js b/packages/mui-material/src/FilledInput/index.js
index 91b5a314f0050b..d1afd2384ad9b5 100644
--- a/packages/mui-material/src/FilledInput/index.js
+++ b/packages/mui-material/src/FilledInput/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './FilledInput';
 
 export { default as filledInputClasses } from './filledInputClasses';
diff --git a/packages/mui-material/src/FormControl/FormControl.js b/packages/mui-material/src/FormControl/FormControl.js
index 497e7086531e3f..a1dcc596f0d87e 100644
--- a/packages/mui-material/src/FormControl/FormControl.js
+++ b/packages/mui-material/src/FormControl/FormControl.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/FormControl/index.js b/packages/mui-material/src/FormControl/index.js
index 3696a0db431cde..4112e5a979f5f1 100644
--- a/packages/mui-material/src/FormControl/index.js
+++ b/packages/mui-material/src/FormControl/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './FormControl';
 export { default as useFormControl } from './useFormControl';
 
diff --git a/packages/mui-material/src/FormControl/useFormControl.ts b/packages/mui-material/src/FormControl/useFormControl.ts
index 735b95e4b57d04..cf24c6cad1ffe8 100644
--- a/packages/mui-material/src/FormControl/useFormControl.ts
+++ b/packages/mui-material/src/FormControl/useFormControl.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import FormControlContext, { FormControlState } from './FormControlContext';
 
diff --git a/packages/mui-material/src/FormControlLabel/FormControlLabel.js b/packages/mui-material/src/FormControlLabel/FormControlLabel.js
index 566b4c83b04d47..8e1be804698395 100644
--- a/packages/mui-material/src/FormControlLabel/FormControlLabel.js
+++ b/packages/mui-material/src/FormControlLabel/FormControlLabel.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/FormControlLabel/index.js b/packages/mui-material/src/FormControlLabel/index.js
index 9ed089a1a82bf0..9ac194366044ec 100644
--- a/packages/mui-material/src/FormControlLabel/index.js
+++ b/packages/mui-material/src/FormControlLabel/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './FormControlLabel';
 
 export { default as formControlLabelClasses } from './formControlLabelClasses';
diff --git a/packages/mui-material/src/FormGroup/FormGroup.js b/packages/mui-material/src/FormGroup/FormGroup.js
index 5e0701119b97df..c9fa76605ba13c 100644
--- a/packages/mui-material/src/FormGroup/FormGroup.js
+++ b/packages/mui-material/src/FormGroup/FormGroup.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/FormGroup/index.js b/packages/mui-material/src/FormGroup/index.js
index a932a6832a111f..745ba760f17f76 100644
--- a/packages/mui-material/src/FormGroup/index.js
+++ b/packages/mui-material/src/FormGroup/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './FormGroup';
 export { default as formGroupClasses } from './formGroupClasses';
 export * from './formGroupClasses';
diff --git a/packages/mui-material/src/FormHelperText/FormHelperText.js b/packages/mui-material/src/FormHelperText/FormHelperText.js
index 42029d4e73d1d2..a53c516a67c3d5 100644
--- a/packages/mui-material/src/FormHelperText/FormHelperText.js
+++ b/packages/mui-material/src/FormHelperText/FormHelperText.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/FormHelperText/index.js b/packages/mui-material/src/FormHelperText/index.js
index 00261f5370cf62..e2e5b0a06e3444 100644
--- a/packages/mui-material/src/FormHelperText/index.js
+++ b/packages/mui-material/src/FormHelperText/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './FormHelperText';
 
 export { default as formHelperTextClasses } from './formHelperTextClasses';
diff --git a/packages/mui-material/src/FormLabel/FormLabel.js b/packages/mui-material/src/FormLabel/FormLabel.js
index 6369be7a052abb..a60ff45fa8279f 100644
--- a/packages/mui-material/src/FormLabel/FormLabel.js
+++ b/packages/mui-material/src/FormLabel/FormLabel.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/FormLabel/index.js b/packages/mui-material/src/FormLabel/index.js
index f81d2d6d4ed4a4..db05e838ce6da7 100644
--- a/packages/mui-material/src/FormLabel/index.js
+++ b/packages/mui-material/src/FormLabel/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './FormLabel';
 export * from './FormLabel';
 
diff --git a/packages/mui-material/src/GlobalStyles/GlobalStyles.js b/packages/mui-material/src/GlobalStyles/GlobalStyles.js
index c52ac46b3bd8eb..85da6429c1ab73 100644
--- a/packages/mui-material/src/GlobalStyles/GlobalStyles.js
+++ b/packages/mui-material/src/GlobalStyles/GlobalStyles.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles as SystemGlobalStyles } from '@mui/system';
diff --git a/packages/mui-material/src/GlobalStyles/index.js b/packages/mui-material/src/GlobalStyles/index.js
index 48e20189092434..275d047f4e9eb3 100644
--- a/packages/mui-material/src/GlobalStyles/index.js
+++ b/packages/mui-material/src/GlobalStyles/index.js
@@ -1 +1,2 @@
+'use client';
 export { default } from './GlobalStyles';
diff --git a/packages/mui-material/src/Grid/Grid.js b/packages/mui-material/src/Grid/Grid.js
index 789af09f5f776c..3a103bb9ee1398 100644
--- a/packages/mui-material/src/Grid/Grid.js
+++ b/packages/mui-material/src/Grid/Grid.js
@@ -1,3 +1,4 @@
+'use client';
 // A grid component using the following libs as inspiration.
 //
 // For the implementation:
diff --git a/packages/mui-material/src/Grid/GridContext.js b/packages/mui-material/src/Grid/GridContext.js
index 2b774f12c885ec..cd84bb116e9384 100644
--- a/packages/mui-material/src/Grid/GridContext.js
+++ b/packages/mui-material/src/Grid/GridContext.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 /**
diff --git a/packages/mui-material/src/Grid/index.js b/packages/mui-material/src/Grid/index.js
index 7d6e3574239812..c679ea0a45f9fc 100644
--- a/packages/mui-material/src/Grid/index.js
+++ b/packages/mui-material/src/Grid/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Grid';
 
 export { default as gridClasses } from './gridClasses';
diff --git a/packages/mui-material/src/Grow/Grow.js b/packages/mui-material/src/Grow/Grow.js
index d1af437beaf0b4..1eab0e0dad32ef 100644
--- a/packages/mui-material/src/Grow/Grow.js
+++ b/packages/mui-material/src/Grow/Grow.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { elementAcceptingRef } from '@mui/utils';
diff --git a/packages/mui-material/src/Grow/index.js b/packages/mui-material/src/Grow/index.js
index 0bae98f6624cc6..4a0378a0ec0359 100644
--- a/packages/mui-material/src/Grow/index.js
+++ b/packages/mui-material/src/Grow/index.js
@@ -1 +1,2 @@
+'use client';
 export { default } from './Grow';
diff --git a/packages/mui-material/src/Hidden/Hidden.js b/packages/mui-material/src/Hidden/Hidden.js
index b65eb0392fc4d7..5c13fdd48187e7 100644
--- a/packages/mui-material/src/Hidden/Hidden.js
+++ b/packages/mui-material/src/Hidden/Hidden.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import HiddenJs from './HiddenJs';
diff --git a/packages/mui-material/src/Hidden/HiddenCss.js b/packages/mui-material/src/Hidden/HiddenCss.js
index e1e13b0e6e4167..5db25d031629f2 100644
--- a/packages/mui-material/src/Hidden/HiddenCss.js
+++ b/packages/mui-material/src/Hidden/HiddenCss.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-material/src/Hidden/HiddenJs.js b/packages/mui-material/src/Hidden/HiddenJs.js
index 29522f295ecace..5b718c09c008e8 100644
--- a/packages/mui-material/src/Hidden/HiddenJs.js
+++ b/packages/mui-material/src/Hidden/HiddenJs.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { exactProp } from '@mui/utils';
diff --git a/packages/mui-material/src/Hidden/index.js b/packages/mui-material/src/Hidden/index.js
index b786254d40f3d3..ec796de043e77f 100644
--- a/packages/mui-material/src/Hidden/index.js
+++ b/packages/mui-material/src/Hidden/index.js
@@ -1 +1,2 @@
+'use client';
 export { default } from './Hidden';
diff --git a/packages/mui-material/src/Icon/Icon.js b/packages/mui-material/src/Icon/Icon.js
index 45713a8a0e130b..88d1b9b3fe18f0 100644
--- a/packages/mui-material/src/Icon/Icon.js
+++ b/packages/mui-material/src/Icon/Icon.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Icon/index.js b/packages/mui-material/src/Icon/index.js
index 403a0df0626dfc..2d590735b67a17 100644
--- a/packages/mui-material/src/Icon/index.js
+++ b/packages/mui-material/src/Icon/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Icon';
 
 export { default as iconClasses } from './iconClasses';
diff --git a/packages/mui-material/src/IconButton/IconButton.js b/packages/mui-material/src/IconButton/IconButton.js
index 76b63dcbf4504b..25935d63e5f3be 100644
--- a/packages/mui-material/src/IconButton/IconButton.js
+++ b/packages/mui-material/src/IconButton/IconButton.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/IconButton/index.js b/packages/mui-material/src/IconButton/index.js
index 115058c9d6a9f6..f80565936a4435 100644
--- a/packages/mui-material/src/IconButton/index.js
+++ b/packages/mui-material/src/IconButton/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './IconButton';
 
 export { default as iconButtonClasses } from './iconButtonClasses';
diff --git a/packages/mui-material/src/ImageList/ImageList.js b/packages/mui-material/src/ImageList/ImageList.js
index 2a4f1e9e956c33..8614e531b9ddfb 100644
--- a/packages/mui-material/src/ImageList/ImageList.js
+++ b/packages/mui-material/src/ImageList/ImageList.js
@@ -1,3 +1,4 @@
+'use client';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { integerPropType } from '@mui/utils';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/ImageList/ImageListContext.js b/packages/mui-material/src/ImageList/ImageListContext.js
index b745a7c3041cc4..a4c430221d49c1 100644
--- a/packages/mui-material/src/ImageList/ImageListContext.js
+++ b/packages/mui-material/src/ImageList/ImageListContext.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 /**
diff --git a/packages/mui-material/src/ImageList/index.js b/packages/mui-material/src/ImageList/index.js
index 3cbe65e6a2c1bf..d72a5536795bd7 100644
--- a/packages/mui-material/src/ImageList/index.js
+++ b/packages/mui-material/src/ImageList/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ImageList';
 export * from './imageListClasses';
 export { default as imageListClasses } from './imageListClasses';
diff --git a/packages/mui-material/src/ImageListItem/ImageListItem.js b/packages/mui-material/src/ImageListItem/ImageListItem.js
index 26350663267cd0..1ab6a2804d2c75 100644
--- a/packages/mui-material/src/ImageListItem/ImageListItem.js
+++ b/packages/mui-material/src/ImageListItem/ImageListItem.js
@@ -1,3 +1,4 @@
+'use client';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { integerPropType } from '@mui/utils';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/ImageListItem/index.js b/packages/mui-material/src/ImageListItem/index.js
index 3659a0336c3956..d96ad0f3ce4798 100644
--- a/packages/mui-material/src/ImageListItem/index.js
+++ b/packages/mui-material/src/ImageListItem/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ImageListItem';
 
 export * from './imageListItemClasses';
diff --git a/packages/mui-material/src/ImageListItemBar/ImageListItemBar.js b/packages/mui-material/src/ImageListItemBar/ImageListItemBar.js
index bebc8ea36f138f..115245c17dccb0 100644
--- a/packages/mui-material/src/ImageListItemBar/ImageListItemBar.js
+++ b/packages/mui-material/src/ImageListItemBar/ImageListItemBar.js
@@ -1,3 +1,4 @@
+'use client';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-material/src/ImageListItemBar/index.js b/packages/mui-material/src/ImageListItemBar/index.js
index 30060333f44f95..d7617f02c01066 100644
--- a/packages/mui-material/src/ImageListItemBar/index.js
+++ b/packages/mui-material/src/ImageListItemBar/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ImageListItemBar';
 
 export * from './imageListItemBarClasses';
diff --git a/packages/mui-material/src/Input/Input.js b/packages/mui-material/src/Input/Input.js
index 2226c829f8a211..2603ae11981c61 100644
--- a/packages/mui-material/src/Input/Input.js
+++ b/packages/mui-material/src/Input/Input.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
diff --git a/packages/mui-material/src/Input/index.js b/packages/mui-material/src/Input/index.js
index b32ad177dd8e11..58f1c4e3d0cd62 100644
--- a/packages/mui-material/src/Input/index.js
+++ b/packages/mui-material/src/Input/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Input';
 export { default as inputClasses } from './inputClasses';
 export * from './inputClasses';
diff --git a/packages/mui-material/src/InputAdornment/InputAdornment.js b/packages/mui-material/src/InputAdornment/InputAdornment.js
index 05dea355013323..16abffad1483ad 100644
--- a/packages/mui-material/src/InputAdornment/InputAdornment.js
+++ b/packages/mui-material/src/InputAdornment/InputAdornment.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/InputAdornment/index.js b/packages/mui-material/src/InputAdornment/index.js
index b1e7375e2c5564..e8757bd82b4074 100644
--- a/packages/mui-material/src/InputAdornment/index.js
+++ b/packages/mui-material/src/InputAdornment/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './InputAdornment';
 
 export { default as inputAdornmentClasses } from './inputAdornmentClasses';
diff --git a/packages/mui-material/src/InputBase/InputBase.js b/packages/mui-material/src/InputBase/InputBase.js
index 25eb66757eb7bf..6f948212ec8afc 100644
--- a/packages/mui-material/src/InputBase/InputBase.js
+++ b/packages/mui-material/src/InputBase/InputBase.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/InputBase/index.js b/packages/mui-material/src/InputBase/index.js
index c2fae1fb233b41..305647eb07d08b 100644
--- a/packages/mui-material/src/InputBase/index.js
+++ b/packages/mui-material/src/InputBase/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './InputBase';
 
 export { default as inputBaseClasses } from './inputBaseClasses';
diff --git a/packages/mui-material/src/InputLabel/InputLabel.js b/packages/mui-material/src/InputLabel/InputLabel.js
index efbdfba00e8929..7af2c36c90627c 100644
--- a/packages/mui-material/src/InputLabel/InputLabel.js
+++ b/packages/mui-material/src/InputLabel/InputLabel.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
diff --git a/packages/mui-material/src/InputLabel/index.js b/packages/mui-material/src/InputLabel/index.js
index 70140e12a84000..f1050f1d809098 100644
--- a/packages/mui-material/src/InputLabel/index.js
+++ b/packages/mui-material/src/InputLabel/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './InputLabel';
 
 export { default as inputLabelClasses } from './inputLabelClasses';
diff --git a/packages/mui-material/src/LinearProgress/LinearProgress.js b/packages/mui-material/src/LinearProgress/LinearProgress.js
index 76fb1a2b9ba151..dba8067f22188a 100644
--- a/packages/mui-material/src/LinearProgress/LinearProgress.js
+++ b/packages/mui-material/src/LinearProgress/LinearProgress.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/LinearProgress/index.js b/packages/mui-material/src/LinearProgress/index.js
index e3f2818ef6e399..afb73ef3020a9c 100644
--- a/packages/mui-material/src/LinearProgress/index.js
+++ b/packages/mui-material/src/LinearProgress/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './LinearProgress';
 
 export { default as linearProgressClasses } from './linearProgressClasses';
diff --git a/packages/mui-material/src/Link/Link.js b/packages/mui-material/src/Link/Link.js
index 36e6da29d318a2..6bcb98420b7660 100644
--- a/packages/mui-material/src/Link/Link.js
+++ b/packages/mui-material/src/Link/Link.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Link/index.js b/packages/mui-material/src/Link/index.js
index a9ab204b20f140..4af7cb278e648d 100644
--- a/packages/mui-material/src/Link/index.js
+++ b/packages/mui-material/src/Link/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Link';
 
 export { default as linkClasses } from './linkClasses';
diff --git a/packages/mui-material/src/List/List.js b/packages/mui-material/src/List/List.js
index eeb4aeeabe10cd..5de1fef7dbcb0a 100644
--- a/packages/mui-material/src/List/List.js
+++ b/packages/mui-material/src/List/List.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/List/ListContext.js b/packages/mui-material/src/List/ListContext.js
index 059b25131ddab1..fe430f60ecb62a 100644
--- a/packages/mui-material/src/List/ListContext.js
+++ b/packages/mui-material/src/List/ListContext.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 /**
diff --git a/packages/mui-material/src/List/index.js b/packages/mui-material/src/List/index.js
index 6435a92475c14f..b8789a9b10e3ce 100644
--- a/packages/mui-material/src/List/index.js
+++ b/packages/mui-material/src/List/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './List';
 
 export { default as listClasses } from './listClasses';
diff --git a/packages/mui-material/src/ListItem/ListItem.js b/packages/mui-material/src/ListItem/ListItem.js
index 051f05c8c5d0f8..8b00bb27e7f3ed 100644
--- a/packages/mui-material/src/ListItem/ListItem.js
+++ b/packages/mui-material/src/ListItem/ListItem.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/ListItem/index.js b/packages/mui-material/src/ListItem/index.js
index 90fc1a201efd55..911c835b6b5887 100644
--- a/packages/mui-material/src/ListItem/index.js
+++ b/packages/mui-material/src/ListItem/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ListItem';
 
 export { default as listItemClasses } from './listItemClasses';
diff --git a/packages/mui-material/src/ListItemAvatar/ListItemAvatar.js b/packages/mui-material/src/ListItemAvatar/ListItemAvatar.js
index 1a9462bd456109..c356110a5c6f8b 100644
--- a/packages/mui-material/src/ListItemAvatar/ListItemAvatar.js
+++ b/packages/mui-material/src/ListItemAvatar/ListItemAvatar.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/ListItemAvatar/index.js b/packages/mui-material/src/ListItemAvatar/index.js
index 767e616b6cf072..7193ec97998512 100644
--- a/packages/mui-material/src/ListItemAvatar/index.js
+++ b/packages/mui-material/src/ListItemAvatar/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ListItemAvatar';
 
 export { default as listItemAvatarClasses } from './listItemAvatarClasses';
diff --git a/packages/mui-material/src/ListItemButton/ListItemButton.js b/packages/mui-material/src/ListItemButton/ListItemButton.js
index f636f5f0f25767..5183e9ac25ec32 100644
--- a/packages/mui-material/src/ListItemButton/ListItemButton.js
+++ b/packages/mui-material/src/ListItemButton/ListItemButton.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/ListItemButton/index.js b/packages/mui-material/src/ListItemButton/index.js
index feb9791f4194cc..5af1d8f49e1c43 100644
--- a/packages/mui-material/src/ListItemButton/index.js
+++ b/packages/mui-material/src/ListItemButton/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ListItemButton';
 
 export { default as listItemButtonClasses } from './listItemButtonClasses';
diff --git a/packages/mui-material/src/ListItemIcon/ListItemIcon.js b/packages/mui-material/src/ListItemIcon/ListItemIcon.js
index 7372fd18af0d35..4f1038d200f826 100644
--- a/packages/mui-material/src/ListItemIcon/ListItemIcon.js
+++ b/packages/mui-material/src/ListItemIcon/ListItemIcon.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/ListItemIcon/index.js b/packages/mui-material/src/ListItemIcon/index.js
index 04bfa6c394a0f9..62c8390c58ff7c 100644
--- a/packages/mui-material/src/ListItemIcon/index.js
+++ b/packages/mui-material/src/ListItemIcon/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ListItemIcon';
 
 export { default as listItemIconClasses } from './listItemIconClasses';
diff --git a/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.js b/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.js
index 5c6080e08f2019..52fa16c5e31243 100644
--- a/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.js
+++ b/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/ListItemSecondaryAction/index.js b/packages/mui-material/src/ListItemSecondaryAction/index.js
index 2c4dd3899448ba..97f6c675e650e7 100644
--- a/packages/mui-material/src/ListItemSecondaryAction/index.js
+++ b/packages/mui-material/src/ListItemSecondaryAction/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ListItemSecondaryAction';
 
 export { default as listItemSecondaryActionClasses } from './listItemSecondaryActionClasses';
diff --git a/packages/mui-material/src/ListItemText/ListItemText.js b/packages/mui-material/src/ListItemText/ListItemText.js
index 247ee8078aca44..1e330c1b48cace 100644
--- a/packages/mui-material/src/ListItemText/ListItemText.js
+++ b/packages/mui-material/src/ListItemText/ListItemText.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/ListItemText/index.js b/packages/mui-material/src/ListItemText/index.js
index 2d6364f6b0a84c..f64e13990f8777 100644
--- a/packages/mui-material/src/ListItemText/index.js
+++ b/packages/mui-material/src/ListItemText/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ListItemText';
 
 export { default as listItemTextClasses } from './listItemTextClasses';
diff --git a/packages/mui-material/src/ListSubheader/ListSubheader.js b/packages/mui-material/src/ListSubheader/ListSubheader.js
index a0b566b6a866ce..028d7fbc0d38f4 100644
--- a/packages/mui-material/src/ListSubheader/ListSubheader.js
+++ b/packages/mui-material/src/ListSubheader/ListSubheader.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/ListSubheader/index.js b/packages/mui-material/src/ListSubheader/index.js
index efc177069c73ee..4f23484d86d1c6 100644
--- a/packages/mui-material/src/ListSubheader/index.js
+++ b/packages/mui-material/src/ListSubheader/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ListSubheader';
 
 export { default as listSubheaderClasses } from './listSubheaderClasses';
diff --git a/packages/mui-material/src/Menu/Menu.js b/packages/mui-material/src/Menu/Menu.js
index 6a507c09edf243..0844b19a8e3b76 100644
--- a/packages/mui-material/src/Menu/Menu.js
+++ b/packages/mui-material/src/Menu/Menu.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-material/src/Menu/index.js b/packages/mui-material/src/Menu/index.js
index 036a988742c854..2d9ed62e36c32c 100644
--- a/packages/mui-material/src/Menu/index.js
+++ b/packages/mui-material/src/Menu/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Menu';
 
 export { default as menuClasses } from './menuClasses';
diff --git a/packages/mui-material/src/MenuItem/MenuItem.js b/packages/mui-material/src/MenuItem/MenuItem.js
index 5c5fe7f69ee137..5a0e35bc74903f 100644
--- a/packages/mui-material/src/MenuItem/MenuItem.js
+++ b/packages/mui-material/src/MenuItem/MenuItem.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/MenuItem/index.js b/packages/mui-material/src/MenuItem/index.js
index ec789a4b43b2a9..a53c62cb82c8fe 100644
--- a/packages/mui-material/src/MenuItem/index.js
+++ b/packages/mui-material/src/MenuItem/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './MenuItem';
 
 export * from './menuItemClasses';
diff --git a/packages/mui-material/src/MenuList/MenuList.js b/packages/mui-material/src/MenuList/MenuList.js
index 5b2023d9c6102c..cfe7d51d0b8b48 100644
--- a/packages/mui-material/src/MenuList/MenuList.js
+++ b/packages/mui-material/src/MenuList/MenuList.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-material/src/MenuList/index.js b/packages/mui-material/src/MenuList/index.js
index f6fe3944910fb0..87fbe8b70a5454 100644
--- a/packages/mui-material/src/MenuList/index.js
+++ b/packages/mui-material/src/MenuList/index.js
@@ -1 +1,2 @@
+'use client';
 export { default } from './MenuList';
diff --git a/packages/mui-material/src/MobileStepper/MobileStepper.js b/packages/mui-material/src/MobileStepper/MobileStepper.js
index 10fac5f426fd22..033225f7f9dabe 100644
--- a/packages/mui-material/src/MobileStepper/MobileStepper.js
+++ b/packages/mui-material/src/MobileStepper/MobileStepper.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/MobileStepper/index.js b/packages/mui-material/src/MobileStepper/index.js
index ef2f34beedbca9..c157b25d88b40a 100644
--- a/packages/mui-material/src/MobileStepper/index.js
+++ b/packages/mui-material/src/MobileStepper/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './MobileStepper';
 
 export { default as mobileStepperClasses } from './mobileStepperClasses';
diff --git a/packages/mui-material/src/Modal/Modal.js b/packages/mui-material/src/Modal/Modal.js
index cfe95c4c841c74..270e30dd763b3a 100644
--- a/packages/mui-material/src/Modal/Modal.js
+++ b/packages/mui-material/src/Modal/Modal.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Modal/index.js b/packages/mui-material/src/Modal/index.js
index 0f515d7d7f10e3..093fd4beca5736 100644
--- a/packages/mui-material/src/Modal/index.js
+++ b/packages/mui-material/src/Modal/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { ModalManager } from '@mui/base/Modal';
 
 export { default } from './Modal';
diff --git a/packages/mui-material/src/NativeSelect/NativeSelect.js b/packages/mui-material/src/NativeSelect/NativeSelect.js
index e24b489b96f30f..d8050d0991551c 100644
--- a/packages/mui-material/src/NativeSelect/NativeSelect.js
+++ b/packages/mui-material/src/NativeSelect/NativeSelect.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-material/src/NativeSelect/NativeSelectInput.js b/packages/mui-material/src/NativeSelect/NativeSelectInput.js
index b9ff1c48cbc182..4a0fa0fa48bf76 100644
--- a/packages/mui-material/src/NativeSelect/NativeSelectInput.js
+++ b/packages/mui-material/src/NativeSelect/NativeSelectInput.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/NativeSelect/index.js b/packages/mui-material/src/NativeSelect/index.js
index e5e3f3dd584450..03010668d0a539 100644
--- a/packages/mui-material/src/NativeSelect/index.js
+++ b/packages/mui-material/src/NativeSelect/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './NativeSelect';
 
 export { default as nativeSelectClasses } from './nativeSelectClasses';
diff --git a/packages/mui-material/src/OutlinedInput/NotchedOutline.js b/packages/mui-material/src/OutlinedInput/NotchedOutline.js
index f043b51fce5c70..9c742705d608f5 100644
--- a/packages/mui-material/src/OutlinedInput/NotchedOutline.js
+++ b/packages/mui-material/src/OutlinedInput/NotchedOutline.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import styled from '../styles/styled';
diff --git a/packages/mui-material/src/OutlinedInput/OutlinedInput.js b/packages/mui-material/src/OutlinedInput/OutlinedInput.js
index 873f32dfdc71c8..77bba34e13c209 100644
--- a/packages/mui-material/src/OutlinedInput/OutlinedInput.js
+++ b/packages/mui-material/src/OutlinedInput/OutlinedInput.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { refType } from '@mui/utils';
diff --git a/packages/mui-material/src/OutlinedInput/index.js b/packages/mui-material/src/OutlinedInput/index.js
index 4877ca68a9f8f5..ba19d9b1b14008 100644
--- a/packages/mui-material/src/OutlinedInput/index.js
+++ b/packages/mui-material/src/OutlinedInput/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './OutlinedInput';
 
 export { default as outlinedInputClasses } from './outlinedInputClasses';
diff --git a/packages/mui-material/src/Pagination/Pagination.js b/packages/mui-material/src/Pagination/Pagination.js
index f288398c85c9ac..c37de13096e98d 100644
--- a/packages/mui-material/src/Pagination/Pagination.js
+++ b/packages/mui-material/src/Pagination/Pagination.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Pagination/index.js b/packages/mui-material/src/Pagination/index.js
index 979e9b058c6d34..90f89cbe209217 100644
--- a/packages/mui-material/src/Pagination/index.js
+++ b/packages/mui-material/src/Pagination/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Pagination';
 
 export { default as paginationClasses } from './paginationClasses';
diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.js b/packages/mui-material/src/PaginationItem/PaginationItem.js
index be43afdf55c1d6..6c9acdae339052 100644
--- a/packages/mui-material/src/PaginationItem/PaginationItem.js
+++ b/packages/mui-material/src/PaginationItem/PaginationItem.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/PaginationItem/index.js b/packages/mui-material/src/PaginationItem/index.js
index 8cc1e9ecdcc739..6e723f770cb0da 100644
--- a/packages/mui-material/src/PaginationItem/index.js
+++ b/packages/mui-material/src/PaginationItem/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './PaginationItem';
 
 export { default as paginationItemClasses } from './paginationItemClasses';
diff --git a/packages/mui-material/src/Paper/Paper.js b/packages/mui-material/src/Paper/Paper.js
index 515f641d02bdcf..73cfc54b16fa91 100644
--- a/packages/mui-material/src/Paper/Paper.js
+++ b/packages/mui-material/src/Paper/Paper.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Paper/index.js b/packages/mui-material/src/Paper/index.js
index b9f5f7bf7d77a8..dd3c6653b1019c 100644
--- a/packages/mui-material/src/Paper/index.js
+++ b/packages/mui-material/src/Paper/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Paper';
 
 export { default as paperClasses } from './paperClasses';
diff --git a/packages/mui-material/src/Popover/Popover.js b/packages/mui-material/src/Popover/Popover.js
index 6983421b17f25e..1d024103f46b2c 100644
--- a/packages/mui-material/src/Popover/Popover.js
+++ b/packages/mui-material/src/Popover/Popover.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Popover/index.js b/packages/mui-material/src/Popover/index.js
index bf8f15fc74c066..af8780df14f51e 100644
--- a/packages/mui-material/src/Popover/index.js
+++ b/packages/mui-material/src/Popover/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Popover';
 
 export * from './Popover';
diff --git a/packages/mui-material/src/Popper/Popper.tsx b/packages/mui-material/src/Popper/Popper.tsx
index 98894d76e8a99c..e46092a8873d24 100644
--- a/packages/mui-material/src/Popper/Popper.tsx
+++ b/packages/mui-material/src/Popper/Popper.tsx
@@ -1,3 +1,4 @@
+'use client';
 import BasePopper, { PopperProps as BasePopperProps } from '@mui/base/Popper';
 import { Direction, SxProps, useThemeWithoutDefault as useTheme } from '@mui/system';
 import { HTMLElementType, refType } from '@mui/utils';
diff --git a/packages/mui-material/src/Popper/index.js b/packages/mui-material/src/Popper/index.js
index 30e5f42e8efc86..419f166db6fc01 100644
--- a/packages/mui-material/src/Popper/index.js
+++ b/packages/mui-material/src/Popper/index.js
@@ -1 +1,2 @@
+'use client';
 export { default } from './Popper';
diff --git a/packages/mui-material/src/Radio/Radio.js b/packages/mui-material/src/Radio/Radio.js
index 9d781d8b253c91..e326afbe24db05 100644
--- a/packages/mui-material/src/Radio/Radio.js
+++ b/packages/mui-material/src/Radio/Radio.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Radio/RadioButtonIcon.js b/packages/mui-material/src/Radio/RadioButtonIcon.js
index 1a77993f25bb50..8cc01d6235b7f0 100644
--- a/packages/mui-material/src/Radio/RadioButtonIcon.js
+++ b/packages/mui-material/src/Radio/RadioButtonIcon.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import RadioButtonUncheckedIcon from '../internal/svg-icons/RadioButtonUnchecked';
diff --git a/packages/mui-material/src/Radio/index.js b/packages/mui-material/src/Radio/index.js
index 659d29e9fd37fb..eeabd2f3fa0973 100644
--- a/packages/mui-material/src/Radio/index.js
+++ b/packages/mui-material/src/Radio/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Radio';
 
 export { default as radioClasses } from './radioClasses';
diff --git a/packages/mui-material/src/RadioGroup/RadioGroup.js b/packages/mui-material/src/RadioGroup/RadioGroup.js
index ff90acdb44daf0..bd36c370845a15 100644
--- a/packages/mui-material/src/RadioGroup/RadioGroup.js
+++ b/packages/mui-material/src/RadioGroup/RadioGroup.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import FormGroup from '../FormGroup';
diff --git a/packages/mui-material/src/RadioGroup/index.js b/packages/mui-material/src/RadioGroup/index.js
index 20284cadcf592c..7836938d6aa275 100644
--- a/packages/mui-material/src/RadioGroup/index.js
+++ b/packages/mui-material/src/RadioGroup/index.js
@@ -1,2 +1,3 @@
+'use client';
 export { default } from './RadioGroup';
 export { default as useRadioGroup } from './useRadioGroup';
diff --git a/packages/mui-material/src/RadioGroup/useRadioGroup.ts b/packages/mui-material/src/RadioGroup/useRadioGroup.ts
index 8f948f05cecd39..9a5b11f061d23d 100644
--- a/packages/mui-material/src/RadioGroup/useRadioGroup.ts
+++ b/packages/mui-material/src/RadioGroup/useRadioGroup.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import RadioGroupContext, { RadioGroupContextValue } from './RadioGroupContext';
 
diff --git a/packages/mui-material/src/Rating/Rating.js b/packages/mui-material/src/Rating/Rating.js
index 407fd2ada5a6cc..a18c432475a029 100644
--- a/packages/mui-material/src/Rating/Rating.js
+++ b/packages/mui-material/src/Rating/Rating.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Rating/index.js b/packages/mui-material/src/Rating/index.js
index 0a08f3b5fb4139..16de91aa37a3d8 100644
--- a/packages/mui-material/src/Rating/index.js
+++ b/packages/mui-material/src/Rating/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Rating';
 
 export { default as ratingClasses } from './ratingClasses';
diff --git a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js
index f74c229df06bf9..1a45a9f313cc28 100644
--- a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js
+++ b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/ScopedCssBaseline/index.js b/packages/mui-material/src/ScopedCssBaseline/index.js
index ab7ca6ccdf4c5b..add0e05745141e 100644
--- a/packages/mui-material/src/ScopedCssBaseline/index.js
+++ b/packages/mui-material/src/ScopedCssBaseline/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ScopedCssBaseline';
 
 export { default as scopedCssBaselineClasses } from './scopedCssBaselineClasses';
diff --git a/packages/mui-material/src/Select/Select.js b/packages/mui-material/src/Select/Select.js
index 605a8ab344f4e8..ecb29d55b54041 100644
--- a/packages/mui-material/src/Select/Select.js
+++ b/packages/mui-material/src/Select/Select.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js
index e44cf3861f2492..3bf3fda6c6a506 100644
--- a/packages/mui-material/src/Select/SelectInput.js
+++ b/packages/mui-material/src/Select/SelectInput.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-material/src/Select/index.js b/packages/mui-material/src/Select/index.js
index 59eafa5d813fe0..9c160bf8a57d7f 100644
--- a/packages/mui-material/src/Select/index.js
+++ b/packages/mui-material/src/Select/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Select';
 
 export { default as selectClasses } from './selectClasses';
diff --git a/packages/mui-material/src/Skeleton/Skeleton.js b/packages/mui-material/src/Skeleton/Skeleton.js
index 7af9d63bbb4d61..5cb4a5dd23bb50 100644
--- a/packages/mui-material/src/Skeleton/Skeleton.js
+++ b/packages/mui-material/src/Skeleton/Skeleton.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-material/src/Skeleton/index.js b/packages/mui-material/src/Skeleton/index.js
index ba349955e757a7..2d8d38e0c37382 100644
--- a/packages/mui-material/src/Skeleton/index.js
+++ b/packages/mui-material/src/Skeleton/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Skeleton';
 
 export * from './skeletonClasses';
diff --git a/packages/mui-material/src/Slide/Slide.js b/packages/mui-material/src/Slide/Slide.js
index 1e24411feba9ab..0f9f7ee7a4b19b 100644
--- a/packages/mui-material/src/Slide/Slide.js
+++ b/packages/mui-material/src/Slide/Slide.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
diff --git a/packages/mui-material/src/Slide/index.js b/packages/mui-material/src/Slide/index.js
index 7a116646dc53b2..1e82e336ebd002 100644
--- a/packages/mui-material/src/Slide/index.js
+++ b/packages/mui-material/src/Slide/index.js
@@ -1 +1,2 @@
+'use client';
 export { default } from './Slide';
diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js
index c7099bdb2ee8cf..723097d513098a 100644
--- a/packages/mui-material/src/Slider/Slider.js
+++ b/packages/mui-material/src/Slider/Slider.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Slider/SliderValueLabel.tsx b/packages/mui-material/src/Slider/SliderValueLabel.tsx
index d5f1364b87f0fe..793d9e8317f38a 100644
--- a/packages/mui-material/src/Slider/SliderValueLabel.tsx
+++ b/packages/mui-material/src/Slider/SliderValueLabel.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Slider/index.js b/packages/mui-material/src/Slider/index.js
index ac3427028230ed..4e20c2e2b8a724 100644
--- a/packages/mui-material/src/Slider/index.js
+++ b/packages/mui-material/src/Slider/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Slider';
 export * from './Slider';
 
diff --git a/packages/mui-material/src/Snackbar/Snackbar.js b/packages/mui-material/src/Snackbar/Snackbar.js
index 91fca324b9b4f8..874a5be88d8fa7 100644
--- a/packages/mui-material/src/Snackbar/Snackbar.js
+++ b/packages/mui-material/src/Snackbar/Snackbar.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, useSlotProps } from '@mui/base';
diff --git a/packages/mui-material/src/Snackbar/index.js b/packages/mui-material/src/Snackbar/index.js
index 048c654862c26b..c21dbfa25ec91d 100644
--- a/packages/mui-material/src/Snackbar/index.js
+++ b/packages/mui-material/src/Snackbar/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Snackbar';
 
 export { default as snackbarClasses } from './snackbarClasses';
diff --git a/packages/mui-material/src/SnackbarContent/SnackbarContent.js b/packages/mui-material/src/SnackbarContent/SnackbarContent.js
index 69ba78c1363642..ef1341d807df1f 100644
--- a/packages/mui-material/src/SnackbarContent/SnackbarContent.js
+++ b/packages/mui-material/src/SnackbarContent/SnackbarContent.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/SnackbarContent/index.js b/packages/mui-material/src/SnackbarContent/index.js
index 44f55061a70824..bdea04e7db6591 100644
--- a/packages/mui-material/src/SnackbarContent/index.js
+++ b/packages/mui-material/src/SnackbarContent/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './SnackbarContent';
 
 export { default as snackbarContentClasses } from './snackbarContentClasses';
diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.js b/packages/mui-material/src/SpeedDial/SpeedDial.js
index bcd67142943556..125217e39de22f 100644
--- a/packages/mui-material/src/SpeedDial/SpeedDial.js
+++ b/packages/mui-material/src/SpeedDial/SpeedDial.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-material/src/SpeedDial/index.js b/packages/mui-material/src/SpeedDial/index.js
index 22eeb5a48f0852..e5e9897eb921e1 100644
--- a/packages/mui-material/src/SpeedDial/index.js
+++ b/packages/mui-material/src/SpeedDial/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './SpeedDial';
 
 export { default as speedDialClasses } from './speedDialClasses';
diff --git a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js
index 4ac3ca5ad6475b..4f214d967216f7 100644
--- a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js
+++ b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js
@@ -1,3 +1,4 @@
+'use client';
 // @inheritedComponent Tooltip
 import * as React from 'react';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-material/src/SpeedDialAction/index.js b/packages/mui-material/src/SpeedDialAction/index.js
index 6a6d8319ff1784..06ea3a1f587594 100644
--- a/packages/mui-material/src/SpeedDialAction/index.js
+++ b/packages/mui-material/src/SpeedDialAction/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './SpeedDialAction';
 
 export { default as speedDialActionClasses } from './speedDialActionClasses';
diff --git a/packages/mui-material/src/SpeedDialIcon/SpeedDialIcon.js b/packages/mui-material/src/SpeedDialIcon/SpeedDialIcon.js
index 026ef10bbd23ce..9e00e0ea192f17 100644
--- a/packages/mui-material/src/SpeedDialIcon/SpeedDialIcon.js
+++ b/packages/mui-material/src/SpeedDialIcon/SpeedDialIcon.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/SpeedDialIcon/index.js b/packages/mui-material/src/SpeedDialIcon/index.js
index 19c450e2c69450..79182b4179f4e5 100644
--- a/packages/mui-material/src/SpeedDialIcon/index.js
+++ b/packages/mui-material/src/SpeedDialIcon/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './SpeedDialIcon';
 
 export { default as speedDialIconClasses } from './speedDialIconClasses';
diff --git a/packages/mui-material/src/Stack/Stack.js b/packages/mui-material/src/Stack/Stack.js
index 674a41ef0fa679..c5770727373289 100644
--- a/packages/mui-material/src/Stack/Stack.js
+++ b/packages/mui-material/src/Stack/Stack.js
@@ -1,3 +1,4 @@
+'use client';
 import PropTypes from 'prop-types';
 import { createStack } from '@mui/system';
 import styled from '../styles/styled';
diff --git a/packages/mui-material/src/Stack/index.js b/packages/mui-material/src/Stack/index.js
index 2eb8645cc51ca0..bf039ea305c901 100644
--- a/packages/mui-material/src/Stack/index.js
+++ b/packages/mui-material/src/Stack/index.js
@@ -1,2 +1,3 @@
+'use client';
 export { default } from './Stack';
 export { default as stackClasses } from './stackClasses';
diff --git a/packages/mui-material/src/Step/Step.js b/packages/mui-material/src/Step/Step.js
index d998ea1eca9de6..6701dbaebe41a3 100644
--- a/packages/mui-material/src/Step/Step.js
+++ b/packages/mui-material/src/Step/Step.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Step/index.js b/packages/mui-material/src/Step/index.js
index 5c8dc441973e51..1255fcc2added7 100644
--- a/packages/mui-material/src/Step/index.js
+++ b/packages/mui-material/src/Step/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Step';
 
 export { default as stepClasses } from './stepClasses';
diff --git a/packages/mui-material/src/StepButton/StepButton.js b/packages/mui-material/src/StepButton/StepButton.js
index 19bd8f91493a2d..d1193bd2e9d850 100644
--- a/packages/mui-material/src/StepButton/StepButton.js
+++ b/packages/mui-material/src/StepButton/StepButton.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/StepButton/index.js b/packages/mui-material/src/StepButton/index.js
index 5a0c1d194a0505..388011bdf53b4f 100644
--- a/packages/mui-material/src/StepButton/index.js
+++ b/packages/mui-material/src/StepButton/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './StepButton';
 
 export { default as stepButtonClasses } from './stepButtonClasses';
diff --git a/packages/mui-material/src/StepConnector/StepConnector.js b/packages/mui-material/src/StepConnector/StepConnector.js
index e849dba428e9f1..6020a63fcf8a14 100644
--- a/packages/mui-material/src/StepConnector/StepConnector.js
+++ b/packages/mui-material/src/StepConnector/StepConnector.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/StepConnector/index.js b/packages/mui-material/src/StepConnector/index.js
index 286d2f3240c0de..492c8bfee6e8fb 100644
--- a/packages/mui-material/src/StepConnector/index.js
+++ b/packages/mui-material/src/StepConnector/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './StepConnector';
 
 export { default as stepConnectorClasses } from './stepConnectorClasses';
diff --git a/packages/mui-material/src/StepContent/StepContent.js b/packages/mui-material/src/StepContent/StepContent.js
index 5d867ed0fc0fee..73a30d96044e75 100644
--- a/packages/mui-material/src/StepContent/StepContent.js
+++ b/packages/mui-material/src/StepContent/StepContent.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/StepContent/index.js b/packages/mui-material/src/StepContent/index.js
index d0fb5c7da6b77d..3b38c1adea20c9 100644
--- a/packages/mui-material/src/StepContent/index.js
+++ b/packages/mui-material/src/StepContent/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './StepContent';
 
 export { default as stepContentClasses } from './stepContentClasses';
diff --git a/packages/mui-material/src/StepIcon/StepIcon.js b/packages/mui-material/src/StepIcon/StepIcon.js
index 4e39262bfa9968..a4cbc2a77af276 100644
--- a/packages/mui-material/src/StepIcon/StepIcon.js
+++ b/packages/mui-material/src/StepIcon/StepIcon.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/StepIcon/index.js b/packages/mui-material/src/StepIcon/index.js
index 555e6cf418581d..bd9afa42a4736a 100644
--- a/packages/mui-material/src/StepIcon/index.js
+++ b/packages/mui-material/src/StepIcon/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './StepIcon';
 
 export { default as stepIconClasses } from './stepIconClasses';
diff --git a/packages/mui-material/src/StepLabel/StepLabel.js b/packages/mui-material/src/StepLabel/StepLabel.js
index 5a91c10cf0f259..c88eaa6d6e9352 100644
--- a/packages/mui-material/src/StepLabel/StepLabel.js
+++ b/packages/mui-material/src/StepLabel/StepLabel.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/StepLabel/index.js b/packages/mui-material/src/StepLabel/index.js
index b60fad9c328271..519623052a9be3 100644
--- a/packages/mui-material/src/StepLabel/index.js
+++ b/packages/mui-material/src/StepLabel/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './StepLabel';
 
 export { default as stepLabelClasses } from './stepLabelClasses';
diff --git a/packages/mui-material/src/Stepper/Stepper.js b/packages/mui-material/src/Stepper/Stepper.js
index 0e33e6d1feaf9b..f6488165823aed 100644
--- a/packages/mui-material/src/Stepper/Stepper.js
+++ b/packages/mui-material/src/Stepper/Stepper.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Stepper/index.js b/packages/mui-material/src/Stepper/index.js
index 550f0b648ad7e0..e3075b49cf6af1 100644
--- a/packages/mui-material/src/Stepper/index.js
+++ b/packages/mui-material/src/Stepper/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Stepper';
 
 export { default as stepperClasses } from './stepperClasses';
diff --git a/packages/mui-material/src/SvgIcon/SvgIcon.js b/packages/mui-material/src/SvgIcon/SvgIcon.js
index f1d7bef3ee4dc1..0aff478b7465a2 100644
--- a/packages/mui-material/src/SvgIcon/SvgIcon.js
+++ b/packages/mui-material/src/SvgIcon/SvgIcon.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/SvgIcon/index.js b/packages/mui-material/src/SvgIcon/index.js
index 4efcade7020cce..54246af9b83156 100644
--- a/packages/mui-material/src/SvgIcon/index.js
+++ b/packages/mui-material/src/SvgIcon/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './SvgIcon';
 
 export { default as svgIconClasses } from './svgIconClasses';
diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeArea.js b/packages/mui-material/src/SwipeableDrawer/SwipeArea.js
index 2221f096b5087d..ee8e9cd3f00363 100644
--- a/packages/mui-material/src/SwipeableDrawer/SwipeArea.js
+++ b/packages/mui-material/src/SwipeableDrawer/SwipeArea.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
index da66d3ed328810..f8f3aeec75986b 100644
--- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
+++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-material/src/SwipeableDrawer/index.js b/packages/mui-material/src/SwipeableDrawer/index.js
index 56a2ccfdcb02aa..7cae5e6bfc1147 100644
--- a/packages/mui-material/src/SwipeableDrawer/index.js
+++ b/packages/mui-material/src/SwipeableDrawer/index.js
@@ -1 +1,2 @@
+'use client';
 export { default } from './SwipeableDrawer';
diff --git a/packages/mui-material/src/Switch/Switch.js b/packages/mui-material/src/Switch/Switch.js
index 02b3f5da6538ee..f66bd0d037bb09 100644
--- a/packages/mui-material/src/Switch/Switch.js
+++ b/packages/mui-material/src/Switch/Switch.js
@@ -1,3 +1,4 @@
+'use client';
 // @inheritedComponent IconButton
 import * as React from 'react';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-material/src/Switch/index.js b/packages/mui-material/src/Switch/index.js
index eb3612573cef80..6e53e01c5c3dba 100644
--- a/packages/mui-material/src/Switch/index.js
+++ b/packages/mui-material/src/Switch/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Switch';
 
 export { default as switchClasses } from './switchClasses';
diff --git a/packages/mui-material/src/Tab/Tab.js b/packages/mui-material/src/Tab/Tab.js
index 4202da6c61ff0a..f0b73aef0e6308 100644
--- a/packages/mui-material/src/Tab/Tab.js
+++ b/packages/mui-material/src/Tab/Tab.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Tab/index.js b/packages/mui-material/src/Tab/index.js
index 7c828ba9dd2757..29213284d8cbd8 100644
--- a/packages/mui-material/src/Tab/index.js
+++ b/packages/mui-material/src/Tab/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Tab';
 
 export { default as tabClasses } from './tabClasses';
diff --git a/packages/mui-material/src/TabScrollButton/TabScrollButton.js b/packages/mui-material/src/TabScrollButton/TabScrollButton.js
index 03d62efbd3c243..e6b0e30dcd813a 100644
--- a/packages/mui-material/src/TabScrollButton/TabScrollButton.js
+++ b/packages/mui-material/src/TabScrollButton/TabScrollButton.js
@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable jsx-a11y/aria-role */
 import * as React from 'react';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-material/src/TabScrollButton/index.js b/packages/mui-material/src/TabScrollButton/index.js
index 6c84cb4dca3377..15aa330441752b 100644
--- a/packages/mui-material/src/TabScrollButton/index.js
+++ b/packages/mui-material/src/TabScrollButton/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './TabScrollButton';
 
 export { default as tabScrollButtonClasses } from './tabScrollButtonClasses';
diff --git a/packages/mui-material/src/Table/Table.js b/packages/mui-material/src/Table/Table.js
index d52434210764e6..0767376ccbdec0 100644
--- a/packages/mui-material/src/Table/Table.js
+++ b/packages/mui-material/src/Table/Table.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Table/TableContext.js b/packages/mui-material/src/Table/TableContext.js
index 581fe8e12ad18c..84fb48fe03bef9 100644
--- a/packages/mui-material/src/Table/TableContext.js
+++ b/packages/mui-material/src/Table/TableContext.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 /**
diff --git a/packages/mui-material/src/Table/index.js b/packages/mui-material/src/Table/index.js
index dea2be8d78f2a0..49ca62cf115ca1 100644
--- a/packages/mui-material/src/Table/index.js
+++ b/packages/mui-material/src/Table/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Table';
 
 export { default as tableClasses } from './tableClasses';
diff --git a/packages/mui-material/src/TableBody/TableBody.js b/packages/mui-material/src/TableBody/TableBody.js
index be8cfcd5b89282..e79047d7f3850e 100644
--- a/packages/mui-material/src/TableBody/TableBody.js
+++ b/packages/mui-material/src/TableBody/TableBody.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/TableBody/index.js b/packages/mui-material/src/TableBody/index.js
index f9d4adef78fbd2..1c2fb035dfd798 100644
--- a/packages/mui-material/src/TableBody/index.js
+++ b/packages/mui-material/src/TableBody/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './TableBody';
 
 export { default as tableBodyClasses } from './tableBodyClasses';
diff --git a/packages/mui-material/src/TableCell/TableCell.js b/packages/mui-material/src/TableCell/TableCell.js
index 3c4233061c8959..070b7224e83a76 100644
--- a/packages/mui-material/src/TableCell/TableCell.js
+++ b/packages/mui-material/src/TableCell/TableCell.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/TableCell/index.js b/packages/mui-material/src/TableCell/index.js
index d02d3290bf6dab..42be81da5e1df2 100644
--- a/packages/mui-material/src/TableCell/index.js
+++ b/packages/mui-material/src/TableCell/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './TableCell';
 
 export { default as tableCellClasses } from './tableCellClasses';
diff --git a/packages/mui-material/src/TableContainer/TableContainer.js b/packages/mui-material/src/TableContainer/TableContainer.js
index e19e87895c59de..9ca7f1fb15776c 100644
--- a/packages/mui-material/src/TableContainer/TableContainer.js
+++ b/packages/mui-material/src/TableContainer/TableContainer.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/TableContainer/index.js b/packages/mui-material/src/TableContainer/index.js
index 094fb1fd2e1fb4..c3fc026d92a2f4 100644
--- a/packages/mui-material/src/TableContainer/index.js
+++ b/packages/mui-material/src/TableContainer/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './TableContainer';
 
 export { default as tableContainerClasses } from './tableContainerClasses';
diff --git a/packages/mui-material/src/TableFooter/TableFooter.js b/packages/mui-material/src/TableFooter/TableFooter.js
index ad0dc7dde7b5e3..49072ef41b323e 100644
--- a/packages/mui-material/src/TableFooter/TableFooter.js
+++ b/packages/mui-material/src/TableFooter/TableFooter.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/TableFooter/index.js b/packages/mui-material/src/TableFooter/index.js
index 4d3199f1bb616d..886cce9e96d4c6 100644
--- a/packages/mui-material/src/TableFooter/index.js
+++ b/packages/mui-material/src/TableFooter/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './TableFooter';
 
 export { default as tableFooterClasses } from './tableFooterClasses';
diff --git a/packages/mui-material/src/TableHead/TableHead.js b/packages/mui-material/src/TableHead/TableHead.js
index 2971c73626e258..9c04b0911a56fc 100644
--- a/packages/mui-material/src/TableHead/TableHead.js
+++ b/packages/mui-material/src/TableHead/TableHead.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/TableHead/index.js b/packages/mui-material/src/TableHead/index.js
index c7622e8ab2424f..12e83aab59511d 100644
--- a/packages/mui-material/src/TableHead/index.js
+++ b/packages/mui-material/src/TableHead/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './TableHead';
 
 export { default as tableHeadClasses } from './tableHeadClasses';
diff --git a/packages/mui-material/src/TablePagination/TablePagination.js b/packages/mui-material/src/TablePagination/TablePagination.js
index cfb0b58b46fbeb..4e040523cac251 100644
--- a/packages/mui-material/src/TablePagination/TablePagination.js
+++ b/packages/mui-material/src/TablePagination/TablePagination.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/TablePagination/TablePaginationActions.js b/packages/mui-material/src/TablePagination/TablePaginationActions.js
index 7ea405ccc7a9e5..9e3e1d61d4249c 100644
--- a/packages/mui-material/src/TablePagination/TablePaginationActions.js
+++ b/packages/mui-material/src/TablePagination/TablePaginationActions.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';
diff --git a/packages/mui-material/src/TablePagination/index.js b/packages/mui-material/src/TablePagination/index.js
index a331f1abcf6e48..12c25d2f980416 100644
--- a/packages/mui-material/src/TablePagination/index.js
+++ b/packages/mui-material/src/TablePagination/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './TablePagination';
 
 export { default as tablePaginationClasses } from './tablePaginationClasses';
diff --git a/packages/mui-material/src/TableRow/TableRow.js b/packages/mui-material/src/TableRow/TableRow.js
index b0607c73ebab5d..74c6be00807fa3 100644
--- a/packages/mui-material/src/TableRow/TableRow.js
+++ b/packages/mui-material/src/TableRow/TableRow.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/TableRow/index.js b/packages/mui-material/src/TableRow/index.js
index 78fa3b42e84a99..b85aba3523f66b 100644
--- a/packages/mui-material/src/TableRow/index.js
+++ b/packages/mui-material/src/TableRow/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './TableRow';
 
 export { default as tableRowClasses } from './tableRowClasses';
diff --git a/packages/mui-material/src/TableSortLabel/TableSortLabel.js b/packages/mui-material/src/TableSortLabel/TableSortLabel.js
index 426b722a4eee9e..e13071fecef885 100644
--- a/packages/mui-material/src/TableSortLabel/TableSortLabel.js
+++ b/packages/mui-material/src/TableSortLabel/TableSortLabel.js
@@ -1,3 +1,4 @@
+'use client';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-material/src/TableSortLabel/index.js b/packages/mui-material/src/TableSortLabel/index.js
index b32dbea51fca5c..aac808daf1abb7 100644
--- a/packages/mui-material/src/TableSortLabel/index.js
+++ b/packages/mui-material/src/TableSortLabel/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './TableSortLabel';
 
 export { default as tableSortLabelClasses } from './tableSortLabelClasses';
diff --git a/packages/mui-material/src/Tabs/ScrollbarSize.js b/packages/mui-material/src/Tabs/ScrollbarSize.js
index edea6b1620db1c..da7ec73c0c741b 100644
--- a/packages/mui-material/src/Tabs/ScrollbarSize.js
+++ b/packages/mui-material/src/Tabs/ScrollbarSize.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import debounce from '../utils/debounce';
diff --git a/packages/mui-material/src/Tabs/Tabs.js b/packages/mui-material/src/Tabs/Tabs.js
index c1df77ea10c921..44d677851ffbbc 100644
--- a/packages/mui-material/src/Tabs/Tabs.js
+++ b/packages/mui-material/src/Tabs/Tabs.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-material/src/Tabs/index.js b/packages/mui-material/src/Tabs/index.js
index c0e4122744acdb..e026a0ff9036ed 100644
--- a/packages/mui-material/src/Tabs/index.js
+++ b/packages/mui-material/src/Tabs/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Tabs';
 
 export { default as tabsClasses } from './tabsClasses';
diff --git a/packages/mui-material/src/TextField/TextField.js b/packages/mui-material/src/TextField/TextField.js
index 1d408bed99fa95..fcf12961135345 100644
--- a/packages/mui-material/src/TextField/TextField.js
+++ b/packages/mui-material/src/TextField/TextField.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/TextField/index.js b/packages/mui-material/src/TextField/index.js
index aa2c5bc42a3d17..916789e3d47bdc 100644
--- a/packages/mui-material/src/TextField/index.js
+++ b/packages/mui-material/src/TextField/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './TextField';
 
 export { default as textFieldClasses } from './textFieldClasses';
diff --git a/packages/mui-material/src/ToggleButton/ToggleButton.js b/packages/mui-material/src/ToggleButton/ToggleButton.js
index ec3ff48037c141..2cbd840b6603ee 100644
--- a/packages/mui-material/src/ToggleButton/ToggleButton.js
+++ b/packages/mui-material/src/ToggleButton/ToggleButton.js
@@ -1,3 +1,4 @@
+'use client';
 // @inheritedComponent ButtonBase
 import * as React from 'react';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-material/src/ToggleButton/index.js b/packages/mui-material/src/ToggleButton/index.js
index 41bb0536de4556..131f48248c31db 100644
--- a/packages/mui-material/src/ToggleButton/index.js
+++ b/packages/mui-material/src/ToggleButton/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ToggleButton';
 
 export { default as toggleButtonClasses } from './toggleButtonClasses';
diff --git a/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.js b/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.js
index 46cd5d029b9c90..d83f078e859f6d 100644
--- a/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.js
+++ b/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-material/src/ToggleButtonGroup/index.js b/packages/mui-material/src/ToggleButtonGroup/index.js
index 6d4a88fa3e99be..08c143fe70e852 100644
--- a/packages/mui-material/src/ToggleButtonGroup/index.js
+++ b/packages/mui-material/src/ToggleButtonGroup/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './ToggleButtonGroup';
 
 export { default as toggleButtonGroupClasses } from './toggleButtonGroupClasses';
diff --git a/packages/mui-material/src/Toolbar/Toolbar.js b/packages/mui-material/src/Toolbar/Toolbar.js
index 68d71510fab132..a856a9eabd0a4e 100644
--- a/packages/mui-material/src/Toolbar/Toolbar.js
+++ b/packages/mui-material/src/Toolbar/Toolbar.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Toolbar/index.js b/packages/mui-material/src/Toolbar/index.js
index e47b8023079b2f..c1589ed9c8cee1 100644
--- a/packages/mui-material/src/Toolbar/index.js
+++ b/packages/mui-material/src/Toolbar/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Toolbar';
 
 export { default as toolbarClasses } from './toolbarClasses';
diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js
index ec5061b9fc277d..7890a09ae44051 100644
--- a/packages/mui-material/src/Tooltip/Tooltip.js
+++ b/packages/mui-material/src/Tooltip/Tooltip.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Tooltip/index.js b/packages/mui-material/src/Tooltip/index.js
index 41217639d8cc24..99ce38771452a1 100644
--- a/packages/mui-material/src/Tooltip/index.js
+++ b/packages/mui-material/src/Tooltip/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Tooltip';
 
 export { default as tooltipClasses } from './tooltipClasses';
diff --git a/packages/mui-material/src/Typography/Typography.js b/packages/mui-material/src/Typography/Typography.js
index 37d1d450cfe65f..1de18d23f78cc0 100644
--- a/packages/mui-material/src/Typography/Typography.js
+++ b/packages/mui-material/src/Typography/Typography.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/Typography/index.js b/packages/mui-material/src/Typography/index.js
index 8c0aa8a325423f..ac1d28ee5ea00d 100644
--- a/packages/mui-material/src/Typography/index.js
+++ b/packages/mui-material/src/Typography/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Typography';
 
 export { default as typographyClasses } from './typographyClasses';
diff --git a/packages/mui-material/src/Unstable_Grid2/Grid2.tsx b/packages/mui-material/src/Unstable_Grid2/Grid2.tsx
index 8e137217e7028e..8e12d4bc7eed11 100644
--- a/packages/mui-material/src/Unstable_Grid2/Grid2.tsx
+++ b/packages/mui-material/src/Unstable_Grid2/Grid2.tsx
@@ -1,3 +1,4 @@
+'use client';
 import PropTypes from 'prop-types';
 import { createGrid as createGrid2 } from '@mui/system/Unstable_Grid';
 import { OverridableComponent } from '@mui/types';
diff --git a/packages/mui-material/src/Unstable_Grid2/index.ts b/packages/mui-material/src/Unstable_Grid2/index.ts
index 163e527be89b0d..ca358d2c60797f 100644
--- a/packages/mui-material/src/Unstable_Grid2/index.ts
+++ b/packages/mui-material/src/Unstable_Grid2/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Grid2';
 export * from './Grid2Props';
 export { default as grid2Classes } from './grid2Classes';
diff --git a/packages/mui-material/src/Zoom/Zoom.js b/packages/mui-material/src/Zoom/Zoom.js
index c9933293da6bb1..b2bc920fce5d07 100644
--- a/packages/mui-material/src/Zoom/Zoom.js
+++ b/packages/mui-material/src/Zoom/Zoom.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
diff --git a/packages/mui-material/src/Zoom/index.js b/packages/mui-material/src/Zoom/index.js
index 5a76ecbfe91cdd..39af66639e7e0e 100644
--- a/packages/mui-material/src/Zoom/index.js
+++ b/packages/mui-material/src/Zoom/index.js
@@ -1 +1,2 @@
+'use client';
 export { default } from './Zoom';
diff --git a/packages/mui-material/src/index.js b/packages/mui-material/src/index.js
index 44c0629fe6fc21..685cdea30df783 100644
--- a/packages/mui-material/src/index.js
+++ b/packages/mui-material/src/index.js
@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable import/export */
 import * as colors from './colors';
 
diff --git a/packages/mui-material/src/internal/SwitchBase.js b/packages/mui-material/src/internal/SwitchBase.js
index b2242deb86f4db..8a2a0328b3acd8 100644
--- a/packages/mui-material/src/internal/SwitchBase.js
+++ b/packages/mui-material/src/internal/SwitchBase.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
diff --git a/packages/mui-material/src/internal/svg-icons/Add.js b/packages/mui-material/src/internal/svg-icons/Add.js
index eccf8c7fcf7695..24df17348efbd6 100644
--- a/packages/mui-material/src/internal/svg-icons/Add.js
+++ b/packages/mui-material/src/internal/svg-icons/Add.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { createSvgIcon } from '../../utils';
 
diff --git a/packages/mui-material/src/internal/svg-icons/ArrowDownward.js b/packages/mui-material/src/internal/svg-icons/ArrowDownward.js
index 627c0ffc81f911..c898811f231ff7 100644
--- a/packages/mui-material/src/internal/svg-icons/ArrowDownward.js
+++ b/packages/mui-material/src/internal/svg-icons/ArrowDownward.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-material/src/internal/svg-icons/ArrowDropDown.js b/packages/mui-material/src/internal/svg-icons/ArrowDropDown.js
index 2c6a702fc7ccf8..a6726a90b39ce6 100644
--- a/packages/mui-material/src/internal/svg-icons/ArrowDropDown.js
+++ b/packages/mui-material/src/internal/svg-icons/ArrowDropDown.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-material/src/internal/svg-icons/Cancel.js b/packages/mui-material/src/internal/svg-icons/Cancel.js
index c108adf4d6ab0e..0aeeb5f9c36cbe 100644
--- a/packages/mui-material/src/internal/svg-icons/Cancel.js
+++ b/packages/mui-material/src/internal/svg-icons/Cancel.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-material/src/internal/svg-icons/CheckBox.js b/packages/mui-material/src/internal/svg-icons/CheckBox.js
index 8ad1bf344664b4..98ec3b027dbc35 100644
--- a/packages/mui-material/src/internal/svg-icons/CheckBox.js
+++ b/packages/mui-material/src/internal/svg-icons/CheckBox.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-material/src/internal/svg-icons/CheckBoxOutlineBlank.js b/packages/mui-material/src/internal/svg-icons/CheckBoxOutlineBlank.js
index 787cf408fc20a7..733248427f1d7a 100644
--- a/packages/mui-material/src/internal/svg-icons/CheckBoxOutlineBlank.js
+++ b/packages/mui-material/src/internal/svg-icons/CheckBoxOutlineBlank.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-material/src/internal/svg-icons/CheckCircle.js b/packages/mui-material/src/internal/svg-icons/CheckCircle.js
index 9368897aa24b30..474f1625ea6c9e 100644
--- a/packages/mui-material/src/internal/svg-icons/CheckCircle.js
+++ b/packages/mui-material/src/internal/svg-icons/CheckCircle.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-material/src/internal/svg-icons/Close.js b/packages/mui-material/src/internal/svg-icons/Close.js
index ecdf8dea338a80..d2ca9ef63f6e2b 100644
--- a/packages/mui-material/src/internal/svg-icons/Close.js
+++ b/packages/mui-material/src/internal/svg-icons/Close.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-material/src/internal/svg-icons/ErrorOutline.js b/packages/mui-material/src/internal/svg-icons/ErrorOutline.js
index 12ba853dbadf57..67ae424f9e0581 100644
--- a/packages/mui-material/src/internal/svg-icons/ErrorOutline.js
+++ b/packages/mui-material/src/internal/svg-icons/ErrorOutline.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-material/src/internal/svg-icons/FirstPage.js b/packages/mui-material/src/internal/svg-icons/FirstPage.js
index 328fb07d51793a..472c1116c0d2d4 100644
--- a/packages/mui-material/src/internal/svg-icons/FirstPage.js
+++ b/packages/mui-material/src/internal/svg-icons/FirstPage.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-material/src/internal/svg-icons/IndeterminateCheckBox.js b/packages/mui-material/src/internal/svg-icons/IndeterminateCheckBox.js
index fa7ac9b644d19f..2924e22da5b22e 100644
--- a/packages/mui-material/src/internal/svg-icons/IndeterminateCheckBox.js
+++ b/packages/mui-material/src/internal/svg-icons/IndeterminateCheckBox.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-material/src/internal/svg-icons/InfoOutlined.js b/packages/mui-material/src/internal/svg-icons/InfoOutlined.js
index d2f3643c5d4baf..c47b74bf262c44 100644
--- a/packages/mui-material/src/internal/svg-icons/InfoOutlined.js
+++ b/packages/mui-material/src/internal/svg-icons/InfoOutlined.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-material/src/internal/svg-icons/KeyboardArrowLeft.js b/packages/mui-material/src/internal/svg-icons/KeyboardArrowLeft.js
index fbb4c9889df4b7..2b970fccbfc55c 100644
--- a/packages/mui-material/src/internal/svg-icons/KeyboardArrowLeft.js
+++ b/packages/mui-material/src/internal/svg-icons/KeyboardArrowLeft.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-material/src/internal/svg-icons/KeyboardArrowRight.js b/packages/mui-material/src/internal/svg-icons/KeyboardArrowRight.js
index 10737eb426bef0..854953e599781f 100644
--- a/packages/mui-material/src/internal/svg-icons/KeyboardArrowRight.js
+++ b/packages/mui-material/src/internal/svg-icons/KeyboardArrowRight.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-material/src/internal/svg-icons/LastPage.js b/packages/mui-material/src/internal/svg-icons/LastPage.js
index b3bf93650475f6..ecec85e0d0e75b 100644
--- a/packages/mui-material/src/internal/svg-icons/LastPage.js
+++ b/packages/mui-material/src/internal/svg-icons/LastPage.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-material/src/internal/svg-icons/MoreHoriz.js b/packages/mui-material/src/internal/svg-icons/MoreHoriz.js
index a2a9e61a9f8407..b98835bd14c9f5 100644
--- a/packages/mui-material/src/internal/svg-icons/MoreHoriz.js
+++ b/packages/mui-material/src/internal/svg-icons/MoreHoriz.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-material/src/internal/svg-icons/NavigateBefore.js b/packages/mui-material/src/internal/svg-icons/NavigateBefore.js
index 6dd12dd11c81a5..42a9b81a509d68 100644
--- a/packages/mui-material/src/internal/svg-icons/NavigateBefore.js
+++ b/packages/mui-material/src/internal/svg-icons/NavigateBefore.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-material/src/internal/svg-icons/NavigateNext.js b/packages/mui-material/src/internal/svg-icons/NavigateNext.js
index d4402cc3777cfe..e51ce416a63d81 100644
--- a/packages/mui-material/src/internal/svg-icons/NavigateNext.js
+++ b/packages/mui-material/src/internal/svg-icons/NavigateNext.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-material/src/internal/svg-icons/Person.js b/packages/mui-material/src/internal/svg-icons/Person.js
index ade5e396968bbf..52de5b678ac881 100644
--- a/packages/mui-material/src/internal/svg-icons/Person.js
+++ b/packages/mui-material/src/internal/svg-icons/Person.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-material/src/internal/svg-icons/RadioButtonChecked.js b/packages/mui-material/src/internal/svg-icons/RadioButtonChecked.js
index c03337872b7bed..d74c312e1ccc72 100644
--- a/packages/mui-material/src/internal/svg-icons/RadioButtonChecked.js
+++ b/packages/mui-material/src/internal/svg-icons/RadioButtonChecked.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-material/src/internal/svg-icons/RadioButtonUnchecked.js b/packages/mui-material/src/internal/svg-icons/RadioButtonUnchecked.js
index 780034ab5db976..b960c81bb95dcd 100644
--- a/packages/mui-material/src/internal/svg-icons/RadioButtonUnchecked.js
+++ b/packages/mui-material/src/internal/svg-icons/RadioButtonUnchecked.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-material/src/internal/svg-icons/ReportProblemOutlined.js b/packages/mui-material/src/internal/svg-icons/ReportProblemOutlined.js
index 64cdca28dc88b0..ac2564ce6ed585 100644
--- a/packages/mui-material/src/internal/svg-icons/ReportProblemOutlined.js
+++ b/packages/mui-material/src/internal/svg-icons/ReportProblemOutlined.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-material/src/internal/svg-icons/Star.js b/packages/mui-material/src/internal/svg-icons/Star.js
index 4d5f2e5fa9c25e..b7ad1f5ca4cd8d 100644
--- a/packages/mui-material/src/internal/svg-icons/Star.js
+++ b/packages/mui-material/src/internal/svg-icons/Star.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-material/src/internal/svg-icons/StarBorder.js b/packages/mui-material/src/internal/svg-icons/StarBorder.js
index aae01550ff0b4c..9b0c480f2ad919 100644
--- a/packages/mui-material/src/internal/svg-icons/StarBorder.js
+++ b/packages/mui-material/src/internal/svg-icons/StarBorder.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-material/src/internal/svg-icons/SuccessOutlined.js b/packages/mui-material/src/internal/svg-icons/SuccessOutlined.js
index cd2a12cc9a7db8..86e1b3803bf184 100644
--- a/packages/mui-material/src/internal/svg-icons/SuccessOutlined.js
+++ b/packages/mui-material/src/internal/svg-icons/SuccessOutlined.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-material/src/internal/svg-icons/Warning.js b/packages/mui-material/src/internal/svg-icons/Warning.js
index eccf1c6cae247f..b33a191fff0ec3 100644
--- a/packages/mui-material/src/internal/svg-icons/Warning.js
+++ b/packages/mui-material/src/internal/svg-icons/Warning.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import createSvgIcon from '../../utils/createSvgIcon';
 
diff --git a/packages/mui-material/src/styles/CssVarsProvider.tsx b/packages/mui-material/src/styles/CssVarsProvider.tsx
index 1fa6e2fb14830f..43d4a9f1021587 100644
--- a/packages/mui-material/src/styles/CssVarsProvider.tsx
+++ b/packages/mui-material/src/styles/CssVarsProvider.tsx
@@ -1,3 +1,4 @@
+'use client';
 import {
   unstable_createCssVarsProvider as createCssVarsProvider,
   SxProps,
diff --git a/packages/mui-material/src/styles/ThemeProvider.js b/packages/mui-material/src/styles/ThemeProvider.js
index 45c6043b7ac659..c9eb81b4987886 100644
--- a/packages/mui-material/src/styles/ThemeProvider.js
+++ b/packages/mui-material/src/styles/ThemeProvider.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { ThemeProvider as SystemThemeProvider } from '@mui/system';
diff --git a/packages/mui-material/src/styles/defaultTheme.js b/packages/mui-material/src/styles/defaultTheme.js
index aa830ab16354db..094155f2e31e4a 100644
--- a/packages/mui-material/src/styles/defaultTheme.js
+++ b/packages/mui-material/src/styles/defaultTheme.js
@@ -1,3 +1,4 @@
+'use client';
 import createTheme from './createTheme';
 
 const defaultTheme = createTheme();
diff --git a/packages/mui-material/src/styles/index.js b/packages/mui-material/src/styles/index.js
index 0f87ea04d34d33..0b15ead912c231 100644
--- a/packages/mui-material/src/styles/index.js
+++ b/packages/mui-material/src/styles/index.js
@@ -1,3 +1,4 @@
+'use client';
 import MuiError from '@mui/utils/macros/MuiError.macro';
 
 export { default as THEME_ID } from './identifier';
diff --git a/packages/mui-material/src/styles/styled.js b/packages/mui-material/src/styles/styled.js
index e021dd84803bd6..83798adbda1e78 100644
--- a/packages/mui-material/src/styles/styled.js
+++ b/packages/mui-material/src/styles/styled.js
@@ -1,3 +1,4 @@
+'use client';
 import { createStyled, shouldForwardProp } from '@mui/system';
 import defaultTheme from './defaultTheme';
 import THEME_ID from './identifier';
diff --git a/packages/mui-material/src/styles/useTheme.js b/packages/mui-material/src/styles/useTheme.js
index d0bacfc7b6d325..f4f4255275b445 100644
--- a/packages/mui-material/src/styles/useTheme.js
+++ b/packages/mui-material/src/styles/useTheme.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useTheme as useThemeSystem } from '@mui/system';
 import defaultTheme from './defaultTheme';
diff --git a/packages/mui-material/src/styles/useThemeProps.js b/packages/mui-material/src/styles/useThemeProps.js
index 25fa93ccf039e1..77e14c7646ed24 100644
--- a/packages/mui-material/src/styles/useThemeProps.js
+++ b/packages/mui-material/src/styles/useThemeProps.js
@@ -1,3 +1,4 @@
+'use client';
 import { useThemeProps as systemUseThemeProps } from '@mui/system';
 import defaultTheme from './defaultTheme';
 import THEME_ID from './identifier';
diff --git a/packages/mui-material/src/useAutocomplete/index.js b/packages/mui-material/src/useAutocomplete/index.js
index a6c05b480618e9..fa72a071a5a55b 100644
--- a/packages/mui-material/src/useAutocomplete/index.js
+++ b/packages/mui-material/src/useAutocomplete/index.js
@@ -1 +1,2 @@
+'use client';
 export { default, createFilterOptions } from './useAutocomplete';
diff --git a/packages/mui-material/src/useAutocomplete/useAutocomplete.js b/packages/mui-material/src/useAutocomplete/useAutocomplete.js
index dd5c823bf28e61..644c0f95a03b76 100644
--- a/packages/mui-material/src/useAutocomplete/useAutocomplete.js
+++ b/packages/mui-material/src/useAutocomplete/useAutocomplete.js
@@ -1,2 +1,3 @@
+'use client';
 export { default } from '@mui/base/useAutocomplete';
 export * from '@mui/base/useAutocomplete';
diff --git a/packages/mui-material/src/useMediaQuery/index.js b/packages/mui-material/src/useMediaQuery/index.js
index c996e8b7e7d891..74992f88e57857 100644
--- a/packages/mui-material/src/useMediaQuery/index.js
+++ b/packages/mui-material/src/useMediaQuery/index.js
@@ -1 +1,2 @@
+'use client';
 export { default } from './useMediaQuery';
diff --git a/packages/mui-material/src/useMediaQuery/useMediaQuery.ts b/packages/mui-material/src/useMediaQuery/useMediaQuery.ts
index 61214c6d1556ba..afdda55456e356 100644
--- a/packages/mui-material/src/useMediaQuery/useMediaQuery.ts
+++ b/packages/mui-material/src/useMediaQuery/useMediaQuery.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { getThemeProps, useThemeWithoutDefault as useTheme } from '@mui/system';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
diff --git a/packages/mui-material/src/useMediaQuery/useMediaQueryTheme.js b/packages/mui-material/src/useMediaQuery/useMediaQueryTheme.js
index dec8ac860a76cc..184b1e26a63cb5 100644
--- a/packages/mui-material/src/useMediaQuery/useMediaQueryTheme.js
+++ b/packages/mui-material/src/useMediaQuery/useMediaQueryTheme.js
@@ -1,3 +1,4 @@
+'use client';
 import useMediaQuery from './useMediaQuery';
 
 // TODO v5: to deprecate in v4.x and remove in v5
diff --git a/packages/mui-material/src/usePagination/index.js b/packages/mui-material/src/usePagination/index.js
index 0cfab44452eba0..9e1df34da8bec1 100644
--- a/packages/mui-material/src/usePagination/index.js
+++ b/packages/mui-material/src/usePagination/index.js
@@ -1 +1,2 @@
+'use client';
 export { default } from './usePagination';
diff --git a/packages/mui-material/src/usePagination/usePagination.js b/packages/mui-material/src/usePagination/usePagination.js
index edaa97a17a0ccc..42eefce2c24998 100644
--- a/packages/mui-material/src/usePagination/usePagination.js
+++ b/packages/mui-material/src/usePagination/usePagination.js
@@ -1,3 +1,4 @@
+'use client';
 import { unstable_useControlled as useControlled } from '@mui/utils';
 
 export default function usePagination(props = {}) {
diff --git a/packages/mui-material/src/useScrollTrigger/index.js b/packages/mui-material/src/useScrollTrigger/index.js
index e996f70c773ee6..44f958ca6e2a14 100644
--- a/packages/mui-material/src/useScrollTrigger/index.js
+++ b/packages/mui-material/src/useScrollTrigger/index.js
@@ -1 +1,2 @@
+'use client';
 export { default } from './useScrollTrigger';
diff --git a/packages/mui-material/src/useScrollTrigger/useScrollTrigger.js b/packages/mui-material/src/useScrollTrigger/useScrollTrigger.js
index ec582b3913676a..f992cf82dedc23 100644
--- a/packages/mui-material/src/useScrollTrigger/useScrollTrigger.js
+++ b/packages/mui-material/src/useScrollTrigger/useScrollTrigger.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 function defaultTrigger(store, options) {
diff --git a/packages/mui-material/src/useTouchRipple/index.ts b/packages/mui-material/src/useTouchRipple/index.ts
index 31e422f495fd10..28dfd75c5e9136 100644
--- a/packages/mui-material/src/useTouchRipple/index.ts
+++ b/packages/mui-material/src/useTouchRipple/index.ts
@@ -1 +1,2 @@
+'use client';
 export { default } from './useTouchRipple';
diff --git a/packages/mui-material/src/useTouchRipple/useTouchRipple.ts b/packages/mui-material/src/useTouchRipple/useTouchRipple.ts
index 1894bc2188b94c..8cfcfd3589edcf 100644
--- a/packages/mui-material/src/useTouchRipple/useTouchRipple.ts
+++ b/packages/mui-material/src/useTouchRipple/useTouchRipple.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { TouchRippleActions } from '../ButtonBase/TouchRipple';
 import { useEventCallback } from '../utils';
diff --git a/packages/mui-material/src/utils/createSvgIcon.js b/packages/mui-material/src/utils/createSvgIcon.js
index 099abc10c72a57..c7afe2e9a222a7 100644
--- a/packages/mui-material/src/utils/createSvgIcon.js
+++ b/packages/mui-material/src/utils/createSvgIcon.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import SvgIcon from '../SvgIcon';
 
diff --git a/packages/mui-material/src/utils/index.js b/packages/mui-material/src/utils/index.js
index 60e7783f17a8fc..24a50a2c056b05 100644
--- a/packages/mui-material/src/utils/index.js
+++ b/packages/mui-material/src/utils/index.js
@@ -1,3 +1,4 @@
+'use client';
 import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/base/className';
 
 export { default as capitalize } from './capitalize';
diff --git a/packages/mui-material/src/utils/useControlled.js b/packages/mui-material/src/utils/useControlled.js
index 1e05d42f2be58f..098ebf75c4e83d 100644
--- a/packages/mui-material/src/utils/useControlled.js
+++ b/packages/mui-material/src/utils/useControlled.js
@@ -1,3 +1,4 @@
+'use client';
 import { unstable_useControlled as useControlled } from '@mui/utils';
 
 export default useControlled;
diff --git a/packages/mui-material/src/utils/useEnhancedEffect.js b/packages/mui-material/src/utils/useEnhancedEffect.js
index 2ec3b89a86d8ba..2695c89b614494 100644
--- a/packages/mui-material/src/utils/useEnhancedEffect.js
+++ b/packages/mui-material/src/utils/useEnhancedEffect.js
@@ -1,3 +1,4 @@
+'use client';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 
 export default useEnhancedEffect;
diff --git a/packages/mui-material/src/utils/useEventCallback.js b/packages/mui-material/src/utils/useEventCallback.js
index ff3ee70183388b..03b624ad3749d2 100644
--- a/packages/mui-material/src/utils/useEventCallback.js
+++ b/packages/mui-material/src/utils/useEventCallback.js
@@ -1,3 +1,4 @@
+'use client';
 import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
 
 export default useEventCallback;
diff --git a/packages/mui-material/src/utils/useForkRef.js b/packages/mui-material/src/utils/useForkRef.js
index b80dfcccfaacfb..38b967df8e7a75 100644
--- a/packages/mui-material/src/utils/useForkRef.js
+++ b/packages/mui-material/src/utils/useForkRef.js
@@ -1,3 +1,4 @@
+'use client';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 
 export default useForkRef;
diff --git a/packages/mui-material/src/utils/useId.js b/packages/mui-material/src/utils/useId.js
index 51a0cf8c6d03f9..fbd108d5635dad 100644
--- a/packages/mui-material/src/utils/useId.js
+++ b/packages/mui-material/src/utils/useId.js
@@ -1,3 +1,4 @@
+'use client';
 import { unstable_useId as useId } from '@mui/utils';
 
 export default useId;
diff --git a/packages/mui-material/src/utils/useIsFocusVisible.js b/packages/mui-material/src/utils/useIsFocusVisible.js
index e640db0f81d031..14e2ca9248573d 100644
--- a/packages/mui-material/src/utils/useIsFocusVisible.js
+++ b/packages/mui-material/src/utils/useIsFocusVisible.js
@@ -1,3 +1,4 @@
+'use client';
 import { unstable_useIsFocusVisible as useIsFocusVisible } from '@mui/utils';
 
 export default useIsFocusVisible;
diff --git a/packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.js b/packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.js
index d8879bdd90f284..da1bdd6ed28db7 100644
--- a/packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.js
+++ b/packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Global } from '@emotion/react';
diff --git a/packages/mui-styled-engine/src/GlobalStyles/index.js b/packages/mui-styled-engine/src/GlobalStyles/index.js
index 48e20189092434..275d047f4e9eb3 100644
--- a/packages/mui-styled-engine/src/GlobalStyles/index.js
+++ b/packages/mui-styled-engine/src/GlobalStyles/index.js
@@ -1 +1,2 @@
+'use client';
 export { default } from './GlobalStyles';
diff --git a/packages/mui-styled-engine/src/StyledEngineProvider/StyledEngineProvider.js b/packages/mui-styled-engine/src/StyledEngineProvider/StyledEngineProvider.js
index c871c1ad7848f7..c4097853f33829 100644
--- a/packages/mui-styled-engine/src/StyledEngineProvider/StyledEngineProvider.js
+++ b/packages/mui-styled-engine/src/StyledEngineProvider/StyledEngineProvider.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { CacheProvider } from '@emotion/react';
diff --git a/packages/mui-styled-engine/src/StyledEngineProvider/index.js b/packages/mui-styled-engine/src/StyledEngineProvider/index.js
index 30cd6986a545fa..6d2191b13941a1 100644
--- a/packages/mui-styled-engine/src/StyledEngineProvider/index.js
+++ b/packages/mui-styled-engine/src/StyledEngineProvider/index.js
@@ -1 +1,2 @@
+'use client';
 export { default } from './StyledEngineProvider';
diff --git a/packages/mui-styled-engine/src/index.js b/packages/mui-styled-engine/src/index.js
index 2eb9a86b75674d..c3cdee4cac8b34 100644
--- a/packages/mui-styled-engine/src/index.js
+++ b/packages/mui-styled-engine/src/index.js
@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable no-underscore-dangle */
 import emStyled from '@emotion/styled';
 
diff --git a/packages/mui-system/src/Box/Box.js b/packages/mui-system/src/Box/Box.js
index 6b9f42fb725d9e..777071d1b5d091 100644
--- a/packages/mui-system/src/Box/Box.js
+++ b/packages/mui-system/src/Box/Box.js
@@ -1,3 +1,4 @@
+'use client';
 import PropTypes from 'prop-types';
 import createBox from '../createBox';
 
diff --git a/packages/mui-system/src/Box/index.js b/packages/mui-system/src/Box/index.js
index a3e93ac53516a6..b59b10fc26a0bf 100644
--- a/packages/mui-system/src/Box/index.js
+++ b/packages/mui-system/src/Box/index.js
@@ -1 +1,2 @@
+'use client';
 export { default } from './Box';
diff --git a/packages/mui-system/src/Container/Container.tsx b/packages/mui-system/src/Container/Container.tsx
index 800e5e5f296a55..43e50e6b4892c3 100644
--- a/packages/mui-system/src/Container/Container.tsx
+++ b/packages/mui-system/src/Container/Container.tsx
@@ -1,3 +1,4 @@
+'use client';
 import PropTypes from 'prop-types';
 import createContainer from './createContainer';
 
diff --git a/packages/mui-system/src/Container/index.js b/packages/mui-system/src/Container/index.js
index be7c5c912f5943..0a922c1c8dee82 100644
--- a/packages/mui-system/src/Container/index.js
+++ b/packages/mui-system/src/Container/index.js
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Container';
 
 export { default as containerClasses } from './containerClasses';
diff --git a/packages/mui-system/src/GlobalStyles/GlobalStyles.tsx b/packages/mui-system/src/GlobalStyles/GlobalStyles.tsx
index 3637f469f4373d..ce908fdcb986c8 100644
--- a/packages/mui-system/src/GlobalStyles/GlobalStyles.tsx
+++ b/packages/mui-system/src/GlobalStyles/GlobalStyles.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles as MuiGlobalStyles, Interpolation } from '@mui/styled-engine';
diff --git a/packages/mui-system/src/GlobalStyles/index.ts b/packages/mui-system/src/GlobalStyles/index.ts
index a815f5c4a572b2..d54f8337f6e723 100644
--- a/packages/mui-system/src/GlobalStyles/index.ts
+++ b/packages/mui-system/src/GlobalStyles/index.ts
@@ -1,2 +1,3 @@
+'use client';
 export { default } from './GlobalStyles';
 export * from './GlobalStyles';
diff --git a/packages/mui-system/src/Stack/Stack.tsx b/packages/mui-system/src/Stack/Stack.tsx
index 6367f43f3b78bd..9b4673f69fa711 100644
--- a/packages/mui-system/src/Stack/Stack.tsx
+++ b/packages/mui-system/src/Stack/Stack.tsx
@@ -1,3 +1,4 @@
+'use client';
 import PropTypes from 'prop-types';
 import createStack from './createStack';
 /**
diff --git a/packages/mui-system/src/Stack/index.ts b/packages/mui-system/src/Stack/index.ts
index 3e02c9de01261b..78c63b4339f375 100644
--- a/packages/mui-system/src/Stack/index.ts
+++ b/packages/mui-system/src/Stack/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Stack';
 export { default as createStack } from './createStack';
 export * from './StackProps';
diff --git a/packages/mui-system/src/ThemeProvider/ThemeProvider.js b/packages/mui-system/src/ThemeProvider/ThemeProvider.js
index 83eca5ea75c341..1f4d5db08710b7 100644
--- a/packages/mui-system/src/ThemeProvider/ThemeProvider.js
+++ b/packages/mui-system/src/ThemeProvider/ThemeProvider.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import {
diff --git a/packages/mui-system/src/ThemeProvider/index.js b/packages/mui-system/src/ThemeProvider/index.js
index ae3e7b91b60666..05eaa8875f6edb 100644
--- a/packages/mui-system/src/ThemeProvider/index.js
+++ b/packages/mui-system/src/ThemeProvider/index.js
@@ -1 +1,2 @@
+'use client';
 export { default } from './ThemeProvider';
diff --git a/packages/mui-system/src/Unstable_Grid/Grid.tsx b/packages/mui-system/src/Unstable_Grid/Grid.tsx
index ffe3f614bb0735..216f3b2b12c676 100644
--- a/packages/mui-system/src/Unstable_Grid/Grid.tsx
+++ b/packages/mui-system/src/Unstable_Grid/Grid.tsx
@@ -1,3 +1,4 @@
+'use client';
 import PropTypes from 'prop-types';
 import createGrid from './createGrid';
 /**
diff --git a/packages/mui-system/src/Unstable_Grid/index.ts b/packages/mui-system/src/Unstable_Grid/index.ts
index 96a55fa381ed2f..9b2e8e91b570af 100644
--- a/packages/mui-system/src/Unstable_Grid/index.ts
+++ b/packages/mui-system/src/Unstable_Grid/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './Grid';
 export { default as createGrid } from './createGrid';
 export * from './GridProps';
diff --git a/packages/mui-system/src/createBox.js b/packages/mui-system/src/createBox.js
index f5309f19724129..e485c0ac468b07 100644
--- a/packages/mui-system/src/createBox.js
+++ b/packages/mui-system/src/createBox.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import clsx from 'clsx';
 import styled from '@mui/styled-engine';
diff --git a/packages/mui-system/src/cssVars/index.ts b/packages/mui-system/src/cssVars/index.ts
index bbc39f8cae1d67..c8a640a0a241bd 100644
--- a/packages/mui-system/src/cssVars/index.ts
+++ b/packages/mui-system/src/cssVars/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default } from './createCssVarsProvider';
 export type {
   CreateCssVarsProviderResult,
diff --git a/packages/mui-system/src/cssVars/useCurrentColorScheme.ts b/packages/mui-system/src/cssVars/useCurrentColorScheme.ts
index 69f8c543b7d421..a44c4790419d77 100644
--- a/packages/mui-system/src/cssVars/useCurrentColorScheme.ts
+++ b/packages/mui-system/src/cssVars/useCurrentColorScheme.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import {
   DEFAULT_MODE_STORAGE_KEY,
diff --git a/packages/mui-system/src/index.js b/packages/mui-system/src/index.js
index 0541521f18ee2f..9ec60389c62402 100644
--- a/packages/mui-system/src/index.js
+++ b/packages/mui-system/src/index.js
@@ -1,3 +1,4 @@
+'use client';
 import MuiError from '@mui/utils/macros/MuiError.macro';
 
 export { css, keyframes, StyledEngineProvider } from '@mui/styled-engine';
diff --git a/packages/mui-system/src/useTheme.js b/packages/mui-system/src/useTheme.js
index 2882da58dd8e9e..64abf3b3a8228a 100644
--- a/packages/mui-system/src/useTheme.js
+++ b/packages/mui-system/src/useTheme.js
@@ -1,3 +1,4 @@
+'use client';
 import createTheme from './createTheme';
 import useThemeWithoutDefault from './useThemeWithoutDefault';
 
diff --git a/packages/mui-system/src/useThemeProps/index.js b/packages/mui-system/src/useThemeProps/index.js
index cac7b802d5d674..101685f2bc816f 100644
--- a/packages/mui-system/src/useThemeProps/index.js
+++ b/packages/mui-system/src/useThemeProps/index.js
@@ -1,2 +1,3 @@
+'use client';
 export { default } from './useThemeProps';
 export { default as getThemeProps } from './getThemeProps';
diff --git a/packages/mui-system/src/useThemeProps/useThemeProps.js b/packages/mui-system/src/useThemeProps/useThemeProps.js
index 21f351e8009b8e..d7c98f380eee85 100644
--- a/packages/mui-system/src/useThemeProps/useThemeProps.js
+++ b/packages/mui-system/src/useThemeProps/useThemeProps.js
@@ -1,3 +1,4 @@
+'use client';
 import getThemeProps from './getThemeProps';
 import useTheme from '../useTheme';
 
diff --git a/packages/mui-system/src/useThemeWithoutDefault.js b/packages/mui-system/src/useThemeWithoutDefault.js
index 7d004d7c3b6a39..172955fe7a2bfb 100644
--- a/packages/mui-system/src/useThemeWithoutDefault.js
+++ b/packages/mui-system/src/useThemeWithoutDefault.js
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { ThemeContext } from '@mui/styled-engine';
 
diff --git a/packages/mui-utils/src/index.ts b/packages/mui-utils/src/index.ts
index 8def5d5daa2f00..1ad27fb44d5f21 100644
--- a/packages/mui-utils/src/index.ts
+++ b/packages/mui-utils/src/index.ts
@@ -1,3 +1,4 @@
+'use client';
 export { default as chainPropTypes } from './chainPropTypes';
 export { default as deepmerge } from './deepmerge';
 export { isPlainObject } from './deepmerge';
diff --git a/packages/mui-utils/src/useControlled/index.js b/packages/mui-utils/src/useControlled/index.js
index dd5c460c3a546a..f342c6f6b36a8f 100644
--- a/packages/mui-utils/src/useControlled/index.js
+++ b/packages/mui-utils/src/useControlled/index.js
@@ -1 +1,2 @@
+'use client';
 export { default } from './useControlled';
diff --git a/packages/mui-utils/src/useControlled/useControlled.js b/packages/mui-utils/src/useControlled/useControlled.js
index f235afed8a63d7..dae7fdd1318325 100644
--- a/packages/mui-utils/src/useControlled/useControlled.js
+++ b/packages/mui-utils/src/useControlled/useControlled.js
@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
 import * as React from 'react';
 
diff --git a/packages/mui-utils/src/useEnhancedEffect/index.ts b/packages/mui-utils/src/useEnhancedEffect/index.ts
index c55d5a7e10ecda..786b2289f10911 100644
--- a/packages/mui-utils/src/useEnhancedEffect/index.ts
+++ b/packages/mui-utils/src/useEnhancedEffect/index.ts
@@ -1 +1,2 @@
+'use client';
 export { default } from './useEnhancedEffect';
diff --git a/packages/mui-utils/src/useEnhancedEffect/useEnhancedEffect.ts b/packages/mui-utils/src/useEnhancedEffect/useEnhancedEffect.ts
index 5856a3922f4ab9..97ab04557148cc 100644
--- a/packages/mui-utils/src/useEnhancedEffect/useEnhancedEffect.ts
+++ b/packages/mui-utils/src/useEnhancedEffect/useEnhancedEffect.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
diff --git a/packages/mui-utils/src/useEventCallback/index.ts b/packages/mui-utils/src/useEventCallback/index.ts
index ba9c7ef610b7dd..ee0a4c46b91463 100644
--- a/packages/mui-utils/src/useEventCallback/index.ts
+++ b/packages/mui-utils/src/useEventCallback/index.ts
@@ -1 +1,2 @@
+'use client';
 export { default } from './useEventCallback';
diff --git a/packages/mui-utils/src/useEventCallback/useEventCallback.ts b/packages/mui-utils/src/useEventCallback/useEventCallback.ts
index 1483a4e033faf4..7cc333c947125a 100644
--- a/packages/mui-utils/src/useEventCallback/useEventCallback.ts
+++ b/packages/mui-utils/src/useEventCallback/useEventCallback.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import useEnhancedEffect from '../useEnhancedEffect';
 
diff --git a/packages/mui-utils/src/useForkRef/index.ts b/packages/mui-utils/src/useForkRef/index.ts
index e2fc60cc874c97..787767ef7ab9e5 100644
--- a/packages/mui-utils/src/useForkRef/index.ts
+++ b/packages/mui-utils/src/useForkRef/index.ts
@@ -1 +1,2 @@
+'use client';
 export { default } from './useForkRef';
diff --git a/packages/mui-utils/src/useForkRef/useForkRef.ts b/packages/mui-utils/src/useForkRef/useForkRef.ts
index 27ca6d4b6b9691..2d2f54f5c19b76 100644
--- a/packages/mui-utils/src/useForkRef/useForkRef.ts
+++ b/packages/mui-utils/src/useForkRef/useForkRef.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import setRef from '../setRef';
 
diff --git a/packages/mui-utils/src/useId/index.ts b/packages/mui-utils/src/useId/index.ts
index bf8a1630ed13ac..8f0af594e67ebe 100644
--- a/packages/mui-utils/src/useId/index.ts
+++ b/packages/mui-utils/src/useId/index.ts
@@ -1 +1,2 @@
+'use client';
 export { default } from './useId';
diff --git a/packages/mui-utils/src/useId/useId.ts b/packages/mui-utils/src/useId/useId.ts
index 515ca811db746d..6ea0324964ed8e 100644
--- a/packages/mui-utils/src/useId/useId.ts
+++ b/packages/mui-utils/src/useId/useId.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 let globalId = 0;
diff --git a/packages/mui-utils/src/useIsFocusVisible.ts b/packages/mui-utils/src/useIsFocusVisible.ts
index 899d7f15dfe23e..d1fc3547a2141f 100644
--- a/packages/mui-utils/src/useIsFocusVisible.ts
+++ b/packages/mui-utils/src/useIsFocusVisible.ts
@@ -1,3 +1,4 @@
+'use client';
 // based on https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js
 import * as React from 'react';
 
diff --git a/packages/mui-utils/src/usePreviousProps.ts b/packages/mui-utils/src/usePreviousProps.ts
index 9cacbd90a1b394..500b24bf87d98c 100644
--- a/packages/mui-utils/src/usePreviousProps.ts
+++ b/packages/mui-utils/src/usePreviousProps.ts
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 const usePreviousProps = <T>(value: T) => {
diff --git a/packages/rsc-builder/buildRsc.ts b/packages/rsc-builder/buildRsc.ts
new file mode 100644
index 00000000000000..9fa723f3a400d3
--- /dev/null
+++ b/packages/rsc-builder/buildRsc.ts
@@ -0,0 +1,150 @@
+import * as yargs from 'yargs';
+import * as fse from 'fs-extra';
+import os from 'os';
+import path from 'path';
+import findComponents from '../api-docs-builder/utils/findComponents';
+import findHooks from '../api-docs-builder/utils/findHooks';
+
+type CommandOptions = { grep?: string };
+
+const { EOL } = os;
+
+const PROJECTS = [
+  {
+    name: 'base',
+    rootPath: path.join(process.cwd(), 'packages/mui-base'),
+  },
+  {
+    name: 'material',
+    rootPath: path.join(process.cwd(), 'packages/mui-material'),
+  },
+  {
+    name: 'material-next',
+    rootPath: path.join(process.cwd(), 'packages/mui-material-next'),
+  },
+  {
+    name: 'joy',
+    rootPath: path.join(process.cwd(), 'packages/mui-joy'),
+  },
+  {
+    name: 'system',
+    rootPath: path.join(process.cwd(), 'packages/mui-system'),
+  },
+  {
+    name: 'styled-engine',
+    rootPath: path.join(process.cwd(), 'packages/mui-styled-engine'),
+  },
+  {
+    name: 'utils',
+    rootPath: path.join(process.cwd(), 'packages/mui-utils'),
+  },
+];
+
+async function processFile(
+  filename: string,
+  options: {
+    lineToPrepend?: string;
+    truncate?: boolean;
+  } = {},
+) {
+  const { lineToPrepend = `'use client';${EOL}`, truncate = true } = options;
+  const contents = await fse.readFile(filename, 'utf8');
+
+  const truncatedContents = truncate ? contents.split(/\r?\n/).slice(1).join('\n') : contents;
+  const newContents = `${lineToPrepend}${truncatedContents}`;
+
+  await fse.writeFile(filename, newContents);
+}
+
+function getIndexFile(directory: string) {
+  const items = fse.readdirSync(directory);
+
+  const indexFile = items.reduce((prev, curr) => {
+    if (!/^index.(js|ts)/.test(curr)) {
+      return prev;
+    }
+    return curr;
+  }, '');
+
+  return {
+    filename: path.join(directory, indexFile),
+  };
+}
+
+async function run(argv: yargs.ArgumentsCamelCase<CommandOptions>) {
+  const grep = argv.grep == null ? null : new RegExp(argv.grep);
+
+  await PROJECTS.reduce(async (resolvedPromise, project) => {
+    await resolvedPromise;
+
+    const projectSrc = path.join(project.rootPath, 'src');
+
+    const indexFile = getIndexFile(projectSrc);
+
+    try {
+      processFile(indexFile.filename);
+    } catch (error: any) {
+      error.message = `${path.relative(process.cwd(), indexFile.filename)}: ${error.message}`;
+      throw error;
+    }
+
+    const components = findComponents(projectSrc).filter((component) => {
+      if (grep === null) {
+        return true;
+      }
+      return grep.test(component.filename);
+    });
+
+    components.forEach(async (component) => {
+      try {
+        processFile(component.filename);
+
+        if (component.indexFilename) {
+          processFile(component.indexFilename);
+        }
+      } catch (error: any) {
+        error.message = `${path.relative(process.cwd(), component.filename)}: ${error.message}`;
+        throw error;
+      }
+    });
+
+    const hooks = findHooks(projectSrc).filter((hook) => {
+      if (grep === null) {
+        return true;
+      }
+      return grep.test(hook.filename);
+    });
+
+    hooks.forEach(async (hook) => {
+      try {
+        processFile(hook.filename);
+
+        if (hook.indexFilename) {
+          processFile(hook.indexFilename);
+        }
+      } catch (error: any) {
+        error.message = `${path.relative(process.cwd(), hook.filename)}: ${error.message}`;
+        throw error;
+      }
+    });
+    return Promise.resolve();
+  }, Promise.resolve());
+}
+
+yargs
+  .command({
+    command: '$0',
+    describe: 'prepends the use client directive to components',
+    builder: (command) => {
+      return command.option('grep', {
+        description:
+          'Only process files for component filenames matching the pattern. The string is treated as a RegExp.',
+        type: 'string',
+      });
+    },
+    handler: run,
+  })
+  .help()
+  .strict(true)
+  .version(false)
+  .parse();
diff --git a/packages/rsc-builder/package.json b/packages/rsc-builder/package.json
new file mode 100644
index 00000000000000..4bccdcb25ee6f8
--- /dev/null
+++ b/packages/rsc-builder/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "rsc-builder",
+  "version": "1.0.0",
+  "private": "true",
+  "main": "./buildRsc.ts"
+}
diff --git a/packages/rsc-builder/tsconfig.json b/packages/rsc-builder/tsconfig.json
new file mode 100644
index 00000000000000..4a58f12da89c7e
--- /dev/null
+++ b/packages/rsc-builder/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "noUnusedLocals": false,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "types": ["node", "mocha"],
+    "target": "ES2020",
+    "module": "CommonJS",
+    "moduleResolution": "node",
+    "strict": true,
+    "baseUrl": "./"
+  },
+  "include": ["./**/*.ts", "./**/*.js"],
+  "exclude": ["node_modules"]
+}