diff --git a/docs/data/base/getting-started/quickstart/quickstart.md b/docs/data/base/getting-started/quickstart/quickstart.md
index 9ffbd4d16ded6d..12d61fcbe678b3 100644
--- a/docs/data/base/getting-started/quickstart/quickstart.md
+++ b/docs/data/base/getting-started/quickstart/quickstart.md
@@ -22,14 +22,14 @@ The `next` tag is used to download the latest <b>pre-release</b>, v6 version. Re
 npm install @mui/base@next
 ```
 
-```bash yarn
-yarn add @mui/base@next
-```
-
 ```bash pnpm
 pnpm add @mui/base@next
 ```
 
+```bash yarn
+yarn add @mui/base@next
+```
+
 </codeblock>
 
 ### Peer dependencies
diff --git a/docs/data/joy/customization/right-to-left/right-to-left.md b/docs/data/joy/customization/right-to-left/right-to-left.md
index 044dd99396c4f9..5c2090a0d7fc6b 100644
--- a/docs/data/joy/customization/right-to-left/right-to-left.md
+++ b/docs/data/joy/customization/right-to-left/right-to-left.md
@@ -68,14 +68,14 @@ Install the [`stylis-plugin-rtl`](https://github.com/styled-components/stylis-pl
 npm install stylis stylis-plugin-rtl
 ```
 
-```bash yarn
-yarn add stylis stylis-plugin-rtl
-```
-
 ```bash pnpm
 pnpm add stylis stylis-plugin-rtl
 ```
 
+```bash yarn
+yarn add stylis stylis-plugin-rtl
+```
+
 </codeblock>
 
 #### With Emotion
diff --git a/docs/data/joy/getting-started/installation/installation.md b/docs/data/joy/getting-started/installation/installation.md
index 341b00918886b7..0557c255450585 100644
--- a/docs/data/joy/getting-started/installation/installation.md
+++ b/docs/data/joy/getting-started/installation/installation.md
@@ -13,18 +13,19 @@ The `next` tag is used to download the latest <b>pre-release</b>, v6 version. Re
 <!-- #default-branch-switch -->
 
 <codeblock storageKey="package-manager">
+
 ```bash npm
 npm install @mui/joy@next @emotion/react @emotion/styled
 ```
 
-```bash yarn
-yarn add @mui/joy@next @emotion/react @emotion/styled
-```
-
 ```bash pnpm
 pnpm add @mui/joy@next @emotion/react @emotion/styled
 ```
 
+```bash yarn
+yarn add @mui/joy@next @emotion/react @emotion/styled
+```
+
 </codeblock>
 
 ### Peer dependencies
