diff --git a/docs/1.getting-started/11.testing.md b/docs/1.getting-started/11.testing.md
index cfa5ba9103..aa5df5c718 100644
--- a/docs/1.getting-started/11.testing.md
+++ b/docs/1.getting-started/11.testing.md
@@ -22,13 +22,13 @@ In order to allow you to manage your other testing dependencies, `@nuxt/test-uti
 - you can choose between `vitest`, `cucumber`, `jest` and `playwright` for end-to-end test runners
 - `playwright-core` is only required if you wish to use the built-in browser testing utilities (and are not using `@playwright/test` as your test runner)
 
-::code-group
-```bash [yarn]
-yarn add --dev @nuxt/test-utils vitest @vue/test-utils happy-dom playwright-core
-```
+::package-managers
 ```bash [npm]
 npm i --save-dev @nuxt/test-utils vitest @vue/test-utils happy-dom playwright-core
 ```
+```bash [yarn]
+yarn add --dev @nuxt/test-utils vitest @vue/test-utils happy-dom playwright-core
+```
 ```bash [pnpm]
 pnpm add -D @nuxt/test-utils vitest @vue/test-utils happy-dom playwright-core
 ```
@@ -421,13 +421,13 @@ If you prefer to use `@vue/test-utils` on its own for unit testing in Nuxt, and
 
 1. Install the needed dependencies
 
-   ::code-group
-   ```bash [yarn]
-   yarn add --dev vitest @vue/test-utils happy-dom @vitejs/plugin-vue
-   ```
+   ::package-managers
    ```bash [npm]
    npm i --save-dev vitest @vue/test-utils happy-dom @vitejs/plugin-vue
    ```
+   ```bash [yarn]
+   yarn add --dev vitest @vue/test-utils happy-dom @vitejs/plugin-vue
+   ```
    ```bash [pnpm]
    pnpm add -D vitest @vue/test-utils happy-dom @vitejs/plugin-vue
    ```
@@ -487,13 +487,13 @@ If you prefer to use `@vue/test-utils` on its own for unit testing in Nuxt, and
 
 6. Run vitest command
 
-   ::code-group
-   ```bash [yarn]
-   yarn test
-   ```
+   ::package-managers
    ```bash [npm]
    npm run test
    ```
+   ```bash [yarn]
+   yarn test
+   ```
    ```bash [pnpm]
    pnpm run test
    ```
@@ -658,13 +658,13 @@ const page = await createPage('/page')
 
 We also provide first-class support for testing Nuxt within [the Playwright test runner](https://playwright.dev/docs/intro).
 
-::code-group
-```bash [yarn]
-yarn add --dev @playwright/test @nuxt/test-utils
-```
+::package-managers
 ```bash [npm]
 npm i --save-dev @playwright/test @nuxt/test-utils
 ```
+```bash [yarn]
+yarn add --dev @playwright/test @nuxt/test-utils
+```
 ```bash [pnpm]
 pnpm add -D @playwright/test @nuxt/test-utils
 ```
diff --git a/docs/1.getting-started/12.upgrade.md b/docs/1.getting-started/12.upgrade.md
index 7c34d17eec..096aa164a6 100644
--- a/docs/1.getting-started/12.upgrade.md
+++ b/docs/1.getting-started/12.upgrade.md
@@ -11,7 +11,7 @@ navigation.icon: i-ph-arrow-circle-up-duotone
 
 To upgrade Nuxt to the [latest release](https://github.com/nuxt/nuxt/releases), use the `nuxi upgrade` command.
 
-::code-group
+::package-managers
 
 ```bash [npm]
 npx nuxi upgrade
