diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index 26c16896a73608..63f9d967754b4d 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -36,10 +36,10 @@
   },
   "sandboxes": [
     "material-ui-issue-latest-s2dsx",
-    "github/mui/material-ui/tree/HEAD/examples/create-react-app",
-    "github/mui/material-ui/tree/HEAD/examples/create-react-app-with-typescript",
-    "github/mui/material-ui/tree/HEAD/examples/joy-cra-typescript",
-    "github/mui/material-ui/tree/HEAD/examples/base-cra-typescript"
+    "/examples/material-cra",
+    "/examples/material-cra-ts",
+    "/examples/joy-cra-ts",
+    "/examples/base-cra-ts"
   ],
   "silent": true
 }
diff --git a/.eslintignore b/.eslintignore
index 23f0c7da923cc4..b1ce3558845757 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -4,10 +4,10 @@
 /coverage
 /docs/export
 /docs/pages/playground/
-/examples/create-react-app*/src/serviceWorker.js
-/examples/gatsby/public/
-/examples/preact/config
-/examples/preact/scripts
+/examples/material-cra*/src/serviceWorker.js
+/examples/material-gatsby/public/
+/examples/material-preact/config
+/examples/material-preact/scripts
 /packages/mui-codemod/lib
 /packages/mui-codemod/src/*/*.test/*
 /packages/mui-icons-material/fixtures
diff --git a/CHANGELOG.md b/CHANGELOG.md
index c946dc9ceb57a1..79e5109d68ec2d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3441,7 +3441,7 @@ _Feb 1, 2022_
 
 A big thanks to the 22 contributors who made this release possible. Here are some highlights ✨:
 
-- 🛠 @goncalovf added an example project using [MUI with Vite.js](https://github.com/mui/material-ui/tree/master/examples/vitejs) (#28241)
+- 🛠 @goncalovf added an example project using [Material UI with Vite.js](https://github.com/mui/material-ui/tree/master/examples/material-vite) (#28241)
 - Number of 🐛 bug fixes and 📚 documentation improvements.
 
 ### `@mui/material@5.4.0`
diff --git a/docs/data/base/guides/working-with-tailwind-css/PlayerFinal.js b/docs/data/base/guides/working-with-tailwind-css/PlayerFinal.js
index 900d44ae880cff..4391b8d225f246 100644
--- a/docs/data/base/guides/working-with-tailwind-css/PlayerFinal.js
+++ b/docs/data/base/guides/working-with-tailwind-css/PlayerFinal.js
@@ -4,7 +4,7 @@ export default function PlayerFinal() {
   return (
     <iframe
       title="codesandbox"
-      src="https://codesandbox.io/embed/github/mui/material-ui/tree/master/examples/mui-base-with-tailwind-css?hidenavigation=1&fontsize=14&view=preview"
+      src="https://codesandbox.io/embed/github/mui/material-ui/tree/master/examples/base-cra-tailwind-ts?hidenavigation=1&fontsize=14&view=preview"
       style={{
         width: '100%',
         height: 400,
diff --git a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md
index 4f3c5421d9b02e..12824ac662c98f 100644
--- a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md
+++ b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md
@@ -503,4 +503,4 @@ These are the things we covered in this guide:
 We used the `component` prop to pass them into the parent component.\
 ✅ How to apply conditional styling based on the owner component's state using a callback as value for the `slotProps` prop.
 
-Get all the code used in this guide in the [MUI Base with Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/mui-base-with-tailwind-css) example project.
+Get all the code used in this guide in the [MUI Base with Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/base-cra-tailwind-ts) example project.
diff --git a/docs/data/material/getting-started/example-projects/example-projects.md b/docs/data/material/getting-started/example-projects/example-projects.md
index ad29cdd69a6ef4..3cad359fcb93b1 100644
--- a/docs/data/material/getting-started/example-projects/example-projects.md
+++ b/docs/data/material/getting-started/example-projects/example-projects.md
@@ -8,17 +8,17 @@ You can find some example projects in the [GitHub repository](https://github.com
 
 <!-- #default-branch-switch -->
 
-- [Next.js](https://github.com/mui/material-ui/tree/master/examples/nextjs) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/nextjs-with-typescript))
-- [Create React App](https://github.com/mui/material-ui/tree/master/examples/create-react-app) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/create-react-app-with-typescript))
-- [Remix](https://github.com/mui/material-ui/tree/master/examples/remix-with-typescript)
-- [Gatsby](https://github.com/mui/material-ui/tree/master/examples/gatsby)
-- [Preact](https://github.com/mui/material-ui/tree/master/examples/preact)
-- [CDN](https://github.com/mui/material-ui/tree/master/examples/cdn)
-- [Plain server-side](https://github.com/mui/material-ui/tree/master/examples/ssr)
-- [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/tailwind-css)
-- [Vite.js](https://github.com/mui/material-ui/tree/master/examples/vitejs) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/vitejs-with-typescript))
-- [Use styled-components as style engine](https://github.com/mui/material-ui/tree/master/examples/create-react-app-with-styled-components) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/create-react-app-with-styled-components-typescript))
-- [Next.js + @mui/styles (v4 migration helper)](https://github.com/mui/material-ui/tree/master/examples/nextjs-with-typescript-v4-migration)
+- [Next.js](https://github.com/mui/material-ui/tree/master/examples/material-next) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/material-next-ts))
+- [Create React App](https://github.com/mui/material-ui/tree/master/examples/material-cra) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/material-cra-ts))
+- [Remix](https://github.com/mui/material-ui/tree/master/examples/material-remix-ts)
+- [Gatsby](https://github.com/mui/material-ui/tree/master/examples/material-gatsby)
+- [Preact](https://github.com/mui/material-ui/tree/master/examples/material-preact)
+- [CDN](https://github.com/mui/material-ui/tree/master/examples/material-via-cdn)
+- [Express.js (server-rendered)](https://github.com/mui/material-ui/tree/master/examples/material-express-ssr)
+- [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-cra-tailwind-ts)
+- [Vite.js](https://github.com/mui/material-ui/tree/master/examples/material-vite) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/material-vite-ts))
+- [Use styled-components as style engine](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components-ts))
+- [Next.js + @mui/styles (v4 migration helper)](https://github.com/mui/material-ui/tree/master/examples/material-next-ts-v4-v5-migration)
 
 Create React App is an awesome project for learning React.
 Have a look at [the alternatives available](https://github.com/facebook/create-react-app/blob/HEAD/README.md#popular-alternatives) to see which project best fits your needs.
diff --git a/docs/data/material/getting-started/installation/installation.md b/docs/data/material/getting-started/installation/installation.md
index 0f3708d097ad4e..9157a6e8b618c9 100644
--- a/docs/data/material/getting-started/installation/installation.md
+++ b/docs/data/material/getting-started/installation/installation.md
@@ -123,7 +123,7 @@ For instance, via Google Web Fonts:
 ## CDN
 
 You can start using Material UI right away with minimal front-end infrastructure by installing it via CDN, which is a great option for rapid prototyping.
-Follow [this CDN example](https://github.com/mui/material-ui/tree/master/examples/cdn) to get started.
+Follow [this CDN example](https://github.com/mui/material-ui/tree/master/examples/material-via-cdn) to get started.
 
 :::error
 We do _not_ recommend using this approach in production.
diff --git a/docs/data/material/guides/interoperability/interoperability.md b/docs/data/material/guides/interoperability/interoperability.md
index dbde8cecc029a0..0909cec976f3d9 100644
--- a/docs/data/material/guides/interoperability/interoperability.md
+++ b/docs/data/material/guides/interoperability/interoperability.md
@@ -289,13 +289,13 @@ export default function GlobalCssSliderDeep() {
 
 ### Change the default styled engine
 
-By default, MUI components come with Emotion as their style engine. If,
+By default, Material UI components come with Emotion as their style engine. If,
 however, you would like to use `styled-components`, you can configure your app by following the [styled engine guide](/material-ui/guides/styled-engine/#how-to-switch-to-styled-components) or starting with one of the example projects:
 
 <!-- #default-branch-switch -->
 
 - [Create React App with styled-components](https://github.com/mui/material-ui/tree/master/examples/create-react-app-with-styled-components)
-- [Create React App with styled-components and typescript](https://github.com/mui/material-ui/tree/master/examples/create-react-app-with-styled-components-typescript)
+- [Create React App with styled-components and typescript](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components-ts)
 
 Following this approach reduces the bundle size, and removes the need to configure the CSS injection order.
 
@@ -612,7 +612,7 @@ It works exactly like styled components. You can [use the same guide](/material-
 
 ### Setup
 
-If you are used to Tailwind CSS and want to use it together with the MUI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/tailwind-css) example project.
+If you are used to Tailwind CSS and want to use it together with the MUI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-cra-tailwind-ts) example project.
 If you use a different framework, or already have set up your project, follow these steps:
 
 1. Add Tailwind CSS to your project, following the instructions in https://tailwindcss.com/docs/installation.
diff --git a/docs/data/material/guides/routing/routing.md b/docs/data/material/guides/routing/routing.md
index 2500e4166370ff..f41e36e4e9d68f 100644
--- a/docs/data/material/guides/routing/routing.md
+++ b/docs/data/material/guides/routing/routing.md
@@ -99,9 +99,9 @@ const LinkBehavior = React.forwardRef((props, ref) => (
 
 ### Next.js
 
-The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/nextjs-with-typescript) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/api-reference/next/link) with MUI.
+The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-next-ts) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/api-reference/next/link) with Material UI.
 
-- The first version of the adapter is the [`NextLinkComposed`](https://github.com/mui/material-ui/blob/HEAD/examples/nextjs-with-typescript/src/Link.tsx) component.
+- The first version of the adapter is the [`NextLinkComposed`](https://github.com/mui/material-ui/blob/HEAD/examples/material-next-ts/src/Link.tsx) component.
   This component is unstyled and only responsible for handling the navigation.
   The prop `href` was renamed `to` to avoid a naming conflict.
   This is similar to react-router's Link component.
@@ -127,7 +127,7 @@ The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/nextj
 
 - The second version of the adapter is the `Link` component.
   This component is styled.
-  It leverages the [link component of MUI](/material-ui/react-link/) with `NextLinkComposed`.
+  It uses the [Material UI Link component](/material-ui/react-link/) with `NextLinkComposed`.
 
   ```tsx
   import Link from '../src/Link';
diff --git a/docs/data/material/guides/server-rendering/server-rendering.md b/docs/data/material/guides/server-rendering/server-rendering.md
index 66721fc5cb8410..0d4408e6a7bd36 100644
--- a/docs/data/material/guides/server-rendering/server-rendering.md
+++ b/docs/data/material/guides/server-rendering/server-rendering.md
@@ -215,9 +215,9 @@ ReactDOM.hydrate(<Main />, document.querySelector('#root'));
 
 We host different reference implementations which you can find in the [GitHub repository](https://github.com/mui/material-ui) under the [`/examples`](https://github.com/mui/material-ui/tree/HEAD/examples) folder:
 
-- [The reference implementation of this tutorial](https://github.com/mui/material-ui/tree/HEAD/examples/ssr)
-- [Gatsby](https://github.com/mui/material-ui/tree/HEAD/examples/gatsby)
-- [Next.js](https://github.com/mui/material-ui/tree/HEAD/examples/nextjs) ([TypeScript version](https://github.com/mui/material-ui/tree/HEAD/examples/nextjs-with-typescript))
+- [The reference implementation of this tutorial](https://github.com/mui/material-ui/tree/HEAD/examples/material-express-ssr)
+- [Gatsby](https://github.com/mui/material-ui/tree/HEAD/examples/material-gatsby)
+- [Next.js](https://github.com/mui/material-ui/tree/HEAD/examples/material-next) ([TypeScript version](https://github.com/mui/material-ui/tree/HEAD/examples/material-next-ts))
 
 ## Troubleshooting
 
diff --git a/docs/data/material/guides/styled-engine/styled-engine.md b/docs/data/material/guides/styled-engine/styled-engine.md
index 8f6698040ca6bd..1208844af99b1f 100644
--- a/docs/data/material/guides/styled-engine/styled-engine.md
+++ b/docs/data/material/guides/styled-engine/styled-engine.md
@@ -104,12 +104,12 @@ You can use these `styled-component` examples as a reference:
 
 <!-- #default-branch-switch -->
 
-- [create-react-app](https://github.com/mui/material-ui/tree/master/examples/create-react-app-with-styled-components)
-- [create-react-app with TypeScript](https://github.com/mui/material-ui/tree/master/examples/create-react-app-with-styled-components-typescript)
+- [create-react-app](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components)
+- [create-react-app with TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components-ts)
 - [and many others](https://github.com/mui/material-ui/tree/master/examples)
 
 :::warning
 `@emotion/react`, `@emotion/styled`, and `styled-components` are optional peer dependencies of `@mui/material`, so you need to install them yourself. See the [Installation guide](/material-ui/getting-started/installation/) for more info.
 :::
 
-This package-swap approach is identical to the replacement of React with [Preact](https://github.com/preactjs/preact). The Preact team has documented a large number of installation configurations. If you are stuck with MUI + styled-components, don't hesitate to check out how they solve the problem, as you can likely transfer the solution.
+This package-swap approach is identical to the replacement of React with [Preact](https://github.com/preactjs/preact). The Preact team has documented a large number of installation configurations. If you are stuck with Material UI + styled-components, don't hesitate to check out how they solve the problem, as you can likely transfer the solution.
diff --git a/docs/data/material/guides/typescript/typescript.md b/docs/data/material/guides/typescript/typescript.md
index b8a224972aef17..55d9bd60e16348 100644
--- a/docs/data/material/guides/typescript/typescript.md
+++ b/docs/data/material/guides/typescript/typescript.md
@@ -6,7 +6,7 @@
 
 <!-- #default-branch-switch -->
 
-MUI requires a minimum version of TypeScript 3.5. Have a look at the [Create React App with TypeScript](https://github.com/mui/material-ui/tree/master/examples/create-react-app-with-typescript) example.
+Material UI requires a minimum version of TypeScript 3.5. Have a look at the [Create React App with TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-cra-ts) example.
 
 For types to work, it's recommended that you have at least the following options enabled in your `tsconfig.json`:
 
diff --git a/docs/data/material/migration/migration-v4/migrating-from-jss.md b/docs/data/material/migration/migration-v4/migrating-from-jss.md
index 148fd157fdb6b6..fab329cda1bfb8 100644
--- a/docs/data/material/migration/migration-v4/migrating-from-jss.md
+++ b/docs/data/material/migration/migration-v4/migrating-from-jss.md
@@ -18,7 +18,7 @@ Note that you may continue to use JSS for adding overrides for the components (e
 Then, if at any point you want to move over to the new styling engine, you can refactor your components progressively.
 
 :::info
-If you are using Next.js and you are not sure how to configure SSR to work with both Emotion & JSS, take a look a this [example project](https://github.com/mui/material-ui/tree/master/examples/nextjs-with-typescript-v4-migration).
+If you are using Next.js and you are not sure how to configure SSR to work with both Emotion & JSS, take a look a this [example project](https://github.com/mui/material-ui/tree/master/examples/material-next-ts-v4-v5-migration).
 :::
 
 This document reviews all the steps necessary to migrate away from JSS.
diff --git a/docs/data/material/migration/migration-v4/migration-v4.md b/docs/data/material/migration/migration-v4/migration-v4.md
index 67205c618aa8ce..85aa09cc6cf740 100644
--- a/docs/data/material/migration/migration-v4/migration-v4.md
+++ b/docs/data/material/migration/migration-v4/migration-v4.md
@@ -28,7 +28,7 @@ Need to refer back to an older version of the docs? Check out [the v4 documentat
 :::
 
 :::info
-If you are using Next.js and you are not sure how to configure SSR to work with both Emotion & JSS, take a look a this [example project](https://github.com/mui/material-ui/tree/master/examples/nextjs-with-typescript-v4-migration).
+If you are using Next.js and you are not sure how to configure SSR to work with both Emotion & JSS, take a look a this [example project](https://github.com/mui/material-ui/tree/master/examples/material-next-ts-v4-v5-migration).
 :::
 
 ## Why you should migrate
diff --git a/docs/data/styles/advanced/advanced.md b/docs/data/styles/advanced/advanced.md
index d35e5021d2c389..4ae89ebe38f671 100644
--- a/docs/data/styles/advanced/advanced.md
+++ b/docs/data/styles/advanced/advanced.md
@@ -400,15 +400,15 @@ Refer to the plugin's page for setup and usage instructions.
 
 <!-- #default-branch-switch -->
 
-Refer to [this example Gatsby project](https://github.com/mui/material-ui/tree/master/examples/gatsby) for an up-to-date usage example.
+Refer to [this example Gatsby project](https://github.com/mui/material-ui/tree/master/examples/material-gatsby) for an up-to-date usage example.
 
 ### Next.js
 
-You need to have a custom `pages/_document.js`, then copy [this logic](https://github.com/mui/material-ui/blob/814fb60bbd8e500517b2307b6a297a638838ca89/examples/nextjs/pages/_document.js#L52-L59) to inject the server-side rendered styles into the `<head>` element.
+You need to have a custom `pages/_document.js`, then copy [this logic](https://github.com/mui/material-ui/blob/814fb60bbd8e500517b2307b6a297a638838ca89/examples/material-next/pages/_document.js#L52-L59) to inject the server-side rendered styles into the `<head>` element.
 
 <!-- #default-branch-switch -->
 
-Refer to [this example project](https://github.com/mui/material-ui/tree/master/examples/nextjs) for an up-to-date usage example.
+Refer to [this example project](https://github.com/mui/material-ui/tree/master/examples/material-next) for an up-to-date usage example.
 
 ## Class names
 
diff --git a/docs/pages/blog/2020-q3-update.md b/docs/pages/blog/2020-q3-update.md
index 32e263b60fccf2..739d149d075c07 100644
--- a/docs/pages/blog/2020-q3-update.md
+++ b/docs/pages/blog/2020-q3-update.md
@@ -105,7 +105,7 @@ Here are the most significant improvements since June 2020. This was a dense qua
 
 - 👩‍🎨 We have completed the first iteration of the new styling solution of v5.<br />
   You can find a [new version](/material-ui/react-slider/) of the slider in the lab powered by [Emotion](https://emotion.sh/docs/introduction).<br />
-  If you are already using styled-components in your application, you can swap Emotion for styled-components 💅. Check this [CodeSandbox](https://codesandbox.io/s/sliderstyled-with-styled-components-forked-olc27?file=/package.json) or [CRA](https://github.com/mui/material-ui/tree/HEAD/examples/create-react-app-with-styled-components/) for a demo. It relies on aliases to prevent any bundle size overhead.<br />
+  If you are already using styled-components in your application, you can swap Emotion for styled-components 💅. Check this [CodeSandbox](https://codesandbox.io/s/sliderstyled-with-styled-components-forked-olc27?file=/package.json) or [CRA](https://github.com/mui/material-ui/tree/HEAD/examples/material-cra-styled-components/) for a demo. It relies on aliases to prevent any bundle size overhead.<br />
   The new styling solution saves 2kB+ gzipped in the bundle compared to JSS, and about 14 kB gzipped if you were already using styled-components or Emotion.<br />
   Last but not least, this change allows us to take advantage of dynamic style props. We will use them for dynamic color props, variant props, and new style props available in the core components.
 
diff --git a/docs/pages/blog/material-ui-v4-is-out.md b/docs/pages/blog/material-ui-v4-is-out.md
index 2eacf7bd0f8490..9089d2c977b2da 100644
--- a/docs/pages/blog/material-ui-v4-is-out.md
+++ b/docs/pages/blog/material-ui-v4-is-out.md
@@ -163,7 +163,7 @@ import {
 
 <p class="blog-description">Fine level tracking</p>
 
-- **Preact X.** We have introduced a working [integration example with Preact](https://github.com/mui/material-ui/blob/HEAD/examples/preact/README.md). Preact is a fast, 1/10 smaller alternative to React, with the same modern API. We will do our best to support it.
+- **Preact X.** We have introduced a working [integration example with Preact](https://github.com/mui/material-ui/blob/HEAD/examples/material-preact/README.md). Preact is a fast, 1/10 smaller alternative to React, with the same modern API. We will do our best to support it.
 - **Runtime performance**. We have heard that some people struggle with the runtime cost of using Material UI. We have solved a few problems reported, but nothing systematic. We have observed [a slight gain](https://github.com/mui/material-ui/pull/15023) by moving from the classes API to the hooks API. However, it's hard to make progress as we lack a properly setup performance bench. It's something to consider for v5.
 
 ### Preparing for the future
diff --git a/docs/src/modules/components/Link.tsx b/docs/src/modules/components/Link.tsx
index 6910ebaabf18ad..168f3e0c371936 100644
--- a/docs/src/modules/components/Link.tsx
+++ b/docs/src/modules/components/Link.tsx
@@ -11,8 +11,8 @@ import { LANGUAGES_IGNORE_PAGES } from 'docs/config';
  * File to keep in sync with:
  *
  * - /docs/src/modules/components/Link.tsx
- * - /examples/nextjs/src/Link.js
- * - /examples/nextjs-with-typescript/src/Link.tsx
+ * - /examples/material-next/src/Link.js
+ * - /examples/material-next-ts/src/Link.tsx
  */
 
 // Add support for the sx prop for consistency with the other branches.