@@ -51,18 +52,19 @@ Add it to your project via [Fontsource](https://fontsource.org/), or with the Go
 Run one of the following commands to add Inter through Fontsource to your Joy UI project:
 
 <codeblock storageKey="package-manager">
+
 ```bash npm
 npm install @fontsource/inter
 ```
 
-```bash yarn
-yarn add @fontsource/inter
-```
-
 ```bash pnpm
 pnpm add @fontsource/inter
 ```
 
+```bash yarn
+yarn add @fontsource/inter
+```
+
 </codeblock>
 
 Then you can import it in your entry point like this:
diff --git a/docs/data/material/components/about-the-lab/about-the-lab.md b/docs/data/material/components/about-the-lab/about-the-lab.md
index c1e8e3bc707a37..4aaee4fc3131cc 100644
--- a/docs/data/material/components/about-the-lab/about-the-lab.md
+++ b/docs/data/material/components/about-the-lab/about-the-lab.md
@@ -31,14 +31,14 @@ The `next` tag is used to download the latest <b>pre-release</b>, v6 version. Re
 npm install @mui/lab@next @mui/material@next
 ```
 
-```bash yarn
-yarn add @mui/lab@next @mui/material@next
-```
-
 ```bash pnpm
 pnpm add @mui/lab@next @mui/material@next
 ```
 
+```bash yarn
+yarn add @mui/lab@next @mui/material@next
+```
+
 </codeblock>
 
 Note that the lab has a peer dependency on the Material UI components.
diff --git a/docs/data/material/components/icons/icons.md b/docs/data/material/components/icons/icons.md
index ed689aedbde926..15b2b7f5868399 100644
--- a/docs/data/material/components/icons/icons.md
+++ b/docs/data/material/components/icons/icons.md
@@ -37,14 +37,14 @@ The `next` tag is used to download the latest <b>pre-release</b>, v6 version. Re
 npm install @mui/icons-material@next
 ```
 
-```bash yarn
-yarn add @mui/icons-material@next
-```
-
 ```bash pnpm
 pnpm add @mui/icons-material@next
 ```
 
+```bash yarn
+yarn add @mui/icons-material@next
+```
+
 </codeblock>
 
 These components use the Material UI `SvgIcon` component to render the SVG path for each icon, and so have a peer-dependency on `@mui/material`.
diff --git a/docs/data/material/components/material-icons/material-icons.md b/docs/data/material/components/material-icons/material-icons.md
index 192cd5b8277a02..d5a6e5e0b7d5e1 100644
--- a/docs/data/material/components/material-icons/material-icons.md
+++ b/docs/data/material/components/material-icons/material-icons.md
@@ -30,14 +30,14 @@ The `next` tag is used to download the latest <b>pre-release</b>, v6 version. Re
 npm install @mui/icons-material@next @mui/material@next @emotion/styled @emotion/react
 ```
 
-```bash yarn
-yarn add @mui/icons-material@next @mui/material@next @emotion/styled @emotion/react
-```
-
 ```bash pnpm
 pnpm add @mui/icons-material@next @mui/material@next @emotion/styled @emotion/react
 ```
 
+```bash yarn
+yarn add @mui/icons-material@next @mui/material@next @emotion/styled @emotion/react
+```
+
 </codeblock>
 
 See the [Installation](/material-ui/getting-started/installation/) page for additional docs about how to make sure everything is set up correctly.
diff --git a/docs/data/material/components/typography/typography.md b/docs/data/material/components/typography/typography.md
index 5e55cea5e7749e..3701fbd5a94a31 100644
--- a/docs/data/material/components/typography/typography.md
+++ b/docs/data/material/components/typography/typography.md
@@ -24,14 +24,14 @@ Add it to your project via Fontsource, or with the Google Fonts CDN.
 npm install @fontsource/roboto
 ```
 
-```bash yarn
-yarn add @fontsource/roboto
-```
-
 ```bash pnpm
 pnpm add @fontsource/roboto
 ```
 
+```bash yarn
+yarn add @fontsource/roboto
+```
+
 </codeblock>
 
 Then you can import it in your entry point like this:
diff --git a/docs/data/material/customization/right-to-left/right-to-left.md b/docs/data/material/customization/right-to-left/right-to-left.md
index e0843a8866c38c..1b78383c2171ac 100644
--- a/docs/data/material/customization/right-to-left/right-to-left.md
+++ b/docs/data/material/customization/right-to-left/right-to-left.md
@@ -68,14 +68,14 @@ Install the [`stylis-plugin-rtl`](https://github.com/styled-components/stylis-pl
 npm install stylis stylis-plugin-rtl
 ```
 
-```bash yarn
-yarn add stylis stylis-plugin-rtl
-```
-
 ```bash pnpm
 pnpm add stylis stylis-plugin-rtl
 ```
 
+```bash yarn
+yarn add stylis stylis-plugin-rtl
+```
+
 </codeblock>
 
 #### With Emotion
diff --git a/docs/data/material/getting-started/installation/installation.md b/docs/data/material/getting-started/installation/installation.md
index 6c342b75c5313d..7d3c3c6fe891a4 100644
--- a/docs/data/material/getting-started/installation/installation.md
+++ b/docs/data/material/getting-started/installation/installation.md
@@ -18,14 +18,14 @@ The `next` tag is used to download the latest <b>pre-release</b>, v6 version. Re
 npm install @mui/material@next @emotion/react @emotion/styled
 ```
 
-```bash yarn
-yarn add @mui/material@next @emotion/react @emotion/styled
-```
-
 ```bash pnpm
 pnpm add @mui/material@next @emotion/react @emotion/styled
 ```
 
+```bash yarn
+yarn add @mui/material@next @emotion/react @emotion/styled
+```
+
 </codeblock>
 
 ### Peer dependencies
@@ -52,14 +52,14 @@ If you want to use [styled-components](https://styled-components.com/) instead,
 npm install @mui/material @mui/styled-engine-sc styled-components
 ```
 
-```bash yarn
-yarn add @mui/material @mui/styled-engine-sc styled-components
-```
-
 ```bash pnpm
 pnpm add @mui/material @mui/styled-engine-sc styled-components
 ```
 
+```bash yarn
+yarn add @mui/material @mui/styled-engine-sc styled-components
+```
+
 </codeblock>
 
 Next, follow the [styled-components how-to guide](/material-ui/integrations/styled-components/) to properly configure your bundler to support `@mui/styled-engine-sc`.
@@ -83,14 +83,14 @@ Add it to your project via Fontsource, or with the Google Fonts CDN.
 npm install @fontsource/roboto
 ```
 
-```bash yarn
-yarn add @fontsource/roboto
-```
-
 ```bash pnpm
 pnpm add @fontsource/roboto
 ```
 
+```bash yarn
+yarn add @fontsource/roboto
+```
+
 </codeblock>
 
 Then you can import it in your entry point like this:
@@ -130,14 +130,14 @@ You can do so with npm, or with the Google Web Fonts CDN.
 npm install @mui/icons-material
 ```
 
-```bash yarn
-yarn add @mui/icons-material
-```
-
 ```bash pnpm
 pnpm add @mui/icons-material
 ```
 
+```bash yarn
+yarn add @mui/icons-material
+```
+
 </codeblock>
 
 ### Google Web Fonts
diff --git a/docs/data/material/integrations/nextjs/nextjs.md b/docs/data/material/integrations/nextjs/nextjs.md
index 75bcafea957d70..c55601c230793a 100644
--- a/docs/data/material/integrations/nextjs/nextjs.md
+++ b/docs/data/material/integrations/nextjs/nextjs.md
@@ -23,14 +23,14 @@ The `next` tag is used to download the latest <b>pre-release</b>, v6 version. Re
 npm install @mui/material-nextjs@next @emotion/cache
 ```
 
-```bash yarn
-yarn add @mui/material-nextjs@next @emotion/cache
-```
-
 ```bash pnpm
 pnpm add @mui/material-nextjs@next @emotion/cache
 ```
 
+```bash yarn
+yarn add @mui/material-nextjs@next @emotion/cache
+```
+
 </codeblock>
 
 ### Configuration
@@ -165,14 +165,14 @@ Then, run one of the following commands to install the dependencies:
 npm install @mui/material-nextjs @emotion/cache @emotion/server
 ```
 
-```bash yarn
-yarn add @mui/material-nextjs @emotion/cache @emotion/server
-```
-
 ```bash pnpm
 pnpm add @mui/material-nextjs @emotion/cache @emotion/server
 ```
 
+```bash yarn
+yarn add @mui/material-nextjs @emotion/cache @emotion/server
+```
+
 </codeblock>
 
 ### Configuration
diff --git a/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md b/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md
index f124bc34de7682..f3dca514efd548 100644
--- a/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md
+++ b/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md
@@ -30,14 +30,14 @@ First, install the Material UI wrapper package for Pigment CSS:
 npm install @mui/material-pigment-css
 ```
 
-```bash yarn
-yarn add @mui/material-pigment-css
-```
-
 ```bash pnpm
 pnpm add @mui/material-pigment-css
 ```
 
+```bash yarn
+yarn add @mui/material-pigment-css
+```
+
 </codeblock>
 
 Then, follow the instructions based on your framework:
@@ -52,14 +52,14 @@ Install the Next.js plugin as a dev dependency:
 npm install --save-dev @pigment-css/nextjs-plugin
 ```
 
-```bash yarn
-yarn add -D @pigment-css/nextjs-plugin
-```
-
 ```bash pnpm
 pnpm add -D @pigment-css/nextjs-plugin
 ```
 
+```bash yarn
+yarn add -D @pigment-css/nextjs-plugin
+```
+
 </codeblock>
 
 Then, open Next.js config file and add the plugin:
@@ -200,14 +200,14 @@ Otherwise you're now ready to start the development server:
 npm run dev
 ```
 
-```bash yarn
-yarn dev
-```
-
 ```bash pnpm
 pnpm dev
 ```
 
+```bash yarn
+yarn dev
+```
+
 </codeblock>
 
 Open the browser and navigate to the localhost URL, you should see the app running with Pigment CSS.
diff --git a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
index a6efdaa62f5cd1..51851bac715449 100644
--- a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
+++ b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
@@ -87,14 +87,14 @@ Use the snippet below to update your project (replace the `<version>` with the o
 npm install react@<version> react-dom@<version>
 ```
 
-```bash yarn
-yarn add react@<version> react-dom@<version>
-```
-
 ```bash pnpm
 pnpm add react@<version> react-dom@<version>
 ```
 
+```bash yarn
+yarn add react@<version> react-dom@<version>
+```
+
 </codeblock>
 
 ### Minimum TypeScript version
diff --git a/docs/data/system/getting-started/installation/installation.md b/docs/data/system/getting-started/installation/installation.md
index 325db1402f6063..cd726fce05e8be 100644
--- a/docs/data/system/getting-started/installation/installation.md
+++ b/docs/data/system/getting-started/installation/installation.md
@@ -14,14 +14,14 @@ Run one of the following commands to add MUI System to your project:
 npm install @mui/system@next @emotion/react @emotion/styled
 ```
 
-```bash yarn
-yarn add @mui/system@next @emotion/react @emotion/styled
-```
-
 ```bash pnpm
 pnpm add @mui/system@next @emotion/react @emotion/styled
 ```
 
+```bash yarn
+yarn add @mui/system@next @emotion/react @emotion/styled
+```
+
 </codeblock>
 
 ### Peer dependencies
@@ -53,14 +53,14 @@ The `next` tag is used to download the latest <b>pre-release</b>, v6 version. Re
 npm install @mui/system@next @mui/styled-engine-sc@next styled-components
 ```
 
-```bash yarn
-yarn add @mui/system@next @mui/styled-engine-sc@next styled-components
-```
-
 ```bash pnpm
 pnpm add @mui/system@next @mui/styled-engine-sc@next styled-components
 ```
 
+```bash yarn
+yarn add @mui/system@next @mui/styled-engine-sc@next styled-components
+```
+
 </codeblock>
 
 :::error
diff --git a/docs/pages/blog/introducing-base-ui.md b/docs/pages/blog/introducing-base-ui.md
index 4846ce5df26df8..cbe2c19a147b39 100644
--- a/docs/pages/blog/introducing-base-ui.md
+++ b/docs/pages/blog/introducing-base-ui.md
@@ -104,14 +104,14 @@ Give Base UI a try today by running one of the following commands:
 npm install @mui/base
 ```
 
-```bash yarn
-yarn add @mui/base
-```
-
 ```bash pnpm
 pnpm add @mui/base
 ```
 
+```bash yarn
+yarn add @mui/base
+```
+
 </codeblock>
 
 Check out [the docs](/base-ui/getting-started/), play with the components, and be sure to let us know what you think!
diff --git a/docs/pages/experiments/docs/codeblock.md b/docs/pages/experiments/docs/codeblock.md
index 66da0cdfec1b14..96ff1b5c7e0074 100644
--- a/docs/pages/experiments/docs/codeblock.md
+++ b/docs/pages/experiments/docs/codeblock.md
@@ -13,13 +13,13 @@ npm install @mui/material @emotion/react @emotion/styled
 # `@emotion/react` and `@emotion/styled` are peer dependencies
 ```
 
-```bash yarn
-yarn add @mui/material @emotion/react @emotion/styled
+```bash pnpm
+pnpm add @mui/material @emotion/react @emotion/styled
 # `@emotion/react` and `@emotion/styled` are peer dependencies
 ```
 
-```bash pnpm
-pnpm add @mui/material @emotion/react @emotion/styled
+```bash yarn
+yarn add @mui/material @emotion/react @emotion/styled
 # `@emotion/react` and `@emotion/styled` are peer dependencies
 ```