diff --git a/docs/1.getting-started/2.installation.md b/docs/1.getting-started/2.installation.md
index aa5c451415..42bba1705b 100644
--- a/docs/1.getting-started/2.installation.md
+++ b/docs/1.getting-started/2.installation.md
@@ -35,7 +35,7 @@ Or follow the steps below to set up a new Nuxt project on your computer.
 
 Open a terminal (if you're using [Visual Studio Code](https://code.visualstudio.com), you can open an [integrated terminal](https://code.visualstudio.com/docs/editor/integrated-terminal)) and use the following command to create a new starter project:
 
-::code-group
+::package-managers
 
 ```bash [npm]
 npx nuxi@latest init <project-name>
@@ -75,16 +75,16 @@ cd <project-name>
 
 Now you'll be able to start your Nuxt app in development mode:
 
-::code-group
-
-```bash [yarn]
-yarn dev --open
-```
+::package-managers
 
 ```bash [npm]
 npm run dev -- -o
 ```
 
+```bash [yarn]
+yarn dev --open
+```
+
 ```bash [pnpm]
 pnpm dev -o
 ```
diff --git a/docs/1.getting-started/4.styling.md b/docs/1.getting-started/4.styling.md
index 4df9322486..11244f3fdb 100644
--- a/docs/1.getting-started/4.styling.md
+++ b/docs/1.getting-started/4.styling.md
@@ -77,7 +77,7 @@ h1 {
 
 You can also reference stylesheets that are distributed through npm. Let's use the popular `animate.css` library as an example.
 
-::code-group
+::package-managers
 
 ```bash [npm]
 npm install animate.css
diff --git a/docs/1.getting-started/9.prerendering.md b/docs/1.getting-started/9.prerendering.md
index 31f1f7311f..18e82efdf5 100644
--- a/docs/1.getting-started/9.prerendering.md
+++ b/docs/1.getting-started/9.prerendering.md
@@ -14,7 +14,7 @@ Use the [`nuxi generate` command](/docs/api/commands/generate) to build and pre-
 
 This will build your site, stand up a nuxt instance, and, by default, prerender the root page `/` along with any of your site's pages it links to, any of your site's pages they link to, and so on.
 
-::code-group
+::package-managers
 
 ```bash [npm]
 npx nuxi generate
diff --git a/docs/2.guide/1.concepts/8.typescript.md b/docs/2.guide/1.concepts/8.typescript.md
index d00c9d1ce6..31d247b7e8 100644
--- a/docs/2.guide/1.concepts/8.typescript.md
+++ b/docs/2.guide/1.concepts/8.typescript.md
@@ -9,16 +9,16 @@ By default, Nuxt doesn't check types when you run [`nuxi dev`](/docs/api/command
 
 To enable type-checking at build or development time, install `vue-tsc` and `typescript` as development dependency:
 
-::code-group
-
-  ```bash [yarn]
-  yarn add --dev vue-tsc typescript
-  ```
+::package-managers
 
   ```bash [npm]
   npm install --save-dev vue-tsc typescript
   ```
 
+  ```bash [yarn]
+  yarn add --dev vue-tsc typescript
+  ```
+
   ```bash [pnpm]
   pnpm add -D vue-tsc typescript
   ```
diff --git a/docs/2.guide/2.directory-structure/1.plugins.md b/docs/2.guide/2.directory-structure/1.plugins.md
index a30be3eac6..d76acdade7 100644
--- a/docs/2.guide/2.directory-structure/1.plugins.md
+++ b/docs/2.guide/2.directory-structure/1.plugins.md
@@ -246,13 +246,13 @@ If you want to use Vue plugins, like [vue-gtag](https://github.com/MatteoGabriel
 
 First, install the Vue plugin dependency:
 
-::code-group
-```bash [yarn]
-yarn add --dev vue-gtag-next
-```
+::package-managers
 ```bash [npm]
 npm install --save-dev vue-gtag-next
 ```
+```bash [yarn]
+yarn add --dev vue-gtag-next
+```
 ```bash [pnpm]
 pnpm add -D vue-gtag-next
 ```
diff --git a/docs/2.guide/3.going-further/3.modules.md b/docs/2.guide/3.going-further/3.modules.md
index 2094748e1c..a78401f01a 100644
--- a/docs/2.guide/3.going-further/3.modules.md
+++ b/docs/2.guide/3.going-further/3.modules.md
@@ -13,7 +13,7 @@ With modules, you can encapsulate, properly test, and share custom solutions as
 
 We recommend you get started with Nuxt Modules using our [starter template](https://github.com/nuxt/starter/tree/module):
 
-::code-group
+::package-managers
 
 ```bash [npm]
 npx nuxi init -t module my-module
diff --git a/docs/2.guide/4.recipes/2.vite-plugin.md b/docs/2.guide/4.recipes/2.vite-plugin.md
index 6a9b1e8a28..c74efc7610 100644
--- a/docs/2.guide/4.recipes/2.vite-plugin.md
+++ b/docs/2.guide/4.recipes/2.vite-plugin.md
@@ -8,7 +8,7 @@ While Nuxt modules offer extensive functionality, sometimes a specific Vite plug
 
 First, we need to install the Vite plugin, for our example, we'll use `@rollup/plugin-yaml`:
 
-::code-group
+::package-managers
 
   ```bash [npm]
   npm install @rollup/plugin-yaml
diff --git a/docs/6.bridge/1.overview.md b/docs/6.bridge/1.overview.md
index 8f3a018b24..e37a64a8af 100644
--- a/docs/6.bridge/1.overview.md
+++ b/docs/6.bridge/1.overview.md
@@ -28,16 +28,15 @@ Make sure your dev server (`nuxt dev`) isn't running, remove any package lock fi
 
 Then, reinstall your dependencies:
 
-::code-group
-
-```bash [yarn]
-yarn install
-```
+::package-managers
 
 ```bash [npm]
 npm install
 ```
 
+```bash [yarn]
+yarn install
+```
 ::
 
 ::note
@@ -48,16 +47,16 @@ Once the installation is complete, make sure both development and production bui
 
 Install `@nuxt/bridge` and `nuxi` as development dependencies:
 
-::code-group
-
-```bash [Yarn]
-yarn add --dev @nuxt/bridge nuxi
-```
+::package-managers
 
 ```bash [npm]
 npm install -D @nuxt/bridge nuxi
 ```
 
+```bash [yarn]
+yarn add --dev @nuxt/bridge nuxi
+```
+
 ::
 
 ### Update `nuxt.config`
diff --git a/docs/6.bridge/8.nitro.md b/docs/6.bridge/8.nitro.md
index 920b37374a..664ab52427 100644
--- a/docs/6.bridge/8.nitro.md
+++ b/docs/6.bridge/8.nitro.md
@@ -27,16 +27,16 @@ You will also need to update your scripts within your `package.json` to reflect
 
 Install `nuxi` as a development dependency:
 
-::code-group
-
-```bash [yarn]
-yarn add --dev nuxi
-```
+::package-managers
 
 ```bash [npm]
 npm install -D nuxi
 ```
 
+```bash [yarn]
+yarn add --dev nuxi
+```
+
 ::
 
 ### Nuxi