diff --git a/examples/create-react-app-with-styled-components-typescript/.gitignore b/examples/base-cra-tailwind-ts/.gitignore
similarity index 100%
rename from examples/create-react-app-with-styled-components-typescript/.gitignore
rename to examples/base-cra-tailwind-ts/.gitignore
diff --git a/examples/mui-base-with-tailwind-css/README.md b/examples/base-cra-tailwind-ts/README.md
similarity index 75%
rename from examples/mui-base-with-tailwind-css/README.md
rename to examples/base-cra-tailwind-ts/README.md
index 2033fd3d4fdf51..d3d1d0b167b8e3 100644
--- a/examples/mui-base-with-tailwind-css/README.md
+++ b/examples/base-cra-tailwind-ts/README.md
@@ -1,4 +1,4 @@
-# Create React App example with MUI Base & Tailwind CSS
+# MUI Base - Create React App example with Tailwind CSS in TypeScript
 
 ## How to use
 
@@ -7,8 +7,8 @@ Download the example [or clone the repo](https://github.com/mui/material-ui):
 <!-- #default-branch-switch -->
 
 ```sh
-curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/mui-base-with-tailwind-css
-cd mui-base-with-tailwind-css
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/base-cra-tailwind-ts
+cd base-cra-tailwind-ts
 ```
 
 Install it and run:
@@ -22,9 +22,9 @@ or:
 
 <!-- #default-branch-switch -->
 
-[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/mui-base-with-tailwind-css)
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/base-cra-tailwind-ts)
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/mui-base-with-tailwind-css)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/base-cra-tailwind-ts)
 
 ## The idea behind the example
 
diff --git a/examples/mui-base-with-tailwind-css/package.json b/examples/base-cra-tailwind-ts/package.json
similarity index 95%
rename from examples/mui-base-with-tailwind-css/package.json
rename to examples/base-cra-tailwind-ts/package.json
index ca707632e19082..f7489976f2439e 100644
--- a/examples/mui-base-with-tailwind-css/package.json
+++ b/examples/base-cra-tailwind-ts/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "mui-base-with-tailwind-css",
+  "name": "base-cra-tailwind-ts",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
diff --git a/examples/mui-base-with-tailwind-css/postcss.config.js b/examples/base-cra-tailwind-ts/postcss.config.js
similarity index 100%
rename from examples/mui-base-with-tailwind-css/postcss.config.js
rename to examples/base-cra-tailwind-ts/postcss.config.js
diff --git a/examples/base-cra-typescript/public/favicon.ico b/examples/base-cra-tailwind-ts/public/favicon.ico
similarity index 100%
rename from examples/base-cra-typescript/public/favicon.ico
rename to examples/base-cra-tailwind-ts/public/favicon.ico
diff --git a/examples/mui-base-with-tailwind-css/public/index.html b/examples/base-cra-tailwind-ts/public/index.html
similarity index 100%
rename from examples/mui-base-with-tailwind-css/public/index.html
rename to examples/base-cra-tailwind-ts/public/index.html
diff --git a/examples/mui-base-with-tailwind-css/public/logo192.png b/examples/base-cra-tailwind-ts/public/logo192.png
similarity index 100%
rename from examples/mui-base-with-tailwind-css/public/logo192.png
rename to examples/base-cra-tailwind-ts/public/logo192.png
diff --git a/examples/mui-base-with-tailwind-css/public/logo512.png b/examples/base-cra-tailwind-ts/public/logo512.png
similarity index 100%
rename from examples/mui-base-with-tailwind-css/public/logo512.png
rename to examples/base-cra-tailwind-ts/public/logo512.png
diff --git a/examples/create-react-app-with-styled-components-typescript/public/manifest.json b/examples/base-cra-tailwind-ts/public/manifest.json
similarity index 100%
rename from examples/create-react-app-with-styled-components-typescript/public/manifest.json
rename to examples/base-cra-tailwind-ts/public/manifest.json
diff --git a/examples/create-react-app-with-styled-components-typescript/public/robots.txt b/examples/base-cra-tailwind-ts/public/robots.txt
similarity index 100%
rename from examples/create-react-app-with-styled-components-typescript/public/robots.txt
rename to examples/base-cra-tailwind-ts/public/robots.txt
diff --git a/examples/mui-base-with-tailwind-css/src/App.tsx b/examples/base-cra-tailwind-ts/src/App.tsx
similarity index 100%
rename from examples/mui-base-with-tailwind-css/src/App.tsx
rename to examples/base-cra-tailwind-ts/src/App.tsx
diff --git a/examples/mui-base-with-tailwind-css/src/Button.tsx b/examples/base-cra-tailwind-ts/src/Button.tsx
similarity index 100%
rename from examples/mui-base-with-tailwind-css/src/Button.tsx
rename to examples/base-cra-tailwind-ts/src/Button.tsx
diff --git a/examples/mui-base-with-tailwind-css/src/Player.tsx b/examples/base-cra-tailwind-ts/src/Player.tsx
similarity index 100%
rename from examples/mui-base-with-tailwind-css/src/Player.tsx
rename to examples/base-cra-tailwind-ts/src/Player.tsx
diff --git a/examples/mui-base-with-tailwind-css/src/Slider.tsx b/examples/base-cra-tailwind-ts/src/Slider.tsx
similarity index 100%
rename from examples/mui-base-with-tailwind-css/src/Slider.tsx
rename to examples/base-cra-tailwind-ts/src/Slider.tsx
diff --git a/examples/mui-base-with-tailwind-css/src/index.css b/examples/base-cra-tailwind-ts/src/index.css
similarity index 100%
rename from examples/mui-base-with-tailwind-css/src/index.css
rename to examples/base-cra-tailwind-ts/src/index.css
diff --git a/examples/mui-base-with-tailwind-css/src/index.tsx b/examples/base-cra-tailwind-ts/src/index.tsx
similarity index 100%
rename from examples/mui-base-with-tailwind-css/src/index.tsx
rename to examples/base-cra-tailwind-ts/src/index.tsx
diff --git a/examples/mui-base-with-tailwind-css/src/logo.svg b/examples/base-cra-tailwind-ts/src/logo.svg
similarity index 100%
rename from examples/mui-base-with-tailwind-css/src/logo.svg
rename to examples/base-cra-tailwind-ts/src/logo.svg
diff --git a/examples/base-cra-typescript/src/react-app-env.d.ts b/examples/base-cra-tailwind-ts/src/react-app-env.d.ts
similarity index 100%
rename from examples/base-cra-typescript/src/react-app-env.d.ts
rename to examples/base-cra-tailwind-ts/src/react-app-env.d.ts
diff --git a/examples/mui-base-with-tailwind-css/src/setupTests.ts b/examples/base-cra-tailwind-ts/src/setupTests.ts
similarity index 100%
rename from examples/mui-base-with-tailwind-css/src/setupTests.ts
rename to examples/base-cra-tailwind-ts/src/setupTests.ts
diff --git a/examples/mui-base-with-tailwind-css/tailwind.config.js b/examples/base-cra-tailwind-ts/tailwind.config.js
similarity index 100%
rename from examples/mui-base-with-tailwind-css/tailwind.config.js
rename to examples/base-cra-tailwind-ts/tailwind.config.js
diff --git a/examples/mui-base-with-tailwind-css/tsconfig.json b/examples/base-cra-tailwind-ts/tsconfig.json
similarity index 100%
rename from examples/mui-base-with-tailwind-css/tsconfig.json
rename to examples/base-cra-tailwind-ts/tsconfig.json
diff --git a/examples/base-cra-typescript/.gitignore b/examples/base-cra-ts/.gitignore
similarity index 100%
rename from examples/base-cra-typescript/.gitignore
rename to examples/base-cra-ts/.gitignore
diff --git a/examples/base-cra-typescript/README.md b/examples/base-cra-ts/README.md
similarity index 78%
rename from examples/base-cra-typescript/README.md
rename to examples/base-cra-ts/README.md
index 5b511a7b861a1f..2b7dd88ec4db4c 100644
--- a/examples/base-cra-typescript/README.md
+++ b/examples/base-cra-ts/README.md
@@ -1,4 +1,4 @@
-# Create React App example with TypeScript
+# MUI Base - Create React App example with TypeScript
 
 [MUI Base](https://mui.com/base/getting-started/overview/) is a library of unstyled React UI components which includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components.
 
@@ -9,8 +9,8 @@ Download the example [or clone the repo](https://github.com/mui/material-ui):
 <!-- #default-branch-switch -->
 
 ```sh
-curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/base-cra-typescript
-cd base-cra-typescript
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/base-cra-ts
+cd base-cra-ts
 ```
 
 Install it and run:
@@ -24,6 +24,6 @@ or:
 
 <!-- #default-branch-switch -->
 
-[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/base-cra-typescript)
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/base-cra-ts)
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/base-cra-typescript)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/base-cra-ts)
diff --git a/examples/base-cra-typescript/package.json b/examples/base-cra-ts/package.json
similarity index 95%
rename from examples/base-cra-typescript/package.json
rename to examples/base-cra-ts/package.json
index 2f1fb406aaa257..029ce8054868bb 100644
--- a/examples/base-cra-typescript/package.json
+++ b/examples/base-cra-ts/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "base-cra-typescript",
+  "name": "base-cra-ts",
   "version": "5.0.0",
   "private": true,
   "dependencies": {
diff --git a/examples/create-react-app-with-typescript/public/favicon.ico b/examples/base-cra-ts/public/favicon.ico
similarity index 100%
rename from examples/create-react-app-with-typescript/public/favicon.ico
rename to examples/base-cra-ts/public/favicon.ico
diff --git a/examples/base-cra-typescript/public/index.html b/examples/base-cra-ts/public/index.html
similarity index 100%
rename from examples/base-cra-typescript/public/index.html
rename to examples/base-cra-ts/public/index.html
diff --git a/examples/base-cra-typescript/public/manifest.json b/examples/base-cra-ts/public/manifest.json
similarity index 100%
rename from examples/base-cra-typescript/public/manifest.json
rename to examples/base-cra-ts/public/manifest.json
diff --git a/examples/base-cra-typescript/src/App.tsx b/examples/base-cra-ts/src/App.tsx
similarity index 100%
rename from examples/base-cra-typescript/src/App.tsx
rename to examples/base-cra-ts/src/App.tsx
diff --git a/examples/base-cra-typescript/src/index.tsx b/examples/base-cra-ts/src/index.tsx
similarity index 100%
rename from examples/base-cra-typescript/src/index.tsx
rename to examples/base-cra-ts/src/index.tsx
diff --git a/examples/create-react-app-with-styled-components-typescript/src/react-app-env.d.ts b/examples/base-cra-ts/src/react-app-env.d.ts
similarity index 100%
rename from examples/create-react-app-with-styled-components-typescript/src/react-app-env.d.ts
rename to examples/base-cra-ts/src/react-app-env.d.ts
diff --git a/examples/base-cra-typescript/tsconfig.json b/examples/base-cra-ts/tsconfig.json
similarity index 100%
rename from examples/base-cra-typescript/tsconfig.json
rename to examples/base-cra-ts/tsconfig.json
diff --git a/examples/create-react-app-with-typescript/.gitignore b/examples/joy-cra-ts/.gitignore
similarity index 100%
rename from examples/create-react-app-with-typescript/.gitignore
rename to examples/joy-cra-ts/.gitignore
diff --git a/examples/joy-cra-typescript/README.md b/examples/joy-cra-ts/README.md
similarity index 65%
rename from examples/joy-cra-typescript/README.md
rename to examples/joy-cra-ts/README.md
index 74ff6fd4c5ed4e..1174ee14f4d596 100644
--- a/examples/joy-cra-typescript/README.md
+++ b/examples/joy-cra-ts/README.md
@@ -1,6 +1,6 @@
-# Create React App example with TypeScript
+# Joy UI - Create React App example in TypeScript
 
-## `@mui/joy` is still in early development, DO NOT use it in production
+`@mui/joy` is still in early development and is not recommended for use in production.
 
 ## How to use
 
@@ -9,8 +9,8 @@ Download the example [or clone the repo](https://github.com/mui/material-ui):
 <!-- #default-branch-switch -->
 
 ```sh
-curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/joy-cra-typescript
-cd joy-cra-typescript
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/joy-cra-ts
+cd joy-cra-ts
 ```
 
 Install it and run:
@@ -24,6 +24,6 @@ or:
 
 <!-- #default-branch-switch -->
 
-[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/joy-cra-typescript)
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/joy-cra-ts)
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/joy-cra-typescript)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/joy-cra-ts)
diff --git a/examples/joy-cra-typescript/package.json b/examples/joy-cra-ts/package.json
similarity index 95%
rename from examples/joy-cra-typescript/package.json
rename to examples/joy-cra-ts/package.json
index b9a833d5944190..32c4c4fa1aa380 100644
--- a/examples/joy-cra-typescript/package.json
+++ b/examples/joy-cra-ts/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "joy-cra-typescript",
+  "name": "joy-cra-ts",
   "version": "5.0.0",
   "private": true,
   "dependencies": {
diff --git a/examples/create-react-app/public/favicon.ico b/examples/joy-cra-ts/public/favicon.ico
similarity index 100%
rename from examples/create-react-app/public/favicon.ico
rename to examples/joy-cra-ts/public/favicon.ico
diff --git a/examples/create-react-app-with-typescript/public/index.html b/examples/joy-cra-ts/public/index.html
similarity index 100%
rename from examples/create-react-app-with-typescript/public/index.html
rename to examples/joy-cra-ts/public/index.html
diff --git a/examples/create-react-app-with-typescript/public/manifest.json b/examples/joy-cra-ts/public/manifest.json
similarity index 100%
rename from examples/create-react-app-with-typescript/public/manifest.json
rename to examples/joy-cra-ts/public/manifest.json
diff --git a/examples/joy-cra-typescript/src/App.tsx b/examples/joy-cra-ts/src/App.tsx
similarity index 100%
rename from examples/joy-cra-typescript/src/App.tsx
rename to examples/joy-cra-ts/src/App.tsx
diff --git a/examples/joy-cra-typescript/src/index.tsx b/examples/joy-cra-ts/src/index.tsx
similarity index 100%
rename from examples/joy-cra-typescript/src/index.tsx
rename to examples/joy-cra-ts/src/index.tsx
diff --git a/examples/create-react-app-with-typescript/src/react-app-env.d.ts b/examples/joy-cra-ts/src/react-app-env.d.ts
similarity index 100%
rename from examples/create-react-app-with-typescript/src/react-app-env.d.ts
rename to examples/joy-cra-ts/src/react-app-env.d.ts
diff --git a/examples/create-react-app-with-typescript/tsconfig.json b/examples/joy-cra-ts/tsconfig.json
similarity index 100%
rename from examples/create-react-app-with-typescript/tsconfig.json
rename to examples/joy-cra-ts/tsconfig.json
diff --git a/examples/create-react-app-with-styled-components/.gitignore b/examples/material-cra-styled-components-ts/.gitignore
similarity index 100%
rename from examples/create-react-app-with-styled-components/.gitignore
rename to examples/material-cra-styled-components-ts/.gitignore
diff --git a/examples/create-react-app-with-styled-components-typescript/README.md b/examples/material-cra-styled-components-ts/README.md
similarity index 66%
rename from examples/create-react-app-with-styled-components-typescript/README.md
rename to examples/material-cra-styled-components-ts/README.md
index a4b48a59e76337..c7b8f72d9533c3 100644
--- a/examples/create-react-app-with-styled-components-typescript/README.md
+++ b/examples/material-cra-styled-components-ts/README.md
@@ -1,6 +1,6 @@
-# Create React App example with styled-components & TypeScript
+# Material UI - Create React App example with styled-components in TypeScript
 
-The main difference between this and the non-typescript example is that you need to add the following path config to your tsconfig:
+The main difference between this and the non-TypeScript example is that you need to add the following path config to your `tsconfig.json`:
 
 ```json
 "paths": {
@@ -23,8 +23,8 @@ Download the example [or clone the repo](https://github.com/mui/material-ui):
 <!-- #default-branch-switch -->
 
 ```sh
-curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/create-react-app-with-styled-components-typescript
-cd create-react-app-with-styled-components-typescript
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-cra-styled-components-ts
+cd material-cra-styled-components-ts
 ```
 
 Install it and run:
@@ -38,7 +38,7 @@ npm start
 
 <!-- #default-branch-switch -->
 
-Note that CodeSandbox is not supporting react-app-rewired, yet you can [still see the code](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/create-react-app-with-styled-components-typescript).
+Note that CodeSandbox is not supporting react-app-rewired, yet you can [still see the code](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-cra-styled-components-ts).
 
 The following link leverages this demo: https://mui.com/guides/interoperability/#change-the-default-styled-engine with Parcel's alias feature within the `package.json`
 
@@ -46,7 +46,7 @@ The following link leverages this demo: https://mui.com/guides/interoperability/
 
 ## The idea behind the example
 
-This example demonstrates how you can setup [Create React App](https://github.com/facebookincubator/create-react-app) with [styled-components](https://styled-components.com/) as a style engine for your application using TypeScript.
+This example demonstrates how to set up Material UI with [Create React App](https://github.com/facebookincubator/create-react-app) with [styled-components](https://styled-components.com/) as a style engine for your application using TypeScript.
 
 ## What's next?
 
diff --git a/examples/create-react-app-with-styled-components-typescript/craco.config.js b/examples/material-cra-styled-components-ts/craco.config.js
similarity index 100%
rename from examples/create-react-app-with-styled-components-typescript/craco.config.js
rename to examples/material-cra-styled-components-ts/craco.config.js
diff --git a/examples/create-react-app-with-styled-components-typescript/package.json b/examples/material-cra-styled-components-ts/package.json
similarity index 94%
rename from examples/create-react-app-with-styled-components-typescript/package.json
rename to examples/material-cra-styled-components-ts/package.json
index c769e6ff9a63f9..6023c79aca25dd 100644
--- a/examples/create-react-app-with-styled-components-typescript/package.json
+++ b/examples/material-cra-styled-components-ts/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "create-react-app-with-styled-components-typescript",
+  "name": "material-cra-styled-components-ts",
   "version": "5.0.0",
   "private": true,
   "dependencies": {
diff --git a/examples/create-react-app-with-styled-components-typescript/public/favicon.ico b/examples/material-cra-styled-components-ts/public/favicon.ico
similarity index 100%
rename from examples/create-react-app-with-styled-components-typescript/public/favicon.ico
rename to examples/material-cra-styled-components-ts/public/favicon.ico
diff --git a/examples/create-react-app-with-styled-components-typescript/public/index.html b/examples/material-cra-styled-components-ts/public/index.html
similarity index 100%
rename from examples/create-react-app-with-styled-components-typescript/public/index.html
rename to examples/material-cra-styled-components-ts/public/index.html
diff --git a/examples/create-react-app-with-styled-components/public/manifest.json b/examples/material-cra-styled-components-ts/public/manifest.json
similarity index 100%
rename from examples/create-react-app-with-styled-components/public/manifest.json
rename to examples/material-cra-styled-components-ts/public/manifest.json
diff --git a/examples/create-react-app-with-styled-components/public/robots.txt b/examples/material-cra-styled-components-ts/public/robots.txt
similarity index 100%
rename from examples/create-react-app-with-styled-components/public/robots.txt
rename to examples/material-cra-styled-components-ts/public/robots.txt
diff --git a/examples/create-react-app-with-styled-components-typescript/src/App.tsx b/examples/material-cra-styled-components-ts/src/App.tsx
similarity index 90%
rename from examples/create-react-app-with-styled-components-typescript/src/App.tsx
rename to examples/material-cra-styled-components-ts/src/App.tsx
index a0219037e40ed1..3747ecde982cde 100644
--- a/examples/create-react-app-with-styled-components-typescript/src/App.tsx
+++ b/examples/material-cra-styled-components-ts/src/App.tsx
@@ -22,7 +22,7 @@ export default function App() {
     <Container maxWidth="sm">
       <Box sx={{ my: 4 }}>
         <Typography variant="h4" component="h1" gutterBottom>
-          Create React App example with styled-components and TypeScript
+          Material UI Create React App example with styled-components in TypeScript
         </Typography>
         <ProTip />
         <Copyright />
diff --git a/examples/create-react-app-with-typescript/src/ProTip.tsx b/examples/material-cra-styled-components-ts/src/ProTip.tsx
similarity index 96%
rename from examples/create-react-app-with-typescript/src/ProTip.tsx
rename to examples/material-cra-styled-components-ts/src/ProTip.tsx
index 5a8b457f024fbd..0894a06eb94bde 100644
--- a/examples/create-react-app-with-typescript/src/ProTip.tsx
+++ b/examples/material-cra-styled-components-ts/src/ProTip.tsx
@@ -15,7 +15,7 @@ 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> on
+      Pro tip: See more <Link href="https://mui.com/getting-started/templates/">templates</Link> in
       the MUI documentation.
     </Typography>
   );
diff --git a/examples/create-react-app-with-styled-components-typescript/src/index.tsx b/examples/material-cra-styled-components-ts/src/index.tsx
similarity index 100%
rename from examples/create-react-app-with-styled-components-typescript/src/index.tsx
rename to examples/material-cra-styled-components-ts/src/index.tsx
diff --git a/examples/joy-cra-typescript/src/react-app-env.d.ts b/examples/material-cra-styled-components-ts/src/react-app-env.d.ts
similarity index 100%
rename from examples/joy-cra-typescript/src/react-app-env.d.ts
rename to examples/material-cra-styled-components-ts/src/react-app-env.d.ts
diff --git a/examples/create-react-app-with-styled-components-typescript/src/setupTests.ts b/examples/material-cra-styled-components-ts/src/setupTests.ts
similarity index 100%
rename from examples/create-react-app-with-styled-components-typescript/src/setupTests.ts
rename to examples/material-cra-styled-components-ts/src/setupTests.ts
diff --git a/examples/create-react-app-with-styled-components-typescript/tsconfig.json b/examples/material-cra-styled-components-ts/tsconfig.json
similarity index 100%
rename from examples/create-react-app-with-styled-components-typescript/tsconfig.json
rename to examples/material-cra-styled-components-ts/tsconfig.json
diff --git a/examples/create-react-app-with-styled-components-typescript/tsconfig.paths.json b/examples/material-cra-styled-components-ts/tsconfig.paths.json
similarity index 100%
rename from examples/create-react-app-with-styled-components-typescript/tsconfig.paths.json
rename to examples/material-cra-styled-components-ts/tsconfig.paths.json
diff --git a/examples/mui-base-with-tailwind-css/.gitignore b/examples/material-cra-styled-components/.gitignore
similarity index 100%
rename from examples/mui-base-with-tailwind-css/.gitignore
rename to examples/material-cra-styled-components/.gitignore
diff --git a/examples/create-react-app-with-styled-components/README.md b/examples/material-cra-styled-components/README.md
similarity index 82%
rename from examples/create-react-app-with-styled-components/README.md
rename to examples/material-cra-styled-components/README.md
index 2922d22048c8ad..405d2ba066dfb3 100644
--- a/examples/create-react-app-with-styled-components/README.md
+++ b/examples/material-cra-styled-components/README.md
@@ -1,4 +1,4 @@
-# Create React App example with styled-components
+# Material UI - Create React App example with styled-components
 
 ## How to use
 
@@ -7,8 +7,8 @@ Download the example [or clone the repo](https://github.com/mui/material-ui):
 <!-- #default-branch-switch -->
 
 ```sh
-curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/create-react-app-with-styled-components
-cd create-react-app-with-styled-components
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-cra-styled-components
+cd material-cra-styled-components
 ```
 
 Install it and run:
@@ -22,7 +22,7 @@ npm start
 
 <!-- #default-branch-switch -->
 
-Note that CodeSandbox is not supporting react-app-rewired, yet you can [still see the code](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/create-react-app-with-styled-components).
+Note that CodeSandbox is not supporting react-app-rewired, yet you can [still see the code](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-cra-styled-components).
 
 The following link leverages this demo: https://mui.com/guides/interoperability/#change-the-default-styled-engine with Parcel's alias feature within the `package.json`
 
diff --git a/examples/create-react-app-with-styled-components/craco.config.js b/examples/material-cra-styled-components/craco.config.js
similarity index 100%
rename from examples/create-react-app-with-styled-components/craco.config.js
rename to examples/material-cra-styled-components/craco.config.js
diff --git a/examples/create-react-app-with-styled-components/package.json b/examples/material-cra-styled-components/package.json
similarity index 94%
rename from examples/create-react-app-with-styled-components/package.json
rename to examples/material-cra-styled-components/package.json
index 1c31953f3b6658..da93c595cafece 100644
--- a/examples/create-react-app-with-styled-components/package.json
+++ b/examples/material-cra-styled-components/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "create-react-app-with-styled-components",
+  "name": "material-cra-styled-components",
   "version": "5.0.0",
   "private": true,
   "dependencies": {
diff --git a/examples/create-react-app-with-styled-components/public/favicon.ico b/examples/material-cra-styled-components/public/favicon.ico
similarity index 100%
rename from examples/create-react-app-with-styled-components/public/favicon.ico
rename to examples/material-cra-styled-components/public/favicon.ico
diff --git a/examples/create-react-app-with-styled-components/public/index.html b/examples/material-cra-styled-components/public/index.html
similarity index 100%
rename from examples/create-react-app-with-styled-components/public/index.html
rename to examples/material-cra-styled-components/public/index.html
diff --git a/examples/mui-base-with-tailwind-css/public/manifest.json b/examples/material-cra-styled-components/public/manifest.json
similarity index 100%
rename from examples/mui-base-with-tailwind-css/public/manifest.json
rename to examples/material-cra-styled-components/public/manifest.json
diff --git a/examples/mui-base-with-tailwind-css/public/robots.txt b/examples/material-cra-styled-components/public/robots.txt
similarity index 100%
rename from examples/mui-base-with-tailwind-css/public/robots.txt
rename to examples/material-cra-styled-components/public/robots.txt
diff --git a/examples/create-react-app-with-styled-components/src/App.js b/examples/material-cra-styled-components/src/App.js
similarity index 91%
rename from examples/create-react-app-with-styled-components/src/App.js
rename to examples/material-cra-styled-components/src/App.js
index c35dd204ffb1ff..945ab576549aa7 100644
--- a/examples/create-react-app-with-styled-components/src/App.js
+++ b/examples/material-cra-styled-components/src/App.js
@@ -22,7 +22,7 @@ export default function App() {
     <Container maxWidth="sm">
       <Box sx={{ my: 4 }}>
         <Typography variant="h4" component="h1" gutterBottom>
-          Create React App example with styled-components
+          Material UI Create React App example with styled-components
         </Typography>
         <ProTip />
         <Copyright />
diff --git a/examples/gatsby/src/components/ProTip.js b/examples/material-cra-styled-components/src/ProTip.js
similarity index 95%
rename from examples/gatsby/src/components/ProTip.js
rename to examples/material-cra-styled-components/src/ProTip.js
index 6d81f33b0a0dad..09d7e4ae4ae35b 100644
--- a/examples/gatsby/src/components/ProTip.js
+++ b/examples/material-cra-styled-components/src/ProTip.js
@@ -15,7 +15,7 @@ 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> on
+      Pro tip: See more <Link href="https://mui.com/getting-started/templates/">templates</Link> in
       the MUI documentation.
     </Typography>
   );
diff --git a/examples/create-react-app-with-styled-components/src/index.js b/examples/material-cra-styled-components/src/index.js
similarity index 100%
rename from examples/create-react-app-with-styled-components/src/index.js
rename to examples/material-cra-styled-components/src/index.js
diff --git a/examples/create-react-app-with-styled-components/src/serviceWorker.js b/examples/material-cra-styled-components/src/serviceWorker.js
similarity index 100%
rename from examples/create-react-app-with-styled-components/src/serviceWorker.js
rename to examples/material-cra-styled-components/src/serviceWorker.js
diff --git a/examples/create-react-app-with-styled-components/src/setupTests.js b/examples/material-cra-styled-components/src/setupTests.js
similarity index 100%
rename from examples/create-react-app-with-styled-components/src/setupTests.js
rename to examples/material-cra-styled-components/src/setupTests.js
diff --git a/examples/tailwind-css/.gitignore b/examples/material-cra-tailwind-ts/.gitignore
similarity index 100%
rename from examples/tailwind-css/.gitignore
rename to examples/material-cra-tailwind-ts/.gitignore
diff --git a/examples/tailwind-css/README.md b/examples/material-cra-tailwind-ts/README.md
similarity index 72%
rename from examples/tailwind-css/README.md
rename to examples/material-cra-tailwind-ts/README.md
index 67e0952eab3ec4..b3d247dff29e26 100644
--- a/examples/tailwind-css/README.md
+++ b/examples/material-cra-tailwind-ts/README.md
@@ -1,4 +1,4 @@
-# Tailwind CSS example
+# Material UI - CRA example with Tailwind CSS in TypeScript
 
 ## How to use
 
@@ -7,8 +7,8 @@ Download the example [or clone the repo](https://github.com/mui/material-ui):
 <!-- #default-branch-switch -->
 
 ```sh
-curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/tailwind-css
-cd tailwind-css
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-cra-tailwind-ts
+cd material-cra-tailwind-ts
 ```
 
 Install it and run:
@@ -22,18 +22,18 @@ or:
 
 <!-- #default-branch-switch -->
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/tailwind-css)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-cra-tailwind-ts)
 
 <!-- #default-branch-switch -->
 
-[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/tailwind-css)
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-cra-tailwind-ts)
 
 ## The idea behind the example
 
 <!-- #default-branch-switch -->
 
-This example demonstrates how you can use [Tailwind CSS](https://tailwindcss.com/) and [Create React App](https://github.com/facebookincubator/create-react-app) together with MUI.
-It includes `@mui/material` and its peer dependencies, including `emotion`, the default style engine in MUI v5.
+This example demonstrates how you can use [Tailwind CSS](https://tailwindcss.com/) and [Create React App](https://github.com/facebookincubator/create-react-app) together with Material UI.
+It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5.
 
 ## What's next?
 
diff --git a/examples/tailwind-css/package.json b/examples/material-cra-tailwind-ts/package.json
similarity index 96%
rename from examples/tailwind-css/package.json
rename to examples/material-cra-tailwind-ts/package.json
index 52ac6c2fe70d2c..dd415239f16cfa 100644
--- a/examples/tailwind-css/package.json
+++ b/examples/material-cra-tailwind-ts/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "tailwind-css",
+  "name": "material-cra-tailwind-ts",
   "version": "5.0.0",
   "private": true,
   "dependencies": {
diff --git a/examples/tailwind-css/postcss.config.js b/examples/material-cra-tailwind-ts/postcss.config.js
similarity index 100%
rename from examples/tailwind-css/postcss.config.js
rename to examples/material-cra-tailwind-ts/postcss.config.js
diff --git a/examples/joy-cra-typescript/public/favicon.ico b/examples/material-cra-tailwind-ts/public/favicon.ico
similarity index 100%
rename from examples/joy-cra-typescript/public/favicon.ico
rename to examples/material-cra-tailwind-ts/public/favicon.ico
diff --git a/examples/tailwind-css/public/index.html b/examples/material-cra-tailwind-ts/public/index.html
similarity index 100%
rename from examples/tailwind-css/public/index.html
rename to examples/material-cra-tailwind-ts/public/index.html
diff --git a/examples/tailwind-css/public/logo192.png b/examples/material-cra-tailwind-ts/public/logo192.png
similarity index 100%
rename from examples/tailwind-css/public/logo192.png
rename to examples/material-cra-tailwind-ts/public/logo192.png
diff --git a/examples/tailwind-css/public/logo512.png b/examples/material-cra-tailwind-ts/public/logo512.png
similarity index 100%
rename from examples/tailwind-css/public/logo512.png
rename to examples/material-cra-tailwind-ts/public/logo512.png
diff --git a/examples/preact/public/manifest.json b/examples/material-cra-tailwind-ts/public/manifest.json
similarity index 100%
rename from examples/preact/public/manifest.json
rename to examples/material-cra-tailwind-ts/public/manifest.json
diff --git a/examples/preact/public/robots.txt b/examples/material-cra-tailwind-ts/public/robots.txt
similarity index 100%
rename from examples/preact/public/robots.txt
rename to examples/material-cra-tailwind-ts/public/robots.txt
diff --git a/examples/tailwind-css/src/App.tsx b/examples/material-cra-tailwind-ts/src/App.tsx
similarity index 93%
rename from examples/tailwind-css/src/App.tsx
rename to examples/material-cra-tailwind-ts/src/App.tsx
index 5c23b947e37c2e..5c9a0da97f290e 100644
--- a/examples/tailwind-css/src/App.tsx
+++ b/examples/material-cra-tailwind-ts/src/App.tsx
@@ -24,7 +24,7 @@ export default function App() {
     <Container maxWidth="sm">
       <div className="my-4">
         <Typography variant="h4" component="h1" gutterBottom>
-          Create React App + Tailwind CSS example
+          Material UI Create React App example with Tailwind CSS in TypeScript
         </Typography>
         <Slider
           className="my-4"
diff --git a/examples/tailwind-css/src/PopoverMenu.tsx b/examples/material-cra-tailwind-ts/src/PopoverMenu.tsx
similarity index 100%
rename from examples/tailwind-css/src/PopoverMenu.tsx
rename to examples/material-cra-tailwind-ts/src/PopoverMenu.tsx
diff --git a/examples/nextjs-with-typescript/src/ProTip.tsx b/examples/material-cra-tailwind-ts/src/ProTip.tsx
similarity index 96%
rename from examples/nextjs-with-typescript/src/ProTip.tsx
rename to examples/material-cra-tailwind-ts/src/ProTip.tsx
index 5a8b457f024fbd..0894a06eb94bde 100644
--- a/examples/nextjs-with-typescript/src/ProTip.tsx
+++ b/examples/material-cra-tailwind-ts/src/ProTip.tsx
@@ -15,7 +15,7 @@ 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> on
+      Pro tip: See more <Link href="https://mui.com/getting-started/templates/">templates</Link> in
       the MUI documentation.
     </Typography>
   );
diff --git a/examples/tailwind-css/src/index.css b/examples/material-cra-tailwind-ts/src/index.css
similarity index 100%
rename from examples/tailwind-css/src/index.css
rename to examples/material-cra-tailwind-ts/src/index.css
diff --git a/examples/tailwind-css/src/index.tsx b/examples/material-cra-tailwind-ts/src/index.tsx
similarity index 100%
rename from examples/tailwind-css/src/index.tsx
rename to examples/material-cra-tailwind-ts/src/index.tsx
diff --git a/examples/tailwind-css/src/logo.svg b/examples/material-cra-tailwind-ts/src/logo.svg
similarity index 100%
rename from examples/tailwind-css/src/logo.svg
rename to examples/material-cra-tailwind-ts/src/logo.svg
diff --git a/examples/mui-base-with-tailwind-css/src/react-app-env.d.ts b/examples/material-cra-tailwind-ts/src/react-app-env.d.ts
similarity index 100%
rename from examples/mui-base-with-tailwind-css/src/react-app-env.d.ts
rename to examples/material-cra-tailwind-ts/src/react-app-env.d.ts
diff --git a/examples/tailwind-css/src/reportWebVitals.ts b/examples/material-cra-tailwind-ts/src/reportWebVitals.ts
similarity index 100%
rename from examples/tailwind-css/src/reportWebVitals.ts
rename to examples/material-cra-tailwind-ts/src/reportWebVitals.ts
diff --git a/examples/tailwind-css/src/setupTests.ts b/examples/material-cra-tailwind-ts/src/setupTests.ts
similarity index 100%
rename from examples/tailwind-css/src/setupTests.ts
rename to examples/material-cra-tailwind-ts/src/setupTests.ts
diff --git a/examples/tailwind-css/tailwind.config.js b/examples/material-cra-tailwind-ts/tailwind.config.js
similarity index 62%
rename from examples/tailwind-css/tailwind.config.js
rename to examples/material-cra-tailwind-ts/tailwind.config.js
index 4638b2a57bc5c2..cd7eea145090e1 100644
--- a/examples/tailwind-css/tailwind.config.js
+++ b/examples/material-cra-tailwind-ts/tailwind.config.js
@@ -5,7 +5,7 @@ module.exports = {
     extend: {},
   },
   corePlugins: {
-    // Remove Tailwind CSS's preflight style so it can use the MUI's preflight instead (CssBaseline).
+    // Remove the Tailwind CSS preflight styles so it can use Material UI's preflight instead (CssBaseline).
     preflight: false,
   },
   plugins: [],
diff --git a/examples/tailwind-css/tsconfig.json b/examples/material-cra-tailwind-ts/tsconfig.json
similarity index 100%
rename from examples/tailwind-css/tsconfig.json
rename to examples/material-cra-tailwind-ts/tsconfig.json
diff --git a/examples/create-react-app/.gitignore b/examples/material-cra-ts/.gitignore
similarity index 100%
rename from examples/create-react-app/.gitignore
rename to examples/material-cra-ts/.gitignore
diff --git a/examples/create-react-app-with-typescript/README.md b/examples/material-cra-ts/README.md
similarity index 67%
rename from examples/create-react-app-with-typescript/README.md
rename to examples/material-cra-ts/README.md
index 0efedf4d57ec20..e6eefaa8cb1460 100644
--- a/examples/create-react-app-with-typescript/README.md
+++ b/examples/material-cra-ts/README.md
@@ -1,4 +1,4 @@
-# Create React App example with TypeScript
+# Material UI - Create React App example in TypeScript
 
 ## How to use
 
@@ -7,8 +7,8 @@ Download the example [or clone the repo](https://github.com/mui/material-ui):
 <!-- #default-branch-switch -->
 
 ```sh
-curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/create-react-app-with-typescript
-cd create-react-app-with-typescript
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-cra-ts
+cd material-cra-ts
 ```
 
 Install it and run:
@@ -22,16 +22,16 @@ or:
 
 <!-- #default-branch-switch -->
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/create-react-app-with-typescript)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-cra-ts)
 
 <!-- #default-branch-switch -->
 
-[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/create-react-app-with-typescript)
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-cra-ts)
 
 ## The idea behind the example
 
-This example demonstrates how you can use [Create React App](https://github.com/facebookincubator/create-react-app) with [TypeScript](https://github.com/Microsoft/TypeScript).
-It includes `@mui/material` and its peer dependencies, including `emotion`, the default style engine in MUI v5.
+This example demonstrates how you can use Material UI with [Create React App](https://github.com/facebookincubator/create-react-app) in [TypeScript](https://github.com/Microsoft/TypeScript).
+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).
 
 ## What's next?
diff --git a/examples/create-react-app-with-typescript/package.json b/examples/material-cra-ts/package.json
similarity index 94%
rename from examples/create-react-app-with-typescript/package.json
rename to examples/material-cra-ts/package.json
index 0c273d70af0e81..71d6809a0d7035 100644
--- a/examples/create-react-app-with-typescript/package.json
+++ b/examples/material-cra-ts/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "create-react-app-with-typescript",
+  "name": "material-cra-ts",
   "version": "5.0.0",
   "private": true,
   "dependencies": {
diff --git a/examples/mui-base-with-tailwind-css/public/favicon.ico b/examples/material-cra-ts/public/favicon.ico
similarity index 100%
rename from examples/mui-base-with-tailwind-css/public/favicon.ico
rename to examples/material-cra-ts/public/favicon.ico
diff --git a/examples/create-react-app/public/index.html b/examples/material-cra-ts/public/index.html
similarity index 100%
rename from examples/create-react-app/public/index.html
rename to examples/material-cra-ts/public/index.html
diff --git a/examples/create-react-app/public/manifest.json b/examples/material-cra-ts/public/manifest.json
similarity index 100%
rename from examples/create-react-app/public/manifest.json
rename to examples/material-cra-ts/public/manifest.json
diff --git a/examples/create-react-app-with-typescript/src/App.tsx b/examples/material-cra-ts/src/App.tsx
similarity index 92%
rename from examples/create-react-app-with-typescript/src/App.tsx
rename to examples/material-cra-ts/src/App.tsx
index 23e63d706fd76f..943ee8503a08ff 100644
--- a/examples/create-react-app-with-typescript/src/App.tsx
+++ b/examples/material-cra-ts/src/App.tsx
@@ -22,7 +22,7 @@ export default function App() {
     <Container maxWidth="sm">
       <Box sx={{ my: 4 }}>
         <Typography variant="h4" component="h1" gutterBottom>
-          Create React App example with TypeScript
+          Material UI Create React App example in TypeScript
         </Typography>
         <ProTip />
         <Copyright />
diff --git a/examples/remix-with-typescript/app/src/ProTip.tsx b/examples/material-cra-ts/src/ProTip.tsx
similarity index 96%
rename from examples/remix-with-typescript/app/src/ProTip.tsx
rename to examples/material-cra-ts/src/ProTip.tsx
index 5a8b457f024fbd..0894a06eb94bde 100644
--- a/examples/remix-with-typescript/app/src/ProTip.tsx
+++ b/examples/material-cra-ts/src/ProTip.tsx
@@ -15,7 +15,7 @@ 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> on
+      Pro tip: See more <Link href="https://mui.com/getting-started/templates/">templates</Link> in
       the MUI documentation.
     </Typography>
   );
diff --git a/examples/create-react-app-with-typescript/src/index.tsx b/examples/material-cra-ts/src/index.tsx
similarity index 100%
rename from examples/create-react-app-with-typescript/src/index.tsx
rename to examples/material-cra-ts/src/index.tsx
diff --git a/examples/tailwind-css/src/react-app-env.d.ts b/examples/material-cra-ts/src/react-app-env.d.ts
similarity index 100%
rename from examples/tailwind-css/src/react-app-env.d.ts
rename to examples/material-cra-ts/src/react-app-env.d.ts
diff --git a/examples/create-react-app-with-typescript/src/theme.ts b/examples/material-cra-ts/src/theme.ts
similarity index 100%
rename from examples/create-react-app-with-typescript/src/theme.ts
rename to examples/material-cra-ts/src/theme.ts
diff --git a/examples/joy-cra-typescript/tsconfig.json b/examples/material-cra-ts/tsconfig.json
similarity index 100%
rename from examples/joy-cra-typescript/tsconfig.json
rename to examples/material-cra-ts/tsconfig.json
diff --git a/examples/joy-cra-typescript/.gitignore b/examples/material-cra/.gitignore
similarity index 100%
rename from examples/joy-cra-typescript/.gitignore
rename to examples/material-cra/.gitignore
diff --git a/examples/create-react-app/README.md b/examples/material-cra/README.md
similarity index 76%
rename from examples/create-react-app/README.md
rename to examples/material-cra/README.md
index c7c2c1384915e8..3ffeae3fd97daa 100644
--- a/examples/create-react-app/README.md
+++ b/examples/material-cra/README.md
@@ -1,4 +1,4 @@
-# Create React App example
+# Material UI - Create React App example
 
 ## How to use
 
@@ -7,8 +7,8 @@ Download the example [or clone the repo](https://github.com/mui/material-ui):
 <!-- #default-branch-switch -->
 
 ```sh
-curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/create-react-app
-cd create-react-app
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-cra
+cd material-cra
 ```
 
 Install it and run:
@@ -22,18 +22,18 @@ or:
 
 <!-- #default-branch-switch -->
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/create-react-app)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-cra)
 
 <!-- #default-branch-switch -->
 
-[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/create-react-app)
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-cra)
 
 ## The idea behind the example
 
 <!-- #default-branch-switch -->
 
-This example demonstrates how you can use [Create React App](https://github.com/facebookincubator/create-react-app).
-It includes `@mui/material` and its peer dependencies, including `emotion`, the default style engine in MUI v5.
+This example demonstrates how you can use [Create React App](https://github.com/facebookincubator/create-react-app) with Material UI.
+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).
 
 ## What's next?
diff --git a/examples/create-react-app/package.json b/examples/material-cra/package.json
similarity index 95%
rename from examples/create-react-app/package.json
rename to examples/material-cra/package.json
index e24b716559e482..6c9e3497a3da79 100644
--- a/examples/create-react-app/package.json
+++ b/examples/material-cra/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "create-react-app",
+  "name": "material-cra",
   "version": "5.0.0",
   "private": true,
   "scripts": {
diff --git a/examples/tailwind-css/public/favicon.ico b/examples/material-cra/public/favicon.ico
similarity index 100%
rename from examples/tailwind-css/public/favicon.ico
rename to examples/material-cra/public/favicon.ico
diff --git a/examples/joy-cra-typescript/public/index.html b/examples/material-cra/public/index.html
similarity index 100%
rename from examples/joy-cra-typescript/public/index.html
rename to examples/material-cra/public/index.html
diff --git a/examples/joy-cra-typescript/public/manifest.json b/examples/material-cra/public/manifest.json
similarity index 100%
rename from examples/joy-cra-typescript/public/manifest.json
rename to examples/material-cra/public/manifest.json
diff --git a/examples/create-react-app/src/App.js b/examples/material-cra/src/App.js
similarity index 94%
rename from examples/create-react-app/src/App.js
rename to examples/material-cra/src/App.js
index f58653fc24ea3b..9cc31cf62c4da2 100644
--- a/examples/create-react-app/src/App.js
+++ b/examples/material-cra/src/App.js
@@ -23,7 +23,7 @@ export default function App() {
     <Container maxWidth="sm">
       <Box sx={{ my: 4 }}>
         <Typography variant="h4" component="h1" gutterBottom>
-          Create React App example
+          Material UI Create React App example
         </Typography>
         <ProTip />
         <Copyright />
diff --git a/examples/create-react-app-with-styled-components/src/ProTip.js b/examples/material-cra/src/ProTip.js
similarity index 95%
rename from examples/create-react-app-with-styled-components/src/ProTip.js
rename to examples/material-cra/src/ProTip.js
index 6d81f33b0a0dad..09d7e4ae4ae35b 100644
--- a/examples/create-react-app-with-styled-components/src/ProTip.js
+++ b/examples/material-cra/src/ProTip.js
@@ -15,7 +15,7 @@ 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> on
+      Pro tip: See more <Link href="https://mui.com/getting-started/templates/">templates</Link> in
       the MUI documentation.
     </Typography>
   );
diff --git a/examples/create-react-app/src/index.js b/examples/material-cra/src/index.js
similarity index 100%
rename from examples/create-react-app/src/index.js
rename to examples/material-cra/src/index.js
diff --git a/examples/create-react-app/src/theme.js b/examples/material-cra/src/theme.js
similarity index 100%
rename from examples/create-react-app/src/theme.js
rename to examples/material-cra/src/theme.js
diff --git a/examples/ssr/.babelrc b/examples/material-express-ssr/.babelrc
similarity index 100%
rename from examples/ssr/.babelrc
rename to examples/material-express-ssr/.babelrc
diff --git a/examples/ssr/.gitignore b/examples/material-express-ssr/.gitignore
similarity index 100%
rename from examples/ssr/.gitignore
rename to examples/material-express-ssr/.gitignore
diff --git a/examples/ssr/App.js b/examples/material-express-ssr/App.js
similarity index 93%
rename from examples/ssr/App.js
rename to examples/material-express-ssr/App.js
index 28ae1d65c93952..a695eb4e4edc97 100644
--- a/examples/ssr/App.js
+++ b/examples/material-express-ssr/App.js
@@ -23,7 +23,7 @@ export default function App() {
     <Container maxWidth="sm">
       <Box sx={{ my: 4 }}>
         <Typography variant="h4" component="h1" gutterBottom>
-          Server-side rendering example
+          Material UI Express.js server-rendered example
         </Typography>
         <ProTip />
         <Copyright />
diff --git a/examples/create-react-app/src/ProTip.js b/examples/material-express-ssr/ProTip.js
similarity index 95%
rename from examples/create-react-app/src/ProTip.js
rename to examples/material-express-ssr/ProTip.js
index 6d81f33b0a0dad..09d7e4ae4ae35b 100644
--- a/examples/create-react-app/src/ProTip.js
+++ b/examples/material-express-ssr/ProTip.js
@@ -15,7 +15,7 @@ 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> on
+      Pro tip: See more <Link href="https://mui.com/getting-started/templates/">templates</Link> in
       the MUI documentation.
     </Typography>
   );
diff --git a/examples/ssr/README.md b/examples/material-express-ssr/README.md
similarity index 77%
rename from examples/ssr/README.md
rename to examples/material-express-ssr/README.md
index 7ea97edaba324b..73cde501792eda 100644
--- a/examples/ssr/README.md
+++ b/examples/material-express-ssr/README.md
@@ -1,4 +1,4 @@
-# Server-side rendering example
+# Material UI - Server-side-rendered example
 
 ## How to use
 
@@ -7,8 +7,8 @@ Download the example [or clone the repo](https://github.com/mui/material-ui):
 <!-- #default-branch-switch -->
 
 ```sh
-curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/ssr
-cd ssr
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/material-express-ssr
+cd material-express-ssr
 ```
 
 Install it and run:
@@ -22,7 +22,7 @@ npm run start
 
 This is the reference implementation of the [Server Rendering tutorial](https://mui.com/material-ui/guides/server-rendering/).
 
-The example project includes `@mui/material` and its peer dependencies, including `emotion`, the default style engine in MUI v5.
+The example project 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).
 
 ## What's next?
diff --git a/examples/ssr/client.js b/examples/material-express-ssr/client.js
similarity index 100%
rename from examples/ssr/client.js
rename to examples/material-express-ssr/client.js
diff --git a/examples/ssr/createEmotionCache.js b/examples/material-express-ssr/createEmotionCache.js
similarity index 74%
rename from examples/ssr/createEmotionCache.js
rename to examples/material-express-ssr/createEmotionCache.js
index a1f11107d2ed06..b83cd1166c8c4b 100644
--- a/examples/ssr/createEmotionCache.js
+++ b/examples/material-express-ssr/createEmotionCache.js
@@ -3,8 +3,8 @@ import createCache from '@emotion/cache';
 const isBrowser = typeof document !== 'undefined';
 
 // On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
-// This assures that MUI styles are loaded first.
-// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
+// This assures that Material UI styles are loaded first.
+// It allows developers to easily override Material UI styles with other styling solutions, like CSS modules.
 export default function createEmotionCache() {
   let insertionPoint;
 
diff --git a/examples/ssr/package.json b/examples/material-express-ssr/package.json
similarity index 96%
rename from examples/ssr/package.json
rename to examples/material-express-ssr/package.json
index 1bae81d90809d7..f5597c628756da 100644
--- a/examples/ssr/package.json
+++ b/examples/material-express-ssr/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "ssr",
+  "name": "material-express-ssr",
   "version": "5.0.0",
   "private": true,
   "browserslist": [
diff --git a/examples/ssr/server.js b/examples/material-express-ssr/server.js
similarity index 100%
rename from examples/ssr/server.js
rename to examples/material-express-ssr/server.js
diff --git a/examples/preact/src/theme.js b/examples/material-express-ssr/theme.js
similarity index 100%
rename from examples/preact/src/theme.js
rename to examples/material-express-ssr/theme.js
diff --git a/examples/ssr/webpack.config.js b/examples/material-express-ssr/webpack.config.js
similarity index 100%
rename from examples/ssr/webpack.config.js
rename to examples/material-express-ssr/webpack.config.js
diff --git a/examples/gatsby/.gitignore b/examples/material-gatsby/.gitignore
similarity index 100%
rename from examples/gatsby/.gitignore
rename to examples/material-gatsby/.gitignore
diff --git a/examples/gatsby/README.md b/examples/material-gatsby/README.md
similarity index 80%
rename from examples/gatsby/README.md
rename to examples/material-gatsby/README.md
index 8790cb1ef447a0..e0d32763319056 100644
--- a/examples/gatsby/README.md
+++ b/examples/material-gatsby/README.md
@@ -1,4 +1,4 @@
-# Gatsby example
+# Material UI - Gatsby example
 
 ## How to use
 
@@ -7,8 +7,8 @@ Download the example [or clone the repo](https://github.com/mui/material-ui):
 <!-- #default-branch-switch -->
 
 ```sh
-curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/gatsby
-cd gatsby
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/material-gatsby
+cd material-gatsby
 ```
 
 Install it and run:
@@ -21,7 +21,7 @@ npm run develop
 ## The idea behind the example
 
 The project uses [Gatsby](https://github.com/gatsbyjs/gatsby), which is a static site generator for React.
-It includes `@mui/material` and its peer dependencies, including `emotion`, the default style engine in MUI v5.
+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).
 
 ## What's next?
diff --git a/examples/gatsby/package.json b/examples/material-gatsby/package.json
similarity index 95%
rename from examples/gatsby/package.json
rename to examples/material-gatsby/package.json
index 48abc3f50f4ea4..86c01140bf8ab5 100644
--- a/examples/gatsby/package.json
+++ b/examples/material-gatsby/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "gatsby",
+  "name": "material-gatsby",
   "version": "5.0.0",
   "private": true,
   "browserslist": [
diff --git a/examples/gatsby/src/components/Copyright.js b/examples/material-gatsby/src/components/Copyright.js
similarity index 100%
rename from examples/gatsby/src/components/Copyright.js
rename to examples/material-gatsby/src/components/Copyright.js
diff --git a/examples/gatsby/src/components/Link.js b/examples/material-gatsby/src/components/Link.js
similarity index 100%
rename from examples/gatsby/src/components/Link.js
rename to examples/material-gatsby/src/components/Link.js
diff --git a/examples/nextjs/src/ProTip.js b/examples/material-gatsby/src/components/ProTip.js
similarity index 95%
rename from examples/nextjs/src/ProTip.js
rename to examples/material-gatsby/src/components/ProTip.js
index 6d81f33b0a0dad..09d7e4ae4ae35b 100644
--- a/examples/nextjs/src/ProTip.js
+++ b/examples/material-gatsby/src/components/ProTip.js
@@ -15,7 +15,7 @@ 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> on
+      Pro tip: See more <Link href="https://mui.com/getting-started/templates/">templates</Link> in
       the MUI documentation.
     </Typography>
   );
diff --git a/examples/gatsby/src/pages/about.js b/examples/material-gatsby/src/pages/about.js
similarity index 94%
rename from examples/gatsby/src/pages/about.js
rename to examples/material-gatsby/src/pages/about.js
index 19c0cae66dd273..3368f279e41327 100644
--- a/examples/gatsby/src/pages/about.js
+++ b/examples/material-gatsby/src/pages/about.js
@@ -11,7 +11,7 @@ export default function About() {
     <Container maxWidth="sm">
       <Box sx={{ my: 4 }}>
         <Typography variant="h4" component="h1" gutterBottom>
-          Gatsby example
+          Material UI Gatsby example
         </Typography>
         <Link to="/">Go to the main page</Link>
         <ProTip />
diff --git a/examples/gatsby/src/pages/index.js b/examples/material-gatsby/src/pages/index.js
similarity index 94%
rename from examples/gatsby/src/pages/index.js
rename to examples/material-gatsby/src/pages/index.js
index 10bba6bebe8f91..17ecbb53d2d085 100644
--- a/examples/gatsby/src/pages/index.js
+++ b/examples/material-gatsby/src/pages/index.js
@@ -11,7 +11,7 @@ export default function Index() {
     <Container maxWidth="sm">
       <Box sx={{ my: 4 }}>
         <Typography variant="h4" component="h1" gutterBottom>
-          Gatsby example
+          Material UI Gatsby example
         </Typography>
         <Link to="/about" color="secondary">
           Go to the about page
diff --git a/examples/gatsby/src/theme.js b/examples/material-gatsby/src/theme.js
similarity index 100%
rename from examples/gatsby/src/theme.js
rename to examples/material-gatsby/src/theme.js
diff --git a/examples/nextjs-with-typescript-v4-migration/.gitignore b/examples/material-next-ts-v4-v5-migration/.gitignore
similarity index 100%
rename from examples/nextjs-with-typescript-v4-migration/.gitignore
rename to examples/material-next-ts-v4-v5-migration/.gitignore
diff --git a/examples/nextjs-with-typescript-v4-migration/README.md b/examples/material-next-ts-v4-v5-migration/README.md
similarity index 89%
rename from examples/nextjs-with-typescript-v4-migration/README.md
rename to examples/material-next-ts-v4-v5-migration/README.md
index f453b64decf861..f9c4b233b8de17 100644
--- a/examples/nextjs-with-typescript-v4-migration/README.md
+++ b/examples/material-next-ts-v4-v5-migration/README.md
@@ -29,7 +29,7 @@ or:
 ## The idea behind the example
 
 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`, 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).
+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).
 It also includes `@mui/styles`, the legacy styling solution that uses JSS as an engine.
 It provides all the necessary config for working with both Emotion and JSS for server-side rendering.
 The project is intended as a basic starter for migrating your application from v4 to v5, as it lets the JSS style overrides take precedence over the default styles passed to the components by Emotion.
diff --git a/examples/nextjs-with-typescript-v4-migration/next.config.js b/examples/material-next-ts-v4-v5-migration/next.config.js
similarity index 100%
rename from examples/nextjs-with-typescript-v4-migration/next.config.js
rename to examples/material-next-ts-v4-v5-migration/next.config.js
diff --git a/examples/nextjs-with-typescript-v4-migration/package.json b/examples/material-next-ts-v4-v5-migration/package.json
similarity index 94%
rename from examples/nextjs-with-typescript-v4-migration/package.json
rename to examples/material-next-ts-v4-v5-migration/package.json
index c3f640c8532643..352c353116aa8d 100644
--- a/examples/nextjs-with-typescript-v4-migration/package.json
+++ b/examples/material-next-ts-v4-v5-migration/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "nextjs-with-typescript-with-mui-styles",
+  "name": "material-next-ts-v4-v5-migration",
   "version": "5.0.0",
   "private": true,
   "scripts": {
diff --git a/examples/nextjs-with-typescript-v4-migration/pages/_app.tsx b/examples/material-next-ts-v4-v5-migration/pages/_app.tsx
similarity index 100%
rename from examples/nextjs-with-typescript-v4-migration/pages/_app.tsx
rename to examples/material-next-ts-v4-v5-migration/pages/_app.tsx
diff --git a/examples/nextjs-with-typescript-v4-migration/pages/_document.tsx b/examples/material-next-ts-v4-v5-migration/pages/_document.tsx
similarity index 100%
rename from examples/nextjs-with-typescript-v4-migration/pages/_document.tsx
rename to examples/material-next-ts-v4-v5-migration/pages/_document.tsx
diff --git a/examples/nextjs-with-typescript-v4-migration/pages/about.tsx b/examples/material-next-ts-v4-v5-migration/pages/about.tsx
similarity index 93%
rename from examples/nextjs-with-typescript-v4-migration/pages/about.tsx
rename to examples/material-next-ts-v4-v5-migration/pages/about.tsx
index 1a96c14f7f77fd..82fed281f7e49f 100644
--- a/examples/nextjs-with-typescript-v4-migration/pages/about.tsx
+++ b/examples/material-next-ts-v4-v5-migration/pages/about.tsx
@@ -25,7 +25,7 @@ export default function About() {
     <Container maxWidth="lg">
       <div className={classes.main}>
         <Typography variant="h4" component="h1" gutterBottom>
-          MUI v5 + Next.js with TypeScript example
+          Material UI - Next.js example in TypeScript with legacy @mui/styles
         </Typography>
         <Box maxWidth="sm">
           <Button variant="contained" component={Link} noLinkStyle href="/">
diff --git a/examples/nextjs-with-typescript-v4-migration/pages/index.tsx b/examples/material-next-ts-v4-v5-migration/pages/index.tsx
similarity index 92%
rename from examples/nextjs-with-typescript-v4-migration/pages/index.tsx
rename to examples/material-next-ts-v4-v5-migration/pages/index.tsx
index b8e977a331b101..7756b88fdda630 100644
--- a/examples/nextjs-with-typescript-v4-migration/pages/index.tsx
+++ b/examples/material-next-ts-v4-v5-migration/pages/index.tsx
@@ -24,7 +24,7 @@ export default function Home() {
     <Container maxWidth="lg">
       <div className={classes.main}>
         <Typography variant="h4" component="h1" gutterBottom>
-          MUI v5 + Next.js with TypeScript example
+          Material UI - Next.js example in TypeScript with legacy @mui/styles
         </Typography>
         <Link href="/about" color="secondary">
           Go to the about page
diff --git a/examples/nextjs-with-typescript-v4-migration/public/favicon.ico b/examples/material-next-ts-v4-v5-migration/public/favicon.ico
similarity index 100%
rename from examples/nextjs-with-typescript-v4-migration/public/favicon.ico
rename to examples/material-next-ts-v4-v5-migration/public/favicon.ico
diff --git a/examples/nextjs-with-typescript-v4-migration/src/Copyright.tsx b/examples/material-next-ts-v4-v5-migration/src/Copyright.tsx
similarity index 100%
rename from examples/nextjs-with-typescript-v4-migration/src/Copyright.tsx
rename to examples/material-next-ts-v4-v5-migration/src/Copyright.tsx
diff --git a/examples/nextjs-with-typescript-v4-migration/src/Link.tsx b/examples/material-next-ts-v4-v5-migration/src/Link.tsx
similarity index 100%
rename from examples/nextjs-with-typescript-v4-migration/src/Link.tsx
rename to examples/material-next-ts-v4-v5-migration/src/Link.tsx
diff --git a/examples/nextjs-with-typescript-v4-migration/src/ProTip.tsx b/examples/material-next-ts-v4-v5-migration/src/ProTip.tsx
similarity index 96%
rename from examples/nextjs-with-typescript-v4-migration/src/ProTip.tsx
rename to examples/material-next-ts-v4-v5-migration/src/ProTip.tsx
index 2db84897f0ebac..deb68a29734505 100644
--- a/examples/nextjs-with-typescript-v4-migration/src/ProTip.tsx
+++ b/examples/material-next-ts-v4-v5-migration/src/ProTip.tsx
@@ -25,7 +25,7 @@ export default function ProTip() {
   return (
     <Typography className={classes.typography} color="text.secondary">
       <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
-      Pro tip: See more <Link href="https://mui.com/getting-started/templates/">templates</Link> on
+      Pro tip: See more <Link href="https://mui.com/getting-started/templates/">templates</Link> in
       the MUI documentation.
     </Typography>
   );
diff --git a/examples/nextjs-with-typescript-v4-migration/src/createEmotionCache.ts b/examples/material-next-ts-v4-v5-migration/src/createEmotionCache.ts
similarity index 100%
rename from examples/nextjs-with-typescript-v4-migration/src/createEmotionCache.ts
rename to examples/material-next-ts-v4-v5-migration/src/createEmotionCache.ts
diff --git a/examples/nextjs-with-typescript-v4-migration/src/theme.ts b/examples/material-next-ts-v4-v5-migration/src/theme.ts
similarity index 100%
rename from examples/nextjs-with-typescript-v4-migration/src/theme.ts
rename to examples/material-next-ts-v4-v5-migration/src/theme.ts
diff --git a/examples/nextjs-with-typescript-v4-migration/tsconfig.json b/examples/material-next-ts-v4-v5-migration/tsconfig.json
similarity index 100%
rename from examples/nextjs-with-typescript-v4-migration/tsconfig.json
rename to examples/material-next-ts-v4-v5-migration/tsconfig.json
diff --git a/examples/nextjs-with-typescript-v4-migration/types/mui-styles.d.ts b/examples/material-next-ts-v4-v5-migration/types/mui-styles.d.ts
similarity index 100%
rename from examples/nextjs-with-typescript-v4-migration/types/mui-styles.d.ts
rename to examples/material-next-ts-v4-v5-migration/types/mui-styles.d.ts
diff --git a/examples/nextjs-with-typescript/.gitignore b/examples/material-next-ts/.gitignore
similarity index 100%
rename from examples/nextjs-with-typescript/.gitignore
rename to examples/material-next-ts/.gitignore
diff --git a/examples/nextjs-with-typescript/README.md b/examples/material-next-ts/README.md
similarity index 67%
rename from examples/nextjs-with-typescript/README.md
rename to examples/material-next-ts/README.md
index 9f7a85d04494bc..a6ff878e6d2d4b 100644
--- a/examples/nextjs-with-typescript/README.md
+++ b/examples/material-next-ts/README.md
@@ -1,4 +1,4 @@
-# Next.js with TypeScript example
+# Material UI - Next.js example in TypeScript
 
 ## How to use
 
@@ -7,8 +7,8 @@ Download the example [or clone the repo](https://github.com/mui/material-ui):
 <!-- #default-branch-switch -->
 
 ```sh
-curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/nextjs-with-typescript
-cd nextjs-with-typescript
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/material-next-ts
+cd material-next-ts
 ```
 
 Install it and run:
@@ -22,18 +22,18 @@ or:
 
 <!-- #default-branch-switch -->
 
-[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/nextjs-with-typescript)
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-next-ts)
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/nextjs-with-typescript)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-next-ts)
 
 ## The idea behind the example
 
 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`, the default style engine in MUI v5. If you prefer, you can [use styled-components instead](https://mui.com/material-ui/guides/interoperability/#styled-components).
+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).
 
 ## The link component
 
-The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/nextjs-with-typescript) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/api-reference/next/link) with MUI.
+The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-next-ts) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/api-reference/next/link) with MUI.
 More information [in the documentation](https://mui.com/material-ui/guides/routing/#next-js).
 
 ## What's next?
diff --git a/examples/nextjs-with-typescript/next.config.js b/examples/material-next-ts/next.config.js
similarity index 100%
rename from examples/nextjs-with-typescript/next.config.js
rename to examples/material-next-ts/next.config.js
diff --git a/examples/nextjs-with-typescript/package.json b/examples/material-next-ts/package.json
similarity index 95%
rename from examples/nextjs-with-typescript/package.json
rename to examples/material-next-ts/package.json
index dcdc08c9f16005..f30f24cb121b16 100644
--- a/examples/nextjs-with-typescript/package.json
+++ b/examples/material-next-ts/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "nextjs-with-typescript",
+  "name": "material-next-ts",
   "version": "5.0.0",
   "private": true,
   "scripts": {
diff --git a/examples/nextjs-with-typescript/pages/_app.tsx b/examples/material-next-ts/pages/_app.tsx
similarity index 100%
rename from examples/nextjs-with-typescript/pages/_app.tsx
rename to examples/material-next-ts/pages/_app.tsx
diff --git a/examples/nextjs-with-typescript/pages/_document.tsx b/examples/material-next-ts/pages/_document.tsx
similarity index 100%
rename from examples/nextjs-with-typescript/pages/_document.tsx
rename to examples/material-next-ts/pages/_document.tsx
diff --git a/examples/nextjs-with-typescript/pages/about.tsx b/examples/material-next-ts/pages/about.tsx
similarity index 94%
rename from examples/nextjs-with-typescript/pages/about.tsx
rename to examples/material-next-ts/pages/about.tsx
index d8e78127461be8..ebeb0791c740d6 100644
--- a/examples/nextjs-with-typescript/pages/about.tsx
+++ b/examples/material-next-ts/pages/about.tsx
@@ -20,7 +20,7 @@ export default function About() {
         }}
       >
         <Typography variant="h4" component="h1" gutterBottom>
-          MUI v5 + Next.js with TypeScript example
+          Material UI - Next.js example in TypeScript
         </Typography>
         <Box maxWidth="sm">
           <Button variant="contained" component={Link} noLinkStyle href="/">
diff --git a/examples/nextjs-with-typescript/pages/index.tsx b/examples/material-next-ts/pages/index.tsx
similarity index 93%
rename from examples/nextjs-with-typescript/pages/index.tsx
rename to examples/material-next-ts/pages/index.tsx
index e244a691682dfb..516fa2adf17878 100644
--- a/examples/nextjs-with-typescript/pages/index.tsx
+++ b/examples/material-next-ts/pages/index.tsx
@@ -19,7 +19,7 @@ export default function Home() {
         }}
       >
         <Typography variant="h4" component="h1" gutterBottom>
-          MUI v5 + Next.js with TypeScript example
+          Material UI - Next.js example in TypeScript
         </Typography>
         <Link href="/about" color="secondary">
           Go to the about page
diff --git a/examples/nextjs-with-typescript/public/favicon.ico b/examples/material-next-ts/public/favicon.ico
similarity index 100%
rename from examples/nextjs-with-typescript/public/favicon.ico
rename to examples/material-next-ts/public/favicon.ico
diff --git a/examples/nextjs-with-typescript/src/Copyright.tsx b/examples/material-next-ts/src/Copyright.tsx
similarity index 100%
rename from examples/nextjs-with-typescript/src/Copyright.tsx
rename to examples/material-next-ts/src/Copyright.tsx
diff --git a/examples/nextjs-with-typescript/src/Link.tsx b/examples/material-next-ts/src/Link.tsx
similarity index 100%
rename from examples/nextjs-with-typescript/src/Link.tsx
rename to examples/material-next-ts/src/Link.tsx
diff --git a/examples/create-react-app-with-styled-components-typescript/src/ProTip.tsx b/examples/material-next-ts/src/ProTip.tsx
similarity index 96%
rename from examples/create-react-app-with-styled-components-typescript/src/ProTip.tsx
rename to examples/material-next-ts/src/ProTip.tsx
index 5a8b457f024fbd..0894a06eb94bde 100644
--- a/examples/create-react-app-with-styled-components-typescript/src/ProTip.tsx
+++ b/examples/material-next-ts/src/ProTip.tsx
@@ -15,7 +15,7 @@ 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> on
+      Pro tip: See more <Link href="https://mui.com/getting-started/templates/">templates</Link> in
       the MUI documentation.
     </Typography>
   );
diff --git a/examples/nextjs-with-typescript/src/createEmotionCache.ts b/examples/material-next-ts/src/createEmotionCache.ts
similarity index 100%
rename from examples/nextjs-with-typescript/src/createEmotionCache.ts
rename to examples/material-next-ts/src/createEmotionCache.ts
diff --git a/examples/nextjs-with-typescript/src/theme.ts b/examples/material-next-ts/src/theme.ts
similarity index 100%
rename from examples/nextjs-with-typescript/src/theme.ts
rename to examples/material-next-ts/src/theme.ts
diff --git a/examples/nextjs-with-typescript/tsconfig.json b/examples/material-next-ts/tsconfig.json
similarity index 100%
rename from examples/nextjs-with-typescript/tsconfig.json
rename to examples/material-next-ts/tsconfig.json
diff --git a/examples/nextjs/.gitignore b/examples/material-next/.gitignore
similarity index 100%
rename from examples/nextjs/.gitignore
rename to examples/material-next/.gitignore
diff --git a/examples/nextjs/README.md b/examples/material-next/README.md
similarity index 74%
rename from examples/nextjs/README.md
rename to examples/material-next/README.md
index 9e18b4ba6fa516..399382044483cc 100644
--- a/examples/nextjs/README.md
+++ b/examples/material-next/README.md
@@ -1,4 +1,4 @@
-# Next.js example
+# Material UI - Next.js example
 
 ## How to use
 
@@ -7,8 +7,8 @@ Download the example [or clone the repo](https://github.com/mui/material-ui):
 <!-- #default-branch-switch -->
 
 ```sh
-curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/nextjs
-cd nextjs
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/material-next
+cd material-next
 ```
 
 Install it and run:
@@ -22,19 +22,19 @@ or:
 
 <!-- #default-branch-switch -->
 
-[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/nextjs)
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-next)
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/nextjs)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-next)
 
 ## The idea behind the example
 
 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`, the default style engine in MUI v5.
+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).
 
-## The link component
+## The Link component
 
-The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/nextjs-with-typescript) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/api-reference/next/link) with MUI.
+The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-next-ts) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/api-reference/next/link) with MUI.
 More information [in the documentation](https://mui.com/material-ui/guides/routing/#next-js).
 
 ## What's next?
diff --git a/examples/nextjs/next.config.js b/examples/material-next/next.config.js
similarity index 100%
rename from examples/nextjs/next.config.js
rename to examples/material-next/next.config.js
diff --git a/examples/nextjs/package.json b/examples/material-next/package.json
similarity index 96%
rename from examples/nextjs/package.json
rename to examples/material-next/package.json
index 71dc1b1ec5a70e..d06cbddcb67940 100644
--- a/examples/nextjs/package.json
+++ b/examples/material-next/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "nextjs",
+  "name": "material-next",
   "version": "5.0.0",
   "private": true,
   "scripts": {
diff --git a/examples/nextjs/pages/_app.js b/examples/material-next/pages/_app.js
similarity index 100%
rename from examples/nextjs/pages/_app.js
rename to examples/material-next/pages/_app.js
diff --git a/examples/nextjs/pages/_document.js b/examples/material-next/pages/_document.js
similarity index 100%
rename from examples/nextjs/pages/_document.js
rename to examples/material-next/pages/_document.js
diff --git a/examples/nextjs/pages/about.js b/examples/material-next/pages/about.js
similarity index 94%
rename from examples/nextjs/pages/about.js
rename to examples/material-next/pages/about.js
index 4c5a4887252eab..8c63d00f69d218 100644
--- a/examples/nextjs/pages/about.js
+++ b/examples/material-next/pages/about.js
@@ -12,7 +12,7 @@ export default function About() {
     <Container maxWidth="sm">
       <Box sx={{ my: 4 }}>
         <Typography variant="h4" component="h1" gutterBottom>
-          Next.js example
+          Material UI - Next.js example
         </Typography>
         <Button variant="contained" component={Link} noLinkStyle href="/">
           Go to the main page
diff --git a/examples/nextjs/pages/index.js b/examples/material-next/pages/index.js
similarity index 94%
rename from examples/nextjs/pages/index.js
rename to examples/material-next/pages/index.js
index 748b3087014773..e9913d37fa1dc6 100644
--- a/examples/nextjs/pages/index.js
+++ b/examples/material-next/pages/index.js
@@ -11,7 +11,7 @@ export default function Index() {
     <Container maxWidth="sm">
       <Box sx={{ my: 4 }}>
         <Typography variant="h4" component="h1" gutterBottom>
-          Next.js example
+          Material UI - Next.js example
         </Typography>
         <Link href="/about" color="secondary">
           Go to the about page
diff --git a/examples/nextjs/public/favicon.ico b/examples/material-next/public/favicon.ico
similarity index 100%
rename from examples/nextjs/public/favicon.ico
rename to examples/material-next/public/favicon.ico
diff --git a/examples/nextjs/src/Copyright.js b/examples/material-next/src/Copyright.js
similarity index 100%
rename from examples/nextjs/src/Copyright.js
rename to examples/material-next/src/Copyright.js
diff --git a/examples/nextjs/src/Link.js b/examples/material-next/src/Link.js
similarity index 100%
rename from examples/nextjs/src/Link.js
rename to examples/material-next/src/Link.js
diff --git a/examples/material-next/src/ProTip.js b/examples/material-next/src/ProTip.js
new file mode 100644
index 00000000000000..09d7e4ae4ae35b
--- /dev/null
+++ b/examples/material-next/src/ProTip.js
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Link from '@mui/material/Link';
+import SvgIcon from '@mui/material/SvgIcon';
+import Typography from '@mui/material/Typography';
+
+function LightBulbIcon(props) {
+  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/nextjs/src/createEmotionCache.js b/examples/material-next/src/createEmotionCache.js
similarity index 100%
rename from examples/nextjs/src/createEmotionCache.js
rename to examples/material-next/src/createEmotionCache.js
diff --git a/examples/nextjs/src/theme.js b/examples/material-next/src/theme.js
similarity index 100%
rename from examples/nextjs/src/theme.js
rename to examples/material-next/src/theme.js
diff --git a/examples/preact/.gitignore b/examples/material-preact/.gitignore
similarity index 100%
rename from examples/preact/.gitignore
rename to examples/material-preact/.gitignore
diff --git a/examples/preact/README.md b/examples/material-preact/README.md
similarity index 70%
rename from examples/preact/README.md
rename to examples/material-preact/README.md
index 67e77eedb7357b..fa9857e567b971 100644
--- a/examples/preact/README.md
+++ b/examples/material-preact/README.md
@@ -1,4 +1,4 @@
-# Preact example
+# Material UI - Preact example
 
 ## How to use
 
@@ -7,8 +7,8 @@ Download the example [or clone the repo](https://github.com/mui/material-ui):
 <!-- #default-branch-switch -->
 
 ```sh
-curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/preact
-cd preact
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/material-preact
+cd material-preact
 ```
 
 Install it and run:
@@ -20,11 +20,11 @@ npm run start
 
 ## The idea behind the example
 
-The project uses [Preact](https://github.com/developit/preact), which is a fast 3kB alternative to React with the same modern API.
+The project uses Material UI with [Preact](https://github.com/developit/preact), which is a fast 3kB alternative to React with the same modern API.
 
 This example uses CRA with `react-app-rewired` for adding webpack aliases for preact.
 
-It includes `@mui/material` and its peer dependencies, including `emotion`, the default style engine in MUI v5.
+It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5.
 
 <!-- #default-branch-switch -->
 
diff --git a/examples/preact/config-overrides.js b/examples/material-preact/config-overrides.js
similarity index 100%
rename from examples/preact/config-overrides.js
rename to examples/material-preact/config-overrides.js
diff --git a/examples/preact/package.json b/examples/material-preact/package.json
similarity index 96%
rename from examples/preact/package.json
rename to examples/material-preact/package.json
index 267eda5015f0b2..8d7acbff286d3c 100644
--- a/examples/preact/package.json
+++ b/examples/material-preact/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "preact",
+  "name": "material-preact",
   "version": "5.0.0",
   "private": true,
   "dependencies": {
diff --git a/examples/preact/public/favicon.ico b/examples/material-preact/public/favicon.ico
similarity index 100%
rename from examples/preact/public/favicon.ico
rename to examples/material-preact/public/favicon.ico
diff --git a/examples/preact/public/index.html b/examples/material-preact/public/index.html
similarity index 100%
rename from examples/preact/public/index.html
rename to examples/material-preact/public/index.html
diff --git a/examples/tailwind-css/public/manifest.json b/examples/material-preact/public/manifest.json
similarity index 100%
rename from examples/tailwind-css/public/manifest.json
rename to examples/material-preact/public/manifest.json
diff --git a/examples/tailwind-css/public/robots.txt b/examples/material-preact/public/robots.txt
similarity index 100%
rename from examples/tailwind-css/public/robots.txt
rename to examples/material-preact/public/robots.txt
diff --git a/examples/preact/src/App.js b/examples/material-preact/src/App.js
similarity index 93%
rename from examples/preact/src/App.js
rename to examples/material-preact/src/App.js
index db6a13b4b7af15..02083b0db42448 100644
--- a/examples/preact/src/App.js
+++ b/examples/material-preact/src/App.js
@@ -10,7 +10,7 @@ export default function App() {
     <Container maxWidth="sm">
       <Box sx={{ my: 4 }}>
         <Typography variant="h4" component="h1" gutterBottom>
-          Preact example
+          Material UI Preact example
         </Typography>
         <ProTip />
         <Copyright />
diff --git a/examples/preact/src/Copyright.js b/examples/material-preact/src/Copyright.js
similarity index 100%
rename from examples/preact/src/Copyright.js
rename to examples/material-preact/src/Copyright.js
diff --git a/examples/material-preact/src/ProTip.js b/examples/material-preact/src/ProTip.js
new file mode 100644
index 00000000000000..09d7e4ae4ae35b
--- /dev/null
+++ b/examples/material-preact/src/ProTip.js
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Link from '@mui/material/Link';
+import SvgIcon from '@mui/material/SvgIcon';
+import Typography from '@mui/material/Typography';
+
+function LightBulbIcon(props) {
+  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/preact/src/index.js b/examples/material-preact/src/index.js
similarity index 100%
rename from examples/preact/src/index.js
rename to examples/material-preact/src/index.js
diff --git a/examples/preact/src/setupTests.js b/examples/material-preact/src/setupTests.js
similarity index 100%
rename from examples/preact/src/setupTests.js
rename to examples/material-preact/src/setupTests.js
diff --git a/examples/ssr/theme.js b/examples/material-preact/src/theme.js
similarity index 100%
rename from examples/ssr/theme.js
rename to examples/material-preact/src/theme.js
diff --git a/examples/remix-with-typescript/.gitignore b/examples/material-remix-ts/.gitignore
similarity index 100%
rename from examples/remix-with-typescript/.gitignore
rename to examples/material-remix-ts/.gitignore
diff --git a/examples/remix-with-typescript/.stackblitzrc b/examples/material-remix-ts/.stackblitzrc
similarity index 100%
rename from examples/remix-with-typescript/.stackblitzrc
rename to examples/material-remix-ts/.stackblitzrc
diff --git a/examples/remix-with-typescript/README.md b/examples/material-remix-ts/README.md
similarity index 72%
rename from examples/remix-with-typescript/README.md
rename to examples/material-remix-ts/README.md
index 1333bc31f2fd64..7d9ec36deea36b 100644
--- a/examples/remix-with-typescript/README.md
+++ b/examples/material-remix-ts/README.md
@@ -1,4 +1,4 @@
-# Remix example
+# Material UI - Remix example in TypeScript
 
 ## How to use
 
@@ -7,8 +7,8 @@ Download the example [or clone the repo](https://github.com/mui/material-ui):
 <!-- #default-branch-switch -->
 
 ```sh
-curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/remix-with-typescript
-cd remix-with-typescript
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/material-remix-ts
+cd material-remix-ts
 ```
 
 Install it and run:
@@ -22,14 +22,14 @@ or:
 
 <!-- #default-branch-switch -->
 
-[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/remix-with-typescript)
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-remix-ts)
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/remix-with-typescript)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-remix-ts)
 
 ## The idea behind the example
 
-The project uses [Remix](https://remix.run/), which is a full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience.
-It includes `@mui/material` and its peer dependencies, including `emotion`, the default style engine in MUI v5.
+The project uses [Remix](https://remix.run/), which is a full stack web framework.
+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).
 
 ## What's next?
diff --git a/examples/remix-with-typescript/app/entry.client.tsx b/examples/material-remix-ts/app/entry.client.tsx
similarity index 100%
rename from examples/remix-with-typescript/app/entry.client.tsx
rename to examples/material-remix-ts/app/entry.client.tsx
diff --git a/examples/remix-with-typescript/app/entry.server.tsx b/examples/material-remix-ts/app/entry.server.tsx
similarity index 100%
rename from examples/remix-with-typescript/app/entry.server.tsx
rename to examples/material-remix-ts/app/entry.server.tsx
diff --git a/examples/remix-with-typescript/app/root.tsx b/examples/material-remix-ts/app/root.tsx
similarity index 100%
rename from examples/remix-with-typescript/app/root.tsx
rename to examples/material-remix-ts/app/root.tsx
diff --git a/examples/remix-with-typescript/app/routes/about.tsx b/examples/material-remix-ts/app/routes/about.tsx
similarity index 90%
rename from examples/remix-with-typescript/app/routes/about.tsx
rename to examples/material-remix-ts/app/routes/about.tsx
index ab83091db63d75..f87130cf24141f 100644
--- a/examples/remix-with-typescript/app/routes/about.tsx
+++ b/examples/material-remix-ts/app/routes/about.tsx
@@ -7,7 +7,7 @@ export default function About() {
   return (
     <React.Fragment>
       <Typography variant="h4" component="h1" gutterBottom>
-        Remix with TypeScript example
+        Material UI Remix in TypeScript example
       </Typography>
       <Button variant="contained" component={Link} to="/">
         Go to the main page
diff --git a/examples/remix-with-typescript/app/routes/index.tsx b/examples/material-remix-ts/app/routes/index.tsx
similarity index 92%
rename from examples/remix-with-typescript/app/routes/index.tsx
rename to examples/material-remix-ts/app/routes/index.tsx
index f264c5b93a18e1..fafd810ff2abd1 100644
--- a/examples/remix-with-typescript/app/routes/index.tsx
+++ b/examples/material-remix-ts/app/routes/index.tsx
@@ -16,7 +16,7 @@ export default function Index() {
   return (
     <React.Fragment>
       <Typography variant="h4" component="h1" gutterBottom>
-        Remix with TypeScript example
+        Material UI Remix in TypeScript example
       </Typography>
       <Link to="/about" color="secondary">
         Go to the about page
diff --git a/examples/remix-with-typescript/app/src/ClientStyleContext.tsx b/examples/material-remix-ts/app/src/ClientStyleContext.tsx
similarity index 100%
rename from examples/remix-with-typescript/app/src/ClientStyleContext.tsx
rename to examples/material-remix-ts/app/src/ClientStyleContext.tsx
diff --git a/examples/remix-with-typescript/app/src/Copyright.tsx b/examples/material-remix-ts/app/src/Copyright.tsx
similarity index 100%
rename from examples/remix-with-typescript/app/src/Copyright.tsx
rename to examples/material-remix-ts/app/src/Copyright.tsx
diff --git a/examples/remix-with-typescript/app/src/Layout.tsx b/examples/material-remix-ts/app/src/Layout.tsx
similarity index 100%
rename from examples/remix-with-typescript/app/src/Layout.tsx
rename to examples/material-remix-ts/app/src/Layout.tsx
diff --git a/examples/material-remix-ts/app/src/ProTip.tsx b/examples/material-remix-ts/app/src/ProTip.tsx
new file mode 100644
index 00000000000000..0894a06eb94bde
--- /dev/null
+++ b/examples/material-remix-ts/app/src/ProTip.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Link from '@mui/material/Link';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+import Typography from '@mui/material/Typography';
+
+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/remix-with-typescript/app/src/createEmotionCache.ts b/examples/material-remix-ts/app/src/createEmotionCache.ts
similarity index 100%
rename from examples/remix-with-typescript/app/src/createEmotionCache.ts
rename to examples/material-remix-ts/app/src/createEmotionCache.ts
diff --git a/examples/remix-with-typescript/app/src/theme.ts b/examples/material-remix-ts/app/src/theme.ts
similarity index 100%
rename from examples/remix-with-typescript/app/src/theme.ts
rename to examples/material-remix-ts/app/src/theme.ts
diff --git a/examples/remix-with-typescript/package.json b/examples/material-remix-ts/package.json
similarity index 95%
rename from examples/remix-with-typescript/package.json
rename to examples/material-remix-ts/package.json
index 6f87f18aa84b05..d5c5eaf3ebb833 100644
--- a/examples/remix-with-typescript/package.json
+++ b/examples/material-remix-ts/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "remix-with-typescript",
+  "name": "material-remix-ts",
   "version": "5.0.0",
   "private": true,
   "scripts": {
diff --git a/examples/remix-with-typescript/public/favicon.ico b/examples/material-remix-ts/public/favicon.ico
similarity index 100%
rename from examples/remix-with-typescript/public/favicon.ico
rename to examples/material-remix-ts/public/favicon.ico
diff --git a/examples/remix-with-typescript/remix.config.js b/examples/material-remix-ts/remix.config.js
similarity index 100%
rename from examples/remix-with-typescript/remix.config.js
rename to examples/material-remix-ts/remix.config.js
diff --git a/examples/remix-with-typescript/remix.env.d.ts b/examples/material-remix-ts/remix.env.d.ts
similarity index 100%
rename from examples/remix-with-typescript/remix.env.d.ts
rename to examples/material-remix-ts/remix.env.d.ts
diff --git a/examples/remix-with-typescript/tsconfig.json b/examples/material-remix-ts/tsconfig.json
similarity index 100%
rename from examples/remix-with-typescript/tsconfig.json
rename to examples/material-remix-ts/tsconfig.json
diff --git a/examples/cdn/README.md b/examples/material-via-cdn/README.md
similarity index 80%
rename from examples/cdn/README.md
rename to examples/material-via-cdn/README.md
index 08c8e4e6018782..8e41901adf99cd 100644
--- a/examples/cdn/README.md
+++ b/examples/material-via-cdn/README.md
@@ -1,12 +1,12 @@
-# CDN example
+# Material UI - CDN example
 
 ## How to use
 
 Download the example [or clone the repo](https://github.com/mui/material-ui):
 
 ```sh
-curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/cdn
-cd cdn
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/material-via-cdn
+cd material-via-cdn
 ```
 
 Run:
@@ -17,13 +17,13 @@ open index.html
 
 ## The idea behind the example
 
-You can start using MUI with minimal Front-end infrastructure, which is great for prototyping.
+You can start using Material UI with minimal front-end infrastructure, which is great for prototyping.
 We discourage using this approach in production, though.
 The client has to download the entire library, regardless of which components are used, affecting performance and bandwidth usage.
 
 <!-- #default-branch-switch -->
 
-[The live preview.](https://combinatronics.com/mui/material-ui/master/examples/cdn/index.html)
+[The live preview.](https://combinatronics.com/mui/material-ui/master/examples/material-via-cdn/index.html)
 
 ## UMD releases
 
diff --git a/examples/cdn/index.html b/examples/material-via-cdn/index.html
similarity index 97%
rename from examples/cdn/index.html
rename to examples/material-via-cdn/index.html
index 111be44eae8ed4..553571bdba6e3c 100644
--- a/examples/cdn/index.html
+++ b/examples/material-via-cdn/index.html
@@ -68,7 +68,7 @@
           <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
             <LightBulbIcon sx={{ mr: 1, verticalAlign: 'top' }} />
             Pro tip: See more{' '}
-            <Link href="https://mui.com/getting-started/templates/">templates</Link> on the MUI
+            <Link href="https://mui.com/getting-started/templates/">templates</Link> in the MUI
             documentation.
           </Typography>
         );
@@ -92,7 +92,7 @@
           <Container maxWidth="sm">
             <Box sx={{ my: 4 }}>
               <Typography variant="h4" component="h1" gutterBottom>
-                CDN example
+                Material UI CDN example
               </Typography>
               <ProTip />
               <Copyright />
diff --git a/examples/cdn/package.json b/examples/material-via-cdn/package.json
similarity index 73%
rename from examples/cdn/package.json
rename to examples/material-via-cdn/package.json
index 7b2b45627e6aae..02a6cf3031888b 100644
--- a/examples/cdn/package.json
+++ b/examples/material-via-cdn/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "cdn",
+  "name": "material-via-cdn",
   "version": "5.0.0",
   "private": true,
   "dependencies": {},
diff --git a/examples/vitejs-with-typescript/.gitignore b/examples/material-vite-ts/.gitignore
similarity index 100%
rename from examples/vitejs-with-typescript/.gitignore
rename to examples/material-vite-ts/.gitignore
diff --git a/examples/vitejs-with-typescript/README.md b/examples/material-vite-ts/README.md
similarity index 73%
rename from examples/vitejs-with-typescript/README.md
rename to examples/material-vite-ts/README.md
index 1cfacaf633dd49..e3036bfac772f3 100644
--- a/examples/vitejs-with-typescript/README.md
+++ b/examples/material-vite-ts/README.md
@@ -1,4 +1,4 @@
-# Vite.js with Typescript example
+# Material UI - Vite.js in Typescript example
 
 ## How to use
 
@@ -7,8 +7,8 @@ Download the example [or clone the repo](https://github.com/mui/material-ui):
 <!-- #default-branch-switch -->
 
 ```sh
-curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/vitejs-with-typescript
-cd vitejs-with-typescript
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-vite-ts
+cd material-vite-ts
 ```
 
 Install it and run:
@@ -22,14 +22,14 @@ or:
 
 <!-- #default-branch-switch -->
 
-[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/vitejs-with-typescript)
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-vite-ts)
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/vitejs-with-typescript)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-vite-ts)
 
 ## The idea behind the example
 
 This example uses [Vite.js](https://github.com/vitejs/vite).
-It includes `@mui/material` with `@mui/icons-material` and their peer dependencies, including `emotion`, the default style engine in Material UI v5.
+It includes `@mui/material` with `@mui/icons-material` and their peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5.
 
 ## What's next?
 
diff --git a/examples/vitejs-with-typescript/index.html b/examples/material-vite-ts/index.html
similarity index 100%
rename from examples/vitejs-with-typescript/index.html
rename to examples/material-vite-ts/index.html
diff --git a/examples/vitejs-with-typescript/package.json b/examples/material-vite-ts/package.json
similarity index 93%
rename from examples/vitejs-with-typescript/package.json
rename to examples/material-vite-ts/package.json
index 226e4ad2add5d5..2cb8e68f1abde9 100644
--- a/examples/vitejs-with-typescript/package.json
+++ b/examples/material-vite-ts/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "vitejs-with-typescript",
+  "name": "material-vite-ts",
   "private": true,
   "version": "5.0.0",
   "type": "module",
diff --git a/examples/vitejs-with-typescript/public/vite.svg b/examples/material-vite-ts/public/vite.svg
similarity index 100%
rename from examples/vitejs-with-typescript/public/vite.svg
rename to examples/material-vite-ts/public/vite.svg
diff --git a/examples/vitejs-with-typescript/src/App.tsx b/examples/material-vite-ts/src/App.tsx
similarity index 93%
rename from examples/vitejs-with-typescript/src/App.tsx
rename to examples/material-vite-ts/src/App.tsx
index cddf686156d204..9cf5416eed8fa3 100644
--- a/examples/vitejs-with-typescript/src/App.tsx
+++ b/examples/material-vite-ts/src/App.tsx
@@ -22,7 +22,7 @@ export default function App() {
     <Container maxWidth="sm">
       <Box sx={{ my: 4 }}>
         <Typography variant="h4" component="h1" gutterBottom>
-          ViteJS App example with TypeScript
+          Material UI Vite.js example in TypeScript
         </Typography>
         <ProTip />
         <Copyright />
diff --git a/examples/material-vite-ts/src/ProTip.tsx b/examples/material-vite-ts/src/ProTip.tsx
new file mode 100644
index 00000000000000..0894a06eb94bde
--- /dev/null
+++ b/examples/material-vite-ts/src/ProTip.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Link from '@mui/material/Link';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+import Typography from '@mui/material/Typography';
+
+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/vitejs-with-typescript/src/main.tsx b/examples/material-vite-ts/src/main.tsx
similarity index 100%
rename from examples/vitejs-with-typescript/src/main.tsx
rename to examples/material-vite-ts/src/main.tsx
diff --git a/examples/vitejs-with-typescript/src/theme.tsx b/examples/material-vite-ts/src/theme.tsx
similarity index 100%
rename from examples/vitejs-with-typescript/src/theme.tsx
rename to examples/material-vite-ts/src/theme.tsx
diff --git a/examples/vitejs-with-typescript/src/vite-env.d.ts b/examples/material-vite-ts/src/vite-env.d.ts
similarity index 100%
rename from examples/vitejs-with-typescript/src/vite-env.d.ts
rename to examples/material-vite-ts/src/vite-env.d.ts
diff --git a/examples/vitejs-with-typescript/tsconfig.json b/examples/material-vite-ts/tsconfig.json
similarity index 100%
rename from examples/vitejs-with-typescript/tsconfig.json
rename to examples/material-vite-ts/tsconfig.json
diff --git a/examples/vitejs-with-typescript/tsconfig.node.json b/examples/material-vite-ts/tsconfig.node.json
similarity index 100%
rename from examples/vitejs-with-typescript/tsconfig.node.json
rename to examples/material-vite-ts/tsconfig.node.json
diff --git a/examples/vitejs-with-typescript/vite.config.ts b/examples/material-vite-ts/vite.config.ts
similarity index 100%
rename from examples/vitejs-with-typescript/vite.config.ts
rename to examples/material-vite-ts/vite.config.ts
diff --git a/examples/vitejs/.gitignore b/examples/material-vite/.gitignore
similarity index 100%
rename from examples/vitejs/.gitignore
rename to examples/material-vite/.gitignore
diff --git a/examples/vitejs/README.md b/examples/material-vite/README.md
similarity index 77%
rename from examples/vitejs/README.md
rename to examples/material-vite/README.md
index 162d912316bb4d..b7f9440dc65a08 100644
--- a/examples/vitejs/README.md
+++ b/examples/material-vite/README.md
@@ -1,4 +1,4 @@
-# Vite.js example
+# Material UI - Vite.js example
 
 ## How to use
 
@@ -7,8 +7,8 @@ Download the example [or clone the repo](https://github.com/mui/material-ui):
 <!-- #default-branch-switch -->
 
 ```sh
-curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/vitejs
-cd vitejs
+curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/material-vite
+cd material-vite
 ```
 
 Install it and run:
@@ -22,14 +22,14 @@ or:
 
 <!-- #default-branch-switch -->
 
-[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/vitejs)
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-vite)
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/vitejs)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-vite)
 
 ## The idea behind the example
 
 This example uses [Vite.js](https://github.com/vitejs/vite).
-It includes `@mui/material` and its peer dependencies, including `emotion`, the default style engine in Material UI v5.
+It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5.
 
 ## What's next?
 
diff --git a/examples/vitejs/index.html b/examples/material-vite/index.html
similarity index 70%
rename from examples/vitejs/index.html
rename to examples/material-vite/index.html
index 1cee864d075d66..47df4b895a86f1 100644
--- a/examples/vitejs/index.html
+++ b/examples/material-vite/index.html
@@ -3,7 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
     <title>Vite App with Material UI</title>
   </head>
   <body>
diff --git a/examples/vitejs/package.json b/examples/material-vite/package.json
similarity index 93%
rename from examples/vitejs/package.json
rename to examples/material-vite/package.json
index b563de4e898f26..d9fc42dbf0bc59 100644
--- a/examples/vitejs/package.json
+++ b/examples/material-vite/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "vite",
+  "name": "material-vite",
   "version": "5.0.0",
   "private": true,
   "scripts": {
diff --git a/examples/vitejs/src/App.jsx b/examples/material-vite/src/App.jsx
similarity index 92%
rename from examples/vitejs/src/App.jsx
rename to examples/material-vite/src/App.jsx
index 34f3fa1cc683e3..e3abe770f9e7d5 100644
--- a/examples/vitejs/src/App.jsx
+++ b/examples/material-vite/src/App.jsx
@@ -10,7 +10,7 @@ export default function App() {
     <Container maxWidth="sm">
       <Box sx={{ my: 4 }}>
         <Typography variant="h4" component="h1" gutterBottom>
-          Vite.js example
+          Material UI Vite.js example
         </Typography>
         <ProTip />
         <Copyright />
diff --git a/examples/vitejs/src/Copyright.jsx b/examples/material-vite/src/Copyright.jsx
similarity index 100%
rename from examples/vitejs/src/Copyright.jsx
rename to examples/material-vite/src/Copyright.jsx
diff --git a/examples/vitejs/src/ProTip.jsx b/examples/material-vite/src/ProTip.jsx
similarity index 95%
rename from examples/vitejs/src/ProTip.jsx
rename to examples/material-vite/src/ProTip.jsx
index 6d81f33b0a0dad..09d7e4ae4ae35b 100644
--- a/examples/vitejs/src/ProTip.jsx
+++ b/examples/material-vite/src/ProTip.jsx
@@ -15,7 +15,7 @@ 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> on
+      Pro tip: See more <Link href="https://mui.com/getting-started/templates/">templates</Link> in
       the MUI documentation.
     </Typography>
   );
diff --git a/examples/vitejs/src/main.jsx b/examples/material-vite/src/main.jsx
similarity index 100%
rename from examples/vitejs/src/main.jsx
rename to examples/material-vite/src/main.jsx
diff --git a/examples/vitejs/src/theme.js b/examples/material-vite/src/theme.js
similarity index 100%
rename from examples/vitejs/src/theme.js
rename to examples/material-vite/src/theme.js
diff --git a/examples/vitejs/vite.config.js b/examples/material-vite/vite.config.js
similarity index 100%
rename from examples/vitejs/vite.config.js
rename to examples/material-vite/vite.config.js
diff --git a/examples/preact/src/ProTip.js b/examples/preact/src/ProTip.js
deleted file mode 100644
index 6d81f33b0a0dad..00000000000000
--- a/examples/preact/src/ProTip.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-import Link from '@mui/material/Link';
-import SvgIcon from '@mui/material/SvgIcon';
-import Typography from '@mui/material/Typography';
-
-function LightBulbIcon(props) {
-  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> on
-      the MUI documentation.
-    </Typography>
-  );
-}
diff --git a/examples/ssr/ProTip.js b/examples/ssr/ProTip.js
deleted file mode 100644
index 6d81f33b0a0dad..00000000000000
--- a/examples/ssr/ProTip.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-import Link from '@mui/material/Link';
-import SvgIcon from '@mui/material/SvgIcon';
-import Typography from '@mui/material/Typography';
-
-function LightBulbIcon(props) {
-  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> on
-      the MUI documentation.
-    </Typography>
-  );
-}
diff --git a/examples/tailwind-css/src/ProTip.tsx b/examples/tailwind-css/src/ProTip.tsx
deleted file mode 100644
index 5a8b457f024fbd..00000000000000
--- a/examples/tailwind-css/src/ProTip.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-import Link from '@mui/material/Link';
-import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
-import Typography from '@mui/material/Typography';
-
-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> on
-      the MUI documentation.
-    </Typography>
-  );
-}
diff --git a/examples/vitejs-with-typescript/src/ProTip.tsx b/examples/vitejs-with-typescript/src/ProTip.tsx
deleted file mode 100644
index 5a8b457f024fbd..00000000000000
--- a/examples/vitejs-with-typescript/src/ProTip.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-import Link from '@mui/material/Link';
-import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
-import Typography from '@mui/material/Typography';
-
-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> on
-      the MUI documentation.
-    </Typography>
-  );
-}
diff --git a/packages/mui-material/test/umd/run.js b/packages/mui-material/test/umd/run.js
index f7db6f3a0ea12f..00e18369ed7667 100644
--- a/packages/mui-material/test/umd/run.js
+++ b/packages/mui-material/test/umd/run.js
@@ -45,7 +45,10 @@ async function createApp() {
   const rootPath = path.join(__dirname, '../../../../');
   const umdPath = '/umd.js';
 
-  let index = await fse.readFile(path.join(rootPath, 'examples/cdn/index.html'), 'utf8');
+  let index = await fse.readFile(
+    path.join(rootPath, 'examples/material-via-cdn/index.html'),
+    'utf8',
+  );
   index = index.replace(
     'https://unpkg.com/@mui/material@latest/umd/material-ui.development.js',
     umdPath,