diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml
index ddd4feec2be..e00f7ba81a8 100644
--- a/.github/workflows/CI.yml
+++ b/.github/workflows/CI.yml
@@ -29,6 +29,8 @@ jobs:
       run: npm run lint
     - name: Test
       run: npm run test
+    - name: 🧩 Typecheck
+      run: npm run typecheck
     - name: 🔤 Spell Check
       run: npm run spellcheck
     - uses: ./.github/workflows/actions/check-translations
diff --git a/docs/angular/add-to-existing.md b/docs/angular/add-to-existing.mdx
similarity index 92%
rename from docs/angular/add-to-existing.md
rename to docs/angular/add-to-existing.mdx
index 8a551abfd4e..bf2ab3d2ef1 100644
--- a/docs/angular/add-to-existing.md
+++ b/docs/angular/add-to-existing.mdx
@@ -14,7 +14,7 @@ import DocsCards from '@components/global/DocsCards';
   />
 </head>
 
-This guide covers how to add Ionic Angular to an existing Angular project. If you're looking to start a new project from scratch, check out the [Ionic Angular Quickstart](/docs/angular/quickstart.md) guide. For an overview of how Ionic Angular works with Angular, including version support and tooling, check out the [Ionic Angular Overview](/docs/angular/overview.md).
+This guide covers how to add Ionic Angular to an existing Angular project. If you're looking to start a new project from scratch, check out the [Ionic Angular Quickstart](/docs/angular/quickstart.mdx) guide. For an overview of how Ionic Angular works with Angular, including version support and tooling, check out the [Ionic Angular Overview](/docs/angular/overview.mdx).
 
 :::tip
 
@@ -76,7 +76,7 @@ Replace the existing `styles` array in `angular.json` with the following:
 
 :::info
 
-While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.md).
+While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.mdx).
 
 :::
 
@@ -96,7 +96,7 @@ export const appConfig: ApplicationConfig = {
 };
 ```
 
-This reflects the Angular 21 and 22 scaffold, which is zoneless by default. If your existing app is on Angular 18 through 20, it still has `provideZoneChangeDetection({ eventCoalescing: true })`; keep that provider and add `provideIonicAngular({})` alongside it. Refer to [Zoneless Change Detection](/docs/angular/zoneless.md) for details.
+This reflects the Angular 21 and 22 scaffold, which is zoneless by default. If your existing app is on Angular 18 through 20, it still has `provideZoneChangeDetection({ eventCoalescing: true })`; keep that provider and add `provideIonicAngular({})` alongside it. Refer to [Zoneless Change Detection](/docs/angular/zoneless.mdx) for details.
 
 ## Using Individual Components
 
@@ -123,7 +123,7 @@ import { IonButton, IonDatetime } from '@ionic/angular';
 export class App {}
 ```
 
-Visit the [components](/docs/components.md) page for all of the available Ionic components.
+Visit the [components](/docs/components.mdx) page for all of the available Ionic components.
 
 ## Using Ionic Pages
 
@@ -172,7 +172,7 @@ Replace the existing `styles` array in `angular.json` with the following:
 ]
 ```
 
-These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.md) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.md).
+These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.mdx) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.mdx).
 
 #### 2. Set up Theming
 
@@ -191,7 +191,7 @@ Create a `src/theme/variables.css` file with the following content:
 @import '@ionic/angular/css/palettes/dark.system.css';
 ```
 
-This file enables [dark mode support](/docs/theming/dark-mode.md) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables.
+This file enables [dark mode support](/docs/theming/dark-mode.mdx) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables.
 
 #### 3. Update the App Component
 
diff --git a/docs/angular/build-options.md b/docs/angular/build-options.mdx
similarity index 100%
rename from docs/angular/build-options.md
rename to docs/angular/build-options.mdx
diff --git a/docs/angular/injection-tokens.md b/docs/angular/injection-tokens.mdx
similarity index 100%
rename from docs/angular/injection-tokens.md
rename to docs/angular/injection-tokens.mdx
diff --git a/docs/angular/lifecycle.md b/docs/angular/lifecycle.mdx
similarity index 100%
rename from docs/angular/lifecycle.md
rename to docs/angular/lifecycle.mdx
diff --git a/docs/angular/navigation.md b/docs/angular/navigation.mdx
similarity index 99%
rename from docs/angular/navigation.md
rename to docs/angular/navigation.mdx
index 1c1fba26650..4c35c726a7a 100644
--- a/docs/angular/navigation.md
+++ b/docs/angular/navigation.mdx
@@ -197,7 +197,7 @@ export class AppRoutingModule {}
 
 :::tip
 
-If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to also import the `IonRouterLink` directive for Ionic components or the `IonRouterLinkWithHref` directive for `<a>` elements. An example of this is available in the [Ionic Angular Build Options docs](./build-options.md#migrating-from-modules-to-standalone).
+If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to also import the `IonRouterLink` directive for Ionic components or the `IonRouterLinkWithHref` directive for `<a>` elements. An example of this is available in the [Ionic Angular Build Options docs](./build-options.mdx#migrating-from-modules-to-standalone).
 
 :::
 
diff --git a/docs/angular/overlays.md b/docs/angular/overlays.mdx
similarity index 100%
rename from docs/angular/overlays.md
rename to docs/angular/overlays.mdx
diff --git a/docs/angular/overview.md b/docs/angular/overview.mdx
similarity index 100%
rename from docs/angular/overview.md
rename to docs/angular/overview.mdx
diff --git a/docs/angular/performance.md b/docs/angular/performance.mdx
similarity index 100%
rename from docs/angular/performance.md
rename to docs/angular/performance.mdx
diff --git a/docs/angular/platform.md b/docs/angular/platform.mdx
similarity index 100%
rename from docs/angular/platform.md
rename to docs/angular/platform.mdx
diff --git a/docs/angular/pwa.md b/docs/angular/pwa.mdx
similarity index 100%
rename from docs/angular/pwa.md
rename to docs/angular/pwa.mdx
diff --git a/versioned_docs/version-v9/angular/quickstart.md b/docs/angular/quickstart.mdx
similarity index 94%
rename from versioned_docs/version-v9/angular/quickstart.md
rename to docs/angular/quickstart.mdx
index a060df0e171..4ba89d69358 100644
--- a/versioned_docs/version-v9/angular/quickstart.md
+++ b/docs/angular/quickstart.mdx
@@ -174,17 +174,17 @@ And the template, in the `home.page.html` file, uses those components:
 </ion-content>
 ```
 
-This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
+This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.mdx#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
 :::tip[Learn More]
 
-For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
+For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.mdx), [Toolbar](/docs/api/toolbar.mdx), [Title](/docs/api/title.mdx), and [Content](/docs/api/content.mdx) documentation.
 
 :::
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.md) at the end of the `ion-content`:
+You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.mdx) at the end of the `ion-content`:
 
 ```html title="src/app/home/home.page.html"
 <ion-content>
@@ -215,7 +215,7 @@ ionic generate page new
 
 A route will be automatically added to `app.routes.ts`.
 
-In `new.page.html`, you can add a [Back Button](/docs/api/back-button.md) to the [Toolbar](/docs/api/toolbar.md):
+In `new.page.html`, you can add a [Back Button](/docs/api/back-button.mdx) to the [Toolbar](/docs/api/toolbar.mdx):
 
 ```html title="src/app/new/new.page.html"
 <ion-header [translucent]="true">
@@ -262,7 +262,7 @@ import { RouterLink } from '@angular/router';
 
 :::info
 
-Navigating can also be performed using Angular's Router service. Refer to the [Angular Navigation documentation](/docs/angular/navigation.md#navigating-to-different-routes) for more information.
+Navigating can also be performed using Angular's Router service. Refer to the [Angular Navigation documentation](/docs/angular/navigation.mdx#navigating-to-different-routes) for more information.
 
 :::
 
@@ -307,7 +307,7 @@ export class NewPage implements OnInit {
 
 Alternatively, you can register icons in `app.component.ts` to use them throughout your app.
 
-For more information, refer to the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
+For more information, refer to the [Icon documentation](/docs/api/icon.mdx) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
 ## Call Component Methods
 
@@ -393,7 +393,7 @@ To call methods on Ionic components:
 1. Create a `ViewChild` reference for the component
 2. Call the method directly on the component instance
 
-You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation.
+You can find available methods for each component in the [Methods](/docs/api/content.mdx#methods) section of their API documentation.
 
 ## Run on a Device
 
diff --git a/docs/angular/slides.md b/docs/angular/slides.mdx
similarity index 100%
rename from docs/angular/slides.md
rename to docs/angular/slides.mdx
diff --git a/docs/angular/storage.md b/docs/angular/storage.mdx
similarity index 100%
rename from docs/angular/storage.md
rename to docs/angular/storage.mdx
diff --git a/docs/angular/testing.md b/docs/angular/testing.mdx
similarity index 100%
rename from docs/angular/testing.md
rename to docs/angular/testing.mdx
diff --git a/docs/angular/virtual-scroll.md b/docs/angular/virtual-scroll.mdx
similarity index 100%
rename from docs/angular/virtual-scroll.md
rename to docs/angular/virtual-scroll.mdx
diff --git a/versioned_docs/version-v9/angular/your-first-app.md b/docs/angular/your-first-app.mdx
similarity index 95%
rename from versioned_docs/version-v9/angular/your-first-app.md
rename to docs/angular/your-first-app.mdx
index e59d85e9b69..a1e5363b11b 100644
--- a/versioned_docs/version-v9/angular/your-first-app.md
+++ b/docs/angular/your-first-app.mdx
@@ -26,7 +26,7 @@ Here’s the finished app running on all 3 platforms:
 
 :::note
 
-Looking for the previous version of this guide that covered Ionic 4 and Cordova? Refer to the [Ionic 4 and Cordova guide](../developer-resources/guides/first-app-v4/intro.md).
+Looking for the previous version of this guide that covered Ionic 4 and Cordova? Refer to the [Ionic 4 and Cordova guide](../developer-resources/guides/first-app-v4/intro.mdx).
 
 :::
 
@@ -36,7 +36,7 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
 
 Highlights include:
 
-- One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.md).
+- One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.mdx).
 - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
 - Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs.
 
@@ -70,7 +70,7 @@ npm install -g @ionic/cli native-run cordova-res
 
 The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
 
-Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information.
 
 :::
 
@@ -174,7 +174,7 @@ Open `/src/app/tab2/tab2.page.html`. It contains:
 </ion-content>
 ```
 
-`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.md#collapsible-large-titles) support). Rename both `ion-title` elements to:
+`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.mdx#collapsible-large-titles) support). Rename both `ion-title` elements to:
 
 ```html
 <ion-header [translucent]="true">
@@ -196,7 +196,7 @@ Open `/src/app/tab2/tab2.page.html`. It contains:
 </ion-content>
 ```
 
-We put the visual aspects of our app into `<ion-content>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.md) (FAB) to the bottom of the page and set the camera image as the icon.
+We put the visual aspects of our app into `<ion-content>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.mdx) (FAB) to the bottom of the page and set the camera image as the icon.
 
 ```html
 <ion-header [translucent]="true">
diff --git a/versioned_docs/version-v9/angular/your-first-app/2-taking-photos.md b/docs/angular/your-first-app/2-taking-photos.mdx
similarity index 95%
rename from versioned_docs/version-v9/angular/your-first-app/2-taking-photos.md
rename to docs/angular/your-first-app/2-taking-photos.mdx
index 3ce57cbd0b3..ee52853881c 100644
--- a/versioned_docs/version-v9/angular/your-first-app/2-taking-photos.md
+++ b/docs/angular/your-first-app/2-taking-photos.mdx
@@ -231,7 +231,7 @@ export interface UserPhoto {
 }
 ```
 
-Next, switch to `tab2.page.html` to display the images. We'll add a [Grid component](../../api/grid.md) so the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `PhotoService`'s `photos` signal with the built-in [`@for`](https://angular.dev/guide/templates/control-flow#for-block-repeaters) block - calling `photoService.photos()` reads the signal's current value. For each item, add an `<img>` element and set its `src` property to the photo's path.
+Next, switch to `tab2.page.html` to display the images. We'll add a [Grid component](../../api/grid.mdx) so the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `PhotoService`'s `photos` signal with the built-in [`@for`](https://angular.dev/guide/templates/control-flow#for-block-repeaters) block - calling `photoService.photos()` reads the signal's current value. For each item, add an `<img>` element and set its `src` property to the photo's path.
 
 ```html
 <ion-header [translucent]="true">
diff --git a/docs/angular/your-first-app/3-saving-photos.md b/docs/angular/your-first-app/3-saving-photos.mdx
similarity index 100%
rename from docs/angular/your-first-app/3-saving-photos.md
rename to docs/angular/your-first-app/3-saving-photos.mdx
diff --git a/docs/angular/your-first-app/4-loading-photos.md b/docs/angular/your-first-app/4-loading-photos.mdx
similarity index 100%
rename from docs/angular/your-first-app/4-loading-photos.md
rename to docs/angular/your-first-app/4-loading-photos.mdx
diff --git a/docs/angular/your-first-app/5-adding-mobile.md b/docs/angular/your-first-app/5-adding-mobile.mdx
similarity index 95%
rename from docs/angular/your-first-app/5-adding-mobile.md
rename to docs/angular/your-first-app/5-adding-mobile.mdx
index 2ac9768a4b8..b3736d50de6 100644
--- a/docs/angular/your-first-app/5-adding-mobile.md
+++ b/docs/angular/your-first-app/5-adding-mobile.mdx
@@ -17,7 +17,7 @@ Our photo gallery app won’t be complete until it runs on iOS, Android, and the
 
 Let’s start with making some small code changes - then our app will “just work” when we deploy it to a device.
 
-Import the Ionic [Platform API](../platform.md) into `photo.service.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile).
+Import the Ionic [Platform API](../platform.mdx) into `photo.service.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile).
 
 Add `Platform` to the imports at the top of the file and a new property `platform` to the `PhotoService` class. We'll also need to update the constructor to set the user's platform.
 
@@ -85,7 +85,7 @@ private async savePicture(photo: Photo) {
 }
 ```
 
-When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details on the File Protocol](../../core-concepts/webview.md#file-protocol)). To use this method, we'll need to import Capacitor into `photo.service.ts`.
+When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details on the File Protocol](../../core-concepts/webview.mdx#file-protocol)). To use this method, we'll need to import Capacitor into `photo.service.ts`.
 
 ```ts
 import { Injectable, inject, signal } from '@angular/core';
diff --git a/docs/angular/your-first-app/6-deploying-mobile.md b/docs/angular/your-first-app/6-deploying-mobile.mdx
similarity index 100%
rename from docs/angular/your-first-app/6-deploying-mobile.md
rename to docs/angular/your-first-app/6-deploying-mobile.mdx
diff --git a/versioned_docs/version-v9/angular/your-first-app/7-live-reload.md b/docs/angular/your-first-app/7-live-reload.mdx
similarity index 96%
rename from versioned_docs/version-v9/angular/your-first-app/7-live-reload.md
rename to docs/angular/your-first-app/7-live-reload.mdx
index 2d3a9462cf8..c300e4730ac 100644
--- a/versioned_docs/version-v9/angular/your-first-app/7-live-reload.md
+++ b/docs/angular/your-first-app/7-live-reload.mdx
@@ -13,7 +13,7 @@ sidebar_label: Live Reload
 
 So far, we’ve learned how easy it is to develop a cross-platform app that works everywhere. The development experience is pretty quick, but what if I told you there was a way to go faster?
 
-We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.md) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
+We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.mdx) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
 
 ## Live Reload
 
@@ -156,7 +156,7 @@ export class Tab2Page implements OnInit {
 }
 ```
 
-Open `tab2.page.html` and wrap each image in a `<button>` element with a click handler. When the app user taps on a photo in our gallery, we'll display an [Action Sheet](../../api/action-sheet.md) dialog with the option to either delete the selected photo or cancel (close) the dialog.
+Open `tab2.page.html` and wrap each image in a `<button>` element with a click handler. When the app user taps on a photo in our gallery, we'll display an [Action Sheet](../../api/action-sheet.mdx) dialog with the option to either delete the selected photo or cancel (close) the dialog.
 
 ```html
 <ion-header [translucent]="true">
diff --git a/docs/angular/your-first-app/8-distribute.md b/docs/angular/your-first-app/8-distribute.mdx
similarity index 97%
rename from docs/angular/your-first-app/8-distribute.md
rename to docs/angular/your-first-app/8-distribute.mdx
index 6c221cc4b42..f029858cb9b 100644
--- a/docs/angular/your-first-app/8-distribute.md
+++ b/docs/angular/your-first-app/8-distribute.mdx
@@ -102,6 +102,6 @@ For access to the ability to create a Native Configuration, you will need to be
 
 Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to your users' devices!
 
-There are many paths to follow from here. Try adding another [Ionic UI component](../../components.md) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
+There are many paths to follow from here. Try adding another [Ionic UI component](../../components.mdx) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
 
 Happy app building! 💙
diff --git a/versioned_docs/version-v9/angular/zoneless.md b/docs/angular/zoneless.mdx
similarity index 98%
rename from versioned_docs/version-v9/angular/zoneless.md
rename to docs/angular/zoneless.mdx
index 6d13b6d6fe3..bc06e66b8ba 100644
--- a/versioned_docs/version-v9/angular/zoneless.md
+++ b/docs/angular/zoneless.mdx
@@ -28,7 +28,7 @@ You do not need to change these. Angular schedules change detection for them in
 
 :::note[Angular 22]
 
-Angular 22 also makes `OnPush` the default change detection strategy. Under `OnPush`, synchronous state set as a plain field (including in the lifecycle hooks above) no longer re-renders on its own, even though Ionic notifies Angular. Signals still update the view. For the migration path, refer to the [OnPush Change Detection section of the Ionic 9 upgrade guide](/docs/updating/9-0.md#onpush-change-detection-on-angular-22).
+Angular 22 also makes `OnPush` the default change detection strategy. Under `OnPush`, synchronous state set as a plain field (including in the lifecycle hooks above) no longer re-renders on its own, even though Ionic notifies Angular. Signals still update the view. For the migration path, refer to the [OnPush Change Detection section of the Ionic 9 upgrade guide](/docs/updating/9-0.mdx#onpush-change-detection-on-angular-22).
 
 :::
 
@@ -155,4 +155,4 @@ export class AppComponent {
 
 ## Staying on Zone.js
 
-If you are not ready to adopt zoneless change detection, you can opt back into Zone.js with `provideZoneChangeDetection()`. Refer to the [Keeping Zone.js section of the Ionic 9 upgrade guide](/docs/updating/9-0.md#keeping-zonejs) for the exact configuration.
+If you are not ready to adopt zoneless change detection, you can opt back into Zone.js with `provideZoneChangeDetection()`. Refer to the [Keeping Zone.js section of the Ionic 9 upgrade guide](/docs/updating/9-0.mdx#keeping-zonejs) for the exact configuration.
diff --git a/docs/api.md b/docs/api.mdx
similarity index 100%
rename from docs/api.md
rename to docs/api.mdx
diff --git a/docs/api/accordion-group.md b/docs/api/accordion-group.mdx
similarity index 100%
rename from docs/api/accordion-group.md
rename to docs/api/accordion-group.mdx
diff --git a/docs/api/accordion.md b/docs/api/accordion.mdx
similarity index 100%
rename from docs/api/accordion.md
rename to docs/api/accordion.mdx
diff --git a/docs/api/action-sheet.md b/docs/api/action-sheet.mdx
similarity index 100%
rename from docs/api/action-sheet.md
rename to docs/api/action-sheet.mdx
diff --git a/docs/api/alert.md b/docs/api/alert.mdx
similarity index 100%
rename from docs/api/alert.md
rename to docs/api/alert.mdx
diff --git a/docs/api/app.md b/docs/api/app.mdx
similarity index 100%
rename from docs/api/app.md
rename to docs/api/app.mdx
diff --git a/docs/api/avatar.md b/docs/api/avatar.mdx
similarity index 100%
rename from docs/api/avatar.md
rename to docs/api/avatar.mdx
diff --git a/docs/api/back-button.md b/docs/api/back-button.mdx
similarity index 100%
rename from docs/api/back-button.md
rename to docs/api/back-button.mdx
diff --git a/docs/api/backdrop.md b/docs/api/backdrop.mdx
similarity index 100%
rename from docs/api/backdrop.md
rename to docs/api/backdrop.mdx
diff --git a/docs/api/badge.md b/docs/api/badge.mdx
similarity index 100%
rename from docs/api/badge.md
rename to docs/api/badge.mdx
diff --git a/docs/api/breadcrumb.md b/docs/api/breadcrumb.mdx
similarity index 100%
rename from docs/api/breadcrumb.md
rename to docs/api/breadcrumb.mdx
diff --git a/docs/api/breadcrumbs.md b/docs/api/breadcrumbs.mdx
similarity index 100%
rename from docs/api/breadcrumbs.md
rename to docs/api/breadcrumbs.mdx
diff --git a/docs/api/button.md b/docs/api/button.mdx
similarity index 100%
rename from docs/api/button.md
rename to docs/api/button.mdx
diff --git a/docs/api/buttons.md b/docs/api/buttons.mdx
similarity index 100%
rename from docs/api/buttons.md
rename to docs/api/buttons.mdx
diff --git a/docs/api/card-content.md b/docs/api/card-content.mdx
similarity index 100%
rename from docs/api/card-content.md
rename to docs/api/card-content.mdx
diff --git a/docs/api/card-header.md b/docs/api/card-header.mdx
similarity index 100%
rename from docs/api/card-header.md
rename to docs/api/card-header.mdx
diff --git a/docs/api/card-subtitle.md b/docs/api/card-subtitle.mdx
similarity index 100%
rename from docs/api/card-subtitle.md
rename to docs/api/card-subtitle.mdx
diff --git a/docs/api/card-title.md b/docs/api/card-title.mdx
similarity index 100%
rename from docs/api/card-title.md
rename to docs/api/card-title.mdx
diff --git a/docs/api/card.md b/docs/api/card.mdx
similarity index 100%
rename from docs/api/card.md
rename to docs/api/card.mdx
diff --git a/docs/api/checkbox.md b/docs/api/checkbox.mdx
similarity index 100%
rename from docs/api/checkbox.md
rename to docs/api/checkbox.mdx
diff --git a/docs/api/chip.md b/docs/api/chip.mdx
similarity index 100%
rename from docs/api/chip.md
rename to docs/api/chip.mdx
diff --git a/docs/api/col.md b/docs/api/col.mdx
similarity index 100%
rename from docs/api/col.md
rename to docs/api/col.mdx
diff --git a/docs/api/content.md b/docs/api/content.mdx
similarity index 98%
rename from docs/api/content.md
rename to docs/api/content.mdx
index 69cbcf64cf0..0af8d57fb0d 100644
--- a/docs/api/content.md
+++ b/docs/api/content.mdx
@@ -97,7 +97,7 @@ import CSSProps from '@site/static/usage/v10/content/theming/css-properties/inde
 
 ### Safe Area Padding
 
-The content component will not automatically apply padding to any of its sides to account for the [safe area](/docs/theming/advanced#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.md#application-variables).
+The content component will not automatically apply padding to any of its sides to account for the [safe area](/docs/theming/advanced#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.mdx#application-variables).
 
 The most common use case for this is to apply padding to the top of the content to account for the status bar. This can be done by setting the `padding-top` property to the value of the `--ion-safe-area-top` variable.
 
diff --git a/docs/api/datetime-button.md b/docs/api/datetime-button.mdx
similarity index 100%
rename from docs/api/datetime-button.md
rename to docs/api/datetime-button.mdx
diff --git a/docs/api/datetime.md b/docs/api/datetime.mdx
similarity index 100%
rename from docs/api/datetime.md
rename to docs/api/datetime.mdx
diff --git a/docs/api/fab-button.md b/docs/api/fab-button.mdx
similarity index 100%
rename from docs/api/fab-button.md
rename to docs/api/fab-button.mdx
diff --git a/docs/api/fab-list.md b/docs/api/fab-list.mdx
similarity index 100%
rename from docs/api/fab-list.md
rename to docs/api/fab-list.mdx
diff --git a/docs/api/fab.md b/docs/api/fab.mdx
similarity index 100%
rename from docs/api/fab.md
rename to docs/api/fab.mdx
diff --git a/docs/api/footer.md b/docs/api/footer.mdx
similarity index 100%
rename from docs/api/footer.md
rename to docs/api/footer.mdx
diff --git a/docs/api/gallery-item.md b/docs/api/gallery-item.mdx
similarity index 80%
rename from docs/api/gallery-item.md
rename to docs/api/gallery-item.mdx
index 7df567a4194..d2c17de6da7 100644
--- a/docs/api/gallery-item.md
+++ b/docs/api/gallery-item.mdx
@@ -21,11 +21,11 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-Gallery Item is a child component of [Gallery](./gallery.md). It wraps the content for a single cell of the grid. The content can be plain text or any element, including an `img`, a `figure` with a caption, or a [Card](./card.md).
+Gallery Item is a child component of [Gallery](./gallery.mdx). It wraps the content for a single cell of the grid. The content can be plain text or any element, including an `img`, a `figure` with a caption, or a [Card](./card.mdx).
 
 Gallery Items must be placed inside a Gallery, which arranges them and applies layout-specific styling to each item, such as a square aspect ratio in the uniform layout.
 
-Refer to the [Gallery](./gallery.md) documentation for more information.
+Refer to the [Gallery](./gallery.mdx) documentation for more information.
 
 ## Properties
 
diff --git a/docs/api/gallery.md b/docs/api/gallery.mdx
similarity index 96%
rename from docs/api/gallery.md
rename to docs/api/gallery.mdx
index cc1566b1c03..3b4d420cb9c 100644
--- a/docs/api/gallery.md
+++ b/docs/api/gallery.mdx
@@ -23,7 +23,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 The Gallery arranges images, cards, and other content in a responsive grid. It supports uniform and masonry layouts, configurable column counts (fixed or breakpoint-based), and multiple masonry ordering modes.
 
-Each [Gallery Item](./gallery-item.md) is a single cell of the grid and can contain plain text or any element, such as an `img`, a `figure` with a caption, or a [Card](./card.md).
+Each [Gallery Item](./gallery-item.mdx) is a single cell of the grid and can contain plain text or any element, such as an `img`, a `figure` with a caption, or a [Card](./card.mdx).
 
 ## Basic Usage
 
diff --git a/docs/api/grid.md b/docs/api/grid.mdx
similarity index 97%
rename from docs/api/grid.md
rename to docs/api/grid.mdx
index b92fe525664..619d6e4a3ac 100644
--- a/docs/api/grid.md
+++ b/docs/api/grid.mdx
@@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-The grid is a powerful mobile-first flexbox system for building custom layouts. It is composed of three units — a grid, [row(s)](row.md) and [column(s)](col.md). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS.
+The grid is a powerful mobile-first flexbox system for building custom layouts. It is composed of three units — a grid, [row(s)](row.mdx) and [column(s)](col.mdx). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS.
 
 ## Overview
 
@@ -156,7 +156,7 @@ import VerticalAlignment from '@site/static/usage/v10/grid/vertical-alignment/in
 
 ### Horizontal Alignment
 
-All columns can be horizontally aligned inside of a row by adding different classes to the row. For a list of available classes, refer to [css utilities](/layout/css-utilities.md#flex-container-properties).
+All columns can be horizontally aligned inside of a row by adding different classes to the row. For a list of available classes, refer to [css utilities](/layout/css-utilities.mdx#flex-container-properties).
 
 import HorizontalAlignment from '@site/static/usage/v10/grid/horizontal-alignment/index.mdx';
 
diff --git a/docs/api/header.md b/docs/api/header.mdx
similarity index 100%
rename from docs/api/header.md
rename to docs/api/header.mdx
diff --git a/docs/api/icon.md b/docs/api/icon.mdx
similarity index 100%
rename from docs/api/icon.md
rename to docs/api/icon.mdx
diff --git a/docs/api/img.md b/docs/api/img.mdx
similarity index 94%
rename from docs/api/img.md
rename to docs/api/img.mdx
index 255bf0da828..cfc9ed1a1a2 100644
--- a/docs/api/img.md
+++ b/docs/api/img.mdx
@@ -23,7 +23,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 :::warning[Deprecated]
 
-`ion-img` is deprecated and will be removed in Ionic 10. Use a native `<img>` tag with [loading="lazy"](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#loading) instead. Refer to the [migration guide](../updating/9-0.md#img) for details on replacing events and styling.
+`ion-img` is deprecated and will be removed in Ionic 10. Use a native `<img>` tag with [loading="lazy"](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#loading) instead. Refer to the [migration guide](../updating/9-0.mdx#img) for details on replacing events and styling.
 
 :::
 
diff --git a/docs/api/infinite-scroll-content.md b/docs/api/infinite-scroll-content.mdx
similarity index 94%
rename from docs/api/infinite-scroll-content.md
rename to docs/api/infinite-scroll-content.mdx
index 397a2466bd5..d6cb3b804ca 100644
--- a/docs/api/infinite-scroll-content.md
+++ b/docs/api/infinite-scroll-content.mdx
@@ -13,7 +13,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 The `ion-infinite-scroll-content` component is the default child used by the `ion-infinite-scroll`. It displays an infinite scroll spinner that looks best based on the platform and changes the look depending on the infinite scroll's state. The default spinner can be changed and text can be added by setting the `loadingSpinner` and `loadingText` properties.
 
-For more information as well as usage, refer to the [Infinite Scroll Documentation](./infinite-scroll.md#infinite-scroll-content).
+For more information as well as usage, refer to the [Infinite Scroll Documentation](./infinite-scroll.mdx#infinite-scroll-content).
 
 ## Properties
 
diff --git a/docs/api/infinite-scroll.md b/docs/api/infinite-scroll.mdx
similarity index 100%
rename from docs/api/infinite-scroll.md
rename to docs/api/infinite-scroll.mdx
diff --git a/docs/api/input-otp.md b/docs/api/input-otp.mdx
similarity index 100%
rename from docs/api/input-otp.md
rename to docs/api/input-otp.mdx
diff --git a/docs/api/input-password-toggle.md b/docs/api/input-password-toggle.mdx
similarity index 100%
rename from docs/api/input-password-toggle.md
rename to docs/api/input-password-toggle.mdx
diff --git a/docs/api/input.md b/docs/api/input.mdx
similarity index 96%
rename from docs/api/input.md
rename to docs/api/input.mdx
index 6fc8a150418..1c6dd8db044 100644
--- a/docs/api/input.md
+++ b/docs/api/input.mdx
@@ -159,9 +159,9 @@ Note that this feature is considered experimental because it relies on a simulat
 
 :::note
 
-In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. Refer to the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
+In most cases, [Icon](./icon.mdx) components placed in these slots should have `aria-hidden="true"`. Refer to the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
 
-If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to.
+If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.mdx). This ensures that the content can be tabbed to.
 
 :::
 
diff --git a/docs/api/item-divider.md b/docs/api/item-divider.mdx
similarity index 100%
rename from docs/api/item-divider.md
rename to docs/api/item-divider.mdx
diff --git a/docs/api/item-group.md b/docs/api/item-group.mdx
similarity index 100%
rename from docs/api/item-group.md
rename to docs/api/item-group.mdx
diff --git a/docs/api/item-option.md b/docs/api/item-option.mdx
similarity index 100%
rename from docs/api/item-option.md
rename to docs/api/item-option.mdx
diff --git a/docs/api/item-options.md b/docs/api/item-options.mdx
similarity index 100%
rename from docs/api/item-options.md
rename to docs/api/item-options.mdx
diff --git a/docs/api/item-sliding.md b/docs/api/item-sliding.mdx
similarity index 100%
rename from docs/api/item-sliding.md
rename to docs/api/item-sliding.mdx
diff --git a/docs/api/item.md b/docs/api/item.mdx
similarity index 100%
rename from docs/api/item.md
rename to docs/api/item.mdx
diff --git a/docs/api/label.md b/docs/api/label.mdx
similarity index 88%
rename from docs/api/label.md
rename to docs/api/label.mdx
index 11e082e17bf..053a61db099 100644
--- a/docs/api/label.md
+++ b/docs/api/label.mdx
@@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="scoped" />
 
-Label is an element used primarily to add text content to [Item](./item.md) components. Label can also be used inside of form control components such as [Input](./input.md) or [Radio](./radio.md) when specifying the visible label, but it is not required.
+Label is an element used primarily to add text content to [Item](./item.mdx) components. Label can also be used inside of form control components such as [Input](./input.mdx) or [Radio](./radio.mdx) when specifying the visible label, but it is not required.
 
 The position of the label inside of an item can be inline, fixed, stacked, or floating.
 
diff --git a/docs/api/list-header.md b/docs/api/list-header.mdx
similarity index 100%
rename from docs/api/list-header.md
rename to docs/api/list-header.mdx
diff --git a/docs/api/list.md b/docs/api/list.mdx
similarity index 100%
rename from docs/api/list.md
rename to docs/api/list.mdx
diff --git a/docs/api/loading.md b/docs/api/loading.mdx
similarity index 100%
rename from docs/api/loading.md
rename to docs/api/loading.mdx
diff --git a/docs/api/menu-button.md b/docs/api/menu-button.mdx
similarity index 100%
rename from docs/api/menu-button.md
rename to docs/api/menu-button.mdx
diff --git a/docs/api/menu-toggle.md b/docs/api/menu-toggle.mdx
similarity index 100%
rename from docs/api/menu-toggle.md
rename to docs/api/menu-toggle.mdx
diff --git a/docs/api/menu.md b/docs/api/menu.mdx
similarity index 100%
rename from docs/api/menu.md
rename to docs/api/menu.mdx
diff --git a/docs/api/modal.md b/docs/api/modal.mdx
similarity index 100%
rename from docs/api/modal.md
rename to docs/api/modal.mdx
diff --git a/docs/api/nav-link.md b/docs/api/nav-link.mdx
similarity index 100%
rename from docs/api/nav-link.md
rename to docs/api/nav-link.mdx
diff --git a/docs/api/nav.md b/docs/api/nav.mdx
similarity index 100%
rename from docs/api/nav.md
rename to docs/api/nav.mdx
diff --git a/docs/api/note.md b/docs/api/note.mdx
similarity index 100%
rename from docs/api/note.md
rename to docs/api/note.mdx
diff --git a/docs/api/picker-column-option.md b/docs/api/picker-column-option.mdx
similarity index 95%
rename from docs/api/picker-column-option.md
rename to docs/api/picker-column-option.mdx
index fddc7ad641d..b973171a81d 100644
--- a/docs/api/picker-column-option.md
+++ b/docs/api/picker-column-option.mdx
@@ -18,7 +18,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-An individual column option in a picker. Visit the [`ion-picker`](./picker.md) documentation for more details.
+An individual column option in a picker. Visit the [`ion-picker`](./picker.mdx) documentation for more details.
 
 ## Properties
 
diff --git a/docs/api/picker-column.md b/docs/api/picker-column.mdx
similarity index 95%
rename from docs/api/picker-column.md
rename to docs/api/picker-column.mdx
index c11cb953be5..0c679c00dda 100644
--- a/docs/api/picker-column.md
+++ b/docs/api/picker-column.mdx
@@ -18,7 +18,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-An individual column within a picker. Visit the [`ion-picker`](./picker.md) documentation for more details.
+An individual column within a picker. Visit the [`ion-picker`](./picker.mdx) documentation for more details.
 
 ## Properties
 
diff --git a/docs/api/picker.md b/docs/api/picker.mdx
similarity index 100%
rename from docs/api/picker.md
rename to docs/api/picker.mdx
diff --git a/docs/api/popover.md b/docs/api/popover.mdx
similarity index 100%
rename from docs/api/popover.md
rename to docs/api/popover.mdx
diff --git a/docs/api/progress-bar.md b/docs/api/progress-bar.mdx
similarity index 100%
rename from docs/api/progress-bar.md
rename to docs/api/progress-bar.mdx
diff --git a/docs/api/radio-group.md b/docs/api/radio-group.mdx
similarity index 100%
rename from docs/api/radio-group.md
rename to docs/api/radio-group.mdx
diff --git a/docs/api/radio.md b/docs/api/radio.mdx
similarity index 100%
rename from docs/api/radio.md
rename to docs/api/radio.mdx
diff --git a/docs/api/range.md b/docs/api/range.mdx
similarity index 100%
rename from docs/api/range.md
rename to docs/api/range.mdx
diff --git a/docs/api/refresher-content.md b/docs/api/refresher-content.mdx
similarity index 100%
rename from docs/api/refresher-content.md
rename to docs/api/refresher-content.mdx
diff --git a/docs/api/refresher.md b/docs/api/refresher.mdx
similarity index 100%
rename from docs/api/refresher.md
rename to docs/api/refresher.mdx
diff --git a/docs/api/reorder-group.md b/docs/api/reorder-group.mdx
similarity index 100%
rename from docs/api/reorder-group.md
rename to docs/api/reorder-group.mdx
diff --git a/docs/api/reorder.md b/docs/api/reorder.mdx
similarity index 100%
rename from docs/api/reorder.md
rename to docs/api/reorder.mdx
diff --git a/docs/api/ripple-effect.md b/docs/api/ripple-effect.mdx
similarity index 100%
rename from docs/api/ripple-effect.md
rename to docs/api/ripple-effect.mdx
diff --git a/docs/api/route-redirect.md b/docs/api/route-redirect.mdx
similarity index 98%
rename from docs/api/route-redirect.md
rename to docs/api/route-redirect.mdx
index 599b2e055f0..86eb6e6fde6 100644
--- a/docs/api/route-redirect.md
+++ b/docs/api/route-redirect.mdx
@@ -23,7 +23,7 @@ A route redirect can only be used with an `ion-router` as a direct child of it.
 
 :::note
 
-Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.md) and the Angular router.
+Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.mdx) and the Angular router.
 
 :::
 
diff --git a/docs/api/route.md b/docs/api/route.mdx
similarity index 99%
rename from docs/api/route.md
rename to docs/api/route.mdx
index 37411275c67..486646190a1 100644
--- a/docs/api/route.md
+++ b/docs/api/route.mdx
@@ -26,7 +26,7 @@ The route component takes a component and renders it when the Browser URL matche
 
 :::note
 
-Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.md) and the Angular router.
+Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.mdx) and the Angular router.
 
 :::
 
diff --git a/docs/api/router-link.md b/docs/api/router-link.mdx
similarity index 100%
rename from docs/api/router-link.md
rename to docs/api/router-link.mdx
diff --git a/docs/api/router-outlet.md b/docs/api/router-outlet.mdx
similarity index 100%
rename from docs/api/router-outlet.md
rename to docs/api/router-outlet.mdx
diff --git a/docs/api/router.md b/docs/api/router.mdx
similarity index 91%
rename from docs/api/router.md
rename to docs/api/router.mdx
index d80efdce1a9..6f11c1fb83f 100644
--- a/docs/api/router.md
+++ b/docs/api/router.mdx
@@ -44,7 +44,7 @@ import BasicExample from '@site/static/usage/v10/router/basic/index.mdx';
 
 ## Using ion-nav within a Routed Page
 
-`ion-router` and [`ion-nav`](./nav.md) are separate systems. `ion-router` coordinates URL-based navigation through `ion-router-outlet`, while `ion-nav` manages a local stack that is independent of the URL. `ion-nav` does not integrate with `ion-router`: placing an `ion-nav` inside an `ion-router` does not turn it into a routed outlet, and pushing or popping views on an `ion-nav` never changes the URL.
+`ion-router` and [`ion-nav`](./nav.mdx) are separate systems. `ion-router` coordinates URL-based navigation through `ion-router-outlet`, while `ion-nav` manages a local stack that is independent of the URL. `ion-nav` does not integrate with `ion-router`: placing an `ion-nav` inside an `ion-router` does not turn it into a routed outlet, and pushing or popping views on an `ion-nav` never changes the URL.
 
 The two can still be composed. A routed page rendered by `ion-router-outlet` can host its own `ion-nav` for local, URL-less navigation within that page. In the example below, navigating to `/details` updates the URL, but stepping through the `ion-nav` inside that page does not.
 
diff --git a/docs/api/row.md b/docs/api/row.mdx
similarity index 100%
rename from docs/api/row.md
rename to docs/api/row.mdx
diff --git a/docs/api/searchbar.md b/docs/api/searchbar.mdx
similarity index 100%
rename from docs/api/searchbar.md
rename to docs/api/searchbar.mdx
diff --git a/docs/api/segment-button.md b/docs/api/segment-button.mdx
similarity index 90%
rename from docs/api/segment-button.md
rename to docs/api/segment-button.mdx
index 4beabf98273..caa303db81f 100644
--- a/docs/api/segment-button.md
+++ b/docs/api/segment-button.mdx
@@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-Segment buttons are groups of related buttons inside of a [segment](segment.md). They are displayed in a horizontal row. A segment button can be selected by default by setting the `value` of the segment to the `value` of the segment button. Only one segment button can be selected at a time.
+Segment buttons are groups of related buttons inside of a [segment](segment.mdx). They are displayed in a horizontal row. A segment button can be selected by default by setting the `value` of the segment to the `value` of the segment button. Only one segment button can be selected at a time.
 
 ## Basic Usage
 
diff --git a/docs/api/segment-content.md b/docs/api/segment-content.mdx
similarity index 87%
rename from docs/api/segment-content.md
rename to docs/api/segment-content.mdx
index 9f4953fe6c0..f017991d347 100644
--- a/docs/api/segment-content.md
+++ b/docs/api/segment-content.mdx
@@ -22,13 +22,13 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 <EncapsulationPill type="shadow" />
 
 Segment content is a wrapper element used to control the display of child elements when using swipeable segments. Segment content elements are children of a single
-[segment view](./segment-view.md) instance that is linked to a [segment](./segment.md). Refer to our [swipeable segments](./segment.md#swipeable-segments) documentation
+[segment view](./segment-view.mdx) instance that is linked to a [segment](./segment.mdx). Refer to our [swipeable segments](./segment.mdx#swipeable-segments) documentation
 for more information on how to use segment contents.
 
 ## Usage
 
 Each `ion-segment-content` needs a unique `id` attribute. This will be used to link the segment content to a segment button via the button's
-[contentId property](./segment-button.md#properties).
+[contentId property](./segment-button.mdx#properties).
 
 {/* Reuse swipeable segments playground */}
 
diff --git a/docs/api/segment-view.md b/docs/api/segment-view.mdx
similarity index 82%
rename from docs/api/segment-view.md
rename to docs/api/segment-view.mdx
index c1ee0e55135..1e97704dd62 100644
--- a/docs/api/segment-view.md
+++ b/docs/api/segment-view.mdx
@@ -21,8 +21,8 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-Segment view is a wrapper element that links a group of [segment contents](./segment-content.md) to a [segment](./segment.md) when using swipeable segments.
-Refer to our [swipeable segments](./segment.md#swipeable-segments) documentation for more information on how to use segment views.
+Segment view is a wrapper element that links a group of [segment contents](./segment-content.mdx) to a [segment](./segment.mdx) when using swipeable segments.
+Refer to our [swipeable segments](./segment.mdx#swipeable-segments) documentation for more information on how to use segment views.
 
 ## Properties
 
diff --git a/docs/api/segment.md b/docs/api/segment.mdx
similarity index 97%
rename from docs/api/segment.md
rename to docs/api/segment.mdx
index a332fde037e..1701966c0a1 100644
--- a/docs/api/segment.md
+++ b/docs/api/segment.mdx
@@ -50,7 +50,7 @@ import Toolbar from '@site/static/usage/v10/toolbar/segments/index.mdx';
 
 ## Swipeable Segments
 
-Each [segment button](./segment-button.md) can be associated with a [segment content](./segment-content.md) element that will be displayed
+Each [segment button](./segment-button.mdx) can be associated with a [segment content](./segment-content.mdx) element that will be displayed
 when the segment is active. With this approach, each segment's content can be swiped or scrolled between and the segment will be updated
 to reflect the currently visible content.
 
diff --git a/docs/api/select-option.md b/docs/api/select-option.mdx
similarity index 100%
rename from docs/api/select-option.md
rename to docs/api/select-option.mdx
diff --git a/docs/api/select.md b/docs/api/select.mdx
similarity index 91%
rename from docs/api/select.md
rename to docs/api/select.mdx
index 97e084f1a5f..703d653e7af 100644
--- a/docs/api/select.md
+++ b/docs/api/select.mdx
@@ -89,7 +89,7 @@ import MultipleSelectionExample from '@site/static/usage/v10/select/basic/multip
 
 ## Interfaces
 
-By default, select uses [ion-alert](alert.md) to open up the overlay of options in an alert. The interface can be changed to use [ion-action-sheet](action-sheet.md), [ion-popover](popover.md), or [ion-modal](modal.md) by passing `action-sheet`, `popover`, or `modal`, respectively, to the `interface` property. Read on to the other sections for the limitations of the different interfaces.
+By default, select uses [ion-alert](alert.mdx) to open up the overlay of options in an alert. The interface can be changed to use [ion-action-sheet](action-sheet.mdx), [ion-popover](popover.mdx), or [ion-modal](modal.mdx) by passing `action-sheet`, `popover`, or `modal`, respectively, to the `interface` property. Read on to the other sections for the limitations of the different interfaces.
 
 ### Alert
 
@@ -182,7 +182,7 @@ import ButtonTextExample from '@site/static/usage/v10/select/customization/butto
 
 Since select uses the alert, action sheet, popover, and modal interfaces, options can be passed to these components through the `interfaceOptions` property. This can be used to pass a custom header, subheader, css class, and more.
 
-Refer to the [ion-alert docs](alert.md), [ion-action-sheet docs](action-sheet.md), [ion-popover docs](popover.md), and [ion-modal docs](modal.md)
+Refer to the [ion-alert docs](alert.mdx), [ion-action-sheet docs](action-sheet.mdx), [ion-popover docs](popover.mdx), and [ion-modal docs](modal.mdx)
 for the properties that each interface accepts.
 
 Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
@@ -197,9 +197,9 @@ The `start` and `end` slots can be used to place icons, buttons, or prefix/suffi
 
 :::note
 
-In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. Refer to the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
+In most cases, [Icon](./icon.mdx) components placed in these slots should have `aria-hidden="true"`. Refer to the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
 
-If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to.
+If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.mdx). This ensures that the content can be tabbed to.
 
 :::
 
@@ -211,11 +211,11 @@ import StartEndSlots from '@site/static/usage/v10/select/start-end-slots/index.m
 
 :::important
 
-Rich content in select options is disabled by default. Set [`innerHTMLTemplatesEnabled`](/docs/developing/config.md#ionicconfig) to `true` in your [global Ionic config](/docs/developing/config.md#global-config). Markup inside options is treated as plain text when it is disabled. Refer to [Security](/docs/techniques/security.md) for sanitization guidance when enabling custom HTML.
+Rich content in select options is disabled by default. Set [`innerHTMLTemplatesEnabled`](/docs/developing/config.mdx#ionicconfig) to `true` in your [global Ionic config](/docs/developing/config.mdx#global-config). Markup inside options is treated as plain text when it is disabled. Refer to [Security](/docs/techniques/security.mdx) for sanitization guidance when enabling custom HTML.
 
 :::
 
-In addition to single text labels, [Select Options](./select-option.md) can include HTML rich content in the select interface. Elements added inside of an option without a named slot will go into the default slot. The `start` and `end` slots will place elements on either side of the default slot. The `description` attribute can be used for additional supporting text displayed under the label.
+In addition to single text labels, [Select Options](./select-option.mdx) can include HTML rich content in the select interface. Elements added inside of an option without a named slot will go into the default slot. The `start` and `end` slots will place elements on either side of the default slot. The `description` attribute can be used for additional supporting text displayed under the label.
 
 This is separate from [Start and End Slots](#start-and-end-slots) on `ion-select`, which decorate the closed field. The rich content options display in the interface after opening the select.
 
@@ -244,12 +244,12 @@ import StylingSelectExample from '@site/static/usage/v10/select/customization/st
 Customizing the interface dialog should be done by following the styling sections (CSS shadow parts, CSS custom properties, and slots) in
 that interface's documentation:
 
-- [Alert](alert.md#css-shadow-parts)
-- [Action Sheet](action-sheet.md#css-shadow-parts)
-- [Popover](popover.md#css-shadow-parts)
-- [Modal](modal.md#css-shadow-parts)
+- [Alert](alert.mdx#css-shadow-parts)
+- [Action Sheet](action-sheet.mdx#css-shadow-parts)
+- [Popover](popover.mdx#css-shadow-parts)
+- [Modal](modal.mdx#css-shadow-parts)
 
-However, the Select Option does set a class for easier styling and allows for the ability to pass a class to the overlay option, refer to the [Select Options documentation](select-option.md) for usage examples of customizing options.
+However, the Select Option does set a class for easier styling and allows for the ability to pass a class to the overlay option, refer to the [Select Options documentation](select-option.mdx) for usage examples of customizing options.
 
 ### Custom Toggle Icons
 
diff --git a/docs/api/skeleton-text.md b/docs/api/skeleton-text.mdx
similarity index 100%
rename from docs/api/skeleton-text.md
rename to docs/api/skeleton-text.mdx
diff --git a/docs/api/spinner.md b/docs/api/spinner.mdx
similarity index 100%
rename from docs/api/spinner.md
rename to docs/api/spinner.mdx
diff --git a/docs/api/split-pane.md b/docs/api/split-pane.mdx
similarity index 100%
rename from docs/api/split-pane.md
rename to docs/api/split-pane.mdx
diff --git a/docs/api/tab-bar.md b/docs/api/tab-bar.mdx
similarity index 97%
rename from docs/api/tab-bar.md
rename to docs/api/tab-bar.mdx
index d2b7a282b23..994894253bd 100644
--- a/docs/api/tab-bar.md
+++ b/docs/api/tab-bar.mdx
@@ -24,7 +24,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-The tab bar is a UI component that contains a set of [tab buttons](tab-button.md). A tab bar must be provided inside of [tabs](tabs.md) to communicate with each [tab](tab.md).
+The tab bar is a UI component that contains a set of [tab buttons](tab-button.mdx). A tab bar must be provided inside of [tabs](tabs.mdx) to communicate with each [tab](tab.mdx).
 
 ## Usage
 
diff --git a/docs/api/tab-button.md b/docs/api/tab-button.mdx
similarity index 96%
rename from docs/api/tab-button.md
rename to docs/api/tab-button.mdx
index 149a4252767..8d2378a3cf0 100644
--- a/docs/api/tab-button.md
+++ b/docs/api/tab-button.mdx
@@ -16,9 +16,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-A tab button is a UI component that is placed inside of a [tab bar](tab-bar.md). The tab button can specify the layout of the icon and label and connect to a [tab view](tab.md).
+A tab button is a UI component that is placed inside of a [tab bar](tab-bar.mdx). The tab button can specify the layout of the icon and label and connect to a [tab view](tab.mdx).
 
-Refer to the [tabs documentation](tabs.md) for more details on configuring tabs.
+Refer to the [tabs documentation](tabs.mdx) for more details on configuring tabs.
 
 ## Usage
 
diff --git a/docs/api/tab.md b/docs/api/tab.mdx
similarity index 67%
rename from docs/api/tab.md
rename to docs/api/tab.mdx
index de7b27924fc..737b9d7bf0e 100644
--- a/docs/api/tab.md
+++ b/docs/api/tab.mdx
@@ -21,17 +21,17 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-The tab component is a child component of [tabs](tabs.md). Each tab can contain a top level navigation stack for an app or a single view. An app can have many tabs, all with their own independent navigation.
+The tab component is a child component of [tabs](tabs.mdx). Each tab can contain a top level navigation stack for an app or a single view. An app can have many tabs, all with their own independent navigation.
 
 :::note
 
-Angular, React, and Vue can only use this component when the `ion-tabs` component is configured for [basic usage](./tabs.md#basic-usage). When setting up tabs with routing, the `ion-tab` component cannot be used.
+Angular, React, and Vue can only use this component when the `ion-tabs` component is configured for [basic usage](./tabs.mdx#basic-usage). When setting up tabs with routing, the `ion-tab` component cannot be used.
 
-In JavaScript, this component can be used with the `ion-tabs` component configured for either [basic usage](./tabs.md#basic-usage) or [usage with router](./tabs.md#usage-with-router).
+In JavaScript, this component can be used with the `ion-tabs` component configured for either [basic usage](./tabs.mdx#basic-usage) or [usage with router](./tabs.mdx#usage-with-router).
 
 :::
 
-Refer to the [tabs documentation](tabs.md) for more details on configuring tabs.
+Refer to the [tabs documentation](tabs.mdx) for more details on configuring tabs.
 
 ## Properties
 
diff --git a/docs/api/tabs.md b/docs/api/tabs.mdx
similarity index 97%
rename from docs/api/tabs.md
rename to docs/api/tabs.mdx
index 5f20df1522a..0ad57f38d7e 100644
--- a/docs/api/tabs.md
+++ b/docs/api/tabs.mdx
@@ -22,7 +22,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 <EncapsulationPill type="shadow" />
 
 Tabs are a top level navigation component to implement a tab-based navigation.
-The component is a container of individual [Tab](tab.md) components.
+The component is a container of individual [Tab](tab.mdx) components.
 
 The `ion-tabs` component does not have any styling and works as a router outlet in order to handle navigation. It does not provide any UI feedback or mechanism to switch between tabs. In order to do so, an `ion-tab-bar` should be provided as a direct child of `ion-tabs`.
 
diff --git a/docs/api/text.md b/docs/api/text.mdx
similarity index 100%
rename from docs/api/text.md
rename to docs/api/text.mdx
diff --git a/docs/api/textarea.md b/docs/api/textarea.mdx
similarity index 95%
rename from docs/api/textarea.md
rename to docs/api/textarea.mdx
index edda968d7fd..0596c84c07d 100644
--- a/docs/api/textarea.md
+++ b/docs/api/textarea.mdx
@@ -125,9 +125,9 @@ Note that this feature is considered experimental because it relies on a simulat
 
 :::note
 
-In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. Refer to the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
+In most cases, [Icon](./icon.mdx) components placed in these slots should have `aria-hidden="true"`. Refer to the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
 
-If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to.
+If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.mdx). This ensures that the content can be tabbed to.
 
 :::
 
diff --git a/docs/api/thumbnail.md b/docs/api/thumbnail.mdx
similarity index 100%
rename from docs/api/thumbnail.md
rename to docs/api/thumbnail.mdx
diff --git a/docs/api/title.md b/docs/api/title.mdx
similarity index 96%
rename from docs/api/title.md
rename to docs/api/title.mdx
index a75b6291ec1..7991487e91d 100644
--- a/docs/api/title.md
+++ b/docs/api/title.mdx
@@ -45,7 +45,7 @@ import CollapsibleLargeTitle from '@site/static/usage/v10/title/collapsible-larg
 
 ### Collapsible Buttons
 
-The [buttons](./buttons.md) component can be used with the [`collapse`](./buttons.md#collapse) property to additionally display in the header as the toolbar is collapsed.
+The [buttons](./buttons.mdx) component can be used with the [`collapse`](./buttons.mdx#collapse) property to additionally display in the header as the toolbar is collapsed.
 
 import CollapsibleLargeTitleButtons from '@site/static/usage/v10/title/collapsible-large-title/buttons/index.mdx';
 
diff --git a/docs/api/toast.md b/docs/api/toast.mdx
similarity index 96%
rename from docs/api/toast.md
rename to docs/api/toast.mdx
index 6aa42dab3dd..8560a10ba07 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.mdx
@@ -70,7 +70,7 @@ Toasts can be positioned at the top, bottom or middle of the viewport. The posit
 
 ### Relative Positioning
 
-If a toast is presented alongside navigation elements such as a header, footer, or [FAB](./fab.md), the toast may overlap these elements by default. This can be fixed using the `positionAnchor` property, which takes either an element reference or an ID. The toast will be positioned relative to the chosen element, appearing below it when using `position="top"` or above it when using `position="bottom"`. When using `position="middle"`, the `positionAnchor` property is ignored.
+If a toast is presented alongside navigation elements such as a header, footer, or [FAB](./fab.mdx), the toast may overlap these elements by default. This can be fixed using the `positionAnchor` property, which takes either an element reference or an ID. The toast will be positioned relative to the chosen element, appearing below it when using `position="top"` or above it when using `position="bottom"`. When using `position="middle"`, the `positionAnchor` property is ignored.
 
 import PositionAnchor from '@site/static/usage/v10/toast/position-anchor/index.mdx';
 
@@ -94,7 +94,7 @@ import StackedPlayground from '@site/static/usage/v10/toast/layout/index.mdx';
 
 ## Icons
 
-An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an [Alert](alert.md) instead.
+An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an [Alert](alert.mdx) instead.
 
 import IconPlayground from '@site/static/usage/v10/toast/icon/index.mdx';
 
diff --git a/docs/api/toggle.md b/docs/api/toggle.mdx
similarity index 100%
rename from docs/api/toggle.md
rename to docs/api/toggle.mdx
diff --git a/docs/api/toolbar.md b/docs/api/toolbar.mdx
similarity index 100%
rename from docs/api/toolbar.md
rename to docs/api/toolbar.mdx
diff --git a/docs/cli.md b/docs/cli.mdx
similarity index 100%
rename from docs/cli.md
rename to docs/cli.mdx
diff --git a/versioned_docs/version-v8/cli/configuration.md b/docs/cli/configuration.mdx
similarity index 98%
rename from versioned_docs/version-v8/cli/configuration.md
rename to docs/cli/configuration.mdx
index 18e0d8c9250..7bebbae6846 100644
--- a/versioned_docs/version-v8/cli/configuration.md
+++ b/docs/cli/configuration.mdx
@@ -52,7 +52,7 @@ Each Ionic project has a project configuration file, usually at the project's ro
 The CLI will look for the following environment variables:
 
 - `IONIC_CONFIG_DIRECTORY`: The directory of the global CLI config. Defaults to `~/.ionic`.
-- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. Refer to [Using a Proxy](using-a-proxy.md).
+- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. Refer to [Using a Proxy](using-a-proxy.mdx).
 - `IONIC_TOKEN`: Automatically authenticates with [Appflow](https://ionic.io/appflow).
 
 ## Flags
@@ -119,7 +119,7 @@ module.exports = function (ctx) {
 
 <small>_Available in CLI 6.2.0+_</small>
 
-The Ionic CLI supports a multi-app configuration setup, which involves multiple Ionic apps and shared code within a single repository, or [monorepo](../reference/glossary.md#monorepo).
+The Ionic CLI supports a multi-app configuration setup, which involves multiple Ionic apps and shared code within a single repository, or [monorepo](../reference/glossary.mdx#monorepo).
 
 :::note
 
diff --git a/versioned_docs/version-v8/cli/livereload.md b/docs/cli/livereload.mdx
similarity index 96%
rename from versioned_docs/version-v8/cli/livereload.md
rename to docs/cli/livereload.mdx
index fe4d0c37438..db6b96ff5fb 100644
--- a/versioned_docs/version-v8/cli/livereload.md
+++ b/docs/cli/livereload.mdx
@@ -1,6 +1,6 @@
 # Live Reload
 
-Using the Live Reload option will reload the browser or [Web View](../core-concepts/webview.md) when you change your app's code in your development environment. This is particularly useful for developing using hardware devices.
+Using the Live Reload option will reload the browser or [Web View](../core-concepts/webview.mdx) when you change your app's code in your development environment. This is particularly useful for developing using hardware devices.
 
 ## Terms
 
diff --git a/docs/cli/using-a-proxy.md b/docs/cli/using-a-proxy.mdx
similarity index 100%
rename from docs/cli/using-a-proxy.md
rename to docs/cli/using-a-proxy.mdx
diff --git a/versioned_docs/version-v9/components.md b/docs/components.mdx
similarity index 99%
rename from versioned_docs/version-v9/components.md
rename to docs/components.mdx
index 112e0bd0848..01d153f89f1 100644
--- a/versioned_docs/version-v9/components.md
+++ b/docs/components.mdx
@@ -19,7 +19,7 @@ import DocsCards from '@components/global/DocsCards';
   `}</style>
 </head>
 
-Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you're familiar with the basics, refer to the [API Index](api.md) for a complete list of each component and sub-component.
+Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you're familiar with the basics, refer to the [API Index](api.mdx) for a complete list of each component and sub-component.
 
 <intro-end />
 
diff --git a/docs/contributing/coc.md b/docs/contributing/coc.mdx
similarity index 100%
rename from docs/contributing/coc.md
rename to docs/contributing/coc.mdx
diff --git a/versioned_docs/version-v8/contributing/how-to-contribute.md b/docs/contributing/how-to-contribute.mdx
similarity index 99%
rename from versioned_docs/version-v8/contributing/how-to-contribute.md
rename to docs/contributing/how-to-contribute.mdx
index 7ea536dab28..1e510e34cff 100644
--- a/versioned_docs/version-v8/contributing/how-to-contribute.md
+++ b/docs/contributing/how-to-contribute.mdx
@@ -8,7 +8,7 @@ Thanks for the interest in contributing to Ionic Framework!
 
 ## Contributing Etiquette
 
-Please refer to the [Contributor Code of Conduct](coc.md) for information on the rules of conduct.
+Please refer to the [Contributor Code of Conduct](coc.mdx) for information on the rules of conduct.
 
 ## Creating an Issue
 
diff --git a/versioned_docs/version-v8/core-concepts/cross-platform.md b/docs/core-concepts/cross-platform.mdx
similarity index 93%
rename from versioned_docs/version-v8/core-concepts/cross-platform.md
rename to docs/core-concepts/cross-platform.mdx
index 7b49f3b00a1..00763be7f28 100644
--- a/versioned_docs/version-v8/core-concepts/cross-platform.md
+++ b/docs/core-concepts/cross-platform.mdx
@@ -12,7 +12,7 @@ In a native application, it's common to make API calls to communicate with the d
 
 ### Ionic Native
 
-[Ionic Native](../native.md) has its own internal logic to detect if it is inside of a native environment. Instead of throwing a runtime error, it will print a warning if it is not a native environment and there are no Cordova plugins available. The app won’t break and it will continue to work, although without the native functionality.
+[Ionic Native](../native.mdx) has its own internal logic to detect if it is inside of a native environment. Instead of throwing a runtime error, it will print a warning if it is not a native environment and there are no Cordova plugins available. The app won’t break and it will continue to work, although without the native functionality.
 
 ### Platform Detection
 
@@ -67,7 +67,7 @@ This will render 5 items with a width of 100% each. This may look great on a pho
 
 <img src={require('@site/static/img/building/cross-platform-items.png').default} />
 
-To improve this experience, we can wrap the items in a [Grid](../api/grid.md) component. The view can be easily rewritten into something more usable on larger screens:
+To improve this experience, we can wrap the items in a [Grid](../api/grid.mdx) component. The view can be easily rewritten into something more usable on larger screens:
 
 ```html
 <ion-grid>
@@ -149,7 +149,7 @@ There’s a lot going on in the example above. These are the key points:
 
 - The `size` attribute can have a breakpoint added to it, `size-{breakpoint}`. This value sets the size for the specified breakpoint and above.
 
-For more information on customizing with grid, refer to the [Grid](../api/grid.md) documentation.
+For more information on customizing with grid, refer to the [Grid](../api/grid.mdx) documentation.
 
 ## Storage
 
diff --git a/versioned_docs/version-v9/core-concepts/fundamentals.md b/docs/core-concepts/fundamentals.mdx
similarity index 84%
rename from versioned_docs/version-v9/core-concepts/fundamentals.md
rename to docs/core-concepts/fundamentals.mdx
index 8f4772ac565..6630422a917 100644
--- a/versioned_docs/version-v9/core-concepts/fundamentals.md
+++ b/docs/core-concepts/fundamentals.mdx
@@ -15,13 +15,13 @@ For those completely new to Ionic app development, it can be helpful to get a hi
 
 ## UI Components
 
-Ionic Framework is a library of UI Components, which are reusable elements that serve as the building blocks for an application. Ionic Components are built with [web standards](../reference/glossary.md#web-standards) using HTML, CSS, and JavaScript. Though the components are pre-built, they're designed from the ground up to be highly customizable so apps can make each component their own, allowing each app to have its own look and feel. More specifically, Ionic components can be easily themed to globally change appearance across an entire app. For more information about customizing the look, please refer to [Theming](../theming/basics.md).
+Ionic Framework is a library of UI Components, which are reusable elements that serve as the building blocks for an application. Ionic Components are built with [web standards](../reference/glossary.mdx#web-standards) using HTML, CSS, and JavaScript. Though the components are pre-built, they're designed from the ground up to be highly customizable so apps can make each component their own, allowing each app to have its own look and feel. More specifically, Ionic components can be easily themed to globally change appearance across an entire app. For more information about customizing the look, please refer to [Theming](../theming/basics.mdx).
 
 ## Adaptive Styling
 
 Adaptive Styling is a built-in feature of Ionic Framework which allows app developers to use the same code base for multiple platforms. Every Ionic component adapts its look to the platform on which the app is running on. For example, Apple devices, such as the iPhone and iPad, use Apple's own [iOS design language](https://www.apple.com/ios). Similarly, Android devices use Google's design language called [Material Design](https://material.io/guidelines/).
 
-By making subtle design changes between the platforms, users are provided with a familiar app experience. An Ionic app downloaded from Apple's App Store will get the iOS theme, while an Ionic app downloaded from Android's Play Store will get the Material Design theme. For the apps that are viewed as a Progressive Web App (PWA) from a browser, Ionic will default to using the Material Design theme. Additionally, deciding which platform to use in certain scenarios is entirely configurable. More information about adaptive styling can be found in [Theming](../theming/basics.md).
+By making subtle design changes between the platforms, users are provided with a familiar app experience. An Ionic app downloaded from Apple's App Store will get the iOS theme, while an Ionic app downloaded from Android's Play Store will get the Material Design theme. For the apps that are viewed as a Progressive Web App (PWA) from a browser, Ionic will default to using the Material Design theme. Additionally, deciding which platform to use in certain scenarios is entirely configurable. More information about adaptive styling can be found in [Theming](../theming/basics.mdx).
 
 ## Navigation
 
@@ -38,19 +38,19 @@ For apps that are built with Angular and `@ionic/angular`, we recommend using th
 
 An amazing feature of apps built with web technologies (such as Ionic apps!) is that it can run on virtually any platform: desktop computers, phones, tablets, cars, refrigerators, and more! The same code base for Ionic apps can work on many platforms because it is based on web standards and common APIs that are shared across these platforms.
 
-One of the most common use cases for Ionic is to build an app which can be downloaded from both the [App Store](https://www.apple.com/ios/app-store/) and [Play Store](https://play.google.com/). Both iOS and Android software development kits (SDKs) provide [Web Views](webview.md) which render any Ionic app, while still allowing for _full_ Native SDK access.
+One of the most common use cases for Ionic is to build an app which can be downloaded from both the [App Store](https://www.apple.com/ios/app-store/) and [Play Store](https://play.google.com/). Both iOS and Android software development kits (SDKs) provide [Web Views](webview.mdx) which render any Ionic app, while still allowing for _full_ Native SDK access.
 
 Projects such as [Capacitor](https://capacitorjs.com/) and [Cordova](https://cordova.apache.org/) are commonly used to give Ionic apps this access to Native SDKs. This means developers can quickly build out an app using common web development tools, and still have access to native features such as the device's accelerometer, camera, GPS, and more.
 
 ## Theming
 
-At the core, Ionic Framework is built using [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) which allows us to take advantage of the flexibility that [CSS properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) provide. This makes it incredibly easy to design an app that looks great while following the web standard. We provide a set of colors so developers can have some great defaults, but we encourage overriding them to create designs that match a brand, company or a desired color palette. Everything from the background color of an application to the text color is fully customizable. More information on app theming can be found in [Theming](../theming/basics.md).
+At the core, Ionic Framework is built using [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) which allows us to take advantage of the flexibility that [CSS properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) provide. This makes it incredibly easy to design an app that looks great while following the web standard. We provide a set of colors so developers can have some great defaults, but we encourage overriding them to create designs that match a brand, company or a desired color palette. Everything from the background color of an application to the text color is fully customizable. More information on app theming can be found in [Theming](../theming/basics.mdx).
 
 ## Events
 
 Many Ionic components use [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) to inform developers of important state changes in the components. For example, an `ion-datetime` component will emit `ionChange` whenever the selected date has changed.
 
-Developers can use standard events such as `click` as they normally would. However, many events emitted within a component's [shadow root](../reference/glossary.md#shadow) will be [retargeted](https://dom.spec.whatwg.org/#retarget) to the host element. This may result in multiple `click` handlers executing even if the user only clicked once. As a result, developers should rely on Ionic's events to be properly informed of state changes on Ionic components. Ionic's events are prefixed with `ion` to avoid collisions with standard events. Each component's documentation page has a list of available events that developers can listen for in their applications.
+Developers can use standard events such as `click` as they normally would. However, many events emitted within a component's [shadow root](../reference/glossary.mdx#shadow) will be [retargeted](https://dom.spec.whatwg.org/#retarget) to the host element. This may result in multiple `click` handlers executing even if the user only clicked once. As a result, developers should rely on Ionic's events to be properly informed of state changes on Ionic components. Ionic's events are prefixed with `ion` to avoid collisions with standard events. Each component's documentation page has a list of available events that developers can listen for in their applications.
 
 ## Properties
 
diff --git a/docs/core-concepts/webview.md b/docs/core-concepts/webview.mdx
similarity index 80%
rename from docs/core-concepts/webview.md
rename to docs/core-concepts/webview.mdx
index f535acefe2d..38aaa053ce6 100644
--- a/docs/core-concepts/webview.md
+++ b/docs/core-concepts/webview.mdx
@@ -12,13 +12,13 @@ title: Web View
 
 Web Views power web apps on native devices.
 
-The Web View is automatically provided for apps integrated with [Capacitor](../reference/glossary.md#capacitor).
+The Web View is automatically provided for apps integrated with [Capacitor](../reference/glossary.mdx#capacitor).
 
-For [Cordova](../reference/glossary.md#cordova), Ionic maintains a [Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview). The plugin is provided by default when using the Ionic CLI.
+For [Cordova](../reference/glossary.mdx#cordova), Ionic maintains a [Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview). The plugin is provided by default when using the Ionic CLI.
 
 ## What is a Web View?
 
-Ionic apps are built using [web technologies](../reference/glossary.md#web-standards) and are rendered using Web Views, which are a full screen and full-powered web browser.
+Ionic apps are built using [web technologies](../reference/glossary.mdx#web-standards) and are rendered using Web Views, which are a full screen and full-powered web browser.
 
 Modern Web Views offer many built-in [HTML5 APIs](https://whatwebcando.today) for hardware functionality such as cameras, sensors, GPS, speakers, and Bluetooth, but sometimes it may also be necessary to access platform-specific hardware APIs. In Ionic apps, hardware APIs can be accessed through a bridge layer, typically by using native plugins which expose JavaScript APIs.
 
@@ -28,7 +28,7 @@ The Ionic Web View plugin is specialized for modern JavaScript apps. For both iO
 
 ### CORS
 
-Web Views enforce [CORS](../reference/glossary.md#cors), so it's important that external services properly handle cross-origin requests. Refer to the [CORS FAQs](../troubleshooting/cors.md) for information on dealing with CORS in Ionic apps.
+Web Views enforce [CORS](../reference/glossary.mdx#cors), so it's important that external services properly handle cross-origin requests. Refer to the [CORS FAQs](../troubleshooting/cors.mdx) for information on dealing with CORS in Ionic apps.
 
 ### File Protocol
 
diff --git a/docs/core-concepts/what-are-progressive-web-apps.md b/docs/core-concepts/what-are-progressive-web-apps.mdx
similarity index 100%
rename from docs/core-concepts/what-are-progressive-web-apps.md
rename to docs/core-concepts/what-are-progressive-web-apps.mdx
diff --git a/docs/deployment/app-store.md b/docs/deployment/app-store.mdx
similarity index 100%
rename from docs/deployment/app-store.md
rename to docs/deployment/app-store.mdx
diff --git a/versioned_docs/version-v8/deployment/progressive-web-app.md b/docs/deployment/progressive-web-app.mdx
similarity index 94%
rename from versioned_docs/version-v8/deployment/progressive-web-app.md
rename to docs/deployment/progressive-web-app.mdx
index 1fa0dbebd4a..b1682f5c56d 100644
--- a/versioned_docs/version-v8/deployment/progressive-web-app.md
+++ b/docs/deployment/progressive-web-app.mdx
@@ -14,7 +14,7 @@ import DocsCards from '@components/global/DocsCards';
   />
 </head>
 
-Because Ionic Apps are built with web technologies, they can run just as well as a Progressive Web App as they can a native app. Not sure what PWAs are? Check out Ionic's [PWA Overview](https://ionicframework.com/pwa) or the [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.md) page for more info.
+Because Ionic Apps are built with web technologies, they can run just as well as a Progressive Web App as they can a native app. Not sure what PWAs are? Check out Ionic's [PWA Overview](https://ionicframework.com/pwa) or the [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.mdx) page for more info.
 
 For the frameworks Ionic supports, we've created dedicated guides that go into more detail. Below are links for Angular, React, and Vue.
 
diff --git a/docs/developer-resources/courses.md b/docs/developer-resources/courses.mdx
similarity index 100%
rename from docs/developer-resources/courses.md
rename to docs/developer-resources/courses.mdx
diff --git a/docs/developer-resources/guides.md b/docs/developer-resources/guides.mdx
similarity index 76%
rename from docs/developer-resources/guides.md
rename to docs/developer-resources/guides.mdx
index dbe6d9477b8..c0590b83684 100644
--- a/docs/developer-resources/guides.md
+++ b/docs/developer-resources/guides.mdx
@@ -1,9 +1,9 @@
 # Guides
 
-### [Your First Ionic App - v3](guides/first-app-v3/intro.md)
+### [Your First Ionic App - v3](guides/first-app-v3/intro.mdx)
 
 Follow along as we create a working Photo Gallery app using Ionic Framework v3 and Appflow.
 
-### [Your First Ionic 4 App - Angular and Cordova](guides/first-app-v4/intro.md)
+### [Your First Ionic 4 App - Angular and Cordova](guides/first-app-v4/intro.mdx)
 
 Follow along as we create a working Photo Gallery app using Ionic Framework v4 and Cordova.
diff --git a/docs/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md b/docs/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx
similarity index 100%
rename from docs/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md
rename to docs/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx
diff --git a/docs/developer-resources/guides/first-app-v3/intro.md b/docs/developer-resources/guides/first-app-v3/intro.mdx
similarity index 100%
rename from docs/developer-resources/guides/first-app-v3/intro.md
rename to docs/developer-resources/guides/first-app-v3/intro.mdx
diff --git a/docs/developer-resources/guides/first-app-v3/ios-android-camera.md b/docs/developer-resources/guides/first-app-v3/ios-android-camera.mdx
similarity index 100%
rename from docs/developer-resources/guides/first-app-v3/ios-android-camera.md
rename to docs/developer-resources/guides/first-app-v3/ios-android-camera.mdx
diff --git a/docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md b/docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx
similarity index 94%
rename from docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
rename to docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx
index f6647f88a5a..ff1d1fcff85 100644
--- a/docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
+++ b/docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx
@@ -70,7 +70,7 @@ Next, create a local, native build of the app.
 
 ## Android Builds
 
-Follow the [Android Setup instructions](../../../developing/android.md), which includes installing Java 8 and Android Studio on your machine. Then, in your Terminal run:
+Follow the [Android Setup instructions](../../../developing/android.mdx), which includes installing Java 8 and Android Studio on your machine. Then, in your Terminal run:
 
 ```shell
 ionic cordova build android --prod
@@ -80,13 +80,13 @@ This will generate a unsigned debug build (meaning the app can run on any Androi
 
 ## iOS Builds
 
-iOS is [a bit trickier to set up](../../../developing/ios.md) than Android and requires a Mac computer. Ensure XCode is updated to the latest version and set up a development team. Then, in your Terminal, run:
+iOS is [a bit trickier to set up](../../../developing/ios.mdx) than Android and requires a Mac computer. Ensure XCode is updated to the latest version and set up a development team. Then, in your Terminal, run:
 
 ```shell
 ionic cordova build ios --prod
 ```
 
-Then, continue to follow the [app store deployment instructions](../../../deployment/app-store.md) regarding signing certificates, etc. With a native version of your app built, let’s copy it to your device of choice.
+Then, continue to follow the [app store deployment instructions](../../../deployment/app-store.mdx) regarding signing certificates, etc. With a native version of your app built, let’s copy it to your device of choice.
 
 ## Add the Native App to Your Local Device
 
diff --git a/docs/developer-resources/guides/first-app-v3/theming.md b/docs/developer-resources/guides/first-app-v3/theming.mdx
similarity index 100%
rename from docs/developer-resources/guides/first-app-v3/theming.md
rename to docs/developer-resources/guides/first-app-v3/theming.mdx
diff --git a/docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md b/docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx
similarity index 100%
rename from docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
rename to docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx
diff --git a/docs/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md b/docs/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx
similarity index 100%
rename from docs/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md
rename to docs/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx
diff --git a/docs/developer-resources/guides/first-app-v4/intro.md b/docs/developer-resources/guides/first-app-v4/intro.mdx
similarity index 98%
rename from docs/developer-resources/guides/first-app-v4/intro.md
rename to docs/developer-resources/guides/first-app-v4/intro.mdx
index 8c016a94057..a2481a35344 100644
--- a/docs/developer-resources/guides/first-app-v4/intro.md
+++ b/docs/developer-resources/guides/first-app-v4/intro.mdx
@@ -29,7 +29,7 @@ npm install -g @ionic/cli cordova
 
 The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
 
-Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../../../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../../../developing/tips.mdx#resolving-permission-errors) for more information.
 
 :::
 
diff --git a/docs/developer-resources/guides/first-app-v4/ios-android-camera.md b/docs/developer-resources/guides/first-app-v4/ios-android-camera.mdx
similarity index 98%
rename from docs/developer-resources/guides/first-app-v4/ios-android-camera.md
rename to docs/developer-resources/guides/first-app-v4/ios-android-camera.mdx
index 01b67eb109a..8e1c8b15d11 100644
--- a/docs/developer-resources/guides/first-app-v4/ios-android-camera.md
+++ b/docs/developer-resources/guides/first-app-v4/ios-android-camera.mdx
@@ -13,7 +13,7 @@ $ ionic cordova platform add android
 
 These commands will create a `config.xml` file, which is used to define Cordova iOS and Android settings. Cordova reads this file and applies each setting as it builds each native app binary.
 
-There are more steps to configure [iOS](../../../developing/ios.md) and [Android](../../../developing/android.md) native tooling.
+There are more steps to configure [iOS](../../../developing/ios.mdx) and [Android](../../../developing/android.mdx) native tooling.
 
 Much better! Now we can add the camera functionality. By the way, you can find reference code for this [on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4).
 
diff --git a/versioned_docs/version-v8/developer-resources/guides/first-app-v4/theming.md b/docs/developer-resources/guides/first-app-v4/theming.mdx
similarity index 92%
rename from versioned_docs/version-v8/developer-resources/guides/first-app-v4/theming.md
rename to docs/developer-resources/guides/first-app-v4/theming.mdx
index c185f6761c1..c55d591b308 100644
--- a/versioned_docs/version-v8/developer-resources/guides/first-app-v4/theming.md
+++ b/docs/developer-resources/guides/first-app-v4/theming.mdx
@@ -27,7 +27,7 @@ By changing these variables here and there, you can easily update the entire the
 }
 ```
 
-The easiest and most powerful way to create custom color palettes for your app’s UI is Ionic's [Color Generator tool](../../../theming/color-generator.md). As you change a color’s hex values, the embedded demo app automatically reflects the new colors. When you've finished making changes, simply copy and paste the generated code directly into your Ionic project.
+The easiest and most powerful way to create custom color palettes for your app’s UI is Ionic's [Color Generator tool](../../../theming/color-generator.mdx). As you change a color’s hex values, the embedded demo app automatically reflects the new colors. When you've finished making changes, simply copy and paste the generated code directly into your Ionic project.
 
 But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to:
 
diff --git a/docs/developer-resources/posts.md b/docs/developer-resources/posts.mdx
similarity index 100%
rename from docs/developer-resources/posts.md
rename to docs/developer-resources/posts.mdx
diff --git a/versioned_docs/version-v9/developer-resources/tools.md b/docs/developer-resources/tools.mdx
similarity index 92%
rename from versioned_docs/version-v9/developer-resources/tools.md
rename to docs/developer-resources/tools.mdx
index 6fc030a24eb..c38ba90eef8 100644
--- a/versioned_docs/version-v9/developer-resources/tools.md
+++ b/docs/developer-resources/tools.mdx
@@ -12,7 +12,7 @@ Quickly get started with a new Ionic app entirely in the browser!
 
 Check out the features that make working with TypeScript amazing.
 
-### [Glossary](../reference/glossary.md)
+### [Glossary](../reference/glossary.mdx)
 
 A list of common terms you'll encounter while developing in Ionic.
 
diff --git a/docs/developer-resources/videos.md b/docs/developer-resources/videos.mdx
similarity index 100%
rename from docs/developer-resources/videos.md
rename to docs/developer-resources/videos.mdx
diff --git a/docs/developing/android.md b/docs/developing/android.mdx
similarity index 100%
rename from docs/developing/android.md
rename to docs/developing/android.mdx
diff --git a/docs/developing/config.md b/docs/developing/config.mdx
similarity index 99%
rename from docs/developing/config.md
rename to docs/developing/config.mdx
index 6580a81d6b7..4a0e8e8ef82 100644
--- a/docs/developing/config.md
+++ b/docs/developing/config.mdx
@@ -13,7 +13,7 @@ The available config keys can be found in the [`IonicConfig`](#ionicconfig) inte
 
 The following example disables ripple effects and default the mode to Material Design:
 
-import GlobalExample from '@site/docs/developing/config/global/index.md';
+import GlobalExample from '@site/docs/developing/config/global/index.mdx';
 
 <GlobalExample />
 
@@ -21,7 +21,7 @@ import GlobalExample from '@site/docs/developing/config/global/index.md';
 
 Ionic Config is not reactive. Updating the config's value after the component has rendered will result in the previous value. It is recommended to use a component's properties instead of updating the config, when you require reactive values.
 
-import PerComponentExample from '@site/docs/developing/config/per-component/index.md';
+import PerComponentExample from '@site/docs/developing/config/per-component/index.mdx';
 
 <PerComponentExample />
 
@@ -31,7 +31,7 @@ Ionic Config can also be set on a per-platform basis. For example, this allows y
 
 In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser.
 
-import PerPlatformExample from '@site/docs/developing/config/per-platform/index.md';
+import PerPlatformExample from '@site/docs/developing/config/per-platform/index.mdx';
 
 <PerPlatformExample />
 
@@ -39,7 +39,7 @@ import PerPlatformExample from '@site/docs/developing/config/per-platform/index.
 
 The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match:
 
-import PerPlatformFallbackExample from '@site/docs/developing/config/per-platform-overrides/index.md';
+import PerPlatformFallbackExample from '@site/docs/developing/config/per-platform-overrides/index.mdx';
 
 <PerPlatformFallbackExample />
 
@@ -47,7 +47,7 @@ import PerPlatformFallbackExample from '@site/docs/developing/config/per-platfor
 
 This final example allows you to accumulate a config object based upon different platform requirements.
 
-import PerPlatformOverridesExample from '@site/docs/developing/config/per-platform-fallback/index.md';
+import PerPlatformOverridesExample from '@site/docs/developing/config/per-platform-fallback/index.mdx';
 
 <PerPlatformOverridesExample />
 
diff --git a/docs/developing/config/global/index.md b/docs/developing/config/global/index.mdx
similarity index 100%
rename from docs/developing/config/global/index.md
rename to docs/developing/config/global/index.mdx
diff --git a/docs/developing/config/per-component/index.md b/docs/developing/config/per-component/index.mdx
similarity index 100%
rename from docs/developing/config/per-component/index.md
rename to docs/developing/config/per-component/index.mdx
diff --git a/docs/developing/config/per-platform-fallback/index.md b/docs/developing/config/per-platform-fallback/index.mdx
similarity index 100%
rename from docs/developing/config/per-platform-fallback/index.md
rename to docs/developing/config/per-platform-fallback/index.mdx
diff --git a/docs/developing/config/per-platform-overrides/index.md b/docs/developing/config/per-platform-overrides/index.mdx
similarity index 100%
rename from docs/developing/config/per-platform-overrides/index.md
rename to docs/developing/config/per-platform-overrides/index.mdx
diff --git a/docs/developing/config/per-platform/index.md b/docs/developing/config/per-platform/index.mdx
similarity index 100%
rename from docs/developing/config/per-platform/index.md
rename to docs/developing/config/per-platform/index.mdx
diff --git a/versioned_docs/version-v9/developing/hardware-back-button.md b/docs/developing/hardware-back-button.mdx
similarity index 97%
rename from versioned_docs/version-v9/developing/hardware-back-button.md
rename to docs/developing/hardware-back-button.mdx
index 1d4a1baabea..4a98543a4bb 100644
--- a/versioned_docs/version-v9/developing/hardware-back-button.md
+++ b/docs/developing/hardware-back-button.mdx
@@ -42,7 +42,7 @@ The table below shows how hardware back button support varies by environment.
 
 ### Hardware Back Button in a Browser or a PWA
 
-Ionic has experimental support for handling the hardware back button in a browser or a PWA by setting [`experimentalCloseWatcher: true` in the IonicConfig](./config.md). When this feature is enabled, Ionic will use the [Close Watcher API](https://github.com/WICG/close-watcher) to pass any close requests through the `ionBackButton` event. This includes pressing the hardware back button to navigate or the Escape key to dismiss a modal.
+Ionic has experimental support for handling the hardware back button in a browser or a PWA by setting [`experimentalCloseWatcher: true` in the IonicConfig](./config.mdx). When this feature is enabled, Ionic will use the [Close Watcher API](https://github.com/WICG/close-watcher) to pass any close requests through the `ionBackButton` event. This includes pressing the hardware back button to navigate or the Escape key to dismiss a modal.
 
 Chrome has support for Close Watcher starting in [Chrome 120](https://developer.chrome.com/blog/new-in-chrome-120).
 
diff --git a/docs/developing/ios.md b/docs/developing/ios.mdx
similarity index 100%
rename from docs/developing/ios.md
rename to docs/developing/ios.mdx
diff --git a/docs/developing/keyboard.md b/docs/developing/keyboard.mdx
similarity index 100%
rename from docs/developing/keyboard.md
rename to docs/developing/keyboard.mdx
diff --git a/docs/developing/managing-focus.md b/docs/developing/managing-focus.mdx
similarity index 100%
rename from docs/developing/managing-focus.md
rename to docs/developing/managing-focus.mdx
diff --git a/versioned_docs/version-v9/developing/previewing.md b/docs/developing/previewing.mdx
similarity index 94%
rename from versioned_docs/version-v9/developing/previewing.md
rename to docs/developing/previewing.mdx
index cf565f0590a..9aea2738ad5 100644
--- a/versioned_docs/version-v9/developing/previewing.md
+++ b/docs/developing/previewing.mdx
@@ -12,9 +12,9 @@ title: Previewing
 
 There are many different options to test native functionality depending on your target platforms and needs.
 
-- Run locally in a web browser (using [Platform Detection](../core-concepts/cross-platform.md) for native functionality)
-- [Deploy to iOS](ios.md)
-- [Deploy to Android](android.md)
+- Run locally in a web browser (using [Platform Detection](../core-concepts/cross-platform.mdx) for native functionality)
+- [Deploy to iOS](ios.mdx)
+- [Deploy to Android](android.mdx)
 
 ## Run Locally in a Web Browser
 
@@ -44,8 +44,8 @@ If the external link isn't listed on the terminal, then run `ionic serve --exter
 
 :::
 
-When implementing native functionality, use [Platform Detection](../core-concepts/cross-platform.md).
-When you're ready to test on a real device, refer to the guides for [iOS](ios.md) and [Android](android.md).
+When implementing native functionality, use [Platform Detection](../core-concepts/cross-platform.mdx).
+When you're ready to test on a real device, refer to the guides for [iOS](ios.mdx) and [Android](android.mdx).
 
 ## Simulating a Mobile Viewport
 
diff --git a/docs/developing/scaffolding.md b/docs/developing/scaffolding.mdx
similarity index 100%
rename from docs/developing/scaffolding.md
rename to docs/developing/scaffolding.mdx
diff --git a/docs/developing/starting.md b/docs/developing/starting.mdx
similarity index 100%
rename from docs/developing/starting.md
rename to docs/developing/starting.mdx
diff --git a/versioned_docs/version-v9/developing/tips.md b/docs/developing/tips.mdx
similarity index 98%
rename from versioned_docs/version-v9/developing/tips.md
rename to docs/developing/tips.mdx
index 1fc7c8a65b1..16a7292b819 100644
--- a/versioned_docs/version-v9/developing/tips.md
+++ b/docs/developing/tips.mdx
@@ -133,7 +133,7 @@ The iOS simulator enables testing and debugging of an app before it reaches an a
 
 Before it can be used, [Xcode](https://developer.apple.com/xcode/download/), Apple's IDE, must be installed.
 
-The [Ionic CLI](../cli.md) can then be used to run the app in the current directory on the simulator:
+The [Ionic CLI](../cli.mdx) can then be used to run the app in the current directory on the simulator:
 
 ```shell
 ionic cordova emulate ios -lc
diff --git a/versioned_docs/version-v9/index.md b/docs/index.mdx
similarity index 86%
rename from versioned_docs/version-v9/index.md
rename to docs/index.mdx
index dd59a621c8e..6537905d583 100644
--- a/versioned_docs/version-v9/index.md
+++ b/docs/index.mdx
@@ -22,9 +22,9 @@ import DocsCards from '@components/global/DocsCards';
   <meta property="og:url" content="https://ionicframework.com/docs" />
 </head>
 
-Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.md), [React](react/overview.md), and [Vue](vue/overview.md).
+Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.mdx), [React](react/overview.mdx), and [Vue](vue/overview.mdx).
 
-Get started building by [installing Ionic](intro/cli.md) or following our [First App Tutorial](intro/next.md#build-your-first-app) to learn the main concepts.
+Get started building by [installing Ionic](intro/cli.mdx) or following our [First App Tutorial](intro/next.mdx#build-your-first-app) to learn the main concepts.
 
 <intro-end />
 
@@ -58,11 +58,11 @@ Get started building by [installing Ionic](intro/cli.md) or following our [First
 
 ## Overview
 
-Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.md), [React](react/overview.md), or [Vue](vue/overview.md). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.md). If you’d like to learn more about Ionic before diving in, we [created a video](https://youtu.be/p3AN3igqiRc) to walk you through the basics.
+Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.mdx), [React](react/overview.mdx), or [Vue](vue/overview.mdx). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.mdx). If you’d like to learn more about Ionic before diving in, we [created a video](https://youtu.be/p3AN3igqiRc) to walk you through the basics.
 
 ### One codebase, running everywhere
 
-Ionic is the only mobile app stack that enables web developers to build apps for all major app stores and the mobile web from a single codebase. And with [Adaptive Styling](theming/platform-styles.md), Ionic apps look and feel at home on every device.
+Ionic is the only mobile app stack that enables web developers to build apps for all major app stores and the mobile web from a single codebase. And with [Adaptive Styling](theming/platform-styles.mdx), Ionic apps look and feel at home on every device.
 
 ### A focus on performance
 
@@ -84,7 +84,7 @@ Build and deploy apps that work across multiple platforms, such as native iOS, A
 
 ### Web Standards-based
 
-Ionic is built on top of reliable, [standardized web technologies](reference/glossary.md#web-standards): HTML, CSS, and JavaScript, using modern Web APIs such as Custom Elements and Shadow DOM. Because of this, Ionic components have a stable API, and aren't at the whim of a single platform vendor.
+Ionic is built on top of reliable, [standardized web technologies](reference/glossary.mdx#web-standards): HTML, CSS, and JavaScript, using modern Web APIs such as Custom Elements and Shadow DOM. Because of this, Ionic components have a stable API, and aren't at the whim of a single platform vendor.
 
 ### Beautiful Design
 
@@ -121,7 +121,7 @@ Support for other frameworks will be considered in future releases.
 
 ## Ionic CLI
 
-The official [Ionic CLI](cli.md), or Command Line Interface, is a tool that quickly scaffolds Ionic apps and provides a number of helpful commands to Ionic developers. In addition to installing and updating Ionic, the CLI comes with a built-in development server, build and debugging tools, and much more. If you are an [Appflow](#appflow) member, the CLI can be used to perform cloud builds and deployments, and administer your account.
+The official [Ionic CLI](cli.mdx), or Command Line Interface, is a tool that quickly scaffolds Ionic apps and provides a number of helpful commands to Ionic developers. In addition to installing and updating Ionic, the CLI comes with a built-in development server, build and debugging tools, and much more. If you are an [Appflow](#appflow) member, the CLI can be used to perform cloud builds and deployments, and administer your account.
 
 ## Appflow
 
diff --git a/docs/intro/cdn.md b/docs/intro/cdn.mdx
similarity index 99%
rename from docs/intro/cdn.md
rename to docs/intro/cdn.mdx
index adf8a7ceda7..868fcd99eab 100644
--- a/docs/intro/cdn.md
+++ b/docs/intro/cdn.mdx
@@ -116,7 +116,7 @@ It's recommended to use [jsdelivr](https://www.jsdelivr.com/) to access the Fram
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
 ```
 
-With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic [Global Stylesheets](/docs/layout/global-stylesheets.md).
+With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic [Global Stylesheets](/docs/layout/global-stylesheets.mdx).
 
 ## Ionicons CDN
 
diff --git a/versioned_docs/version-v8/intro/cli.md b/docs/intro/cli.mdx
similarity index 79%
rename from versioned_docs/version-v8/intro/cli.md
rename to docs/intro/cli.mdx
index 17222376c24..dc775f03b94 100644
--- a/versioned_docs/version-v8/intro/cli.md
+++ b/docs/intro/cli.mdx
@@ -13,13 +13,13 @@ import AppWizard from '@components/page/intro/AppWizard';
   />
 </head>
 
-Ionic apps are created and developed primarily through the Ionic [command-line](../reference/glossary.md#cli) utility. The Ionic CLI is the preferred method of installation, as it offers a wide range of dev tools and help options along the way. It is also the main tool through which to run the app and connect it to other services, such as Appflow.
+Ionic apps are created and developed primarily through the Ionic [command-line](../reference/glossary.mdx#cli) utility. The Ionic CLI is the preferred method of installation, as it offers a wide range of dev tools and help options along the way. It is also the main tool through which to run the app and connect it to other services, such as Appflow.
 
 <AppWizard />
 
 ## Install the Ionic CLI
 
-Before proceeding, make sure your computer has [Node.js](../reference/glossary.md#node) installed. Refer to the [environment setup guide](environment.md) to prepare your machine.
+Before proceeding, make sure your computer has [Node.js](../reference/glossary.mdx#node) installed. Refer to the [environment setup guide](environment.mdx) to prepare your machine.
 
 Install the Ionic CLI with npm:
 
@@ -38,7 +38,7 @@ $ npm install -g @ionic/cli
 :::note
 
 The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
-Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information.
 
 :::
 
@@ -52,7 +52,7 @@ ionic start
 
 ![Three thumbnail previews of Ionic app templates: blank, tabs, and side menu.](/img/installation/start-app-thumbnails.png 'Ionic App Starter Templates')
 
-To learn more about starting Ionic apps, refer to the [Starting Guide](../developing/starting.md).
+To learn more about starting Ionic apps, refer to the [Starting Guide](../developing/starting.mdx).
 
 ## Run the App
 
@@ -63,4 +63,4 @@ $ cd myApp
 $ ionic serve
 ```
 
-There are a number of other ways to run an app, it's recommended to start with this workflow. To develop and test apps on devices and emulators, refer to the [Running an App Guide](../developing/previewing.md).
+There are a number of other ways to run an app, it's recommended to start with this workflow. To develop and test apps on devices and emulators, refer to the [Running an App Guide](../developing/previewing.mdx).
diff --git a/versioned_docs/version-v9/intro/environment.md b/docs/intro/environment.mdx
similarity index 86%
rename from versioned_docs/version-v9/intro/environment.md
rename to docs/intro/environment.mdx
index 468228b9d47..8f175c6c81c 100644
--- a/versioned_docs/version-v9/intro/environment.md
+++ b/docs/intro/environment.mdx
@@ -31,9 +31,9 @@ Git Bash (from [git-scm.com](https://git-scm.com)) does not support TTY interact
 
 ## Node & npm
 
-Almost all tooling for modern JavaScript projects is based in [Node.js](../reference/glossary.md#node). The [download page](https://nodejs.org/en/download/) has prebuilt installation packages for all platforms. We recommend selecting the LTS version to ensure best compatibility.
+Almost all tooling for modern JavaScript projects is based in [Node.js](../reference/glossary.mdx#node). The [download page](https://nodejs.org/en/download/) has prebuilt installation packages for all platforms. We recommend selecting the LTS version to ensure best compatibility.
 
-Node is bundled with [npm](../reference/glossary.md#npm), the package manager for JavaScript.
+Node is bundled with [npm](../reference/glossary.mdx#npm), the package manager for JavaScript.
 
 To verify the installation, open a new terminal window and run:
 
@@ -44,13 +44,13 @@ $ npm --version
 
 :::note
 
-Permission errors are common on macOS when installing global packages with `npm`. If you get an `EACCES` error, refer to [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors).
+Permission errors are common on macOS when installing global packages with `npm`. If you get an `EACCES` error, refer to [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors).
 
 :::
 
 ## Git
 
-Although not required, the version control system [Git](../reference/glossary.md#git) is highly recommended.
+Although not required, the version control system [Git](../reference/glossary.mdx#git) is highly recommended.
 
 Git is often accompanied by a Git Host, such as [GitHub](https://github.com/), in which case additional setup is required. Follow the tutorial from the Git Host's documentation to set up Git:
 
diff --git a/docs/intro/first-app.md b/docs/intro/first-app.mdx
similarity index 100%
rename from docs/intro/first-app.md
rename to docs/intro/first-app.mdx
diff --git a/docs/intro/next.md b/docs/intro/next.mdx
similarity index 100%
rename from docs/intro/next.md
rename to docs/intro/next.mdx
diff --git a/docs/intro/vscode-extension.md b/docs/intro/vscode-extension.mdx
similarity index 100%
rename from docs/intro/vscode-extension.md
rename to docs/intro/vscode-extension.mdx
diff --git a/docs/javascript/overview.md b/docs/javascript/overview.mdx
similarity index 100%
rename from docs/javascript/overview.md
rename to docs/javascript/overview.mdx
diff --git a/versioned_docs/version-v8/javascript/quickstart.md b/docs/javascript/quickstart.mdx
similarity index 95%
rename from versioned_docs/version-v8/javascript/quickstart.md
rename to docs/javascript/quickstart.mdx
index e12dd856c25..0f51f82b72a 100644
--- a/versioned_docs/version-v8/javascript/quickstart.md
+++ b/docs/javascript/quickstart.mdx
@@ -232,7 +232,7 @@ This creates a custom element called `home-page` that contains the layout for yo
 
 :::tip[Learn More]
 
-For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
+For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.mdx), [Toolbar](/docs/api/toolbar.mdx), [Title](/docs/api/title.mdx), and [Content](/docs/api/content.mdx) documentation.
 
 :::
 
@@ -252,7 +252,7 @@ At this point your browser should be displaying the Home page.
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.md) to navigate to another page. Update the `HomePage` component in `HomePage.js`:
+You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.mdx) to navigate to another page. Update the `HomePage` component in `HomePage.js`:
 
 ```js title="src/pages/HomePage.js"
 class HomePage extends HTMLElement {
@@ -307,7 +307,7 @@ class NewPage extends HTMLElement {
 customElements.define('new-page', NewPage);
 ```
 
-This creates a page with a [Back Button](/docs/api/back-button.md) in the [Toolbar](/docs/api/toolbar.md). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
+This creates a page with a [Back Button](/docs/api/back-button.mdx) in the [Toolbar](/docs/api/toolbar.mdx). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
 
 Next, update the `<script>` tag which imports the Home page in the `index.html` file to also import the New page:
 
@@ -332,7 +332,7 @@ When the button is clicked, Ionic's router will automatically navigate to the `/
 
 :::info
 
-Navigating can also be performed programmatically using `document.querySelector('ion-router').push('/new')`. Refer to the [Ionic Router documentation](/docs/api/router.md) for more information.
+Navigating can also be performed programmatically using `document.querySelector('ion-router').push('/new')`. Refer to the [Ionic Router documentation](/docs/api/router.mdx) for more information.
 
 :::
 
@@ -381,7 +381,7 @@ class NewPage extends HTMLElement {
 customElements.define('new-page', NewPage);
 ```
 
-For more information, refer to the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
+For more information, refer to the [Icon documentation](/docs/api/icon.mdx) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
 ## Call Component Methods
 
@@ -450,7 +450,7 @@ To call methods on Ionic components:
 1. Get a reference to the component element using `querySelector`
 2. Call the method directly on the element
 
-You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation.
+You can find available methods for each component in the [Methods](/docs/api/content.mdx#methods) section of their API documentation.
 
 ## Run on a Device
 
diff --git a/versioned_docs/version-v9/layout/css-utilities.md b/docs/layout/css-utilities.mdx
similarity index 99%
rename from versioned_docs/version-v9/layout/css-utilities.md
rename to docs/layout/css-utilities.mdx
index 7ae7bd3ed89..a2621f8cfa9 100644
--- a/versioned_docs/version-v9/layout/css-utilities.md
+++ b/docs/layout/css-utilities.mdx
@@ -14,7 +14,7 @@ Ionic Framework provides a set of CSS utility classes that can be used on any el
 
 :::important
 
-If your app was not started using an available Ionic Framework starter, the stylesheets listed in the [optional section of the global stylesheets](global-stylesheets.md#optional) will need to be included in order for these styles to work.
+If your app was not started using an available Ionic Framework starter, the stylesheets listed in the [optional section of the global stylesheets](global-stylesheets.mdx#optional) will need to be included in order for these styles to work.
 
 :::
 
@@ -246,7 +246,7 @@ The following classes are deprecated and will be removed in the next major relea
 
 The padding class sets the padding area of an element. The padding area is the space between the content of the element and its border.
 
-The default amount of `padding` to be applied is `16px` and is set by the `--ion-padding` variable. Refer to the [CSS Variables](../theming/css-variables.md) section for more information on how to change these values.
+The default amount of `padding` to be applied is `16px` and is set by the `--ion-padding` variable. Refer to the [CSS Variables](../theming/css-variables.mdx) section for more information on how to change these values.
 
 ```html
 <ion-grid>
@@ -296,7 +296,7 @@ The default amount of `padding` to be applied is `16px` and is set by the `--ion
 
 The margin area extends the border area with an empty area used to separate the element from its neighbors.
 
-The default amount of `margin` to be applied is `16px` and is set by the `--ion-margin` variable. Refer to the [CSS Variables](../theming/css-variables.md) section for more information on how to change these values.
+The default amount of `margin` to be applied is `16px` and is set by the `--ion-margin` variable. Refer to the [CSS Variables](../theming/css-variables.mdx) section for more information on how to change these values.
 
 ```html
 <ion-grid>
diff --git a/docs/layout/dynamic-font-scaling.md b/docs/layout/dynamic-font-scaling.mdx
similarity index 100%
rename from docs/layout/dynamic-font-scaling.md
rename to docs/layout/dynamic-font-scaling.mdx
diff --git a/docs/layout/global-stylesheets.md b/docs/layout/global-stylesheets.mdx
similarity index 81%
rename from docs/layout/global-stylesheets.md
rename to docs/layout/global-stylesheets.mdx
index 2979422e37a..eb00b28482a 100644
--- a/docs/layout/global-stylesheets.md
+++ b/docs/layout/global-stylesheets.mdx
@@ -44,28 +44,28 @@ The following set of CSS files are optional and can safely be commented out or r
 
 #### padding.css
 
-Adds utility classes to modify the padding or margin on any element, refer to [CSS Utilities](css-utilities.md#content-space) for usage information.
+Adds utility classes to modify the padding or margin on any element, refer to [CSS Utilities](css-utilities.mdx#content-space) for usage information.
 
 #### float-elements.css
 
-Adds utility classes to float an element based on the breakpoint and side, refer to [CSS Utilities](css-utilities.md#element-placement) for usage information.
+Adds utility classes to float an element based on the breakpoint and side, refer to [CSS Utilities](css-utilities.mdx#element-placement) for usage information.
 
 #### text-alignment.css
 
-Adds utility classes to align the text of an element or adjust the white space based on the breakpoint, refer to [CSS Utilities](css-utilities.md#text-alignment) for usage information.
+Adds utility classes to align the text of an element or adjust the white space based on the breakpoint, refer to [CSS Utilities](css-utilities.mdx#text-alignment) for usage information.
 
 #### text-transformation.css
 
-Adds utility classes to transform the text of an element to `uppercase`, `lowercase` or `capitalize` based on the breakpoint, refer to [CSS Utilities](css-utilities.md#text-transformation) for usage information.
+Adds utility classes to transform the text of an element to `uppercase`, `lowercase` or `capitalize` based on the breakpoint, refer to [CSS Utilities](css-utilities.mdx#text-transformation) for usage information.
 
 #### flex-utils.css
 
-Adds utility classes to align flex containers and items, refer to [CSS Utilities](css-utilities.md#flex-properties) for usage information.
+Adds utility classes to align flex containers and items, refer to [CSS Utilities](css-utilities.mdx#flex-properties) for usage information.
 
 #### display.css
 
-Adds utility classes to hide any element based on the breakpoint, refer to [CSS Utilities](css-utilities.md#element-display) for usage information.
+Adds utility classes to hide any element based on the breakpoint, refer to [CSS Utilities](css-utilities.mdx#element-display) for usage information.
 
 ## Usage
 
-Refer to [Ionic Packages](../intro/cdn.md) for how to include the global stylesheets based on the framework and [CSS Utilities](css-utilities.md) for how to use the optional utilities.
+Refer to [Ionic Packages](../intro/cdn.mdx) for how to include the global stylesheets based on the framework and [CSS Utilities](css-utilities.mdx) for how to use the optional utilities.
diff --git a/docs/layout/structure.md b/docs/layout/structure.mdx
similarity index 66%
rename from docs/layout/structure.md
rename to docs/layout/structure.mdx
index 43e51342d55..6ef346fd9c8 100644
--- a/docs/layout/structure.md
+++ b/docs/layout/structure.mdx
@@ -19,7 +19,7 @@ Ionic Framework provides several different layouts that can be used to structure
 
 ### Header
 
-The most simple layout available consists of a [header](../api/header.md) and [content](../api/content.md). Most pages in an app generally have both of these, but a header is not required in order to use content.
+The most simple layout available consists of a [header](../api/header.mdx) and [content](../api/content.mdx). Most pages in an app generally have both of these, but a header is not required in order to use content.
 
 import Header from '@site/static/usage/v10/header/basic/index.mdx';
 
@@ -35,7 +35,7 @@ import Footer from '@site/static/usage/v10/footer/basic/index.mdx';
 
 ## Tabs Layout
 
-A layout consisting of horizontal [tabs](../api/tabs.md) can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using a [router outlet](../api/router-outlet.md) or [nav](../api/nav.md).
+A layout consisting of horizontal [tabs](../api/tabs.mdx) can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using a [router outlet](../api/router-outlet.mdx) or [nav](../api/nav.mdx).
 
 import Tabs from '@site/static/usage/v10/tabs/router/index.mdx';
 
@@ -43,7 +43,7 @@ import Tabs from '@site/static/usage/v10/tabs/router/index.mdx';
 
 ## Menu Layout
 
-A standard layout among mobile apps includes the ability to toggle a side [menu](../api/menu.md) by clicking a button or swiping it open from the side. Side menus are generally used for navigation, but they can contain any content.
+A standard layout among mobile apps includes the ability to toggle a side [menu](../api/menu.mdx) by clicking a button or swiping it open from the side. Side menus are generally used for navigation, but they can contain any content.
 
 import Menu from '@site/static/usage/v10/menu/basic/index.mdx';
 
@@ -51,11 +51,11 @@ import Menu from '@site/static/usage/v10/menu/basic/index.mdx';
 
 ## Split Pane Layout
 
-A [split pane](../api/split-pane.md) layout has a more complex structure because it can combine the previous layouts. It allows for multiple views to be displayed when the viewport is above a specified breakpoint. If the device's screen size is below a certain size, the split pane view will be hidden.
+A [split pane](../api/split-pane.mdx) layout has a more complex structure because it can combine the previous layouts. It allows for multiple views to be displayed when the viewport is above a specified breakpoint. If the device's screen size is below a certain size, the split pane view will be hidden.
 
 By default, the split pane view will show when the screen is larger than `768px`, or the `md` breakpoint, but this can be customized to use different breakpoints by setting the `when` property. Below is an example where the split pane contains a menu that is visible for `xs` screens and up, or when the viewport is larger than `0px`. This will show the split pane for all screen sizes.
 
-It's important to note that the element with the `id` matching the `contentId` specified by the split pane will be the main content that is always visible. This can be any element, including a [nav](../api/nav.md), [router outlet](../api/router-outlet.md), or [tabs](../api/tabs.md).
+It's important to note that the element with the `id` matching the `contentId` specified by the split pane will be the main content that is always visible. This can be any element, including a [nav](../api/nav.mdx), [router outlet](../api/router-outlet.mdx), or [tabs](../api/tabs.mdx).
 
 import SplitPane from '@site/static/usage/v10/split-pane/basic/index.mdx';
 
diff --git a/docs/native-faq.md b/docs/native-faq.mdx
similarity index 100%
rename from docs/native-faq.md
rename to docs/native-faq.mdx
diff --git a/docs/native-setup.md b/docs/native-setup.mdx
similarity index 100%
rename from docs/native-setup.md
rename to docs/native-setup.mdx
diff --git a/docs/native.md b/docs/native.mdx
similarity index 100%
rename from docs/native.md
rename to docs/native.mdx
diff --git a/docs/react/add-to-existing.md b/docs/react/add-to-existing.mdx
similarity index 92%
rename from docs/react/add-to-existing.md
rename to docs/react/add-to-existing.mdx
index f4ecfada7a4..e9a9eb18fe9 100644
--- a/docs/react/add-to-existing.md
+++ b/docs/react/add-to-existing.mdx
@@ -14,7 +14,7 @@ import DocsCards from '@components/global/DocsCards';
   />
 </head>
 
-This guide covers how to add Ionic React to an existing React project. If you're looking to start a new project from scratch, check out the [Ionic React Quickstart](/docs/react/quickstart.md) guide. For an overview of how Ionic React works with React, including version support and tooling, check out the [Ionic React Overview](/docs/react/overview.md).
+This guide covers how to add Ionic React to an existing React project. If you're looking to start a new project from scratch, check out the [Ionic React Quickstart](/docs/react/quickstart.mdx) guide. For an overview of how Ionic React works with React, including version support and tooling, check out the [Ionic React Overview](/docs/react/overview.mdx).
 
 :::tip
 
@@ -64,7 +64,7 @@ setupIonicReact();
 
 :::info
 
-While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.md).
+While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.mdx).
 
 :::
 
@@ -98,7 +98,7 @@ const App: React.FC = () => (
 export default App;
 ```
 
-Visit the [components](/docs/components.md) page for all of the available Ionic components.
+Visit the [components](/docs/components.mdx) page for all of the available Ionic components.
 
 :::tip
 
@@ -132,7 +132,7 @@ import '@ionic/react/css/flex-utils.css';
 import '@ionic/react/css/display.css';
 ```
 
-These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.md) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.md).
+These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.mdx) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.mdx).
 
 #### 2. Set up Theming
 
@@ -169,7 +169,7 @@ setupIonicReact();
 // ...existing app function and export...
 ```
 
-The `variables.css` file can be used to create custom Ionic Framework themes. The `dark.system.css` import enables [dark mode support](/docs/theming/dark-mode.md) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables to `theme/variables.css`.
+The `variables.css` file can be used to create custom Ionic Framework themes. The `dark.system.css` import enables [dark mode support](/docs/theming/dark-mode.mdx) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables to `theme/variables.css`.
 
 #### 3. Update the App Component
 
diff --git a/docs/react/lifecycle.md b/docs/react/lifecycle.mdx
similarity index 100%
rename from docs/react/lifecycle.md
rename to docs/react/lifecycle.mdx
diff --git a/docs/react/navigation.md b/docs/react/navigation.mdx
similarity index 98%
rename from docs/react/navigation.md
rename to docs/react/navigation.mdx
index cb0cc6cb77d..e77d3adfbfe 100644
--- a/docs/react/navigation.md
+++ b/docs/react/navigation.mdx
@@ -180,7 +180,7 @@ Outside of these components that have the `routerLink` prop, you can also use Re
 
 We recommend using one of the above methods whenever possible for routing. The advantage to these approaches is that they both render an anchor (`<a>`)tag, which is suitable for overall app accessibility.
 
-For programmatic navigation, use the `useIonRouter` hook (review [Utility Functions](./utility-functions.md#useionrouter)) or React Router's [`useNavigate`](https://reactrouter.com/6.28.0/hooks/use-navigate) hook:
+For programmatic navigation, use the `useIonRouter` hook (review [Utility Functions](./utility-functions.mdx#useionrouter)) or React Router's [`useNavigate`](https://reactrouter.com/6.28.0/hooks/use-navigate) hook:
 
 ```tsx
 import { useNavigate } from 'react-router-dom';
@@ -211,7 +211,7 @@ Say you have the following application history:
 
 If you were to call `navigate(-2)` on `/pageC`, you would be brought back to `/pageA`. If you then called `navigate(2)`, you would be brought to `/pageC`.
 
-Using `navigate()` with delta values is not recommended in Ionic React because it follows the browser's linear history, which does not account for Ionic's non-linear tab and nested outlet navigation stacks. Use the `useIonRouter` hook's [`goBack()`](./utility-functions.md#back-navigation) method instead, which navigates within the current Ionic navigation stack.
+Using `navigate()` with delta values is not recommended in Ionic React because it follows the browser's linear history, which does not account for Ionic's non-linear tab and nested outlet navigation stacks. Use the `useIonRouter` hook's [`goBack()`](./utility-functions.mdx#back-navigation) method instead, which navigates within the current Ionic navigation stack.
 
 ## URL Parameters
 
@@ -527,4 +527,4 @@ When a user navigates to a session detail page ("/sessions/1" for instance), `Io
 
 For more info on routing in React using the React Router implementation that Ionic uses under the hood, check out their docs at [https://reactrouter.com/6.28.0](https://reactrouter.com/6.28.0).
 
-For documentation on `useIonRouter` and other utility functions, review [Utility Functions](./utility-functions.md).
+For documentation on `useIonRouter` and other utility functions, review [Utility Functions](./utility-functions.mdx).
diff --git a/docs/react/overlays.md b/docs/react/overlays.mdx
similarity index 100%
rename from docs/react/overlays.md
rename to docs/react/overlays.mdx
diff --git a/docs/react/overview.md b/docs/react/overview.mdx
similarity index 100%
rename from docs/react/overview.md
rename to docs/react/overview.mdx
diff --git a/docs/react/performance.md b/docs/react/performance.mdx
similarity index 100%
rename from docs/react/performance.md
rename to docs/react/performance.mdx
diff --git a/docs/react/platform.md b/docs/react/platform.mdx
similarity index 100%
rename from docs/react/platform.md
rename to docs/react/platform.mdx
diff --git a/docs/react/pwa.md b/docs/react/pwa.mdx
similarity index 100%
rename from docs/react/pwa.md
rename to docs/react/pwa.mdx
diff --git a/docs/react/quickstart.md b/docs/react/quickstart.mdx
similarity index 93%
rename from docs/react/quickstart.md
rename to docs/react/quickstart.mdx
index 35ce8d1e657..02677ec627d 100644
--- a/docs/react/quickstart.md
+++ b/docs/react/quickstart.mdx
@@ -150,17 +150,17 @@ const Home: React.FC = () => {
 export default Home;
 ```
 
-This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
+This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/docs/api/title.mdx#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
 :::tip[Learn More]
 
-For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
+For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.mdx), [Toolbar](/docs/api/toolbar.mdx), [Title](/docs/api/title.mdx), and [Content](/docs/api/content.mdx) documentation.
 
 :::
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, import and add a [Button](/docs/api/button.md) at the end of the `IonContent` in `Home.tsx`:
+You can enhance your Home page with more Ionic UI components. For example, import and add a [Button](/docs/api/button.mdx) at the end of the `IonContent` in `Home.tsx`:
 
 ```tsx title="src/pages/Home.tsx"
 import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
@@ -218,7 +218,7 @@ const New: React.FC = () => {
 export default New;
 ```
 
-This creates a page with a [Back Button](/docs/api/back-button.md) in the [Toolbar](/docs/api/toolbar.md). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
+This creates a page with a [Back Button](/docs/api/back-button.mdx) in the [Toolbar](/docs/api/toolbar.mdx). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
 
 :::warning
 
@@ -252,7 +252,7 @@ Once that is done, update the button in `Home.tsx`:
 
 :::info
 
-Navigating can also be performed programmatically using the `useIonRouter` hook. See the [React Navigation documentation](/docs/react/navigation.md#useionrouter) for more information.
+Navigating can also be performed programmatically using the `useIonRouter` hook. See the [React Navigation documentation](/docs/react/navigation.mdx#useionrouter) for more information.
 
 :::
 
@@ -276,7 +276,7 @@ Then, include them inside of the `IonContent`:
 
 Note that we are passing the imported SVG reference, **not** the icon name as a string.
 
-For more information, refer to the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
+For more information, refer to the [Icon documentation](/docs/api/icon.mdx) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
 ## Call Component Methods
 
@@ -329,7 +329,7 @@ To call methods on Ionic components:
 
 This pattern is necessary because React refs store the component instance in the `.current` property.
 
-You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation.
+You can find available methods for each component in the [Methods](/docs/api/content.mdx#methods) section of their API documentation.
 
 ## Run on a Device
 
diff --git a/docs/react/slides.md b/docs/react/slides.mdx
similarity index 100%
rename from docs/react/slides.md
rename to docs/react/slides.mdx
diff --git a/docs/react/storage.md b/docs/react/storage.mdx
similarity index 100%
rename from docs/react/storage.md
rename to docs/react/storage.mdx
diff --git a/docs/react/testing/introduction.md b/docs/react/testing/introduction.mdx
similarity index 100%
rename from docs/react/testing/introduction.md
rename to docs/react/testing/introduction.mdx
diff --git a/docs/react/testing/unit-testing/best-practices.md b/docs/react/testing/unit-testing/best-practices.mdx
similarity index 100%
rename from docs/react/testing/unit-testing/best-practices.md
rename to docs/react/testing/unit-testing/best-practices.mdx
diff --git a/docs/react/testing/unit-testing/examples.md b/docs/react/testing/unit-testing/examples.mdx
similarity index 100%
rename from docs/react/testing/unit-testing/examples.md
rename to docs/react/testing/unit-testing/examples.mdx
diff --git a/docs/react/testing/unit-testing/setup.md b/docs/react/testing/unit-testing/setup.mdx
similarity index 100%
rename from docs/react/testing/unit-testing/setup.md
rename to docs/react/testing/unit-testing/setup.mdx
diff --git a/docs/react/utility-functions.md b/docs/react/utility-functions.mdx
similarity index 98%
rename from docs/react/utility-functions.md
rename to docs/react/utility-functions.mdx
index ed8814188b8..905c470606d 100644
--- a/docs/react/utility-functions.md
+++ b/docs/react/utility-functions.mdx
@@ -99,7 +99,7 @@ const MyComponent: React.FC = () => {
 };
 ```
 
-Review the [React Navigation Documentation](./navigation.md) for more navigation examples.
+Review the [React Navigation Documentation](./navigation.mdx) for more navigation examples.
 
 ### Interfaces
 
diff --git a/docs/react/virtual-scroll.md b/docs/react/virtual-scroll.mdx
similarity index 100%
rename from docs/react/virtual-scroll.md
rename to docs/react/virtual-scroll.mdx
diff --git a/docs/react/your-first-app.md b/docs/react/your-first-app.mdx
similarity index 96%
rename from docs/react/your-first-app.md
rename to docs/react/your-first-app.mdx
index 4409fde15cc..a78bc4e967f 100644
--- a/docs/react/your-first-app.md
+++ b/docs/react/your-first-app.mdx
@@ -30,7 +30,7 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
 
 Highlights include:
 
-- One React-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.md).
+- One React-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.mdx).
 - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
 - Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs.
 
@@ -64,7 +64,7 @@ npm install -g @ionic/cli native-run cordova-res
 
 The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
 
-Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information.
 
 :::
 
@@ -169,7 +169,7 @@ const Tab2: React.FC = () => {
 export default Tab2;
 ```
 
-`IonHeader` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.md#collapsible-large-titles) support). Let’s rename both `IonTitle` elements to:
+`IonHeader` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.mdx#collapsible-large-titles) support). Let’s rename both `IonTitle` elements to:
 
 ```tsx
 <IonPage>
@@ -192,7 +192,7 @@ export default Tab2;
 </IonPage>
 ```
 
-We put the visual aspects of our app into `<IonContent>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.md) (FAB) to the bottom of the page and set the camera image as the icon.
+We put the visual aspects of our app into `<IonContent>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.mdx) (FAB) to the bottom of the page and set the camera image as the icon.
 
 ```tsx
 // CHANGE: Add the following import
diff --git a/versioned_docs/version-v9/react/your-first-app/2-taking-photos.md b/docs/react/your-first-app/2-taking-photos.mdx
similarity index 96%
rename from versioned_docs/version-v9/react/your-first-app/2-taking-photos.md
rename to docs/react/your-first-app/2-taking-photos.mdx
index 5b0ba87f260..267c80a5f85 100644
--- a/versioned_docs/version-v9/react/your-first-app/2-taking-photos.md
+++ b/docs/react/your-first-app/2-taking-photos.mdx
@@ -201,7 +201,7 @@ export interface UserPhoto {
 }
 ```
 
-Next, switch to `Tab2.tsx` to display the images. We'll add a [Grid component](../../api/grid.md) to ensure the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `UserPhoto`'s `photos` array. For each item, add an `<img>` element and set its `src` property to the photo's path.
+Next, switch to `Tab2.tsx` to display the images. We'll add a [Grid component](../../api/grid.mdx) to ensure the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `UserPhoto`'s `photos` array. For each item, add an `<img>` element and set its `src` property to the photo's path.
 
 ```tsx
 import { camera } from 'ionicons/icons';
diff --git a/docs/react/your-first-app/3-saving-photos.md b/docs/react/your-first-app/3-saving-photos.mdx
similarity index 100%
rename from docs/react/your-first-app/3-saving-photos.md
rename to docs/react/your-first-app/3-saving-photos.mdx
diff --git a/docs/react/your-first-app/4-loading-photos.md b/docs/react/your-first-app/4-loading-photos.mdx
similarity index 100%
rename from docs/react/your-first-app/4-loading-photos.md
rename to docs/react/your-first-app/4-loading-photos.mdx
diff --git a/docs/react/your-first-app/5-adding-mobile.md b/docs/react/your-first-app/5-adding-mobile.mdx
similarity index 96%
rename from docs/react/your-first-app/5-adding-mobile.md
rename to docs/react/your-first-app/5-adding-mobile.mdx
index 72fe336cef9..302988e4e38 100644
--- a/docs/react/your-first-app/5-adding-mobile.md
+++ b/docs/react/your-first-app/5-adding-mobile.mdx
@@ -17,7 +17,7 @@ Our photo gallery app won’t be complete until it runs on iOS, Android, and the
 
 Let’s start with making some small code changes - then our app will “just work” when we deploy it to a device.
 
-Import the Ionic [Platform API](../platform.md) into `usePhotoGallery.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile).
+Import the Ionic [Platform API](../platform.mdx) into `usePhotoGallery.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile).
 
 Add `isPlatform` to the imports at the top of the file to use the `isPlatform` method. `Capacitor` is also imported to help with file paths on mobile devices.
 
diff --git a/docs/react/your-first-app/6-deploying-mobile.md b/docs/react/your-first-app/6-deploying-mobile.mdx
similarity index 100%
rename from docs/react/your-first-app/6-deploying-mobile.md
rename to docs/react/your-first-app/6-deploying-mobile.mdx
diff --git a/docs/react/your-first-app/7-live-reload.md b/docs/react/your-first-app/7-live-reload.mdx
similarity index 95%
rename from docs/react/your-first-app/7-live-reload.md
rename to docs/react/your-first-app/7-live-reload.mdx
index 9c66eb131d3..25665f016d4 100644
--- a/docs/react/your-first-app/7-live-reload.md
+++ b/docs/react/your-first-app/7-live-reload.mdx
@@ -13,7 +13,7 @@ sidebar_label: Live Reload
 
 So far, we’ve learned how easy it is to develop a cross-platform app that works everywhere. The development experience is pretty quick, but what if I told you there was a way to go faster?
 
-We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.md) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
+We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.mdx) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
 
 ## Live Reload
 
@@ -178,7 +178,7 @@ const Tab2: React.FC = () => {
 export default Tab2;
 ```
 
-Wrap each image in a `<button>` element with a click handler. When the app user taps on a photo in our gallery, we'll display an [Action Sheet](../../api/action-sheet.md) dialog with the option to either delete the selected photo or cancel (close) the dialog.
+Wrap each image in a `<button>` element with a click handler. When the app user taps on a photo in our gallery, we'll display an [Action Sheet](../../api/action-sheet.mdx) dialog with the option to either delete the selected photo or cancel (close) the dialog.
 
 ```tsx
 <IonGrid>
diff --git a/versioned_docs/version-v8/react/your-first-app/8-distribute.md b/docs/react/your-first-app/8-distribute.mdx
similarity index 97%
rename from versioned_docs/version-v8/react/your-first-app/8-distribute.md
rename to docs/react/your-first-app/8-distribute.mdx
index 73ebe7e7628..e1c6a8ac23d 100644
--- a/versioned_docs/version-v8/react/your-first-app/8-distribute.md
+++ b/docs/react/your-first-app/8-distribute.mdx
@@ -102,6 +102,6 @@ For access to the ability to create a Native Configuration, you will need to be
 
 Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to your users' devices!
 
-There are many paths to follow from here. Try adding another [Ionic UI component](../../components.md) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
+There are many paths to follow from here. Try adding another [Ionic UI component](../../components.mdx) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
 
 Happy app building! 💙
diff --git a/docs/reference/browser-support.md b/docs/reference/browser-support.mdx
similarity index 96%
rename from docs/reference/browser-support.md
rename to docs/reference/browser-support.mdx
index 10808553648..0776df2a8f6 100644
--- a/docs/reference/browser-support.md
+++ b/docs/reference/browser-support.mdx
@@ -14,7 +14,7 @@ Ionic's earliest goal was to make it easy to develop mobile apps using web techn
 
 ## Mobile Platforms
 
-In pursuit of [adaptive styling](../core-concepts/fundamentals.md#adaptive-styling), Ionic fully supports and is well tested on the mobile platforms listed below:
+In pursuit of [adaptive styling](../core-concepts/fundamentals.mdx#adaptive-styling), Ionic fully supports and is well tested on the mobile platforms listed below:
 
 | Framework |        Android         |  iOS  |
 | :-------: | :--------------------: | :---: |
diff --git a/docs/reference/glossary.md b/docs/reference/glossary.mdx
similarity index 100%
rename from docs/reference/glossary.md
rename to docs/reference/glossary.mdx
diff --git a/docs/reference/release-notes.md b/docs/reference/release-notes.mdx
similarity index 100%
rename from docs/reference/release-notes.md
rename to docs/reference/release-notes.mdx
diff --git a/versioned_docs/version-v9/reference/support.md b/docs/reference/support.mdx
similarity index 98%
rename from versioned_docs/version-v9/reference/support.md
rename to docs/reference/support.mdx
index efcac5b444f..43994fbf0bc 100644
--- a/versioned_docs/version-v9/reference/support.md
+++ b/docs/reference/support.mdx
@@ -65,7 +65,7 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo
 
 Angular's support policy for iOS is the two most recent major versions. This means that changes to your Angular project may be necessary to use Ionic Angular v4-v6 on iOS 13. To support iOS 13, change the project `target` specified in `compilerOptions` in the tsconfig.json to `es5`. Without this change an error of `Unexpected token '.' in promiseReactionJob` will occur on app startup in iOS 13.
 
-Note that later versions of Ionic do not support iOS 13; refer to the [mobile support table](./browser-support.md#mobile-platforms).
+Note that later versions of Ionic do not support iOS 13; refer to the [mobile support table](./browser-support.mdx#mobile-platforms).
 
 #### Ionic React
 
@@ -140,4 +140,4 @@ Note that later versions of Ionic do not support iOS 13; refer to the [mobile su
 |      V3      | Not currently supported |   @awesome-cordova-plugins 4.X   |
 
 - Wrappers (and their associated plugins) are community maintained.
-- \*Cordova plugin support with Ionic Native and `@ionic/react` can be achieved using the [vanilla JavaScript implementation](../native.md#vanilla-javascript)
+- \*Cordova plugin support with Ionic Native and `@ionic/react` can be achieved using the [vanilla JavaScript implementation](../native.mdx#vanilla-javascript)
diff --git a/docs/reference/versioning.md b/docs/reference/versioning.mdx
similarity index 100%
rename from docs/reference/versioning.md
rename to docs/reference/versioning.mdx
diff --git a/docs/techniques/security.md b/docs/techniques/security.mdx
similarity index 99%
rename from docs/techniques/security.md
rename to docs/techniques/security.mdx
index 88510489468..9aebc97ca93 100644
--- a/docs/techniques/security.md
+++ b/docs/techniques/security.mdx
@@ -61,7 +61,7 @@ To learn more about the security recommendations for binding to directives such
 
 ## Enabling Custom HTML Parsing via `innerHTML`
 
-`ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-select-option`, and `ion-toast` can accept custom HTML as strings for certain properties. These strings are added to the DOM using `innerHTML` and must be properly sanitized by the developer. This behavior is disabled by default which means values passed to the affected components will always be interpreted as plaintext. Developers can enable this custom HTML behavior by setting `innerHTMLTemplatesEnabled: true` in the [IonicConfig](../developing/config.md#ionicconfig).
+`ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-select-option`, and `ion-toast` can accept custom HTML as strings for certain properties. These strings are added to the DOM using `innerHTML` and must be properly sanitized by the developer. This behavior is disabled by default which means values passed to the affected components will always be interpreted as plaintext. Developers can enable this custom HTML behavior by setting `innerHTMLTemplatesEnabled: true` in the [IonicConfig](../developing/config.mdx#ionicconfig).
 
 ## Ejecting from the built-in sanitizer
 
diff --git a/docs/test/page1.md b/docs/test/page1.md
deleted file mode 100644
index d965196cf5d..00000000000
--- a/docs/test/page1.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Testing Page 1
-
-This is Testing page 1, Get to Testing Page 2 [here](page2.md).
diff --git a/docs/test/page1.mdx b/docs/test/page1.mdx
new file mode 100644
index 00000000000..cd5b72410d0
--- /dev/null
+++ b/docs/test/page1.mdx
@@ -0,0 +1,3 @@
+# Testing Page 1
+
+This is Testing page 1, Get to Testing Page 2 [here](page2.mdx).
diff --git a/docs/test/page2.md b/docs/test/page2.md
deleted file mode 100644
index 2d2d61adacf..00000000000
--- a/docs/test/page2.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Testing Page 2
-
-This is Testing page 2, Get to Testing Page 1 [here](page1.md).
diff --git a/docs/test/page2.mdx b/docs/test/page2.mdx
new file mode 100644
index 00000000000..5ebdef8dca0
--- /dev/null
+++ b/docs/test/page2.mdx
@@ -0,0 +1,3 @@
+# Testing Page 2
+
+This is Testing page 2, Get to Testing Page 1 [here](page1.mdx).
diff --git a/docs/theming/advanced.md b/docs/theming/advanced.mdx
similarity index 96%
rename from docs/theming/advanced.md
rename to docs/theming/advanced.mdx
index 18093f98df1..fef9ebfdeff 100644
--- a/docs/theming/advanced.md
+++ b/docs/theming/advanced.mdx
@@ -66,8 +66,8 @@ While the application and stepped variables in the themes section are useful for
 | `--ion-safe-area-right`     | Adjust the safe area inset right of the app                                                          |
 | `--ion-safe-area-bottom`    | Adjust the safe area inset bottom of the app                                                         |
 | `--ion-safe-area-left`      | Adjust the safe area inset left of the app                                                           |
-| `--ion-margin`              | Adjust the margin of the [Margin attributes](../layout/css-utilities.md#element-margin)              |
-| `--ion-padding`             | Adjust the padding of the [Padding attributes](../layout/css-utilities.md#element-padding)           |
+| `--ion-margin`              | Adjust the margin of the [Margin attributes](../layout/css-utilities.mdx#element-margin)             |
+| `--ion-padding`             | Adjust the padding of the [Padding attributes](../layout/css-utilities.mdx#element-padding)          |
 | `--ion-placeholder-opacity` | Adjust the opacity of the placeholders used in the input, textarea, searchbar, and select components |
 
 ### Grid Variables
@@ -111,7 +111,7 @@ There is not yet full [browser support](https://developer.mozilla.org/en-US/docs
 
 :::note
 
-Refer to the [CSS Variables](css-variables.md) section for more information on how to get and set CSS variables.
+Refer to the [CSS Variables](css-variables.mdx) section for more information on how to get and set CSS variables.
 
 :::
 
@@ -182,7 +182,7 @@ After running through the Sass compiler, the colors will have the following valu
 
 However, because CSS variables can be set at runtime and are more dynamic, it is not currently possible to manipulate them using a simple function.
 
-This is normally not a problem, but when an application needs to have dynamic theming it presents issues. In Ionic, this is the reason that there are [variations to each color](colors.md#layered-colors), and it is also why [stepped colors](themes.md#stepped-colors) are necessary for theming.
+This is normally not a problem, but when an application needs to have dynamic theming it presents issues. In Ionic, this is the reason that there are [variations to each color](colors.mdx#layered-colors), and it is also why [stepped colors](themes.mdx#stepped-colors) are necessary for theming.
 
 There are drafts and issues discussing [color modification proposals](https://github.com/w3c/csswg-drafts/issues/3187) that would make this possible.
 
diff --git a/docs/theming/basics.md b/docs/theming/basics.mdx
similarity index 88%
rename from docs/theming/basics.md
rename to docs/theming/basics.mdx
index c7072fd73c7..b330a7383ea 100644
--- a/docs/theming/basics.md
+++ b/docs/theming/basics.mdx
@@ -19,7 +19,7 @@ Ionic Framework is built to be a blank slate that can easily be customized and m
 
 Ionic has nine default colors that can be used to change the color of many components. Each color is actually a collection of multiple properties, including a `shade` and `tint`, used throughout Ionic.
 
-When changing a color, it is important to set all of the related properties. This can be done easily with the [Color Generator](color-generator.md) tool, but these can also be manually written if desired. For more information on Ionic colors, refer to [Colors](colors.md).
+When changing a color, it is important to set all of the related properties. This can be done easily with the [Color Generator](color-generator.mdx) tool, but these can also be manually written if desired. For more information on Ionic colors, refer to [Colors](colors.mdx).
 
 <ColorAccordion />
 
@@ -27,16 +27,16 @@ When changing a color, it is important to set all of the related properties. Thi
 
 Ionic components adapt their look and behavior based on the platform the app is running on. We call this **Adaptive Styling**. This allows developers to build apps that use the same codebase for multiple platforms, while still looking "native" to those particular platforms.
 
-Ionic has two **modes** that are used to customize the look of components based on the **platform**: `ios` and `md`. Each platform has a default mode, but this can easily be configured. For more information on customizing an application based on the platform, refer to [Platform Styles](platform-styles.md).
+Ionic has two **modes** that are used to customize the look of components based on the **platform**: `ios` and `md`. Each platform has a default mode, but this can easily be configured. For more information on customizing an application based on the platform, refer to [Platform Styles](platform-styles.mdx).
 
 ## CSS Variables
 
-The Ionic Framework components are themed using [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables). CSS variables add dynamic values to an otherwise static language. This is something that has traditionally required a CSS preprocessor like Sass. The look of an application can easily be changed by changing the value of any of the [CSS Variables](css-variables.md) Ionic Framework provides.
+The Ionic Framework components are themed using [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables). CSS variables add dynamic values to an otherwise static language. This is something that has traditionally required a CSS preprocessor like Sass. The look of an application can easily be changed by changing the value of any of the [CSS Variables](css-variables.mdx) Ionic Framework provides.
 
 ## CSS Shadow Parts
 
-CSS Shadow Parts were added to make it easier to fully customize Ionic Framework Shadow components. In the past, components that use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) were unable to have elements inside of their shadow tree styled directly. With the addition of Shadow parts, there is no longer a need for CSS variables for every property on an inner element of a Shadow component. For more information on customizing Ionic Framework components using parts, refer to the [CSS Shadow Parts](css-shadow-parts.md) guide.
+CSS Shadow Parts were added to make it easier to fully customize Ionic Framework Shadow components. In the past, components that use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) were unable to have elements inside of their shadow tree styled directly. With the addition of Shadow parts, there is no longer a need for CSS variables for every property on an inner element of a Shadow component. For more information on customizing Ionic Framework components using parts, refer to the [CSS Shadow Parts](css-shadow-parts.mdx) guide.
 
 ## Branding
 
-Ionic provides application colors that can be used to theme an application to match a brand or color scheme. The default theme uses a light background, but everything from the background color to the text color is fully customizable. For more information on branding, refer to [Themes](themes.md).
+Ionic provides application colors that can be used to theme an application to match a brand or color scheme. The default theme uses a light background, but everything from the background color to the text color is fully customizable. For more information on branding, refer to [Themes](themes.mdx).
diff --git a/docs/theming/color-generator.md b/docs/theming/color-generator.mdx
similarity index 100%
rename from docs/theming/color-generator.md
rename to docs/theming/color-generator.mdx
diff --git a/versioned_docs/version-v9/theming/colors.md b/docs/theming/colors.mdx
similarity index 89%
rename from versioned_docs/version-v9/theming/colors.md
rename to docs/theming/colors.mdx
index b729dbf2066..b05f9d1c2a3 100644
--- a/versioned_docs/version-v9/theming/colors.md
+++ b/docs/theming/colors.mdx
@@ -33,7 +33,7 @@ A color can be applied to an Ionic component in order to change the default colo
 
 ## Layered Colors
 
-Each color consists of the following properties: a `base`, `contrast`, `shade`, and `tint`. The `base` and `contrast` colors also require a `rgb` property which is the same color, just in [rgb format](https://developer.mozilla.org/en-US/docs/Glossary/RGB). Refer to [The Alpha Problem](advanced.md#the-alpha-problem) for an explanation of why the `rgb` property is also needed. Select from the dropdown below to explore each of the default colors Ionic provides and their variations.
+Each color consists of the following properties: a `base`, `contrast`, `shade`, and `tint`. The `base` and `contrast` colors also require a `rgb` property which is the same color, just in [rgb format](https://developer.mozilla.org/en-US/docs/Glossary/RGB). Refer to [The Alpha Problem](advanced.mdx#the-alpha-problem) for an explanation of why the `rgb` property is also needed. Select from the dropdown below to explore each of the default colors Ionic provides and their variations.
 
 <LayeredColorsSelect />
 
@@ -56,11 +56,11 @@ When `secondary` is applied to a button, not only is the base color <CodeColor c
 
 :::note
 
-Not sure how to get the variation colors from the base color? Try out our [Color Generator](color-generator.md) that calculates all of the variations and provides code to copy/paste into an app!
+Not sure how to get the variation colors from the base color? Try out our [Color Generator](color-generator.mdx) that calculates all of the variations and provides code to copy/paste into an app!
 
 :::
 
-Refer to the [CSS Variables documentation](css-variables.md) for more information on CSS variables.
+Refer to the [CSS Variables documentation](css-variables.mdx) for more information on CSS variables.
 
 ## Adding Colors
 
@@ -107,7 +107,7 @@ div {
 }
 ```
 
-Refer to the [CSS Variables documentation](css-variables.md) for more information on setting and using CSS variables.
+Refer to the [CSS Variables documentation](css-variables.mdx) for more information on setting and using CSS variables.
 
 ## New Color Creator
 
diff --git a/docs/theming/css-shadow-parts.md b/docs/theming/css-shadow-parts.mdx
similarity index 92%
rename from docs/theming/css-shadow-parts.md
rename to docs/theming/css-shadow-parts.mdx
index 1f31faba50c..fb8fc4f959e 100644
--- a/docs/theming/css-shadow-parts.md
+++ b/docs/theming/css-shadow-parts.mdx
@@ -18,7 +18,7 @@ Ionic Framework is a distributed set of [Web Components](https://developer.mozil
 
 :::note
 
-Ionic Framework components are **not all** Shadow DOM components. If the component is a Shadow DOM component, there will be a badge in the top right of its [component documentation](../components.md). An example of a Shadow DOM component is the [button component](../api/button.md).
+Ionic Framework components are **not all** Shadow DOM components. If the component is a Shadow DOM component, there will be a badge in the top right of its [component documentation](../components.mdx). An example of a Shadow DOM component is the [button component](../api/button.mdx).
 
 :::
 
@@ -63,7 +63,7 @@ Continuing to use the `ion-select` component as an example, the markup is update
 </ion-select>
 ```
 
-The above shows two parts: `placeholder` and `icon`. Refer to the [select documentation](../api/select.md#css-shadow-parts) for all of its parts.
+The above shows two parts: `placeholder` and `icon`. Refer to the [select documentation](../api/select.mdx#css-shadow-parts) for all of its parts.
 
 With these parts exposed, the element can now be styled directly using [::part](#how-part-works).
 
@@ -107,11 +107,11 @@ There are some known limitations with [vendor prefixed pseudo-elements](#vendor-
 
 ## Ionic Framework Parts
 
-All exposed parts for an Ionic Framework component can be found under the CSS Shadow Parts heading on its API page. To view all components and their API pages, refer to the [Component documentation](../components.md).
+All exposed parts for an Ionic Framework component can be found under the CSS Shadow Parts heading on its API page. To view all components and their API pages, refer to the [Component documentation](../components.mdx).
 
 In order to have parts a component must meet the following criteria:
 
-- It is a [Shadow DOM](../reference/glossary.md#shadow) component. If it is a [Scoped](../reference/glossary.md#scoped) or Light DOM component, the child elements can be targeted directly. If a component is Scoped or Shadow, it will be listed by its name on its [component documentation page](../components.md).
+- It is a [Shadow DOM](../reference/glossary.mdx#shadow) component. If it is a [Scoped](../reference/glossary.mdx#scoped) or Light DOM component, the child elements can be targeted directly. If a component is Scoped or Shadow, it will be listed by its name on its [component documentation page](../components.mdx).
 - It contains children elements. For example, `ion-card-header` is a Shadow component, but all styles are applied to the host element. Since it has no child elements, there’s no need for parts.
 - The children elements are not structural. In certain components, including `ion-title`, the child element is a structural element used to position the inner elements. We do not recommend customizing structural elements as this can have unexpected results.
 
@@ -125,7 +125,7 @@ We welcome recommendations for additional parts. Please create a [new GitHub iss
 
 ### Browser Support
 
-CSS Shadow Parts are supported in the recent versions of all of the major browsers. However, some of the older versions do not support shadow parts. Verify the [browser support](https://caniuse.com/#feat=mdn-css_selectors_part) meets the requirements before implementing parts in an app. If browser support for older versions is required, we recommend continuing to use [CSS Variables](../theming/css-variables.md) for styling.
+CSS Shadow Parts are supported in the recent versions of all of the major browsers. However, some of the older versions do not support shadow parts. Verify the [browser support](https://caniuse.com/#feat=mdn-css_selectors_part) meets the requirements before implementing parts in an app. If browser support for older versions is required, we recommend continuing to use [CSS Variables](../theming/css-variables.mdx) for styling.
 
 ### Vendor Prefixed Pseudo-Elements
 
diff --git a/versioned_docs/version-v9/theming/css-variables.md b/docs/theming/css-variables.mdx
similarity index 93%
rename from versioned_docs/version-v9/theming/css-variables.md
rename to docs/theming/css-variables.mdx
index 1de4515268e..5de7885d851 100644
--- a/versioned_docs/version-v9/theming/css-variables.md
+++ b/docs/theming/css-variables.mdx
@@ -91,8 +91,8 @@ const color = el.style.getPropertyValue('--background');
 
 ### Component Variables
 
-Ionic provides variables that exist at the component level, such as `--background` and `--color`. For a list of the custom properties a component accepts, view the `CSS Custom Properties` section of its [API reference](../api.md). For example, refer to the [Button CSS Custom Properties](../api/button.md#css-custom-properties).
+Ionic provides variables that exist at the component level, such as `--background` and `--color`. For a list of the custom properties a component accepts, view the `CSS Custom Properties` section of its [API reference](../api.mdx). For example, refer to the [Button CSS Custom Properties](../api/button.mdx#css-custom-properties).
 
 ### Global Variables
 
-There are several global variables that Ionic provides in order to make theming an entire application easier. For more information, refer to [Colors](colors.md), [Themes](themes.md) and [Advanced Theming](advanced.md).
+There are several global variables that Ionic provides in order to make theming an entire application easier. For more information, refer to [Colors](colors.mdx), [Themes](themes.mdx) and [Advanced Theming](advanced.mdx).
diff --git a/docs/theming/dark-mode.md b/docs/theming/dark-mode.mdx
similarity index 92%
rename from docs/theming/dark-mode.md
rename to docs/theming/dark-mode.mdx
index 6cd9ee5b27f..20211fb238a 100644
--- a/docs/theming/dark-mode.md
+++ b/docs/theming/dark-mode.mdx
@@ -208,13 +208,13 @@ For more information regarding `color-scheme`, please refer to the [Web.dev guid
 
 :::note
 
-`color-scheme` does not apply to the keyboard. For details on how dark mode works with the keyboard, refer to [Keyboard Documentation](../developing/keyboard.md#dark-mode).
+`color-scheme` does not apply to the keyboard. For details on how dark mode works with the keyboard, refer to [Keyboard Documentation](../developing/keyboard.mdx#dark-mode).
 
 :::
 
 :::note
 
-For developers looking to customize the theme color under the status bar in Safari on iOS 15 or the toolbar in Safari on macOS, refer to [`theme-color` Meta](./advanced.md#theme-color-meta).
+For developers looking to customize the theme color under the status bar in Safari on iOS 15 or the toolbar in Safari on macOS, refer to [`theme-color` Meta](./advanced.mdx#theme-color-meta).
 
 :::
 
@@ -222,7 +222,7 @@ For developers looking to customize the theme color under the status bar in Safa
 
 Ionic has a recommended dark palette that can be enabled in three different ways: [always](#always), based on [system](#system) settings, or by using a [CSS class](#css-class). Each of these methods involves importing the dark palette file with the corresponding name.
 
-The contents of each file are included below for reference. These variables are set by importing the relevant dark palette file and do not need to be copied into an app. For more information on the variables being changed, including additional variables for further customization, refer to the [Themes](themes.md) section.
+The contents of each file are included below for reference. These variables are set by importing the relevant dark palette file and do not need to be copied into an app. For more information on the variables being changed, including additional variables for further customization, refer to the [Themes](themes.mdx) section.
 
 <Tabs groupId="darkFiles" defaultValue="always" values={[{ value: 'always', label: 'Always (dark.always.css)' }, { value: 'system', label: 'System (dark.system.css)' }, { value: 'class', label: 'Class (dark.class.css)' }]}>
 
@@ -230,7 +230,7 @@ The contents of each file are included below for reference. These variables are
 
 The **always** dark palette behaves in the following ways:
 
-1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a dark palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher.
+1. Sets the [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement a dark palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher.
 2. Setting variables for the dark palette on `ios` devices using the `:root.ios` selector.
 3. Setting variables for the dark palette on `md` devices using the `:root.md` selector.
 
@@ -252,7 +252,7 @@ The contents of Ionic's dark palette can be [viewed on GitHub](https://github.co
 
 The **system** dark palette behaves in the following ways:
 
-1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a dark palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher.
+1. Sets the [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement a dark palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher.
 2. Setting variables for the dark palette on `ios` devices using the `:root.ios` selector.
 3. Setting variables for the dark palette on `md` devices using the `:root.md` selector.
 4. Only applies these variables when the [CSS media query for `prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) is `dark`.
@@ -275,7 +275,7 @@ The contents of Ionic's dark palette can be [viewed on GitHub](https://github.co
 
 The **class** dark palette behaves in the following ways:
 
-1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a dark palette in the `.ion-palette-dark` selector. The `.ion-palette-dark` class must be added to the `html` element in an app.
+1. Sets the [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement a dark palette in the `.ion-palette-dark` selector. The `.ion-palette-dark` class must be added to the `html` element in an app.
 2. Setting variables for the dark palette on `ios` devices using the `.ion-palette-dark.ios` selector.
 3. Setting variables for the dark palette on `md` devices using the `.ion-palette-dark.md` selector.
 
diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.mdx
similarity index 83%
rename from docs/theming/high-contrast-mode.md
rename to docs/theming/high-contrast-mode.mdx
index df12417665b..16a27f8647a 100644
--- a/docs/theming/high-contrast-mode.md
+++ b/docs/theming/high-contrast-mode.mdx
@@ -17,7 +17,7 @@ Ionic offers palettes with increased contrast for users with low vision. These p
 
 ## Overview
 
-The default palette in Ionic provides [Ionic colors](./colors.md) that meet [Level AA color contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) as defined by Web Content Accessibility Guidelines (WCAG) when used with the appropriate contrast color. The [Ionic colors](./colors.md) in the high contrast palette have been updated to meet [Level AAA color contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html) when used with the appropriate contrast color. Notably, improvements have been made to the contrast of UI components, including border, text, and background colors. However, it's important to note that within the high contrast palette, priority is given to text legibility. This means that if adjusting the contrast of a UI component against the page background would significantly compromise the contrast between the component's text and its background, the contrast of the UI component background will remain unchanged.
+The default palette in Ionic provides [Ionic colors](./colors.mdx) that meet [Level AA color contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) as defined by Web Content Accessibility Guidelines (WCAG) when used with the appropriate contrast color. The [Ionic colors](./colors.mdx) in the high contrast palette have been updated to meet [Level AAA color contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html) when used with the appropriate contrast color. Notably, improvements have been made to the contrast of UI components, including border, text, and background colors. However, it's important to note that within the high contrast palette, priority is given to text legibility. This means that if adjusting the contrast of a UI component against the page background would significantly compromise the contrast between the component's text and its background, the contrast of the UI component background will remain unchanged.
 
 ## Enabling High Contrast Theme
 
@@ -131,7 +131,7 @@ import SystemHighContrastMode from '@site/static/usage/v10/theming/system-high-c
 
 :::caution
 
-The high contrast light palette must be imported after [core.css](../layout/global-stylesheets.md#corecss), and the
+The high contrast light palette must be imported after [core.css](../layout/global-stylesheets.mdx#corecss), and the
 high contrast dark palette must be imported after `dark.system.css`. Otherwise, the standard contrast palette will take priority.
 
 :::
@@ -177,7 +177,7 @@ import '@ionic/vue/css/palettes/high-contrast-dark.class.css';
 
 </Tabs>
 
-This approach activates the high contrast palette when the `.ion-palette-high-contrast` class is set on the `html` element. This class must be applied by the developer. This can be combined with the [`.ion-palette-dark` class](./dark-mode.md#css-class) to conditionally apply the high contrast dark palette.
+This approach activates the high contrast palette when the `.ion-palette-high-contrast` class is set on the `html` element. This class must be applied by the developer. This can be combined with the [`.ion-palette-dark` class](./dark-mode.mdx#css-class) to conditionally apply the high contrast dark palette.
 
 The following example combines site settings, system settings, and the toggle to decide when to show high contrast mode. The site's palette takes precedence over system settings. If your system settings differ from the site's palette when the demo loads, it will use the site's palette.
 
@@ -193,7 +193,7 @@ import ClassHighContrastMode from '@site/static/usage/v10/theming/class-high-con
 
 :::caution
 
-The high contrast light palette must be imported after [core.css](../layout/global-stylesheets.md#corecss),
+The high contrast light palette must be imported after [core.css](../layout/global-stylesheets.mdx#corecss),
 and the high contrast dark palette must be imported after `dark.class.css`. Otherwise, the standard contrast palette will take
 priority.
 
@@ -209,7 +209,7 @@ The `.ion-palette-high-contrast` class **must** be added to the `html` element i
 
 Ionic has a recommended high contrast palette that can be enabled in three different ways: [always](#always), based on [system](#system) settings, or by using a [CSS class](#css-class). Each of these methods involves importing the high contrast palette file with the corresponding name.
 
-The theme variables are set by importing the relevant high contrast palette file and do not need to be copied into an app. For more information on the variables being changed, including additional variables for further customization, refer to the [Themes](themes.md) section.
+The theme variables are set by importing the relevant high contrast palette file and do not need to be copied into an app. For more information on the variables being changed, including additional variables for further customization, refer to the [Themes](themes.mdx) section.
 
 The following provides details on how to customize the high contrast palette depending on how it was applied in an application.
 
@@ -221,7 +221,7 @@ The **always** high contrast palette can be accessed by importing `high-contrast
 
 The **always** high contrast palette behaves in the following ways:
 
-1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a high contrast palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher.
+1. Sets the [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement a high contrast palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher.
 2. Setting variables for the high contrast palette on `ios` devices using the `:root.ios` selector.
 3. Setting variables for the high contrast palette on `md` devices using the `:root.md` selector.
 
@@ -233,7 +233,7 @@ The **system** high contrast palette can be accessed by importing `high-contrast
 
 The **system** high contrast palette behaves in the following ways:
 
-1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a high contrast palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher.
+1. Sets the [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement a high contrast palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher.
 2. Setting variables for the high contrast palette on `ios` devices using the `:root.ios` selector.
 3. Setting variables for the high contrast palette on `md` devices using the `:root.md` selector.
 4. Only applies these variables when the [CSS media query for `prefers-contrast`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) is `more`.
@@ -246,7 +246,7 @@ The **class** high contrast palette can be accessed by importing `high-contrast.
 
 The **class** high contrast palette behaves in the following ways:
 
-1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a high contrast palette in the `.ion-palette-high-contrast` selector. The `.ion-palette-high-contrast` class must be added to the `html` element in an app.
+1. Sets the [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement a high contrast palette in the `.ion-palette-high-contrast` selector. The `.ion-palette-high-contrast` class must be added to the `html` element in an app.
 2. Setting variables for the high contrast palette on `ios` devices using the `.ion-palette-high-contrast.ios` selector.
 3. Setting variables for the high contrast palette on `md` devices using the `.ion-palette-high-contrast.md` selector.
 
diff --git a/versioned_docs/version-v9/theming/platform-styles.md b/docs/theming/platform-styles.mdx
similarity index 89%
rename from versioned_docs/version-v9/theming/platform-styles.md
rename to docs/theming/platform-styles.mdx
index 77d0a5665fc..e58a1be4579 100644
--- a/versioned_docs/version-v9/theming/platform-styles.md
+++ b/docs/theming/platform-styles.mdx
@@ -14,7 +14,7 @@ Ionic provides platform specific styles based on the device the application is r
 
 ## Ionic Modes
 
-Ionic uses **modes** to customize the look of components. Each **platform** has a default **mode**, but this can be overridden through the global [config](../developing/config.md). The following chart displays the default **mode** that is added to each **platform**:
+Ionic uses **modes** to customize the look of components. Each **platform** has a default **mode**, but this can be overridden through the global [config](../developing/config.mdx). The following chart displays the default **mode** that is added to each **platform**:
 
 | Platform  | Mode  | Description                                                                                                                      |
 | --------- | ----- | -------------------------------------------------------------------------------------------------------------------------------- |
@@ -28,7 +28,7 @@ For example, an app being viewed on an Android platform will use the `md` (Mater
 <html class="md"></html>
 ```
 
-_Note: The **platform** and the **mode** are not the same. The platform can be set to use any mode in the [config](../developing/config.md) of an app._
+_Note: The **platform** and the **mode** are not the same. The platform can be set to use any mode in the [config](../developing/config.mdx) of an app._
 
 ## Overriding Mode Styles
 
@@ -48,4 +48,4 @@ There are also many global CSS variables that can be used to override the styles
 }
 ```
 
-There are many global variables that can be overridden by mode, including [Ionic's color variables](colors.md), [theme variables](themes.md) and [global component variables](advanced.md).
+There are many global variables that can be overridden by mode, including [Ionic's color variables](colors.mdx), [theme variables](themes.mdx) and [global component variables](advanced.mdx).
diff --git a/docs/theming/themes.md b/docs/theming/themes.mdx
similarity index 98%
rename from docs/theming/themes.md
rename to docs/theming/themes.mdx
index 77c201b36b4..4b68041ec92 100644
--- a/docs/theming/themes.md
+++ b/docs/theming/themes.mdx
@@ -19,7 +19,7 @@ Ionic provides several global variables that are used throughout components to c
 
 The application colors are used in multiple places in Ionic. These are useful for easily creating dark palettes or themes that match a brand.
 
-It is important to note that the background and text color variables also require a rgb variable to be set in [rgb format](https://developer.mozilla.org/en-US/docs/Glossary/RGB). Refer to [The Alpha Problem](advanced.md#the-alpha-problem) for an explanation of why the `rgb` property is also needed.
+It is important to note that the background and text color variables also require a rgb variable to be set in [rgb format](https://developer.mozilla.org/en-US/docs/Glossary/RGB). Refer to [The Alpha Problem](advanced.mdx#the-alpha-problem) for an explanation of why the `rgb` property is also needed.
 
 | Name                                       | Description                                          |
 | ------------------------------------------ | ---------------------------------------------------- |
diff --git a/docs/troubleshooting/build.md b/docs/troubleshooting/build.mdx
similarity index 100%
rename from docs/troubleshooting/build.md
rename to docs/troubleshooting/build.mdx
diff --git a/docs/troubleshooting/cors.md b/docs/troubleshooting/cors.mdx
similarity index 100%
rename from docs/troubleshooting/cors.md
rename to docs/troubleshooting/cors.mdx
diff --git a/versioned_docs/version-v9/troubleshooting/debugging.md b/docs/troubleshooting/debugging.mdx
similarity index 99%
rename from versioned_docs/version-v9/troubleshooting/debugging.md
rename to docs/troubleshooting/debugging.mdx
index 96db1dce221..d10f67d5efc 100644
--- a/versioned_docs/version-v9/troubleshooting/debugging.md
+++ b/docs/troubleshooting/debugging.mdx
@@ -21,7 +21,7 @@ title: Debugging
 
 ## Live Reload
 
-Live Reload is useful for debugging native functionality (such as plugins) on device hardware. Rather than deploy a new native binary each time you make a code change, it reloads the browser (or WebView) when changes in the app are detected. Learn more about [Live Reload](../cli/livereload.md).
+Live Reload is useful for debugging native functionality (such as plugins) on device hardware. Rather than deploy a new native binary each time you make a code change, it reloads the browser (or WebView) when changes in the app are detected. Learn more about [Live Reload](../cli/livereload.mdx).
 
 ## iOS and Safari
 
diff --git a/versioned_docs/version-v9/troubleshooting/native.md b/docs/troubleshooting/native.mdx
similarity index 97%
rename from versioned_docs/version-v9/troubleshooting/native.md
rename to docs/troubleshooting/native.mdx
index 357e40b45f0..d600b0b820c 100644
--- a/versioned_docs/version-v9/troubleshooting/native.md
+++ b/docs/troubleshooting/native.mdx
@@ -18,7 +18,7 @@ Code Signing Error: Failed to create provisioning profile. The app ID "com.csfor
 
 Running an app on an iOS device requires a provisioning profile. If a provisioning profile has not been created yet follow these directions:
 
-1. **Set the [Package ID](../reference/glossary.md#package-id).**
+1. **Set the [Package ID](../reference/glossary.mdx#package-id).**
 
    For Capacitor, open the `capacitor.config.json` file and modify the `appId` property.
 
@@ -48,7 +48,7 @@ Running an app on an iOS device requires a provisioning profile. If a provisioni
 Error: Error code 65 for command: xcodebuild with args: -xcconfig,/Users/ionitron/projects/my-project/platforms/ios/cordova/build-debug.xcconfig,-workspace,SC project.xcworkspace,-scheme,SC project,-configuration,Debug,-sdk,iphonesimulator,-destination,platform=iOS Simulator,name=iPhone X,build,CONFIGURATION_BUILD_DIR=/Users/ionitron/projects/my-project/platforms/ios/build/emulator,SHARED_PRECOMPS_DIR=/Users/ionitron/projects/my-project/platforms/ios/build/sharedpch
 ```
 
-This error is an error code from Xcode that can be caused by provisioning issues or outdated cordova dependencies. To fix this error first make sure a provisioning profile has been generated using the above instructions and then try to [run the app from Xcode](../developing/ios.md#running-with-xcode).
+This error is an error code from Xcode that can be caused by provisioning issues or outdated cordova dependencies. To fix this error first make sure a provisioning profile has been generated using the above instructions and then try to [run the app from Xcode](../developing/ios.mdx#running-with-xcode).
 
 If this does not fix the error then run the following commands:
 
diff --git a/docs/troubleshooting/runtime.md b/docs/troubleshooting/runtime.mdx
similarity index 100%
rename from docs/troubleshooting/runtime.md
rename to docs/troubleshooting/runtime.mdx
diff --git a/docs/updating/10-0.md b/docs/updating/10-0.mdx
similarity index 100%
rename from docs/updating/10-0.md
rename to docs/updating/10-0.mdx
diff --git a/versioned_docs/version-v9/updating/4-0.md b/docs/updating/4-0.mdx
similarity index 96%
rename from versioned_docs/version-v9/updating/4-0.md
rename to docs/updating/4-0.mdx
index 98542a050f7..01b422e1e14 100644
--- a/versioned_docs/version-v9/updating/4-0.md
+++ b/docs/updating/4-0.mdx
@@ -23,7 +23,7 @@ For a **complete list of breaking changes** from Ionic 3 to Ionic 4, please refe
 
 We suggest the following general process when migrating an existing application from Ionic 3 to 4:
 
-1. Generate a new project using the `blank` starter (refer to [Starting an App](../developing/starting.md))
+1. Generate a new project using the `blank` starter (refer to [Starting an App](../developing/starting.mdx))
 1. Copy any Angular services from `src/providers` to `src/app/services`
    - Services should include `{ providedIn: 'root' }` in the `@Injectable()` decorator. For details, please refer to Angular [provider docs](https://angular.io/guide/providers).
 1. Copy the app's other root-level items (pipes, components, etc) keeping in mind that the directory structure changes from `src/components` to `src/app/components`, etc.
@@ -150,7 +150,7 @@ With V4, we're now able to utilize the typical events provided by [Angular](http
 
 Older events like `ionViewDidLoad`, `ionViewCanLeave`, and `ionViewCanEnter` have been removed, and the proper Angular alternatives should be used.
 
-For more details, check out the [router-outlet docs](../api/router-outlet.md)
+For more details, check out the [router-outlet docs](../api/router-outlet.mdx)
 
 ### Overlay Components
 
@@ -196,7 +196,7 @@ In V4, navigation received the most changes. Now, instead of using Ionic's own `
 
 To provide the platform-specific animations that users are used to, we have created `ion-router-outlet` for Angular Apps. This behaves in a similar manner to Angular's `router-outlet` but provides a stack-based navigation (tabs) and animations.
 
-For a detailed explanation in navigation works in a V4 project, check out the [Angular navigation guide](../angular/navigation.md).
+For a detailed explanation in navigation works in a V4 project, check out the [Angular navigation guide](../angular/navigation.mdx).
 
 ### Lazy Loading
 
@@ -246,7 +246,7 @@ export class HomePageModule {}
 export class AppModule {}
 ```
 
-For a detailed explanation of lazy loading in V4 project, check out the [Angular navigation guide](../angular/navigation.md#lazy-loading-routes).
+For a detailed explanation of lazy loading in V4 project, check out the [Angular navigation guide](../angular/navigation.mdx#lazy-loading-routes).
 
 ### Markup Changes
 
@@ -265,7 +265,7 @@ One upside is that for the most part, the Ionic UI components you know and love
 Here are some considerations to review before beginning the upgrade:
 
 - **App complexity**: Naturally, the larger and more complex the app is, the longer it will take to migrate.
-- **Framework support**: In 2019, Ionic will release full support for React. You can also use Ionic Framework components [without a framework](../intro/cdn.md). Since these are not production-ready yet, we recommend sticking with Angular or waiting until the other framework support is available.
+- **Framework support**: In 2019, Ionic will release full support for React. You can also use Ionic Framework components [without a framework](../intro/cdn.mdx). Since these are not production-ready yet, we recommend sticking with Angular or waiting until the other framework support is available.
 - **Budget and team makeup**: The length of a migration project will vary based on the size of your team, the complexity of the app, and the amount of time allotted to make the transition.
 
 ### Suggested Strategy
@@ -282,7 +282,7 @@ Please reference official [Angular upgrade guide](https://angular.io/guide/upgra
 
 ### Ionic Changes
 
-Our Ionic 3 to Ionic 4 migration sections above may prove to be a useful reference. Generate a new Ionic 4 project using the blank starter (refer to [Starting an App](../developing/starting.md)). Spend time getting familiar with Ionic 4 components. Happy building!
+Our Ionic 3 to Ionic 4 migration sections above may prove to be a useful reference. Generate a new Ionic 4 project using the blank starter (refer to [Starting an App](../developing/starting.mdx)). Spend time getting familiar with Ionic 4 components. Happy building!
 
 ### Need Assistance?
 
diff --git a/docs/updating/5-0.md b/docs/updating/5-0.mdx
similarity index 100%
rename from docs/updating/5-0.md
rename to docs/updating/5-0.mdx
diff --git a/docs/updating/6-0.md b/docs/updating/6-0.mdx
similarity index 100%
rename from docs/updating/6-0.md
rename to docs/updating/6-0.mdx
diff --git a/docs/updating/7-0.md b/docs/updating/7-0.mdx
similarity index 100%
rename from docs/updating/7-0.md
rename to docs/updating/7-0.mdx
diff --git a/docs/updating/8-0.md b/docs/updating/8-0.mdx
similarity index 100%
rename from docs/updating/8-0.md
rename to docs/updating/8-0.mdx
diff --git a/docs/updating/9-0.md b/docs/updating/9-0.mdx
similarity index 99%
rename from docs/updating/9-0.md
rename to docs/updating/9-0.mdx
index 130e5908542..05381929287 100644
--- a/docs/updating/9-0.md
+++ b/docs/updating/9-0.mdx
@@ -67,7 +67,7 @@ npm install @ionic/angular@latest @ionic/angular-server@latest @ionic/angular-to
 
 Ionic 9 supports zoneless change detection. Angular 21 made zoneless the default, so a new Ionic 9 app on Angular 21 or later runs without Zone.js out of the box and no change-detection provider is required.
 
-Without Zone.js, Angular does not automatically re-render when you update component state from an asynchronous callback (awaiting an overlay result, `setTimeout`, RxJS subscriptions, `Platform` events). In those cases you must notify Angular with a signal or `ChangeDetectorRef.markForCheck()`. Refer to [Zoneless Change Detection](/docs/angular/zoneless.md) for the patterns Ionic apps use.
+Without Zone.js, Angular does not automatically re-render when you update component state from an asynchronous callback (awaiting an overlay result, `setTimeout`, RxJS subscriptions, `Platform` events). In those cases you must notify Angular with a signal or `ChangeDetectorRef.markForCheck()`. Refer to [Zoneless Change Detection](/docs/angular/zoneless.mdx) for the patterns Ionic apps use.
 
 :::note
 
@@ -162,7 +162,7 @@ Ionic 9 makes standalone components the default import path. Change lazy-loaded
 
 #### IonicModule Deprecation
 
-`IonicModule` is deprecated in Ionic 9 and will be removed in a future major version. It remains fully functional, so no immediate action is required. When you are ready, migrate to `provideIonicAngular()`, which works in both standalone and NgModule-based apps. Refer to [Migrating from Modules to Standalone](/docs/angular/build-options.md#migrating-from-modules-to-standalone).
+`IonicModule` is deprecated in Ionic 9 and will be removed in a future major version. It remains fully functional, so no immediate action is required. When you are ready, migrate to `provideIonicAngular()`, which works in both standalone and NgModule-based apps. Refer to [Migrating from Modules to Standalone](/docs/angular/build-options.mdx#migrating-from-modules-to-standalone).
 
 #### CSS Imports
 
@@ -608,8 +608,8 @@ Update your selectors to account for these structural changes:
 
 The `ion-picker-legacy` and `ion-picker-legacy-column` components have been removed.
 
-- Replace `ion-picker-legacy` with `ion-picker`, and `ion-picker-legacy-column` with `ion-picker-column`. Since `ion-picker` renders inline instead of as an overlay, present it inside an `ion-modal` to keep the previous experience. Review the [Picker in Modal documentation](../api/picker.md#picker-in-modal) for more information.
-- Remove any usages of `pickerController`. If using React, remove any usages of the `useIonPicker` hook. These controller-based APIs have been removed. Use the [Picker](../api/picker.md) component instead.
+- Replace `ion-picker-legacy` with `ion-picker`, and `ion-picker-legacy-column` with `ion-picker-column`. Since `ion-picker` renders inline instead of as an overlay, present it inside an `ion-modal` to keep the previous experience. Review the [Picker in Modal documentation](../api/picker.mdx#picker-in-modal) for more information.
+- Remove any usages of `pickerController`. If using React, remove any usages of the `useIonPicker` hook. These controller-based APIs have been removed. Use the [Picker](../api/picker.mdx) component instead.
 - Remove any usages of the `PickerOptions`, `PickerButton`, `PickerColumn`, and `PickerColumnOption` type exports. These types were associated with the legacy picker and have been removed.
 
 ### Modal
@@ -650,7 +650,7 @@ If you relied on `ion-nav` to update the URL, use `ion-router-outlet` for URL-ba
 + <ion-router-outlet></ion-router-outlet>
 ```
 
-An `ion-nav` can still be nested inside a routed page for local, URL-less stack navigation. It manages its own stack via `root` and `ion-nav-link`, and the URL never changes as you push and pop. For a complete, working example, refer to [Using ion-nav within a Routed Page](../api/router.md#using-ion-nav-within-a-routed-page).
+An `ion-nav` can still be nested inside a routed page for local, URL-less stack navigation. It manages its own stack via `root` and `ion-nav-link`, and the URL never changes as you push and pop. For a complete, working example, refer to [Using ion-nav within a Routed Page](../api/router.mdx#using-ion-nav-within-a-routed-page).
 
 ### Router Outlet
 
diff --git a/docs/utilities/animations.md b/docs/utilities/animations.mdx
similarity index 99%
rename from docs/utilities/animations.md
rename to docs/utilities/animations.mdx
index 4cb8e5f9e39..c895cc9af82 100644
--- a/docs/utilities/animations.md
+++ b/docs/utilities/animations.mdx
@@ -212,7 +212,7 @@ import Chain from '@site/static/usage/v10/animations/chain/index.mdx';
 
 ## Gesture Animations
 
-Ionic Animations gives developers the ability to create powerful gesture-based animations by integrating seamlessly with [Ionic Gestures](gestures.md).
+Ionic Animations gives developers the ability to create powerful gesture-based animations by integrating seamlessly with [Ionic Gestures](gestures.mdx).
 
 In the following example we are creating a track along which we can drag the card element. Our `animation` object will take care of moving the card element either left or right, and our `gesture` object will instruct the `animation` object which direction to move in.
 
diff --git a/docs/utilities/gestures.md b/docs/utilities/gestures.mdx
similarity index 99%
rename from docs/utilities/gestures.md
rename to docs/utilities/gestures.mdx
index debf47e7c27..b6517366abc 100644
--- a/docs/utilities/gestures.md
+++ b/docs/utilities/gestures.mdx
@@ -178,7 +178,7 @@ In the example below, we want to be able to detect double clicks on an element.
 
 ## Gesture Animations
 
-See our guide on implementing gesture animations: [Gesture Animations with Ionic Animations](animations.md#gesture-animations)
+See our guide on implementing gesture animations: [Gesture Animations with Ionic Animations](animations.mdx#gesture-animations)
 
 ## Types
 
diff --git a/versioned_docs/version-v9/vue/add-to-existing.md b/docs/vue/add-to-existing.mdx
similarity index 92%
rename from versioned_docs/version-v9/vue/add-to-existing.md
rename to docs/vue/add-to-existing.mdx
index f4e88f1fc3f..684cde9ec48 100644
--- a/versioned_docs/version-v9/vue/add-to-existing.md
+++ b/docs/vue/add-to-existing.mdx
@@ -14,7 +14,7 @@ import DocsCards from '@components/global/DocsCards';
   />
 </head>
 
-This guide covers how to add Ionic Vue to an existing Vue project. If you're looking to start a new project from scratch, check out the [Ionic Vue Quickstart](/docs/vue/quickstart.md) guide. For an overview of how Ionic Vue works with Vue, including version support and tooling, check out the [Ionic Vue Overview](/docs/vue/overview.md).
+This guide covers how to add Ionic Vue to an existing Vue project. If you're looking to start a new project from scratch, check out the [Ionic Vue Quickstart](/docs/vue/quickstart.mdx) guide. For an overview of how Ionic Vue works with Vue, including version support and tooling, check out the [Ionic Vue Overview](/docs/vue/overview.mdx).
 
 :::tip
 
@@ -61,7 +61,7 @@ createApp(App).use(IonicVue).mount('#app');
 
 :::info
 
-While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.md).
+While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.mdx).
 
 :::
 
@@ -82,7 +82,7 @@ import { IonButton, IonDatetime } from '@ionic/vue';
 </script>
 ```
 
-Visit the [components](/docs/components.md) page for all of the available Ionic components.
+Visit the [components](/docs/components.mdx) page for all of the available Ionic components.
 
 ## Using Ionic Pages
 
@@ -110,7 +110,7 @@ import '@ionic/vue/css/flex-utils.css';
 import '@ionic/vue/css/display.css';
 ```
 
-These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.md) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.md).
+These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.mdx) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.mdx).
 
 #### 2. Set up Theming
 
@@ -162,7 +162,7 @@ import './theme/variables.css';
 createApp(App).use(IonicVue).mount('#app');
 ```
 
-The `variables.css` file can be used to create custom Ionic Framework themes. The `dark.system.css` import enables [dark mode support](/docs/theming/dark-mode.md) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables to `theme/variables.css`.
+The `variables.css` file can be used to create custom Ionic Framework themes. The `dark.system.css` import enables [dark mode support](/docs/theming/dark-mode.mdx) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables to `theme/variables.css`.
 
 #### 3. Update the App Component
 
diff --git a/docs/vue/build-options.md b/docs/vue/build-options.mdx
similarity index 100%
rename from docs/vue/build-options.md
rename to docs/vue/build-options.mdx
diff --git a/docs/vue/lifecycle.md b/docs/vue/lifecycle.mdx
similarity index 100%
rename from docs/vue/lifecycle.md
rename to docs/vue/lifecycle.mdx
diff --git a/docs/vue/navigation.md b/docs/vue/navigation.mdx
similarity index 100%
rename from docs/vue/navigation.md
rename to docs/vue/navigation.mdx
diff --git a/versioned_docs/version-v9/vue/overview.md b/docs/vue/overview.mdx
similarity index 92%
rename from versioned_docs/version-v9/vue/overview.md
rename to docs/vue/overview.mdx
index f867fe05796..d6f8d924161 100644
--- a/versioned_docs/version-v9/vue/overview.md
+++ b/docs/vue/overview.mdx
@@ -28,7 +28,7 @@ Ionic Vue projects use the same tooling as standard Vue CLI projects, so you can
 
 [Capacitor](https://capacitorjs.com) is the official cross-platform runtime for Ionic Vue, enabling your apps to run natively on iOS, Android, and the web with a single codebase.
 
-While you can use many [Cordova](https://cordova.apache.org/) plugins with Ionic Vue, Capacitor is the recommended and fully supported solution. The [Ionic CLI](../cli.md) does not provide official Cordova integration for Ionic Vue projects. For more information on using Cordova plugins with Capacitor, refer to the [Capacitor documentation](https://capacitorjs.com/docs/cordova).
+While you can use many [Cordova](https://cordova.apache.org/) plugins with Ionic Vue, Capacitor is the recommended and fully supported solution. The [Ionic CLI](../cli.mdx) does not provide official Cordova integration for Ionic Vue projects. For more information on using Cordova plugins with Capacitor, refer to the [Capacitor documentation](https://capacitorjs.com/docs/cordova).
 
 ## Installation
 
diff --git a/docs/vue/performance.md b/docs/vue/performance.mdx
similarity index 100%
rename from docs/vue/performance.md
rename to docs/vue/performance.mdx
diff --git a/docs/vue/platform.md b/docs/vue/platform.mdx
similarity index 100%
rename from docs/vue/platform.md
rename to docs/vue/platform.mdx
diff --git a/docs/vue/pwa.md b/docs/vue/pwa.mdx
similarity index 100%
rename from docs/vue/pwa.md
rename to docs/vue/pwa.mdx
diff --git a/versioned_docs/version-v9/vue/quickstart.md b/docs/vue/quickstart.mdx
similarity index 93%
rename from versioned_docs/version-v9/vue/quickstart.md
rename to docs/vue/quickstart.mdx
index a88b14871b0..bea913c0901 100644
--- a/versioned_docs/version-v9/vue/quickstart.md
+++ b/docs/vue/quickstart.mdx
@@ -162,17 +162,17 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue
 <!-- ...styles... -->
 ```
 
-This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
+This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.mdx#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
 :::tip[Learn More]
 
-For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
+For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.mdx), [Toolbar](/docs/api/toolbar.mdx), [Title](/docs/api/title.mdx), and [Content](/docs/api/content.mdx) documentation.
 
 :::
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.md) at the end of the `ion-content`:
+You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.mdx) at the end of the `ion-content`:
 
 ```vue title="src/views/HomePage.vue"
 <ion-content>
@@ -221,7 +221,7 @@ import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, Io
 </script>
 ```
 
-This creates a page with a [Back Button](/docs/api/back-button.md) in the [Toolbar](/docs/api/toolbar.md). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
+This creates a page with a [Back Button](/docs/api/back-button.mdx) in the [Toolbar](/docs/api/toolbar.mdx). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
 
 :::warning
 
@@ -266,7 +266,7 @@ Once that is done, update the button in `HomePage.vue`:
 
 :::info
 
-Navigating can also be performed programmatically using Vue Router, and routes can be lazy loaded for better performance. Refer to the [Vue Navigation documentation](/docs/vue/navigation.md) for more information.
+Navigating can also be performed programmatically using Vue Router, and routes can be lazy loaded for better performance. Refer to the [Vue Navigation documentation](/docs/vue/navigation.mdx) for more information.
 
 :::
 
@@ -292,7 +292,7 @@ Then, include them inside of the `ion-content`:
 
 Note that we are passing the imported SVG reference, **not** the icon name as a string.
 
-For more information, refer to the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
+For more information, refer to the [Icon documentation](/docs/api/icon.mdx) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
 ## Call Component Methods
 
@@ -347,7 +347,7 @@ To call methods on Ionic components:
 
 This pattern is necessary because Ionic components are built as Web Components. The `$el` property gives you access to the actual Web Component instance where the methods are defined.
 
-You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation.
+You can find available methods for each component in the [Methods](/docs/api/content.mdx#methods) section of their API documentation.
 
 ## Run on a Device
 
diff --git a/docs/vue/slides.md b/docs/vue/slides.mdx
similarity index 100%
rename from docs/vue/slides.md
rename to docs/vue/slides.mdx
diff --git a/docs/vue/storage.md b/docs/vue/storage.mdx
similarity index 100%
rename from docs/vue/storage.md
rename to docs/vue/storage.mdx
diff --git a/docs/vue/testing.md b/docs/vue/testing.mdx
similarity index 100%
rename from docs/vue/testing.md
rename to docs/vue/testing.mdx
diff --git a/versioned_docs/version-v9/vue/troubleshooting.md b/docs/vue/troubleshooting.mdx
similarity index 93%
rename from versioned_docs/version-v9/vue/troubleshooting.md
rename to docs/vue/troubleshooting.mdx
index 1383c81dfa3..a0f82ac90a9 100644
--- a/versioned_docs/version-v9/vue/troubleshooting.md
+++ b/docs/vue/troubleshooting.mdx
@@ -36,7 +36,7 @@ import { IonButton } from '@ionic/vue';
 </script>
 ```
 
-Prefer to register your components globally once? We have you covered. Our [Optimizing Your Build Guide](quickstart.md#optimizing-your-build) shows you how to register Ionic Vue components globally as well as the potential downsides to be aware of when using this approach.
+Prefer to register your components globally once? We have you covered. Our [Optimizing Your Build Guide](quickstart.mdx#optimizing-your-build) shows you how to register Ionic Vue components globally as well as the potential downsides to be aware of when using this approach.
 
 ## Slot attributes are deprecated
 
@@ -74,7 +74,7 @@ ionContentRef.value.scrollToBottom();
 
 In other framework integrations such as Ionic React, this is not needed as any `ref` you provide is automatically forwarded to the underlying Web Component instance. We are unable to do the same thing here due to limitations in how Vue manages refs.
 
-Refer to the [Quickstart Guide](quickstart.md#calling-methods-on-components) for more information.
+Refer to the [Quickstart Guide](quickstart.mdx#calling-methods-on-components) for more information.
 
 ## Page transitions are not working
 
@@ -97,7 +97,7 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue
 </script>
 ```
 
-Refer to the [IonPage documentation](navigation.md#ionpage) for more information.
+Refer to the [IonPage documentation](navigation.mdx#ionpage) for more information.
 
 ## Ionic events bound in JavaScript are not firing
 
diff --git a/docs/vue/utility-functions.md b/docs/vue/utility-functions.mdx
similarity index 100%
rename from docs/vue/utility-functions.md
rename to docs/vue/utility-functions.mdx
diff --git a/docs/vue/virtual-scroll.md b/docs/vue/virtual-scroll.mdx
similarity index 100%
rename from docs/vue/virtual-scroll.md
rename to docs/vue/virtual-scroll.mdx
diff --git a/docs/vue/your-first-app.md b/docs/vue/your-first-app.mdx
similarity index 96%
rename from docs/vue/your-first-app.md
rename to docs/vue/your-first-app.mdx
index 604849f47ca..7245297ac81 100644
--- a/docs/vue/your-first-app.md
+++ b/docs/vue/your-first-app.mdx
@@ -30,7 +30,7 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
 
 Highlights include:
 
-- One Vue-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.md).
+- One Vue-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.mdx).
 - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
 - Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs.
 
@@ -64,7 +64,7 @@ npm install -g @ionic/cli native-run cordova-res
 
 The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
 
-Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information.
 
 :::
 
@@ -172,7 +172,7 @@ import ExploreContainer from '@/components/ExploreContainer.vue';
 </script>
 ```
 
-`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.md#collapsible-large-titles) support). Rename both `ion-title` elements to:
+`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.mdx#collapsible-large-titles) support). Rename both `ion-title` elements to:
 
 ```vue
 <template>
@@ -197,7 +197,7 @@ import ExploreContainer from '@/components/ExploreContainer.vue';
 </template>
 ```
 
-We put the visual aspects of our app into `<ion-content>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.md) (FAB) to the bottom of the page and set the camera image as the icon.
+We put the visual aspects of our app into `<ion-content>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.mdx) (FAB) to the bottom of the page and set the camera image as the icon.
 
 ```vue
 <template>
diff --git a/versioned_docs/version-v9/vue/your-first-app/2-taking-photos.md b/docs/vue/your-first-app/2-taking-photos.mdx
similarity index 96%
rename from versioned_docs/version-v9/vue/your-first-app/2-taking-photos.md
rename to docs/vue/your-first-app/2-taking-photos.mdx
index df53544c349..80e0e8d98fd 100644
--- a/versioned_docs/version-v9/vue/your-first-app/2-taking-photos.md
+++ b/docs/vue/your-first-app/2-taking-photos.mdx
@@ -192,7 +192,7 @@ export interface UserPhoto {
 }
 ```
 
-Next, switch to `Tab2Page.vue` to display the images. We'll add a [Grid component](../../api/grid.md) to ensure the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `UserPhoto`'s `photos` array. For each item, add an `<img>` element and set its `src` property to the photo's path.
+Next, switch to `Tab2Page.vue` to display the images. We'll add a [Grid component](../../api/grid.mdx) to ensure the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `UserPhoto`'s `photos` array. For each item, add an `<img>` element and set its `src` property to the photo's path.
 
 ```vue
 <template>
diff --git a/docs/vue/your-first-app/3-saving-photos.md b/docs/vue/your-first-app/3-saving-photos.mdx
similarity index 100%
rename from docs/vue/your-first-app/3-saving-photos.md
rename to docs/vue/your-first-app/3-saving-photos.mdx
diff --git a/docs/vue/your-first-app/4-loading-photos.md b/docs/vue/your-first-app/4-loading-photos.mdx
similarity index 100%
rename from docs/vue/your-first-app/4-loading-photos.md
rename to docs/vue/your-first-app/4-loading-photos.mdx
diff --git a/versioned_docs/version-v9/vue/your-first-app/5-adding-mobile.md b/docs/vue/your-first-app/5-adding-mobile.mdx
similarity index 95%
rename from versioned_docs/version-v9/vue/your-first-app/5-adding-mobile.md
rename to docs/vue/your-first-app/5-adding-mobile.mdx
index 47f70db31d6..99c283cb9fa 100644
--- a/versioned_docs/version-v9/vue/your-first-app/5-adding-mobile.md
+++ b/docs/vue/your-first-app/5-adding-mobile.mdx
@@ -17,7 +17,7 @@ Our photo gallery app won’t be complete until it runs on iOS, Android, and the
 
 Let’s start with making some small code changes - then our app will “just work” when we deploy it to a device.
 
-Import the Ionic [Platform API](../platform.md) into `usePhotoGallery.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile).
+Import the Ionic [Platform API](../platform.mdx) into `usePhotoGallery.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile).
 
 Add `Platform` to the imports at the top of the file to use the `isPlatform` method.
 
@@ -70,7 +70,7 @@ const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> =
 };
 ```
 
-When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details on the File Protocol](../../core-concepts/webview.md#file-protocol)). To use this method, we'll need to import Capacitor into `usePhotoGallery.ts`.
+When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details on the File Protocol](../../core-concepts/webview.mdx#file-protocol)). To use this method, we'll need to import Capacitor into `usePhotoGallery.ts`.
 
 ```ts
 import { ref, watch, onMounted } from 'vue';
diff --git a/docs/vue/your-first-app/6-deploying-mobile.md b/docs/vue/your-first-app/6-deploying-mobile.mdx
similarity index 100%
rename from docs/vue/your-first-app/6-deploying-mobile.md
rename to docs/vue/your-first-app/6-deploying-mobile.mdx
diff --git a/docs/vue/your-first-app/7-live-reload.md b/docs/vue/your-first-app/7-live-reload.mdx
similarity index 95%
rename from docs/vue/your-first-app/7-live-reload.md
rename to docs/vue/your-first-app/7-live-reload.mdx
index 3948154af94..d3448c34b2e 100644
--- a/docs/vue/your-first-app/7-live-reload.md
+++ b/docs/vue/your-first-app/7-live-reload.mdx
@@ -13,7 +13,7 @@ sidebar_label: Live Reload
 
 So far, we’ve learned how easy it is to develop a cross-platform app that works everywhere. The development experience is pretty quick, but what if I told you there was a way to go faster?
 
-We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.md) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
+We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.mdx) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
 
 ## Live Reload
 
@@ -135,7 +135,7 @@ const showActionSheet = async (photo: UserPhoto) => {
 </script>
 ```
 
-Wrap each image in a `<button>` element with a click handler. When the app user taps on a photo in our gallery, we'll display an [Action Sheet](../../api/action-sheet.md) dialog with the option to either delete the selected photo or cancel (close) the dialog.
+Wrap each image in a `<button>` element with a click handler. When the app user taps on a photo in our gallery, we'll display an [Action Sheet](../../api/action-sheet.mdx) dialog with the option to either delete the selected photo or cancel (close) the dialog.
 
 ```vue
 <template>
diff --git a/versioned_docs/version-v9/vue/your-first-app/8-distribute.md b/docs/vue/your-first-app/8-distribute.mdx
similarity index 97%
rename from versioned_docs/version-v9/vue/your-first-app/8-distribute.md
rename to docs/vue/your-first-app/8-distribute.mdx
index 87c9647395d..85361db62e6 100644
--- a/versioned_docs/version-v9/vue/your-first-app/8-distribute.md
+++ b/docs/vue/your-first-app/8-distribute.mdx
@@ -102,6 +102,6 @@ For access to the ability to create a Native Configuration, you will need to be
 
 Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to your users' devices!
 
-There are many paths to follow from here. Try adding another [Ionic UI component](../../components.md) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
+There are many paths to follow from here. Try adding another [Ionic UI component](../../components.mdx) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
 
 Happy app building! 💙
diff --git a/docusaurus.config.js b/docusaurus.config.js
index b068a722e71..ee99e454ba0 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -82,16 +82,19 @@ module.exports = {
               return 'https://crowdin.com/project/ionic-docs';
             }
             let match;
-            if ((match = docPath.match(/api\/(.*)\.md/)) != null) {
-              return `https://github.com/ionic-team/ionic-docs/tree/main/docs/api/${match[1]}.md`;
+            // Anchored on the extension so an `.mdx` page cannot match the `.md` branch and
+            // produce a link to a file that no longer exists. The api pages carry whichever
+            // extension the source uses; the cli and native pages are generated and stay `.md`.
+            if ((match = docPath.match(/api\/(.*)\.(mdx?)$/)) != null) {
+              return `https://github.com/ionic-team/ionic-docs/tree/main/docs/api/${match[1]}.${match[2]}`;
             }
-            if ((match = docPath.match(/cli\/commands\/(.*)\.md/)) != null) {
+            if ((match = docPath.match(/cli\/commands\/(.*)\.mdx?$/)) != null) {
               return `https://github.com/ionic-team/ionic-cli/edit/develop/packages/@ionic/cli/src/commands/${match[1].replace(
                 '-',
                 '/'
               )}.ts`;
             }
-            if ((match = docPath.match(/native\/(.*)\.md/)) != null) {
+            if ((match = docPath.match(/native\/(.*)\.mdx?$/)) != null) {
               return `https://github.com/ionic-team/capacitor-plugins/edit/main/${match[1]}/README.md`;
             }
             return `https://github.com/ionic-team/ionic-docs/edit/main/${versionDocsDirPath}/${docPath}`;
diff --git a/package-lock.json b/package-lock.json
index 9b9071b3251..29521b62968 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,6 +35,7 @@
       "devDependencies": {
         "@docusaurus/module-type-aliases": "^3.10.2",
         "@docusaurus/tsconfig": "^3.10.2",
+        "@docusaurus/types": "^3.10.2",
         "@ionic/prettier-config": "^4.0.0",
         "@types/react": "^19.2.18",
         "cspell": "^10.0.1",
diff --git a/package.json b/package.json
index 59eb086adef..71538c014d3 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "prettier": "prettier \"./**/*.{html,ts,tsx,js,jsx,md,mdx}\" --cache",
     "start": "docusaurus start",
     "test": "vitest run",
+    "typecheck": "tsc --noEmit",
     "swizzle": "docusaurus swizzle",
     "spellcheck": "cspell --no-progress --gitignore \"**/*.{md,mdx}\""
   },
@@ -65,6 +66,7 @@
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.10.2",
     "@docusaurus/tsconfig": "^3.10.2",
+    "@docusaurus/types": "^3.10.2",
     "@ionic/prettier-config": "^4.0.0",
     "@types/react": "^19.2.18",
     "cspell": "^10.0.1",
diff --git a/src/components/page/reference/ReleaseNotes/release-notes.d.json.ts b/src/components/page/reference/ReleaseNotes/release-notes.d.json.ts
new file mode 100644
index 00000000000..925a836aba0
--- /dev/null
+++ b/src/components/page/reference/ReleaseNotes/release-notes.d.json.ts
@@ -0,0 +1,20 @@
+/**
+ * Types the sibling `release-notes.json`, which `scripts/release-notes.mjs` writes
+ * during `generate-markdown`. That file is gitignored and does not exist until a
+ * build runs, so this declaration keeps type checking independent of the GitHub API
+ * fetch that produces it.
+ *
+ * The `.d.json.ts` name is how TypeScript types a non-JS import; it requires
+ * `allowArbitraryExtensions`.
+ */
+
+declare const releases: {
+  body: string;
+  name: string;
+  published_at: string;
+  tag_name: string;
+  type: string;
+  version: string;
+}[];
+
+export default releases;
diff --git a/src/components/page/theming/SteppedColorGenerator/index.tsx b/src/components/page/theming/SteppedColorGenerator/index.tsx
index 226b6dfe51c..4d76ffb9936 100755
--- a/src/components/page/theming/SteppedColorGenerator/index.tsx
+++ b/src/components/page/theming/SteppedColorGenerator/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Component, Element, Listen, State, h } from '@stencil/core';
 import { useEffect, useState } from 'react';
 import CodeColor from '../CodeColor';
 
diff --git a/src/declarations.d.ts b/src/declarations.d.ts
index 60f4e2ce67f..05607352113 100644
--- a/src/declarations.d.ts
+++ b/src/declarations.d.ts
@@ -1,12 +1,15 @@
 /**
  * Type declarations for custom elements used in JSX.
  *
- * These are web components registered at runtime (not React components), so
- * TypeScript has no types for them and would otherwise reject the JSX usage.
+ * These are not React components, so TypeScript has no types for them and would
+ * otherwise reject the JSX usage:
  *
  * - `device-preview`: defined in src/components/global/Playground/device-preview.js
  *   and registered via `defineCustomElement()`. Used by the Playground to render
  *   examples inside an iOS/MD device frame.
+ * - `ion-icon`: registered by Ionic Framework, which the docs site loads globally.
+ * - `docs-card` / `docs-cards`: no JavaScript definition anywhere in this repo. They
+ *   are unregistered tags used purely as styling hooks by DocsCard and DocsCards.
  */
 // The import makes this file a module, so the block below augments React's
 // existing types instead of replacing them.
@@ -16,6 +19,9 @@ declare module 'react' {
   namespace JSX {
     interface IntrinsicElements {
       'device-preview': any;
+      'ion-icon': any;
+      'docs-card': any;
+      'docs-cards': any;
     }
   }
 }
diff --git a/src/theme/DocItem/Layout/frontMatter.interface.ts b/src/theme/DocItem/Layout/frontMatter.interface.ts
new file mode 100644
index 00000000000..babfb0118e7
--- /dev/null
+++ b/src/theme/DocItem/Layout/frontMatter.interface.ts
@@ -0,0 +1,23 @@
+/**
+ * Front matter fields this site adds on top of the ones Docusaurus defines. They are
+ * set in the front matter of pages under `docs/` and `versioned_docs/`, and read by
+ * the sibling `index.tsx`.
+ *
+ * This file is ours. Only `index.tsx` in this folder is a copy of upstream.
+ *
+ * Docusaurus exports `DocFrontMatter` as a type alias rather than an interface, so
+ * declaration merging cannot add to it in place. Intersecting with it here keeps the
+ * upstream fields, so reads of both these and Docusaurus's own stay checked.
+ */
+
+import type { DocFrontMatter } from '@docusaurus/plugin-content-docs';
+
+export type DocsFrontMatter = DocFrontMatter & {
+  /**
+   * Renders a phone demo beside the page content. Setting it also suppresses the
+   * table of contents, since the two compete for the same column.
+   */
+  demoUrl?: string;
+  /** Source link shown alongside the phone demo. */
+  demoSourceUrl?: string;
+};
diff --git a/src/theme/DocItem/Layout/index.tsx b/src/theme/DocItem/Layout/index.tsx
index 4e64afe30e9..890afb5446b 100644
--- a/src/theme/DocItem/Layout/index.tsx
+++ b/src/theme/DocItem/Layout/index.tsx
@@ -26,6 +26,7 @@ import styles from '@docusaurus/theme-classic/lib/theme/DocItem/Layout/styles.mo
 
 // CUSTOM CODE
 import DocDemo from '@components/global/DocDemo';
+import type {DocsFrontMatter} from './frontMatter.interface';
 // CUSTOM CODE END
 
 /**
@@ -37,7 +38,7 @@ function useDocTOC() {
 
   const hidden = frontMatter.hide_table_of_contents;
   // CUSTOM CODE
-  const demoUrl = frontMatter.demoUrl;
+  const demoUrl = (frontMatter as DocsFrontMatter).demoUrl;
   const canRender = !hidden && toc.length > 0 && !demoUrl;
   // CUSTOM CODE END
 
@@ -57,8 +58,7 @@ function useDocTOC() {
 // CUSTOM CODE
 function useDocDemo() {
   const {frontMatter} = useDoc();
-  const demoUrl = frontMatter.demoUrl;
-  const demoSourceUrl = frontMatter.demoSourceUrl;
+  const {demoUrl, demoSourceUrl} = frontMatter as DocsFrontMatter;
   return {
     demoUrl,
     demoSourceUrl,
diff --git a/static/code/stackblitz/v10/react/package-lock.json b/static/code/stackblitz/v10/react/package-lock.json
index 76f1a9529cf..8ea6b23f5e6 100644
--- a/static/code/stackblitz/v10/react/package-lock.json
+++ b/static/code/stackblitz/v10/react/package-lock.json
@@ -1303,9 +1303,9 @@
       }
     },
     "node_modules/web-vitals": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-6.2.0.tgz",
-      "integrity": "sha512-i2jhLkq6eB38jgJX5OIjEkyzQKgsG7FR56v7GphJNjzKAySgbRbwAfsFC0dDfHROWmCycf912SJpU2QoYIcMVg==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-6.2.1.tgz",
+      "integrity": "sha512-rLcLXA2sx6+9dE88NHFubwTtGxpK4yYBLj6qHPdFoCaLr0cXGb4efOqtKLlm4loGA4OEKHIQKMKzZkKyOh5ctw==",
       "license": "Apache-2.0"
     },
     "node_modules/yallist": {
diff --git a/static/code/stackblitz/v10/vue/package-lock.json b/static/code/stackblitz/v10/vue/package-lock.json
index a63e2bc8043..cccd51c138d 100644
--- a/static/code/stackblitz/v10/vue/package-lock.json
+++ b/static/code/stackblitz/v10/vue/package-lock.json
@@ -11,7 +11,7 @@
         "@ionic/vue": "9.0.1",
         "@ionic/vue-router": "9.0.1",
         "vue": "^3.2.25",
-        "vue-router": "5.2.0"
+        "vue-router": "5.3.0"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^6.0.0",
@@ -20,69 +20,6 @@
         "vue-tsc": "^3.0.0"
       }
     },
-    "node_modules/@babel/generator": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-8.0.0.tgz",
-      "integrity": "sha512-NT9NrVwJsbSV6Y2FSstWa71EETOnzrjkL5/wX3D2mYHtKM+qvqB1DvR4D0Setb/gDBsHzRICifwEWMO8CnTF6g==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^8.0.0",
-        "@babel/types": "^8.0.0",
-        "@jridgewell/gen-mapping": "^0.3.12",
-        "@jridgewell/trace-mapping": "^0.3.28",
-        "@types/jsesc": "^2.5.0",
-        "jsesc": "^3.0.2"
-      },
-      "engines": {
-        "node": "^22.18.0 || >=24.11.0"
-      }
-    },
-    "node_modules/@babel/generator/node_modules/@babel/helper-string-parser": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-8.0.0.tgz",
-      "integrity": "sha512-6mJgmFFFIIO82vvoLt9XtRC7/TkzXfts1t/SpRX4IHSzMgqoPYCWesVu1udUPUWioAE/2fcG6WuI8zrkE1gwrg==",
-      "license": "MIT",
-      "engines": {
-        "node": "^22.18.0 || >=24.11.0"
-      }
-    },
-    "node_modules/@babel/generator/node_modules/@babel/helper-validator-identifier": {
-      "version": "8.0.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-8.0.4.tgz",
-      "integrity": "sha512-4wFaiLd0bVo4cIoTXI3zKI038NIWE/cr3jvBjejOVYVxV/m8Ltav1USiGzG1fmS5J2RhgEOgXNNK46cRPnRsrg==",
-      "license": "MIT",
-      "engines": {
-        "node": "^22.18.0 || >=24.11.0"
-      }
-    },
-    "node_modules/@babel/generator/node_modules/@babel/parser": {
-      "version": "8.0.4",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-8.0.4.tgz",
-      "integrity": "sha512-srpptsAkEbbNIC/q8nT7o+m6CQe8CJUTV/t7MYc9NnWlgYVtHOb7JH6SorxMhN0kuRJjVqXbKClG6xSbPtzz+g==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^8.0.4"
-      },
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": "^22.18.0 || >=24.11.0"
-      }
-    },
-    "node_modules/@babel/generator/node_modules/@babel/types": {
-      "version": "8.0.4",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-8.0.4.tgz",
-      "integrity": "sha512-eY+Yn3dCqTGmyiq2QRU66lA5FL8lqqqvecHt0fF3uHONIa7ToYsaCiWV8lOKqAs0Rb2SjixiKFROngnulPtt2g==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-string-parser": "^8.0.0",
-        "@babel/helper-validator-identifier": "^8.0.4"
-      },
-      "engines": {
-        "node": "^22.18.0 || >=24.11.0"
-      }
-    },
     "node_modules/@babel/helper-string-parser": {
       "version": "7.29.7",
       "license": "MIT",
@@ -365,10 +302,6 @@
       "devOptional": true,
       "license": "MIT"
     },
-    "node_modules/@types/jsesc": {
-      "version": "2.5.1",
-      "license": "MIT"
-    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "6.0.8",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.8.tgz",
@@ -437,39 +370,39 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.41.tgz",
-      "integrity": "sha512-q0Xtv/F9w2YO/7htQhtiL+Ev2WCJbe5N2hc+XfgyKkEKqWpSxknmT8QOuGdEKNdjPq0c3F7rNpFkTo3Kfrm7pg==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.42.tgz",
+      "integrity": "sha512-2Ye1ilMtKXxl8qZUrQ5j0CdgenFp/HFQmta6rfRyfEsTG69L6Wk+tWuNoHYHMx9E8tF2Slvdg1FuwDvAXdy1LQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.29.8",
-        "@vue/shared": "3.5.41",
+        "@vue/shared": "3.5.42",
         "entities": "^7.0.1",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.1"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.41.tgz",
-      "integrity": "sha512-oKacVfNglLvGjnS6BXOlGL7EyG2h8X03pqXCjzotRZUaXGjbrTJUnVAQjrCqUnS+lyu31nwQjZY/d817GmCnfw==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.42.tgz",
+      "integrity": "sha512-qbhQZEFmycr+ni/qyuccS4sucNN7VAbDfbkvNxWOX2VfgFm90MNs3/UhRNKoPMEIVn0F8gdlYjLPvqxHwHeQOA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.5.41",
-        "@vue/shared": "3.5.41"
+        "@vue/compiler-core": "3.5.42",
+        "@vue/shared": "3.5.42"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.41.tgz",
-      "integrity": "sha512-XJhip7R2wy6vX3knCxdZN4KracFaZUef58s1KYewqluedHIJaPIVfXoYT7MF1F8nCvv6k8bWWxDC8opMkg1VTQ==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.42.tgz",
+      "integrity": "sha512-fkCAFB4okcAANGMThboWnScp/gzWjU0ZSkVnjTIiplmMDq2uq0tIB3j+xVu4rhv5rvOgBySCysudmbMd6xRRqw==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.29.8",
-        "@vue/compiler-core": "3.5.41",
-        "@vue/compiler-dom": "3.5.41",
-        "@vue/compiler-ssr": "3.5.41",
-        "@vue/shared": "3.5.41",
+        "@vue/compiler-core": "3.5.42",
+        "@vue/compiler-dom": "3.5.42",
+        "@vue/compiler-ssr": "3.5.42",
+        "@vue/shared": "3.5.42",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.21",
         "postcss": "^8.5.19",
@@ -477,13 +410,13 @@
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.41.tgz",
-      "integrity": "sha512-U3v5OejKEGqOI0Wy0+Sz7hGuIFZHA4LSXzrNM3IMIeDyJEBBfTpX26n3SDgToRpP2bLc9FfI2j/kSgcJ8Emq5A==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.42.tgz",
+      "integrity": "sha512-xmLk3wLkbizPAiLyomjgFFosf2ys9b5Ghb+oh/k2tnvipNz8OFrQOiTcWCzyK7MpBp9KkyGtfvgfLUivbmuGYA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.41",
-        "@vue/shared": "3.5.41"
+        "@vue/compiler-dom": "3.5.42",
+        "@vue/shared": "3.5.42"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -530,51 +463,51 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.41.tgz",
-      "integrity": "sha512-rznsqKM0np0x18EjzF8x88MpEhdNsffbvFbckLL5+oUKz1BxAImEmO7J1ArRYSyo6aQaVoBDp7jEkT91OOxydA==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.42.tgz",
+      "integrity": "sha512-TzNNfKpb7hDxbQltwAut8VDQA5YP+BuRlxntHUuRjyKwlMvmAPbs3unhCvieijifY6vFfVBwsS7wG/C7uq+bEQ==",
       "license": "MIT",
       "dependencies": {
-        "@vue/shared": "3.5.41"
+        "@vue/shared": "3.5.42"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.41.tgz",
-      "integrity": "sha512-Vcry58hiAKwGen9Z1jUZE0feFsNArPCMOImYI8el48A9Idf6DuQYD0U05zZIF2Iad1hGhPSvcbBbAOhNr55fhg==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.42.tgz",
+      "integrity": "sha512-9uACtuHs7vJGkm5Bp3xu4xRDLFTIYy5DgxpToVjqGIAhAEKwQfsaLvKINhM6nFVp6bZPRFGdDqd1g52MqKsotA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.41",
-        "@vue/shared": "3.5.41"
+        "@vue/reactivity": "3.5.42",
+        "@vue/shared": "3.5.42"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.41.tgz",
-      "integrity": "sha512-3vVBahVBS9+U6cmXBLyb8nE6/yYo4J/CGI9eVFs3KiMc0YHuudwKyShTD65jtJy/L9PUUxNAFu4cj4LiJ0UFbw==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.42.tgz",
+      "integrity": "sha512-rsCmhiWLaRxGltLwhlCWyYkFn7WAbKRh0q17eZ1A6Dq6eqc2ACQ61IIryxz0LrsvCzHSilLA9JHovVwM8CNE2g==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.41",
-        "@vue/runtime-core": "3.5.41",
-        "@vue/shared": "3.5.41",
+        "@vue/reactivity": "3.5.42",
+        "@vue/runtime-core": "3.5.42",
+        "@vue/shared": "3.5.42",
         "csstype": "^3.2.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.41.tgz",
-      "integrity": "sha512-n6hx/pNFfbD6SuyeuMVkvqox8bwf/ET9JlA/kAz/imw8sw++wkqKe2mHX5KutjPpbKE4Z56yTHszoOjGMI9igQ==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.42.tgz",
+      "integrity": "sha512-2++5dUyYS4gvo7xQXSECUDhB7TS0aOl5SeVfC5qSq1Jgfhjvegw1zqhwTIR3imZ+QYPJQw9gfcFvXGAjGZ7ajQ==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-ssr": "3.5.41",
-        "@vue/runtime-dom": "3.5.41",
-        "@vue/shared": "3.5.41"
+        "@vue/compiler-ssr": "3.5.42",
+        "@vue/runtime-dom": "3.5.42",
+        "@vue/shared": "3.5.42"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.41.tgz",
-      "integrity": "sha512-IOnwSCma8j+9xJT6b8H0dEYidC80NsYmNMlZxRsukYcSoGaDBohog5hDxzeUXdFeGWFA++vWvxqOmrr96VlqMA==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.42.tgz",
+      "integrity": "sha512-2rPxex1jQf4jvl9MOHl6YaXCPcrNqz/FstMOEh3QWY+/OME9nQTvl9WYeCwhW7AFjaR0SnngZGlp/wkR6rkI6g==",
       "license": "MIT"
     },
     "node_modules/acorn": {
@@ -644,7 +577,9 @@
       }
     },
     "node_modules/confbox": {
-      "version": "0.2.2",
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.4.tgz",
+      "integrity": "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==",
       "license": "MIT"
     },
     "node_modules/csstype": {
@@ -725,26 +660,6 @@
         "@stencil/core": "^4.43.5"
       }
     },
-    "node_modules/jsesc": {
-      "version": "3.1.0",
-      "license": "MIT",
-      "bin": {
-        "jsesc": "bin/jsesc"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/json5": {
-      "version": "2.2.3",
-      "license": "MIT",
-      "bin": {
-        "json5": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/local-pkg": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.2.1.tgz",
@@ -1137,16 +1052,16 @@
       "license": "MIT"
     },
     "node_modules/vue": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.41.tgz",
-      "integrity": "sha512-2laE0p+aK+/AOPG/XL/WepOs/GlK755LJ1XECi9kDUrz1FKNw8rb2Xzlw9JS1rqEV55nb0ttsKxVlTCcd+R5cg==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.42.tgz",
+      "integrity": "sha512-4RyHQTbQvOPs3MfvUO1Sg0YRrKNnA0mAVtvpd12Tg1fKDN7OHBUl1IqSn8zGJjK9nI3NkNp8cgTpVrSZC5TTcA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.41",
-        "@vue/compiler-sfc": "3.5.41",
-        "@vue/runtime-dom": "3.5.41",
-        "@vue/server-renderer": "3.5.41",
-        "@vue/shared": "3.5.41"
+        "@vue/compiler-dom": "3.5.42",
+        "@vue/compiler-sfc": "3.5.42",
+        "@vue/runtime-dom": "3.5.42",
+        "@vue/server-renderer": "3.5.42",
+        "@vue/shared": "3.5.42"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -1158,17 +1073,16 @@
       }
     },
     "node_modules/vue-router": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.2.0.tgz",
-      "integrity": "sha512-QAC5i0LEb1GLG0LXDQmHu8L7FX12j0KwU/JTKmLQUJMrn04gQdKP6Du+p0QwpHb3iy71vBlqnHQ8WAfOSAWhqw==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.3.0.tgz",
+      "integrity": "sha512-a2PBXX9yfkS58JzSJALUffgDa09lEzKmCcEnLaepoIr88L+9hEnsgEQkcadJGID+vtHa0gFpVo064zmylA9fcg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/generator": "^8.0.0",
         "@vue-macros/common": "^3.1.3",
         "@vue/devtools-api": "^8.1.5",
         "ast-walker-scope": "^0.9.0",
         "chokidar": "^5.0.0",
-        "json5": "^2.2.3",
+        "confbox": "^0.2.4",
         "local-pkg": "^1.2.1",
         "magic-string": "^0.30.21",
         "mlly": "^1.8.2",
@@ -1179,8 +1093,7 @@
         "scule": "^1.3.0",
         "tinyglobby": "^0.2.17",
         "unplugin": "^3.3.0",
-        "unplugin-utils": "^0.3.2",
-        "yaml": "^2.9.0"
+        "unplugin-utils": "^0.3.2"
       },
       "funding": {
         "url": "https://github.com/sponsors/posva"
@@ -1227,19 +1140,6 @@
     "node_modules/webpack-virtual-modules": {
       "version": "0.6.2",
       "license": "MIT"
-    },
-    "node_modules/yaml": {
-      "version": "2.9.0",
-      "license": "ISC",
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/eemeli"
-      }
     }
   }
 }
diff --git a/static/code/stackblitz/v10/vue/package.json b/static/code/stackblitz/v10/vue/package.json
index e3a9dba0c2a..fdd978c5cbb 100644
--- a/static/code/stackblitz/v10/vue/package.json
+++ b/static/code/stackblitz/v10/vue/package.json
@@ -11,7 +11,7 @@
     "@ionic/vue": "9.0.1",
     "@ionic/vue-router": "9.0.1",
     "vue": "^3.2.25",
-    "vue-router": "5.2.0"
+    "vue-router": "5.3.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.0",
diff --git a/static/code/stackblitz/v8/react/package-lock.json b/static/code/stackblitz/v8/react/package-lock.json
index 62b5d7e1df8..e6fb494884e 100644
--- a/static/code/stackblitz/v8/react/package-lock.json
+++ b/static/code/stackblitz/v8/react/package-lock.json
@@ -2142,9 +2142,9 @@
       }
     },
     "node_modules/web-vitals": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-6.2.0.tgz",
-      "integrity": "sha512-i2jhLkq6eB38jgJX5OIjEkyzQKgsG7FR56v7GphJNjzKAySgbRbwAfsFC0dDfHROWmCycf912SJpU2QoYIcMVg==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-6.2.1.tgz",
+      "integrity": "sha512-rLcLXA2sx6+9dE88NHFubwTtGxpK4yYBLj6qHPdFoCaLr0cXGb4efOqtKLlm4loGA4OEKHIQKMKzZkKyOh5ctw==",
       "license": "Apache-2.0"
     },
     "node_modules/yallist": {
diff --git a/static/code/stackblitz/v8/vue/package-lock.json b/static/code/stackblitz/v8/vue/package-lock.json
index a6b94ffabc1..026a1724df3 100644
--- a/static/code/stackblitz/v8/vue/package-lock.json
+++ b/static/code/stackblitz/v8/vue/package-lock.json
@@ -11,7 +11,7 @@
         "@ionic/vue": "8.8.19",
         "@ionic/vue-router": "8.8.19",
         "vue": "^3.2.25",
-        "vue-router": "5.2.0"
+        "vue-router": "5.3.0"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^6.0.0",
@@ -20,69 +20,6 @@
         "vue-tsc": "^3.0.0"
       }
     },
-    "node_modules/@babel/generator": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-8.0.0.tgz",
-      "integrity": "sha512-NT9NrVwJsbSV6Y2FSstWa71EETOnzrjkL5/wX3D2mYHtKM+qvqB1DvR4D0Setb/gDBsHzRICifwEWMO8CnTF6g==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^8.0.0",
-        "@babel/types": "^8.0.0",
-        "@jridgewell/gen-mapping": "^0.3.12",
-        "@jridgewell/trace-mapping": "^0.3.28",
-        "@types/jsesc": "^2.5.0",
-        "jsesc": "^3.0.2"
-      },
-      "engines": {
-        "node": "^22.18.0 || >=24.11.0"
-      }
-    },
-    "node_modules/@babel/generator/node_modules/@babel/helper-string-parser": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-8.0.0.tgz",
-      "integrity": "sha512-6mJgmFFFIIO82vvoLt9XtRC7/TkzXfts1t/SpRX4IHSzMgqoPYCWesVu1udUPUWioAE/2fcG6WuI8zrkE1gwrg==",
-      "license": "MIT",
-      "engines": {
-        "node": "^22.18.0 || >=24.11.0"
-      }
-    },
-    "node_modules/@babel/generator/node_modules/@babel/helper-validator-identifier": {
-      "version": "8.0.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-8.0.4.tgz",
-      "integrity": "sha512-4wFaiLd0bVo4cIoTXI3zKI038NIWE/cr3jvBjejOVYVxV/m8Ltav1USiGzG1fmS5J2RhgEOgXNNK46cRPnRsrg==",
-      "license": "MIT",
-      "engines": {
-        "node": "^22.18.0 || >=24.11.0"
-      }
-    },
-    "node_modules/@babel/generator/node_modules/@babel/parser": {
-      "version": "8.0.4",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-8.0.4.tgz",
-      "integrity": "sha512-srpptsAkEbbNIC/q8nT7o+m6CQe8CJUTV/t7MYc9NnWlgYVtHOb7JH6SorxMhN0kuRJjVqXbKClG6xSbPtzz+g==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^8.0.4"
-      },
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": "^22.18.0 || >=24.11.0"
-      }
-    },
-    "node_modules/@babel/generator/node_modules/@babel/types": {
-      "version": "8.0.4",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-8.0.4.tgz",
-      "integrity": "sha512-eY+Yn3dCqTGmyiq2QRU66lA5FL8lqqqvecHt0fF3uHONIa7ToYsaCiWV8lOKqAs0Rb2SjixiKFROngnulPtt2g==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-string-parser": "^8.0.0",
-        "@babel/helper-validator-identifier": "^8.0.4"
-      },
-      "engines": {
-        "node": "^22.18.0 || >=24.11.0"
-      }
-    },
     "node_modules/@babel/helper-string-parser": {
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
@@ -1047,12 +984,6 @@
       "devOptional": true,
       "license": "MIT"
     },
-    "node_modules/@types/jsesc": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@types/jsesc/-/jsesc-2.5.1.tgz",
-      "integrity": "sha512-9VN+6yxLOPLOav+7PwjZbxiID2bVaeq0ED4qSQmdQTdjnXJSaCVKTR58t15oqH1H5t8Ng2ZX1SabJVoN9Q34bw==",
-      "license": "MIT"
-    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "6.0.8",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.8.tgz",
@@ -1127,39 +1058,39 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.41.tgz",
-      "integrity": "sha512-q0Xtv/F9w2YO/7htQhtiL+Ev2WCJbe5N2hc+XfgyKkEKqWpSxknmT8QOuGdEKNdjPq0c3F7rNpFkTo3Kfrm7pg==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.42.tgz",
+      "integrity": "sha512-2Ye1ilMtKXxl8qZUrQ5j0CdgenFp/HFQmta6rfRyfEsTG69L6Wk+tWuNoHYHMx9E8tF2Slvdg1FuwDvAXdy1LQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.29.8",
-        "@vue/shared": "3.5.41",
+        "@vue/shared": "3.5.42",
         "entities": "^7.0.1",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.1"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.41.tgz",
-      "integrity": "sha512-oKacVfNglLvGjnS6BXOlGL7EyG2h8X03pqXCjzotRZUaXGjbrTJUnVAQjrCqUnS+lyu31nwQjZY/d817GmCnfw==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.42.tgz",
+      "integrity": "sha512-qbhQZEFmycr+ni/qyuccS4sucNN7VAbDfbkvNxWOX2VfgFm90MNs3/UhRNKoPMEIVn0F8gdlYjLPvqxHwHeQOA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.5.41",
-        "@vue/shared": "3.5.41"
+        "@vue/compiler-core": "3.5.42",
+        "@vue/shared": "3.5.42"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.41.tgz",
-      "integrity": "sha512-XJhip7R2wy6vX3knCxdZN4KracFaZUef58s1KYewqluedHIJaPIVfXoYT7MF1F8nCvv6k8bWWxDC8opMkg1VTQ==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.42.tgz",
+      "integrity": "sha512-fkCAFB4okcAANGMThboWnScp/gzWjU0ZSkVnjTIiplmMDq2uq0tIB3j+xVu4rhv5rvOgBySCysudmbMd6xRRqw==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.29.8",
-        "@vue/compiler-core": "3.5.41",
-        "@vue/compiler-dom": "3.5.41",
-        "@vue/compiler-ssr": "3.5.41",
-        "@vue/shared": "3.5.41",
+        "@vue/compiler-core": "3.5.42",
+        "@vue/compiler-dom": "3.5.42",
+        "@vue/compiler-ssr": "3.5.42",
+        "@vue/shared": "3.5.42",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.21",
         "postcss": "^8.5.19",
@@ -1167,13 +1098,13 @@
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.41.tgz",
-      "integrity": "sha512-U3v5OejKEGqOI0Wy0+Sz7hGuIFZHA4LSXzrNM3IMIeDyJEBBfTpX26n3SDgToRpP2bLc9FfI2j/kSgcJ8Emq5A==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.42.tgz",
+      "integrity": "sha512-xmLk3wLkbizPAiLyomjgFFosf2ys9b5Ghb+oh/k2tnvipNz8OFrQOiTcWCzyK7MpBp9KkyGtfvgfLUivbmuGYA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.41",
-        "@vue/shared": "3.5.41"
+        "@vue/compiler-dom": "3.5.42",
+        "@vue/shared": "3.5.42"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -1220,51 +1151,51 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.41.tgz",
-      "integrity": "sha512-rznsqKM0np0x18EjzF8x88MpEhdNsffbvFbckLL5+oUKz1BxAImEmO7J1ArRYSyo6aQaVoBDp7jEkT91OOxydA==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.42.tgz",
+      "integrity": "sha512-TzNNfKpb7hDxbQltwAut8VDQA5YP+BuRlxntHUuRjyKwlMvmAPbs3unhCvieijifY6vFfVBwsS7wG/C7uq+bEQ==",
       "license": "MIT",
       "dependencies": {
-        "@vue/shared": "3.5.41"
+        "@vue/shared": "3.5.42"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.41.tgz",
-      "integrity": "sha512-Vcry58hiAKwGen9Z1jUZE0feFsNArPCMOImYI8el48A9Idf6DuQYD0U05zZIF2Iad1hGhPSvcbBbAOhNr55fhg==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.42.tgz",
+      "integrity": "sha512-9uACtuHs7vJGkm5Bp3xu4xRDLFTIYy5DgxpToVjqGIAhAEKwQfsaLvKINhM6nFVp6bZPRFGdDqd1g52MqKsotA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.41",
-        "@vue/shared": "3.5.41"
+        "@vue/reactivity": "3.5.42",
+        "@vue/shared": "3.5.42"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.41.tgz",
-      "integrity": "sha512-3vVBahVBS9+U6cmXBLyb8nE6/yYo4J/CGI9eVFs3KiMc0YHuudwKyShTD65jtJy/L9PUUxNAFu4cj4LiJ0UFbw==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.42.tgz",
+      "integrity": "sha512-rsCmhiWLaRxGltLwhlCWyYkFn7WAbKRh0q17eZ1A6Dq6eqc2ACQ61IIryxz0LrsvCzHSilLA9JHovVwM8CNE2g==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.41",
-        "@vue/runtime-core": "3.5.41",
-        "@vue/shared": "3.5.41",
+        "@vue/reactivity": "3.5.42",
+        "@vue/runtime-core": "3.5.42",
+        "@vue/shared": "3.5.42",
         "csstype": "^3.2.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.41.tgz",
-      "integrity": "sha512-n6hx/pNFfbD6SuyeuMVkvqox8bwf/ET9JlA/kAz/imw8sw++wkqKe2mHX5KutjPpbKE4Z56yTHszoOjGMI9igQ==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.42.tgz",
+      "integrity": "sha512-2++5dUyYS4gvo7xQXSECUDhB7TS0aOl5SeVfC5qSq1Jgfhjvegw1zqhwTIR3imZ+QYPJQw9gfcFvXGAjGZ7ajQ==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-ssr": "3.5.41",
-        "@vue/runtime-dom": "3.5.41",
-        "@vue/shared": "3.5.41"
+        "@vue/compiler-ssr": "3.5.42",
+        "@vue/runtime-dom": "3.5.42",
+        "@vue/shared": "3.5.42"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.41.tgz",
-      "integrity": "sha512-IOnwSCma8j+9xJT6b8H0dEYidC80NsYmNMlZxRsukYcSoGaDBohog5hDxzeUXdFeGWFA++vWvxqOmrr96VlqMA==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.42.tgz",
+      "integrity": "sha512-2rPxex1jQf4jvl9MOHl6YaXCPcrNqz/FstMOEh3QWY+/OME9nQTvl9WYeCwhW7AFjaR0SnngZGlp/wkR6rkI6g==",
       "license": "MIT"
     },
     "node_modules/acorn": {
@@ -1467,30 +1398,6 @@
         "@stencil/core": "^4.35.3"
       }
     },
-    "node_modules/jsesc": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
-      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
-      "license": "MIT",
-      "bin": {
-        "jsesc": "bin/jsesc"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/json5": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "license": "MIT",
-      "bin": {
-        "json5": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/local-pkg": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.2.1.tgz",
@@ -2067,16 +1974,16 @@
       "license": "MIT"
     },
     "node_modules/vue": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.41.tgz",
-      "integrity": "sha512-2laE0p+aK+/AOPG/XL/WepOs/GlK755LJ1XECi9kDUrz1FKNw8rb2Xzlw9JS1rqEV55nb0ttsKxVlTCcd+R5cg==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.42.tgz",
+      "integrity": "sha512-4RyHQTbQvOPs3MfvUO1Sg0YRrKNnA0mAVtvpd12Tg1fKDN7OHBUl1IqSn8zGJjK9nI3NkNp8cgTpVrSZC5TTcA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.41",
-        "@vue/compiler-sfc": "3.5.41",
-        "@vue/runtime-dom": "3.5.41",
-        "@vue/server-renderer": "3.5.41",
-        "@vue/shared": "3.5.41"
+        "@vue/compiler-dom": "3.5.42",
+        "@vue/compiler-sfc": "3.5.42",
+        "@vue/runtime-dom": "3.5.42",
+        "@vue/server-renderer": "3.5.42",
+        "@vue/shared": "3.5.42"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -2088,17 +1995,16 @@
       }
     },
     "node_modules/vue-router": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.2.0.tgz",
-      "integrity": "sha512-QAC5i0LEb1GLG0LXDQmHu8L7FX12j0KwU/JTKmLQUJMrn04gQdKP6Du+p0QwpHb3iy71vBlqnHQ8WAfOSAWhqw==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.3.0.tgz",
+      "integrity": "sha512-a2PBXX9yfkS58JzSJALUffgDa09lEzKmCcEnLaepoIr88L+9hEnsgEQkcadJGID+vtHa0gFpVo064zmylA9fcg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/generator": "^8.0.0",
         "@vue-macros/common": "^3.1.3",
         "@vue/devtools-api": "^8.1.5",
         "ast-walker-scope": "^0.9.0",
         "chokidar": "^5.0.0",
-        "json5": "^2.2.3",
+        "confbox": "^0.2.4",
         "local-pkg": "^1.2.1",
         "magic-string": "^0.30.21",
         "mlly": "^1.8.2",
@@ -2109,8 +2015,7 @@
         "scule": "^1.3.0",
         "tinyglobby": "^0.2.17",
         "unplugin": "^3.3.0",
-        "unplugin-utils": "^0.3.2",
-        "yaml": "^2.9.0"
+        "unplugin-utils": "^0.3.2"
       },
       "funding": {
         "url": "https://github.com/sponsors/posva"
@@ -2159,21 +2064,6 @@
       "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
       "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
       "license": "MIT"
-    },
-    "node_modules/yaml": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
-      "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
-      "license": "ISC",
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/eemeli"
-      }
     }
   }
 }
diff --git a/static/code/stackblitz/v8/vue/package.json b/static/code/stackblitz/v8/vue/package.json
index 576ad611081..313e657427a 100644
--- a/static/code/stackblitz/v8/vue/package.json
+++ b/static/code/stackblitz/v8/vue/package.json
@@ -11,7 +11,7 @@
     "@ionic/vue": "8.8.19",
     "@ionic/vue-router": "8.8.19",
     "vue": "^3.2.25",
-    "vue-router": "5.2.0"
+    "vue-router": "5.3.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.0",
diff --git a/static/code/stackblitz/v9/react/package-lock.json b/static/code/stackblitz/v9/react/package-lock.json
index 76f1a9529cf..8ea6b23f5e6 100644
--- a/static/code/stackblitz/v9/react/package-lock.json
+++ b/static/code/stackblitz/v9/react/package-lock.json
@@ -1303,9 +1303,9 @@
       }
     },
     "node_modules/web-vitals": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-6.2.0.tgz",
-      "integrity": "sha512-i2jhLkq6eB38jgJX5OIjEkyzQKgsG7FR56v7GphJNjzKAySgbRbwAfsFC0dDfHROWmCycf912SJpU2QoYIcMVg==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-6.2.1.tgz",
+      "integrity": "sha512-rLcLXA2sx6+9dE88NHFubwTtGxpK4yYBLj6qHPdFoCaLr0cXGb4efOqtKLlm4loGA4OEKHIQKMKzZkKyOh5ctw==",
       "license": "Apache-2.0"
     },
     "node_modules/yallist": {
diff --git a/static/code/stackblitz/v9/vue/package-lock.json b/static/code/stackblitz/v9/vue/package-lock.json
index a63e2bc8043..cccd51c138d 100644
--- a/static/code/stackblitz/v9/vue/package-lock.json
+++ b/static/code/stackblitz/v9/vue/package-lock.json
@@ -11,7 +11,7 @@
         "@ionic/vue": "9.0.1",
         "@ionic/vue-router": "9.0.1",
         "vue": "^3.2.25",
-        "vue-router": "5.2.0"
+        "vue-router": "5.3.0"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^6.0.0",
@@ -20,69 +20,6 @@
         "vue-tsc": "^3.0.0"
       }
     },
-    "node_modules/@babel/generator": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-8.0.0.tgz",
-      "integrity": "sha512-NT9NrVwJsbSV6Y2FSstWa71EETOnzrjkL5/wX3D2mYHtKM+qvqB1DvR4D0Setb/gDBsHzRICifwEWMO8CnTF6g==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^8.0.0",
-        "@babel/types": "^8.0.0",
-        "@jridgewell/gen-mapping": "^0.3.12",
-        "@jridgewell/trace-mapping": "^0.3.28",
-        "@types/jsesc": "^2.5.0",
-        "jsesc": "^3.0.2"
-      },
-      "engines": {
-        "node": "^22.18.0 || >=24.11.0"
-      }
-    },
-    "node_modules/@babel/generator/node_modules/@babel/helper-string-parser": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-8.0.0.tgz",
-      "integrity": "sha512-6mJgmFFFIIO82vvoLt9XtRC7/TkzXfts1t/SpRX4IHSzMgqoPYCWesVu1udUPUWioAE/2fcG6WuI8zrkE1gwrg==",
-      "license": "MIT",
-      "engines": {
-        "node": "^22.18.0 || >=24.11.0"
-      }
-    },
-    "node_modules/@babel/generator/node_modules/@babel/helper-validator-identifier": {
-      "version": "8.0.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-8.0.4.tgz",
-      "integrity": "sha512-4wFaiLd0bVo4cIoTXI3zKI038NIWE/cr3jvBjejOVYVxV/m8Ltav1USiGzG1fmS5J2RhgEOgXNNK46cRPnRsrg==",
-      "license": "MIT",
-      "engines": {
-        "node": "^22.18.0 || >=24.11.0"
-      }
-    },
-    "node_modules/@babel/generator/node_modules/@babel/parser": {
-      "version": "8.0.4",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-8.0.4.tgz",
-      "integrity": "sha512-srpptsAkEbbNIC/q8nT7o+m6CQe8CJUTV/t7MYc9NnWlgYVtHOb7JH6SorxMhN0kuRJjVqXbKClG6xSbPtzz+g==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^8.0.4"
-      },
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": "^22.18.0 || >=24.11.0"
-      }
-    },
-    "node_modules/@babel/generator/node_modules/@babel/types": {
-      "version": "8.0.4",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-8.0.4.tgz",
-      "integrity": "sha512-eY+Yn3dCqTGmyiq2QRU66lA5FL8lqqqvecHt0fF3uHONIa7ToYsaCiWV8lOKqAs0Rb2SjixiKFROngnulPtt2g==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-string-parser": "^8.0.0",
-        "@babel/helper-validator-identifier": "^8.0.4"
-      },
-      "engines": {
-        "node": "^22.18.0 || >=24.11.0"
-      }
-    },
     "node_modules/@babel/helper-string-parser": {
       "version": "7.29.7",
       "license": "MIT",
@@ -365,10 +302,6 @@
       "devOptional": true,
       "license": "MIT"
     },
-    "node_modules/@types/jsesc": {
-      "version": "2.5.1",
-      "license": "MIT"
-    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "6.0.8",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.8.tgz",
@@ -437,39 +370,39 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.41.tgz",
-      "integrity": "sha512-q0Xtv/F9w2YO/7htQhtiL+Ev2WCJbe5N2hc+XfgyKkEKqWpSxknmT8QOuGdEKNdjPq0c3F7rNpFkTo3Kfrm7pg==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.42.tgz",
+      "integrity": "sha512-2Ye1ilMtKXxl8qZUrQ5j0CdgenFp/HFQmta6rfRyfEsTG69L6Wk+tWuNoHYHMx9E8tF2Slvdg1FuwDvAXdy1LQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.29.8",
-        "@vue/shared": "3.5.41",
+        "@vue/shared": "3.5.42",
         "entities": "^7.0.1",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.1"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.41.tgz",
-      "integrity": "sha512-oKacVfNglLvGjnS6BXOlGL7EyG2h8X03pqXCjzotRZUaXGjbrTJUnVAQjrCqUnS+lyu31nwQjZY/d817GmCnfw==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.42.tgz",
+      "integrity": "sha512-qbhQZEFmycr+ni/qyuccS4sucNN7VAbDfbkvNxWOX2VfgFm90MNs3/UhRNKoPMEIVn0F8gdlYjLPvqxHwHeQOA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.5.41",
-        "@vue/shared": "3.5.41"
+        "@vue/compiler-core": "3.5.42",
+        "@vue/shared": "3.5.42"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.41.tgz",
-      "integrity": "sha512-XJhip7R2wy6vX3knCxdZN4KracFaZUef58s1KYewqluedHIJaPIVfXoYT7MF1F8nCvv6k8bWWxDC8opMkg1VTQ==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.42.tgz",
+      "integrity": "sha512-fkCAFB4okcAANGMThboWnScp/gzWjU0ZSkVnjTIiplmMDq2uq0tIB3j+xVu4rhv5rvOgBySCysudmbMd6xRRqw==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.29.8",
-        "@vue/compiler-core": "3.5.41",
-        "@vue/compiler-dom": "3.5.41",
-        "@vue/compiler-ssr": "3.5.41",
-        "@vue/shared": "3.5.41",
+        "@vue/compiler-core": "3.5.42",
+        "@vue/compiler-dom": "3.5.42",
+        "@vue/compiler-ssr": "3.5.42",
+        "@vue/shared": "3.5.42",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.21",
         "postcss": "^8.5.19",
@@ -477,13 +410,13 @@
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.41.tgz",
-      "integrity": "sha512-U3v5OejKEGqOI0Wy0+Sz7hGuIFZHA4LSXzrNM3IMIeDyJEBBfTpX26n3SDgToRpP2bLc9FfI2j/kSgcJ8Emq5A==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.42.tgz",
+      "integrity": "sha512-xmLk3wLkbizPAiLyomjgFFosf2ys9b5Ghb+oh/k2tnvipNz8OFrQOiTcWCzyK7MpBp9KkyGtfvgfLUivbmuGYA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.41",
-        "@vue/shared": "3.5.41"
+        "@vue/compiler-dom": "3.5.42",
+        "@vue/shared": "3.5.42"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -530,51 +463,51 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.41.tgz",
-      "integrity": "sha512-rznsqKM0np0x18EjzF8x88MpEhdNsffbvFbckLL5+oUKz1BxAImEmO7J1ArRYSyo6aQaVoBDp7jEkT91OOxydA==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.42.tgz",
+      "integrity": "sha512-TzNNfKpb7hDxbQltwAut8VDQA5YP+BuRlxntHUuRjyKwlMvmAPbs3unhCvieijifY6vFfVBwsS7wG/C7uq+bEQ==",
       "license": "MIT",
       "dependencies": {
-        "@vue/shared": "3.5.41"
+        "@vue/shared": "3.5.42"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.41.tgz",
-      "integrity": "sha512-Vcry58hiAKwGen9Z1jUZE0feFsNArPCMOImYI8el48A9Idf6DuQYD0U05zZIF2Iad1hGhPSvcbBbAOhNr55fhg==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.42.tgz",
+      "integrity": "sha512-9uACtuHs7vJGkm5Bp3xu4xRDLFTIYy5DgxpToVjqGIAhAEKwQfsaLvKINhM6nFVp6bZPRFGdDqd1g52MqKsotA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.41",
-        "@vue/shared": "3.5.41"
+        "@vue/reactivity": "3.5.42",
+        "@vue/shared": "3.5.42"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.41.tgz",
-      "integrity": "sha512-3vVBahVBS9+U6cmXBLyb8nE6/yYo4J/CGI9eVFs3KiMc0YHuudwKyShTD65jtJy/L9PUUxNAFu4cj4LiJ0UFbw==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.42.tgz",
+      "integrity": "sha512-rsCmhiWLaRxGltLwhlCWyYkFn7WAbKRh0q17eZ1A6Dq6eqc2ACQ61IIryxz0LrsvCzHSilLA9JHovVwM8CNE2g==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.41",
-        "@vue/runtime-core": "3.5.41",
-        "@vue/shared": "3.5.41",
+        "@vue/reactivity": "3.5.42",
+        "@vue/runtime-core": "3.5.42",
+        "@vue/shared": "3.5.42",
         "csstype": "^3.2.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.41.tgz",
-      "integrity": "sha512-n6hx/pNFfbD6SuyeuMVkvqox8bwf/ET9JlA/kAz/imw8sw++wkqKe2mHX5KutjPpbKE4Z56yTHszoOjGMI9igQ==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.42.tgz",
+      "integrity": "sha512-2++5dUyYS4gvo7xQXSECUDhB7TS0aOl5SeVfC5qSq1Jgfhjvegw1zqhwTIR3imZ+QYPJQw9gfcFvXGAjGZ7ajQ==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-ssr": "3.5.41",
-        "@vue/runtime-dom": "3.5.41",
-        "@vue/shared": "3.5.41"
+        "@vue/compiler-ssr": "3.5.42",
+        "@vue/runtime-dom": "3.5.42",
+        "@vue/shared": "3.5.42"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.41.tgz",
-      "integrity": "sha512-IOnwSCma8j+9xJT6b8H0dEYidC80NsYmNMlZxRsukYcSoGaDBohog5hDxzeUXdFeGWFA++vWvxqOmrr96VlqMA==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.42.tgz",
+      "integrity": "sha512-2rPxex1jQf4jvl9MOHl6YaXCPcrNqz/FstMOEh3QWY+/OME9nQTvl9WYeCwhW7AFjaR0SnngZGlp/wkR6rkI6g==",
       "license": "MIT"
     },
     "node_modules/acorn": {
@@ -644,7 +577,9 @@
       }
     },
     "node_modules/confbox": {
-      "version": "0.2.2",
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.4.tgz",
+      "integrity": "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==",
       "license": "MIT"
     },
     "node_modules/csstype": {
@@ -725,26 +660,6 @@
         "@stencil/core": "^4.43.5"
       }
     },
-    "node_modules/jsesc": {
-      "version": "3.1.0",
-      "license": "MIT",
-      "bin": {
-        "jsesc": "bin/jsesc"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/json5": {
-      "version": "2.2.3",
-      "license": "MIT",
-      "bin": {
-        "json5": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/local-pkg": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.2.1.tgz",
@@ -1137,16 +1052,16 @@
       "license": "MIT"
     },
     "node_modules/vue": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.41.tgz",
-      "integrity": "sha512-2laE0p+aK+/AOPG/XL/WepOs/GlK755LJ1XECi9kDUrz1FKNw8rb2Xzlw9JS1rqEV55nb0ttsKxVlTCcd+R5cg==",
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.42.tgz",
+      "integrity": "sha512-4RyHQTbQvOPs3MfvUO1Sg0YRrKNnA0mAVtvpd12Tg1fKDN7OHBUl1IqSn8zGJjK9nI3NkNp8cgTpVrSZC5TTcA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.41",
-        "@vue/compiler-sfc": "3.5.41",
-        "@vue/runtime-dom": "3.5.41",
-        "@vue/server-renderer": "3.5.41",
-        "@vue/shared": "3.5.41"
+        "@vue/compiler-dom": "3.5.42",
+        "@vue/compiler-sfc": "3.5.42",
+        "@vue/runtime-dom": "3.5.42",
+        "@vue/server-renderer": "3.5.42",
+        "@vue/shared": "3.5.42"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -1158,17 +1073,16 @@
       }
     },
     "node_modules/vue-router": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.2.0.tgz",
-      "integrity": "sha512-QAC5i0LEb1GLG0LXDQmHu8L7FX12j0KwU/JTKmLQUJMrn04gQdKP6Du+p0QwpHb3iy71vBlqnHQ8WAfOSAWhqw==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.3.0.tgz",
+      "integrity": "sha512-a2PBXX9yfkS58JzSJALUffgDa09lEzKmCcEnLaepoIr88L+9hEnsgEQkcadJGID+vtHa0gFpVo064zmylA9fcg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/generator": "^8.0.0",
         "@vue-macros/common": "^3.1.3",
         "@vue/devtools-api": "^8.1.5",
         "ast-walker-scope": "^0.9.0",
         "chokidar": "^5.0.0",
-        "json5": "^2.2.3",
+        "confbox": "^0.2.4",
         "local-pkg": "^1.2.1",
         "magic-string": "^0.30.21",
         "mlly": "^1.8.2",
@@ -1179,8 +1093,7 @@
         "scule": "^1.3.0",
         "tinyglobby": "^0.2.17",
         "unplugin": "^3.3.0",
-        "unplugin-utils": "^0.3.2",
-        "yaml": "^2.9.0"
+        "unplugin-utils": "^0.3.2"
       },
       "funding": {
         "url": "https://github.com/sponsors/posva"
@@ -1227,19 +1140,6 @@
     "node_modules/webpack-virtual-modules": {
       "version": "0.6.2",
       "license": "MIT"
-    },
-    "node_modules/yaml": {
-      "version": "2.9.0",
-      "license": "ISC",
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/eemeli"
-      }
     }
   }
 }
diff --git a/static/code/stackblitz/v9/vue/package.json b/static/code/stackblitz/v9/vue/package.json
index e3a9dba0c2a..fdd978c5cbb 100644
--- a/static/code/stackblitz/v9/vue/package.json
+++ b/static/code/stackblitz/v9/vue/package.json
@@ -11,7 +11,7 @@
     "@ionic/vue": "9.0.1",
     "@ionic/vue-router": "9.0.1",
     "vue": "^3.2.25",
-    "vue-router": "5.2.0"
+    "vue-router": "5.3.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.0",
diff --git a/tsconfig.json b/tsconfig.json
index a1617086e76..0762b92ab84 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,4 +1,37 @@
 {
   "extends": "@docusaurus/tsconfig",
-  "exclude": ["static/code/stackblitz/"],
+  "compilerOptions": {
+    /*
+     * `@docusaurus/tsconfig` sets `baseUrl` alongside a `@site/*` path mapping, but
+     * `extends` resolves `baseUrl` relative to the file that declares it, so the
+     * mapping points inside `node_modules/@docusaurus/tsconfig`. Redeclaring it here
+     * anchors it to the project root.
+     *
+     * TypeScript 6 deprecates `baseUrl` and 7 removes it. Dropping it here will not
+     * unblock those versions on its own, because the inherited one from
+     * `@docusaurus/tsconfig` triggers the same error, so this goes when upstream
+     * drops it. A `paths` mapping is not a substitute: the inherited `baseUrl`
+     * still wins.
+     */
+    "baseUrl": ".",
+    /*
+     * Real ambient declarations for `@theme/*` and `@docusaurus/*`. Without them the
+     * catch-all `declare module` fallbacks in `index.d.ts` win and every swizzled
+     * component is typed as `any`.
+     */
+    "types": ["@docusaurus/module-type-aliases", "@docusaurus/theme-classic"],
+    /*
+     * Lets `release-notes.d.json.ts` describe the generated `release-notes.json`.
+     * Ambient `declare module` cannot do this, as it does not apply to relative
+     * imports.
+     */
+    "allowArbitraryExtensions": true
+  },
+  /*
+   * `src` holds every TypeScript file in the project, and `index.d.ts` declares the
+   * `*.module.scss` imports those files rely on. Listing them explicitly also restores
+   * TypeScript's default excludes, notably `node_modules`, which the previous
+   * `exclude`-only config silently overrode.
+   */
+  "include": ["src", "index.d.ts"]
 }
diff --git a/versioned_docs/version-v8/angular/add-to-existing.md b/versioned_docs/version-v8/angular/add-to-existing.mdx
similarity index 92%
rename from versioned_docs/version-v8/angular/add-to-existing.md
rename to versioned_docs/version-v8/angular/add-to-existing.mdx
index d9a41e4e1a1..d92c5940179 100644
--- a/versioned_docs/version-v8/angular/add-to-existing.md
+++ b/versioned_docs/version-v8/angular/add-to-existing.mdx
@@ -14,7 +14,7 @@ import DocsCards from '@components/global/DocsCards';
   />
 </head>
 
-This guide covers how to add Ionic Angular to an existing Angular project. If you're looking to start a new project from scratch, check out the [Ionic Angular Quickstart](/docs/angular/quickstart.md) guide. For an overview of how Ionic Angular works with Angular, including version support and tooling, check out the [Ionic Angular Overview](/docs/angular/overview.md).
+This guide covers how to add Ionic Angular to an existing Angular project. If you're looking to start a new project from scratch, check out the [Ionic Angular Quickstart](/docs/angular/quickstart.mdx) guide. For an overview of how Ionic Angular works with Angular, including version support and tooling, check out the [Ionic Angular Overview](/docs/angular/overview.mdx).
 
 :::tip
 
@@ -76,7 +76,7 @@ Replace the existing `styles` array in `angular.json` with the following:
 
 :::info
 
-While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.md).
+While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.mdx).
 
 :::
 
@@ -126,7 +126,7 @@ import { IonButton, IonDatetime } from '@ionic/angular/standalone';
 export class App {}
 ```
 
-Visit the [components](/docs/components.md) page for all of the available Ionic components.
+Visit the [components](/docs/components.mdx) page for all of the available Ionic components.
 
 ## Using Ionic Pages
 
@@ -175,7 +175,7 @@ Replace the existing `styles` array in `angular.json` with the following:
 ]
 ```
 
-These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.md) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.md).
+These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.mdx) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.mdx).
 
 #### 2. Set up Theming
 
@@ -194,7 +194,7 @@ Create a `src/theme/variables.css` file with the following content:
 @import '@ionic/angular/css/palettes/dark.system.css';
 ```
 
-This file enables [dark mode support](/docs/theming/dark-mode.md) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables.
+This file enables [dark mode support](/docs/theming/dark-mode.mdx) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables.
 
 #### 3. Update the App Component
 
diff --git a/versioned_docs/version-v8/angular/build-options.md b/versioned_docs/version-v8/angular/build-options.mdx
similarity index 100%
rename from versioned_docs/version-v8/angular/build-options.md
rename to versioned_docs/version-v8/angular/build-options.mdx
diff --git a/versioned_docs/version-v8/angular/injection-tokens.md b/versioned_docs/version-v8/angular/injection-tokens.mdx
similarity index 100%
rename from versioned_docs/version-v8/angular/injection-tokens.md
rename to versioned_docs/version-v8/angular/injection-tokens.mdx
diff --git a/versioned_docs/version-v8/angular/lifecycle.md b/versioned_docs/version-v8/angular/lifecycle.mdx
similarity index 100%
rename from versioned_docs/version-v8/angular/lifecycle.md
rename to versioned_docs/version-v8/angular/lifecycle.mdx
diff --git a/versioned_docs/version-v8/angular/navigation.md b/versioned_docs/version-v8/angular/navigation.mdx
similarity index 99%
rename from versioned_docs/version-v8/angular/navigation.md
rename to versioned_docs/version-v8/angular/navigation.mdx
index f713bf22e6c..e8a53511f72 100644
--- a/versioned_docs/version-v8/angular/navigation.md
+++ b/versioned_docs/version-v8/angular/navigation.mdx
@@ -197,7 +197,7 @@ export class AppRoutingModule {}
 
 :::tip
 
-If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to also import the `IonRouterLink` directive for Ionic components or the `IonRouterLinkWithHref` directive for `<a>` elements. An example of this is available in the [Ionic Angular Build Options docs](./build-options.md#migrating-from-modules-to-standalone).
+If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to also import the `IonRouterLink` directive for Ionic components or the `IonRouterLinkWithHref` directive for `<a>` elements. An example of this is available in the [Ionic Angular Build Options docs](./build-options.mdx#migrating-from-modules-to-standalone).
 
 :::
 
diff --git a/versioned_docs/version-v8/angular/overlays.md b/versioned_docs/version-v8/angular/overlays.mdx
similarity index 100%
rename from versioned_docs/version-v8/angular/overlays.md
rename to versioned_docs/version-v8/angular/overlays.mdx
diff --git a/versioned_docs/version-v8/angular/overview.md b/versioned_docs/version-v8/angular/overview.mdx
similarity index 100%
rename from versioned_docs/version-v8/angular/overview.md
rename to versioned_docs/version-v8/angular/overview.mdx
diff --git a/versioned_docs/version-v8/angular/performance.md b/versioned_docs/version-v8/angular/performance.mdx
similarity index 100%
rename from versioned_docs/version-v8/angular/performance.md
rename to versioned_docs/version-v8/angular/performance.mdx
diff --git a/versioned_docs/version-v8/angular/platform.md b/versioned_docs/version-v8/angular/platform.mdx
similarity index 100%
rename from versioned_docs/version-v8/angular/platform.md
rename to versioned_docs/version-v8/angular/platform.mdx
diff --git a/versioned_docs/version-v8/angular/pwa.md b/versioned_docs/version-v8/angular/pwa.mdx
similarity index 100%
rename from versioned_docs/version-v8/angular/pwa.md
rename to versioned_docs/version-v8/angular/pwa.mdx
diff --git a/versioned_docs/version-v8/angular/quickstart.md b/versioned_docs/version-v8/angular/quickstart.mdx
similarity index 94%
rename from versioned_docs/version-v8/angular/quickstart.md
rename to versioned_docs/version-v8/angular/quickstart.mdx
index 4204fe56802..49f7cb269af 100644
--- a/versioned_docs/version-v8/angular/quickstart.md
+++ b/versioned_docs/version-v8/angular/quickstart.mdx
@@ -174,17 +174,17 @@ And the template, in the `home.page.html` file, uses those components:
 </ion-content>
 ```
 
-This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
+This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.mdx#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
 :::tip[Learn More]
 
-For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
+For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.mdx), [Toolbar](/docs/api/toolbar.mdx), [Title](/docs/api/title.mdx), and [Content](/docs/api/content.mdx) documentation.
 
 :::
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.md) at the end of the `ion-content`:
+You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.mdx) at the end of the `ion-content`:
 
 ```html title="src/app/home/home.page.html"
 <ion-content>
@@ -215,7 +215,7 @@ ionic generate page new
 
 A route will be automatically added to `app.routes.ts`.
 
-In `new.page.html`, you can add a [Back Button](/docs/api/back-button.md) to the [Toolbar](/docs/api/toolbar.md):
+In `new.page.html`, you can add a [Back Button](/docs/api/back-button.mdx) to the [Toolbar](/docs/api/toolbar.mdx):
 
 ```html title="src/app/new/new.page.html"
 <ion-header [translucent]="true">
@@ -262,7 +262,7 @@ import { RouterLink } from '@angular/router';
 
 :::info
 
-Navigating can also be performed using Angular's Router service. Refer to the [Angular Navigation documentation](/docs/angular/navigation.md#navigating-to-different-routes) for more information.
+Navigating can also be performed using Angular's Router service. Refer to the [Angular Navigation documentation](/docs/angular/navigation.mdx#navigating-to-different-routes) for more information.
 
 :::
 
@@ -307,7 +307,7 @@ export class NewPage implements OnInit {
 
 Alternatively, you can register icons in `app.component.ts` to use them throughout your app.
 
-For more information, refer to the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
+For more information, refer to the [Icon documentation](/docs/api/icon.mdx) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
 ## Call Component Methods
 
@@ -393,7 +393,7 @@ To call methods on Ionic components:
 1. Create a `ViewChild` reference for the component
 2. Call the method directly on the component instance
 
-You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation.
+You can find available methods for each component in the [Methods](/docs/api/content.mdx#methods) section of their API documentation.
 
 ## Run on a Device
 
diff --git a/versioned_docs/version-v8/angular/slides.md b/versioned_docs/version-v8/angular/slides.mdx
similarity index 100%
rename from versioned_docs/version-v8/angular/slides.md
rename to versioned_docs/version-v8/angular/slides.mdx
diff --git a/versioned_docs/version-v8/angular/storage.md b/versioned_docs/version-v8/angular/storage.mdx
similarity index 100%
rename from versioned_docs/version-v8/angular/storage.md
rename to versioned_docs/version-v8/angular/storage.mdx
diff --git a/versioned_docs/version-v8/angular/testing.md b/versioned_docs/version-v8/angular/testing.mdx
similarity index 100%
rename from versioned_docs/version-v8/angular/testing.md
rename to versioned_docs/version-v8/angular/testing.mdx
diff --git a/versioned_docs/version-v8/angular/virtual-scroll.md b/versioned_docs/version-v8/angular/virtual-scroll.mdx
similarity index 100%
rename from versioned_docs/version-v8/angular/virtual-scroll.md
rename to versioned_docs/version-v8/angular/virtual-scroll.mdx
diff --git a/versioned_docs/version-v8/angular/your-first-app.md b/versioned_docs/version-v8/angular/your-first-app.mdx
similarity index 95%
rename from versioned_docs/version-v8/angular/your-first-app.md
rename to versioned_docs/version-v8/angular/your-first-app.mdx
index 64296ce7dbe..813287bca33 100644
--- a/versioned_docs/version-v8/angular/your-first-app.md
+++ b/versioned_docs/version-v8/angular/your-first-app.mdx
@@ -26,7 +26,7 @@ Here’s the finished app running on all 3 platforms:
 
 :::note
 
-Looking for the previous version of this guide that covered Ionic 4 and Cordova? Refer to the [Ionic 4 and Cordova guide](../developer-resources/guides/first-app-v4/intro.md).
+Looking for the previous version of this guide that covered Ionic 4 and Cordova? Refer to the [Ionic 4 and Cordova guide](../developer-resources/guides/first-app-v4/intro.mdx).
 
 :::
 
@@ -36,7 +36,7 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
 
 Highlights include:
 
-- One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.md).
+- One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.mdx).
 - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
 - Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs.
 
@@ -70,7 +70,7 @@ npm install -g @ionic/cli native-run cordova-res
 
 The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
 
-Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information.
 
 :::
 
@@ -166,7 +166,7 @@ Open `/src/app/tab2/tab2.page.html`. It contains:
 </ion-content>
 ```
 
-`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.md#collapsible-large-titles) support). Rename both `ion-title` elements to:
+`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.mdx#collapsible-large-titles) support). Rename both `ion-title` elements to:
 
 ```html
 <ion-header [translucent]="true">
@@ -188,7 +188,7 @@ Open `/src/app/tab2/tab2.page.html`. It contains:
 </ion-content>
 ```
 
-We put the visual aspects of our app into `<ion-content>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.md) (FAB) to the bottom of the page and set the camera image as the icon.
+We put the visual aspects of our app into `<ion-content>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.mdx) (FAB) to the bottom of the page and set the camera image as the icon.
 
 ```html
 <ion-header [translucent]="true">
diff --git a/versioned_docs/version-v8/angular/your-first-app/2-taking-photos.md b/versioned_docs/version-v8/angular/your-first-app/2-taking-photos.mdx
similarity index 96%
rename from versioned_docs/version-v8/angular/your-first-app/2-taking-photos.md
rename to versioned_docs/version-v8/angular/your-first-app/2-taking-photos.mdx
index 5d3b3dec862..5f6ca5307b9 100644
--- a/versioned_docs/version-v8/angular/your-first-app/2-taking-photos.md
+++ b/versioned_docs/version-v8/angular/your-first-app/2-taking-photos.mdx
@@ -197,7 +197,7 @@ export interface UserPhoto {
 }
 ```
 
-Next, switch to `tab2.page.html` to display the images. We'll add a [Grid component](../../api/grid.md) to ensure the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `PhotoService`'s `photos` array. For each item, add an [Image component](../../api/img.md) and set its `src` property to the photo's path.
+Next, switch to `tab2.page.html` to display the images. We'll add a [Grid component](../../api/grid.mdx) to ensure the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `PhotoService`'s `photos` array. For each item, add an [Image component](../../api/img.mdx) and set its `src` property to the photo's path.
 
 ```html
 <ion-header [translucent]="true">
diff --git a/versioned_docs/version-v8/angular/your-first-app/3-saving-photos.md b/versioned_docs/version-v8/angular/your-first-app/3-saving-photos.mdx
similarity index 100%
rename from versioned_docs/version-v8/angular/your-first-app/3-saving-photos.md
rename to versioned_docs/version-v8/angular/your-first-app/3-saving-photos.mdx
diff --git a/versioned_docs/version-v8/angular/your-first-app/4-loading-photos.md b/versioned_docs/version-v8/angular/your-first-app/4-loading-photos.mdx
similarity index 100%
rename from versioned_docs/version-v8/angular/your-first-app/4-loading-photos.md
rename to versioned_docs/version-v8/angular/your-first-app/4-loading-photos.mdx
diff --git a/versioned_docs/version-v8/angular/your-first-app/5-adding-mobile.md b/versioned_docs/version-v8/angular/your-first-app/5-adding-mobile.mdx
similarity index 95%
rename from versioned_docs/version-v8/angular/your-first-app/5-adding-mobile.md
rename to versioned_docs/version-v8/angular/your-first-app/5-adding-mobile.mdx
index aee2ab86be9..6925d30d93a 100644
--- a/versioned_docs/version-v8/angular/your-first-app/5-adding-mobile.md
+++ b/versioned_docs/version-v8/angular/your-first-app/5-adding-mobile.mdx
@@ -17,7 +17,7 @@ Our photo gallery app won’t be complete until it runs on iOS, Android, and the
 
 Let’s start with making some small code changes - then our app will “just work” when we deploy it to a device.
 
-Import the Ionic [Platform API](../platform.md) into `photo.service.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile).
+Import the Ionic [Platform API](../platform.mdx) into `photo.service.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile).
 
 Add `Platform` to the imports at the top of the file and a new property `platform` to the `PhotoService` class. We'll also need to update the constructor to set the user's platform.
 
@@ -93,7 +93,7 @@ private async savePicture(photo: Photo) {
 }
 ```
 
-When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details on the File Protocol](../../core-concepts/webview.md#file-protocol)). To use this method, we'll need to import Capacitor into `photo.service.ts`.
+When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details on the File Protocol](../../core-concepts/webview.mdx#file-protocol)). To use this method, we'll need to import Capacitor into `photo.service.ts`.
 
 ```ts
 import { Injectable } from '@angular/core';
diff --git a/versioned_docs/version-v8/angular/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v8/angular/your-first-app/6-deploying-mobile.mdx
similarity index 100%
rename from versioned_docs/version-v8/angular/your-first-app/6-deploying-mobile.md
rename to versioned_docs/version-v8/angular/your-first-app/6-deploying-mobile.mdx
diff --git a/versioned_docs/version-v8/angular/your-first-app/7-live-reload.md b/versioned_docs/version-v8/angular/your-first-app/7-live-reload.mdx
similarity index 94%
rename from versioned_docs/version-v8/angular/your-first-app/7-live-reload.md
rename to versioned_docs/version-v8/angular/your-first-app/7-live-reload.mdx
index 0ece29c65f5..e46d24bcbaf 100644
--- a/versioned_docs/version-v8/angular/your-first-app/7-live-reload.md
+++ b/versioned_docs/version-v8/angular/your-first-app/7-live-reload.mdx
@@ -13,7 +13,7 @@ sidebar_label: Live Reload
 
 So far, we’ve learned how easy it is to develop a cross-platform app that works everywhere. The development experience is pretty quick, but what if I told you there was a way to go faster?
 
-We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.md) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
+We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.mdx) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
 
 ## Live Reload
 
@@ -132,7 +132,7 @@ export class Tab2Page {
 }
 ```
 
-Open `tab2.page.html` and add a new click handler to each `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](../../api/action-sheet.md) dialog with the option to either delete the selected photo or cancel (close) the dialog.
+Open `tab2.page.html` and add a new click handler to each `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](../../api/action-sheet.mdx) dialog with the option to either delete the selected photo or cancel (close) the dialog.
 
 ```html
 <ion-header [translucent]="true">
diff --git a/versioned_docs/version-v9/angular/your-first-app/8-distribute.md b/versioned_docs/version-v8/angular/your-first-app/8-distribute.mdx
similarity index 97%
rename from versioned_docs/version-v9/angular/your-first-app/8-distribute.md
rename to versioned_docs/version-v8/angular/your-first-app/8-distribute.mdx
index 6c221cc4b42..f029858cb9b 100644
--- a/versioned_docs/version-v9/angular/your-first-app/8-distribute.md
+++ b/versioned_docs/version-v8/angular/your-first-app/8-distribute.mdx
@@ -102,6 +102,6 @@ For access to the ability to create a Native Configuration, you will need to be
 
 Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to your users' devices!
 
-There are many paths to follow from here. Try adding another [Ionic UI component](../../components.md) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
+There are many paths to follow from here. Try adding another [Ionic UI component](../../components.mdx) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
 
 Happy app building! 💙
diff --git a/versioned_docs/version-v8/api.md b/versioned_docs/version-v8/api.mdx
similarity index 100%
rename from versioned_docs/version-v8/api.md
rename to versioned_docs/version-v8/api.mdx
diff --git a/versioned_docs/version-v8/api/accordion-group.md b/versioned_docs/version-v8/api/accordion-group.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/accordion-group.md
rename to versioned_docs/version-v8/api/accordion-group.mdx
diff --git a/versioned_docs/version-v8/api/accordion.md b/versioned_docs/version-v8/api/accordion.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/accordion.md
rename to versioned_docs/version-v8/api/accordion.mdx
diff --git a/versioned_docs/version-v8/api/action-sheet.md b/versioned_docs/version-v8/api/action-sheet.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/action-sheet.md
rename to versioned_docs/version-v8/api/action-sheet.mdx
diff --git a/versioned_docs/version-v8/api/alert.md b/versioned_docs/version-v8/api/alert.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/alert.md
rename to versioned_docs/version-v8/api/alert.mdx
diff --git a/versioned_docs/version-v8/api/app.md b/versioned_docs/version-v8/api/app.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/app.md
rename to versioned_docs/version-v8/api/app.mdx
diff --git a/versioned_docs/version-v8/api/avatar.md b/versioned_docs/version-v8/api/avatar.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/avatar.md
rename to versioned_docs/version-v8/api/avatar.mdx
diff --git a/versioned_docs/version-v8/api/back-button.md b/versioned_docs/version-v8/api/back-button.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/back-button.md
rename to versioned_docs/version-v8/api/back-button.mdx
diff --git a/versioned_docs/version-v8/api/backdrop.md b/versioned_docs/version-v8/api/backdrop.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/backdrop.md
rename to versioned_docs/version-v8/api/backdrop.mdx
diff --git a/versioned_docs/version-v8/api/badge.md b/versioned_docs/version-v8/api/badge.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/badge.md
rename to versioned_docs/version-v8/api/badge.mdx
diff --git a/versioned_docs/version-v8/api/breadcrumb.md b/versioned_docs/version-v8/api/breadcrumb.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/breadcrumb.md
rename to versioned_docs/version-v8/api/breadcrumb.mdx
diff --git a/versioned_docs/version-v8/api/breadcrumbs.md b/versioned_docs/version-v8/api/breadcrumbs.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/breadcrumbs.md
rename to versioned_docs/version-v8/api/breadcrumbs.mdx
diff --git a/versioned_docs/version-v8/api/button.md b/versioned_docs/version-v8/api/button.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/button.md
rename to versioned_docs/version-v8/api/button.mdx
diff --git a/versioned_docs/version-v8/api/buttons.md b/versioned_docs/version-v8/api/buttons.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/buttons.md
rename to versioned_docs/version-v8/api/buttons.mdx
diff --git a/versioned_docs/version-v8/api/card-content.md b/versioned_docs/version-v8/api/card-content.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/card-content.md
rename to versioned_docs/version-v8/api/card-content.mdx
diff --git a/versioned_docs/version-v8/api/card-header.md b/versioned_docs/version-v8/api/card-header.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/card-header.md
rename to versioned_docs/version-v8/api/card-header.mdx
diff --git a/versioned_docs/version-v8/api/card-subtitle.md b/versioned_docs/version-v8/api/card-subtitle.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/card-subtitle.md
rename to versioned_docs/version-v8/api/card-subtitle.mdx
diff --git a/versioned_docs/version-v8/api/card-title.md b/versioned_docs/version-v8/api/card-title.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/card-title.md
rename to versioned_docs/version-v8/api/card-title.mdx
diff --git a/versioned_docs/version-v8/api/card.md b/versioned_docs/version-v8/api/card.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/card.md
rename to versioned_docs/version-v8/api/card.mdx
diff --git a/versioned_docs/version-v8/api/checkbox.md b/versioned_docs/version-v8/api/checkbox.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/checkbox.md
rename to versioned_docs/version-v8/api/checkbox.mdx
diff --git a/versioned_docs/version-v8/api/chip.md b/versioned_docs/version-v8/api/chip.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/chip.md
rename to versioned_docs/version-v8/api/chip.mdx
diff --git a/versioned_docs/version-v8/api/col.md b/versioned_docs/version-v8/api/col.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/col.md
rename to versioned_docs/version-v8/api/col.mdx
diff --git a/versioned_docs/version-v8/api/content.md b/versioned_docs/version-v8/api/content.mdx
similarity index 98%
rename from versioned_docs/version-v8/api/content.md
rename to versioned_docs/version-v8/api/content.mdx
index 85f6b9475ea..fe6c1064a7d 100644
--- a/versioned_docs/version-v8/api/content.md
+++ b/versioned_docs/version-v8/api/content.mdx
@@ -97,7 +97,7 @@ import CSSProps from '@site/static/usage/v8/content/theming/css-properties/index
 
 ### Safe Area Padding
 
-The content component will not automatically apply padding to any of its sides to account for the [safe area](/docs/theming/advanced#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.md#application-variables).
+The content component will not automatically apply padding to any of its sides to account for the [safe area](/docs/theming/advanced#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.mdx#application-variables).
 
 The most common use case for this is to apply padding to the top of the content to account for the status bar. This can be done by setting the `padding-top` property to the value of the `--ion-safe-area-top` variable.
 
diff --git a/versioned_docs/version-v8/api/datetime-button.md b/versioned_docs/version-v8/api/datetime-button.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/datetime-button.md
rename to versioned_docs/version-v8/api/datetime-button.mdx
diff --git a/versioned_docs/version-v8/api/datetime.md b/versioned_docs/version-v8/api/datetime.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/datetime.md
rename to versioned_docs/version-v8/api/datetime.mdx
diff --git a/versioned_docs/version-v8/api/fab-button.md b/versioned_docs/version-v8/api/fab-button.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/fab-button.md
rename to versioned_docs/version-v8/api/fab-button.mdx
diff --git a/versioned_docs/version-v8/api/fab-list.md b/versioned_docs/version-v8/api/fab-list.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/fab-list.md
rename to versioned_docs/version-v8/api/fab-list.mdx
diff --git a/versioned_docs/version-v8/api/fab.md b/versioned_docs/version-v8/api/fab.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/fab.md
rename to versioned_docs/version-v8/api/fab.mdx
diff --git a/versioned_docs/version-v8/api/footer.md b/versioned_docs/version-v8/api/footer.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/footer.md
rename to versioned_docs/version-v8/api/footer.mdx
diff --git a/versioned_docs/version-v8/api/grid.md b/versioned_docs/version-v8/api/grid.mdx
similarity index 97%
rename from versioned_docs/version-v8/api/grid.md
rename to versioned_docs/version-v8/api/grid.mdx
index d778f958654..456bc95a437 100644
--- a/versioned_docs/version-v8/api/grid.md
+++ b/versioned_docs/version-v8/api/grid.mdx
@@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-The grid is a powerful mobile-first flexbox system for building custom layouts. It is composed of three units — a grid, [row(s)](row.md) and [column(s)](col.md). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS.
+The grid is a powerful mobile-first flexbox system for building custom layouts. It is composed of three units — a grid, [row(s)](row.mdx) and [column(s)](col.mdx). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS.
 
 ## Overview
 
@@ -156,7 +156,7 @@ import VerticalAlignment from '@site/static/usage/v8/grid/vertical-alignment/ind
 
 ### Horizontal Alignment
 
-All columns can be horizontally aligned inside of a row by adding different classes to the row. For a list of available classes, refer to [css utilities](/layout/css-utilities.md#flex-container-properties).
+All columns can be horizontally aligned inside of a row by adding different classes to the row. For a list of available classes, refer to [css utilities](/layout/css-utilities.mdx#flex-container-properties).
 
 import HorizontalAlignment from '@site/static/usage/v8/grid/horizontal-alignment/index.mdx';
 
diff --git a/versioned_docs/version-v8/api/header.md b/versioned_docs/version-v8/api/header.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/header.md
rename to versioned_docs/version-v8/api/header.mdx
diff --git a/versioned_docs/version-v8/api/icon.md b/versioned_docs/version-v8/api/icon.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/icon.md
rename to versioned_docs/version-v8/api/icon.mdx
diff --git a/versioned_docs/version-v8/api/img.md b/versioned_docs/version-v8/api/img.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/img.md
rename to versioned_docs/version-v8/api/img.mdx
diff --git a/versioned_docs/version-v8/api/infinite-scroll-content.md b/versioned_docs/version-v8/api/infinite-scroll-content.mdx
similarity index 94%
rename from versioned_docs/version-v8/api/infinite-scroll-content.md
rename to versioned_docs/version-v8/api/infinite-scroll-content.mdx
index dcab3d1bc77..2aa0d4ee5e6 100644
--- a/versioned_docs/version-v8/api/infinite-scroll-content.md
+++ b/versioned_docs/version-v8/api/infinite-scroll-content.mdx
@@ -13,7 +13,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 The `ion-infinite-scroll-content` component is the default child used by the `ion-infinite-scroll`. It displays an infinite scroll spinner that looks best based on the platform and changes the look depending on the infinite scroll's state. The default spinner can be changed and text can be added by setting the `loadingSpinner` and `loadingText` properties.
 
-For more information as well as usage, refer to the [Infinite Scroll Documentation](./infinite-scroll.md#infinite-scroll-content).
+For more information as well as usage, refer to the [Infinite Scroll Documentation](./infinite-scroll.mdx#infinite-scroll-content).
 
 ## Properties
 
diff --git a/versioned_docs/version-v8/api/infinite-scroll.md b/versioned_docs/version-v8/api/infinite-scroll.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/infinite-scroll.md
rename to versioned_docs/version-v8/api/infinite-scroll.mdx
diff --git a/versioned_docs/version-v8/api/input-otp.md b/versioned_docs/version-v8/api/input-otp.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/input-otp.md
rename to versioned_docs/version-v8/api/input-otp.mdx
diff --git a/versioned_docs/version-v8/api/input-password-toggle.md b/versioned_docs/version-v8/api/input-password-toggle.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/input-password-toggle.md
rename to versioned_docs/version-v8/api/input-password-toggle.mdx
diff --git a/versioned_docs/version-v8/api/input.md b/versioned_docs/version-v8/api/input.mdx
similarity index 96%
rename from versioned_docs/version-v8/api/input.md
rename to versioned_docs/version-v8/api/input.mdx
index 15d3a5fe540..02823e780c3 100644
--- a/versioned_docs/version-v8/api/input.md
+++ b/versioned_docs/version-v8/api/input.mdx
@@ -159,9 +159,9 @@ Note that this feature is considered experimental because it relies on a simulat
 
 :::note
 
-In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. Refer to the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
+In most cases, [Icon](./icon.mdx) components placed in these slots should have `aria-hidden="true"`. Refer to the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
 
-If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to.
+If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.mdx). This ensures that the content can be tabbed to.
 
 :::
 
diff --git a/versioned_docs/version-v8/api/item-divider.md b/versioned_docs/version-v8/api/item-divider.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/item-divider.md
rename to versioned_docs/version-v8/api/item-divider.mdx
diff --git a/versioned_docs/version-v8/api/item-group.md b/versioned_docs/version-v8/api/item-group.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/item-group.md
rename to versioned_docs/version-v8/api/item-group.mdx
diff --git a/versioned_docs/version-v8/api/item-option.md b/versioned_docs/version-v8/api/item-option.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/item-option.md
rename to versioned_docs/version-v8/api/item-option.mdx
diff --git a/versioned_docs/version-v8/api/item-options.md b/versioned_docs/version-v8/api/item-options.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/item-options.md
rename to versioned_docs/version-v8/api/item-options.mdx
diff --git a/versioned_docs/version-v8/api/item-sliding.md b/versioned_docs/version-v8/api/item-sliding.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/item-sliding.md
rename to versioned_docs/version-v8/api/item-sliding.mdx
diff --git a/versioned_docs/version-v8/api/item.md b/versioned_docs/version-v8/api/item.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/item.md
rename to versioned_docs/version-v8/api/item.mdx
diff --git a/versioned_docs/version-v8/api/label.md b/versioned_docs/version-v8/api/label.mdx
similarity index 88%
rename from versioned_docs/version-v8/api/label.md
rename to versioned_docs/version-v8/api/label.mdx
index c807aa71bfe..98bacafd490 100644
--- a/versioned_docs/version-v8/api/label.md
+++ b/versioned_docs/version-v8/api/label.mdx
@@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="scoped" />
 
-Label is an element used primarily to add text content to [Item](./item.md) components. Label can also be used inside of form control components such as [Input](./input.md) or [Radio](./radio.md) when specifying the visible label, but it is not required.
+Label is an element used primarily to add text content to [Item](./item.mdx) components. Label can also be used inside of form control components such as [Input](./input.mdx) or [Radio](./radio.mdx) when specifying the visible label, but it is not required.
 
 The position of the label inside of an item can be inline, fixed, stacked, or floating.
 
diff --git a/versioned_docs/version-v8/api/list-header.md b/versioned_docs/version-v8/api/list-header.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/list-header.md
rename to versioned_docs/version-v8/api/list-header.mdx
diff --git a/versioned_docs/version-v8/api/list.md b/versioned_docs/version-v8/api/list.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/list.md
rename to versioned_docs/version-v8/api/list.mdx
diff --git a/versioned_docs/version-v8/api/loading.md b/versioned_docs/version-v8/api/loading.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/loading.md
rename to versioned_docs/version-v8/api/loading.mdx
diff --git a/versioned_docs/version-v8/api/menu-button.md b/versioned_docs/version-v8/api/menu-button.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/menu-button.md
rename to versioned_docs/version-v8/api/menu-button.mdx
diff --git a/versioned_docs/version-v8/api/menu-toggle.md b/versioned_docs/version-v8/api/menu-toggle.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/menu-toggle.md
rename to versioned_docs/version-v8/api/menu-toggle.mdx
diff --git a/versioned_docs/version-v8/api/menu.md b/versioned_docs/version-v8/api/menu.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/menu.md
rename to versioned_docs/version-v8/api/menu.mdx
diff --git a/versioned_docs/version-v8/api/modal.md b/versioned_docs/version-v8/api/modal.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/modal.md
rename to versioned_docs/version-v8/api/modal.mdx
diff --git a/versioned_docs/version-v8/api/nav-link.md b/versioned_docs/version-v8/api/nav-link.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/nav-link.md
rename to versioned_docs/version-v8/api/nav-link.mdx
diff --git a/versioned_docs/version-v8/api/nav.md b/versioned_docs/version-v8/api/nav.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/nav.md
rename to versioned_docs/version-v8/api/nav.mdx
diff --git a/versioned_docs/version-v8/api/note.md b/versioned_docs/version-v8/api/note.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/note.md
rename to versioned_docs/version-v8/api/note.mdx
diff --git a/versioned_docs/version-v8/api/picker-column-option.md b/versioned_docs/version-v8/api/picker-column-option.mdx
similarity index 95%
rename from versioned_docs/version-v8/api/picker-column-option.md
rename to versioned_docs/version-v8/api/picker-column-option.mdx
index ecf7f0ac96c..66038f19ad6 100644
--- a/versioned_docs/version-v8/api/picker-column-option.md
+++ b/versioned_docs/version-v8/api/picker-column-option.mdx
@@ -18,7 +18,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-An individual column option in a picker. Visit the [`ion-picker`](./picker.md) documentation for more details.
+An individual column option in a picker. Visit the [`ion-picker`](./picker.mdx) documentation for more details.
 
 ## Properties
 
diff --git a/versioned_docs/version-v8/api/picker-column.md b/versioned_docs/version-v8/api/picker-column.mdx
similarity index 95%
rename from versioned_docs/version-v8/api/picker-column.md
rename to versioned_docs/version-v8/api/picker-column.mdx
index 91e0713e8bb..a7e887c85a7 100644
--- a/versioned_docs/version-v8/api/picker-column.md
+++ b/versioned_docs/version-v8/api/picker-column.mdx
@@ -18,7 +18,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-An individual column within a picker. Visit the [`ion-picker`](./picker.md) documentation for more details.
+An individual column within a picker. Visit the [`ion-picker`](./picker.mdx) documentation for more details.
 
 ## Properties
 
diff --git a/versioned_docs/version-v8/api/picker-legacy.md b/versioned_docs/version-v8/api/picker-legacy.mdx
similarity index 98%
rename from versioned_docs/version-v8/api/picker-legacy.md
rename to versioned_docs/version-v8/api/picker-legacy.mdx
index 9277bf7ff0a..49f98833526 100644
--- a/versioned_docs/version-v8/api/picker-legacy.md
+++ b/versioned_docs/version-v8/api/picker-legacy.mdx
@@ -23,7 +23,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 :::warning[Deprecation Notice]
 
-`ion-picker-legacy` is deprecated and will be removed in the next major release. Migrate to [`ion-picker`](./picker.md) as soon as possible.
+`ion-picker-legacy` is deprecated and will be removed in the next major release. Migrate to [`ion-picker`](./picker.mdx) as soon as possible.
 
 :::
 
diff --git a/versioned_docs/version-v8/api/picker.md b/versioned_docs/version-v8/api/picker.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/picker.md
rename to versioned_docs/version-v8/api/picker.mdx
diff --git a/versioned_docs/version-v8/api/popover.md b/versioned_docs/version-v8/api/popover.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/popover.md
rename to versioned_docs/version-v8/api/popover.mdx
diff --git a/versioned_docs/version-v8/api/progress-bar.md b/versioned_docs/version-v8/api/progress-bar.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/progress-bar.md
rename to versioned_docs/version-v8/api/progress-bar.mdx
diff --git a/versioned_docs/version-v8/api/radio-group.md b/versioned_docs/version-v8/api/radio-group.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/radio-group.md
rename to versioned_docs/version-v8/api/radio-group.mdx
diff --git a/versioned_docs/version-v8/api/radio.md b/versioned_docs/version-v8/api/radio.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/radio.md
rename to versioned_docs/version-v8/api/radio.mdx
diff --git a/versioned_docs/version-v8/api/range.md b/versioned_docs/version-v8/api/range.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/range.md
rename to versioned_docs/version-v8/api/range.mdx
diff --git a/versioned_docs/version-v8/api/refresher-content.md b/versioned_docs/version-v8/api/refresher-content.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/refresher-content.md
rename to versioned_docs/version-v8/api/refresher-content.mdx
diff --git a/versioned_docs/version-v8/api/refresher.md b/versioned_docs/version-v8/api/refresher.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/refresher.md
rename to versioned_docs/version-v8/api/refresher.mdx
diff --git a/versioned_docs/version-v8/api/reorder-group.md b/versioned_docs/version-v8/api/reorder-group.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/reorder-group.md
rename to versioned_docs/version-v8/api/reorder-group.mdx
diff --git a/versioned_docs/version-v8/api/reorder.md b/versioned_docs/version-v8/api/reorder.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/reorder.md
rename to versioned_docs/version-v8/api/reorder.mdx
diff --git a/versioned_docs/version-v8/api/ripple-effect.md b/versioned_docs/version-v8/api/ripple-effect.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/ripple-effect.md
rename to versioned_docs/version-v8/api/ripple-effect.mdx
diff --git a/versioned_docs/version-v8/api/route-redirect.md b/versioned_docs/version-v8/api/route-redirect.mdx
similarity index 98%
rename from versioned_docs/version-v8/api/route-redirect.md
rename to versioned_docs/version-v8/api/route-redirect.mdx
index 85d7e5cfaef..3757e655ddb 100644
--- a/versioned_docs/version-v8/api/route-redirect.md
+++ b/versioned_docs/version-v8/api/route-redirect.mdx
@@ -23,7 +23,7 @@ A route redirect can only be used with an `ion-router` as a direct child of it.
 
 :::note
 
-Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.md) and the Angular router.
+Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.mdx) and the Angular router.
 
 :::
 
diff --git a/versioned_docs/version-v8/api/route.md b/versioned_docs/version-v8/api/route.mdx
similarity index 99%
rename from versioned_docs/version-v8/api/route.md
rename to versioned_docs/version-v8/api/route.mdx
index bf4ab441410..9f978486405 100644
--- a/versioned_docs/version-v8/api/route.md
+++ b/versioned_docs/version-v8/api/route.mdx
@@ -26,7 +26,7 @@ The route component takes a component and renders it when the Browser URL matche
 
 :::note
 
-Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.md) and the Angular router.
+Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.mdx) and the Angular router.
 
 :::
 
diff --git a/versioned_docs/version-v8/api/router-link.md b/versioned_docs/version-v8/api/router-link.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/router-link.md
rename to versioned_docs/version-v8/api/router-link.mdx
diff --git a/versioned_docs/version-v8/api/router-outlet.md b/versioned_docs/version-v8/api/router-outlet.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/router-outlet.md
rename to versioned_docs/version-v8/api/router-outlet.mdx
diff --git a/versioned_docs/version-v8/api/router.md b/versioned_docs/version-v8/api/router.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/router.md
rename to versioned_docs/version-v8/api/router.mdx
diff --git a/versioned_docs/version-v8/api/row.md b/versioned_docs/version-v8/api/row.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/row.md
rename to versioned_docs/version-v8/api/row.mdx
diff --git a/versioned_docs/version-v8/api/searchbar.md b/versioned_docs/version-v8/api/searchbar.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/searchbar.md
rename to versioned_docs/version-v8/api/searchbar.mdx
diff --git a/versioned_docs/version-v8/api/segment-button.md b/versioned_docs/version-v8/api/segment-button.mdx
similarity index 90%
rename from versioned_docs/version-v8/api/segment-button.md
rename to versioned_docs/version-v8/api/segment-button.mdx
index 25bb3e5b171..7f257ecd92c 100644
--- a/versioned_docs/version-v8/api/segment-button.md
+++ b/versioned_docs/version-v8/api/segment-button.mdx
@@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-Segment buttons are groups of related buttons inside of a [segment](segment.md). They are displayed in a horizontal row. A segment button can be selected by default by setting the `value` of the segment to the `value` of the segment button. Only one segment button can be selected at a time.
+Segment buttons are groups of related buttons inside of a [segment](segment.mdx). They are displayed in a horizontal row. A segment button can be selected by default by setting the `value` of the segment to the `value` of the segment button. Only one segment button can be selected at a time.
 
 ## Basic Usage
 
diff --git a/versioned_docs/version-v8/api/segment-content.md b/versioned_docs/version-v8/api/segment-content.mdx
similarity index 87%
rename from versioned_docs/version-v8/api/segment-content.md
rename to versioned_docs/version-v8/api/segment-content.mdx
index b6b6c4c0d5d..c3ba17ef0c1 100644
--- a/versioned_docs/version-v8/api/segment-content.md
+++ b/versioned_docs/version-v8/api/segment-content.mdx
@@ -22,13 +22,13 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 <EncapsulationPill type="shadow" />
 
 Segment content is a wrapper element used to control the display of child elements when using swipeable segments. Segment content elements are children of a single
-[segment view](./segment-view.md) instance that is linked to a [segment](./segment.md). Refer to our [swipeable segments](./segment.md#swipeable-segments) documentation
+[segment view](./segment-view.mdx) instance that is linked to a [segment](./segment.mdx). Refer to our [swipeable segments](./segment.mdx#swipeable-segments) documentation
 for more information on how to use segment contents.
 
 ## Usage
 
 Each `ion-segment-content` needs a unique `id` attribute. This will be used to link the segment content to a segment button via the button's
-[contentId property](./segment-button.md#properties).
+[contentId property](./segment-button.mdx#properties).
 
 {/* Reuse swipeable segments playground */}
 
diff --git a/versioned_docs/version-v8/api/segment-view.md b/versioned_docs/version-v8/api/segment-view.mdx
similarity index 82%
rename from versioned_docs/version-v8/api/segment-view.md
rename to versioned_docs/version-v8/api/segment-view.mdx
index 771d6431332..dcae2d9527e 100644
--- a/versioned_docs/version-v8/api/segment-view.md
+++ b/versioned_docs/version-v8/api/segment-view.mdx
@@ -21,8 +21,8 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-Segment view is a wrapper element that links a group of [segment contents](./segment-content.md) to a [segment](./segment.md) when using swipeable segments.
-Refer to our [swipeable segments](./segment.md#swipeable-segments) documentation for more information on how to use segment views.
+Segment view is a wrapper element that links a group of [segment contents](./segment-content.mdx) to a [segment](./segment.mdx) when using swipeable segments.
+Refer to our [swipeable segments](./segment.mdx#swipeable-segments) documentation for more information on how to use segment views.
 
 ## Properties
 
diff --git a/versioned_docs/version-v8/api/segment.md b/versioned_docs/version-v8/api/segment.mdx
similarity index 97%
rename from versioned_docs/version-v8/api/segment.md
rename to versioned_docs/version-v8/api/segment.mdx
index d22a9f997eb..a4a8ab8ff80 100644
--- a/versioned_docs/version-v8/api/segment.md
+++ b/versioned_docs/version-v8/api/segment.mdx
@@ -50,7 +50,7 @@ import Toolbar from '@site/static/usage/v8/toolbar/segments/index.mdx';
 
 ## Swipeable Segments
 
-Each [segment button](./segment-button.md) can be associated with a [segment content](./segment-content.md) element that will be displayed
+Each [segment button](./segment-button.mdx) can be associated with a [segment content](./segment-content.mdx) element that will be displayed
 when the segment is active. With this approach, each segment's content can be swiped or scrolled between and the segment will be updated
 to reflect the currently visible content.
 
diff --git a/versioned_docs/version-v8/api/select-option.md b/versioned_docs/version-v8/api/select-option.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/select-option.md
rename to versioned_docs/version-v8/api/select-option.mdx
diff --git a/versioned_docs/version-v8/api/select.md b/versioned_docs/version-v8/api/select.mdx
similarity index 94%
rename from versioned_docs/version-v8/api/select.md
rename to versioned_docs/version-v8/api/select.mdx
index fd76df6fd2c..56ee0325a82 100644
--- a/versioned_docs/version-v8/api/select.md
+++ b/versioned_docs/version-v8/api/select.mdx
@@ -89,7 +89,7 @@ import MultipleSelectionExample from '@site/static/usage/v8/select/basic/multipl
 
 ## Interfaces
 
-By default, select uses [ion-alert](alert.md) to open up the overlay of options in an alert. The interface can be changed to use [ion-action-sheet](action-sheet.md), [ion-popover](popover.md), or [ion-modal](modal.md) by passing `action-sheet`, `popover`, or `modal`, respectively, to the `interface` property. Read on to the other sections for the limitations of the different interfaces.
+By default, select uses [ion-alert](alert.mdx) to open up the overlay of options in an alert. The interface can be changed to use [ion-action-sheet](action-sheet.mdx), [ion-popover](popover.mdx), or [ion-modal](modal.mdx) by passing `action-sheet`, `popover`, or `modal`, respectively, to the `interface` property. Read on to the other sections for the limitations of the different interfaces.
 
 ### Alert
 
@@ -182,7 +182,7 @@ import ButtonTextExample from '@site/static/usage/v8/select/customization/button
 
 Since select uses the alert, action sheet, popover, and modal interfaces, options can be passed to these components through the `interfaceOptions` property. This can be used to pass a custom header, subheader, css class, and more.
 
-Refer to the [ion-alert docs](alert.md), [ion-action-sheet docs](action-sheet.md), [ion-popover docs](popover.md), and [ion-modal docs](modal.md)
+Refer to the [ion-alert docs](alert.mdx), [ion-action-sheet docs](action-sheet.mdx), [ion-popover docs](popover.mdx), and [ion-modal docs](modal.mdx)
 for the properties that each interface accepts.
 
 Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
@@ -197,9 +197,9 @@ The `start` and `end` slots can be used to place icons, buttons, or prefix/suffi
 
 :::note
 
-In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. Refer to the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
+In most cases, [Icon](./icon.mdx) components placed in these slots should have `aria-hidden="true"`. Refer to the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
 
-If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to.
+If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.mdx). This ensures that the content can be tabbed to.
 
 :::
 
@@ -226,12 +226,12 @@ import StylingSelectExample from '@site/static/usage/v8/select/customization/sty
 Customizing the interface dialog should be done by following the styling sections (CSS shadow parts, CSS custom properties, and slots) in
 that interface's documentation:
 
-- [Alert](alert.md#css-shadow-parts)
-- [Action Sheet](action-sheet.md#css-shadow-parts)
-- [Popover](popover.md#css-shadow-parts)
-- [Modal](modal.md#css-shadow-parts)
+- [Alert](alert.mdx#css-shadow-parts)
+- [Action Sheet](action-sheet.mdx#css-shadow-parts)
+- [Popover](popover.mdx#css-shadow-parts)
+- [Modal](modal.mdx#css-shadow-parts)
 
-However, the Select Option does set a class for easier styling and allows for the ability to pass a class to the overlay option, refer to the [Select Options documentation](select-option.md) for usage examples of customizing options.
+However, the Select Option does set a class for easier styling and allows for the ability to pass a class to the overlay option, refer to the [Select Options documentation](select-option.mdx) for usage examples of customizing options.
 
 ### Custom Toggle Icons
 
diff --git a/versioned_docs/version-v8/api/skeleton-text.md b/versioned_docs/version-v8/api/skeleton-text.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/skeleton-text.md
rename to versioned_docs/version-v8/api/skeleton-text.mdx
diff --git a/versioned_docs/version-v8/api/spinner.md b/versioned_docs/version-v8/api/spinner.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/spinner.md
rename to versioned_docs/version-v8/api/spinner.mdx
diff --git a/versioned_docs/version-v8/api/split-pane.md b/versioned_docs/version-v8/api/split-pane.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/split-pane.md
rename to versioned_docs/version-v8/api/split-pane.mdx
diff --git a/versioned_docs/version-v8/api/tab-bar.md b/versioned_docs/version-v8/api/tab-bar.mdx
similarity index 97%
rename from versioned_docs/version-v8/api/tab-bar.md
rename to versioned_docs/version-v8/api/tab-bar.mdx
index 98b1f44fde9..eb420b442c6 100644
--- a/versioned_docs/version-v8/api/tab-bar.md
+++ b/versioned_docs/version-v8/api/tab-bar.mdx
@@ -24,7 +24,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-The tab bar is a UI component that contains a set of [tab buttons](tab-button.md). A tab bar must be provided inside of [tabs](tabs.md) to communicate with each [tab](tab.md).
+The tab bar is a UI component that contains a set of [tab buttons](tab-button.mdx). A tab bar must be provided inside of [tabs](tabs.mdx) to communicate with each [tab](tab.mdx).
 
 ## Usage
 
diff --git a/versioned_docs/version-v8/api/tab-button.md b/versioned_docs/version-v8/api/tab-button.mdx
similarity index 96%
rename from versioned_docs/version-v8/api/tab-button.md
rename to versioned_docs/version-v8/api/tab-button.mdx
index 8f437e7b46a..053fdf442a9 100644
--- a/versioned_docs/version-v8/api/tab-button.md
+++ b/versioned_docs/version-v8/api/tab-button.mdx
@@ -16,9 +16,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-A tab button is a UI component that is placed inside of a [tab bar](tab-bar.md). The tab button can specify the layout of the icon and label and connect to a [tab view](tab.md).
+A tab button is a UI component that is placed inside of a [tab bar](tab-bar.mdx). The tab button can specify the layout of the icon and label and connect to a [tab view](tab.mdx).
 
-Refer to the [tabs documentation](tabs.md) for more details on configuring tabs.
+Refer to the [tabs documentation](tabs.mdx) for more details on configuring tabs.
 
 ## Usage
 
diff --git a/versioned_docs/version-v8/api/tab.md b/versioned_docs/version-v8/api/tab.mdx
similarity index 67%
rename from versioned_docs/version-v8/api/tab.md
rename to versioned_docs/version-v8/api/tab.mdx
index acaddcb1b1f..7f694773ad4 100644
--- a/versioned_docs/version-v8/api/tab.md
+++ b/versioned_docs/version-v8/api/tab.mdx
@@ -21,17 +21,17 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-The tab component is a child component of [tabs](tabs.md). Each tab can contain a top level navigation stack for an app or a single view. An app can have many tabs, all with their own independent navigation.
+The tab component is a child component of [tabs](tabs.mdx). Each tab can contain a top level navigation stack for an app or a single view. An app can have many tabs, all with their own independent navigation.
 
 :::note
 
-Angular, React, and Vue can only use this component when the `ion-tabs` component is configured for [basic usage](./tabs.md#basic-usage). When setting up tabs with routing, the `ion-tab` component cannot be used.
+Angular, React, and Vue can only use this component when the `ion-tabs` component is configured for [basic usage](./tabs.mdx#basic-usage). When setting up tabs with routing, the `ion-tab` component cannot be used.
 
-In JavaScript, this component can be used with the `ion-tabs` component configured for either [basic usage](./tabs.md#basic-usage) or [usage with router](./tabs.md#usage-with-router).
+In JavaScript, this component can be used with the `ion-tabs` component configured for either [basic usage](./tabs.mdx#basic-usage) or [usage with router](./tabs.mdx#usage-with-router).
 
 :::
 
-Refer to the [tabs documentation](tabs.md) for more details on configuring tabs.
+Refer to the [tabs documentation](tabs.mdx) for more details on configuring tabs.
 
 ## Properties
 
diff --git a/versioned_docs/version-v8/api/tabs.md b/versioned_docs/version-v8/api/tabs.mdx
similarity index 97%
rename from versioned_docs/version-v8/api/tabs.md
rename to versioned_docs/version-v8/api/tabs.mdx
index b97a5a943a3..bdb5e8000a1 100644
--- a/versioned_docs/version-v8/api/tabs.md
+++ b/versioned_docs/version-v8/api/tabs.mdx
@@ -22,7 +22,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 <EncapsulationPill type="shadow" />
 
 Tabs are a top level navigation component to implement a tab-based navigation.
-The component is a container of individual [Tab](tab.md) components.
+The component is a container of individual [Tab](tab.mdx) components.
 
 The `ion-tabs` component does not have any styling and works as a router outlet in order to handle navigation. It does not provide any UI feedback or mechanism to switch between tabs. In order to do so, an `ion-tab-bar` should be provided as a direct child of `ion-tabs`.
 
diff --git a/versioned_docs/version-v8/api/text.md b/versioned_docs/version-v8/api/text.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/text.md
rename to versioned_docs/version-v8/api/text.mdx
diff --git a/versioned_docs/version-v8/api/textarea.md b/versioned_docs/version-v8/api/textarea.mdx
similarity index 95%
rename from versioned_docs/version-v8/api/textarea.md
rename to versioned_docs/version-v8/api/textarea.mdx
index 0c5f77b5e53..50a1bed6ce4 100644
--- a/versioned_docs/version-v8/api/textarea.md
+++ b/versioned_docs/version-v8/api/textarea.mdx
@@ -125,9 +125,9 @@ Note that this feature is considered experimental because it relies on a simulat
 
 :::note
 
-In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. Refer to the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
+In most cases, [Icon](./icon.mdx) components placed in these slots should have `aria-hidden="true"`. Refer to the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
 
-If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to.
+If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.mdx). This ensures that the content can be tabbed to.
 
 :::
 
diff --git a/versioned_docs/version-v8/api/thumbnail.md b/versioned_docs/version-v8/api/thumbnail.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/thumbnail.md
rename to versioned_docs/version-v8/api/thumbnail.mdx
diff --git a/versioned_docs/version-v8/api/title.md b/versioned_docs/version-v8/api/title.mdx
similarity index 96%
rename from versioned_docs/version-v8/api/title.md
rename to versioned_docs/version-v8/api/title.mdx
index febf7c12274..663f938a623 100644
--- a/versioned_docs/version-v8/api/title.md
+++ b/versioned_docs/version-v8/api/title.mdx
@@ -45,7 +45,7 @@ import CollapsibleLargeTitle from '@site/static/usage/v8/title/collapsible-large
 
 ### Collapsible Buttons
 
-The [buttons](./buttons.md) component can be used with the [`collapse`](./buttons.md#collapse) property to additionally display in the header as the toolbar is collapsed.
+The [buttons](./buttons.mdx) component can be used with the [`collapse`](./buttons.mdx#collapse) property to additionally display in the header as the toolbar is collapsed.
 
 import CollapsibleLargeTitleButtons from '@site/static/usage/v8/title/collapsible-large-title/buttons/index.mdx';
 
diff --git a/versioned_docs/version-v8/api/toast.md b/versioned_docs/version-v8/api/toast.mdx
similarity index 96%
rename from versioned_docs/version-v8/api/toast.md
rename to versioned_docs/version-v8/api/toast.mdx
index 96f8c3df3ee..c555e7cd41f 100644
--- a/versioned_docs/version-v8/api/toast.md
+++ b/versioned_docs/version-v8/api/toast.mdx
@@ -70,7 +70,7 @@ Toasts can be positioned at the top, bottom or middle of the viewport. The posit
 
 ### Relative Positioning
 
-If a toast is presented alongside navigation elements such as a header, footer, or [FAB](./fab.md), the toast may overlap these elements by default. This can be fixed using the `positionAnchor` property, which takes either an element reference or an ID. The toast will be positioned relative to the chosen element, appearing below it when using `position="top"` or above it when using `position="bottom"`. When using `position="middle"`, the `positionAnchor` property is ignored.
+If a toast is presented alongside navigation elements such as a header, footer, or [FAB](./fab.mdx), the toast may overlap these elements by default. This can be fixed using the `positionAnchor` property, which takes either an element reference or an ID. The toast will be positioned relative to the chosen element, appearing below it when using `position="top"` or above it when using `position="bottom"`. When using `position="middle"`, the `positionAnchor` property is ignored.
 
 import PositionAnchor from '@site/static/usage/v8/toast/position-anchor/index.mdx';
 
@@ -94,7 +94,7 @@ import StackedPlayground from '@site/static/usage/v8/toast/layout/index.mdx';
 
 ## Icons
 
-An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an [Alert](alert.md) instead.
+An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an [Alert](alert.mdx) instead.
 
 import IconPlayground from '@site/static/usage/v8/toast/icon/index.mdx';
 
diff --git a/versioned_docs/version-v8/api/toggle.md b/versioned_docs/version-v8/api/toggle.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/toggle.md
rename to versioned_docs/version-v8/api/toggle.mdx
diff --git a/versioned_docs/version-v8/api/toolbar.md b/versioned_docs/version-v8/api/toolbar.mdx
similarity index 100%
rename from versioned_docs/version-v8/api/toolbar.md
rename to versioned_docs/version-v8/api/toolbar.mdx
diff --git a/versioned_docs/version-v8/cli.md b/versioned_docs/version-v8/cli.mdx
similarity index 100%
rename from versioned_docs/version-v8/cli.md
rename to versioned_docs/version-v8/cli.mdx
diff --git a/docs/cli/configuration.md b/versioned_docs/version-v8/cli/configuration.mdx
similarity index 98%
rename from docs/cli/configuration.md
rename to versioned_docs/version-v8/cli/configuration.mdx
index 18e0d8c9250..7bebbae6846 100644
--- a/docs/cli/configuration.md
+++ b/versioned_docs/version-v8/cli/configuration.mdx
@@ -52,7 +52,7 @@ Each Ionic project has a project configuration file, usually at the project's ro
 The CLI will look for the following environment variables:
 
 - `IONIC_CONFIG_DIRECTORY`: The directory of the global CLI config. Defaults to `~/.ionic`.
-- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. Refer to [Using a Proxy](using-a-proxy.md).
+- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. Refer to [Using a Proxy](using-a-proxy.mdx).
 - `IONIC_TOKEN`: Automatically authenticates with [Appflow](https://ionic.io/appflow).
 
 ## Flags
@@ -119,7 +119,7 @@ module.exports = function (ctx) {
 
 <small>_Available in CLI 6.2.0+_</small>
 
-The Ionic CLI supports a multi-app configuration setup, which involves multiple Ionic apps and shared code within a single repository, or [monorepo](../reference/glossary.md#monorepo).
+The Ionic CLI supports a multi-app configuration setup, which involves multiple Ionic apps and shared code within a single repository, or [monorepo](../reference/glossary.mdx#monorepo).
 
 :::note
 
diff --git a/versioned_docs/version-v9/cli/livereload.md b/versioned_docs/version-v8/cli/livereload.mdx
similarity index 96%
rename from versioned_docs/version-v9/cli/livereload.md
rename to versioned_docs/version-v8/cli/livereload.mdx
index fe4d0c37438..db6b96ff5fb 100644
--- a/versioned_docs/version-v9/cli/livereload.md
+++ b/versioned_docs/version-v8/cli/livereload.mdx
@@ -1,6 +1,6 @@
 # Live Reload
 
-Using the Live Reload option will reload the browser or [Web View](../core-concepts/webview.md) when you change your app's code in your development environment. This is particularly useful for developing using hardware devices.
+Using the Live Reload option will reload the browser or [Web View](../core-concepts/webview.mdx) when you change your app's code in your development environment. This is particularly useful for developing using hardware devices.
 
 ## Terms
 
diff --git a/versioned_docs/version-v8/cli/using-a-proxy.md b/versioned_docs/version-v8/cli/using-a-proxy.mdx
similarity index 100%
rename from versioned_docs/version-v8/cli/using-a-proxy.md
rename to versioned_docs/version-v8/cli/using-a-proxy.mdx
diff --git a/versioned_docs/version-v8/components.md b/versioned_docs/version-v8/components.mdx
similarity index 99%
rename from versioned_docs/version-v8/components.md
rename to versioned_docs/version-v8/components.mdx
index a437db16c89..343d28d2e1a 100644
--- a/versioned_docs/version-v8/components.md
+++ b/versioned_docs/version-v8/components.mdx
@@ -19,7 +19,7 @@ import DocsCards from '@components/global/DocsCards';
   `}</style>
 </head>
 
-Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you're familiar with the basics, refer to the [API Index](api.md) for a complete list of each component and sub-component.
+Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you're familiar with the basics, refer to the [API Index](api.mdx) for a complete list of each component and sub-component.
 
 <intro-end />
 
diff --git a/versioned_docs/version-v8/contributing/coc.md b/versioned_docs/version-v8/contributing/coc.mdx
similarity index 100%
rename from versioned_docs/version-v8/contributing/coc.md
rename to versioned_docs/version-v8/contributing/coc.mdx
diff --git a/docs/contributing/how-to-contribute.md b/versioned_docs/version-v8/contributing/how-to-contribute.mdx
similarity index 99%
rename from docs/contributing/how-to-contribute.md
rename to versioned_docs/version-v8/contributing/how-to-contribute.mdx
index 7ea536dab28..1e510e34cff 100644
--- a/docs/contributing/how-to-contribute.md
+++ b/versioned_docs/version-v8/contributing/how-to-contribute.mdx
@@ -8,7 +8,7 @@ Thanks for the interest in contributing to Ionic Framework!
 
 ## Contributing Etiquette
 
-Please refer to the [Contributor Code of Conduct](coc.md) for information on the rules of conduct.
+Please refer to the [Contributor Code of Conduct](coc.mdx) for information on the rules of conduct.
 
 ## Creating an Issue
 
diff --git a/versioned_docs/version-v9/core-concepts/cross-platform.md b/versioned_docs/version-v8/core-concepts/cross-platform.mdx
similarity index 93%
rename from versioned_docs/version-v9/core-concepts/cross-platform.md
rename to versioned_docs/version-v8/core-concepts/cross-platform.mdx
index 7b49f3b00a1..00763be7f28 100644
--- a/versioned_docs/version-v9/core-concepts/cross-platform.md
+++ b/versioned_docs/version-v8/core-concepts/cross-platform.mdx
@@ -12,7 +12,7 @@ In a native application, it's common to make API calls to communicate with the d
 
 ### Ionic Native
 
-[Ionic Native](../native.md) has its own internal logic to detect if it is inside of a native environment. Instead of throwing a runtime error, it will print a warning if it is not a native environment and there are no Cordova plugins available. The app won’t break and it will continue to work, although without the native functionality.
+[Ionic Native](../native.mdx) has its own internal logic to detect if it is inside of a native environment. Instead of throwing a runtime error, it will print a warning if it is not a native environment and there are no Cordova plugins available. The app won’t break and it will continue to work, although without the native functionality.
 
 ### Platform Detection
 
@@ -67,7 +67,7 @@ This will render 5 items with a width of 100% each. This may look great on a pho
 
 <img src={require('@site/static/img/building/cross-platform-items.png').default} />
 
-To improve this experience, we can wrap the items in a [Grid](../api/grid.md) component. The view can be easily rewritten into something more usable on larger screens:
+To improve this experience, we can wrap the items in a [Grid](../api/grid.mdx) component. The view can be easily rewritten into something more usable on larger screens:
 
 ```html
 <ion-grid>
@@ -149,7 +149,7 @@ There’s a lot going on in the example above. These are the key points:
 
 - The `size` attribute can have a breakpoint added to it, `size-{breakpoint}`. This value sets the size for the specified breakpoint and above.
 
-For more information on customizing with grid, refer to the [Grid](../api/grid.md) documentation.
+For more information on customizing with grid, refer to the [Grid](../api/grid.mdx) documentation.
 
 ## Storage
 
diff --git a/docs/core-concepts/fundamentals.md b/versioned_docs/version-v8/core-concepts/fundamentals.mdx
similarity index 84%
rename from docs/core-concepts/fundamentals.md
rename to versioned_docs/version-v8/core-concepts/fundamentals.mdx
index 8f4772ac565..6630422a917 100644
--- a/docs/core-concepts/fundamentals.md
+++ b/versioned_docs/version-v8/core-concepts/fundamentals.mdx
@@ -15,13 +15,13 @@ For those completely new to Ionic app development, it can be helpful to get a hi
 
 ## UI Components
 
-Ionic Framework is a library of UI Components, which are reusable elements that serve as the building blocks for an application. Ionic Components are built with [web standards](../reference/glossary.md#web-standards) using HTML, CSS, and JavaScript. Though the components are pre-built, they're designed from the ground up to be highly customizable so apps can make each component their own, allowing each app to have its own look and feel. More specifically, Ionic components can be easily themed to globally change appearance across an entire app. For more information about customizing the look, please refer to [Theming](../theming/basics.md).
+Ionic Framework is a library of UI Components, which are reusable elements that serve as the building blocks for an application. Ionic Components are built with [web standards](../reference/glossary.mdx#web-standards) using HTML, CSS, and JavaScript. Though the components are pre-built, they're designed from the ground up to be highly customizable so apps can make each component their own, allowing each app to have its own look and feel. More specifically, Ionic components can be easily themed to globally change appearance across an entire app. For more information about customizing the look, please refer to [Theming](../theming/basics.mdx).
 
 ## Adaptive Styling
 
 Adaptive Styling is a built-in feature of Ionic Framework which allows app developers to use the same code base for multiple platforms. Every Ionic component adapts its look to the platform on which the app is running on. For example, Apple devices, such as the iPhone and iPad, use Apple's own [iOS design language](https://www.apple.com/ios). Similarly, Android devices use Google's design language called [Material Design](https://material.io/guidelines/).
 
-By making subtle design changes between the platforms, users are provided with a familiar app experience. An Ionic app downloaded from Apple's App Store will get the iOS theme, while an Ionic app downloaded from Android's Play Store will get the Material Design theme. For the apps that are viewed as a Progressive Web App (PWA) from a browser, Ionic will default to using the Material Design theme. Additionally, deciding which platform to use in certain scenarios is entirely configurable. More information about adaptive styling can be found in [Theming](../theming/basics.md).
+By making subtle design changes between the platforms, users are provided with a familiar app experience. An Ionic app downloaded from Apple's App Store will get the iOS theme, while an Ionic app downloaded from Android's Play Store will get the Material Design theme. For the apps that are viewed as a Progressive Web App (PWA) from a browser, Ionic will default to using the Material Design theme. Additionally, deciding which platform to use in certain scenarios is entirely configurable. More information about adaptive styling can be found in [Theming](../theming/basics.mdx).
 
 ## Navigation
 
@@ -38,19 +38,19 @@ For apps that are built with Angular and `@ionic/angular`, we recommend using th
 
 An amazing feature of apps built with web technologies (such as Ionic apps!) is that it can run on virtually any platform: desktop computers, phones, tablets, cars, refrigerators, and more! The same code base for Ionic apps can work on many platforms because it is based on web standards and common APIs that are shared across these platforms.
 
-One of the most common use cases for Ionic is to build an app which can be downloaded from both the [App Store](https://www.apple.com/ios/app-store/) and [Play Store](https://play.google.com/). Both iOS and Android software development kits (SDKs) provide [Web Views](webview.md) which render any Ionic app, while still allowing for _full_ Native SDK access.
+One of the most common use cases for Ionic is to build an app which can be downloaded from both the [App Store](https://www.apple.com/ios/app-store/) and [Play Store](https://play.google.com/). Both iOS and Android software development kits (SDKs) provide [Web Views](webview.mdx) which render any Ionic app, while still allowing for _full_ Native SDK access.
 
 Projects such as [Capacitor](https://capacitorjs.com/) and [Cordova](https://cordova.apache.org/) are commonly used to give Ionic apps this access to Native SDKs. This means developers can quickly build out an app using common web development tools, and still have access to native features such as the device's accelerometer, camera, GPS, and more.
 
 ## Theming
 
-At the core, Ionic Framework is built using [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) which allows us to take advantage of the flexibility that [CSS properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) provide. This makes it incredibly easy to design an app that looks great while following the web standard. We provide a set of colors so developers can have some great defaults, but we encourage overriding them to create designs that match a brand, company or a desired color palette. Everything from the background color of an application to the text color is fully customizable. More information on app theming can be found in [Theming](../theming/basics.md).
+At the core, Ionic Framework is built using [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) which allows us to take advantage of the flexibility that [CSS properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) provide. This makes it incredibly easy to design an app that looks great while following the web standard. We provide a set of colors so developers can have some great defaults, but we encourage overriding them to create designs that match a brand, company or a desired color palette. Everything from the background color of an application to the text color is fully customizable. More information on app theming can be found in [Theming](../theming/basics.mdx).
 
 ## Events
 
 Many Ionic components use [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) to inform developers of important state changes in the components. For example, an `ion-datetime` component will emit `ionChange` whenever the selected date has changed.
 
-Developers can use standard events such as `click` as they normally would. However, many events emitted within a component's [shadow root](../reference/glossary.md#shadow) will be [retargeted](https://dom.spec.whatwg.org/#retarget) to the host element. This may result in multiple `click` handlers executing even if the user only clicked once. As a result, developers should rely on Ionic's events to be properly informed of state changes on Ionic components. Ionic's events are prefixed with `ion` to avoid collisions with standard events. Each component's documentation page has a list of available events that developers can listen for in their applications.
+Developers can use standard events such as `click` as they normally would. However, many events emitted within a component's [shadow root](../reference/glossary.mdx#shadow) will be [retargeted](https://dom.spec.whatwg.org/#retarget) to the host element. This may result in multiple `click` handlers executing even if the user only clicked once. As a result, developers should rely on Ionic's events to be properly informed of state changes on Ionic components. Ionic's events are prefixed with `ion` to avoid collisions with standard events. Each component's documentation page has a list of available events that developers can listen for in their applications.
 
 ## Properties
 
diff --git a/versioned_docs/version-v9/core-concepts/webview.md b/versioned_docs/version-v8/core-concepts/webview.mdx
similarity index 80%
rename from versioned_docs/version-v9/core-concepts/webview.md
rename to versioned_docs/version-v8/core-concepts/webview.mdx
index f535acefe2d..38aaa053ce6 100644
--- a/versioned_docs/version-v9/core-concepts/webview.md
+++ b/versioned_docs/version-v8/core-concepts/webview.mdx
@@ -12,13 +12,13 @@ title: Web View
 
 Web Views power web apps on native devices.
 
-The Web View is automatically provided for apps integrated with [Capacitor](../reference/glossary.md#capacitor).
+The Web View is automatically provided for apps integrated with [Capacitor](../reference/glossary.mdx#capacitor).
 
-For [Cordova](../reference/glossary.md#cordova), Ionic maintains a [Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview). The plugin is provided by default when using the Ionic CLI.
+For [Cordova](../reference/glossary.mdx#cordova), Ionic maintains a [Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview). The plugin is provided by default when using the Ionic CLI.
 
 ## What is a Web View?
 
-Ionic apps are built using [web technologies](../reference/glossary.md#web-standards) and are rendered using Web Views, which are a full screen and full-powered web browser.
+Ionic apps are built using [web technologies](../reference/glossary.mdx#web-standards) and are rendered using Web Views, which are a full screen and full-powered web browser.
 
 Modern Web Views offer many built-in [HTML5 APIs](https://whatwebcando.today) for hardware functionality such as cameras, sensors, GPS, speakers, and Bluetooth, but sometimes it may also be necessary to access platform-specific hardware APIs. In Ionic apps, hardware APIs can be accessed through a bridge layer, typically by using native plugins which expose JavaScript APIs.
 
@@ -28,7 +28,7 @@ The Ionic Web View plugin is specialized for modern JavaScript apps. For both iO
 
 ### CORS
 
-Web Views enforce [CORS](../reference/glossary.md#cors), so it's important that external services properly handle cross-origin requests. Refer to the [CORS FAQs](../troubleshooting/cors.md) for information on dealing with CORS in Ionic apps.
+Web Views enforce [CORS](../reference/glossary.mdx#cors), so it's important that external services properly handle cross-origin requests. Refer to the [CORS FAQs](../troubleshooting/cors.mdx) for information on dealing with CORS in Ionic apps.
 
 ### File Protocol
 
diff --git a/versioned_docs/version-v8/core-concepts/what-are-progressive-web-apps.md b/versioned_docs/version-v8/core-concepts/what-are-progressive-web-apps.mdx
similarity index 100%
rename from versioned_docs/version-v8/core-concepts/what-are-progressive-web-apps.md
rename to versioned_docs/version-v8/core-concepts/what-are-progressive-web-apps.mdx
diff --git a/versioned_docs/version-v8/deployment/app-store.md b/versioned_docs/version-v8/deployment/app-store.mdx
similarity index 100%
rename from versioned_docs/version-v8/deployment/app-store.md
rename to versioned_docs/version-v8/deployment/app-store.mdx
diff --git a/docs/deployment/progressive-web-app.md b/versioned_docs/version-v8/deployment/progressive-web-app.mdx
similarity index 94%
rename from docs/deployment/progressive-web-app.md
rename to versioned_docs/version-v8/deployment/progressive-web-app.mdx
index 1fa0dbebd4a..b1682f5c56d 100644
--- a/docs/deployment/progressive-web-app.md
+++ b/versioned_docs/version-v8/deployment/progressive-web-app.mdx
@@ -14,7 +14,7 @@ import DocsCards from '@components/global/DocsCards';
   />
 </head>
 
-Because Ionic Apps are built with web technologies, they can run just as well as a Progressive Web App as they can a native app. Not sure what PWAs are? Check out Ionic's [PWA Overview](https://ionicframework.com/pwa) or the [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.md) page for more info.
+Because Ionic Apps are built with web technologies, they can run just as well as a Progressive Web App as they can a native app. Not sure what PWAs are? Check out Ionic's [PWA Overview](https://ionicframework.com/pwa) or the [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.mdx) page for more info.
 
 For the frameworks Ionic supports, we've created dedicated guides that go into more detail. Below are links for Angular, React, and Vue.
 
diff --git a/versioned_docs/version-v8/developer-resources/courses.md b/versioned_docs/version-v8/developer-resources/courses.mdx
similarity index 100%
rename from versioned_docs/version-v8/developer-resources/courses.md
rename to versioned_docs/version-v8/developer-resources/courses.mdx
diff --git a/versioned_docs/version-v9/developer-resources/guides.md b/versioned_docs/version-v8/developer-resources/guides.mdx
similarity index 76%
rename from versioned_docs/version-v9/developer-resources/guides.md
rename to versioned_docs/version-v8/developer-resources/guides.mdx
index dbe6d9477b8..c0590b83684 100644
--- a/versioned_docs/version-v9/developer-resources/guides.md
+++ b/versioned_docs/version-v8/developer-resources/guides.mdx
@@ -1,9 +1,9 @@
 # Guides
 
-### [Your First Ionic App - v3](guides/first-app-v3/intro.md)
+### [Your First Ionic App - v3](guides/first-app-v3/intro.mdx)
 
 Follow along as we create a working Photo Gallery app using Ionic Framework v3 and Appflow.
 
-### [Your First Ionic 4 App - Angular and Cordova](guides/first-app-v4/intro.md)
+### [Your First Ionic 4 App - Angular and Cordova](guides/first-app-v4/intro.mdx)
 
 Follow along as we create a working Photo Gallery app using Ionic Framework v4 and Cordova.
diff --git a/versioned_docs/version-v8/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md b/versioned_docs/version-v8/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx
similarity index 100%
rename from versioned_docs/version-v8/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md
rename to versioned_docs/version-v8/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx
diff --git a/versioned_docs/version-v8/developer-resources/guides/first-app-v3/intro.md b/versioned_docs/version-v8/developer-resources/guides/first-app-v3/intro.mdx
similarity index 100%
rename from versioned_docs/version-v8/developer-resources/guides/first-app-v3/intro.md
rename to versioned_docs/version-v8/developer-resources/guides/first-app-v3/intro.mdx
diff --git a/versioned_docs/version-v8/developer-resources/guides/first-app-v3/ios-android-camera.md b/versioned_docs/version-v8/developer-resources/guides/first-app-v3/ios-android-camera.mdx
similarity index 100%
rename from versioned_docs/version-v8/developer-resources/guides/first-app-v3/ios-android-camera.md
rename to versioned_docs/version-v8/developer-resources/guides/first-app-v3/ios-android-camera.mdx
diff --git a/versioned_docs/version-v9/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md b/versioned_docs/version-v8/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx
similarity index 94%
rename from versioned_docs/version-v9/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
rename to versioned_docs/version-v8/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx
index f6647f88a5a..ff1d1fcff85 100644
--- a/versioned_docs/version-v9/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
+++ b/versioned_docs/version-v8/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx
@@ -70,7 +70,7 @@ Next, create a local, native build of the app.
 
 ## Android Builds
 
-Follow the [Android Setup instructions](../../../developing/android.md), which includes installing Java 8 and Android Studio on your machine. Then, in your Terminal run:
+Follow the [Android Setup instructions](../../../developing/android.mdx), which includes installing Java 8 and Android Studio on your machine. Then, in your Terminal run:
 
 ```shell
 ionic cordova build android --prod
@@ -80,13 +80,13 @@ This will generate a unsigned debug build (meaning the app can run on any Androi
 
 ## iOS Builds
 
-iOS is [a bit trickier to set up](../../../developing/ios.md) than Android and requires a Mac computer. Ensure XCode is updated to the latest version and set up a development team. Then, in your Terminal, run:
+iOS is [a bit trickier to set up](../../../developing/ios.mdx) than Android and requires a Mac computer. Ensure XCode is updated to the latest version and set up a development team. Then, in your Terminal, run:
 
 ```shell
 ionic cordova build ios --prod
 ```
 
-Then, continue to follow the [app store deployment instructions](../../../deployment/app-store.md) regarding signing certificates, etc. With a native version of your app built, let’s copy it to your device of choice.
+Then, continue to follow the [app store deployment instructions](../../../deployment/app-store.mdx) regarding signing certificates, etc. With a native version of your app built, let’s copy it to your device of choice.
 
 ## Add the Native App to Your Local Device
 
diff --git a/versioned_docs/version-v8/developer-resources/guides/first-app-v3/theming.md b/versioned_docs/version-v8/developer-resources/guides/first-app-v3/theming.mdx
similarity index 100%
rename from versioned_docs/version-v8/developer-resources/guides/first-app-v3/theming.md
rename to versioned_docs/version-v8/developer-resources/guides/first-app-v3/theming.mdx
diff --git a/versioned_docs/version-v8/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md b/versioned_docs/version-v8/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx
similarity index 100%
rename from versioned_docs/version-v8/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
rename to versioned_docs/version-v8/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx
diff --git a/versioned_docs/version-v8/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md b/versioned_docs/version-v8/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx
similarity index 100%
rename from versioned_docs/version-v8/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md
rename to versioned_docs/version-v8/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx
diff --git a/versioned_docs/version-v8/developer-resources/guides/first-app-v4/intro.md b/versioned_docs/version-v8/developer-resources/guides/first-app-v4/intro.mdx
similarity index 98%
rename from versioned_docs/version-v8/developer-resources/guides/first-app-v4/intro.md
rename to versioned_docs/version-v8/developer-resources/guides/first-app-v4/intro.mdx
index 8c016a94057..a2481a35344 100644
--- a/versioned_docs/version-v8/developer-resources/guides/first-app-v4/intro.md
+++ b/versioned_docs/version-v8/developer-resources/guides/first-app-v4/intro.mdx
@@ -29,7 +29,7 @@ npm install -g @ionic/cli cordova
 
 The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
 
-Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../../../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../../../developing/tips.mdx#resolving-permission-errors) for more information.
 
 :::
 
diff --git a/versioned_docs/version-v8/developer-resources/guides/first-app-v4/ios-android-camera.md b/versioned_docs/version-v8/developer-resources/guides/first-app-v4/ios-android-camera.mdx
similarity index 98%
rename from versioned_docs/version-v8/developer-resources/guides/first-app-v4/ios-android-camera.md
rename to versioned_docs/version-v8/developer-resources/guides/first-app-v4/ios-android-camera.mdx
index 01b67eb109a..8e1c8b15d11 100644
--- a/versioned_docs/version-v8/developer-resources/guides/first-app-v4/ios-android-camera.md
+++ b/versioned_docs/version-v8/developer-resources/guides/first-app-v4/ios-android-camera.mdx
@@ -13,7 +13,7 @@ $ ionic cordova platform add android
 
 These commands will create a `config.xml` file, which is used to define Cordova iOS and Android settings. Cordova reads this file and applies each setting as it builds each native app binary.
 
-There are more steps to configure [iOS](../../../developing/ios.md) and [Android](../../../developing/android.md) native tooling.
+There are more steps to configure [iOS](../../../developing/ios.mdx) and [Android](../../../developing/android.mdx) native tooling.
 
 Much better! Now we can add the camera functionality. By the way, you can find reference code for this [on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4).
 
diff --git a/versioned_docs/version-v9/developer-resources/guides/first-app-v4/theming.md b/versioned_docs/version-v8/developer-resources/guides/first-app-v4/theming.mdx
similarity index 92%
rename from versioned_docs/version-v9/developer-resources/guides/first-app-v4/theming.md
rename to versioned_docs/version-v8/developer-resources/guides/first-app-v4/theming.mdx
index c185f6761c1..c55d591b308 100644
--- a/versioned_docs/version-v9/developer-resources/guides/first-app-v4/theming.md
+++ b/versioned_docs/version-v8/developer-resources/guides/first-app-v4/theming.mdx
@@ -27,7 +27,7 @@ By changing these variables here and there, you can easily update the entire the
 }
 ```
 
-The easiest and most powerful way to create custom color palettes for your app’s UI is Ionic's [Color Generator tool](../../../theming/color-generator.md). As you change a color’s hex values, the embedded demo app automatically reflects the new colors. When you've finished making changes, simply copy and paste the generated code directly into your Ionic project.
+The easiest and most powerful way to create custom color palettes for your app’s UI is Ionic's [Color Generator tool](../../../theming/color-generator.mdx). As you change a color’s hex values, the embedded demo app automatically reflects the new colors. When you've finished making changes, simply copy and paste the generated code directly into your Ionic project.
 
 But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to:
 
diff --git a/versioned_docs/version-v8/developer-resources/posts.md b/versioned_docs/version-v8/developer-resources/posts.mdx
similarity index 100%
rename from versioned_docs/version-v8/developer-resources/posts.md
rename to versioned_docs/version-v8/developer-resources/posts.mdx
diff --git a/versioned_docs/version-v8/developer-resources/tools.md b/versioned_docs/version-v8/developer-resources/tools.mdx
similarity index 92%
rename from versioned_docs/version-v8/developer-resources/tools.md
rename to versioned_docs/version-v8/developer-resources/tools.mdx
index 6fc030a24eb..c38ba90eef8 100644
--- a/versioned_docs/version-v8/developer-resources/tools.md
+++ b/versioned_docs/version-v8/developer-resources/tools.mdx
@@ -12,7 +12,7 @@ Quickly get started with a new Ionic app entirely in the browser!
 
 Check out the features that make working with TypeScript amazing.
 
-### [Glossary](../reference/glossary.md)
+### [Glossary](../reference/glossary.mdx)
 
 A list of common terms you'll encounter while developing in Ionic.
 
diff --git a/versioned_docs/version-v8/developer-resources/videos.md b/versioned_docs/version-v8/developer-resources/videos.mdx
similarity index 100%
rename from versioned_docs/version-v8/developer-resources/videos.md
rename to versioned_docs/version-v8/developer-resources/videos.mdx
diff --git a/versioned_docs/version-v8/developing/android.md b/versioned_docs/version-v8/developing/android.mdx
similarity index 100%
rename from versioned_docs/version-v8/developing/android.md
rename to versioned_docs/version-v8/developing/android.mdx
diff --git a/versioned_docs/version-v8/developing/config.md b/versioned_docs/version-v8/developing/config.mdx
similarity index 99%
rename from versioned_docs/version-v8/developing/config.md
rename to versioned_docs/version-v8/developing/config.mdx
index 91adfc4e98e..70d2d89cfa6 100644
--- a/versioned_docs/version-v8/developing/config.md
+++ b/versioned_docs/version-v8/developing/config.mdx
@@ -13,7 +13,7 @@ The available config keys can be found in the [`IonicConfig`](#ionicconfig) inte
 
 The following example disables ripple effects and default the mode to Material Design:
 
-import GlobalExample from '@site/docs/developing/config/global/index.md';
+import GlobalExample from '@site/docs/developing/config/global/index.mdx';
 
 <GlobalExample />
 
@@ -21,7 +21,7 @@ import GlobalExample from '@site/docs/developing/config/global/index.md';
 
 Ionic Config is not reactive. Updating the config's value after the component has rendered will result in the previous value. It is recommended to use a component's properties instead of updating the config, when you require reactive values.
 
-import PerComponentExample from '@site/docs/developing/config/per-component/index.md';
+import PerComponentExample from '@site/docs/developing/config/per-component/index.mdx';
 
 <PerComponentExample />
 
@@ -31,7 +31,7 @@ Ionic Config can also be set on a per-platform basis. For example, this allows y
 
 In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser.
 
-import PerPlatformExample from '@site/docs/developing/config/per-platform/index.md';
+import PerPlatformExample from '@site/docs/developing/config/per-platform/index.mdx';
 
 <PerPlatformExample />
 
@@ -39,7 +39,7 @@ import PerPlatformExample from '@site/docs/developing/config/per-platform/index.
 
 The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match:
 
-import PerPlatformFallbackExample from '@site/docs/developing/config/per-platform-overrides/index.md';
+import PerPlatformFallbackExample from '@site/docs/developing/config/per-platform-overrides/index.mdx';
 
 <PerPlatformFallbackExample />
 
@@ -47,7 +47,7 @@ import PerPlatformFallbackExample from '@site/docs/developing/config/per-platfor
 
 This final example allows you to accumulate a config object based upon different platform requirements.
 
-import PerPlatformOverridesExample from '@site/docs/developing/config/per-platform-fallback/index.md';
+import PerPlatformOverridesExample from '@site/docs/developing/config/per-platform-fallback/index.mdx';
 
 <PerPlatformOverridesExample />
 
diff --git a/versioned_docs/version-v8/developing/config/global/index.md b/versioned_docs/version-v8/developing/config/global/index.mdx
similarity index 100%
rename from versioned_docs/version-v8/developing/config/global/index.md
rename to versioned_docs/version-v8/developing/config/global/index.mdx
diff --git a/versioned_docs/version-v8/developing/config/per-component/index.md b/versioned_docs/version-v8/developing/config/per-component/index.mdx
similarity index 100%
rename from versioned_docs/version-v8/developing/config/per-component/index.md
rename to versioned_docs/version-v8/developing/config/per-component/index.mdx
diff --git a/versioned_docs/version-v8/developing/config/per-platform-fallback/index.md b/versioned_docs/version-v8/developing/config/per-platform-fallback/index.mdx
similarity index 100%
rename from versioned_docs/version-v8/developing/config/per-platform-fallback/index.md
rename to versioned_docs/version-v8/developing/config/per-platform-fallback/index.mdx
diff --git a/versioned_docs/version-v8/developing/config/per-platform-overrides/index.md b/versioned_docs/version-v8/developing/config/per-platform-overrides/index.mdx
similarity index 100%
rename from versioned_docs/version-v8/developing/config/per-platform-overrides/index.md
rename to versioned_docs/version-v8/developing/config/per-platform-overrides/index.mdx
diff --git a/versioned_docs/version-v8/developing/config/per-platform/index.md b/versioned_docs/version-v8/developing/config/per-platform/index.mdx
similarity index 100%
rename from versioned_docs/version-v8/developing/config/per-platform/index.md
rename to versioned_docs/version-v8/developing/config/per-platform/index.mdx
diff --git a/versioned_docs/version-v8/developing/hardware-back-button.md b/versioned_docs/version-v8/developing/hardware-back-button.mdx
similarity index 97%
rename from versioned_docs/version-v8/developing/hardware-back-button.md
rename to versioned_docs/version-v8/developing/hardware-back-button.mdx
index fe626442627..22646de1976 100644
--- a/versioned_docs/version-v8/developing/hardware-back-button.md
+++ b/versioned_docs/version-v8/developing/hardware-back-button.mdx
@@ -42,7 +42,7 @@ The table below shows how hardware back button support varies by environment.
 
 ### Hardware Back Button in a Browser or a PWA
 
-Ionic has experimental support for handling the hardware back button in a browser or a PWA by setting [`experimentalCloseWatcher: true` in the IonicConfig](./config.md). When this feature is enabled, Ionic will use the [Close Watcher API](https://github.com/WICG/close-watcher) to pass any close requests through the `ionBackButton` event. This includes pressing the hardware back button to navigate or the Escape key to dismiss a modal.
+Ionic has experimental support for handling the hardware back button in a browser or a PWA by setting [`experimentalCloseWatcher: true` in the IonicConfig](./config.mdx). When this feature is enabled, Ionic will use the [Close Watcher API](https://github.com/WICG/close-watcher) to pass any close requests through the `ionBackButton` event. This includes pressing the hardware back button to navigate or the Escape key to dismiss a modal.
 
 Chrome has support for Close Watcher starting in [Chrome 120](https://developer.chrome.com/blog/new-in-chrome-120).
 
diff --git a/versioned_docs/version-v8/developing/ios.md b/versioned_docs/version-v8/developing/ios.mdx
similarity index 100%
rename from versioned_docs/version-v8/developing/ios.md
rename to versioned_docs/version-v8/developing/ios.mdx
diff --git a/versioned_docs/version-v8/developing/keyboard.md b/versioned_docs/version-v8/developing/keyboard.mdx
similarity index 100%
rename from versioned_docs/version-v8/developing/keyboard.md
rename to versioned_docs/version-v8/developing/keyboard.mdx
diff --git a/versioned_docs/version-v8/developing/managing-focus.md b/versioned_docs/version-v8/developing/managing-focus.mdx
similarity index 100%
rename from versioned_docs/version-v8/developing/managing-focus.md
rename to versioned_docs/version-v8/developing/managing-focus.mdx
diff --git a/versioned_docs/version-v8/developing/previewing.md b/versioned_docs/version-v8/developing/previewing.mdx
similarity index 94%
rename from versioned_docs/version-v8/developing/previewing.md
rename to versioned_docs/version-v8/developing/previewing.mdx
index cf565f0590a..9aea2738ad5 100644
--- a/versioned_docs/version-v8/developing/previewing.md
+++ b/versioned_docs/version-v8/developing/previewing.mdx
@@ -12,9 +12,9 @@ title: Previewing
 
 There are many different options to test native functionality depending on your target platforms and needs.
 
-- Run locally in a web browser (using [Platform Detection](../core-concepts/cross-platform.md) for native functionality)
-- [Deploy to iOS](ios.md)
-- [Deploy to Android](android.md)
+- Run locally in a web browser (using [Platform Detection](../core-concepts/cross-platform.mdx) for native functionality)
+- [Deploy to iOS](ios.mdx)
+- [Deploy to Android](android.mdx)
 
 ## Run Locally in a Web Browser
 
@@ -44,8 +44,8 @@ If the external link isn't listed on the terminal, then run `ionic serve --exter
 
 :::
 
-When implementing native functionality, use [Platform Detection](../core-concepts/cross-platform.md).
-When you're ready to test on a real device, refer to the guides for [iOS](ios.md) and [Android](android.md).
+When implementing native functionality, use [Platform Detection](../core-concepts/cross-platform.mdx).
+When you're ready to test on a real device, refer to the guides for [iOS](ios.mdx) and [Android](android.mdx).
 
 ## Simulating a Mobile Viewport
 
diff --git a/versioned_docs/version-v8/developing/scaffolding.md b/versioned_docs/version-v8/developing/scaffolding.mdx
similarity index 100%
rename from versioned_docs/version-v8/developing/scaffolding.md
rename to versioned_docs/version-v8/developing/scaffolding.mdx
diff --git a/versioned_docs/version-v8/developing/starting.md b/versioned_docs/version-v8/developing/starting.mdx
similarity index 100%
rename from versioned_docs/version-v8/developing/starting.md
rename to versioned_docs/version-v8/developing/starting.mdx
diff --git a/versioned_docs/version-v8/developing/tips.md b/versioned_docs/version-v8/developing/tips.mdx
similarity index 98%
rename from versioned_docs/version-v8/developing/tips.md
rename to versioned_docs/version-v8/developing/tips.mdx
index 1fc7c8a65b1..16a7292b819 100644
--- a/versioned_docs/version-v8/developing/tips.md
+++ b/versioned_docs/version-v8/developing/tips.mdx
@@ -133,7 +133,7 @@ The iOS simulator enables testing and debugging of an app before it reaches an a
 
 Before it can be used, [Xcode](https://developer.apple.com/xcode/download/), Apple's IDE, must be installed.
 
-The [Ionic CLI](../cli.md) can then be used to run the app in the current directory on the simulator:
+The [Ionic CLI](../cli.mdx) can then be used to run the app in the current directory on the simulator:
 
 ```shell
 ionic cordova emulate ios -lc
diff --git a/versioned_docs/version-v8/index.md b/versioned_docs/version-v8/index.mdx
similarity index 86%
rename from versioned_docs/version-v8/index.md
rename to versioned_docs/version-v8/index.mdx
index f6ee47a2392..a78b2c99af8 100644
--- a/versioned_docs/version-v8/index.md
+++ b/versioned_docs/version-v8/index.mdx
@@ -22,9 +22,9 @@ import DocsCards from '@components/global/DocsCards';
   <meta property="og:url" content="https://ionicframework.com/docs" />
 </head>
 
-Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.md), [React](react/overview.md), and [Vue](vue/overview.md).
+Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.mdx), [React](react/overview.mdx), and [Vue](vue/overview.mdx).
 
-Get started building by [installing Ionic](intro/cli.md) or following our [First App Tutorial](intro/next.md#build-your-first-app) to learn the main concepts.
+Get started building by [installing Ionic](intro/cli.mdx) or following our [First App Tutorial](intro/next.mdx#build-your-first-app) to learn the main concepts.
 
 <intro-end />
 
@@ -58,11 +58,11 @@ Get started building by [installing Ionic](intro/cli.md) or following our [First
 
 ## Overview
 
-Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.md), [React](react/overview.md), or [Vue](vue/overview.md). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.md). If you’d like to learn more about Ionic before diving in, we [created a video](https://youtu.be/p3AN3igqiRc) to walk you through the basics.
+Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.mdx), [React](react/overview.mdx), or [Vue](vue/overview.mdx). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.mdx). If you’d like to learn more about Ionic before diving in, we [created a video](https://youtu.be/p3AN3igqiRc) to walk you through the basics.
 
 ### One codebase, running everywhere
 
-Ionic is the only mobile app stack that enables web developers to build apps for all major app stores and the mobile web from a single codebase. And with [Adaptive Styling](theming/platform-styles.md), Ionic apps look and feel at home on every device.
+Ionic is the only mobile app stack that enables web developers to build apps for all major app stores and the mobile web from a single codebase. And with [Adaptive Styling](theming/platform-styles.mdx), Ionic apps look and feel at home on every device.
 
 ### A focus on performance
 
@@ -84,7 +84,7 @@ Build and deploy apps that work across multiple platforms, such as native iOS, A
 
 ### Web Standards-based
 
-Ionic is built on top of reliable, [standardized web technologies](reference/glossary.md#web-standards): HTML, CSS, and JavaScript, using modern Web APIs such as Custom Elements and Shadow DOM. Because of this, Ionic components have a stable API, and aren't at the whim of a single platform vendor.
+Ionic is built on top of reliable, [standardized web technologies](reference/glossary.mdx#web-standards): HTML, CSS, and JavaScript, using modern Web APIs such as Custom Elements and Shadow DOM. Because of this, Ionic components have a stable API, and aren't at the whim of a single platform vendor.
 
 ### Beautiful Design
 
@@ -121,7 +121,7 @@ Support for other frameworks will be considered in future releases.
 
 ## Ionic CLI
 
-The official [Ionic CLI](cli.md), or Command Line Interface, is a tool that quickly scaffolds Ionic apps and provides a number of helpful commands to Ionic developers. In addition to installing and updating Ionic, the CLI comes with a built-in development server, build and debugging tools, and much more. If you are an [Appflow](#appflow) member, the CLI can be used to perform cloud builds and deployments, and administer your account.
+The official [Ionic CLI](cli.mdx), or Command Line Interface, is a tool that quickly scaffolds Ionic apps and provides a number of helpful commands to Ionic developers. In addition to installing and updating Ionic, the CLI comes with a built-in development server, build and debugging tools, and much more. If you are an [Appflow](#appflow) member, the CLI can be used to perform cloud builds and deployments, and administer your account.
 
 ## Appflow
 
diff --git a/versioned_docs/version-v9/intro/cdn.md b/versioned_docs/version-v8/intro/cdn.mdx
similarity index 99%
rename from versioned_docs/version-v9/intro/cdn.md
rename to versioned_docs/version-v8/intro/cdn.mdx
index adf8a7ceda7..868fcd99eab 100644
--- a/versioned_docs/version-v9/intro/cdn.md
+++ b/versioned_docs/version-v8/intro/cdn.mdx
@@ -116,7 +116,7 @@ It's recommended to use [jsdelivr](https://www.jsdelivr.com/) to access the Fram
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
 ```
 
-With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic [Global Stylesheets](/docs/layout/global-stylesheets.md).
+With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic [Global Stylesheets](/docs/layout/global-stylesheets.mdx).
 
 ## Ionicons CDN
 
diff --git a/docs/intro/cli.md b/versioned_docs/version-v8/intro/cli.mdx
similarity index 79%
rename from docs/intro/cli.md
rename to versioned_docs/version-v8/intro/cli.mdx
index 17222376c24..dc775f03b94 100644
--- a/docs/intro/cli.md
+++ b/versioned_docs/version-v8/intro/cli.mdx
@@ -13,13 +13,13 @@ import AppWizard from '@components/page/intro/AppWizard';
   />
 </head>
 
-Ionic apps are created and developed primarily through the Ionic [command-line](../reference/glossary.md#cli) utility. The Ionic CLI is the preferred method of installation, as it offers a wide range of dev tools and help options along the way. It is also the main tool through which to run the app and connect it to other services, such as Appflow.
+Ionic apps are created and developed primarily through the Ionic [command-line](../reference/glossary.mdx#cli) utility. The Ionic CLI is the preferred method of installation, as it offers a wide range of dev tools and help options along the way. It is also the main tool through which to run the app and connect it to other services, such as Appflow.
 
 <AppWizard />
 
 ## Install the Ionic CLI
 
-Before proceeding, make sure your computer has [Node.js](../reference/glossary.md#node) installed. Refer to the [environment setup guide](environment.md) to prepare your machine.
+Before proceeding, make sure your computer has [Node.js](../reference/glossary.mdx#node) installed. Refer to the [environment setup guide](environment.mdx) to prepare your machine.
 
 Install the Ionic CLI with npm:
 
@@ -38,7 +38,7 @@ $ npm install -g @ionic/cli
 :::note
 
 The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
-Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information.
 
 :::
 
@@ -52,7 +52,7 @@ ionic start
 
 ![Three thumbnail previews of Ionic app templates: blank, tabs, and side menu.](/img/installation/start-app-thumbnails.png 'Ionic App Starter Templates')
 
-To learn more about starting Ionic apps, refer to the [Starting Guide](../developing/starting.md).
+To learn more about starting Ionic apps, refer to the [Starting Guide](../developing/starting.mdx).
 
 ## Run the App
 
@@ -63,4 +63,4 @@ $ cd myApp
 $ ionic serve
 ```
 
-There are a number of other ways to run an app, it's recommended to start with this workflow. To develop and test apps on devices and emulators, refer to the [Running an App Guide](../developing/previewing.md).
+There are a number of other ways to run an app, it's recommended to start with this workflow. To develop and test apps on devices and emulators, refer to the [Running an App Guide](../developing/previewing.mdx).
diff --git a/versioned_docs/version-v8/intro/environment.md b/versioned_docs/version-v8/intro/environment.mdx
similarity index 86%
rename from versioned_docs/version-v8/intro/environment.md
rename to versioned_docs/version-v8/intro/environment.mdx
index 468228b9d47..8f175c6c81c 100644
--- a/versioned_docs/version-v8/intro/environment.md
+++ b/versioned_docs/version-v8/intro/environment.mdx
@@ -31,9 +31,9 @@ Git Bash (from [git-scm.com](https://git-scm.com)) does not support TTY interact
 
 ## Node & npm
 
-Almost all tooling for modern JavaScript projects is based in [Node.js](../reference/glossary.md#node). The [download page](https://nodejs.org/en/download/) has prebuilt installation packages for all platforms. We recommend selecting the LTS version to ensure best compatibility.
+Almost all tooling for modern JavaScript projects is based in [Node.js](../reference/glossary.mdx#node). The [download page](https://nodejs.org/en/download/) has prebuilt installation packages for all platforms. We recommend selecting the LTS version to ensure best compatibility.
 
-Node is bundled with [npm](../reference/glossary.md#npm), the package manager for JavaScript.
+Node is bundled with [npm](../reference/glossary.mdx#npm), the package manager for JavaScript.
 
 To verify the installation, open a new terminal window and run:
 
@@ -44,13 +44,13 @@ $ npm --version
 
 :::note
 
-Permission errors are common on macOS when installing global packages with `npm`. If you get an `EACCES` error, refer to [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors).
+Permission errors are common on macOS when installing global packages with `npm`. If you get an `EACCES` error, refer to [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors).
 
 :::
 
 ## Git
 
-Although not required, the version control system [Git](../reference/glossary.md#git) is highly recommended.
+Although not required, the version control system [Git](../reference/glossary.mdx#git) is highly recommended.
 
 Git is often accompanied by a Git Host, such as [GitHub](https://github.com/), in which case additional setup is required. Follow the tutorial from the Git Host's documentation to set up Git:
 
diff --git a/versioned_docs/version-v8/intro/first-app.md b/versioned_docs/version-v8/intro/first-app.mdx
similarity index 100%
rename from versioned_docs/version-v8/intro/first-app.md
rename to versioned_docs/version-v8/intro/first-app.mdx
diff --git a/versioned_docs/version-v8/intro/next.md b/versioned_docs/version-v8/intro/next.mdx
similarity index 100%
rename from versioned_docs/version-v8/intro/next.md
rename to versioned_docs/version-v8/intro/next.mdx
diff --git a/versioned_docs/version-v8/intro/vscode-extension.md b/versioned_docs/version-v8/intro/vscode-extension.mdx
similarity index 100%
rename from versioned_docs/version-v8/intro/vscode-extension.md
rename to versioned_docs/version-v8/intro/vscode-extension.mdx
diff --git a/versioned_docs/version-v8/javascript/overview.md b/versioned_docs/version-v8/javascript/overview.mdx
similarity index 100%
rename from versioned_docs/version-v8/javascript/overview.md
rename to versioned_docs/version-v8/javascript/overview.mdx
diff --git a/versioned_docs/version-v9/javascript/quickstart.md b/versioned_docs/version-v8/javascript/quickstart.mdx
similarity index 95%
rename from versioned_docs/version-v9/javascript/quickstart.md
rename to versioned_docs/version-v8/javascript/quickstart.mdx
index e12dd856c25..0f51f82b72a 100644
--- a/versioned_docs/version-v9/javascript/quickstart.md
+++ b/versioned_docs/version-v8/javascript/quickstart.mdx
@@ -232,7 +232,7 @@ This creates a custom element called `home-page` that contains the layout for yo
 
 :::tip[Learn More]
 
-For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
+For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.mdx), [Toolbar](/docs/api/toolbar.mdx), [Title](/docs/api/title.mdx), and [Content](/docs/api/content.mdx) documentation.
 
 :::
 
@@ -252,7 +252,7 @@ At this point your browser should be displaying the Home page.
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.md) to navigate to another page. Update the `HomePage` component in `HomePage.js`:
+You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.mdx) to navigate to another page. Update the `HomePage` component in `HomePage.js`:
 
 ```js title="src/pages/HomePage.js"
 class HomePage extends HTMLElement {
@@ -307,7 +307,7 @@ class NewPage extends HTMLElement {
 customElements.define('new-page', NewPage);
 ```
 
-This creates a page with a [Back Button](/docs/api/back-button.md) in the [Toolbar](/docs/api/toolbar.md). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
+This creates a page with a [Back Button](/docs/api/back-button.mdx) in the [Toolbar](/docs/api/toolbar.mdx). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
 
 Next, update the `<script>` tag which imports the Home page in the `index.html` file to also import the New page:
 
@@ -332,7 +332,7 @@ When the button is clicked, Ionic's router will automatically navigate to the `/
 
 :::info
 
-Navigating can also be performed programmatically using `document.querySelector('ion-router').push('/new')`. Refer to the [Ionic Router documentation](/docs/api/router.md) for more information.
+Navigating can also be performed programmatically using `document.querySelector('ion-router').push('/new')`. Refer to the [Ionic Router documentation](/docs/api/router.mdx) for more information.
 
 :::
 
@@ -381,7 +381,7 @@ class NewPage extends HTMLElement {
 customElements.define('new-page', NewPage);
 ```
 
-For more information, refer to the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
+For more information, refer to the [Icon documentation](/docs/api/icon.mdx) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
 ## Call Component Methods
 
@@ -450,7 +450,7 @@ To call methods on Ionic components:
 1. Get a reference to the component element using `querySelector`
 2. Call the method directly on the element
 
-You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation.
+You can find available methods for each component in the [Methods](/docs/api/content.mdx#methods) section of their API documentation.
 
 ## Run on a Device
 
diff --git a/versioned_docs/version-v8/layout/css-utilities.md b/versioned_docs/version-v8/layout/css-utilities.mdx
similarity index 99%
rename from versioned_docs/version-v8/layout/css-utilities.md
rename to versioned_docs/version-v8/layout/css-utilities.mdx
index 7ae7bd3ed89..a2621f8cfa9 100644
--- a/versioned_docs/version-v8/layout/css-utilities.md
+++ b/versioned_docs/version-v8/layout/css-utilities.mdx
@@ -14,7 +14,7 @@ Ionic Framework provides a set of CSS utility classes that can be used on any el
 
 :::important
 
-If your app was not started using an available Ionic Framework starter, the stylesheets listed in the [optional section of the global stylesheets](global-stylesheets.md#optional) will need to be included in order for these styles to work.
+If your app was not started using an available Ionic Framework starter, the stylesheets listed in the [optional section of the global stylesheets](global-stylesheets.mdx#optional) will need to be included in order for these styles to work.
 
 :::
 
@@ -246,7 +246,7 @@ The following classes are deprecated and will be removed in the next major relea
 
 The padding class sets the padding area of an element. The padding area is the space between the content of the element and its border.
 
-The default amount of `padding` to be applied is `16px` and is set by the `--ion-padding` variable. Refer to the [CSS Variables](../theming/css-variables.md) section for more information on how to change these values.
+The default amount of `padding` to be applied is `16px` and is set by the `--ion-padding` variable. Refer to the [CSS Variables](../theming/css-variables.mdx) section for more information on how to change these values.
 
 ```html
 <ion-grid>
@@ -296,7 +296,7 @@ The default amount of `padding` to be applied is `16px` and is set by the `--ion
 
 The margin area extends the border area with an empty area used to separate the element from its neighbors.
 
-The default amount of `margin` to be applied is `16px` and is set by the `--ion-margin` variable. Refer to the [CSS Variables](../theming/css-variables.md) section for more information on how to change these values.
+The default amount of `margin` to be applied is `16px` and is set by the `--ion-margin` variable. Refer to the [CSS Variables](../theming/css-variables.mdx) section for more information on how to change these values.
 
 ```html
 <ion-grid>
diff --git a/versioned_docs/version-v8/layout/dynamic-font-scaling.md b/versioned_docs/version-v8/layout/dynamic-font-scaling.mdx
similarity index 100%
rename from versioned_docs/version-v8/layout/dynamic-font-scaling.md
rename to versioned_docs/version-v8/layout/dynamic-font-scaling.mdx
diff --git a/versioned_docs/version-v8/layout/global-stylesheets.md b/versioned_docs/version-v8/layout/global-stylesheets.mdx
similarity index 81%
rename from versioned_docs/version-v8/layout/global-stylesheets.md
rename to versioned_docs/version-v8/layout/global-stylesheets.mdx
index 2979422e37a..eb00b28482a 100644
--- a/versioned_docs/version-v8/layout/global-stylesheets.md
+++ b/versioned_docs/version-v8/layout/global-stylesheets.mdx
@@ -44,28 +44,28 @@ The following set of CSS files are optional and can safely be commented out or r
 
 #### padding.css
 
-Adds utility classes to modify the padding or margin on any element, refer to [CSS Utilities](css-utilities.md#content-space) for usage information.
+Adds utility classes to modify the padding or margin on any element, refer to [CSS Utilities](css-utilities.mdx#content-space) for usage information.
 
 #### float-elements.css
 
-Adds utility classes to float an element based on the breakpoint and side, refer to [CSS Utilities](css-utilities.md#element-placement) for usage information.
+Adds utility classes to float an element based on the breakpoint and side, refer to [CSS Utilities](css-utilities.mdx#element-placement) for usage information.
 
 #### text-alignment.css
 
-Adds utility classes to align the text of an element or adjust the white space based on the breakpoint, refer to [CSS Utilities](css-utilities.md#text-alignment) for usage information.
+Adds utility classes to align the text of an element or adjust the white space based on the breakpoint, refer to [CSS Utilities](css-utilities.mdx#text-alignment) for usage information.
 
 #### text-transformation.css
 
-Adds utility classes to transform the text of an element to `uppercase`, `lowercase` or `capitalize` based on the breakpoint, refer to [CSS Utilities](css-utilities.md#text-transformation) for usage information.
+Adds utility classes to transform the text of an element to `uppercase`, `lowercase` or `capitalize` based on the breakpoint, refer to [CSS Utilities](css-utilities.mdx#text-transformation) for usage information.
 
 #### flex-utils.css
 
-Adds utility classes to align flex containers and items, refer to [CSS Utilities](css-utilities.md#flex-properties) for usage information.
+Adds utility classes to align flex containers and items, refer to [CSS Utilities](css-utilities.mdx#flex-properties) for usage information.
 
 #### display.css
 
-Adds utility classes to hide any element based on the breakpoint, refer to [CSS Utilities](css-utilities.md#element-display) for usage information.
+Adds utility classes to hide any element based on the breakpoint, refer to [CSS Utilities](css-utilities.mdx#element-display) for usage information.
 
 ## Usage
 
-Refer to [Ionic Packages](../intro/cdn.md) for how to include the global stylesheets based on the framework and [CSS Utilities](css-utilities.md) for how to use the optional utilities.
+Refer to [Ionic Packages](../intro/cdn.mdx) for how to include the global stylesheets based on the framework and [CSS Utilities](css-utilities.mdx) for how to use the optional utilities.
diff --git a/versioned_docs/version-v8/layout/structure.md b/versioned_docs/version-v8/layout/structure.mdx
similarity index 66%
rename from versioned_docs/version-v8/layout/structure.md
rename to versioned_docs/version-v8/layout/structure.mdx
index 5cde2b56d36..12b1264824e 100644
--- a/versioned_docs/version-v8/layout/structure.md
+++ b/versioned_docs/version-v8/layout/structure.mdx
@@ -19,7 +19,7 @@ Ionic Framework provides several different layouts that can be used to structure
 
 ### Header
 
-The most simple layout available consists of a [header](../api/header.md) and [content](../api/content.md). Most pages in an app generally have both of these, but a header is not required in order to use content.
+The most simple layout available consists of a [header](../api/header.mdx) and [content](../api/content.mdx). Most pages in an app generally have both of these, but a header is not required in order to use content.
 
 import Header from '@site/static/usage/v8/header/basic/index.mdx';
 
@@ -35,7 +35,7 @@ import Footer from '@site/static/usage/v8/footer/basic/index.mdx';
 
 ## Tabs Layout
 
-A layout consisting of horizontal [tabs](../api/tabs.md) can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using a [router outlet](../api/router-outlet.md) or [nav](../api/nav.md).
+A layout consisting of horizontal [tabs](../api/tabs.mdx) can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using a [router outlet](../api/router-outlet.mdx) or [nav](../api/nav.mdx).
 
 import Tabs from '@site/static/usage/v8/tabs/router/index.mdx';
 
@@ -43,7 +43,7 @@ import Tabs from '@site/static/usage/v8/tabs/router/index.mdx';
 
 ## Menu Layout
 
-A standard layout among mobile apps includes the ability to toggle a side [menu](../api/menu.md) by clicking a button or swiping it open from the side. Side menus are generally used for navigation, but they can contain any content.
+A standard layout among mobile apps includes the ability to toggle a side [menu](../api/menu.mdx) by clicking a button or swiping it open from the side. Side menus are generally used for navigation, but they can contain any content.
 
 import Menu from '@site/static/usage/v8/menu/basic/index.mdx';
 
@@ -51,11 +51,11 @@ import Menu from '@site/static/usage/v8/menu/basic/index.mdx';
 
 ## Split Pane Layout
 
-A [split pane](../api/split-pane.md) layout has a more complex structure because it can combine the previous layouts. It allows for multiple views to be displayed when the viewport is above a specified breakpoint. If the device's screen size is below a certain size, the split pane view will be hidden.
+A [split pane](../api/split-pane.mdx) layout has a more complex structure because it can combine the previous layouts. It allows for multiple views to be displayed when the viewport is above a specified breakpoint. If the device's screen size is below a certain size, the split pane view will be hidden.
 
 By default, the split pane view will show when the screen is larger than `768px`, or the `md` breakpoint, but this can be customized to use different breakpoints by setting the `when` property. Below is an example where the split pane contains a menu that is visible for `xs` screens and up, or when the viewport is larger than `0px`. This will show the split pane for all screen sizes.
 
-It's important to note that the element with the `id` matching the `contentId` specified by the split pane will be the main content that is always visible. This can be any element, including a [nav](../api/nav.md), [router outlet](../api/router-outlet.md), or [tabs](../api/tabs.md).
+It's important to note that the element with the `id` matching the `contentId` specified by the split pane will be the main content that is always visible. This can be any element, including a [nav](../api/nav.mdx), [router outlet](../api/router-outlet.mdx), or [tabs](../api/tabs.mdx).
 
 import SplitPane from '@site/static/usage/v8/split-pane/basic/index.mdx';
 
diff --git a/versioned_docs/version-v8/native-faq.md b/versioned_docs/version-v8/native-faq.mdx
similarity index 100%
rename from versioned_docs/version-v8/native-faq.md
rename to versioned_docs/version-v8/native-faq.mdx
diff --git a/versioned_docs/version-v8/native-setup.md b/versioned_docs/version-v8/native-setup.mdx
similarity index 100%
rename from versioned_docs/version-v8/native-setup.md
rename to versioned_docs/version-v8/native-setup.mdx
diff --git a/versioned_docs/version-v8/native.md b/versioned_docs/version-v8/native.mdx
similarity index 100%
rename from versioned_docs/version-v8/native.md
rename to versioned_docs/version-v8/native.mdx
diff --git a/versioned_docs/version-v8/react/add-to-existing.md b/versioned_docs/version-v8/react/add-to-existing.mdx
similarity index 92%
rename from versioned_docs/version-v8/react/add-to-existing.md
rename to versioned_docs/version-v8/react/add-to-existing.mdx
index eee23e0f10c..858c520f977 100644
--- a/versioned_docs/version-v8/react/add-to-existing.md
+++ b/versioned_docs/version-v8/react/add-to-existing.mdx
@@ -14,7 +14,7 @@ import DocsCards from '@components/global/DocsCards';
   />
 </head>
 
-This guide covers how to add Ionic React to an existing React project. If you're looking to start a new project from scratch, check out the [Ionic React Quickstart](/docs/react/quickstart.md) guide. For an overview of how Ionic React works with React, including version support and tooling, check out the [Ionic React Overview](/docs/react/overview.md).
+This guide covers how to add Ionic React to an existing React project. If you're looking to start a new project from scratch, check out the [Ionic React Quickstart](/docs/react/quickstart.mdx) guide. For an overview of how Ionic React works with React, including version support and tooling, check out the [Ionic React Overview](/docs/react/overview.mdx).
 
 :::tip
 
@@ -64,7 +64,7 @@ setupIonicReact();
 
 :::info
 
-While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.md).
+While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.mdx).
 
 :::
 
@@ -98,7 +98,7 @@ const App: React.FC = () => (
 export default App;
 ```
 
-Visit the [components](/docs/components.md) page for all of the available Ionic components.
+Visit the [components](/docs/components.mdx) page for all of the available Ionic components.
 
 :::tip
 
@@ -132,7 +132,7 @@ import '@ionic/react/css/flex-utils.css';
 import '@ionic/react/css/display.css';
 ```
 
-These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.md) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.md).
+These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.mdx) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.mdx).
 
 #### 2. Set up Theming
 
@@ -169,7 +169,7 @@ setupIonicReact();
 // ...existing app function and export...
 ```
 
-The `variables.css` file can be used to create custom Ionic Framework themes. The `dark.system.css` import enables [dark mode support](/docs/theming/dark-mode.md) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables to `theme/variables.css`.
+The `variables.css` file can be used to create custom Ionic Framework themes. The `dark.system.css` import enables [dark mode support](/docs/theming/dark-mode.mdx) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables to `theme/variables.css`.
 
 #### 3. Update the App Component
 
diff --git a/versioned_docs/version-v8/react/lifecycle.md b/versioned_docs/version-v8/react/lifecycle.mdx
similarity index 100%
rename from versioned_docs/version-v8/react/lifecycle.md
rename to versioned_docs/version-v8/react/lifecycle.mdx
diff --git a/versioned_docs/version-v8/react/navigation.md b/versioned_docs/version-v8/react/navigation.mdx
similarity index 100%
rename from versioned_docs/version-v8/react/navigation.md
rename to versioned_docs/version-v8/react/navigation.mdx
diff --git a/versioned_docs/version-v8/react/overlays.md b/versioned_docs/version-v8/react/overlays.mdx
similarity index 100%
rename from versioned_docs/version-v8/react/overlays.md
rename to versioned_docs/version-v8/react/overlays.mdx
diff --git a/versioned_docs/version-v8/react/overview.md b/versioned_docs/version-v8/react/overview.mdx
similarity index 100%
rename from versioned_docs/version-v8/react/overview.md
rename to versioned_docs/version-v8/react/overview.mdx
diff --git a/versioned_docs/version-v8/react/performance.md b/versioned_docs/version-v8/react/performance.mdx
similarity index 100%
rename from versioned_docs/version-v8/react/performance.md
rename to versioned_docs/version-v8/react/performance.mdx
diff --git a/versioned_docs/version-v8/react/platform.md b/versioned_docs/version-v8/react/platform.mdx
similarity index 100%
rename from versioned_docs/version-v8/react/platform.md
rename to versioned_docs/version-v8/react/platform.mdx
diff --git a/versioned_docs/version-v8/react/pwa.md b/versioned_docs/version-v8/react/pwa.mdx
similarity index 100%
rename from versioned_docs/version-v8/react/pwa.md
rename to versioned_docs/version-v8/react/pwa.mdx
diff --git a/versioned_docs/version-v8/react/quickstart.md b/versioned_docs/version-v8/react/quickstart.mdx
similarity index 92%
rename from versioned_docs/version-v8/react/quickstart.md
rename to versioned_docs/version-v8/react/quickstart.mdx
index 03e495f7272..09c390ee97a 100644
--- a/versioned_docs/version-v8/react/quickstart.md
+++ b/versioned_docs/version-v8/react/quickstart.mdx
@@ -158,17 +158,17 @@ const Home: React.FC = () => {
 export default Home;
 ```
 
-This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
+This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/docs/api/title.mdx#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
 :::tip[Learn More]
 
-For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
+For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.mdx), [Toolbar](/docs/api/toolbar.mdx), [Title](/docs/api/title.mdx), and [Content](/docs/api/content.mdx) documentation.
 
 :::
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, import and add a [Button](/docs/api/button.md) at the end of the `IonContent` in `Home.tsx`:
+You can enhance your Home page with more Ionic UI components. For example, import and add a [Button](/docs/api/button.mdx) at the end of the `IonContent` in `Home.tsx`:
 
 ```tsx title="src/pages/Home.tsx"
 import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
@@ -226,7 +226,7 @@ const New: React.FC = () => {
 export default New;
 ```
 
-This creates a page with a [Back Button](/docs/api/back-button.md) in the [Toolbar](/docs/api/toolbar.md). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
+This creates a page with a [Back Button](/docs/api/back-button.mdx) in the [Toolbar](/docs/api/toolbar.mdx). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
 
 :::warning
 
@@ -266,7 +266,7 @@ Once that is done, update the button in `Home.tsx`:
 
 :::info
 
-Navigating can also be performed programmatically using React Router's `history` prop. Refer to the [React Navigation documentation](/docs/react/navigation.md#navigating-using-history) for more information.
+Navigating can also be performed programmatically using React Router's `history` prop. Refer to the [React Navigation documentation](/docs/react/navigation.mdx#navigating-using-history) for more information.
 
 :::
 
@@ -290,7 +290,7 @@ Then, include them inside of the `IonContent`:
 
 Note that we are passing the imported SVG reference, **not** the icon name as a string.
 
-For more information, refer to the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
+For more information, refer to the [Icon documentation](/docs/api/icon.mdx) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
 ## Call Component Methods
 
@@ -343,7 +343,7 @@ To call methods on Ionic components:
 
 This pattern is necessary because React refs store the component instance in the `.current` property.
 
-You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation.
+You can find available methods for each component in the [Methods](/docs/api/content.mdx#methods) section of their API documentation.
 
 ## Run on a Device
 
diff --git a/versioned_docs/version-v8/react/slides.md b/versioned_docs/version-v8/react/slides.mdx
similarity index 100%
rename from versioned_docs/version-v8/react/slides.md
rename to versioned_docs/version-v8/react/slides.mdx
diff --git a/versioned_docs/version-v8/react/storage.md b/versioned_docs/version-v8/react/storage.mdx
similarity index 100%
rename from versioned_docs/version-v8/react/storage.md
rename to versioned_docs/version-v8/react/storage.mdx
diff --git a/versioned_docs/version-v8/react/testing/introduction.md b/versioned_docs/version-v8/react/testing/introduction.mdx
similarity index 100%
rename from versioned_docs/version-v8/react/testing/introduction.md
rename to versioned_docs/version-v8/react/testing/introduction.mdx
diff --git a/versioned_docs/version-v8/react/testing/unit-testing/best-practices.md b/versioned_docs/version-v8/react/testing/unit-testing/best-practices.mdx
similarity index 100%
rename from versioned_docs/version-v8/react/testing/unit-testing/best-practices.md
rename to versioned_docs/version-v8/react/testing/unit-testing/best-practices.mdx
diff --git a/versioned_docs/version-v8/react/testing/unit-testing/examples.md b/versioned_docs/version-v8/react/testing/unit-testing/examples.mdx
similarity index 100%
rename from versioned_docs/version-v8/react/testing/unit-testing/examples.md
rename to versioned_docs/version-v8/react/testing/unit-testing/examples.mdx
diff --git a/versioned_docs/version-v8/react/testing/unit-testing/setup.md b/versioned_docs/version-v8/react/testing/unit-testing/setup.mdx
similarity index 100%
rename from versioned_docs/version-v8/react/testing/unit-testing/setup.md
rename to versioned_docs/version-v8/react/testing/unit-testing/setup.mdx
diff --git a/versioned_docs/version-v8/react/virtual-scroll.md b/versioned_docs/version-v8/react/virtual-scroll.mdx
similarity index 100%
rename from versioned_docs/version-v8/react/virtual-scroll.md
rename to versioned_docs/version-v8/react/virtual-scroll.mdx
diff --git a/versioned_docs/version-v8/react/your-first-app.md b/versioned_docs/version-v8/react/your-first-app.mdx
similarity index 96%
rename from versioned_docs/version-v8/react/your-first-app.md
rename to versioned_docs/version-v8/react/your-first-app.mdx
index 788afa37b93..a2bd7e5a0c3 100644
--- a/versioned_docs/version-v8/react/your-first-app.md
+++ b/versioned_docs/version-v8/react/your-first-app.mdx
@@ -30,7 +30,7 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
 
 Highlights include:
 
-- One React-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.md).
+- One React-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.mdx).
 - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
 - Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs.
 
@@ -64,7 +64,7 @@ npm install -g @ionic/cli native-run cordova-res
 
 The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
 
-Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information.
 
 :::
 
@@ -169,7 +169,7 @@ const Tab2: React.FC = () => {
 export default Tab2;
 ```
 
-`IonHeader` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.md#collapsible-large-titles) support). Let’s rename both `IonTitle` elements to:
+`IonHeader` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.mdx#collapsible-large-titles) support). Let’s rename both `IonTitle` elements to:
 
 ```tsx
 <IonPage>
@@ -192,7 +192,7 @@ export default Tab2;
 </IonPage>
 ```
 
-We put the visual aspects of our app into `<IonContent>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.md) (FAB) to the bottom of the page and set the camera image as the icon.
+We put the visual aspects of our app into `<IonContent>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.mdx) (FAB) to the bottom of the page and set the camera image as the icon.
 
 ```tsx
 // CHANGE: Add the following import
diff --git a/versioned_docs/version-v8/react/your-first-app/2-taking-photos.md b/versioned_docs/version-v8/react/your-first-app/2-taking-photos.mdx
similarity index 96%
rename from versioned_docs/version-v8/react/your-first-app/2-taking-photos.md
rename to versioned_docs/version-v8/react/your-first-app/2-taking-photos.mdx
index 47ed7b3bc26..315de7878f0 100644
--- a/versioned_docs/version-v8/react/your-first-app/2-taking-photos.md
+++ b/versioned_docs/version-v8/react/your-first-app/2-taking-photos.mdx
@@ -201,7 +201,7 @@ export interface UserPhoto {
 }
 ```
 
-Next, switch to `Tab2.tsx` to display the images. We'll add a [Grid component](../../api/grid.md) to ensure the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `UserPhoto`'s `photos` array. For each item, add an [Image component](../../api/img.md) and set its `src` property to the photo's path.
+Next, switch to `Tab2.tsx` to display the images. We'll add a [Grid component](../../api/grid.mdx) to ensure the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `UserPhoto`'s `photos` array. For each item, add an [Image component](../../api/img.mdx) and set its `src` property to the photo's path.
 
 ```tsx
 import { camera } from 'ionicons/icons';
diff --git a/versioned_docs/version-v8/react/your-first-app/3-saving-photos.md b/versioned_docs/version-v8/react/your-first-app/3-saving-photos.mdx
similarity index 100%
rename from versioned_docs/version-v8/react/your-first-app/3-saving-photos.md
rename to versioned_docs/version-v8/react/your-first-app/3-saving-photos.mdx
diff --git a/versioned_docs/version-v8/react/your-first-app/4-loading-photos.md b/versioned_docs/version-v8/react/your-first-app/4-loading-photos.mdx
similarity index 100%
rename from versioned_docs/version-v8/react/your-first-app/4-loading-photos.md
rename to versioned_docs/version-v8/react/your-first-app/4-loading-photos.mdx
diff --git a/versioned_docs/version-v8/react/your-first-app/5-adding-mobile.md b/versioned_docs/version-v8/react/your-first-app/5-adding-mobile.mdx
similarity index 96%
rename from versioned_docs/version-v8/react/your-first-app/5-adding-mobile.md
rename to versioned_docs/version-v8/react/your-first-app/5-adding-mobile.mdx
index 9585640b1f6..9fd5c8a78a7 100644
--- a/versioned_docs/version-v8/react/your-first-app/5-adding-mobile.md
+++ b/versioned_docs/version-v8/react/your-first-app/5-adding-mobile.mdx
@@ -17,7 +17,7 @@ Our photo gallery app won’t be complete until it runs on iOS, Android, and the
 
 Let’s start with making some small code changes - then our app will “just work” when we deploy it to a device.
 
-Import the Ionic [Platform API](../platform.md) into `usePhotoGallery.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile).
+Import the Ionic [Platform API](../platform.mdx) into `usePhotoGallery.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile).
 
 Add `isPlatform` to the imports at the top of the file to use the `isPlatform` method. `Capacitor` is also imported to help with file paths on mobile devices.
 
diff --git a/versioned_docs/version-v8/react/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v8/react/your-first-app/6-deploying-mobile.mdx
similarity index 100%
rename from versioned_docs/version-v8/react/your-first-app/6-deploying-mobile.md
rename to versioned_docs/version-v8/react/your-first-app/6-deploying-mobile.mdx
diff --git a/versioned_docs/version-v8/react/your-first-app/7-live-reload.md b/versioned_docs/version-v8/react/your-first-app/7-live-reload.mdx
similarity index 95%
rename from versioned_docs/version-v8/react/your-first-app/7-live-reload.md
rename to versioned_docs/version-v8/react/your-first-app/7-live-reload.mdx
index 5864967d17a..545b440a5c0 100644
--- a/versioned_docs/version-v8/react/your-first-app/7-live-reload.md
+++ b/versioned_docs/version-v8/react/your-first-app/7-live-reload.mdx
@@ -13,7 +13,7 @@ sidebar_label: Live Reload
 
 So far, we’ve learned how easy it is to develop a cross-platform app that works everywhere. The development experience is pretty quick, but what if I told you there was a way to go faster?
 
-We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.md) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
+We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.mdx) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
 
 ## Live Reload
 
@@ -179,7 +179,7 @@ const Tab2: React.FC = () => {
 export default Tab2;
 ```
 
-Add a click handler to the `<IonImg>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](../../api/action-sheet.md) dialog with the option to either delete the selected photo or cancel (close) the dialog.
+Add a click handler to the `<IonImg>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](../../api/action-sheet.mdx) dialog with the option to either delete the selected photo or cancel (close) the dialog.
 
 ```tsx
 <IonGrid>
diff --git a/versioned_docs/version-v9/react/your-first-app/8-distribute.md b/versioned_docs/version-v8/react/your-first-app/8-distribute.mdx
similarity index 97%
rename from versioned_docs/version-v9/react/your-first-app/8-distribute.md
rename to versioned_docs/version-v8/react/your-first-app/8-distribute.mdx
index 73ebe7e7628..e1c6a8ac23d 100644
--- a/versioned_docs/version-v9/react/your-first-app/8-distribute.md
+++ b/versioned_docs/version-v8/react/your-first-app/8-distribute.mdx
@@ -102,6 +102,6 @@ For access to the ability to create a Native Configuration, you will need to be
 
 Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to your users' devices!
 
-There are many paths to follow from here. Try adding another [Ionic UI component](../../components.md) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
+There are many paths to follow from here. Try adding another [Ionic UI component](../../components.mdx) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
 
 Happy app building! 💙
diff --git a/versioned_docs/version-v8/reference/browser-support.md b/versioned_docs/version-v8/reference/browser-support.mdx
similarity index 95%
rename from versioned_docs/version-v8/reference/browser-support.md
rename to versioned_docs/version-v8/reference/browser-support.mdx
index bfba4c01290..febc9ec9cb2 100644
--- a/versioned_docs/version-v8/reference/browser-support.md
+++ b/versioned_docs/version-v8/reference/browser-support.mdx
@@ -14,7 +14,7 @@ Ionic's earliest goal was to make it easy to develop mobile apps using web techn
 
 ## Mobile Platforms
 
-In pursuit of [adaptive styling](../core-concepts/fundamentals.md#adaptive-styling), Ionic fully supports and is well tested on the mobile platforms listed below:
+In pursuit of [adaptive styling](../core-concepts/fundamentals.mdx#adaptive-styling), Ionic fully supports and is well tested on the mobile platforms listed below:
 
 | Framework |        Android         |  iOS  |
 | :-------: | :--------------------: | :---: |
diff --git a/versioned_docs/version-v8/reference/glossary.md b/versioned_docs/version-v8/reference/glossary.mdx
similarity index 100%
rename from versioned_docs/version-v8/reference/glossary.md
rename to versioned_docs/version-v8/reference/glossary.mdx
diff --git a/versioned_docs/version-v8/reference/release-notes.md b/versioned_docs/version-v8/reference/release-notes.mdx
similarity index 100%
rename from versioned_docs/version-v8/reference/release-notes.md
rename to versioned_docs/version-v8/reference/release-notes.mdx
diff --git a/versioned_docs/version-v8/reference/support.md b/versioned_docs/version-v8/reference/support.mdx
similarity index 98%
rename from versioned_docs/version-v8/reference/support.md
rename to versioned_docs/version-v8/reference/support.mdx
index 99fbba884cf..9532dc89df2 100644
--- a/versioned_docs/version-v8/reference/support.md
+++ b/versioned_docs/version-v8/reference/support.mdx
@@ -61,7 +61,7 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo
 
 Angular's support policy for iOS is the two most recent major versions. This means that changes to your Angular project may be necessary to use Ionic Angular v4-v6 on iOS 13. To support iOS 13, change the project `target` specified in `compilerOptions` in the tsconfig.json to `es5`. Without this change an error of `Unexpected token '.' in promiseReactionJob` will occur on app startup in iOS 13.
 
-Note that later versions of Ionic do not support iOS 13; refer to the [mobile support table](./browser-support.md#mobile-platforms).
+Note that later versions of Ionic do not support iOS 13; refer to the [mobile support table](./browser-support.mdx#mobile-platforms).
 
 #### Ionic React
 
@@ -120,4 +120,4 @@ Note that later versions of Ionic do not support iOS 13; refer to the [mobile su
 |      V3      | Not currently supported |   @awesome-cordova-plugins 4.X   |
 
 - Wrappers (and their associated plugins) are community maintained.
-- \*Cordova plugin support with Ionic Native and `@ionic/react` can be achieved using the [vanilla JavaScript implementation](../native.md#vanilla-javascript)
+- \*Cordova plugin support with Ionic Native and `@ionic/react` can be achieved using the [vanilla JavaScript implementation](../native.mdx#vanilla-javascript)
diff --git a/versioned_docs/version-v8/reference/versioning.md b/versioned_docs/version-v8/reference/versioning.mdx
similarity index 100%
rename from versioned_docs/version-v8/reference/versioning.md
rename to versioned_docs/version-v8/reference/versioning.mdx
diff --git a/versioned_docs/version-v8/techniques/security.md b/versioned_docs/version-v8/techniques/security.mdx
similarity index 100%
rename from versioned_docs/version-v8/techniques/security.md
rename to versioned_docs/version-v8/techniques/security.mdx
diff --git a/versioned_docs/version-v8/test/page1.md b/versioned_docs/version-v8/test/page1.md
deleted file mode 100644
index d965196cf5d..00000000000
--- a/versioned_docs/version-v8/test/page1.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Testing Page 1
-
-This is Testing page 1, Get to Testing Page 2 [here](page2.md).
diff --git a/versioned_docs/version-v8/test/page1.mdx b/versioned_docs/version-v8/test/page1.mdx
new file mode 100644
index 00000000000..cd5b72410d0
--- /dev/null
+++ b/versioned_docs/version-v8/test/page1.mdx
@@ -0,0 +1,3 @@
+# Testing Page 1
+
+This is Testing page 1, Get to Testing Page 2 [here](page2.mdx).
diff --git a/versioned_docs/version-v8/test/page2.md b/versioned_docs/version-v8/test/page2.md
deleted file mode 100644
index 2d2d61adacf..00000000000
--- a/versioned_docs/version-v8/test/page2.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Testing Page 2
-
-This is Testing page 2, Get to Testing Page 1 [here](page1.md).
diff --git a/versioned_docs/version-v8/test/page2.mdx b/versioned_docs/version-v8/test/page2.mdx
new file mode 100644
index 00000000000..5ebdef8dca0
--- /dev/null
+++ b/versioned_docs/version-v8/test/page2.mdx
@@ -0,0 +1,3 @@
+# Testing Page 2
+
+This is Testing page 2, Get to Testing Page 1 [here](page1.mdx).
diff --git a/versioned_docs/version-v8/theming/advanced.md b/versioned_docs/version-v8/theming/advanced.mdx
similarity index 96%
rename from versioned_docs/version-v8/theming/advanced.md
rename to versioned_docs/version-v8/theming/advanced.mdx
index 18093f98df1..fef9ebfdeff 100644
--- a/versioned_docs/version-v8/theming/advanced.md
+++ b/versioned_docs/version-v8/theming/advanced.mdx
@@ -66,8 +66,8 @@ While the application and stepped variables in the themes section are useful for
 | `--ion-safe-area-right`     | Adjust the safe area inset right of the app                                                          |
 | `--ion-safe-area-bottom`    | Adjust the safe area inset bottom of the app                                                         |
 | `--ion-safe-area-left`      | Adjust the safe area inset left of the app                                                           |
-| `--ion-margin`              | Adjust the margin of the [Margin attributes](../layout/css-utilities.md#element-margin)              |
-| `--ion-padding`             | Adjust the padding of the [Padding attributes](../layout/css-utilities.md#element-padding)           |
+| `--ion-margin`              | Adjust the margin of the [Margin attributes](../layout/css-utilities.mdx#element-margin)             |
+| `--ion-padding`             | Adjust the padding of the [Padding attributes](../layout/css-utilities.mdx#element-padding)          |
 | `--ion-placeholder-opacity` | Adjust the opacity of the placeholders used in the input, textarea, searchbar, and select components |
 
 ### Grid Variables
@@ -111,7 +111,7 @@ There is not yet full [browser support](https://developer.mozilla.org/en-US/docs
 
 :::note
 
-Refer to the [CSS Variables](css-variables.md) section for more information on how to get and set CSS variables.
+Refer to the [CSS Variables](css-variables.mdx) section for more information on how to get and set CSS variables.
 
 :::
 
@@ -182,7 +182,7 @@ After running through the Sass compiler, the colors will have the following valu
 
 However, because CSS variables can be set at runtime and are more dynamic, it is not currently possible to manipulate them using a simple function.
 
-This is normally not a problem, but when an application needs to have dynamic theming it presents issues. In Ionic, this is the reason that there are [variations to each color](colors.md#layered-colors), and it is also why [stepped colors](themes.md#stepped-colors) are necessary for theming.
+This is normally not a problem, but when an application needs to have dynamic theming it presents issues. In Ionic, this is the reason that there are [variations to each color](colors.mdx#layered-colors), and it is also why [stepped colors](themes.mdx#stepped-colors) are necessary for theming.
 
 There are drafts and issues discussing [color modification proposals](https://github.com/w3c/csswg-drafts/issues/3187) that would make this possible.
 
diff --git a/versioned_docs/version-v9/theming/basics.md b/versioned_docs/version-v8/theming/basics.mdx
similarity index 88%
rename from versioned_docs/version-v9/theming/basics.md
rename to versioned_docs/version-v8/theming/basics.mdx
index c7072fd73c7..b330a7383ea 100644
--- a/versioned_docs/version-v9/theming/basics.md
+++ b/versioned_docs/version-v8/theming/basics.mdx
@@ -19,7 +19,7 @@ Ionic Framework is built to be a blank slate that can easily be customized and m
 
 Ionic has nine default colors that can be used to change the color of many components. Each color is actually a collection of multiple properties, including a `shade` and `tint`, used throughout Ionic.
 
-When changing a color, it is important to set all of the related properties. This can be done easily with the [Color Generator](color-generator.md) tool, but these can also be manually written if desired. For more information on Ionic colors, refer to [Colors](colors.md).
+When changing a color, it is important to set all of the related properties. This can be done easily with the [Color Generator](color-generator.mdx) tool, but these can also be manually written if desired. For more information on Ionic colors, refer to [Colors](colors.mdx).
 
 <ColorAccordion />
 
@@ -27,16 +27,16 @@ When changing a color, it is important to set all of the related properties. Thi
 
 Ionic components adapt their look and behavior based on the platform the app is running on. We call this **Adaptive Styling**. This allows developers to build apps that use the same codebase for multiple platforms, while still looking "native" to those particular platforms.
 
-Ionic has two **modes** that are used to customize the look of components based on the **platform**: `ios` and `md`. Each platform has a default mode, but this can easily be configured. For more information on customizing an application based on the platform, refer to [Platform Styles](platform-styles.md).
+Ionic has two **modes** that are used to customize the look of components based on the **platform**: `ios` and `md`. Each platform has a default mode, but this can easily be configured. For more information on customizing an application based on the platform, refer to [Platform Styles](platform-styles.mdx).
 
 ## CSS Variables
 
-The Ionic Framework components are themed using [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables). CSS variables add dynamic values to an otherwise static language. This is something that has traditionally required a CSS preprocessor like Sass. The look of an application can easily be changed by changing the value of any of the [CSS Variables](css-variables.md) Ionic Framework provides.
+The Ionic Framework components are themed using [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables). CSS variables add dynamic values to an otherwise static language. This is something that has traditionally required a CSS preprocessor like Sass. The look of an application can easily be changed by changing the value of any of the [CSS Variables](css-variables.mdx) Ionic Framework provides.
 
 ## CSS Shadow Parts
 
-CSS Shadow Parts were added to make it easier to fully customize Ionic Framework Shadow components. In the past, components that use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) were unable to have elements inside of their shadow tree styled directly. With the addition of Shadow parts, there is no longer a need for CSS variables for every property on an inner element of a Shadow component. For more information on customizing Ionic Framework components using parts, refer to the [CSS Shadow Parts](css-shadow-parts.md) guide.
+CSS Shadow Parts were added to make it easier to fully customize Ionic Framework Shadow components. In the past, components that use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) were unable to have elements inside of their shadow tree styled directly. With the addition of Shadow parts, there is no longer a need for CSS variables for every property on an inner element of a Shadow component. For more information on customizing Ionic Framework components using parts, refer to the [CSS Shadow Parts](css-shadow-parts.mdx) guide.
 
 ## Branding
 
-Ionic provides application colors that can be used to theme an application to match a brand or color scheme. The default theme uses a light background, but everything from the background color to the text color is fully customizable. For more information on branding, refer to [Themes](themes.md).
+Ionic provides application colors that can be used to theme an application to match a brand or color scheme. The default theme uses a light background, but everything from the background color to the text color is fully customizable. For more information on branding, refer to [Themes](themes.mdx).
diff --git a/versioned_docs/version-v8/theming/color-generator.md b/versioned_docs/version-v8/theming/color-generator.mdx
similarity index 100%
rename from versioned_docs/version-v8/theming/color-generator.md
rename to versioned_docs/version-v8/theming/color-generator.mdx
diff --git a/docs/theming/colors.md b/versioned_docs/version-v8/theming/colors.mdx
similarity index 89%
rename from docs/theming/colors.md
rename to versioned_docs/version-v8/theming/colors.mdx
index b729dbf2066..b05f9d1c2a3 100644
--- a/docs/theming/colors.md
+++ b/versioned_docs/version-v8/theming/colors.mdx
@@ -33,7 +33,7 @@ A color can be applied to an Ionic component in order to change the default colo
 
 ## Layered Colors
 
-Each color consists of the following properties: a `base`, `contrast`, `shade`, and `tint`. The `base` and `contrast` colors also require a `rgb` property which is the same color, just in [rgb format](https://developer.mozilla.org/en-US/docs/Glossary/RGB). Refer to [The Alpha Problem](advanced.md#the-alpha-problem) for an explanation of why the `rgb` property is also needed. Select from the dropdown below to explore each of the default colors Ionic provides and their variations.
+Each color consists of the following properties: a `base`, `contrast`, `shade`, and `tint`. The `base` and `contrast` colors also require a `rgb` property which is the same color, just in [rgb format](https://developer.mozilla.org/en-US/docs/Glossary/RGB). Refer to [The Alpha Problem](advanced.mdx#the-alpha-problem) for an explanation of why the `rgb` property is also needed. Select from the dropdown below to explore each of the default colors Ionic provides and their variations.
 
 <LayeredColorsSelect />
 
@@ -56,11 +56,11 @@ When `secondary` is applied to a button, not only is the base color <CodeColor c
 
 :::note
 
-Not sure how to get the variation colors from the base color? Try out our [Color Generator](color-generator.md) that calculates all of the variations and provides code to copy/paste into an app!
+Not sure how to get the variation colors from the base color? Try out our [Color Generator](color-generator.mdx) that calculates all of the variations and provides code to copy/paste into an app!
 
 :::
 
-Refer to the [CSS Variables documentation](css-variables.md) for more information on CSS variables.
+Refer to the [CSS Variables documentation](css-variables.mdx) for more information on CSS variables.
 
 ## Adding Colors
 
@@ -107,7 +107,7 @@ div {
 }
 ```
 
-Refer to the [CSS Variables documentation](css-variables.md) for more information on setting and using CSS variables.
+Refer to the [CSS Variables documentation](css-variables.mdx) for more information on setting and using CSS variables.
 
 ## New Color Creator
 
diff --git a/versioned_docs/version-v8/theming/css-shadow-parts.md b/versioned_docs/version-v8/theming/css-shadow-parts.mdx
similarity index 92%
rename from versioned_docs/version-v8/theming/css-shadow-parts.md
rename to versioned_docs/version-v8/theming/css-shadow-parts.mdx
index 1f31faba50c..fb8fc4f959e 100644
--- a/versioned_docs/version-v8/theming/css-shadow-parts.md
+++ b/versioned_docs/version-v8/theming/css-shadow-parts.mdx
@@ -18,7 +18,7 @@ Ionic Framework is a distributed set of [Web Components](https://developer.mozil
 
 :::note
 
-Ionic Framework components are **not all** Shadow DOM components. If the component is a Shadow DOM component, there will be a badge in the top right of its [component documentation](../components.md). An example of a Shadow DOM component is the [button component](../api/button.md).
+Ionic Framework components are **not all** Shadow DOM components. If the component is a Shadow DOM component, there will be a badge in the top right of its [component documentation](../components.mdx). An example of a Shadow DOM component is the [button component](../api/button.mdx).
 
 :::
 
@@ -63,7 +63,7 @@ Continuing to use the `ion-select` component as an example, the markup is update
 </ion-select>
 ```
 
-The above shows two parts: `placeholder` and `icon`. Refer to the [select documentation](../api/select.md#css-shadow-parts) for all of its parts.
+The above shows two parts: `placeholder` and `icon`. Refer to the [select documentation](../api/select.mdx#css-shadow-parts) for all of its parts.
 
 With these parts exposed, the element can now be styled directly using [::part](#how-part-works).
 
@@ -107,11 +107,11 @@ There are some known limitations with [vendor prefixed pseudo-elements](#vendor-
 
 ## Ionic Framework Parts
 
-All exposed parts for an Ionic Framework component can be found under the CSS Shadow Parts heading on its API page. To view all components and their API pages, refer to the [Component documentation](../components.md).
+All exposed parts for an Ionic Framework component can be found under the CSS Shadow Parts heading on its API page. To view all components and their API pages, refer to the [Component documentation](../components.mdx).
 
 In order to have parts a component must meet the following criteria:
 
-- It is a [Shadow DOM](../reference/glossary.md#shadow) component. If it is a [Scoped](../reference/glossary.md#scoped) or Light DOM component, the child elements can be targeted directly. If a component is Scoped or Shadow, it will be listed by its name on its [component documentation page](../components.md).
+- It is a [Shadow DOM](../reference/glossary.mdx#shadow) component. If it is a [Scoped](../reference/glossary.mdx#scoped) or Light DOM component, the child elements can be targeted directly. If a component is Scoped or Shadow, it will be listed by its name on its [component documentation page](../components.mdx).
 - It contains children elements. For example, `ion-card-header` is a Shadow component, but all styles are applied to the host element. Since it has no child elements, there’s no need for parts.
 - The children elements are not structural. In certain components, including `ion-title`, the child element is a structural element used to position the inner elements. We do not recommend customizing structural elements as this can have unexpected results.
 
@@ -125,7 +125,7 @@ We welcome recommendations for additional parts. Please create a [new GitHub iss
 
 ### Browser Support
 
-CSS Shadow Parts are supported in the recent versions of all of the major browsers. However, some of the older versions do not support shadow parts. Verify the [browser support](https://caniuse.com/#feat=mdn-css_selectors_part) meets the requirements before implementing parts in an app. If browser support for older versions is required, we recommend continuing to use [CSS Variables](../theming/css-variables.md) for styling.
+CSS Shadow Parts are supported in the recent versions of all of the major browsers. However, some of the older versions do not support shadow parts. Verify the [browser support](https://caniuse.com/#feat=mdn-css_selectors_part) meets the requirements before implementing parts in an app. If browser support for older versions is required, we recommend continuing to use [CSS Variables](../theming/css-variables.mdx) for styling.
 
 ### Vendor Prefixed Pseudo-Elements
 
diff --git a/versioned_docs/version-v8/theming/css-variables.md b/versioned_docs/version-v8/theming/css-variables.mdx
similarity index 93%
rename from versioned_docs/version-v8/theming/css-variables.md
rename to versioned_docs/version-v8/theming/css-variables.mdx
index 1de4515268e..5de7885d851 100644
--- a/versioned_docs/version-v8/theming/css-variables.md
+++ b/versioned_docs/version-v8/theming/css-variables.mdx
@@ -91,8 +91,8 @@ const color = el.style.getPropertyValue('--background');
 
 ### Component Variables
 
-Ionic provides variables that exist at the component level, such as `--background` and `--color`. For a list of the custom properties a component accepts, view the `CSS Custom Properties` section of its [API reference](../api.md). For example, refer to the [Button CSS Custom Properties](../api/button.md#css-custom-properties).
+Ionic provides variables that exist at the component level, such as `--background` and `--color`. For a list of the custom properties a component accepts, view the `CSS Custom Properties` section of its [API reference](../api.mdx). For example, refer to the [Button CSS Custom Properties](../api/button.mdx#css-custom-properties).
 
 ### Global Variables
 
-There are several global variables that Ionic provides in order to make theming an entire application easier. For more information, refer to [Colors](colors.md), [Themes](themes.md) and [Advanced Theming](advanced.md).
+There are several global variables that Ionic provides in order to make theming an entire application easier. For more information, refer to [Colors](colors.mdx), [Themes](themes.mdx) and [Advanced Theming](advanced.mdx).
diff --git a/versioned_docs/version-v8/theming/dark-mode.md b/versioned_docs/version-v8/theming/dark-mode.mdx
similarity index 92%
rename from versioned_docs/version-v8/theming/dark-mode.md
rename to versioned_docs/version-v8/theming/dark-mode.mdx
index 84d97638bf4..9fadebeda49 100644
--- a/versioned_docs/version-v8/theming/dark-mode.md
+++ b/versioned_docs/version-v8/theming/dark-mode.mdx
@@ -208,13 +208,13 @@ For more information regarding `color-scheme`, please refer to the [Web.dev guid
 
 :::note
 
-`color-scheme` does not apply to the keyboard. For details on how dark mode works with the keyboard, refer to [Keyboard Documentation](../developing/keyboard.md#dark-mode).
+`color-scheme` does not apply to the keyboard. For details on how dark mode works with the keyboard, refer to [Keyboard Documentation](../developing/keyboard.mdx#dark-mode).
 
 :::
 
 :::note
 
-For developers looking to customize the theme color under the status bar in Safari on iOS 15 or the toolbar in Safari on macOS, refer to [`theme-color` Meta](./advanced.md#theme-color-meta).
+For developers looking to customize the theme color under the status bar in Safari on iOS 15 or the toolbar in Safari on macOS, refer to [`theme-color` Meta](./advanced.mdx#theme-color-meta).
 
 :::
 
@@ -222,7 +222,7 @@ For developers looking to customize the theme color under the status bar in Safa
 
 Ionic has a recommended dark palette that can be enabled in three different ways: [always](#always), based on [system](#system) settings, or by using a [CSS class](#css-class). Each of these methods involves importing the dark palette file with the corresponding name.
 
-The contents of each file are included below for reference. These variables are set by importing the relevant dark palette file and do not need to be copied into an app. For more information on the variables being changed, including additional variables for further customization, refer to the [Themes](themes.md) section.
+The contents of each file are included below for reference. These variables are set by importing the relevant dark palette file and do not need to be copied into an app. For more information on the variables being changed, including additional variables for further customization, refer to the [Themes](themes.mdx) section.
 
 <Tabs groupId="darkFiles" defaultValue="always" values={[{ value: 'always', label: 'Always (dark.always.css)' }, { value: 'system', label: 'System (dark.system.css)' }, { value: 'class', label: 'Class (dark.class.css)' }]}>
 
@@ -230,7 +230,7 @@ The contents of each file are included below for reference. These variables are
 
 The **always** dark palette behaves in the following ways:
 
-1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a dark palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher.
+1. Sets the [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement a dark palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher.
 2. Setting variables for the dark palette on `ios` devices using the `:root.ios` selector.
 3. Setting variables for the dark palette on `md` devices using the `:root.md` selector.
 
@@ -252,7 +252,7 @@ The contents of Ionic's dark palette can be [viewed on GitHub](https://github.co
 
 The **system** dark palette behaves in the following ways:
 
-1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a dark palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher.
+1. Sets the [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement a dark palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher.
 2. Setting variables for the dark palette on `ios` devices using the `:root.ios` selector.
 3. Setting variables for the dark palette on `md` devices using the `:root.md` selector.
 4. Only applies these variables when the [CSS media query for `prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) is `dark`.
@@ -275,7 +275,7 @@ The contents of Ionic's dark palette can be [viewed on GitHub](https://github.co
 
 The **class** dark palette behaves in the following ways:
 
-1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a dark palette in the `.ion-palette-dark` selector. The `.ion-palette-dark` class must be added to the `html` element in an app.
+1. Sets the [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement a dark palette in the `.ion-palette-dark` selector. The `.ion-palette-dark` class must be added to the `html` element in an app.
 2. Setting variables for the dark palette on `ios` devices using the `.ion-palette-dark.ios` selector.
 3. Setting variables for the dark palette on `md` devices using the `.ion-palette-dark.md` selector.
 
diff --git a/versioned_docs/version-v8/theming/high-contrast-mode.md b/versioned_docs/version-v8/theming/high-contrast-mode.mdx
similarity index 83%
rename from versioned_docs/version-v8/theming/high-contrast-mode.md
rename to versioned_docs/version-v8/theming/high-contrast-mode.mdx
index 5e85e8b3e3d..9a4d0aa4536 100644
--- a/versioned_docs/version-v8/theming/high-contrast-mode.md
+++ b/versioned_docs/version-v8/theming/high-contrast-mode.mdx
@@ -17,7 +17,7 @@ Ionic offers palettes with increased contrast for users with low vision. These p
 
 ## Overview
 
-The default palette in Ionic provides [Ionic colors](./colors.md) that meet [Level AA color contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) as defined by Web Content Accessibility Guidelines (WCAG) when used with the appropriate contrast color. The [Ionic colors](./colors.md) in the high contrast palette have been updated to meet [Level AAA color contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html) when used with the appropriate contrast color. Notably, improvements have been made to the contrast of UI components, including border, text, and background colors. However, it's important to note that within the high contrast palette, priority is given to text legibility. This means that if adjusting the contrast of a UI component against the page background would significantly compromise the contrast between the component's text and its background, the contrast of the UI component background will remain unchanged.
+The default palette in Ionic provides [Ionic colors](./colors.mdx) that meet [Level AA color contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) as defined by Web Content Accessibility Guidelines (WCAG) when used with the appropriate contrast color. The [Ionic colors](./colors.mdx) in the high contrast palette have been updated to meet [Level AAA color contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html) when used with the appropriate contrast color. Notably, improvements have been made to the contrast of UI components, including border, text, and background colors. However, it's important to note that within the high contrast palette, priority is given to text legibility. This means that if adjusting the contrast of a UI component against the page background would significantly compromise the contrast between the component's text and its background, the contrast of the UI component background will remain unchanged.
 
 ## Enabling High Contrast Theme
 
@@ -131,7 +131,7 @@ import SystemHighContrastMode from '@site/static/usage/v8/theming/system-high-co
 
 :::caution
 
-The high contrast light palette must be imported after [core.css](../layout/global-stylesheets.md#corecss), and the
+The high contrast light palette must be imported after [core.css](../layout/global-stylesheets.mdx#corecss), and the
 high contrast dark palette must be imported after `dark.system.css`. Otherwise, the standard contrast palette will take priority.
 
 :::
@@ -177,7 +177,7 @@ import '@ionic/vue/css/palettes/high-contrast-dark.class.css';
 
 </Tabs>
 
-This approach activates the high contrast palette when the `.ion-palette-high-contrast` class is set on the `html` element. This class must be applied by the developer. This can be combined with the [`.ion-palette-dark` class](./dark-mode.md#css-class) to conditionally apply the high contrast dark palette.
+This approach activates the high contrast palette when the `.ion-palette-high-contrast` class is set on the `html` element. This class must be applied by the developer. This can be combined with the [`.ion-palette-dark` class](./dark-mode.mdx#css-class) to conditionally apply the high contrast dark palette.
 
 The following example combines site settings, system settings, and the toggle to decide when to show high contrast mode. The site's palette takes precedence over system settings. If your system settings differ from the site's palette when the demo loads, it will use the site's palette.
 
@@ -193,7 +193,7 @@ import ClassHighContrastMode from '@site/static/usage/v8/theming/class-high-cont
 
 :::caution
 
-The high contrast light palette must be imported after [core.css](../layout/global-stylesheets.md#corecss),
+The high contrast light palette must be imported after [core.css](../layout/global-stylesheets.mdx#corecss),
 and the high contrast dark palette must be imported after `dark.class.css`. Otherwise, the standard contrast palette will take
 priority.
 
@@ -209,7 +209,7 @@ The `.ion-palette-high-contrast` class **must** be added to the `html` element i
 
 Ionic has a recommended high contrast palette that can be enabled in three different ways: [always](#always), based on [system](#system) settings, or by using a [CSS class](#css-class). Each of these methods involves importing the high contrast palette file with the corresponding name.
 
-The theme variables are set by importing the relevant high contrast palette file and do not need to be copied into an app. For more information on the variables being changed, including additional variables for further customization, refer to the [Themes](themes.md) section.
+The theme variables are set by importing the relevant high contrast palette file and do not need to be copied into an app. For more information on the variables being changed, including additional variables for further customization, refer to the [Themes](themes.mdx) section.
 
 The following provides details on how to customize the high contrast palette depending on how it was applied in an application.
 
@@ -221,7 +221,7 @@ The **always** high contrast palette can be accessed by importing `high-contrast
 
 The **always** high contrast palette behaves in the following ways:
 
-1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a high contrast palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher.
+1. Sets the [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement a high contrast palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher.
 2. Setting variables for the high contrast palette on `ios` devices using the `:root.ios` selector.
 3. Setting variables for the high contrast palette on `md` devices using the `:root.md` selector.
 
@@ -233,7 +233,7 @@ The **system** high contrast palette can be accessed by importing `high-contrast
 
 The **system** high contrast palette behaves in the following ways:
 
-1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a high contrast palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher.
+1. Sets the [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement a high contrast palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher.
 2. Setting variables for the high contrast palette on `ios` devices using the `:root.ios` selector.
 3. Setting variables for the high contrast palette on `md` devices using the `:root.md` selector.
 4. Only applies these variables when the [CSS media query for `prefers-contrast`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) is `more`.
@@ -246,7 +246,7 @@ The **class** high contrast palette can be accessed by importing `high-contrast.
 
 The **class** high contrast palette behaves in the following ways:
 
-1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a high contrast palette in the `.ion-palette-high-contrast` selector. The `.ion-palette-high-contrast` class must be added to the `html` element in an app.
+1. Sets the [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement a high contrast palette in the `.ion-palette-high-contrast` selector. The `.ion-palette-high-contrast` class must be added to the `html` element in an app.
 2. Setting variables for the high contrast palette on `ios` devices using the `.ion-palette-high-contrast.ios` selector.
 3. Setting variables for the high contrast palette on `md` devices using the `.ion-palette-high-contrast.md` selector.
 
diff --git a/versioned_docs/version-v8/theming/platform-styles.md b/versioned_docs/version-v8/theming/platform-styles.mdx
similarity index 89%
rename from versioned_docs/version-v8/theming/platform-styles.md
rename to versioned_docs/version-v8/theming/platform-styles.mdx
index 77d0a5665fc..e58a1be4579 100644
--- a/versioned_docs/version-v8/theming/platform-styles.md
+++ b/versioned_docs/version-v8/theming/platform-styles.mdx
@@ -14,7 +14,7 @@ Ionic provides platform specific styles based on the device the application is r
 
 ## Ionic Modes
 
-Ionic uses **modes** to customize the look of components. Each **platform** has a default **mode**, but this can be overridden through the global [config](../developing/config.md). The following chart displays the default **mode** that is added to each **platform**:
+Ionic uses **modes** to customize the look of components. Each **platform** has a default **mode**, but this can be overridden through the global [config](../developing/config.mdx). The following chart displays the default **mode** that is added to each **platform**:
 
 | Platform  | Mode  | Description                                                                                                                      |
 | --------- | ----- | -------------------------------------------------------------------------------------------------------------------------------- |
@@ -28,7 +28,7 @@ For example, an app being viewed on an Android platform will use the `md` (Mater
 <html class="md"></html>
 ```
 
-_Note: The **platform** and the **mode** are not the same. The platform can be set to use any mode in the [config](../developing/config.md) of an app._
+_Note: The **platform** and the **mode** are not the same. The platform can be set to use any mode in the [config](../developing/config.mdx) of an app._
 
 ## Overriding Mode Styles
 
@@ -48,4 +48,4 @@ There are also many global CSS variables that can be used to override the styles
 }
 ```
 
-There are many global variables that can be overridden by mode, including [Ionic's color variables](colors.md), [theme variables](themes.md) and [global component variables](advanced.md).
+There are many global variables that can be overridden by mode, including [Ionic's color variables](colors.mdx), [theme variables](themes.mdx) and [global component variables](advanced.mdx).
diff --git a/versioned_docs/version-v9/theming/themes.md b/versioned_docs/version-v8/theming/themes.mdx
similarity index 98%
rename from versioned_docs/version-v9/theming/themes.md
rename to versioned_docs/version-v8/theming/themes.mdx
index 77c201b36b4..4b68041ec92 100644
--- a/versioned_docs/version-v9/theming/themes.md
+++ b/versioned_docs/version-v8/theming/themes.mdx
@@ -19,7 +19,7 @@ Ionic provides several global variables that are used throughout components to c
 
 The application colors are used in multiple places in Ionic. These are useful for easily creating dark palettes or themes that match a brand.
 
-It is important to note that the background and text color variables also require a rgb variable to be set in [rgb format](https://developer.mozilla.org/en-US/docs/Glossary/RGB). Refer to [The Alpha Problem](advanced.md#the-alpha-problem) for an explanation of why the `rgb` property is also needed.
+It is important to note that the background and text color variables also require a rgb variable to be set in [rgb format](https://developer.mozilla.org/en-US/docs/Glossary/RGB). Refer to [The Alpha Problem](advanced.mdx#the-alpha-problem) for an explanation of why the `rgb` property is also needed.
 
 | Name                                       | Description                                          |
 | ------------------------------------------ | ---------------------------------------------------- |
diff --git a/versioned_docs/version-v8/troubleshooting/build.md b/versioned_docs/version-v8/troubleshooting/build.mdx
similarity index 100%
rename from versioned_docs/version-v8/troubleshooting/build.md
rename to versioned_docs/version-v8/troubleshooting/build.mdx
diff --git a/versioned_docs/version-v8/troubleshooting/cors.md b/versioned_docs/version-v8/troubleshooting/cors.mdx
similarity index 100%
rename from versioned_docs/version-v8/troubleshooting/cors.md
rename to versioned_docs/version-v8/troubleshooting/cors.mdx
diff --git a/docs/troubleshooting/debugging.md b/versioned_docs/version-v8/troubleshooting/debugging.mdx
similarity index 99%
rename from docs/troubleshooting/debugging.md
rename to versioned_docs/version-v8/troubleshooting/debugging.mdx
index 96db1dce221..d10f67d5efc 100644
--- a/docs/troubleshooting/debugging.md
+++ b/versioned_docs/version-v8/troubleshooting/debugging.mdx
@@ -21,7 +21,7 @@ title: Debugging
 
 ## Live Reload
 
-Live Reload is useful for debugging native functionality (such as plugins) on device hardware. Rather than deploy a new native binary each time you make a code change, it reloads the browser (or WebView) when changes in the app are detected. Learn more about [Live Reload](../cli/livereload.md).
+Live Reload is useful for debugging native functionality (such as plugins) on device hardware. Rather than deploy a new native binary each time you make a code change, it reloads the browser (or WebView) when changes in the app are detected. Learn more about [Live Reload](../cli/livereload.mdx).
 
 ## iOS and Safari
 
diff --git a/versioned_docs/version-v8/troubleshooting/native.md b/versioned_docs/version-v8/troubleshooting/native.mdx
similarity index 97%
rename from versioned_docs/version-v8/troubleshooting/native.md
rename to versioned_docs/version-v8/troubleshooting/native.mdx
index 357e40b45f0..d600b0b820c 100644
--- a/versioned_docs/version-v8/troubleshooting/native.md
+++ b/versioned_docs/version-v8/troubleshooting/native.mdx
@@ -18,7 +18,7 @@ Code Signing Error: Failed to create provisioning profile. The app ID "com.csfor
 
 Running an app on an iOS device requires a provisioning profile. If a provisioning profile has not been created yet follow these directions:
 
-1. **Set the [Package ID](../reference/glossary.md#package-id).**
+1. **Set the [Package ID](../reference/glossary.mdx#package-id).**
 
    For Capacitor, open the `capacitor.config.json` file and modify the `appId` property.
 
@@ -48,7 +48,7 @@ Running an app on an iOS device requires a provisioning profile. If a provisioni
 Error: Error code 65 for command: xcodebuild with args: -xcconfig,/Users/ionitron/projects/my-project/platforms/ios/cordova/build-debug.xcconfig,-workspace,SC project.xcworkspace,-scheme,SC project,-configuration,Debug,-sdk,iphonesimulator,-destination,platform=iOS Simulator,name=iPhone X,build,CONFIGURATION_BUILD_DIR=/Users/ionitron/projects/my-project/platforms/ios/build/emulator,SHARED_PRECOMPS_DIR=/Users/ionitron/projects/my-project/platforms/ios/build/sharedpch
 ```
 
-This error is an error code from Xcode that can be caused by provisioning issues or outdated cordova dependencies. To fix this error first make sure a provisioning profile has been generated using the above instructions and then try to [run the app from Xcode](../developing/ios.md#running-with-xcode).
+This error is an error code from Xcode that can be caused by provisioning issues or outdated cordova dependencies. To fix this error first make sure a provisioning profile has been generated using the above instructions and then try to [run the app from Xcode](../developing/ios.mdx#running-with-xcode).
 
 If this does not fix the error then run the following commands:
 
diff --git a/versioned_docs/version-v8/troubleshooting/runtime.md b/versioned_docs/version-v8/troubleshooting/runtime.mdx
similarity index 100%
rename from versioned_docs/version-v8/troubleshooting/runtime.md
rename to versioned_docs/version-v8/troubleshooting/runtime.mdx
diff --git a/docs/updating/4-0.md b/versioned_docs/version-v8/updating/4-0.mdx
similarity index 96%
rename from docs/updating/4-0.md
rename to versioned_docs/version-v8/updating/4-0.mdx
index 98542a050f7..01b422e1e14 100644
--- a/docs/updating/4-0.md
+++ b/versioned_docs/version-v8/updating/4-0.mdx
@@ -23,7 +23,7 @@ For a **complete list of breaking changes** from Ionic 3 to Ionic 4, please refe
 
 We suggest the following general process when migrating an existing application from Ionic 3 to 4:
 
-1. Generate a new project using the `blank` starter (refer to [Starting an App](../developing/starting.md))
+1. Generate a new project using the `blank` starter (refer to [Starting an App](../developing/starting.mdx))
 1. Copy any Angular services from `src/providers` to `src/app/services`
    - Services should include `{ providedIn: 'root' }` in the `@Injectable()` decorator. For details, please refer to Angular [provider docs](https://angular.io/guide/providers).
 1. Copy the app's other root-level items (pipes, components, etc) keeping in mind that the directory structure changes from `src/components` to `src/app/components`, etc.
@@ -150,7 +150,7 @@ With V4, we're now able to utilize the typical events provided by [Angular](http
 
 Older events like `ionViewDidLoad`, `ionViewCanLeave`, and `ionViewCanEnter` have been removed, and the proper Angular alternatives should be used.
 
-For more details, check out the [router-outlet docs](../api/router-outlet.md)
+For more details, check out the [router-outlet docs](../api/router-outlet.mdx)
 
 ### Overlay Components
 
@@ -196,7 +196,7 @@ In V4, navigation received the most changes. Now, instead of using Ionic's own `
 
 To provide the platform-specific animations that users are used to, we have created `ion-router-outlet` for Angular Apps. This behaves in a similar manner to Angular's `router-outlet` but provides a stack-based navigation (tabs) and animations.
 
-For a detailed explanation in navigation works in a V4 project, check out the [Angular navigation guide](../angular/navigation.md).
+For a detailed explanation in navigation works in a V4 project, check out the [Angular navigation guide](../angular/navigation.mdx).
 
 ### Lazy Loading
 
@@ -246,7 +246,7 @@ export class HomePageModule {}
 export class AppModule {}
 ```
 
-For a detailed explanation of lazy loading in V4 project, check out the [Angular navigation guide](../angular/navigation.md#lazy-loading-routes).
+For a detailed explanation of lazy loading in V4 project, check out the [Angular navigation guide](../angular/navigation.mdx#lazy-loading-routes).
 
 ### Markup Changes
 
@@ -265,7 +265,7 @@ One upside is that for the most part, the Ionic UI components you know and love
 Here are some considerations to review before beginning the upgrade:
 
 - **App complexity**: Naturally, the larger and more complex the app is, the longer it will take to migrate.
-- **Framework support**: In 2019, Ionic will release full support for React. You can also use Ionic Framework components [without a framework](../intro/cdn.md). Since these are not production-ready yet, we recommend sticking with Angular or waiting until the other framework support is available.
+- **Framework support**: In 2019, Ionic will release full support for React. You can also use Ionic Framework components [without a framework](../intro/cdn.mdx). Since these are not production-ready yet, we recommend sticking with Angular or waiting until the other framework support is available.
 - **Budget and team makeup**: The length of a migration project will vary based on the size of your team, the complexity of the app, and the amount of time allotted to make the transition.
 
 ### Suggested Strategy
@@ -282,7 +282,7 @@ Please reference official [Angular upgrade guide](https://angular.io/guide/upgra
 
 ### Ionic Changes
 
-Our Ionic 3 to Ionic 4 migration sections above may prove to be a useful reference. Generate a new Ionic 4 project using the blank starter (refer to [Starting an App](../developing/starting.md)). Spend time getting familiar with Ionic 4 components. Happy building!
+Our Ionic 3 to Ionic 4 migration sections above may prove to be a useful reference. Generate a new Ionic 4 project using the blank starter (refer to [Starting an App](../developing/starting.mdx)). Spend time getting familiar with Ionic 4 components. Happy building!
 
 ### Need Assistance?
 
diff --git a/versioned_docs/version-v8/updating/5-0.md b/versioned_docs/version-v8/updating/5-0.mdx
similarity index 100%
rename from versioned_docs/version-v8/updating/5-0.md
rename to versioned_docs/version-v8/updating/5-0.mdx
diff --git a/versioned_docs/version-v8/updating/6-0.md b/versioned_docs/version-v8/updating/6-0.mdx
similarity index 100%
rename from versioned_docs/version-v8/updating/6-0.md
rename to versioned_docs/version-v8/updating/6-0.mdx
diff --git a/versioned_docs/version-v8/updating/7-0.md b/versioned_docs/version-v8/updating/7-0.mdx
similarity index 100%
rename from versioned_docs/version-v8/updating/7-0.md
rename to versioned_docs/version-v8/updating/7-0.mdx
diff --git a/versioned_docs/version-v8/updating/8-0.md b/versioned_docs/version-v8/updating/8-0.mdx
similarity index 100%
rename from versioned_docs/version-v8/updating/8-0.md
rename to versioned_docs/version-v8/updating/8-0.mdx
diff --git a/versioned_docs/version-v8/utilities/animations.md b/versioned_docs/version-v8/utilities/animations.mdx
similarity index 99%
rename from versioned_docs/version-v8/utilities/animations.md
rename to versioned_docs/version-v8/utilities/animations.mdx
index 84720a85800..3aa1589278d 100644
--- a/versioned_docs/version-v8/utilities/animations.md
+++ b/versioned_docs/version-v8/utilities/animations.mdx
@@ -212,7 +212,7 @@ import Chain from '@site/static/usage/v8/animations/chain/index.mdx';
 
 ## Gesture Animations
 
-Ionic Animations gives developers the ability to create powerful gesture-based animations by integrating seamlessly with [Ionic Gestures](gestures.md).
+Ionic Animations gives developers the ability to create powerful gesture-based animations by integrating seamlessly with [Ionic Gestures](gestures.mdx).
 
 In the following example we are creating a track along which we can drag the card element. Our `animation` object will take care of moving the card element either left or right, and our `gesture` object will instruct the `animation` object which direction to move in.
 
diff --git a/versioned_docs/version-v8/utilities/gestures.md b/versioned_docs/version-v8/utilities/gestures.mdx
similarity index 99%
rename from versioned_docs/version-v8/utilities/gestures.md
rename to versioned_docs/version-v8/utilities/gestures.mdx
index 74e56cdf9b2..4edf805ffa4 100644
--- a/versioned_docs/version-v8/utilities/gestures.md
+++ b/versioned_docs/version-v8/utilities/gestures.mdx
@@ -178,7 +178,7 @@ In the example below, we want to be able to detect double clicks on an element.
 
 ## Gesture Animations
 
-See our guide on implementing gesture animations: [Gesture Animations with Ionic Animations](animations.md#gesture-animations)
+See our guide on implementing gesture animations: [Gesture Animations with Ionic Animations](animations.mdx#gesture-animations)
 
 ## Types
 
diff --git a/versioned_docs/version-v8/vue/add-to-existing.md b/versioned_docs/version-v8/vue/add-to-existing.mdx
similarity index 92%
rename from versioned_docs/version-v8/vue/add-to-existing.md
rename to versioned_docs/version-v8/vue/add-to-existing.mdx
index f4e88f1fc3f..684cde9ec48 100644
--- a/versioned_docs/version-v8/vue/add-to-existing.md
+++ b/versioned_docs/version-v8/vue/add-to-existing.mdx
@@ -14,7 +14,7 @@ import DocsCards from '@components/global/DocsCards';
   />
 </head>
 
-This guide covers how to add Ionic Vue to an existing Vue project. If you're looking to start a new project from scratch, check out the [Ionic Vue Quickstart](/docs/vue/quickstart.md) guide. For an overview of how Ionic Vue works with Vue, including version support and tooling, check out the [Ionic Vue Overview](/docs/vue/overview.md).
+This guide covers how to add Ionic Vue to an existing Vue project. If you're looking to start a new project from scratch, check out the [Ionic Vue Quickstart](/docs/vue/quickstart.mdx) guide. For an overview of how Ionic Vue works with Vue, including version support and tooling, check out the [Ionic Vue Overview](/docs/vue/overview.mdx).
 
 :::tip
 
@@ -61,7 +61,7 @@ createApp(App).use(IonicVue).mount('#app');
 
 :::info
 
-While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.md).
+While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.mdx).
 
 :::
 
@@ -82,7 +82,7 @@ import { IonButton, IonDatetime } from '@ionic/vue';
 </script>
 ```
 
-Visit the [components](/docs/components.md) page for all of the available Ionic components.
+Visit the [components](/docs/components.mdx) page for all of the available Ionic components.
 
 ## Using Ionic Pages
 
@@ -110,7 +110,7 @@ import '@ionic/vue/css/flex-utils.css';
 import '@ionic/vue/css/display.css';
 ```
 
-These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.md) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.md).
+These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.mdx) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.mdx).
 
 #### 2. Set up Theming
 
@@ -162,7 +162,7 @@ import './theme/variables.css';
 createApp(App).use(IonicVue).mount('#app');
 ```
 
-The `variables.css` file can be used to create custom Ionic Framework themes. The `dark.system.css` import enables [dark mode support](/docs/theming/dark-mode.md) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables to `theme/variables.css`.
+The `variables.css` file can be used to create custom Ionic Framework themes. The `dark.system.css` import enables [dark mode support](/docs/theming/dark-mode.mdx) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables to `theme/variables.css`.
 
 #### 3. Update the App Component
 
diff --git a/versioned_docs/version-v8/vue/build-options.md b/versioned_docs/version-v8/vue/build-options.mdx
similarity index 100%
rename from versioned_docs/version-v8/vue/build-options.md
rename to versioned_docs/version-v8/vue/build-options.mdx
diff --git a/versioned_docs/version-v8/vue/lifecycle.md b/versioned_docs/version-v8/vue/lifecycle.mdx
similarity index 100%
rename from versioned_docs/version-v8/vue/lifecycle.md
rename to versioned_docs/version-v8/vue/lifecycle.mdx
diff --git a/versioned_docs/version-v8/vue/navigation.md b/versioned_docs/version-v8/vue/navigation.mdx
similarity index 100%
rename from versioned_docs/version-v8/vue/navigation.md
rename to versioned_docs/version-v8/vue/navigation.mdx
diff --git a/versioned_docs/version-v8/vue/overview.md b/versioned_docs/version-v8/vue/overview.mdx
similarity index 92%
rename from versioned_docs/version-v8/vue/overview.md
rename to versioned_docs/version-v8/vue/overview.mdx
index 63bf3db74f7..dc55a8fc894 100644
--- a/versioned_docs/version-v8/vue/overview.md
+++ b/versioned_docs/version-v8/vue/overview.mdx
@@ -28,7 +28,7 @@ Ionic Vue projects use the same tooling as standard Vue CLI projects, so you can
 
 [Capacitor](https://capacitorjs.com) is the official cross-platform runtime for Ionic Vue, enabling your apps to run natively on iOS, Android, and the web with a single codebase.
 
-While you can use many [Cordova](https://cordova.apache.org/) plugins with Ionic Vue, Capacitor is the recommended and fully supported solution. The [Ionic CLI](../cli.md) does not provide official Cordova integration for Ionic Vue projects. For more information on using Cordova plugins with Capacitor, refer to the [Capacitor documentation](https://capacitorjs.com/docs/cordova).
+While you can use many [Cordova](https://cordova.apache.org/) plugins with Ionic Vue, Capacitor is the recommended and fully supported solution. The [Ionic CLI](../cli.mdx) does not provide official Cordova integration for Ionic Vue projects. For more information on using Cordova plugins with Capacitor, refer to the [Capacitor documentation](https://capacitorjs.com/docs/cordova).
 
 ## Installation
 
diff --git a/versioned_docs/version-v8/vue/performance.md b/versioned_docs/version-v8/vue/performance.mdx
similarity index 100%
rename from versioned_docs/version-v8/vue/performance.md
rename to versioned_docs/version-v8/vue/performance.mdx
diff --git a/versioned_docs/version-v8/vue/platform.md b/versioned_docs/version-v8/vue/platform.mdx
similarity index 100%
rename from versioned_docs/version-v8/vue/platform.md
rename to versioned_docs/version-v8/vue/platform.mdx
diff --git a/versioned_docs/version-v8/vue/pwa.md b/versioned_docs/version-v8/vue/pwa.mdx
similarity index 100%
rename from versioned_docs/version-v8/vue/pwa.md
rename to versioned_docs/version-v8/vue/pwa.mdx
diff --git a/versioned_docs/version-v8/vue/quickstart.md b/versioned_docs/version-v8/vue/quickstart.mdx
similarity index 93%
rename from versioned_docs/version-v8/vue/quickstart.md
rename to versioned_docs/version-v8/vue/quickstart.mdx
index a88b14871b0..bea913c0901 100644
--- a/versioned_docs/version-v8/vue/quickstart.md
+++ b/versioned_docs/version-v8/vue/quickstart.mdx
@@ -162,17 +162,17 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue
 <!-- ...styles... -->
 ```
 
-This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
+This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.mdx#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
 :::tip[Learn More]
 
-For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
+For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.mdx), [Toolbar](/docs/api/toolbar.mdx), [Title](/docs/api/title.mdx), and [Content](/docs/api/content.mdx) documentation.
 
 :::
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.md) at the end of the `ion-content`:
+You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.mdx) at the end of the `ion-content`:
 
 ```vue title="src/views/HomePage.vue"
 <ion-content>
@@ -221,7 +221,7 @@ import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, Io
 </script>
 ```
 
-This creates a page with a [Back Button](/docs/api/back-button.md) in the [Toolbar](/docs/api/toolbar.md). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
+This creates a page with a [Back Button](/docs/api/back-button.mdx) in the [Toolbar](/docs/api/toolbar.mdx). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
 
 :::warning
 
@@ -266,7 +266,7 @@ Once that is done, update the button in `HomePage.vue`:
 
 :::info
 
-Navigating can also be performed programmatically using Vue Router, and routes can be lazy loaded for better performance. Refer to the [Vue Navigation documentation](/docs/vue/navigation.md) for more information.
+Navigating can also be performed programmatically using Vue Router, and routes can be lazy loaded for better performance. Refer to the [Vue Navigation documentation](/docs/vue/navigation.mdx) for more information.
 
 :::
 
@@ -292,7 +292,7 @@ Then, include them inside of the `ion-content`:
 
 Note that we are passing the imported SVG reference, **not** the icon name as a string.
 
-For more information, refer to the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
+For more information, refer to the [Icon documentation](/docs/api/icon.mdx) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
 ## Call Component Methods
 
@@ -347,7 +347,7 @@ To call methods on Ionic components:
 
 This pattern is necessary because Ionic components are built as Web Components. The `$el` property gives you access to the actual Web Component instance where the methods are defined.
 
-You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation.
+You can find available methods for each component in the [Methods](/docs/api/content.mdx#methods) section of their API documentation.
 
 ## Run on a Device
 
diff --git a/versioned_docs/version-v8/vue/slides.md b/versioned_docs/version-v8/vue/slides.mdx
similarity index 100%
rename from versioned_docs/version-v8/vue/slides.md
rename to versioned_docs/version-v8/vue/slides.mdx
diff --git a/versioned_docs/version-v8/vue/storage.md b/versioned_docs/version-v8/vue/storage.mdx
similarity index 100%
rename from versioned_docs/version-v8/vue/storage.md
rename to versioned_docs/version-v8/vue/storage.mdx
diff --git a/versioned_docs/version-v8/vue/testing.md b/versioned_docs/version-v8/vue/testing.mdx
similarity index 100%
rename from versioned_docs/version-v8/vue/testing.md
rename to versioned_docs/version-v8/vue/testing.mdx
diff --git a/docs/vue/troubleshooting.md b/versioned_docs/version-v8/vue/troubleshooting.mdx
similarity index 93%
rename from docs/vue/troubleshooting.md
rename to versioned_docs/version-v8/vue/troubleshooting.mdx
index 1383c81dfa3..a0f82ac90a9 100644
--- a/docs/vue/troubleshooting.md
+++ b/versioned_docs/version-v8/vue/troubleshooting.mdx
@@ -36,7 +36,7 @@ import { IonButton } from '@ionic/vue';
 </script>
 ```
 
-Prefer to register your components globally once? We have you covered. Our [Optimizing Your Build Guide](quickstart.md#optimizing-your-build) shows you how to register Ionic Vue components globally as well as the potential downsides to be aware of when using this approach.
+Prefer to register your components globally once? We have you covered. Our [Optimizing Your Build Guide](quickstart.mdx#optimizing-your-build) shows you how to register Ionic Vue components globally as well as the potential downsides to be aware of when using this approach.
 
 ## Slot attributes are deprecated
 
@@ -74,7 +74,7 @@ ionContentRef.value.scrollToBottom();
 
 In other framework integrations such as Ionic React, this is not needed as any `ref` you provide is automatically forwarded to the underlying Web Component instance. We are unable to do the same thing here due to limitations in how Vue manages refs.
 
-Refer to the [Quickstart Guide](quickstart.md#calling-methods-on-components) for more information.
+Refer to the [Quickstart Guide](quickstart.mdx#calling-methods-on-components) for more information.
 
 ## Page transitions are not working
 
@@ -97,7 +97,7 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue
 </script>
 ```
 
-Refer to the [IonPage documentation](navigation.md#ionpage) for more information.
+Refer to the [IonPage documentation](navigation.mdx#ionpage) for more information.
 
 ## Ionic events bound in JavaScript are not firing
 
diff --git a/versioned_docs/version-v8/vue/utility-functions.md b/versioned_docs/version-v8/vue/utility-functions.mdx
similarity index 100%
rename from versioned_docs/version-v8/vue/utility-functions.md
rename to versioned_docs/version-v8/vue/utility-functions.mdx
diff --git a/versioned_docs/version-v8/vue/virtual-scroll.md b/versioned_docs/version-v8/vue/virtual-scroll.mdx
similarity index 100%
rename from versioned_docs/version-v8/vue/virtual-scroll.md
rename to versioned_docs/version-v8/vue/virtual-scroll.mdx
diff --git a/versioned_docs/version-v9/vue/your-first-app.md b/versioned_docs/version-v8/vue/your-first-app.mdx
similarity index 96%
rename from versioned_docs/version-v9/vue/your-first-app.md
rename to versioned_docs/version-v8/vue/your-first-app.mdx
index 604849f47ca..7245297ac81 100644
--- a/versioned_docs/version-v9/vue/your-first-app.md
+++ b/versioned_docs/version-v8/vue/your-first-app.mdx
@@ -30,7 +30,7 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
 
 Highlights include:
 
-- One Vue-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.md).
+- One Vue-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.mdx).
 - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
 - Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs.
 
@@ -64,7 +64,7 @@ npm install -g @ionic/cli native-run cordova-res
 
 The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
 
-Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information.
 
 :::
 
@@ -172,7 +172,7 @@ import ExploreContainer from '@/components/ExploreContainer.vue';
 </script>
 ```
 
-`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.md#collapsible-large-titles) support). Rename both `ion-title` elements to:
+`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.mdx#collapsible-large-titles) support). Rename both `ion-title` elements to:
 
 ```vue
 <template>
@@ -197,7 +197,7 @@ import ExploreContainer from '@/components/ExploreContainer.vue';
 </template>
 ```
 
-We put the visual aspects of our app into `<ion-content>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.md) (FAB) to the bottom of the page and set the camera image as the icon.
+We put the visual aspects of our app into `<ion-content>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.mdx) (FAB) to the bottom of the page and set the camera image as the icon.
 
 ```vue
 <template>
diff --git a/versioned_docs/version-v8/vue/your-first-app/2-taking-photos.md b/versioned_docs/version-v8/vue/your-first-app/2-taking-photos.mdx
similarity index 96%
rename from versioned_docs/version-v8/vue/your-first-app/2-taking-photos.md
rename to versioned_docs/version-v8/vue/your-first-app/2-taking-photos.mdx
index d119b0d4c09..eeca985368c 100644
--- a/versioned_docs/version-v8/vue/your-first-app/2-taking-photos.md
+++ b/versioned_docs/version-v8/vue/your-first-app/2-taking-photos.mdx
@@ -192,7 +192,7 @@ export interface UserPhoto {
 }
 ```
 
-Next, switch to `Tab2Page.vue` to display the images. We'll add a [Grid component](../../api/grid.md) to ensure the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `UserPhoto`'s `photos` array. For each item, add an [Image component](../../api/img.md) and set its `src` property to the photo's path.
+Next, switch to `Tab2Page.vue` to display the images. We'll add a [Grid component](../../api/grid.mdx) to ensure the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `UserPhoto`'s `photos` array. For each item, add an [Image component](../../api/img.mdx) and set its `src` property to the photo's path.
 
 ```vue
 <template>
diff --git a/versioned_docs/version-v8/vue/your-first-app/3-saving-photos.md b/versioned_docs/version-v8/vue/your-first-app/3-saving-photos.mdx
similarity index 100%
rename from versioned_docs/version-v8/vue/your-first-app/3-saving-photos.md
rename to versioned_docs/version-v8/vue/your-first-app/3-saving-photos.mdx
diff --git a/versioned_docs/version-v8/vue/your-first-app/4-loading-photos.md b/versioned_docs/version-v8/vue/your-first-app/4-loading-photos.mdx
similarity index 100%
rename from versioned_docs/version-v8/vue/your-first-app/4-loading-photos.md
rename to versioned_docs/version-v8/vue/your-first-app/4-loading-photos.mdx
diff --git a/versioned_docs/version-v8/vue/your-first-app/5-adding-mobile.md b/versioned_docs/version-v8/vue/your-first-app/5-adding-mobile.mdx
similarity index 95%
rename from versioned_docs/version-v8/vue/your-first-app/5-adding-mobile.md
rename to versioned_docs/version-v8/vue/your-first-app/5-adding-mobile.mdx
index 8401eedcbcf..9190b978030 100644
--- a/versioned_docs/version-v8/vue/your-first-app/5-adding-mobile.md
+++ b/versioned_docs/version-v8/vue/your-first-app/5-adding-mobile.mdx
@@ -17,7 +17,7 @@ Our photo gallery app won’t be complete until it runs on iOS, Android, and the
 
 Let’s start with making some small code changes - then our app will “just work” when we deploy it to a device.
 
-Import the Ionic [Platform API](../platform.md) into `usePhotoGallery.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile).
+Import the Ionic [Platform API](../platform.mdx) into `usePhotoGallery.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile).
 
 Add `Platform` to the imports at the top of the file to use the `isPlatform` method.
 
@@ -73,7 +73,7 @@ const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> =
 };
 ```
 
-When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details on the File Protocol](../../core-concepts/webview.md#file-protocol)). To use this method, we'll need to import Capacitor into `usePhotoGallery.ts`.
+When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details on the File Protocol](../../core-concepts/webview.mdx#file-protocol)). To use this method, we'll need to import Capacitor into `usePhotoGallery.ts`.
 
 ```ts
 import { ref, watch, onMounted } from 'vue';
diff --git a/versioned_docs/version-v8/vue/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v8/vue/your-first-app/6-deploying-mobile.mdx
similarity index 100%
rename from versioned_docs/version-v8/vue/your-first-app/6-deploying-mobile.md
rename to versioned_docs/version-v8/vue/your-first-app/6-deploying-mobile.mdx
diff --git a/versioned_docs/version-v8/vue/your-first-app/7-live-reload.md b/versioned_docs/version-v8/vue/your-first-app/7-live-reload.mdx
similarity index 95%
rename from versioned_docs/version-v8/vue/your-first-app/7-live-reload.md
rename to versioned_docs/version-v8/vue/your-first-app/7-live-reload.mdx
index 0b884996837..f00ed0947fe 100644
--- a/versioned_docs/version-v8/vue/your-first-app/7-live-reload.md
+++ b/versioned_docs/version-v8/vue/your-first-app/7-live-reload.mdx
@@ -13,7 +13,7 @@ sidebar_label: Live Reload
 
 So far, we’ve learned how easy it is to develop a cross-platform app that works everywhere. The development experience is pretty quick, but what if I told you there was a way to go faster?
 
-We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.md) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
+We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.mdx) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
 
 ## Live Reload
 
@@ -135,7 +135,7 @@ const showActionSheet = async (photo: UserPhoto) => {
 </script>
 ```
 
-Add a click handler to the `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](../../api/action-sheet.md) dialog with the option to either delete the selected photo or cancel (close) the dialog.
+Add a click handler to the `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](../../api/action-sheet.mdx) dialog with the option to either delete the selected photo or cancel (close) the dialog.
 
 ```vue
 <template>
diff --git a/docs/vue/your-first-app/8-distribute.md b/versioned_docs/version-v8/vue/your-first-app/8-distribute.mdx
similarity index 97%
rename from docs/vue/your-first-app/8-distribute.md
rename to versioned_docs/version-v8/vue/your-first-app/8-distribute.mdx
index 87c9647395d..85361db62e6 100644
--- a/docs/vue/your-first-app/8-distribute.md
+++ b/versioned_docs/version-v8/vue/your-first-app/8-distribute.mdx
@@ -102,6 +102,6 @@ For access to the ability to create a Native Configuration, you will need to be
 
 Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to your users' devices!
 
-There are many paths to follow from here. Try adding another [Ionic UI component](../../components.md) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
+There are many paths to follow from here. Try adding another [Ionic UI component](../../components.mdx) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
 
 Happy app building! 💙
diff --git a/versioned_docs/version-v9/angular/add-to-existing.md b/versioned_docs/version-v9/angular/add-to-existing.mdx
similarity index 92%
rename from versioned_docs/version-v9/angular/add-to-existing.md
rename to versioned_docs/version-v9/angular/add-to-existing.mdx
index 8a551abfd4e..bf2ab3d2ef1 100644
--- a/versioned_docs/version-v9/angular/add-to-existing.md
+++ b/versioned_docs/version-v9/angular/add-to-existing.mdx
@@ -14,7 +14,7 @@ import DocsCards from '@components/global/DocsCards';
   />
 </head>
 
-This guide covers how to add Ionic Angular to an existing Angular project. If you're looking to start a new project from scratch, check out the [Ionic Angular Quickstart](/docs/angular/quickstart.md) guide. For an overview of how Ionic Angular works with Angular, including version support and tooling, check out the [Ionic Angular Overview](/docs/angular/overview.md).
+This guide covers how to add Ionic Angular to an existing Angular project. If you're looking to start a new project from scratch, check out the [Ionic Angular Quickstart](/docs/angular/quickstart.mdx) guide. For an overview of how Ionic Angular works with Angular, including version support and tooling, check out the [Ionic Angular Overview](/docs/angular/overview.mdx).
 
 :::tip
 
@@ -76,7 +76,7 @@ Replace the existing `styles` array in `angular.json` with the following:
 
 :::info
 
-While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.md).
+While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.mdx).
 
 :::
 
@@ -96,7 +96,7 @@ export const appConfig: ApplicationConfig = {
 };
 ```
 
-This reflects the Angular 21 and 22 scaffold, which is zoneless by default. If your existing app is on Angular 18 through 20, it still has `provideZoneChangeDetection({ eventCoalescing: true })`; keep that provider and add `provideIonicAngular({})` alongside it. Refer to [Zoneless Change Detection](/docs/angular/zoneless.md) for details.
+This reflects the Angular 21 and 22 scaffold, which is zoneless by default. If your existing app is on Angular 18 through 20, it still has `provideZoneChangeDetection({ eventCoalescing: true })`; keep that provider and add `provideIonicAngular({})` alongside it. Refer to [Zoneless Change Detection](/docs/angular/zoneless.mdx) for details.
 
 ## Using Individual Components
 
@@ -123,7 +123,7 @@ import { IonButton, IonDatetime } from '@ionic/angular';
 export class App {}
 ```
 
-Visit the [components](/docs/components.md) page for all of the available Ionic components.
+Visit the [components](/docs/components.mdx) page for all of the available Ionic components.
 
 ## Using Ionic Pages
 
@@ -172,7 +172,7 @@ Replace the existing `styles` array in `angular.json` with the following:
 ]
 ```
 
-These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.md) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.md).
+These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.mdx) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.mdx).
 
 #### 2. Set up Theming
 
@@ -191,7 +191,7 @@ Create a `src/theme/variables.css` file with the following content:
 @import '@ionic/angular/css/palettes/dark.system.css';
 ```
 
-This file enables [dark mode support](/docs/theming/dark-mode.md) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables.
+This file enables [dark mode support](/docs/theming/dark-mode.mdx) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables.
 
 #### 3. Update the App Component
 
diff --git a/versioned_docs/version-v9/angular/build-options.md b/versioned_docs/version-v9/angular/build-options.mdx
similarity index 100%
rename from versioned_docs/version-v9/angular/build-options.md
rename to versioned_docs/version-v9/angular/build-options.mdx
diff --git a/versioned_docs/version-v9/angular/injection-tokens.md b/versioned_docs/version-v9/angular/injection-tokens.mdx
similarity index 100%
rename from versioned_docs/version-v9/angular/injection-tokens.md
rename to versioned_docs/version-v9/angular/injection-tokens.mdx
diff --git a/versioned_docs/version-v9/angular/lifecycle.md b/versioned_docs/version-v9/angular/lifecycle.mdx
similarity index 100%
rename from versioned_docs/version-v9/angular/lifecycle.md
rename to versioned_docs/version-v9/angular/lifecycle.mdx
diff --git a/versioned_docs/version-v9/angular/navigation.md b/versioned_docs/version-v9/angular/navigation.mdx
similarity index 99%
rename from versioned_docs/version-v9/angular/navigation.md
rename to versioned_docs/version-v9/angular/navigation.mdx
index d543120209d..b26fec782e7 100644
--- a/versioned_docs/version-v9/angular/navigation.md
+++ b/versioned_docs/version-v9/angular/navigation.mdx
@@ -197,7 +197,7 @@ export class AppRoutingModule {}
 
 :::tip
 
-If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to also import the `IonRouterLink` directive for Ionic components or the `IonRouterLinkWithHref` directive for `<a>` elements. An example of this is available in the [Ionic Angular Build Options docs](./build-options.md#migrating-from-modules-to-standalone).
+If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to also import the `IonRouterLink` directive for Ionic components or the `IonRouterLinkWithHref` directive for `<a>` elements. An example of this is available in the [Ionic Angular Build Options docs](./build-options.mdx#migrating-from-modules-to-standalone).
 
 :::
 
diff --git a/versioned_docs/version-v9/angular/overlays.md b/versioned_docs/version-v9/angular/overlays.mdx
similarity index 100%
rename from versioned_docs/version-v9/angular/overlays.md
rename to versioned_docs/version-v9/angular/overlays.mdx
diff --git a/versioned_docs/version-v9/angular/overview.md b/versioned_docs/version-v9/angular/overview.mdx
similarity index 100%
rename from versioned_docs/version-v9/angular/overview.md
rename to versioned_docs/version-v9/angular/overview.mdx
diff --git a/versioned_docs/version-v9/angular/performance.md b/versioned_docs/version-v9/angular/performance.mdx
similarity index 100%
rename from versioned_docs/version-v9/angular/performance.md
rename to versioned_docs/version-v9/angular/performance.mdx
diff --git a/versioned_docs/version-v9/angular/platform.md b/versioned_docs/version-v9/angular/platform.mdx
similarity index 100%
rename from versioned_docs/version-v9/angular/platform.md
rename to versioned_docs/version-v9/angular/platform.mdx
diff --git a/versioned_docs/version-v9/angular/pwa.md b/versioned_docs/version-v9/angular/pwa.mdx
similarity index 100%
rename from versioned_docs/version-v9/angular/pwa.md
rename to versioned_docs/version-v9/angular/pwa.mdx
diff --git a/docs/angular/quickstart.md b/versioned_docs/version-v9/angular/quickstart.mdx
similarity index 94%
rename from docs/angular/quickstart.md
rename to versioned_docs/version-v9/angular/quickstart.mdx
index a060df0e171..4ba89d69358 100644
--- a/docs/angular/quickstart.md
+++ b/versioned_docs/version-v9/angular/quickstart.mdx
@@ -174,17 +174,17 @@ And the template, in the `home.page.html` file, uses those components:
 </ion-content>
 ```
 
-This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
+This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.mdx#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
 :::tip[Learn More]
 
-For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
+For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.mdx), [Toolbar](/docs/api/toolbar.mdx), [Title](/docs/api/title.mdx), and [Content](/docs/api/content.mdx) documentation.
 
 :::
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.md) at the end of the `ion-content`:
+You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.mdx) at the end of the `ion-content`:
 
 ```html title="src/app/home/home.page.html"
 <ion-content>
@@ -215,7 +215,7 @@ ionic generate page new
 
 A route will be automatically added to `app.routes.ts`.
 
-In `new.page.html`, you can add a [Back Button](/docs/api/back-button.md) to the [Toolbar](/docs/api/toolbar.md):
+In `new.page.html`, you can add a [Back Button](/docs/api/back-button.mdx) to the [Toolbar](/docs/api/toolbar.mdx):
 
 ```html title="src/app/new/new.page.html"
 <ion-header [translucent]="true">
@@ -262,7 +262,7 @@ import { RouterLink } from '@angular/router';
 
 :::info
 
-Navigating can also be performed using Angular's Router service. Refer to the [Angular Navigation documentation](/docs/angular/navigation.md#navigating-to-different-routes) for more information.
+Navigating can also be performed using Angular's Router service. Refer to the [Angular Navigation documentation](/docs/angular/navigation.mdx#navigating-to-different-routes) for more information.
 
 :::
 
@@ -307,7 +307,7 @@ export class NewPage implements OnInit {
 
 Alternatively, you can register icons in `app.component.ts` to use them throughout your app.
 
-For more information, refer to the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
+For more information, refer to the [Icon documentation](/docs/api/icon.mdx) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
 ## Call Component Methods
 
@@ -393,7 +393,7 @@ To call methods on Ionic components:
 1. Create a `ViewChild` reference for the component
 2. Call the method directly on the component instance
 
-You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation.
+You can find available methods for each component in the [Methods](/docs/api/content.mdx#methods) section of their API documentation.
 
 ## Run on a Device
 
diff --git a/versioned_docs/version-v9/angular/slides.md b/versioned_docs/version-v9/angular/slides.mdx
similarity index 100%
rename from versioned_docs/version-v9/angular/slides.md
rename to versioned_docs/version-v9/angular/slides.mdx
diff --git a/versioned_docs/version-v9/angular/storage.md b/versioned_docs/version-v9/angular/storage.mdx
similarity index 100%
rename from versioned_docs/version-v9/angular/storage.md
rename to versioned_docs/version-v9/angular/storage.mdx
diff --git a/versioned_docs/version-v9/angular/testing.md b/versioned_docs/version-v9/angular/testing.mdx
similarity index 100%
rename from versioned_docs/version-v9/angular/testing.md
rename to versioned_docs/version-v9/angular/testing.mdx
diff --git a/versioned_docs/version-v9/angular/virtual-scroll.md b/versioned_docs/version-v9/angular/virtual-scroll.mdx
similarity index 100%
rename from versioned_docs/version-v9/angular/virtual-scroll.md
rename to versioned_docs/version-v9/angular/virtual-scroll.mdx
diff --git a/docs/angular/your-first-app.md b/versioned_docs/version-v9/angular/your-first-app.mdx
similarity index 95%
rename from docs/angular/your-first-app.md
rename to versioned_docs/version-v9/angular/your-first-app.mdx
index e59d85e9b69..a1e5363b11b 100644
--- a/docs/angular/your-first-app.md
+++ b/versioned_docs/version-v9/angular/your-first-app.mdx
@@ -26,7 +26,7 @@ Here’s the finished app running on all 3 platforms:
 
 :::note
 
-Looking for the previous version of this guide that covered Ionic 4 and Cordova? Refer to the [Ionic 4 and Cordova guide](../developer-resources/guides/first-app-v4/intro.md).
+Looking for the previous version of this guide that covered Ionic 4 and Cordova? Refer to the [Ionic 4 and Cordova guide](../developer-resources/guides/first-app-v4/intro.mdx).
 
 :::
 
@@ -36,7 +36,7 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
 
 Highlights include:
 
-- One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.md).
+- One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.mdx).
 - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
 - Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs.
 
@@ -70,7 +70,7 @@ npm install -g @ionic/cli native-run cordova-res
 
 The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
 
-Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information.
 
 :::
 
@@ -174,7 +174,7 @@ Open `/src/app/tab2/tab2.page.html`. It contains:
 </ion-content>
 ```
 
-`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.md#collapsible-large-titles) support). Rename both `ion-title` elements to:
+`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.mdx#collapsible-large-titles) support). Rename both `ion-title` elements to:
 
 ```html
 <ion-header [translucent]="true">
@@ -196,7 +196,7 @@ Open `/src/app/tab2/tab2.page.html`. It contains:
 </ion-content>
 ```
 
-We put the visual aspects of our app into `<ion-content>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.md) (FAB) to the bottom of the page and set the camera image as the icon.
+We put the visual aspects of our app into `<ion-content>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.mdx) (FAB) to the bottom of the page and set the camera image as the icon.
 
 ```html
 <ion-header [translucent]="true">
diff --git a/docs/angular/your-first-app/2-taking-photos.md b/versioned_docs/version-v9/angular/your-first-app/2-taking-photos.mdx
similarity index 95%
rename from docs/angular/your-first-app/2-taking-photos.md
rename to versioned_docs/version-v9/angular/your-first-app/2-taking-photos.mdx
index 3ce57cbd0b3..ee52853881c 100644
--- a/docs/angular/your-first-app/2-taking-photos.md
+++ b/versioned_docs/version-v9/angular/your-first-app/2-taking-photos.mdx
@@ -231,7 +231,7 @@ export interface UserPhoto {
 }
 ```
 
-Next, switch to `tab2.page.html` to display the images. We'll add a [Grid component](../../api/grid.md) so the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `PhotoService`'s `photos` signal with the built-in [`@for`](https://angular.dev/guide/templates/control-flow#for-block-repeaters) block - calling `photoService.photos()` reads the signal's current value. For each item, add an `<img>` element and set its `src` property to the photo's path.
+Next, switch to `tab2.page.html` to display the images. We'll add a [Grid component](../../api/grid.mdx) so the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `PhotoService`'s `photos` signal with the built-in [`@for`](https://angular.dev/guide/templates/control-flow#for-block-repeaters) block - calling `photoService.photos()` reads the signal's current value. For each item, add an `<img>` element and set its `src` property to the photo's path.
 
 ```html
 <ion-header [translucent]="true">
diff --git a/versioned_docs/version-v9/angular/your-first-app/3-saving-photos.md b/versioned_docs/version-v9/angular/your-first-app/3-saving-photos.mdx
similarity index 100%
rename from versioned_docs/version-v9/angular/your-first-app/3-saving-photos.md
rename to versioned_docs/version-v9/angular/your-first-app/3-saving-photos.mdx
diff --git a/versioned_docs/version-v9/angular/your-first-app/4-loading-photos.md b/versioned_docs/version-v9/angular/your-first-app/4-loading-photos.mdx
similarity index 100%
rename from versioned_docs/version-v9/angular/your-first-app/4-loading-photos.md
rename to versioned_docs/version-v9/angular/your-first-app/4-loading-photos.mdx
diff --git a/versioned_docs/version-v9/angular/your-first-app/5-adding-mobile.md b/versioned_docs/version-v9/angular/your-first-app/5-adding-mobile.mdx
similarity index 95%
rename from versioned_docs/version-v9/angular/your-first-app/5-adding-mobile.md
rename to versioned_docs/version-v9/angular/your-first-app/5-adding-mobile.mdx
index 2ac9768a4b8..b3736d50de6 100644
--- a/versioned_docs/version-v9/angular/your-first-app/5-adding-mobile.md
+++ b/versioned_docs/version-v9/angular/your-first-app/5-adding-mobile.mdx
@@ -17,7 +17,7 @@ Our photo gallery app won’t be complete until it runs on iOS, Android, and the
 
 Let’s start with making some small code changes - then our app will “just work” when we deploy it to a device.
 
-Import the Ionic [Platform API](../platform.md) into `photo.service.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile).
+Import the Ionic [Platform API](../platform.mdx) into `photo.service.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile).
 
 Add `Platform` to the imports at the top of the file and a new property `platform` to the `PhotoService` class. We'll also need to update the constructor to set the user's platform.
 
@@ -85,7 +85,7 @@ private async savePicture(photo: Photo) {
 }
 ```
 
-When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details on the File Protocol](../../core-concepts/webview.md#file-protocol)). To use this method, we'll need to import Capacitor into `photo.service.ts`.
+When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details on the File Protocol](../../core-concepts/webview.mdx#file-protocol)). To use this method, we'll need to import Capacitor into `photo.service.ts`.
 
 ```ts
 import { Injectable, inject, signal } from '@angular/core';
diff --git a/versioned_docs/version-v9/angular/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v9/angular/your-first-app/6-deploying-mobile.mdx
similarity index 100%
rename from versioned_docs/version-v9/angular/your-first-app/6-deploying-mobile.md
rename to versioned_docs/version-v9/angular/your-first-app/6-deploying-mobile.mdx
diff --git a/docs/angular/your-first-app/7-live-reload.md b/versioned_docs/version-v9/angular/your-first-app/7-live-reload.mdx
similarity index 96%
rename from docs/angular/your-first-app/7-live-reload.md
rename to versioned_docs/version-v9/angular/your-first-app/7-live-reload.mdx
index 2d3a9462cf8..c300e4730ac 100644
--- a/docs/angular/your-first-app/7-live-reload.md
+++ b/versioned_docs/version-v9/angular/your-first-app/7-live-reload.mdx
@@ -13,7 +13,7 @@ sidebar_label: Live Reload
 
 So far, we’ve learned how easy it is to develop a cross-platform app that works everywhere. The development experience is pretty quick, but what if I told you there was a way to go faster?
 
-We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.md) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
+We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.mdx) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
 
 ## Live Reload
 
@@ -156,7 +156,7 @@ export class Tab2Page implements OnInit {
 }
 ```
 
-Open `tab2.page.html` and wrap each image in a `<button>` element with a click handler. When the app user taps on a photo in our gallery, we'll display an [Action Sheet](../../api/action-sheet.md) dialog with the option to either delete the selected photo or cancel (close) the dialog.
+Open `tab2.page.html` and wrap each image in a `<button>` element with a click handler. When the app user taps on a photo in our gallery, we'll display an [Action Sheet](../../api/action-sheet.mdx) dialog with the option to either delete the selected photo or cancel (close) the dialog.
 
 ```html
 <ion-header [translucent]="true">
diff --git a/versioned_docs/version-v8/angular/your-first-app/8-distribute.md b/versioned_docs/version-v9/angular/your-first-app/8-distribute.mdx
similarity index 97%
rename from versioned_docs/version-v8/angular/your-first-app/8-distribute.md
rename to versioned_docs/version-v9/angular/your-first-app/8-distribute.mdx
index 6c221cc4b42..f029858cb9b 100644
--- a/versioned_docs/version-v8/angular/your-first-app/8-distribute.md
+++ b/versioned_docs/version-v9/angular/your-first-app/8-distribute.mdx
@@ -102,6 +102,6 @@ For access to the ability to create a Native Configuration, you will need to be
 
 Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to your users' devices!
 
-There are many paths to follow from here. Try adding another [Ionic UI component](../../components.md) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
+There are many paths to follow from here. Try adding another [Ionic UI component](../../components.mdx) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
 
 Happy app building! 💙
diff --git a/docs/angular/zoneless.md b/versioned_docs/version-v9/angular/zoneless.mdx
similarity index 98%
rename from docs/angular/zoneless.md
rename to versioned_docs/version-v9/angular/zoneless.mdx
index 6d13b6d6fe3..bc06e66b8ba 100644
--- a/docs/angular/zoneless.md
+++ b/versioned_docs/version-v9/angular/zoneless.mdx
@@ -28,7 +28,7 @@ You do not need to change these. Angular schedules change detection for them in
 
 :::note[Angular 22]
 
-Angular 22 also makes `OnPush` the default change detection strategy. Under `OnPush`, synchronous state set as a plain field (including in the lifecycle hooks above) no longer re-renders on its own, even though Ionic notifies Angular. Signals still update the view. For the migration path, refer to the [OnPush Change Detection section of the Ionic 9 upgrade guide](/docs/updating/9-0.md#onpush-change-detection-on-angular-22).
+Angular 22 also makes `OnPush` the default change detection strategy. Under `OnPush`, synchronous state set as a plain field (including in the lifecycle hooks above) no longer re-renders on its own, even though Ionic notifies Angular. Signals still update the view. For the migration path, refer to the [OnPush Change Detection section of the Ionic 9 upgrade guide](/docs/updating/9-0.mdx#onpush-change-detection-on-angular-22).
 
 :::
 
@@ -155,4 +155,4 @@ export class AppComponent {
 
 ## Staying on Zone.js
 
-If you are not ready to adopt zoneless change detection, you can opt back into Zone.js with `provideZoneChangeDetection()`. Refer to the [Keeping Zone.js section of the Ionic 9 upgrade guide](/docs/updating/9-0.md#keeping-zonejs) for the exact configuration.
+If you are not ready to adopt zoneless change detection, you can opt back into Zone.js with `provideZoneChangeDetection()`. Refer to the [Keeping Zone.js section of the Ionic 9 upgrade guide](/docs/updating/9-0.mdx#keeping-zonejs) for the exact configuration.
diff --git a/versioned_docs/version-v9/api.md b/versioned_docs/version-v9/api.mdx
similarity index 100%
rename from versioned_docs/version-v9/api.md
rename to versioned_docs/version-v9/api.mdx
diff --git a/versioned_docs/version-v9/api/accordion-group.md b/versioned_docs/version-v9/api/accordion-group.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/accordion-group.md
rename to versioned_docs/version-v9/api/accordion-group.mdx
diff --git a/versioned_docs/version-v9/api/accordion.md b/versioned_docs/version-v9/api/accordion.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/accordion.md
rename to versioned_docs/version-v9/api/accordion.mdx
diff --git a/versioned_docs/version-v9/api/action-sheet.md b/versioned_docs/version-v9/api/action-sheet.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/action-sheet.md
rename to versioned_docs/version-v9/api/action-sheet.mdx
diff --git a/versioned_docs/version-v9/api/alert.md b/versioned_docs/version-v9/api/alert.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/alert.md
rename to versioned_docs/version-v9/api/alert.mdx
diff --git a/versioned_docs/version-v9/api/app.md b/versioned_docs/version-v9/api/app.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/app.md
rename to versioned_docs/version-v9/api/app.mdx
diff --git a/versioned_docs/version-v9/api/avatar.md b/versioned_docs/version-v9/api/avatar.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/avatar.md
rename to versioned_docs/version-v9/api/avatar.mdx
diff --git a/versioned_docs/version-v9/api/back-button.md b/versioned_docs/version-v9/api/back-button.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/back-button.md
rename to versioned_docs/version-v9/api/back-button.mdx
diff --git a/versioned_docs/version-v9/api/backdrop.md b/versioned_docs/version-v9/api/backdrop.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/backdrop.md
rename to versioned_docs/version-v9/api/backdrop.mdx
diff --git a/versioned_docs/version-v9/api/badge.md b/versioned_docs/version-v9/api/badge.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/badge.md
rename to versioned_docs/version-v9/api/badge.mdx
diff --git a/versioned_docs/version-v9/api/breadcrumb.md b/versioned_docs/version-v9/api/breadcrumb.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/breadcrumb.md
rename to versioned_docs/version-v9/api/breadcrumb.mdx
diff --git a/versioned_docs/version-v9/api/breadcrumbs.md b/versioned_docs/version-v9/api/breadcrumbs.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/breadcrumbs.md
rename to versioned_docs/version-v9/api/breadcrumbs.mdx
diff --git a/versioned_docs/version-v9/api/button.md b/versioned_docs/version-v9/api/button.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/button.md
rename to versioned_docs/version-v9/api/button.mdx
diff --git a/versioned_docs/version-v9/api/buttons.md b/versioned_docs/version-v9/api/buttons.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/buttons.md
rename to versioned_docs/version-v9/api/buttons.mdx
diff --git a/versioned_docs/version-v9/api/card-content.md b/versioned_docs/version-v9/api/card-content.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/card-content.md
rename to versioned_docs/version-v9/api/card-content.mdx
diff --git a/versioned_docs/version-v9/api/card-header.md b/versioned_docs/version-v9/api/card-header.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/card-header.md
rename to versioned_docs/version-v9/api/card-header.mdx
diff --git a/versioned_docs/version-v9/api/card-subtitle.md b/versioned_docs/version-v9/api/card-subtitle.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/card-subtitle.md
rename to versioned_docs/version-v9/api/card-subtitle.mdx
diff --git a/versioned_docs/version-v9/api/card-title.md b/versioned_docs/version-v9/api/card-title.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/card-title.md
rename to versioned_docs/version-v9/api/card-title.mdx
diff --git a/versioned_docs/version-v9/api/card.md b/versioned_docs/version-v9/api/card.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/card.md
rename to versioned_docs/version-v9/api/card.mdx
diff --git a/versioned_docs/version-v9/api/checkbox.md b/versioned_docs/version-v9/api/checkbox.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/checkbox.md
rename to versioned_docs/version-v9/api/checkbox.mdx
diff --git a/versioned_docs/version-v9/api/chip.md b/versioned_docs/version-v9/api/chip.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/chip.md
rename to versioned_docs/version-v9/api/chip.mdx
diff --git a/versioned_docs/version-v9/api/col.md b/versioned_docs/version-v9/api/col.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/col.md
rename to versioned_docs/version-v9/api/col.mdx
diff --git a/versioned_docs/version-v9/api/content.md b/versioned_docs/version-v9/api/content.mdx
similarity index 98%
rename from versioned_docs/version-v9/api/content.md
rename to versioned_docs/version-v9/api/content.mdx
index 1b42fe0103a..de088591af3 100644
--- a/versioned_docs/version-v9/api/content.md
+++ b/versioned_docs/version-v9/api/content.mdx
@@ -97,7 +97,7 @@ import CSSProps from '@site/static/usage/v9/content/theming/css-properties/index
 
 ### Safe Area Padding
 
-The content component will not automatically apply padding to any of its sides to account for the [safe area](/docs/theming/advanced#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.md#application-variables).
+The content component will not automatically apply padding to any of its sides to account for the [safe area](/docs/theming/advanced#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.mdx#application-variables).
 
 The most common use case for this is to apply padding to the top of the content to account for the status bar. This can be done by setting the `padding-top` property to the value of the `--ion-safe-area-top` variable.
 
diff --git a/versioned_docs/version-v9/api/datetime-button.md b/versioned_docs/version-v9/api/datetime-button.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/datetime-button.md
rename to versioned_docs/version-v9/api/datetime-button.mdx
diff --git a/versioned_docs/version-v9/api/datetime.md b/versioned_docs/version-v9/api/datetime.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/datetime.md
rename to versioned_docs/version-v9/api/datetime.mdx
diff --git a/versioned_docs/version-v9/api/fab-button.md b/versioned_docs/version-v9/api/fab-button.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/fab-button.md
rename to versioned_docs/version-v9/api/fab-button.mdx
diff --git a/versioned_docs/version-v9/api/fab-list.md b/versioned_docs/version-v9/api/fab-list.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/fab-list.md
rename to versioned_docs/version-v9/api/fab-list.mdx
diff --git a/versioned_docs/version-v9/api/fab.md b/versioned_docs/version-v9/api/fab.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/fab.md
rename to versioned_docs/version-v9/api/fab.mdx
diff --git a/versioned_docs/version-v9/api/footer.md b/versioned_docs/version-v9/api/footer.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/footer.md
rename to versioned_docs/version-v9/api/footer.mdx
diff --git a/versioned_docs/version-v9/api/grid.md b/versioned_docs/version-v9/api/grid.mdx
similarity index 97%
rename from versioned_docs/version-v9/api/grid.md
rename to versioned_docs/version-v9/api/grid.mdx
index c929fc05678..46be3271a32 100644
--- a/versioned_docs/version-v9/api/grid.md
+++ b/versioned_docs/version-v9/api/grid.mdx
@@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-The grid is a powerful mobile-first flexbox system for building custom layouts. It is composed of three units — a grid, [row(s)](row.md) and [column(s)](col.md). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS.
+The grid is a powerful mobile-first flexbox system for building custom layouts. It is composed of three units — a grid, [row(s)](row.mdx) and [column(s)](col.mdx). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS.
 
 ## Overview
 
@@ -156,7 +156,7 @@ import VerticalAlignment from '@site/static/usage/v9/grid/vertical-alignment/ind
 
 ### Horizontal Alignment
 
-All columns can be horizontally aligned inside of a row by adding different classes to the row. For a list of available classes, refer to [css utilities](/layout/css-utilities.md#flex-container-properties).
+All columns can be horizontally aligned inside of a row by adding different classes to the row. For a list of available classes, refer to [css utilities](/layout/css-utilities.mdx#flex-container-properties).
 
 import HorizontalAlignment from '@site/static/usage/v9/grid/horizontal-alignment/index.mdx';
 
diff --git a/versioned_docs/version-v9/api/header.md b/versioned_docs/version-v9/api/header.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/header.md
rename to versioned_docs/version-v9/api/header.mdx
diff --git a/versioned_docs/version-v9/api/icon.md b/versioned_docs/version-v9/api/icon.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/icon.md
rename to versioned_docs/version-v9/api/icon.mdx
diff --git a/versioned_docs/version-v9/api/img.md b/versioned_docs/version-v9/api/img.mdx
similarity index 94%
rename from versioned_docs/version-v9/api/img.md
rename to versioned_docs/version-v9/api/img.mdx
index aa9adb8daa8..a6b8293e6c3 100644
--- a/versioned_docs/version-v9/api/img.md
+++ b/versioned_docs/version-v9/api/img.mdx
@@ -23,7 +23,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 :::warning[Deprecated]
 
-`ion-img` is deprecated and will be removed in Ionic 10. Use a native `<img>` tag with [loading="lazy"](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#loading) instead. Refer to the [migration guide](../updating/9-0.md#img) for details on replacing events and styling.
+`ion-img` is deprecated and will be removed in Ionic 10. Use a native `<img>` tag with [loading="lazy"](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#loading) instead. Refer to the [migration guide](../updating/9-0.mdx#img) for details on replacing events and styling.
 
 :::
 
diff --git a/versioned_docs/version-v9/api/infinite-scroll-content.md b/versioned_docs/version-v9/api/infinite-scroll-content.mdx
similarity index 94%
rename from versioned_docs/version-v9/api/infinite-scroll-content.md
rename to versioned_docs/version-v9/api/infinite-scroll-content.mdx
index de3741b9c2a..d7e75812090 100644
--- a/versioned_docs/version-v9/api/infinite-scroll-content.md
+++ b/versioned_docs/version-v9/api/infinite-scroll-content.mdx
@@ -13,7 +13,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 The `ion-infinite-scroll-content` component is the default child used by the `ion-infinite-scroll`. It displays an infinite scroll spinner that looks best based on the platform and changes the look depending on the infinite scroll's state. The default spinner can be changed and text can be added by setting the `loadingSpinner` and `loadingText` properties.
 
-For more information as well as usage, refer to the [Infinite Scroll Documentation](./infinite-scroll.md#infinite-scroll-content).
+For more information as well as usage, refer to the [Infinite Scroll Documentation](./infinite-scroll.mdx#infinite-scroll-content).
 
 ## Properties
 
diff --git a/versioned_docs/version-v9/api/infinite-scroll.md b/versioned_docs/version-v9/api/infinite-scroll.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/infinite-scroll.md
rename to versioned_docs/version-v9/api/infinite-scroll.mdx
diff --git a/versioned_docs/version-v9/api/input-otp.md b/versioned_docs/version-v9/api/input-otp.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/input-otp.md
rename to versioned_docs/version-v9/api/input-otp.mdx
diff --git a/versioned_docs/version-v9/api/input-password-toggle.md b/versioned_docs/version-v9/api/input-password-toggle.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/input-password-toggle.md
rename to versioned_docs/version-v9/api/input-password-toggle.mdx
diff --git a/versioned_docs/version-v9/api/input.md b/versioned_docs/version-v9/api/input.mdx
similarity index 96%
rename from versioned_docs/version-v9/api/input.md
rename to versioned_docs/version-v9/api/input.mdx
index f7a3af962e9..e24b08c4a99 100644
--- a/versioned_docs/version-v9/api/input.md
+++ b/versioned_docs/version-v9/api/input.mdx
@@ -159,9 +159,9 @@ Note that this feature is considered experimental because it relies on a simulat
 
 :::note
 
-In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. Refer to the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
+In most cases, [Icon](./icon.mdx) components placed in these slots should have `aria-hidden="true"`. Refer to the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
 
-If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to.
+If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.mdx). This ensures that the content can be tabbed to.
 
 :::
 
diff --git a/versioned_docs/version-v9/api/item-divider.md b/versioned_docs/version-v9/api/item-divider.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/item-divider.md
rename to versioned_docs/version-v9/api/item-divider.mdx
diff --git a/versioned_docs/version-v9/api/item-group.md b/versioned_docs/version-v9/api/item-group.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/item-group.md
rename to versioned_docs/version-v9/api/item-group.mdx
diff --git a/versioned_docs/version-v9/api/item-option.md b/versioned_docs/version-v9/api/item-option.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/item-option.md
rename to versioned_docs/version-v9/api/item-option.mdx
diff --git a/versioned_docs/version-v9/api/item-options.md b/versioned_docs/version-v9/api/item-options.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/item-options.md
rename to versioned_docs/version-v9/api/item-options.mdx
diff --git a/versioned_docs/version-v9/api/item-sliding.md b/versioned_docs/version-v9/api/item-sliding.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/item-sliding.md
rename to versioned_docs/version-v9/api/item-sliding.mdx
diff --git a/versioned_docs/version-v9/api/item.md b/versioned_docs/version-v9/api/item.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/item.md
rename to versioned_docs/version-v9/api/item.mdx
diff --git a/versioned_docs/version-v9/api/label.md b/versioned_docs/version-v9/api/label.mdx
similarity index 88%
rename from versioned_docs/version-v9/api/label.md
rename to versioned_docs/version-v9/api/label.mdx
index 2528c8cdfc4..d5694cf1e79 100644
--- a/versioned_docs/version-v9/api/label.md
+++ b/versioned_docs/version-v9/api/label.mdx
@@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="scoped" />
 
-Label is an element used primarily to add text content to [Item](./item.md) components. Label can also be used inside of form control components such as [Input](./input.md) or [Radio](./radio.md) when specifying the visible label, but it is not required.
+Label is an element used primarily to add text content to [Item](./item.mdx) components. Label can also be used inside of form control components such as [Input](./input.mdx) or [Radio](./radio.mdx) when specifying the visible label, but it is not required.
 
 The position of the label inside of an item can be inline, fixed, stacked, or floating.
 
diff --git a/versioned_docs/version-v9/api/list-header.md b/versioned_docs/version-v9/api/list-header.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/list-header.md
rename to versioned_docs/version-v9/api/list-header.mdx
diff --git a/versioned_docs/version-v9/api/list.md b/versioned_docs/version-v9/api/list.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/list.md
rename to versioned_docs/version-v9/api/list.mdx
diff --git a/versioned_docs/version-v9/api/loading.md b/versioned_docs/version-v9/api/loading.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/loading.md
rename to versioned_docs/version-v9/api/loading.mdx
diff --git a/versioned_docs/version-v9/api/menu-button.md b/versioned_docs/version-v9/api/menu-button.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/menu-button.md
rename to versioned_docs/version-v9/api/menu-button.mdx
diff --git a/versioned_docs/version-v9/api/menu-toggle.md b/versioned_docs/version-v9/api/menu-toggle.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/menu-toggle.md
rename to versioned_docs/version-v9/api/menu-toggle.mdx
diff --git a/versioned_docs/version-v9/api/menu.md b/versioned_docs/version-v9/api/menu.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/menu.md
rename to versioned_docs/version-v9/api/menu.mdx
diff --git a/versioned_docs/version-v9/api/modal.md b/versioned_docs/version-v9/api/modal.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/modal.md
rename to versioned_docs/version-v9/api/modal.mdx
diff --git a/versioned_docs/version-v9/api/nav-link.md b/versioned_docs/version-v9/api/nav-link.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/nav-link.md
rename to versioned_docs/version-v9/api/nav-link.mdx
diff --git a/versioned_docs/version-v9/api/nav.md b/versioned_docs/version-v9/api/nav.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/nav.md
rename to versioned_docs/version-v9/api/nav.mdx
diff --git a/versioned_docs/version-v9/api/note.md b/versioned_docs/version-v9/api/note.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/note.md
rename to versioned_docs/version-v9/api/note.mdx
diff --git a/versioned_docs/version-v9/api/picker-column-option.md b/versioned_docs/version-v9/api/picker-column-option.mdx
similarity index 95%
rename from versioned_docs/version-v9/api/picker-column-option.md
rename to versioned_docs/version-v9/api/picker-column-option.mdx
index 6893c158d35..ff80917d68e 100644
--- a/versioned_docs/version-v9/api/picker-column-option.md
+++ b/versioned_docs/version-v9/api/picker-column-option.mdx
@@ -18,7 +18,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-An individual column option in a picker. Visit the [`ion-picker`](./picker.md) documentation for more details.
+An individual column option in a picker. Visit the [`ion-picker`](./picker.mdx) documentation for more details.
 
 ## Properties
 
diff --git a/versioned_docs/version-v9/api/picker-column.md b/versioned_docs/version-v9/api/picker-column.mdx
similarity index 95%
rename from versioned_docs/version-v9/api/picker-column.md
rename to versioned_docs/version-v9/api/picker-column.mdx
index ec844f4e1c4..8871552fdec 100644
--- a/versioned_docs/version-v9/api/picker-column.md
+++ b/versioned_docs/version-v9/api/picker-column.mdx
@@ -18,7 +18,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-An individual column within a picker. Visit the [`ion-picker`](./picker.md) documentation for more details.
+An individual column within a picker. Visit the [`ion-picker`](./picker.mdx) documentation for more details.
 
 ## Properties
 
diff --git a/versioned_docs/version-v9/api/picker.md b/versioned_docs/version-v9/api/picker.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/picker.md
rename to versioned_docs/version-v9/api/picker.mdx
diff --git a/versioned_docs/version-v9/api/popover.md b/versioned_docs/version-v9/api/popover.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/popover.md
rename to versioned_docs/version-v9/api/popover.mdx
diff --git a/versioned_docs/version-v9/api/progress-bar.md b/versioned_docs/version-v9/api/progress-bar.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/progress-bar.md
rename to versioned_docs/version-v9/api/progress-bar.mdx
diff --git a/versioned_docs/version-v9/api/radio-group.md b/versioned_docs/version-v9/api/radio-group.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/radio-group.md
rename to versioned_docs/version-v9/api/radio-group.mdx
diff --git a/versioned_docs/version-v9/api/radio.md b/versioned_docs/version-v9/api/radio.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/radio.md
rename to versioned_docs/version-v9/api/radio.mdx
diff --git a/versioned_docs/version-v9/api/range.md b/versioned_docs/version-v9/api/range.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/range.md
rename to versioned_docs/version-v9/api/range.mdx
diff --git a/versioned_docs/version-v9/api/refresher-content.md b/versioned_docs/version-v9/api/refresher-content.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/refresher-content.md
rename to versioned_docs/version-v9/api/refresher-content.mdx
diff --git a/versioned_docs/version-v9/api/refresher.md b/versioned_docs/version-v9/api/refresher.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/refresher.md
rename to versioned_docs/version-v9/api/refresher.mdx
diff --git a/versioned_docs/version-v9/api/reorder-group.md b/versioned_docs/version-v9/api/reorder-group.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/reorder-group.md
rename to versioned_docs/version-v9/api/reorder-group.mdx
diff --git a/versioned_docs/version-v9/api/reorder.md b/versioned_docs/version-v9/api/reorder.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/reorder.md
rename to versioned_docs/version-v9/api/reorder.mdx
diff --git a/versioned_docs/version-v9/api/ripple-effect.md b/versioned_docs/version-v9/api/ripple-effect.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/ripple-effect.md
rename to versioned_docs/version-v9/api/ripple-effect.mdx
diff --git a/versioned_docs/version-v9/api/route-redirect.md b/versioned_docs/version-v9/api/route-redirect.mdx
similarity index 98%
rename from versioned_docs/version-v9/api/route-redirect.md
rename to versioned_docs/version-v9/api/route-redirect.mdx
index 2e92267266a..2ad8ccfe967 100644
--- a/versioned_docs/version-v9/api/route-redirect.md
+++ b/versioned_docs/version-v9/api/route-redirect.mdx
@@ -23,7 +23,7 @@ A route redirect can only be used with an `ion-router` as a direct child of it.
 
 :::note
 
-Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.md) and the Angular router.
+Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.mdx) and the Angular router.
 
 :::
 
diff --git a/versioned_docs/version-v9/api/route.md b/versioned_docs/version-v9/api/route.mdx
similarity index 99%
rename from versioned_docs/version-v9/api/route.md
rename to versioned_docs/version-v9/api/route.mdx
index 5030e8d6896..6b6f6af5ca2 100644
--- a/versioned_docs/version-v9/api/route.md
+++ b/versioned_docs/version-v9/api/route.mdx
@@ -26,7 +26,7 @@ The route component takes a component and renders it when the Browser URL matche
 
 :::note
 
-Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.md) and the Angular router.
+Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.mdx) and the Angular router.
 
 :::
 
diff --git a/versioned_docs/version-v9/api/router-link.md b/versioned_docs/version-v9/api/router-link.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/router-link.md
rename to versioned_docs/version-v9/api/router-link.mdx
diff --git a/versioned_docs/version-v9/api/router-outlet.md b/versioned_docs/version-v9/api/router-outlet.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/router-outlet.md
rename to versioned_docs/version-v9/api/router-outlet.mdx
diff --git a/versioned_docs/version-v9/api/router.md b/versioned_docs/version-v9/api/router.mdx
similarity index 91%
rename from versioned_docs/version-v9/api/router.md
rename to versioned_docs/version-v9/api/router.mdx
index 72355b4c9e2..2cd5d16d70a 100644
--- a/versioned_docs/version-v9/api/router.md
+++ b/versioned_docs/version-v9/api/router.mdx
@@ -44,7 +44,7 @@ import BasicExample from '@site/static/usage/v9/router/basic/index.mdx';
 
 ## Using ion-nav within a Routed Page
 
-`ion-router` and [`ion-nav`](./nav.md) are separate systems. `ion-router` coordinates URL-based navigation through `ion-router-outlet`, while `ion-nav` manages a local stack that is independent of the URL. `ion-nav` does not integrate with `ion-router`: placing an `ion-nav` inside an `ion-router` does not turn it into a routed outlet, and pushing or popping views on an `ion-nav` never changes the URL.
+`ion-router` and [`ion-nav`](./nav.mdx) are separate systems. `ion-router` coordinates URL-based navigation through `ion-router-outlet`, while `ion-nav` manages a local stack that is independent of the URL. `ion-nav` does not integrate with `ion-router`: placing an `ion-nav` inside an `ion-router` does not turn it into a routed outlet, and pushing or popping views on an `ion-nav` never changes the URL.
 
 The two can still be composed. A routed page rendered by `ion-router-outlet` can host its own `ion-nav` for local, URL-less navigation within that page. In the example below, navigating to `/details` updates the URL, but stepping through the `ion-nav` inside that page does not.
 
diff --git a/versioned_docs/version-v9/api/row.md b/versioned_docs/version-v9/api/row.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/row.md
rename to versioned_docs/version-v9/api/row.mdx
diff --git a/versioned_docs/version-v9/api/searchbar.md b/versioned_docs/version-v9/api/searchbar.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/searchbar.md
rename to versioned_docs/version-v9/api/searchbar.mdx
diff --git a/versioned_docs/version-v9/api/segment-button.md b/versioned_docs/version-v9/api/segment-button.mdx
similarity index 90%
rename from versioned_docs/version-v9/api/segment-button.md
rename to versioned_docs/version-v9/api/segment-button.mdx
index 64945a4d6e1..a8d02aed673 100644
--- a/versioned_docs/version-v9/api/segment-button.md
+++ b/versioned_docs/version-v9/api/segment-button.mdx
@@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-Segment buttons are groups of related buttons inside of a [segment](segment.md). They are displayed in a horizontal row. A segment button can be selected by default by setting the `value` of the segment to the `value` of the segment button. Only one segment button can be selected at a time.
+Segment buttons are groups of related buttons inside of a [segment](segment.mdx). They are displayed in a horizontal row. A segment button can be selected by default by setting the `value` of the segment to the `value` of the segment button. Only one segment button can be selected at a time.
 
 ## Basic Usage
 
diff --git a/versioned_docs/version-v9/api/segment-content.md b/versioned_docs/version-v9/api/segment-content.mdx
similarity index 87%
rename from versioned_docs/version-v9/api/segment-content.md
rename to versioned_docs/version-v9/api/segment-content.mdx
index 94d47653a3e..e44bb6f6d5b 100644
--- a/versioned_docs/version-v9/api/segment-content.md
+++ b/versioned_docs/version-v9/api/segment-content.mdx
@@ -22,13 +22,13 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 <EncapsulationPill type="shadow" />
 
 Segment content is a wrapper element used to control the display of child elements when using swipeable segments. Segment content elements are children of a single
-[segment view](./segment-view.md) instance that is linked to a [segment](./segment.md). Refer to our [swipeable segments](./segment.md#swipeable-segments) documentation
+[segment view](./segment-view.mdx) instance that is linked to a [segment](./segment.mdx). Refer to our [swipeable segments](./segment.mdx#swipeable-segments) documentation
 for more information on how to use segment contents.
 
 ## Usage
 
 Each `ion-segment-content` needs a unique `id` attribute. This will be used to link the segment content to a segment button via the button's
-[contentId property](./segment-button.md#properties).
+[contentId property](./segment-button.mdx#properties).
 
 {/* Reuse swipeable segments playground */}
 
diff --git a/versioned_docs/version-v9/api/segment-view.md b/versioned_docs/version-v9/api/segment-view.mdx
similarity index 82%
rename from versioned_docs/version-v9/api/segment-view.md
rename to versioned_docs/version-v9/api/segment-view.mdx
index 0dc59c3abb0..dca6f5ec8f4 100644
--- a/versioned_docs/version-v9/api/segment-view.md
+++ b/versioned_docs/version-v9/api/segment-view.mdx
@@ -21,8 +21,8 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-Segment view is a wrapper element that links a group of [segment contents](./segment-content.md) to a [segment](./segment.md) when using swipeable segments.
-Refer to our [swipeable segments](./segment.md#swipeable-segments) documentation for more information on how to use segment views.
+Segment view is a wrapper element that links a group of [segment contents](./segment-content.mdx) to a [segment](./segment.mdx) when using swipeable segments.
+Refer to our [swipeable segments](./segment.mdx#swipeable-segments) documentation for more information on how to use segment views.
 
 ## Properties
 
diff --git a/versioned_docs/version-v9/api/segment.md b/versioned_docs/version-v9/api/segment.mdx
similarity index 97%
rename from versioned_docs/version-v9/api/segment.md
rename to versioned_docs/version-v9/api/segment.mdx
index ca0a177ad10..c0ef645e05e 100644
--- a/versioned_docs/version-v9/api/segment.md
+++ b/versioned_docs/version-v9/api/segment.mdx
@@ -50,7 +50,7 @@ import Toolbar from '@site/static/usage/v9/toolbar/segments/index.mdx';
 
 ## Swipeable Segments
 
-Each [segment button](./segment-button.md) can be associated with a [segment content](./segment-content.md) element that will be displayed
+Each [segment button](./segment-button.mdx) can be associated with a [segment content](./segment-content.mdx) element that will be displayed
 when the segment is active. With this approach, each segment's content can be swiped or scrolled between and the segment will be updated
 to reflect the currently visible content.
 
diff --git a/versioned_docs/version-v9/api/select-option.md b/versioned_docs/version-v9/api/select-option.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/select-option.md
rename to versioned_docs/version-v9/api/select-option.mdx
diff --git a/versioned_docs/version-v9/api/select.md b/versioned_docs/version-v9/api/select.mdx
similarity index 91%
rename from versioned_docs/version-v9/api/select.md
rename to versioned_docs/version-v9/api/select.mdx
index 891619cc8c7..5dc4f80d88b 100644
--- a/versioned_docs/version-v9/api/select.md
+++ b/versioned_docs/version-v9/api/select.mdx
@@ -89,7 +89,7 @@ import MultipleSelectionExample from '@site/static/usage/v9/select/basic/multipl
 
 ## Interfaces
 
-By default, select uses [ion-alert](alert.md) to open up the overlay of options in an alert. The interface can be changed to use [ion-action-sheet](action-sheet.md), [ion-popover](popover.md), or [ion-modal](modal.md) by passing `action-sheet`, `popover`, or `modal`, respectively, to the `interface` property. Read on to the other sections for the limitations of the different interfaces.
+By default, select uses [ion-alert](alert.mdx) to open up the overlay of options in an alert. The interface can be changed to use [ion-action-sheet](action-sheet.mdx), [ion-popover](popover.mdx), or [ion-modal](modal.mdx) by passing `action-sheet`, `popover`, or `modal`, respectively, to the `interface` property. Read on to the other sections for the limitations of the different interfaces.
 
 ### Alert
 
@@ -182,7 +182,7 @@ import ButtonTextExample from '@site/static/usage/v9/select/customization/button
 
 Since select uses the alert, action sheet, popover, and modal interfaces, options can be passed to these components through the `interfaceOptions` property. This can be used to pass a custom header, subheader, css class, and more.
 
-Refer to the [ion-alert docs](alert.md), [ion-action-sheet docs](action-sheet.md), [ion-popover docs](popover.md), and [ion-modal docs](modal.md)
+Refer to the [ion-alert docs](alert.mdx), [ion-action-sheet docs](action-sheet.mdx), [ion-popover docs](popover.mdx), and [ion-modal docs](modal.mdx)
 for the properties that each interface accepts.
 
 Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
@@ -197,9 +197,9 @@ The `start` and `end` slots can be used to place icons, buttons, or prefix/suffi
 
 :::note
 
-In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. Refer to the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
+In most cases, [Icon](./icon.mdx) components placed in these slots should have `aria-hidden="true"`. Refer to the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
 
-If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to.
+If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.mdx). This ensures that the content can be tabbed to.
 
 :::
 
@@ -211,11 +211,11 @@ import StartEndSlots from '@site/static/usage/v9/select/start-end-slots/index.md
 
 :::important
 
-Rich content in select options is disabled by default. Set [`innerHTMLTemplatesEnabled`](/docs/developing/config.md#ionicconfig) to `true` in your [global Ionic config](/docs/developing/config.md#global-config). Markup inside options is treated as plain text when it is disabled. Refer to [Security](/docs/techniques/security.md) for sanitization guidance when enabling custom HTML.
+Rich content in select options is disabled by default. Set [`innerHTMLTemplatesEnabled`](/docs/developing/config.mdx#ionicconfig) to `true` in your [global Ionic config](/docs/developing/config.mdx#global-config). Markup inside options is treated as plain text when it is disabled. Refer to [Security](/docs/techniques/security.mdx) for sanitization guidance when enabling custom HTML.
 
 :::
 
-In addition to single text labels, [Select Options](./select-option.md) can include HTML rich content in the select interface. Elements added inside of an option without a named slot will go into the default slot. The `start` and `end` slots will place elements on either side of the default slot. The `description` attribute can be used for additional supporting text displayed under the label.
+In addition to single text labels, [Select Options](./select-option.mdx) can include HTML rich content in the select interface. Elements added inside of an option without a named slot will go into the default slot. The `start` and `end` slots will place elements on either side of the default slot. The `description` attribute can be used for additional supporting text displayed under the label.
 
 This is separate from [Start and End Slots](#start-and-end-slots) on `ion-select`, which decorate the closed field. The rich content options display in the interface after opening the select.
 
@@ -244,12 +244,12 @@ import StylingSelectExample from '@site/static/usage/v9/select/customization/sty
 Customizing the interface dialog should be done by following the styling sections (CSS shadow parts, CSS custom properties, and slots) in
 that interface's documentation:
 
-- [Alert](alert.md#css-shadow-parts)
-- [Action Sheet](action-sheet.md#css-shadow-parts)
-- [Popover](popover.md#css-shadow-parts)
-- [Modal](modal.md#css-shadow-parts)
+- [Alert](alert.mdx#css-shadow-parts)
+- [Action Sheet](action-sheet.mdx#css-shadow-parts)
+- [Popover](popover.mdx#css-shadow-parts)
+- [Modal](modal.mdx#css-shadow-parts)
 
-However, the Select Option does set a class for easier styling and allows for the ability to pass a class to the overlay option, refer to the [Select Options documentation](select-option.md) for usage examples of customizing options.
+However, the Select Option does set a class for easier styling and allows for the ability to pass a class to the overlay option, refer to the [Select Options documentation](select-option.mdx) for usage examples of customizing options.
 
 ### Custom Toggle Icons
 
diff --git a/versioned_docs/version-v9/api/skeleton-text.md b/versioned_docs/version-v9/api/skeleton-text.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/skeleton-text.md
rename to versioned_docs/version-v9/api/skeleton-text.mdx
diff --git a/versioned_docs/version-v9/api/spinner.md b/versioned_docs/version-v9/api/spinner.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/spinner.md
rename to versioned_docs/version-v9/api/spinner.mdx
diff --git a/versioned_docs/version-v9/api/split-pane.md b/versioned_docs/version-v9/api/split-pane.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/split-pane.md
rename to versioned_docs/version-v9/api/split-pane.mdx
diff --git a/versioned_docs/version-v9/api/tab-bar.md b/versioned_docs/version-v9/api/tab-bar.mdx
similarity index 97%
rename from versioned_docs/version-v9/api/tab-bar.md
rename to versioned_docs/version-v9/api/tab-bar.mdx
index 5fef57e2bfd..6d38e08e210 100644
--- a/versioned_docs/version-v9/api/tab-bar.md
+++ b/versioned_docs/version-v9/api/tab-bar.mdx
@@ -24,7 +24,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-The tab bar is a UI component that contains a set of [tab buttons](tab-button.md). A tab bar must be provided inside of [tabs](tabs.md) to communicate with each [tab](tab.md).
+The tab bar is a UI component that contains a set of [tab buttons](tab-button.mdx). A tab bar must be provided inside of [tabs](tabs.mdx) to communicate with each [tab](tab.mdx).
 
 ## Usage
 
diff --git a/versioned_docs/version-v9/api/tab-button.md b/versioned_docs/version-v9/api/tab-button.mdx
similarity index 96%
rename from versioned_docs/version-v9/api/tab-button.md
rename to versioned_docs/version-v9/api/tab-button.mdx
index ace5c229b9b..a7a79270d72 100644
--- a/versioned_docs/version-v9/api/tab-button.md
+++ b/versioned_docs/version-v9/api/tab-button.mdx
@@ -16,9 +16,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-A tab button is a UI component that is placed inside of a [tab bar](tab-bar.md). The tab button can specify the layout of the icon and label and connect to a [tab view](tab.md).
+A tab button is a UI component that is placed inside of a [tab bar](tab-bar.mdx). The tab button can specify the layout of the icon and label and connect to a [tab view](tab.mdx).
 
-Refer to the [tabs documentation](tabs.md) for more details on configuring tabs.
+Refer to the [tabs documentation](tabs.mdx) for more details on configuring tabs.
 
 ## Usage
 
diff --git a/versioned_docs/version-v9/api/tab.md b/versioned_docs/version-v9/api/tab.mdx
similarity index 67%
rename from versioned_docs/version-v9/api/tab.md
rename to versioned_docs/version-v9/api/tab.mdx
index 2ba6e5a86ce..2d2b669c372 100644
--- a/versioned_docs/version-v9/api/tab.md
+++ b/versioned_docs/version-v9/api/tab.mdx
@@ -21,17 +21,17 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-The tab component is a child component of [tabs](tabs.md). Each tab can contain a top level navigation stack for an app or a single view. An app can have many tabs, all with their own independent navigation.
+The tab component is a child component of [tabs](tabs.mdx). Each tab can contain a top level navigation stack for an app or a single view. An app can have many tabs, all with their own independent navigation.
 
 :::note
 
-Angular, React, and Vue can only use this component when the `ion-tabs` component is configured for [basic usage](./tabs.md#basic-usage). When setting up tabs with routing, the `ion-tab` component cannot be used.
+Angular, React, and Vue can only use this component when the `ion-tabs` component is configured for [basic usage](./tabs.mdx#basic-usage). When setting up tabs with routing, the `ion-tab` component cannot be used.
 
-In JavaScript, this component can be used with the `ion-tabs` component configured for either [basic usage](./tabs.md#basic-usage) or [usage with router](./tabs.md#usage-with-router).
+In JavaScript, this component can be used with the `ion-tabs` component configured for either [basic usage](./tabs.mdx#basic-usage) or [usage with router](./tabs.mdx#usage-with-router).
 
 :::
 
-Refer to the [tabs documentation](tabs.md) for more details on configuring tabs.
+Refer to the [tabs documentation](tabs.mdx) for more details on configuring tabs.
 
 ## Properties
 
diff --git a/versioned_docs/version-v9/api/tabs.md b/versioned_docs/version-v9/api/tabs.mdx
similarity index 97%
rename from versioned_docs/version-v9/api/tabs.md
rename to versioned_docs/version-v9/api/tabs.mdx
index 89005f7e52f..5d9ba22b39b 100644
--- a/versioned_docs/version-v9/api/tabs.md
+++ b/versioned_docs/version-v9/api/tabs.mdx
@@ -22,7 +22,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 <EncapsulationPill type="shadow" />
 
 Tabs are a top level navigation component to implement a tab-based navigation.
-The component is a container of individual [Tab](tab.md) components.
+The component is a container of individual [Tab](tab.mdx) components.
 
 The `ion-tabs` component does not have any styling and works as a router outlet in order to handle navigation. It does not provide any UI feedback or mechanism to switch between tabs. In order to do so, an `ion-tab-bar` should be provided as a direct child of `ion-tabs`.
 
diff --git a/versioned_docs/version-v9/api/text.md b/versioned_docs/version-v9/api/text.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/text.md
rename to versioned_docs/version-v9/api/text.mdx
diff --git a/versioned_docs/version-v9/api/textarea.md b/versioned_docs/version-v9/api/textarea.mdx
similarity index 95%
rename from versioned_docs/version-v9/api/textarea.md
rename to versioned_docs/version-v9/api/textarea.mdx
index f1c7ee575f5..6a405205f63 100644
--- a/versioned_docs/version-v9/api/textarea.md
+++ b/versioned_docs/version-v9/api/textarea.mdx
@@ -125,9 +125,9 @@ Note that this feature is considered experimental because it relies on a simulat
 
 :::note
 
-In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. Refer to the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
+In most cases, [Icon](./icon.mdx) components placed in these slots should have `aria-hidden="true"`. Refer to the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
 
-If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to.
+If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.mdx). This ensures that the content can be tabbed to.
 
 :::
 
diff --git a/versioned_docs/version-v9/api/thumbnail.md b/versioned_docs/version-v9/api/thumbnail.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/thumbnail.md
rename to versioned_docs/version-v9/api/thumbnail.mdx
diff --git a/versioned_docs/version-v9/api/title.md b/versioned_docs/version-v9/api/title.mdx
similarity index 96%
rename from versioned_docs/version-v9/api/title.md
rename to versioned_docs/version-v9/api/title.mdx
index 674544af4c3..3f9d36b425c 100644
--- a/versioned_docs/version-v9/api/title.md
+++ b/versioned_docs/version-v9/api/title.mdx
@@ -45,7 +45,7 @@ import CollapsibleLargeTitle from '@site/static/usage/v9/title/collapsible-large
 
 ### Collapsible Buttons
 
-The [buttons](./buttons.md) component can be used with the [`collapse`](./buttons.md#collapse) property to additionally display in the header as the toolbar is collapsed.
+The [buttons](./buttons.mdx) component can be used with the [`collapse`](./buttons.mdx#collapse) property to additionally display in the header as the toolbar is collapsed.
 
 import CollapsibleLargeTitleButtons from '@site/static/usage/v9/title/collapsible-large-title/buttons/index.mdx';
 
diff --git a/versioned_docs/version-v9/api/toast.md b/versioned_docs/version-v9/api/toast.mdx
similarity index 96%
rename from versioned_docs/version-v9/api/toast.md
rename to versioned_docs/version-v9/api/toast.mdx
index 3be1dc7d4e8..41e1fb303c7 100644
--- a/versioned_docs/version-v9/api/toast.md
+++ b/versioned_docs/version-v9/api/toast.mdx
@@ -70,7 +70,7 @@ Toasts can be positioned at the top, bottom or middle of the viewport. The posit
 
 ### Relative Positioning
 
-If a toast is presented alongside navigation elements such as a header, footer, or [FAB](./fab.md), the toast may overlap these elements by default. This can be fixed using the `positionAnchor` property, which takes either an element reference or an ID. The toast will be positioned relative to the chosen element, appearing below it when using `position="top"` or above it when using `position="bottom"`. When using `position="middle"`, the `positionAnchor` property is ignored.
+If a toast is presented alongside navigation elements such as a header, footer, or [FAB](./fab.mdx), the toast may overlap these elements by default. This can be fixed using the `positionAnchor` property, which takes either an element reference or an ID. The toast will be positioned relative to the chosen element, appearing below it when using `position="top"` or above it when using `position="bottom"`. When using `position="middle"`, the `positionAnchor` property is ignored.
 
 import PositionAnchor from '@site/static/usage/v9/toast/position-anchor/index.mdx';
 
@@ -94,7 +94,7 @@ import StackedPlayground from '@site/static/usage/v9/toast/layout/index.mdx';
 
 ## Icons
 
-An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an [Alert](alert.md) instead.
+An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an [Alert](alert.mdx) instead.
 
 import IconPlayground from '@site/static/usage/v9/toast/icon/index.mdx';
 
diff --git a/versioned_docs/version-v9/api/toggle.md b/versioned_docs/version-v9/api/toggle.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/toggle.md
rename to versioned_docs/version-v9/api/toggle.mdx
diff --git a/versioned_docs/version-v9/api/toolbar.md b/versioned_docs/version-v9/api/toolbar.mdx
similarity index 100%
rename from versioned_docs/version-v9/api/toolbar.md
rename to versioned_docs/version-v9/api/toolbar.mdx
diff --git a/versioned_docs/version-v9/cli.md b/versioned_docs/version-v9/cli.mdx
similarity index 100%
rename from versioned_docs/version-v9/cli.md
rename to versioned_docs/version-v9/cli.mdx
diff --git a/versioned_docs/version-v9/cli/configuration.md b/versioned_docs/version-v9/cli/configuration.mdx
similarity index 98%
rename from versioned_docs/version-v9/cli/configuration.md
rename to versioned_docs/version-v9/cli/configuration.mdx
index 18e0d8c9250..7bebbae6846 100644
--- a/versioned_docs/version-v9/cli/configuration.md
+++ b/versioned_docs/version-v9/cli/configuration.mdx
@@ -52,7 +52,7 @@ Each Ionic project has a project configuration file, usually at the project's ro
 The CLI will look for the following environment variables:
 
 - `IONIC_CONFIG_DIRECTORY`: The directory of the global CLI config. Defaults to `~/.ionic`.
-- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. Refer to [Using a Proxy](using-a-proxy.md).
+- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. Refer to [Using a Proxy](using-a-proxy.mdx).
 - `IONIC_TOKEN`: Automatically authenticates with [Appflow](https://ionic.io/appflow).
 
 ## Flags
@@ -119,7 +119,7 @@ module.exports = function (ctx) {
 
 <small>_Available in CLI 6.2.0+_</small>
 
-The Ionic CLI supports a multi-app configuration setup, which involves multiple Ionic apps and shared code within a single repository, or [monorepo](../reference/glossary.md#monorepo).
+The Ionic CLI supports a multi-app configuration setup, which involves multiple Ionic apps and shared code within a single repository, or [monorepo](../reference/glossary.mdx#monorepo).
 
 :::note
 
diff --git a/docs/cli/livereload.md b/versioned_docs/version-v9/cli/livereload.mdx
similarity index 96%
rename from docs/cli/livereload.md
rename to versioned_docs/version-v9/cli/livereload.mdx
index fe4d0c37438..db6b96ff5fb 100644
--- a/docs/cli/livereload.md
+++ b/versioned_docs/version-v9/cli/livereload.mdx
@@ -1,6 +1,6 @@
 # Live Reload
 
-Using the Live Reload option will reload the browser or [Web View](../core-concepts/webview.md) when you change your app's code in your development environment. This is particularly useful for developing using hardware devices.
+Using the Live Reload option will reload the browser or [Web View](../core-concepts/webview.mdx) when you change your app's code in your development environment. This is particularly useful for developing using hardware devices.
 
 ## Terms
 
diff --git a/versioned_docs/version-v9/cli/using-a-proxy.md b/versioned_docs/version-v9/cli/using-a-proxy.mdx
similarity index 100%
rename from versioned_docs/version-v9/cli/using-a-proxy.md
rename to versioned_docs/version-v9/cli/using-a-proxy.mdx
diff --git a/docs/components.md b/versioned_docs/version-v9/components.mdx
similarity index 99%
rename from docs/components.md
rename to versioned_docs/version-v9/components.mdx
index 112e0bd0848..01d153f89f1 100644
--- a/docs/components.md
+++ b/versioned_docs/version-v9/components.mdx
@@ -19,7 +19,7 @@ import DocsCards from '@components/global/DocsCards';
   `}</style>
 </head>
 
-Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you're familiar with the basics, refer to the [API Index](api.md) for a complete list of each component and sub-component.
+Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you're familiar with the basics, refer to the [API Index](api.mdx) for a complete list of each component and sub-component.
 
 <intro-end />
 
diff --git a/versioned_docs/version-v9/contributing/coc.md b/versioned_docs/version-v9/contributing/coc.mdx
similarity index 100%
rename from versioned_docs/version-v9/contributing/coc.md
rename to versioned_docs/version-v9/contributing/coc.mdx
diff --git a/versioned_docs/version-v9/contributing/how-to-contribute.md b/versioned_docs/version-v9/contributing/how-to-contribute.mdx
similarity index 99%
rename from versioned_docs/version-v9/contributing/how-to-contribute.md
rename to versioned_docs/version-v9/contributing/how-to-contribute.mdx
index 7ea536dab28..1e510e34cff 100644
--- a/versioned_docs/version-v9/contributing/how-to-contribute.md
+++ b/versioned_docs/version-v9/contributing/how-to-contribute.mdx
@@ -8,7 +8,7 @@ Thanks for the interest in contributing to Ionic Framework!
 
 ## Contributing Etiquette
 
-Please refer to the [Contributor Code of Conduct](coc.md) for information on the rules of conduct.
+Please refer to the [Contributor Code of Conduct](coc.mdx) for information on the rules of conduct.
 
 ## Creating an Issue
 
diff --git a/docs/core-concepts/cross-platform.md b/versioned_docs/version-v9/core-concepts/cross-platform.mdx
similarity index 93%
rename from docs/core-concepts/cross-platform.md
rename to versioned_docs/version-v9/core-concepts/cross-platform.mdx
index 7b49f3b00a1..00763be7f28 100644
--- a/docs/core-concepts/cross-platform.md
+++ b/versioned_docs/version-v9/core-concepts/cross-platform.mdx
@@ -12,7 +12,7 @@ In a native application, it's common to make API calls to communicate with the d
 
 ### Ionic Native
 
-[Ionic Native](../native.md) has its own internal logic to detect if it is inside of a native environment. Instead of throwing a runtime error, it will print a warning if it is not a native environment and there are no Cordova plugins available. The app won’t break and it will continue to work, although without the native functionality.
+[Ionic Native](../native.mdx) has its own internal logic to detect if it is inside of a native environment. Instead of throwing a runtime error, it will print a warning if it is not a native environment and there are no Cordova plugins available. The app won’t break and it will continue to work, although without the native functionality.
 
 ### Platform Detection
 
@@ -67,7 +67,7 @@ This will render 5 items with a width of 100% each. This may look great on a pho
 
 <img src={require('@site/static/img/building/cross-platform-items.png').default} />
 
-To improve this experience, we can wrap the items in a [Grid](../api/grid.md) component. The view can be easily rewritten into something more usable on larger screens:
+To improve this experience, we can wrap the items in a [Grid](../api/grid.mdx) component. The view can be easily rewritten into something more usable on larger screens:
 
 ```html
 <ion-grid>
@@ -149,7 +149,7 @@ There’s a lot going on in the example above. These are the key points:
 
 - The `size` attribute can have a breakpoint added to it, `size-{breakpoint}`. This value sets the size for the specified breakpoint and above.
 
-For more information on customizing with grid, refer to the [Grid](../api/grid.md) documentation.
+For more information on customizing with grid, refer to the [Grid](../api/grid.mdx) documentation.
 
 ## Storage
 
diff --git a/versioned_docs/version-v8/core-concepts/fundamentals.md b/versioned_docs/version-v9/core-concepts/fundamentals.mdx
similarity index 84%
rename from versioned_docs/version-v8/core-concepts/fundamentals.md
rename to versioned_docs/version-v9/core-concepts/fundamentals.mdx
index 8f4772ac565..6630422a917 100644
--- a/versioned_docs/version-v8/core-concepts/fundamentals.md
+++ b/versioned_docs/version-v9/core-concepts/fundamentals.mdx
@@ -15,13 +15,13 @@ For those completely new to Ionic app development, it can be helpful to get a hi
 
 ## UI Components
 
-Ionic Framework is a library of UI Components, which are reusable elements that serve as the building blocks for an application. Ionic Components are built with [web standards](../reference/glossary.md#web-standards) using HTML, CSS, and JavaScript. Though the components are pre-built, they're designed from the ground up to be highly customizable so apps can make each component their own, allowing each app to have its own look and feel. More specifically, Ionic components can be easily themed to globally change appearance across an entire app. For more information about customizing the look, please refer to [Theming](../theming/basics.md).
+Ionic Framework is a library of UI Components, which are reusable elements that serve as the building blocks for an application. Ionic Components are built with [web standards](../reference/glossary.mdx#web-standards) using HTML, CSS, and JavaScript. Though the components are pre-built, they're designed from the ground up to be highly customizable so apps can make each component their own, allowing each app to have its own look and feel. More specifically, Ionic components can be easily themed to globally change appearance across an entire app. For more information about customizing the look, please refer to [Theming](../theming/basics.mdx).
 
 ## Adaptive Styling
 
 Adaptive Styling is a built-in feature of Ionic Framework which allows app developers to use the same code base for multiple platforms. Every Ionic component adapts its look to the platform on which the app is running on. For example, Apple devices, such as the iPhone and iPad, use Apple's own [iOS design language](https://www.apple.com/ios). Similarly, Android devices use Google's design language called [Material Design](https://material.io/guidelines/).
 
-By making subtle design changes between the platforms, users are provided with a familiar app experience. An Ionic app downloaded from Apple's App Store will get the iOS theme, while an Ionic app downloaded from Android's Play Store will get the Material Design theme. For the apps that are viewed as a Progressive Web App (PWA) from a browser, Ionic will default to using the Material Design theme. Additionally, deciding which platform to use in certain scenarios is entirely configurable. More information about adaptive styling can be found in [Theming](../theming/basics.md).
+By making subtle design changes between the platforms, users are provided with a familiar app experience. An Ionic app downloaded from Apple's App Store will get the iOS theme, while an Ionic app downloaded from Android's Play Store will get the Material Design theme. For the apps that are viewed as a Progressive Web App (PWA) from a browser, Ionic will default to using the Material Design theme. Additionally, deciding which platform to use in certain scenarios is entirely configurable. More information about adaptive styling can be found in [Theming](../theming/basics.mdx).
 
 ## Navigation
 
@@ -38,19 +38,19 @@ For apps that are built with Angular and `@ionic/angular`, we recommend using th
 
 An amazing feature of apps built with web technologies (such as Ionic apps!) is that it can run on virtually any platform: desktop computers, phones, tablets, cars, refrigerators, and more! The same code base for Ionic apps can work on many platforms because it is based on web standards and common APIs that are shared across these platforms.
 
-One of the most common use cases for Ionic is to build an app which can be downloaded from both the [App Store](https://www.apple.com/ios/app-store/) and [Play Store](https://play.google.com/). Both iOS and Android software development kits (SDKs) provide [Web Views](webview.md) which render any Ionic app, while still allowing for _full_ Native SDK access.
+One of the most common use cases for Ionic is to build an app which can be downloaded from both the [App Store](https://www.apple.com/ios/app-store/) and [Play Store](https://play.google.com/). Both iOS and Android software development kits (SDKs) provide [Web Views](webview.mdx) which render any Ionic app, while still allowing for _full_ Native SDK access.
 
 Projects such as [Capacitor](https://capacitorjs.com/) and [Cordova](https://cordova.apache.org/) are commonly used to give Ionic apps this access to Native SDKs. This means developers can quickly build out an app using common web development tools, and still have access to native features such as the device's accelerometer, camera, GPS, and more.
 
 ## Theming
 
-At the core, Ionic Framework is built using [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) which allows us to take advantage of the flexibility that [CSS properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) provide. This makes it incredibly easy to design an app that looks great while following the web standard. We provide a set of colors so developers can have some great defaults, but we encourage overriding them to create designs that match a brand, company or a desired color palette. Everything from the background color of an application to the text color is fully customizable. More information on app theming can be found in [Theming](../theming/basics.md).
+At the core, Ionic Framework is built using [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) which allows us to take advantage of the flexibility that [CSS properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) provide. This makes it incredibly easy to design an app that looks great while following the web standard. We provide a set of colors so developers can have some great defaults, but we encourage overriding them to create designs that match a brand, company or a desired color palette. Everything from the background color of an application to the text color is fully customizable. More information on app theming can be found in [Theming](../theming/basics.mdx).
 
 ## Events
 
 Many Ionic components use [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) to inform developers of important state changes in the components. For example, an `ion-datetime` component will emit `ionChange` whenever the selected date has changed.
 
-Developers can use standard events such as `click` as they normally would. However, many events emitted within a component's [shadow root](../reference/glossary.md#shadow) will be [retargeted](https://dom.spec.whatwg.org/#retarget) to the host element. This may result in multiple `click` handlers executing even if the user only clicked once. As a result, developers should rely on Ionic's events to be properly informed of state changes on Ionic components. Ionic's events are prefixed with `ion` to avoid collisions with standard events. Each component's documentation page has a list of available events that developers can listen for in their applications.
+Developers can use standard events such as `click` as they normally would. However, many events emitted within a component's [shadow root](../reference/glossary.mdx#shadow) will be [retargeted](https://dom.spec.whatwg.org/#retarget) to the host element. This may result in multiple `click` handlers executing even if the user only clicked once. As a result, developers should rely on Ionic's events to be properly informed of state changes on Ionic components. Ionic's events are prefixed with `ion` to avoid collisions with standard events. Each component's documentation page has a list of available events that developers can listen for in their applications.
 
 ## Properties
 
diff --git a/versioned_docs/version-v8/core-concepts/webview.md b/versioned_docs/version-v9/core-concepts/webview.mdx
similarity index 80%
rename from versioned_docs/version-v8/core-concepts/webview.md
rename to versioned_docs/version-v9/core-concepts/webview.mdx
index f535acefe2d..38aaa053ce6 100644
--- a/versioned_docs/version-v8/core-concepts/webview.md
+++ b/versioned_docs/version-v9/core-concepts/webview.mdx
@@ -12,13 +12,13 @@ title: Web View
 
 Web Views power web apps on native devices.
 
-The Web View is automatically provided for apps integrated with [Capacitor](../reference/glossary.md#capacitor).
+The Web View is automatically provided for apps integrated with [Capacitor](../reference/glossary.mdx#capacitor).
 
-For [Cordova](../reference/glossary.md#cordova), Ionic maintains a [Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview). The plugin is provided by default when using the Ionic CLI.
+For [Cordova](../reference/glossary.mdx#cordova), Ionic maintains a [Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview). The plugin is provided by default when using the Ionic CLI.
 
 ## What is a Web View?
 
-Ionic apps are built using [web technologies](../reference/glossary.md#web-standards) and are rendered using Web Views, which are a full screen and full-powered web browser.
+Ionic apps are built using [web technologies](../reference/glossary.mdx#web-standards) and are rendered using Web Views, which are a full screen and full-powered web browser.
 
 Modern Web Views offer many built-in [HTML5 APIs](https://whatwebcando.today) for hardware functionality such as cameras, sensors, GPS, speakers, and Bluetooth, but sometimes it may also be necessary to access platform-specific hardware APIs. In Ionic apps, hardware APIs can be accessed through a bridge layer, typically by using native plugins which expose JavaScript APIs.
 
@@ -28,7 +28,7 @@ The Ionic Web View plugin is specialized for modern JavaScript apps. For both iO
 
 ### CORS
 
-Web Views enforce [CORS](../reference/glossary.md#cors), so it's important that external services properly handle cross-origin requests. Refer to the [CORS FAQs](../troubleshooting/cors.md) for information on dealing with CORS in Ionic apps.
+Web Views enforce [CORS](../reference/glossary.mdx#cors), so it's important that external services properly handle cross-origin requests. Refer to the [CORS FAQs](../troubleshooting/cors.mdx) for information on dealing with CORS in Ionic apps.
 
 ### File Protocol
 
diff --git a/versioned_docs/version-v9/core-concepts/what-are-progressive-web-apps.md b/versioned_docs/version-v9/core-concepts/what-are-progressive-web-apps.mdx
similarity index 100%
rename from versioned_docs/version-v9/core-concepts/what-are-progressive-web-apps.md
rename to versioned_docs/version-v9/core-concepts/what-are-progressive-web-apps.mdx
diff --git a/versioned_docs/version-v9/deployment/app-store.md b/versioned_docs/version-v9/deployment/app-store.mdx
similarity index 100%
rename from versioned_docs/version-v9/deployment/app-store.md
rename to versioned_docs/version-v9/deployment/app-store.mdx
diff --git a/versioned_docs/version-v9/deployment/progressive-web-app.md b/versioned_docs/version-v9/deployment/progressive-web-app.mdx
similarity index 94%
rename from versioned_docs/version-v9/deployment/progressive-web-app.md
rename to versioned_docs/version-v9/deployment/progressive-web-app.mdx
index 1fa0dbebd4a..b1682f5c56d 100644
--- a/versioned_docs/version-v9/deployment/progressive-web-app.md
+++ b/versioned_docs/version-v9/deployment/progressive-web-app.mdx
@@ -14,7 +14,7 @@ import DocsCards from '@components/global/DocsCards';
   />
 </head>
 
-Because Ionic Apps are built with web technologies, they can run just as well as a Progressive Web App as they can a native app. Not sure what PWAs are? Check out Ionic's [PWA Overview](https://ionicframework.com/pwa) or the [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.md) page for more info.
+Because Ionic Apps are built with web technologies, they can run just as well as a Progressive Web App as they can a native app. Not sure what PWAs are? Check out Ionic's [PWA Overview](https://ionicframework.com/pwa) or the [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.mdx) page for more info.
 
 For the frameworks Ionic supports, we've created dedicated guides that go into more detail. Below are links for Angular, React, and Vue.
 
diff --git a/versioned_docs/version-v9/developer-resources/courses.md b/versioned_docs/version-v9/developer-resources/courses.mdx
similarity index 100%
rename from versioned_docs/version-v9/developer-resources/courses.md
rename to versioned_docs/version-v9/developer-resources/courses.mdx
diff --git a/versioned_docs/version-v8/developer-resources/guides.md b/versioned_docs/version-v9/developer-resources/guides.mdx
similarity index 76%
rename from versioned_docs/version-v8/developer-resources/guides.md
rename to versioned_docs/version-v9/developer-resources/guides.mdx
index dbe6d9477b8..c0590b83684 100644
--- a/versioned_docs/version-v8/developer-resources/guides.md
+++ b/versioned_docs/version-v9/developer-resources/guides.mdx
@@ -1,9 +1,9 @@
 # Guides
 
-### [Your First Ionic App - v3](guides/first-app-v3/intro.md)
+### [Your First Ionic App - v3](guides/first-app-v3/intro.mdx)
 
 Follow along as we create a working Photo Gallery app using Ionic Framework v3 and Appflow.
 
-### [Your First Ionic 4 App - Angular and Cordova](guides/first-app-v4/intro.md)
+### [Your First Ionic 4 App - Angular and Cordova](guides/first-app-v4/intro.mdx)
 
 Follow along as we create a working Photo Gallery app using Ionic Framework v4 and Cordova.
diff --git a/versioned_docs/version-v9/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md b/versioned_docs/version-v9/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx
similarity index 100%
rename from versioned_docs/version-v9/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md
rename to versioned_docs/version-v9/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx
diff --git a/versioned_docs/version-v9/developer-resources/guides/first-app-v3/intro.md b/versioned_docs/version-v9/developer-resources/guides/first-app-v3/intro.mdx
similarity index 100%
rename from versioned_docs/version-v9/developer-resources/guides/first-app-v3/intro.md
rename to versioned_docs/version-v9/developer-resources/guides/first-app-v3/intro.mdx
diff --git a/versioned_docs/version-v9/developer-resources/guides/first-app-v3/ios-android-camera.md b/versioned_docs/version-v9/developer-resources/guides/first-app-v3/ios-android-camera.mdx
similarity index 100%
rename from versioned_docs/version-v9/developer-resources/guides/first-app-v3/ios-android-camera.md
rename to versioned_docs/version-v9/developer-resources/guides/first-app-v3/ios-android-camera.mdx
diff --git a/versioned_docs/version-v8/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md b/versioned_docs/version-v9/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx
similarity index 94%
rename from versioned_docs/version-v8/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
rename to versioned_docs/version-v9/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx
index f6647f88a5a..ff1d1fcff85 100644
--- a/versioned_docs/version-v8/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
+++ b/versioned_docs/version-v9/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx
@@ -70,7 +70,7 @@ Next, create a local, native build of the app.
 
 ## Android Builds
 
-Follow the [Android Setup instructions](../../../developing/android.md), which includes installing Java 8 and Android Studio on your machine. Then, in your Terminal run:
+Follow the [Android Setup instructions](../../../developing/android.mdx), which includes installing Java 8 and Android Studio on your machine. Then, in your Terminal run:
 
 ```shell
 ionic cordova build android --prod
@@ -80,13 +80,13 @@ This will generate a unsigned debug build (meaning the app can run on any Androi
 
 ## iOS Builds
 
-iOS is [a bit trickier to set up](../../../developing/ios.md) than Android and requires a Mac computer. Ensure XCode is updated to the latest version and set up a development team. Then, in your Terminal, run:
+iOS is [a bit trickier to set up](../../../developing/ios.mdx) than Android and requires a Mac computer. Ensure XCode is updated to the latest version and set up a development team. Then, in your Terminal, run:
 
 ```shell
 ionic cordova build ios --prod
 ```
 
-Then, continue to follow the [app store deployment instructions](../../../deployment/app-store.md) regarding signing certificates, etc. With a native version of your app built, let’s copy it to your device of choice.
+Then, continue to follow the [app store deployment instructions](../../../deployment/app-store.mdx) regarding signing certificates, etc. With a native version of your app built, let’s copy it to your device of choice.
 
 ## Add the Native App to Your Local Device
 
diff --git a/versioned_docs/version-v9/developer-resources/guides/first-app-v3/theming.md b/versioned_docs/version-v9/developer-resources/guides/first-app-v3/theming.mdx
similarity index 100%
rename from versioned_docs/version-v9/developer-resources/guides/first-app-v3/theming.md
rename to versioned_docs/version-v9/developer-resources/guides/first-app-v3/theming.mdx
diff --git a/versioned_docs/version-v9/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md b/versioned_docs/version-v9/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx
similarity index 100%
rename from versioned_docs/version-v9/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
rename to versioned_docs/version-v9/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx
diff --git a/versioned_docs/version-v9/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md b/versioned_docs/version-v9/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx
similarity index 100%
rename from versioned_docs/version-v9/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md
rename to versioned_docs/version-v9/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx
diff --git a/versioned_docs/version-v9/developer-resources/guides/first-app-v4/intro.md b/versioned_docs/version-v9/developer-resources/guides/first-app-v4/intro.mdx
similarity index 98%
rename from versioned_docs/version-v9/developer-resources/guides/first-app-v4/intro.md
rename to versioned_docs/version-v9/developer-resources/guides/first-app-v4/intro.mdx
index 8c016a94057..a2481a35344 100644
--- a/versioned_docs/version-v9/developer-resources/guides/first-app-v4/intro.md
+++ b/versioned_docs/version-v9/developer-resources/guides/first-app-v4/intro.mdx
@@ -29,7 +29,7 @@ npm install -g @ionic/cli cordova
 
 The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
 
-Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../../../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../../../developing/tips.mdx#resolving-permission-errors) for more information.
 
 :::
 
diff --git a/versioned_docs/version-v9/developer-resources/guides/first-app-v4/ios-android-camera.md b/versioned_docs/version-v9/developer-resources/guides/first-app-v4/ios-android-camera.mdx
similarity index 98%
rename from versioned_docs/version-v9/developer-resources/guides/first-app-v4/ios-android-camera.md
rename to versioned_docs/version-v9/developer-resources/guides/first-app-v4/ios-android-camera.mdx
index 01b67eb109a..8e1c8b15d11 100644
--- a/versioned_docs/version-v9/developer-resources/guides/first-app-v4/ios-android-camera.md
+++ b/versioned_docs/version-v9/developer-resources/guides/first-app-v4/ios-android-camera.mdx
@@ -13,7 +13,7 @@ $ ionic cordova platform add android
 
 These commands will create a `config.xml` file, which is used to define Cordova iOS and Android settings. Cordova reads this file and applies each setting as it builds each native app binary.
 
-There are more steps to configure [iOS](../../../developing/ios.md) and [Android](../../../developing/android.md) native tooling.
+There are more steps to configure [iOS](../../../developing/ios.mdx) and [Android](../../../developing/android.mdx) native tooling.
 
 Much better! Now we can add the camera functionality. By the way, you can find reference code for this [on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4).
 
diff --git a/docs/developer-resources/guides/first-app-v4/theming.md b/versioned_docs/version-v9/developer-resources/guides/first-app-v4/theming.mdx
similarity index 92%
rename from docs/developer-resources/guides/first-app-v4/theming.md
rename to versioned_docs/version-v9/developer-resources/guides/first-app-v4/theming.mdx
index c185f6761c1..c55d591b308 100644
--- a/docs/developer-resources/guides/first-app-v4/theming.md
+++ b/versioned_docs/version-v9/developer-resources/guides/first-app-v4/theming.mdx
@@ -27,7 +27,7 @@ By changing these variables here and there, you can easily update the entire the
 }
 ```
 
-The easiest and most powerful way to create custom color palettes for your app’s UI is Ionic's [Color Generator tool](../../../theming/color-generator.md). As you change a color’s hex values, the embedded demo app automatically reflects the new colors. When you've finished making changes, simply copy and paste the generated code directly into your Ionic project.
+The easiest and most powerful way to create custom color palettes for your app’s UI is Ionic's [Color Generator tool](../../../theming/color-generator.mdx). As you change a color’s hex values, the embedded demo app automatically reflects the new colors. When you've finished making changes, simply copy and paste the generated code directly into your Ionic project.
 
 But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to:
 
diff --git a/versioned_docs/version-v9/developer-resources/posts.md b/versioned_docs/version-v9/developer-resources/posts.mdx
similarity index 100%
rename from versioned_docs/version-v9/developer-resources/posts.md
rename to versioned_docs/version-v9/developer-resources/posts.mdx
diff --git a/docs/developer-resources/tools.md b/versioned_docs/version-v9/developer-resources/tools.mdx
similarity index 92%
rename from docs/developer-resources/tools.md
rename to versioned_docs/version-v9/developer-resources/tools.mdx
index 6fc030a24eb..c38ba90eef8 100644
--- a/docs/developer-resources/tools.md
+++ b/versioned_docs/version-v9/developer-resources/tools.mdx
@@ -12,7 +12,7 @@ Quickly get started with a new Ionic app entirely in the browser!
 
 Check out the features that make working with TypeScript amazing.
 
-### [Glossary](../reference/glossary.md)
+### [Glossary](../reference/glossary.mdx)
 
 A list of common terms you'll encounter while developing in Ionic.
 
diff --git a/versioned_docs/version-v9/developer-resources/videos.md b/versioned_docs/version-v9/developer-resources/videos.mdx
similarity index 100%
rename from versioned_docs/version-v9/developer-resources/videos.md
rename to versioned_docs/version-v9/developer-resources/videos.mdx
diff --git a/versioned_docs/version-v9/developing/android.md b/versioned_docs/version-v9/developing/android.mdx
similarity index 100%
rename from versioned_docs/version-v9/developing/android.md
rename to versioned_docs/version-v9/developing/android.mdx
diff --git a/versioned_docs/version-v9/developing/config.md b/versioned_docs/version-v9/developing/config.mdx
similarity index 99%
rename from versioned_docs/version-v9/developing/config.md
rename to versioned_docs/version-v9/developing/config.mdx
index 300dcfa40fa..d19bddf32b9 100644
--- a/versioned_docs/version-v9/developing/config.md
+++ b/versioned_docs/version-v9/developing/config.mdx
@@ -13,7 +13,7 @@ The available config keys can be found in the [`IonicConfig`](#ionicconfig) inte
 
 The following example disables ripple effects and default the mode to Material Design:
 
-import GlobalExample from '@site/docs/developing/config/global/index.md';
+import GlobalExample from '@site/docs/developing/config/global/index.mdx';
 
 <GlobalExample />
 
@@ -21,7 +21,7 @@ import GlobalExample from '@site/docs/developing/config/global/index.md';
 
 Ionic Config is not reactive. Updating the config's value after the component has rendered will result in the previous value. It is recommended to use a component's properties instead of updating the config, when you require reactive values.
 
-import PerComponentExample from '@site/docs/developing/config/per-component/index.md';
+import PerComponentExample from '@site/docs/developing/config/per-component/index.mdx';
 
 <PerComponentExample />
 
@@ -31,7 +31,7 @@ Ionic Config can also be set on a per-platform basis. For example, this allows y
 
 In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser.
 
-import PerPlatformExample from '@site/docs/developing/config/per-platform/index.md';
+import PerPlatformExample from '@site/docs/developing/config/per-platform/index.mdx';
 
 <PerPlatformExample />
 
@@ -39,7 +39,7 @@ import PerPlatformExample from '@site/docs/developing/config/per-platform/index.
 
 The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match:
 
-import PerPlatformFallbackExample from '@site/docs/developing/config/per-platform-overrides/index.md';
+import PerPlatformFallbackExample from '@site/docs/developing/config/per-platform-overrides/index.mdx';
 
 <PerPlatformFallbackExample />
 
@@ -47,7 +47,7 @@ import PerPlatformFallbackExample from '@site/docs/developing/config/per-platfor
 
 This final example allows you to accumulate a config object based upon different platform requirements.
 
-import PerPlatformOverridesExample from '@site/docs/developing/config/per-platform-fallback/index.md';
+import PerPlatformOverridesExample from '@site/docs/developing/config/per-platform-fallback/index.mdx';
 
 <PerPlatformOverridesExample />
 
diff --git a/versioned_docs/version-v9/developing/config/global/index.md b/versioned_docs/version-v9/developing/config/global/index.mdx
similarity index 100%
rename from versioned_docs/version-v9/developing/config/global/index.md
rename to versioned_docs/version-v9/developing/config/global/index.mdx
diff --git a/versioned_docs/version-v9/developing/config/per-component/index.md b/versioned_docs/version-v9/developing/config/per-component/index.mdx
similarity index 100%
rename from versioned_docs/version-v9/developing/config/per-component/index.md
rename to versioned_docs/version-v9/developing/config/per-component/index.mdx
diff --git a/versioned_docs/version-v9/developing/config/per-platform-fallback/index.md b/versioned_docs/version-v9/developing/config/per-platform-fallback/index.mdx
similarity index 100%
rename from versioned_docs/version-v9/developing/config/per-platform-fallback/index.md
rename to versioned_docs/version-v9/developing/config/per-platform-fallback/index.mdx
diff --git a/versioned_docs/version-v9/developing/config/per-platform-overrides/index.md b/versioned_docs/version-v9/developing/config/per-platform-overrides/index.mdx
similarity index 100%
rename from versioned_docs/version-v9/developing/config/per-platform-overrides/index.md
rename to versioned_docs/version-v9/developing/config/per-platform-overrides/index.mdx
diff --git a/versioned_docs/version-v9/developing/config/per-platform/index.md b/versioned_docs/version-v9/developing/config/per-platform/index.mdx
similarity index 100%
rename from versioned_docs/version-v9/developing/config/per-platform/index.md
rename to versioned_docs/version-v9/developing/config/per-platform/index.mdx
diff --git a/docs/developing/hardware-back-button.md b/versioned_docs/version-v9/developing/hardware-back-button.mdx
similarity index 97%
rename from docs/developing/hardware-back-button.md
rename to versioned_docs/version-v9/developing/hardware-back-button.mdx
index 1d4a1baabea..4a98543a4bb 100644
--- a/docs/developing/hardware-back-button.md
+++ b/versioned_docs/version-v9/developing/hardware-back-button.mdx
@@ -42,7 +42,7 @@ The table below shows how hardware back button support varies by environment.
 
 ### Hardware Back Button in a Browser or a PWA
 
-Ionic has experimental support for handling the hardware back button in a browser or a PWA by setting [`experimentalCloseWatcher: true` in the IonicConfig](./config.md). When this feature is enabled, Ionic will use the [Close Watcher API](https://github.com/WICG/close-watcher) to pass any close requests through the `ionBackButton` event. This includes pressing the hardware back button to navigate or the Escape key to dismiss a modal.
+Ionic has experimental support for handling the hardware back button in a browser or a PWA by setting [`experimentalCloseWatcher: true` in the IonicConfig](./config.mdx). When this feature is enabled, Ionic will use the [Close Watcher API](https://github.com/WICG/close-watcher) to pass any close requests through the `ionBackButton` event. This includes pressing the hardware back button to navigate or the Escape key to dismiss a modal.
 
 Chrome has support for Close Watcher starting in [Chrome 120](https://developer.chrome.com/blog/new-in-chrome-120).
 
diff --git a/versioned_docs/version-v9/developing/ios.md b/versioned_docs/version-v9/developing/ios.mdx
similarity index 100%
rename from versioned_docs/version-v9/developing/ios.md
rename to versioned_docs/version-v9/developing/ios.mdx
diff --git a/versioned_docs/version-v9/developing/keyboard.md b/versioned_docs/version-v9/developing/keyboard.mdx
similarity index 100%
rename from versioned_docs/version-v9/developing/keyboard.md
rename to versioned_docs/version-v9/developing/keyboard.mdx
diff --git a/versioned_docs/version-v9/developing/managing-focus.md b/versioned_docs/version-v9/developing/managing-focus.mdx
similarity index 100%
rename from versioned_docs/version-v9/developing/managing-focus.md
rename to versioned_docs/version-v9/developing/managing-focus.mdx
diff --git a/docs/developing/previewing.md b/versioned_docs/version-v9/developing/previewing.mdx
similarity index 94%
rename from docs/developing/previewing.md
rename to versioned_docs/version-v9/developing/previewing.mdx
index cf565f0590a..9aea2738ad5 100644
--- a/docs/developing/previewing.md
+++ b/versioned_docs/version-v9/developing/previewing.mdx
@@ -12,9 +12,9 @@ title: Previewing
 
 There are many different options to test native functionality depending on your target platforms and needs.
 
-- Run locally in a web browser (using [Platform Detection](../core-concepts/cross-platform.md) for native functionality)
-- [Deploy to iOS](ios.md)
-- [Deploy to Android](android.md)
+- Run locally in a web browser (using [Platform Detection](../core-concepts/cross-platform.mdx) for native functionality)
+- [Deploy to iOS](ios.mdx)
+- [Deploy to Android](android.mdx)
 
 ## Run Locally in a Web Browser
 
@@ -44,8 +44,8 @@ If the external link isn't listed on the terminal, then run `ionic serve --exter
 
 :::
 
-When implementing native functionality, use [Platform Detection](../core-concepts/cross-platform.md).
-When you're ready to test on a real device, refer to the guides for [iOS](ios.md) and [Android](android.md).
+When implementing native functionality, use [Platform Detection](../core-concepts/cross-platform.mdx).
+When you're ready to test on a real device, refer to the guides for [iOS](ios.mdx) and [Android](android.mdx).
 
 ## Simulating a Mobile Viewport
 
diff --git a/versioned_docs/version-v9/developing/scaffolding.md b/versioned_docs/version-v9/developing/scaffolding.mdx
similarity index 100%
rename from versioned_docs/version-v9/developing/scaffolding.md
rename to versioned_docs/version-v9/developing/scaffolding.mdx
diff --git a/versioned_docs/version-v9/developing/starting.md b/versioned_docs/version-v9/developing/starting.mdx
similarity index 100%
rename from versioned_docs/version-v9/developing/starting.md
rename to versioned_docs/version-v9/developing/starting.mdx
diff --git a/docs/developing/tips.md b/versioned_docs/version-v9/developing/tips.mdx
similarity index 98%
rename from docs/developing/tips.md
rename to versioned_docs/version-v9/developing/tips.mdx
index 1fc7c8a65b1..16a7292b819 100644
--- a/docs/developing/tips.md
+++ b/versioned_docs/version-v9/developing/tips.mdx
@@ -133,7 +133,7 @@ The iOS simulator enables testing and debugging of an app before it reaches an a
 
 Before it can be used, [Xcode](https://developer.apple.com/xcode/download/), Apple's IDE, must be installed.
 
-The [Ionic CLI](../cli.md) can then be used to run the app in the current directory on the simulator:
+The [Ionic CLI](../cli.mdx) can then be used to run the app in the current directory on the simulator:
 
 ```shell
 ionic cordova emulate ios -lc
diff --git a/docs/index.md b/versioned_docs/version-v9/index.mdx
similarity index 86%
rename from docs/index.md
rename to versioned_docs/version-v9/index.mdx
index dd59a621c8e..6537905d583 100644
--- a/docs/index.md
+++ b/versioned_docs/version-v9/index.mdx
@@ -22,9 +22,9 @@ import DocsCards from '@components/global/DocsCards';
   <meta property="og:url" content="https://ionicframework.com/docs" />
 </head>
 
-Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.md), [React](react/overview.md), and [Vue](vue/overview.md).
+Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.mdx), [React](react/overview.mdx), and [Vue](vue/overview.mdx).
 
-Get started building by [installing Ionic](intro/cli.md) or following our [First App Tutorial](intro/next.md#build-your-first-app) to learn the main concepts.
+Get started building by [installing Ionic](intro/cli.mdx) or following our [First App Tutorial](intro/next.mdx#build-your-first-app) to learn the main concepts.
 
 <intro-end />
 
@@ -58,11 +58,11 @@ Get started building by [installing Ionic](intro/cli.md) or following our [First
 
 ## Overview
 
-Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.md), [React](react/overview.md), or [Vue](vue/overview.md). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.md). If you’d like to learn more about Ionic before diving in, we [created a video](https://youtu.be/p3AN3igqiRc) to walk you through the basics.
+Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.mdx), [React](react/overview.mdx), or [Vue](vue/overview.mdx). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.mdx). If you’d like to learn more about Ionic before diving in, we [created a video](https://youtu.be/p3AN3igqiRc) to walk you through the basics.
 
 ### One codebase, running everywhere
 
-Ionic is the only mobile app stack that enables web developers to build apps for all major app stores and the mobile web from a single codebase. And with [Adaptive Styling](theming/platform-styles.md), Ionic apps look and feel at home on every device.
+Ionic is the only mobile app stack that enables web developers to build apps for all major app stores and the mobile web from a single codebase. And with [Adaptive Styling](theming/platform-styles.mdx), Ionic apps look and feel at home on every device.
 
 ### A focus on performance
 
@@ -84,7 +84,7 @@ Build and deploy apps that work across multiple platforms, such as native iOS, A
 
 ### Web Standards-based
 
-Ionic is built on top of reliable, [standardized web technologies](reference/glossary.md#web-standards): HTML, CSS, and JavaScript, using modern Web APIs such as Custom Elements and Shadow DOM. Because of this, Ionic components have a stable API, and aren't at the whim of a single platform vendor.
+Ionic is built on top of reliable, [standardized web technologies](reference/glossary.mdx#web-standards): HTML, CSS, and JavaScript, using modern Web APIs such as Custom Elements and Shadow DOM. Because of this, Ionic components have a stable API, and aren't at the whim of a single platform vendor.
 
 ### Beautiful Design
 
@@ -121,7 +121,7 @@ Support for other frameworks will be considered in future releases.
 
 ## Ionic CLI
 
-The official [Ionic CLI](cli.md), or Command Line Interface, is a tool that quickly scaffolds Ionic apps and provides a number of helpful commands to Ionic developers. In addition to installing and updating Ionic, the CLI comes with a built-in development server, build and debugging tools, and much more. If you are an [Appflow](#appflow) member, the CLI can be used to perform cloud builds and deployments, and administer your account.
+The official [Ionic CLI](cli.mdx), or Command Line Interface, is a tool that quickly scaffolds Ionic apps and provides a number of helpful commands to Ionic developers. In addition to installing and updating Ionic, the CLI comes with a built-in development server, build and debugging tools, and much more. If you are an [Appflow](#appflow) member, the CLI can be used to perform cloud builds and deployments, and administer your account.
 
 ## Appflow
 
diff --git a/versioned_docs/version-v8/intro/cdn.md b/versioned_docs/version-v9/intro/cdn.mdx
similarity index 99%
rename from versioned_docs/version-v8/intro/cdn.md
rename to versioned_docs/version-v9/intro/cdn.mdx
index adf8a7ceda7..868fcd99eab 100644
--- a/versioned_docs/version-v8/intro/cdn.md
+++ b/versioned_docs/version-v9/intro/cdn.mdx
@@ -116,7 +116,7 @@ It's recommended to use [jsdelivr](https://www.jsdelivr.com/) to access the Fram
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
 ```
 
-With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic [Global Stylesheets](/docs/layout/global-stylesheets.md).
+With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic [Global Stylesheets](/docs/layout/global-stylesheets.mdx).
 
 ## Ionicons CDN
 
diff --git a/versioned_docs/version-v9/intro/cli.md b/versioned_docs/version-v9/intro/cli.mdx
similarity index 79%
rename from versioned_docs/version-v9/intro/cli.md
rename to versioned_docs/version-v9/intro/cli.mdx
index 17222376c24..dc775f03b94 100644
--- a/versioned_docs/version-v9/intro/cli.md
+++ b/versioned_docs/version-v9/intro/cli.mdx
@@ -13,13 +13,13 @@ import AppWizard from '@components/page/intro/AppWizard';
   />
 </head>
 
-Ionic apps are created and developed primarily through the Ionic [command-line](../reference/glossary.md#cli) utility. The Ionic CLI is the preferred method of installation, as it offers a wide range of dev tools and help options along the way. It is also the main tool through which to run the app and connect it to other services, such as Appflow.
+Ionic apps are created and developed primarily through the Ionic [command-line](../reference/glossary.mdx#cli) utility. The Ionic CLI is the preferred method of installation, as it offers a wide range of dev tools and help options along the way. It is also the main tool through which to run the app and connect it to other services, such as Appflow.
 
 <AppWizard />
 
 ## Install the Ionic CLI
 
-Before proceeding, make sure your computer has [Node.js](../reference/glossary.md#node) installed. Refer to the [environment setup guide](environment.md) to prepare your machine.
+Before proceeding, make sure your computer has [Node.js](../reference/glossary.mdx#node) installed. Refer to the [environment setup guide](environment.mdx) to prepare your machine.
 
 Install the Ionic CLI with npm:
 
@@ -38,7 +38,7 @@ $ npm install -g @ionic/cli
 :::note
 
 The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
-Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information.
 
 :::
 
@@ -52,7 +52,7 @@ ionic start
 
 ![Three thumbnail previews of Ionic app templates: blank, tabs, and side menu.](/img/installation/start-app-thumbnails.png 'Ionic App Starter Templates')
 
-To learn more about starting Ionic apps, refer to the [Starting Guide](../developing/starting.md).
+To learn more about starting Ionic apps, refer to the [Starting Guide](../developing/starting.mdx).
 
 ## Run the App
 
@@ -63,4 +63,4 @@ $ cd myApp
 $ ionic serve
 ```
 
-There are a number of other ways to run an app, it's recommended to start with this workflow. To develop and test apps on devices and emulators, refer to the [Running an App Guide](../developing/previewing.md).
+There are a number of other ways to run an app, it's recommended to start with this workflow. To develop and test apps on devices and emulators, refer to the [Running an App Guide](../developing/previewing.mdx).
diff --git a/docs/intro/environment.md b/versioned_docs/version-v9/intro/environment.mdx
similarity index 86%
rename from docs/intro/environment.md
rename to versioned_docs/version-v9/intro/environment.mdx
index 468228b9d47..8f175c6c81c 100644
--- a/docs/intro/environment.md
+++ b/versioned_docs/version-v9/intro/environment.mdx
@@ -31,9 +31,9 @@ Git Bash (from [git-scm.com](https://git-scm.com)) does not support TTY interact
 
 ## Node & npm
 
-Almost all tooling for modern JavaScript projects is based in [Node.js](../reference/glossary.md#node). The [download page](https://nodejs.org/en/download/) has prebuilt installation packages for all platforms. We recommend selecting the LTS version to ensure best compatibility.
+Almost all tooling for modern JavaScript projects is based in [Node.js](../reference/glossary.mdx#node). The [download page](https://nodejs.org/en/download/) has prebuilt installation packages for all platforms. We recommend selecting the LTS version to ensure best compatibility.
 
-Node is bundled with [npm](../reference/glossary.md#npm), the package manager for JavaScript.
+Node is bundled with [npm](../reference/glossary.mdx#npm), the package manager for JavaScript.
 
 To verify the installation, open a new terminal window and run:
 
@@ -44,13 +44,13 @@ $ npm --version
 
 :::note
 
-Permission errors are common on macOS when installing global packages with `npm`. If you get an `EACCES` error, refer to [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors).
+Permission errors are common on macOS when installing global packages with `npm`. If you get an `EACCES` error, refer to [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors).
 
 :::
 
 ## Git
 
-Although not required, the version control system [Git](../reference/glossary.md#git) is highly recommended.
+Although not required, the version control system [Git](../reference/glossary.mdx#git) is highly recommended.
 
 Git is often accompanied by a Git Host, such as [GitHub](https://github.com/), in which case additional setup is required. Follow the tutorial from the Git Host's documentation to set up Git:
 
diff --git a/versioned_docs/version-v9/intro/first-app.md b/versioned_docs/version-v9/intro/first-app.mdx
similarity index 100%
rename from versioned_docs/version-v9/intro/first-app.md
rename to versioned_docs/version-v9/intro/first-app.mdx
diff --git a/versioned_docs/version-v9/intro/next.md b/versioned_docs/version-v9/intro/next.mdx
similarity index 100%
rename from versioned_docs/version-v9/intro/next.md
rename to versioned_docs/version-v9/intro/next.mdx
diff --git a/versioned_docs/version-v9/intro/vscode-extension.md b/versioned_docs/version-v9/intro/vscode-extension.mdx
similarity index 100%
rename from versioned_docs/version-v9/intro/vscode-extension.md
rename to versioned_docs/version-v9/intro/vscode-extension.mdx
diff --git a/versioned_docs/version-v9/javascript/overview.md b/versioned_docs/version-v9/javascript/overview.mdx
similarity index 100%
rename from versioned_docs/version-v9/javascript/overview.md
rename to versioned_docs/version-v9/javascript/overview.mdx
diff --git a/docs/javascript/quickstart.md b/versioned_docs/version-v9/javascript/quickstart.mdx
similarity index 95%
rename from docs/javascript/quickstart.md
rename to versioned_docs/version-v9/javascript/quickstart.mdx
index e12dd856c25..0f51f82b72a 100644
--- a/docs/javascript/quickstart.md
+++ b/versioned_docs/version-v9/javascript/quickstart.mdx
@@ -232,7 +232,7 @@ This creates a custom element called `home-page` that contains the layout for yo
 
 :::tip[Learn More]
 
-For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
+For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.mdx), [Toolbar](/docs/api/toolbar.mdx), [Title](/docs/api/title.mdx), and [Content](/docs/api/content.mdx) documentation.
 
 :::
 
@@ -252,7 +252,7 @@ At this point your browser should be displaying the Home page.
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.md) to navigate to another page. Update the `HomePage` component in `HomePage.js`:
+You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.mdx) to navigate to another page. Update the `HomePage` component in `HomePage.js`:
 
 ```js title="src/pages/HomePage.js"
 class HomePage extends HTMLElement {
@@ -307,7 +307,7 @@ class NewPage extends HTMLElement {
 customElements.define('new-page', NewPage);
 ```
 
-This creates a page with a [Back Button](/docs/api/back-button.md) in the [Toolbar](/docs/api/toolbar.md). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
+This creates a page with a [Back Button](/docs/api/back-button.mdx) in the [Toolbar](/docs/api/toolbar.mdx). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
 
 Next, update the `<script>` tag which imports the Home page in the `index.html` file to also import the New page:
 
@@ -332,7 +332,7 @@ When the button is clicked, Ionic's router will automatically navigate to the `/
 
 :::info
 
-Navigating can also be performed programmatically using `document.querySelector('ion-router').push('/new')`. Refer to the [Ionic Router documentation](/docs/api/router.md) for more information.
+Navigating can also be performed programmatically using `document.querySelector('ion-router').push('/new')`. Refer to the [Ionic Router documentation](/docs/api/router.mdx) for more information.
 
 :::
 
@@ -381,7 +381,7 @@ class NewPage extends HTMLElement {
 customElements.define('new-page', NewPage);
 ```
 
-For more information, refer to the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
+For more information, refer to the [Icon documentation](/docs/api/icon.mdx) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
 ## Call Component Methods
 
@@ -450,7 +450,7 @@ To call methods on Ionic components:
 1. Get a reference to the component element using `querySelector`
 2. Call the method directly on the element
 
-You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation.
+You can find available methods for each component in the [Methods](/docs/api/content.mdx#methods) section of their API documentation.
 
 ## Run on a Device
 
diff --git a/docs/layout/css-utilities.md b/versioned_docs/version-v9/layout/css-utilities.mdx
similarity index 99%
rename from docs/layout/css-utilities.md
rename to versioned_docs/version-v9/layout/css-utilities.mdx
index 7ae7bd3ed89..a2621f8cfa9 100644
--- a/docs/layout/css-utilities.md
+++ b/versioned_docs/version-v9/layout/css-utilities.mdx
@@ -14,7 +14,7 @@ Ionic Framework provides a set of CSS utility classes that can be used on any el
 
 :::important
 
-If your app was not started using an available Ionic Framework starter, the stylesheets listed in the [optional section of the global stylesheets](global-stylesheets.md#optional) will need to be included in order for these styles to work.
+If your app was not started using an available Ionic Framework starter, the stylesheets listed in the [optional section of the global stylesheets](global-stylesheets.mdx#optional) will need to be included in order for these styles to work.
 
 :::
 
@@ -246,7 +246,7 @@ The following classes are deprecated and will be removed in the next major relea
 
 The padding class sets the padding area of an element. The padding area is the space between the content of the element and its border.
 
-The default amount of `padding` to be applied is `16px` and is set by the `--ion-padding` variable. Refer to the [CSS Variables](../theming/css-variables.md) section for more information on how to change these values.
+The default amount of `padding` to be applied is `16px` and is set by the `--ion-padding` variable. Refer to the [CSS Variables](../theming/css-variables.mdx) section for more information on how to change these values.
 
 ```html
 <ion-grid>
@@ -296,7 +296,7 @@ The default amount of `padding` to be applied is `16px` and is set by the `--ion
 
 The margin area extends the border area with an empty area used to separate the element from its neighbors.
 
-The default amount of `margin` to be applied is `16px` and is set by the `--ion-margin` variable. Refer to the [CSS Variables](../theming/css-variables.md) section for more information on how to change these values.
+The default amount of `margin` to be applied is `16px` and is set by the `--ion-margin` variable. Refer to the [CSS Variables](../theming/css-variables.mdx) section for more information on how to change these values.
 
 ```html
 <ion-grid>
diff --git a/versioned_docs/version-v9/layout/dynamic-font-scaling.md b/versioned_docs/version-v9/layout/dynamic-font-scaling.mdx
similarity index 100%
rename from versioned_docs/version-v9/layout/dynamic-font-scaling.md
rename to versioned_docs/version-v9/layout/dynamic-font-scaling.mdx
diff --git a/versioned_docs/version-v9/layout/global-stylesheets.md b/versioned_docs/version-v9/layout/global-stylesheets.mdx
similarity index 81%
rename from versioned_docs/version-v9/layout/global-stylesheets.md
rename to versioned_docs/version-v9/layout/global-stylesheets.mdx
index 2979422e37a..eb00b28482a 100644
--- a/versioned_docs/version-v9/layout/global-stylesheets.md
+++ b/versioned_docs/version-v9/layout/global-stylesheets.mdx
@@ -44,28 +44,28 @@ The following set of CSS files are optional and can safely be commented out or r
 
 #### padding.css
 
-Adds utility classes to modify the padding or margin on any element, refer to [CSS Utilities](css-utilities.md#content-space) for usage information.
+Adds utility classes to modify the padding or margin on any element, refer to [CSS Utilities](css-utilities.mdx#content-space) for usage information.
 
 #### float-elements.css
 
-Adds utility classes to float an element based on the breakpoint and side, refer to [CSS Utilities](css-utilities.md#element-placement) for usage information.
+Adds utility classes to float an element based on the breakpoint and side, refer to [CSS Utilities](css-utilities.mdx#element-placement) for usage information.
 
 #### text-alignment.css
 
-Adds utility classes to align the text of an element or adjust the white space based on the breakpoint, refer to [CSS Utilities](css-utilities.md#text-alignment) for usage information.
+Adds utility classes to align the text of an element or adjust the white space based on the breakpoint, refer to [CSS Utilities](css-utilities.mdx#text-alignment) for usage information.
 
 #### text-transformation.css
 
-Adds utility classes to transform the text of an element to `uppercase`, `lowercase` or `capitalize` based on the breakpoint, refer to [CSS Utilities](css-utilities.md#text-transformation) for usage information.
+Adds utility classes to transform the text of an element to `uppercase`, `lowercase` or `capitalize` based on the breakpoint, refer to [CSS Utilities](css-utilities.mdx#text-transformation) for usage information.
 
 #### flex-utils.css
 
-Adds utility classes to align flex containers and items, refer to [CSS Utilities](css-utilities.md#flex-properties) for usage information.
+Adds utility classes to align flex containers and items, refer to [CSS Utilities](css-utilities.mdx#flex-properties) for usage information.
 
 #### display.css
 
-Adds utility classes to hide any element based on the breakpoint, refer to [CSS Utilities](css-utilities.md#element-display) for usage information.
+Adds utility classes to hide any element based on the breakpoint, refer to [CSS Utilities](css-utilities.mdx#element-display) for usage information.
 
 ## Usage
 
-Refer to [Ionic Packages](../intro/cdn.md) for how to include the global stylesheets based on the framework and [CSS Utilities](css-utilities.md) for how to use the optional utilities.
+Refer to [Ionic Packages](../intro/cdn.mdx) for how to include the global stylesheets based on the framework and [CSS Utilities](css-utilities.mdx) for how to use the optional utilities.
diff --git a/versioned_docs/version-v9/layout/structure.md b/versioned_docs/version-v9/layout/structure.mdx
similarity index 66%
rename from versioned_docs/version-v9/layout/structure.md
rename to versioned_docs/version-v9/layout/structure.mdx
index 83de68b7f25..079d7051844 100644
--- a/versioned_docs/version-v9/layout/structure.md
+++ b/versioned_docs/version-v9/layout/structure.mdx
@@ -19,7 +19,7 @@ Ionic Framework provides several different layouts that can be used to structure
 
 ### Header
 
-The most simple layout available consists of a [header](../api/header.md) and [content](../api/content.md). Most pages in an app generally have both of these, but a header is not required in order to use content.
+The most simple layout available consists of a [header](../api/header.mdx) and [content](../api/content.mdx). Most pages in an app generally have both of these, but a header is not required in order to use content.
 
 import Header from '@site/static/usage/v9/header/basic/index.mdx';
 
@@ -35,7 +35,7 @@ import Footer from '@site/static/usage/v9/footer/basic/index.mdx';
 
 ## Tabs Layout
 
-A layout consisting of horizontal [tabs](../api/tabs.md) can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using a [router outlet](../api/router-outlet.md) or [nav](../api/nav.md).
+A layout consisting of horizontal [tabs](../api/tabs.mdx) can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using a [router outlet](../api/router-outlet.mdx) or [nav](../api/nav.mdx).
 
 import Tabs from '@site/static/usage/v9/tabs/router/index.mdx';
 
@@ -43,7 +43,7 @@ import Tabs from '@site/static/usage/v9/tabs/router/index.mdx';
 
 ## Menu Layout
 
-A standard layout among mobile apps includes the ability to toggle a side [menu](../api/menu.md) by clicking a button or swiping it open from the side. Side menus are generally used for navigation, but they can contain any content.
+A standard layout among mobile apps includes the ability to toggle a side [menu](../api/menu.mdx) by clicking a button or swiping it open from the side. Side menus are generally used for navigation, but they can contain any content.
 
 import Menu from '@site/static/usage/v9/menu/basic/index.mdx';
 
@@ -51,11 +51,11 @@ import Menu from '@site/static/usage/v9/menu/basic/index.mdx';
 
 ## Split Pane Layout
 
-A [split pane](../api/split-pane.md) layout has a more complex structure because it can combine the previous layouts. It allows for multiple views to be displayed when the viewport is above a specified breakpoint. If the device's screen size is below a certain size, the split pane view will be hidden.
+A [split pane](../api/split-pane.mdx) layout has a more complex structure because it can combine the previous layouts. It allows for multiple views to be displayed when the viewport is above a specified breakpoint. If the device's screen size is below a certain size, the split pane view will be hidden.
 
 By default, the split pane view will show when the screen is larger than `768px`, or the `md` breakpoint, but this can be customized to use different breakpoints by setting the `when` property. Below is an example where the split pane contains a menu that is visible for `xs` screens and up, or when the viewport is larger than `0px`. This will show the split pane for all screen sizes.
 
-It's important to note that the element with the `id` matching the `contentId` specified by the split pane will be the main content that is always visible. This can be any element, including a [nav](../api/nav.md), [router outlet](../api/router-outlet.md), or [tabs](../api/tabs.md).
+It's important to note that the element with the `id` matching the `contentId` specified by the split pane will be the main content that is always visible. This can be any element, including a [nav](../api/nav.mdx), [router outlet](../api/router-outlet.mdx), or [tabs](../api/tabs.mdx).
 
 import SplitPane from '@site/static/usage/v9/split-pane/basic/index.mdx';
 
diff --git a/versioned_docs/version-v9/native-faq.md b/versioned_docs/version-v9/native-faq.mdx
similarity index 100%
rename from versioned_docs/version-v9/native-faq.md
rename to versioned_docs/version-v9/native-faq.mdx
diff --git a/versioned_docs/version-v9/native-setup.md b/versioned_docs/version-v9/native-setup.mdx
similarity index 100%
rename from versioned_docs/version-v9/native-setup.md
rename to versioned_docs/version-v9/native-setup.mdx
diff --git a/versioned_docs/version-v9/native.md b/versioned_docs/version-v9/native.mdx
similarity index 100%
rename from versioned_docs/version-v9/native.md
rename to versioned_docs/version-v9/native.mdx
diff --git a/versioned_docs/version-v9/react/add-to-existing.md b/versioned_docs/version-v9/react/add-to-existing.mdx
similarity index 92%
rename from versioned_docs/version-v9/react/add-to-existing.md
rename to versioned_docs/version-v9/react/add-to-existing.mdx
index f4ecfada7a4..e9a9eb18fe9 100644
--- a/versioned_docs/version-v9/react/add-to-existing.md
+++ b/versioned_docs/version-v9/react/add-to-existing.mdx
@@ -14,7 +14,7 @@ import DocsCards from '@components/global/DocsCards';
   />
 </head>
 
-This guide covers how to add Ionic React to an existing React project. If you're looking to start a new project from scratch, check out the [Ionic React Quickstart](/docs/react/quickstart.md) guide. For an overview of how Ionic React works with React, including version support and tooling, check out the [Ionic React Overview](/docs/react/overview.md).
+This guide covers how to add Ionic React to an existing React project. If you're looking to start a new project from scratch, check out the [Ionic React Quickstart](/docs/react/quickstart.mdx) guide. For an overview of how Ionic React works with React, including version support and tooling, check out the [Ionic React Overview](/docs/react/overview.mdx).
 
 :::tip
 
@@ -64,7 +64,7 @@ setupIonicReact();
 
 :::info
 
-While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.md).
+While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.mdx).
 
 :::
 
@@ -98,7 +98,7 @@ const App: React.FC = () => (
 export default App;
 ```
 
-Visit the [components](/docs/components.md) page for all of the available Ionic components.
+Visit the [components](/docs/components.mdx) page for all of the available Ionic components.
 
 :::tip
 
@@ -132,7 +132,7 @@ import '@ionic/react/css/flex-utils.css';
 import '@ionic/react/css/display.css';
 ```
 
-These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.md) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.md).
+These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.mdx) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.mdx).
 
 #### 2. Set up Theming
 
@@ -169,7 +169,7 @@ setupIonicReact();
 // ...existing app function and export...
 ```
 
-The `variables.css` file can be used to create custom Ionic Framework themes. The `dark.system.css` import enables [dark mode support](/docs/theming/dark-mode.md) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables to `theme/variables.css`.
+The `variables.css` file can be used to create custom Ionic Framework themes. The `dark.system.css` import enables [dark mode support](/docs/theming/dark-mode.mdx) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables to `theme/variables.css`.
 
 #### 3. Update the App Component
 
diff --git a/versioned_docs/version-v9/react/lifecycle.md b/versioned_docs/version-v9/react/lifecycle.mdx
similarity index 100%
rename from versioned_docs/version-v9/react/lifecycle.md
rename to versioned_docs/version-v9/react/lifecycle.mdx
diff --git a/versioned_docs/version-v9/react/navigation.md b/versioned_docs/version-v9/react/navigation.mdx
similarity index 98%
rename from versioned_docs/version-v9/react/navigation.md
rename to versioned_docs/version-v9/react/navigation.mdx
index 0c460fffc53..0557db6278d 100644
--- a/versioned_docs/version-v9/react/navigation.md
+++ b/versioned_docs/version-v9/react/navigation.mdx
@@ -180,7 +180,7 @@ Outside of these components that have the `routerLink` prop, you can also use Re
 
 We recommend using one of the above methods whenever possible for routing. The advantage to these approaches is that they both render an anchor (`<a>`)tag, which is suitable for overall app accessibility.
 
-For programmatic navigation, use the `useIonRouter` hook (review [Utility Functions](./utility-functions.md#useionrouter)) or React Router's [`useNavigate`](https://reactrouter.com/6.28.0/hooks/use-navigate) hook:
+For programmatic navigation, use the `useIonRouter` hook (review [Utility Functions](./utility-functions.mdx#useionrouter)) or React Router's [`useNavigate`](https://reactrouter.com/6.28.0/hooks/use-navigate) hook:
 
 ```tsx
 import { useNavigate } from 'react-router-dom';
@@ -211,7 +211,7 @@ Say you have the following application history:
 
 If you were to call `navigate(-2)` on `/pageC`, you would be brought back to `/pageA`. If you then called `navigate(2)`, you would be brought to `/pageC`.
 
-Using `navigate()` with delta values is not recommended in Ionic React because it follows the browser's linear history, which does not account for Ionic's non-linear tab and nested outlet navigation stacks. Use the `useIonRouter` hook's [`goBack()`](./utility-functions.md#back-navigation) method instead, which navigates within the current Ionic navigation stack.
+Using `navigate()` with delta values is not recommended in Ionic React because it follows the browser's linear history, which does not account for Ionic's non-linear tab and nested outlet navigation stacks. Use the `useIonRouter` hook's [`goBack()`](./utility-functions.mdx#back-navigation) method instead, which navigates within the current Ionic navigation stack.
 
 ## URL Parameters
 
@@ -527,4 +527,4 @@ When a user navigates to a session detail page ("/sessions/1" for instance), `Io
 
 For more info on routing in React using the React Router implementation that Ionic uses under the hood, check out their docs at [https://reactrouter.com/6.28.0](https://reactrouter.com/6.28.0).
 
-For documentation on `useIonRouter` and other utility functions, review [Utility Functions](./utility-functions.md).
+For documentation on `useIonRouter` and other utility functions, review [Utility Functions](./utility-functions.mdx).
diff --git a/versioned_docs/version-v9/react/overlays.md b/versioned_docs/version-v9/react/overlays.mdx
similarity index 100%
rename from versioned_docs/version-v9/react/overlays.md
rename to versioned_docs/version-v9/react/overlays.mdx
diff --git a/versioned_docs/version-v9/react/overview.md b/versioned_docs/version-v9/react/overview.mdx
similarity index 100%
rename from versioned_docs/version-v9/react/overview.md
rename to versioned_docs/version-v9/react/overview.mdx
diff --git a/versioned_docs/version-v9/react/performance.md b/versioned_docs/version-v9/react/performance.mdx
similarity index 100%
rename from versioned_docs/version-v9/react/performance.md
rename to versioned_docs/version-v9/react/performance.mdx
diff --git a/versioned_docs/version-v9/react/platform.md b/versioned_docs/version-v9/react/platform.mdx
similarity index 100%
rename from versioned_docs/version-v9/react/platform.md
rename to versioned_docs/version-v9/react/platform.mdx
diff --git a/versioned_docs/version-v9/react/pwa.md b/versioned_docs/version-v9/react/pwa.mdx
similarity index 100%
rename from versioned_docs/version-v9/react/pwa.md
rename to versioned_docs/version-v9/react/pwa.mdx
diff --git a/versioned_docs/version-v9/react/quickstart.md b/versioned_docs/version-v9/react/quickstart.mdx
similarity index 93%
rename from versioned_docs/version-v9/react/quickstart.md
rename to versioned_docs/version-v9/react/quickstart.mdx
index 35ce8d1e657..02677ec627d 100644
--- a/versioned_docs/version-v9/react/quickstart.md
+++ b/versioned_docs/version-v9/react/quickstart.mdx
@@ -150,17 +150,17 @@ const Home: React.FC = () => {
 export default Home;
 ```
 
-This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
+This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/docs/api/title.mdx#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
 :::tip[Learn More]
 
-For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
+For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.mdx), [Toolbar](/docs/api/toolbar.mdx), [Title](/docs/api/title.mdx), and [Content](/docs/api/content.mdx) documentation.
 
 :::
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, import and add a [Button](/docs/api/button.md) at the end of the `IonContent` in `Home.tsx`:
+You can enhance your Home page with more Ionic UI components. For example, import and add a [Button](/docs/api/button.mdx) at the end of the `IonContent` in `Home.tsx`:
 
 ```tsx title="src/pages/Home.tsx"
 import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
@@ -218,7 +218,7 @@ const New: React.FC = () => {
 export default New;
 ```
 
-This creates a page with a [Back Button](/docs/api/back-button.md) in the [Toolbar](/docs/api/toolbar.md). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
+This creates a page with a [Back Button](/docs/api/back-button.mdx) in the [Toolbar](/docs/api/toolbar.mdx). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
 
 :::warning
 
@@ -252,7 +252,7 @@ Once that is done, update the button in `Home.tsx`:
 
 :::info
 
-Navigating can also be performed programmatically using the `useIonRouter` hook. See the [React Navigation documentation](/docs/react/navigation.md#useionrouter) for more information.
+Navigating can also be performed programmatically using the `useIonRouter` hook. See the [React Navigation documentation](/docs/react/navigation.mdx#useionrouter) for more information.
 
 :::
 
@@ -276,7 +276,7 @@ Then, include them inside of the `IonContent`:
 
 Note that we are passing the imported SVG reference, **not** the icon name as a string.
 
-For more information, refer to the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
+For more information, refer to the [Icon documentation](/docs/api/icon.mdx) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
 ## Call Component Methods
 
@@ -329,7 +329,7 @@ To call methods on Ionic components:
 
 This pattern is necessary because React refs store the component instance in the `.current` property.
 
-You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation.
+You can find available methods for each component in the [Methods](/docs/api/content.mdx#methods) section of their API documentation.
 
 ## Run on a Device
 
diff --git a/versioned_docs/version-v9/react/slides.md b/versioned_docs/version-v9/react/slides.mdx
similarity index 100%
rename from versioned_docs/version-v9/react/slides.md
rename to versioned_docs/version-v9/react/slides.mdx
diff --git a/versioned_docs/version-v9/react/storage.md b/versioned_docs/version-v9/react/storage.mdx
similarity index 100%
rename from versioned_docs/version-v9/react/storage.md
rename to versioned_docs/version-v9/react/storage.mdx
diff --git a/versioned_docs/version-v9/react/testing/introduction.md b/versioned_docs/version-v9/react/testing/introduction.mdx
similarity index 100%
rename from versioned_docs/version-v9/react/testing/introduction.md
rename to versioned_docs/version-v9/react/testing/introduction.mdx
diff --git a/versioned_docs/version-v9/react/testing/unit-testing/best-practices.md b/versioned_docs/version-v9/react/testing/unit-testing/best-practices.mdx
similarity index 100%
rename from versioned_docs/version-v9/react/testing/unit-testing/best-practices.md
rename to versioned_docs/version-v9/react/testing/unit-testing/best-practices.mdx
diff --git a/versioned_docs/version-v9/react/testing/unit-testing/examples.md b/versioned_docs/version-v9/react/testing/unit-testing/examples.mdx
similarity index 100%
rename from versioned_docs/version-v9/react/testing/unit-testing/examples.md
rename to versioned_docs/version-v9/react/testing/unit-testing/examples.mdx
diff --git a/versioned_docs/version-v9/react/testing/unit-testing/setup.md b/versioned_docs/version-v9/react/testing/unit-testing/setup.mdx
similarity index 100%
rename from versioned_docs/version-v9/react/testing/unit-testing/setup.md
rename to versioned_docs/version-v9/react/testing/unit-testing/setup.mdx
diff --git a/versioned_docs/version-v9/react/utility-functions.md b/versioned_docs/version-v9/react/utility-functions.mdx
similarity index 98%
rename from versioned_docs/version-v9/react/utility-functions.md
rename to versioned_docs/version-v9/react/utility-functions.mdx
index ed8814188b8..905c470606d 100644
--- a/versioned_docs/version-v9/react/utility-functions.md
+++ b/versioned_docs/version-v9/react/utility-functions.mdx
@@ -99,7 +99,7 @@ const MyComponent: React.FC = () => {
 };
 ```
 
-Review the [React Navigation Documentation](./navigation.md) for more navigation examples.
+Review the [React Navigation Documentation](./navigation.mdx) for more navigation examples.
 
 ### Interfaces
 
diff --git a/versioned_docs/version-v9/react/virtual-scroll.md b/versioned_docs/version-v9/react/virtual-scroll.mdx
similarity index 100%
rename from versioned_docs/version-v9/react/virtual-scroll.md
rename to versioned_docs/version-v9/react/virtual-scroll.mdx
diff --git a/versioned_docs/version-v9/react/your-first-app.md b/versioned_docs/version-v9/react/your-first-app.mdx
similarity index 96%
rename from versioned_docs/version-v9/react/your-first-app.md
rename to versioned_docs/version-v9/react/your-first-app.mdx
index 4409fde15cc..a78bc4e967f 100644
--- a/versioned_docs/version-v9/react/your-first-app.md
+++ b/versioned_docs/version-v9/react/your-first-app.mdx
@@ -30,7 +30,7 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
 
 Highlights include:
 
-- One React-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.md).
+- One React-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.mdx).
 - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
 - Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs.
 
@@ -64,7 +64,7 @@ npm install -g @ionic/cli native-run cordova-res
 
 The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
 
-Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information.
 
 :::
 
@@ -169,7 +169,7 @@ const Tab2: React.FC = () => {
 export default Tab2;
 ```
 
-`IonHeader` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.md#collapsible-large-titles) support). Let’s rename both `IonTitle` elements to:
+`IonHeader` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.mdx#collapsible-large-titles) support). Let’s rename both `IonTitle` elements to:
 
 ```tsx
 <IonPage>
@@ -192,7 +192,7 @@ export default Tab2;
 </IonPage>
 ```
 
-We put the visual aspects of our app into `<IonContent>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.md) (FAB) to the bottom of the page and set the camera image as the icon.
+We put the visual aspects of our app into `<IonContent>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.mdx) (FAB) to the bottom of the page and set the camera image as the icon.
 
 ```tsx
 // CHANGE: Add the following import
diff --git a/docs/react/your-first-app/2-taking-photos.md b/versioned_docs/version-v9/react/your-first-app/2-taking-photos.mdx
similarity index 96%
rename from docs/react/your-first-app/2-taking-photos.md
rename to versioned_docs/version-v9/react/your-first-app/2-taking-photos.mdx
index 5b0ba87f260..267c80a5f85 100644
--- a/docs/react/your-first-app/2-taking-photos.md
+++ b/versioned_docs/version-v9/react/your-first-app/2-taking-photos.mdx
@@ -201,7 +201,7 @@ export interface UserPhoto {
 }
 ```
 
-Next, switch to `Tab2.tsx` to display the images. We'll add a [Grid component](../../api/grid.md) to ensure the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `UserPhoto`'s `photos` array. For each item, add an `<img>` element and set its `src` property to the photo's path.
+Next, switch to `Tab2.tsx` to display the images. We'll add a [Grid component](../../api/grid.mdx) to ensure the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `UserPhoto`'s `photos` array. For each item, add an `<img>` element and set its `src` property to the photo's path.
 
 ```tsx
 import { camera } from 'ionicons/icons';
diff --git a/versioned_docs/version-v9/react/your-first-app/3-saving-photos.md b/versioned_docs/version-v9/react/your-first-app/3-saving-photos.mdx
similarity index 100%
rename from versioned_docs/version-v9/react/your-first-app/3-saving-photos.md
rename to versioned_docs/version-v9/react/your-first-app/3-saving-photos.mdx
diff --git a/versioned_docs/version-v9/react/your-first-app/4-loading-photos.md b/versioned_docs/version-v9/react/your-first-app/4-loading-photos.mdx
similarity index 100%
rename from versioned_docs/version-v9/react/your-first-app/4-loading-photos.md
rename to versioned_docs/version-v9/react/your-first-app/4-loading-photos.mdx
diff --git a/versioned_docs/version-v9/react/your-first-app/5-adding-mobile.md b/versioned_docs/version-v9/react/your-first-app/5-adding-mobile.mdx
similarity index 96%
rename from versioned_docs/version-v9/react/your-first-app/5-adding-mobile.md
rename to versioned_docs/version-v9/react/your-first-app/5-adding-mobile.mdx
index 72fe336cef9..302988e4e38 100644
--- a/versioned_docs/version-v9/react/your-first-app/5-adding-mobile.md
+++ b/versioned_docs/version-v9/react/your-first-app/5-adding-mobile.mdx
@@ -17,7 +17,7 @@ Our photo gallery app won’t be complete until it runs on iOS, Android, and the
 
 Let’s start with making some small code changes - then our app will “just work” when we deploy it to a device.
 
-Import the Ionic [Platform API](../platform.md) into `usePhotoGallery.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile).
+Import the Ionic [Platform API](../platform.mdx) into `usePhotoGallery.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile).
 
 Add `isPlatform` to the imports at the top of the file to use the `isPlatform` method. `Capacitor` is also imported to help with file paths on mobile devices.
 
diff --git a/versioned_docs/version-v9/react/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v9/react/your-first-app/6-deploying-mobile.mdx
similarity index 100%
rename from versioned_docs/version-v9/react/your-first-app/6-deploying-mobile.md
rename to versioned_docs/version-v9/react/your-first-app/6-deploying-mobile.mdx
diff --git a/versioned_docs/version-v9/react/your-first-app/7-live-reload.md b/versioned_docs/version-v9/react/your-first-app/7-live-reload.mdx
similarity index 95%
rename from versioned_docs/version-v9/react/your-first-app/7-live-reload.md
rename to versioned_docs/version-v9/react/your-first-app/7-live-reload.mdx
index 9c66eb131d3..25665f016d4 100644
--- a/versioned_docs/version-v9/react/your-first-app/7-live-reload.md
+++ b/versioned_docs/version-v9/react/your-first-app/7-live-reload.mdx
@@ -13,7 +13,7 @@ sidebar_label: Live Reload
 
 So far, we’ve learned how easy it is to develop a cross-platform app that works everywhere. The development experience is pretty quick, but what if I told you there was a way to go faster?
 
-We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.md) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
+We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.mdx) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
 
 ## Live Reload
 
@@ -178,7 +178,7 @@ const Tab2: React.FC = () => {
 export default Tab2;
 ```
 
-Wrap each image in a `<button>` element with a click handler. When the app user taps on a photo in our gallery, we'll display an [Action Sheet](../../api/action-sheet.md) dialog with the option to either delete the selected photo or cancel (close) the dialog.
+Wrap each image in a `<button>` element with a click handler. When the app user taps on a photo in our gallery, we'll display an [Action Sheet](../../api/action-sheet.mdx) dialog with the option to either delete the selected photo or cancel (close) the dialog.
 
 ```tsx
 <IonGrid>
diff --git a/docs/react/your-first-app/8-distribute.md b/versioned_docs/version-v9/react/your-first-app/8-distribute.mdx
similarity index 97%
rename from docs/react/your-first-app/8-distribute.md
rename to versioned_docs/version-v9/react/your-first-app/8-distribute.mdx
index 73ebe7e7628..e1c6a8ac23d 100644
--- a/docs/react/your-first-app/8-distribute.md
+++ b/versioned_docs/version-v9/react/your-first-app/8-distribute.mdx
@@ -102,6 +102,6 @@ For access to the ability to create a Native Configuration, you will need to be
 
 Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to your users' devices!
 
-There are many paths to follow from here. Try adding another [Ionic UI component](../../components.md) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
+There are many paths to follow from here. Try adding another [Ionic UI component](../../components.mdx) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
 
 Happy app building! 💙
diff --git a/versioned_docs/version-v9/reference/browser-support.md b/versioned_docs/version-v9/reference/browser-support.mdx
similarity index 96%
rename from versioned_docs/version-v9/reference/browser-support.md
rename to versioned_docs/version-v9/reference/browser-support.mdx
index 10808553648..0776df2a8f6 100644
--- a/versioned_docs/version-v9/reference/browser-support.md
+++ b/versioned_docs/version-v9/reference/browser-support.mdx
@@ -14,7 +14,7 @@ Ionic's earliest goal was to make it easy to develop mobile apps using web techn
 
 ## Mobile Platforms
 
-In pursuit of [adaptive styling](../core-concepts/fundamentals.md#adaptive-styling), Ionic fully supports and is well tested on the mobile platforms listed below:
+In pursuit of [adaptive styling](../core-concepts/fundamentals.mdx#adaptive-styling), Ionic fully supports and is well tested on the mobile platforms listed below:
 
 | Framework |        Android         |  iOS  |
 | :-------: | :--------------------: | :---: |
diff --git a/versioned_docs/version-v9/reference/glossary.md b/versioned_docs/version-v9/reference/glossary.mdx
similarity index 100%
rename from versioned_docs/version-v9/reference/glossary.md
rename to versioned_docs/version-v9/reference/glossary.mdx
diff --git a/versioned_docs/version-v9/reference/release-notes.md b/versioned_docs/version-v9/reference/release-notes.mdx
similarity index 100%
rename from versioned_docs/version-v9/reference/release-notes.md
rename to versioned_docs/version-v9/reference/release-notes.mdx
diff --git a/docs/reference/support.md b/versioned_docs/version-v9/reference/support.mdx
similarity index 98%
rename from docs/reference/support.md
rename to versioned_docs/version-v9/reference/support.mdx
index efcac5b444f..43994fbf0bc 100644
--- a/docs/reference/support.md
+++ b/versioned_docs/version-v9/reference/support.mdx
@@ -65,7 +65,7 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo
 
 Angular's support policy for iOS is the two most recent major versions. This means that changes to your Angular project may be necessary to use Ionic Angular v4-v6 on iOS 13. To support iOS 13, change the project `target` specified in `compilerOptions` in the tsconfig.json to `es5`. Without this change an error of `Unexpected token '.' in promiseReactionJob` will occur on app startup in iOS 13.
 
-Note that later versions of Ionic do not support iOS 13; refer to the [mobile support table](./browser-support.md#mobile-platforms).
+Note that later versions of Ionic do not support iOS 13; refer to the [mobile support table](./browser-support.mdx#mobile-platforms).
 
 #### Ionic React
 
@@ -140,4 +140,4 @@ Note that later versions of Ionic do not support iOS 13; refer to the [mobile su
 |      V3      | Not currently supported |   @awesome-cordova-plugins 4.X   |
 
 - Wrappers (and their associated plugins) are community maintained.
-- \*Cordova plugin support with Ionic Native and `@ionic/react` can be achieved using the [vanilla JavaScript implementation](../native.md#vanilla-javascript)
+- \*Cordova plugin support with Ionic Native and `@ionic/react` can be achieved using the [vanilla JavaScript implementation](../native.mdx#vanilla-javascript)
diff --git a/versioned_docs/version-v9/reference/versioning.md b/versioned_docs/version-v9/reference/versioning.mdx
similarity index 100%
rename from versioned_docs/version-v9/reference/versioning.md
rename to versioned_docs/version-v9/reference/versioning.mdx
diff --git a/versioned_docs/version-v9/techniques/security.md b/versioned_docs/version-v9/techniques/security.mdx
similarity index 99%
rename from versioned_docs/version-v9/techniques/security.md
rename to versioned_docs/version-v9/techniques/security.mdx
index 88510489468..9aebc97ca93 100644
--- a/versioned_docs/version-v9/techniques/security.md
+++ b/versioned_docs/version-v9/techniques/security.mdx
@@ -61,7 +61,7 @@ To learn more about the security recommendations for binding to directives such
 
 ## Enabling Custom HTML Parsing via `innerHTML`
 
-`ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-select-option`, and `ion-toast` can accept custom HTML as strings for certain properties. These strings are added to the DOM using `innerHTML` and must be properly sanitized by the developer. This behavior is disabled by default which means values passed to the affected components will always be interpreted as plaintext. Developers can enable this custom HTML behavior by setting `innerHTMLTemplatesEnabled: true` in the [IonicConfig](../developing/config.md#ionicconfig).
+`ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-select-option`, and `ion-toast` can accept custom HTML as strings for certain properties. These strings are added to the DOM using `innerHTML` and must be properly sanitized by the developer. This behavior is disabled by default which means values passed to the affected components will always be interpreted as plaintext. Developers can enable this custom HTML behavior by setting `innerHTMLTemplatesEnabled: true` in the [IonicConfig](../developing/config.mdx#ionicconfig).
 
 ## Ejecting from the built-in sanitizer
 
diff --git a/versioned_docs/version-v9/test/page1.md b/versioned_docs/version-v9/test/page1.md
deleted file mode 100644
index d965196cf5d..00000000000
--- a/versioned_docs/version-v9/test/page1.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Testing Page 1
-
-This is Testing page 1, Get to Testing Page 2 [here](page2.md).
diff --git a/versioned_docs/version-v9/test/page1.mdx b/versioned_docs/version-v9/test/page1.mdx
new file mode 100644
index 00000000000..cd5b72410d0
--- /dev/null
+++ b/versioned_docs/version-v9/test/page1.mdx
@@ -0,0 +1,3 @@
+# Testing Page 1
+
+This is Testing page 1, Get to Testing Page 2 [here](page2.mdx).
diff --git a/versioned_docs/version-v9/test/page2.md b/versioned_docs/version-v9/test/page2.md
deleted file mode 100644
index 2d2d61adacf..00000000000
--- a/versioned_docs/version-v9/test/page2.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Testing Page 2
-
-This is Testing page 2, Get to Testing Page 1 [here](page1.md).
diff --git a/versioned_docs/version-v9/test/page2.mdx b/versioned_docs/version-v9/test/page2.mdx
new file mode 100644
index 00000000000..5ebdef8dca0
--- /dev/null
+++ b/versioned_docs/version-v9/test/page2.mdx
@@ -0,0 +1,3 @@
+# Testing Page 2
+
+This is Testing page 2, Get to Testing Page 1 [here](page1.mdx).
diff --git a/versioned_docs/version-v9/theming/advanced.md b/versioned_docs/version-v9/theming/advanced.mdx
similarity index 96%
rename from versioned_docs/version-v9/theming/advanced.md
rename to versioned_docs/version-v9/theming/advanced.mdx
index 18093f98df1..fef9ebfdeff 100644
--- a/versioned_docs/version-v9/theming/advanced.md
+++ b/versioned_docs/version-v9/theming/advanced.mdx
@@ -66,8 +66,8 @@ While the application and stepped variables in the themes section are useful for
 | `--ion-safe-area-right`     | Adjust the safe area inset right of the app                                                          |
 | `--ion-safe-area-bottom`    | Adjust the safe area inset bottom of the app                                                         |
 | `--ion-safe-area-left`      | Adjust the safe area inset left of the app                                                           |
-| `--ion-margin`              | Adjust the margin of the [Margin attributes](../layout/css-utilities.md#element-margin)              |
-| `--ion-padding`             | Adjust the padding of the [Padding attributes](../layout/css-utilities.md#element-padding)           |
+| `--ion-margin`              | Adjust the margin of the [Margin attributes](../layout/css-utilities.mdx#element-margin)             |
+| `--ion-padding`             | Adjust the padding of the [Padding attributes](../layout/css-utilities.mdx#element-padding)          |
 | `--ion-placeholder-opacity` | Adjust the opacity of the placeholders used in the input, textarea, searchbar, and select components |
 
 ### Grid Variables
@@ -111,7 +111,7 @@ There is not yet full [browser support](https://developer.mozilla.org/en-US/docs
 
 :::note
 
-Refer to the [CSS Variables](css-variables.md) section for more information on how to get and set CSS variables.
+Refer to the [CSS Variables](css-variables.mdx) section for more information on how to get and set CSS variables.
 
 :::
 
@@ -182,7 +182,7 @@ After running through the Sass compiler, the colors will have the following valu
 
 However, because CSS variables can be set at runtime and are more dynamic, it is not currently possible to manipulate them using a simple function.
 
-This is normally not a problem, but when an application needs to have dynamic theming it presents issues. In Ionic, this is the reason that there are [variations to each color](colors.md#layered-colors), and it is also why [stepped colors](themes.md#stepped-colors) are necessary for theming.
+This is normally not a problem, but when an application needs to have dynamic theming it presents issues. In Ionic, this is the reason that there are [variations to each color](colors.mdx#layered-colors), and it is also why [stepped colors](themes.mdx#stepped-colors) are necessary for theming.
 
 There are drafts and issues discussing [color modification proposals](https://github.com/w3c/csswg-drafts/issues/3187) that would make this possible.
 
diff --git a/versioned_docs/version-v8/theming/basics.md b/versioned_docs/version-v9/theming/basics.mdx
similarity index 88%
rename from versioned_docs/version-v8/theming/basics.md
rename to versioned_docs/version-v9/theming/basics.mdx
index c7072fd73c7..b330a7383ea 100644
--- a/versioned_docs/version-v8/theming/basics.md
+++ b/versioned_docs/version-v9/theming/basics.mdx
@@ -19,7 +19,7 @@ Ionic Framework is built to be a blank slate that can easily be customized and m
 
 Ionic has nine default colors that can be used to change the color of many components. Each color is actually a collection of multiple properties, including a `shade` and `tint`, used throughout Ionic.
 
-When changing a color, it is important to set all of the related properties. This can be done easily with the [Color Generator](color-generator.md) tool, but these can also be manually written if desired. For more information on Ionic colors, refer to [Colors](colors.md).
+When changing a color, it is important to set all of the related properties. This can be done easily with the [Color Generator](color-generator.mdx) tool, but these can also be manually written if desired. For more information on Ionic colors, refer to [Colors](colors.mdx).
 
 <ColorAccordion />
 
@@ -27,16 +27,16 @@ When changing a color, it is important to set all of the related properties. Thi
 
 Ionic components adapt their look and behavior based on the platform the app is running on. We call this **Adaptive Styling**. This allows developers to build apps that use the same codebase for multiple platforms, while still looking "native" to those particular platforms.
 
-Ionic has two **modes** that are used to customize the look of components based on the **platform**: `ios` and `md`. Each platform has a default mode, but this can easily be configured. For more information on customizing an application based on the platform, refer to [Platform Styles](platform-styles.md).
+Ionic has two **modes** that are used to customize the look of components based on the **platform**: `ios` and `md`. Each platform has a default mode, but this can easily be configured. For more information on customizing an application based on the platform, refer to [Platform Styles](platform-styles.mdx).
 
 ## CSS Variables
 
-The Ionic Framework components are themed using [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables). CSS variables add dynamic values to an otherwise static language. This is something that has traditionally required a CSS preprocessor like Sass. The look of an application can easily be changed by changing the value of any of the [CSS Variables](css-variables.md) Ionic Framework provides.
+The Ionic Framework components are themed using [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables). CSS variables add dynamic values to an otherwise static language. This is something that has traditionally required a CSS preprocessor like Sass. The look of an application can easily be changed by changing the value of any of the [CSS Variables](css-variables.mdx) Ionic Framework provides.
 
 ## CSS Shadow Parts
 
-CSS Shadow Parts were added to make it easier to fully customize Ionic Framework Shadow components. In the past, components that use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) were unable to have elements inside of their shadow tree styled directly. With the addition of Shadow parts, there is no longer a need for CSS variables for every property on an inner element of a Shadow component. For more information on customizing Ionic Framework components using parts, refer to the [CSS Shadow Parts](css-shadow-parts.md) guide.
+CSS Shadow Parts were added to make it easier to fully customize Ionic Framework Shadow components. In the past, components that use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) were unable to have elements inside of their shadow tree styled directly. With the addition of Shadow parts, there is no longer a need for CSS variables for every property on an inner element of a Shadow component. For more information on customizing Ionic Framework components using parts, refer to the [CSS Shadow Parts](css-shadow-parts.mdx) guide.
 
 ## Branding
 
-Ionic provides application colors that can be used to theme an application to match a brand or color scheme. The default theme uses a light background, but everything from the background color to the text color is fully customizable. For more information on branding, refer to [Themes](themes.md).
+Ionic provides application colors that can be used to theme an application to match a brand or color scheme. The default theme uses a light background, but everything from the background color to the text color is fully customizable. For more information on branding, refer to [Themes](themes.mdx).
diff --git a/versioned_docs/version-v9/theming/color-generator.md b/versioned_docs/version-v9/theming/color-generator.mdx
similarity index 100%
rename from versioned_docs/version-v9/theming/color-generator.md
rename to versioned_docs/version-v9/theming/color-generator.mdx
diff --git a/versioned_docs/version-v8/theming/colors.md b/versioned_docs/version-v9/theming/colors.mdx
similarity index 89%
rename from versioned_docs/version-v8/theming/colors.md
rename to versioned_docs/version-v9/theming/colors.mdx
index b729dbf2066..b05f9d1c2a3 100644
--- a/versioned_docs/version-v8/theming/colors.md
+++ b/versioned_docs/version-v9/theming/colors.mdx
@@ -33,7 +33,7 @@ A color can be applied to an Ionic component in order to change the default colo
 
 ## Layered Colors
 
-Each color consists of the following properties: a `base`, `contrast`, `shade`, and `tint`. The `base` and `contrast` colors also require a `rgb` property which is the same color, just in [rgb format](https://developer.mozilla.org/en-US/docs/Glossary/RGB). Refer to [The Alpha Problem](advanced.md#the-alpha-problem) for an explanation of why the `rgb` property is also needed. Select from the dropdown below to explore each of the default colors Ionic provides and their variations.
+Each color consists of the following properties: a `base`, `contrast`, `shade`, and `tint`. The `base` and `contrast` colors also require a `rgb` property which is the same color, just in [rgb format](https://developer.mozilla.org/en-US/docs/Glossary/RGB). Refer to [The Alpha Problem](advanced.mdx#the-alpha-problem) for an explanation of why the `rgb` property is also needed. Select from the dropdown below to explore each of the default colors Ionic provides and their variations.
 
 <LayeredColorsSelect />
 
@@ -56,11 +56,11 @@ When `secondary` is applied to a button, not only is the base color <CodeColor c
 
 :::note
 
-Not sure how to get the variation colors from the base color? Try out our [Color Generator](color-generator.md) that calculates all of the variations and provides code to copy/paste into an app!
+Not sure how to get the variation colors from the base color? Try out our [Color Generator](color-generator.mdx) that calculates all of the variations and provides code to copy/paste into an app!
 
 :::
 
-Refer to the [CSS Variables documentation](css-variables.md) for more information on CSS variables.
+Refer to the [CSS Variables documentation](css-variables.mdx) for more information on CSS variables.
 
 ## Adding Colors
 
@@ -107,7 +107,7 @@ div {
 }
 ```
 
-Refer to the [CSS Variables documentation](css-variables.md) for more information on setting and using CSS variables.
+Refer to the [CSS Variables documentation](css-variables.mdx) for more information on setting and using CSS variables.
 
 ## New Color Creator
 
diff --git a/versioned_docs/version-v9/theming/css-shadow-parts.md b/versioned_docs/version-v9/theming/css-shadow-parts.mdx
similarity index 92%
rename from versioned_docs/version-v9/theming/css-shadow-parts.md
rename to versioned_docs/version-v9/theming/css-shadow-parts.mdx
index 1f31faba50c..fb8fc4f959e 100644
--- a/versioned_docs/version-v9/theming/css-shadow-parts.md
+++ b/versioned_docs/version-v9/theming/css-shadow-parts.mdx
@@ -18,7 +18,7 @@ Ionic Framework is a distributed set of [Web Components](https://developer.mozil
 
 :::note
 
-Ionic Framework components are **not all** Shadow DOM components. If the component is a Shadow DOM component, there will be a badge in the top right of its [component documentation](../components.md). An example of a Shadow DOM component is the [button component](../api/button.md).
+Ionic Framework components are **not all** Shadow DOM components. If the component is a Shadow DOM component, there will be a badge in the top right of its [component documentation](../components.mdx). An example of a Shadow DOM component is the [button component](../api/button.mdx).
 
 :::
 
@@ -63,7 +63,7 @@ Continuing to use the `ion-select` component as an example, the markup is update
 </ion-select>
 ```
 
-The above shows two parts: `placeholder` and `icon`. Refer to the [select documentation](../api/select.md#css-shadow-parts) for all of its parts.
+The above shows two parts: `placeholder` and `icon`. Refer to the [select documentation](../api/select.mdx#css-shadow-parts) for all of its parts.
 
 With these parts exposed, the element can now be styled directly using [::part](#how-part-works).
 
@@ -107,11 +107,11 @@ There are some known limitations with [vendor prefixed pseudo-elements](#vendor-
 
 ## Ionic Framework Parts
 
-All exposed parts for an Ionic Framework component can be found under the CSS Shadow Parts heading on its API page. To view all components and their API pages, refer to the [Component documentation](../components.md).
+All exposed parts for an Ionic Framework component can be found under the CSS Shadow Parts heading on its API page. To view all components and their API pages, refer to the [Component documentation](../components.mdx).
 
 In order to have parts a component must meet the following criteria:
 
-- It is a [Shadow DOM](../reference/glossary.md#shadow) component. If it is a [Scoped](../reference/glossary.md#scoped) or Light DOM component, the child elements can be targeted directly. If a component is Scoped or Shadow, it will be listed by its name on its [component documentation page](../components.md).
+- It is a [Shadow DOM](../reference/glossary.mdx#shadow) component. If it is a [Scoped](../reference/glossary.mdx#scoped) or Light DOM component, the child elements can be targeted directly. If a component is Scoped or Shadow, it will be listed by its name on its [component documentation page](../components.mdx).
 - It contains children elements. For example, `ion-card-header` is a Shadow component, but all styles are applied to the host element. Since it has no child elements, there’s no need for parts.
 - The children elements are not structural. In certain components, including `ion-title`, the child element is a structural element used to position the inner elements. We do not recommend customizing structural elements as this can have unexpected results.
 
@@ -125,7 +125,7 @@ We welcome recommendations for additional parts. Please create a [new GitHub iss
 
 ### Browser Support
 
-CSS Shadow Parts are supported in the recent versions of all of the major browsers. However, some of the older versions do not support shadow parts. Verify the [browser support](https://caniuse.com/#feat=mdn-css_selectors_part) meets the requirements before implementing parts in an app. If browser support for older versions is required, we recommend continuing to use [CSS Variables](../theming/css-variables.md) for styling.
+CSS Shadow Parts are supported in the recent versions of all of the major browsers. However, some of the older versions do not support shadow parts. Verify the [browser support](https://caniuse.com/#feat=mdn-css_selectors_part) meets the requirements before implementing parts in an app. If browser support for older versions is required, we recommend continuing to use [CSS Variables](../theming/css-variables.mdx) for styling.
 
 ### Vendor Prefixed Pseudo-Elements
 
diff --git a/docs/theming/css-variables.md b/versioned_docs/version-v9/theming/css-variables.mdx
similarity index 93%
rename from docs/theming/css-variables.md
rename to versioned_docs/version-v9/theming/css-variables.mdx
index 1de4515268e..5de7885d851 100644
--- a/docs/theming/css-variables.md
+++ b/versioned_docs/version-v9/theming/css-variables.mdx
@@ -91,8 +91,8 @@ const color = el.style.getPropertyValue('--background');
 
 ### Component Variables
 
-Ionic provides variables that exist at the component level, such as `--background` and `--color`. For a list of the custom properties a component accepts, view the `CSS Custom Properties` section of its [API reference](../api.md). For example, refer to the [Button CSS Custom Properties](../api/button.md#css-custom-properties).
+Ionic provides variables that exist at the component level, such as `--background` and `--color`. For a list of the custom properties a component accepts, view the `CSS Custom Properties` section of its [API reference](../api.mdx). For example, refer to the [Button CSS Custom Properties](../api/button.mdx#css-custom-properties).
 
 ### Global Variables
 
-There are several global variables that Ionic provides in order to make theming an entire application easier. For more information, refer to [Colors](colors.md), [Themes](themes.md) and [Advanced Theming](advanced.md).
+There are several global variables that Ionic provides in order to make theming an entire application easier. For more information, refer to [Colors](colors.mdx), [Themes](themes.mdx) and [Advanced Theming](advanced.mdx).
diff --git a/versioned_docs/version-v9/theming/dark-mode.md b/versioned_docs/version-v9/theming/dark-mode.mdx
similarity index 92%
rename from versioned_docs/version-v9/theming/dark-mode.md
rename to versioned_docs/version-v9/theming/dark-mode.mdx
index 02018e3ec4b..f2263b89159 100644
--- a/versioned_docs/version-v9/theming/dark-mode.md
+++ b/versioned_docs/version-v9/theming/dark-mode.mdx
@@ -208,13 +208,13 @@ For more information regarding `color-scheme`, please refer to the [Web.dev guid
 
 :::note
 
-`color-scheme` does not apply to the keyboard. For details on how dark mode works with the keyboard, refer to [Keyboard Documentation](../developing/keyboard.md#dark-mode).
+`color-scheme` does not apply to the keyboard. For details on how dark mode works with the keyboard, refer to [Keyboard Documentation](../developing/keyboard.mdx#dark-mode).
 
 :::
 
 :::note
 
-For developers looking to customize the theme color under the status bar in Safari on iOS 15 or the toolbar in Safari on macOS, refer to [`theme-color` Meta](./advanced.md#theme-color-meta).
+For developers looking to customize the theme color under the status bar in Safari on iOS 15 or the toolbar in Safari on macOS, refer to [`theme-color` Meta](./advanced.mdx#theme-color-meta).
 
 :::
 
@@ -222,7 +222,7 @@ For developers looking to customize the theme color under the status bar in Safa
 
 Ionic has a recommended dark palette that can be enabled in three different ways: [always](#always), based on [system](#system) settings, or by using a [CSS class](#css-class). Each of these methods involves importing the dark palette file with the corresponding name.
 
-The contents of each file are included below for reference. These variables are set by importing the relevant dark palette file and do not need to be copied into an app. For more information on the variables being changed, including additional variables for further customization, refer to the [Themes](themes.md) section.
+The contents of each file are included below for reference. These variables are set by importing the relevant dark palette file and do not need to be copied into an app. For more information on the variables being changed, including additional variables for further customization, refer to the [Themes](themes.mdx) section.
 
 <Tabs groupId="darkFiles" defaultValue="always" values={[{ value: 'always', label: 'Always (dark.always.css)' }, { value: 'system', label: 'System (dark.system.css)' }, { value: 'class', label: 'Class (dark.class.css)' }]}>
 
@@ -230,7 +230,7 @@ The contents of each file are included below for reference. These variables are
 
 The **always** dark palette behaves in the following ways:
 
-1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a dark palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher.
+1. Sets the [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement a dark palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher.
 2. Setting variables for the dark palette on `ios` devices using the `:root.ios` selector.
 3. Setting variables for the dark palette on `md` devices using the `:root.md` selector.
 
@@ -252,7 +252,7 @@ The contents of Ionic's dark palette can be [viewed on GitHub](https://github.co
 
 The **system** dark palette behaves in the following ways:
 
-1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a dark palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher.
+1. Sets the [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement a dark palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher.
 2. Setting variables for the dark palette on `ios` devices using the `:root.ios` selector.
 3. Setting variables for the dark palette on `md` devices using the `:root.md` selector.
 4. Only applies these variables when the [CSS media query for `prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) is `dark`.
@@ -275,7 +275,7 @@ The contents of Ionic's dark palette can be [viewed on GitHub](https://github.co
 
 The **class** dark palette behaves in the following ways:
 
-1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a dark palette in the `.ion-palette-dark` selector. The `.ion-palette-dark` class must be added to the `html` element in an app.
+1. Sets the [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement a dark palette in the `.ion-palette-dark` selector. The `.ion-palette-dark` class must be added to the `html` element in an app.
 2. Setting variables for the dark palette on `ios` devices using the `.ion-palette-dark.ios` selector.
 3. Setting variables for the dark palette on `md` devices using the `.ion-palette-dark.md` selector.
 
diff --git a/versioned_docs/version-v9/theming/high-contrast-mode.md b/versioned_docs/version-v9/theming/high-contrast-mode.mdx
similarity index 83%
rename from versioned_docs/version-v9/theming/high-contrast-mode.md
rename to versioned_docs/version-v9/theming/high-contrast-mode.mdx
index ef3e6fafa34..8574ac4de30 100644
--- a/versioned_docs/version-v9/theming/high-contrast-mode.md
+++ b/versioned_docs/version-v9/theming/high-contrast-mode.mdx
@@ -17,7 +17,7 @@ Ionic offers palettes with increased contrast for users with low vision. These p
 
 ## Overview
 
-The default palette in Ionic provides [Ionic colors](./colors.md) that meet [Level AA color contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) as defined by Web Content Accessibility Guidelines (WCAG) when used with the appropriate contrast color. The [Ionic colors](./colors.md) in the high contrast palette have been updated to meet [Level AAA color contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html) when used with the appropriate contrast color. Notably, improvements have been made to the contrast of UI components, including border, text, and background colors. However, it's important to note that within the high contrast palette, priority is given to text legibility. This means that if adjusting the contrast of a UI component against the page background would significantly compromise the contrast between the component's text and its background, the contrast of the UI component background will remain unchanged.
+The default palette in Ionic provides [Ionic colors](./colors.mdx) that meet [Level AA color contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) as defined by Web Content Accessibility Guidelines (WCAG) when used with the appropriate contrast color. The [Ionic colors](./colors.mdx) in the high contrast palette have been updated to meet [Level AAA color contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html) when used with the appropriate contrast color. Notably, improvements have been made to the contrast of UI components, including border, text, and background colors. However, it's important to note that within the high contrast palette, priority is given to text legibility. This means that if adjusting the contrast of a UI component against the page background would significantly compromise the contrast between the component's text and its background, the contrast of the UI component background will remain unchanged.
 
 ## Enabling High Contrast Theme
 
@@ -131,7 +131,7 @@ import SystemHighContrastMode from '@site/static/usage/v9/theming/system-high-co
 
 :::caution
 
-The high contrast light palette must be imported after [core.css](../layout/global-stylesheets.md#corecss), and the
+The high contrast light palette must be imported after [core.css](../layout/global-stylesheets.mdx#corecss), and the
 high contrast dark palette must be imported after `dark.system.css`. Otherwise, the standard contrast palette will take priority.
 
 :::
@@ -177,7 +177,7 @@ import '@ionic/vue/css/palettes/high-contrast-dark.class.css';
 
 </Tabs>
 
-This approach activates the high contrast palette when the `.ion-palette-high-contrast` class is set on the `html` element. This class must be applied by the developer. This can be combined with the [`.ion-palette-dark` class](./dark-mode.md#css-class) to conditionally apply the high contrast dark palette.
+This approach activates the high contrast palette when the `.ion-palette-high-contrast` class is set on the `html` element. This class must be applied by the developer. This can be combined with the [`.ion-palette-dark` class](./dark-mode.mdx#css-class) to conditionally apply the high contrast dark palette.
 
 The following example combines site settings, system settings, and the toggle to decide when to show high contrast mode. The site's palette takes precedence over system settings. If your system settings differ from the site's palette when the demo loads, it will use the site's palette.
 
@@ -193,7 +193,7 @@ import ClassHighContrastMode from '@site/static/usage/v9/theming/class-high-cont
 
 :::caution
 
-The high contrast light palette must be imported after [core.css](../layout/global-stylesheets.md#corecss),
+The high contrast light palette must be imported after [core.css](../layout/global-stylesheets.mdx#corecss),
 and the high contrast dark palette must be imported after `dark.class.css`. Otherwise, the standard contrast palette will take
 priority.
 
@@ -209,7 +209,7 @@ The `.ion-palette-high-contrast` class **must** be added to the `html` element i
 
 Ionic has a recommended high contrast palette that can be enabled in three different ways: [always](#always), based on [system](#system) settings, or by using a [CSS class](#css-class). Each of these methods involves importing the high contrast palette file with the corresponding name.
 
-The theme variables are set by importing the relevant high contrast palette file and do not need to be copied into an app. For more information on the variables being changed, including additional variables for further customization, refer to the [Themes](themes.md) section.
+The theme variables are set by importing the relevant high contrast palette file and do not need to be copied into an app. For more information on the variables being changed, including additional variables for further customization, refer to the [Themes](themes.mdx) section.
 
 The following provides details on how to customize the high contrast palette depending on how it was applied in an application.
 
@@ -221,7 +221,7 @@ The **always** high contrast palette can be accessed by importing `high-contrast
 
 The **always** high contrast palette behaves in the following ways:
 
-1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a high contrast palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher.
+1. Sets the [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement a high contrast palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher.
 2. Setting variables for the high contrast palette on `ios` devices using the `:root.ios` selector.
 3. Setting variables for the high contrast palette on `md` devices using the `:root.md` selector.
 
@@ -233,7 +233,7 @@ The **system** high contrast palette can be accessed by importing `high-contrast
 
 The **system** high contrast palette behaves in the following ways:
 
-1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a high contrast palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher.
+1. Sets the [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement a high contrast palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher.
 2. Setting variables for the high contrast palette on `ios` devices using the `:root.ios` selector.
 3. Setting variables for the high contrast palette on `md` devices using the `:root.md` selector.
 4. Only applies these variables when the [CSS media query for `prefers-contrast`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) is `more`.
@@ -246,7 +246,7 @@ The **class** high contrast palette can be accessed by importing `high-contrast.
 
 The **class** high contrast palette behaves in the following ways:
 
-1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a high contrast palette in the `.ion-palette-high-contrast` selector. The `.ion-palette-high-contrast` class must be added to the `html` element in an app.
+1. Sets the [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement a high contrast palette in the `.ion-palette-high-contrast` selector. The `.ion-palette-high-contrast` class must be added to the `html` element in an app.
 2. Setting variables for the high contrast palette on `ios` devices using the `.ion-palette-high-contrast.ios` selector.
 3. Setting variables for the high contrast palette on `md` devices using the `.ion-palette-high-contrast.md` selector.
 
diff --git a/docs/theming/platform-styles.md b/versioned_docs/version-v9/theming/platform-styles.mdx
similarity index 89%
rename from docs/theming/platform-styles.md
rename to versioned_docs/version-v9/theming/platform-styles.mdx
index 77d0a5665fc..e58a1be4579 100644
--- a/docs/theming/platform-styles.md
+++ b/versioned_docs/version-v9/theming/platform-styles.mdx
@@ -14,7 +14,7 @@ Ionic provides platform specific styles based on the device the application is r
 
 ## Ionic Modes
 
-Ionic uses **modes** to customize the look of components. Each **platform** has a default **mode**, but this can be overridden through the global [config](../developing/config.md). The following chart displays the default **mode** that is added to each **platform**:
+Ionic uses **modes** to customize the look of components. Each **platform** has a default **mode**, but this can be overridden through the global [config](../developing/config.mdx). The following chart displays the default **mode** that is added to each **platform**:
 
 | Platform  | Mode  | Description                                                                                                                      |
 | --------- | ----- | -------------------------------------------------------------------------------------------------------------------------------- |
@@ -28,7 +28,7 @@ For example, an app being viewed on an Android platform will use the `md` (Mater
 <html class="md"></html>
 ```
 
-_Note: The **platform** and the **mode** are not the same. The platform can be set to use any mode in the [config](../developing/config.md) of an app._
+_Note: The **platform** and the **mode** are not the same. The platform can be set to use any mode in the [config](../developing/config.mdx) of an app._
 
 ## Overriding Mode Styles
 
@@ -48,4 +48,4 @@ There are also many global CSS variables that can be used to override the styles
 }
 ```
 
-There are many global variables that can be overridden by mode, including [Ionic's color variables](colors.md), [theme variables](themes.md) and [global component variables](advanced.md).
+There are many global variables that can be overridden by mode, including [Ionic's color variables](colors.mdx), [theme variables](themes.mdx) and [global component variables](advanced.mdx).
diff --git a/versioned_docs/version-v8/theming/themes.md b/versioned_docs/version-v9/theming/themes.mdx
similarity index 98%
rename from versioned_docs/version-v8/theming/themes.md
rename to versioned_docs/version-v9/theming/themes.mdx
index 77c201b36b4..4b68041ec92 100644
--- a/versioned_docs/version-v8/theming/themes.md
+++ b/versioned_docs/version-v9/theming/themes.mdx
@@ -19,7 +19,7 @@ Ionic provides several global variables that are used throughout components to c
 
 The application colors are used in multiple places in Ionic. These are useful for easily creating dark palettes or themes that match a brand.
 
-It is important to note that the background and text color variables also require a rgb variable to be set in [rgb format](https://developer.mozilla.org/en-US/docs/Glossary/RGB). Refer to [The Alpha Problem](advanced.md#the-alpha-problem) for an explanation of why the `rgb` property is also needed.
+It is important to note that the background and text color variables also require a rgb variable to be set in [rgb format](https://developer.mozilla.org/en-US/docs/Glossary/RGB). Refer to [The Alpha Problem](advanced.mdx#the-alpha-problem) for an explanation of why the `rgb` property is also needed.
 
 | Name                                       | Description                                          |
 | ------------------------------------------ | ---------------------------------------------------- |
diff --git a/versioned_docs/version-v9/troubleshooting/build.md b/versioned_docs/version-v9/troubleshooting/build.mdx
similarity index 100%
rename from versioned_docs/version-v9/troubleshooting/build.md
rename to versioned_docs/version-v9/troubleshooting/build.mdx
diff --git a/versioned_docs/version-v9/troubleshooting/cors.md b/versioned_docs/version-v9/troubleshooting/cors.mdx
similarity index 100%
rename from versioned_docs/version-v9/troubleshooting/cors.md
rename to versioned_docs/version-v9/troubleshooting/cors.mdx
diff --git a/versioned_docs/version-v8/troubleshooting/debugging.md b/versioned_docs/version-v9/troubleshooting/debugging.mdx
similarity index 99%
rename from versioned_docs/version-v8/troubleshooting/debugging.md
rename to versioned_docs/version-v9/troubleshooting/debugging.mdx
index 96db1dce221..d10f67d5efc 100644
--- a/versioned_docs/version-v8/troubleshooting/debugging.md
+++ b/versioned_docs/version-v9/troubleshooting/debugging.mdx
@@ -21,7 +21,7 @@ title: Debugging
 
 ## Live Reload
 
-Live Reload is useful for debugging native functionality (such as plugins) on device hardware. Rather than deploy a new native binary each time you make a code change, it reloads the browser (or WebView) when changes in the app are detected. Learn more about [Live Reload](../cli/livereload.md).
+Live Reload is useful for debugging native functionality (such as plugins) on device hardware. Rather than deploy a new native binary each time you make a code change, it reloads the browser (or WebView) when changes in the app are detected. Learn more about [Live Reload](../cli/livereload.mdx).
 
 ## iOS and Safari
 
diff --git a/docs/troubleshooting/native.md b/versioned_docs/version-v9/troubleshooting/native.mdx
similarity index 97%
rename from docs/troubleshooting/native.md
rename to versioned_docs/version-v9/troubleshooting/native.mdx
index 357e40b45f0..d600b0b820c 100644
--- a/docs/troubleshooting/native.md
+++ b/versioned_docs/version-v9/troubleshooting/native.mdx
@@ -18,7 +18,7 @@ Code Signing Error: Failed to create provisioning profile. The app ID "com.csfor
 
 Running an app on an iOS device requires a provisioning profile. If a provisioning profile has not been created yet follow these directions:
 
-1. **Set the [Package ID](../reference/glossary.md#package-id).**
+1. **Set the [Package ID](../reference/glossary.mdx#package-id).**
 
    For Capacitor, open the `capacitor.config.json` file and modify the `appId` property.
 
@@ -48,7 +48,7 @@ Running an app on an iOS device requires a provisioning profile. If a provisioni
 Error: Error code 65 for command: xcodebuild with args: -xcconfig,/Users/ionitron/projects/my-project/platforms/ios/cordova/build-debug.xcconfig,-workspace,SC project.xcworkspace,-scheme,SC project,-configuration,Debug,-sdk,iphonesimulator,-destination,platform=iOS Simulator,name=iPhone X,build,CONFIGURATION_BUILD_DIR=/Users/ionitron/projects/my-project/platforms/ios/build/emulator,SHARED_PRECOMPS_DIR=/Users/ionitron/projects/my-project/platforms/ios/build/sharedpch
 ```
 
-This error is an error code from Xcode that can be caused by provisioning issues or outdated cordova dependencies. To fix this error first make sure a provisioning profile has been generated using the above instructions and then try to [run the app from Xcode](../developing/ios.md#running-with-xcode).
+This error is an error code from Xcode that can be caused by provisioning issues or outdated cordova dependencies. To fix this error first make sure a provisioning profile has been generated using the above instructions and then try to [run the app from Xcode](../developing/ios.mdx#running-with-xcode).
 
 If this does not fix the error then run the following commands:
 
diff --git a/versioned_docs/version-v9/troubleshooting/runtime.md b/versioned_docs/version-v9/troubleshooting/runtime.mdx
similarity index 100%
rename from versioned_docs/version-v9/troubleshooting/runtime.md
rename to versioned_docs/version-v9/troubleshooting/runtime.mdx
diff --git a/versioned_docs/version-v8/updating/4-0.md b/versioned_docs/version-v9/updating/4-0.mdx
similarity index 96%
rename from versioned_docs/version-v8/updating/4-0.md
rename to versioned_docs/version-v9/updating/4-0.mdx
index 98542a050f7..01b422e1e14 100644
--- a/versioned_docs/version-v8/updating/4-0.md
+++ b/versioned_docs/version-v9/updating/4-0.mdx
@@ -23,7 +23,7 @@ For a **complete list of breaking changes** from Ionic 3 to Ionic 4, please refe
 
 We suggest the following general process when migrating an existing application from Ionic 3 to 4:
 
-1. Generate a new project using the `blank` starter (refer to [Starting an App](../developing/starting.md))
+1. Generate a new project using the `blank` starter (refer to [Starting an App](../developing/starting.mdx))
 1. Copy any Angular services from `src/providers` to `src/app/services`
    - Services should include `{ providedIn: 'root' }` in the `@Injectable()` decorator. For details, please refer to Angular [provider docs](https://angular.io/guide/providers).
 1. Copy the app's other root-level items (pipes, components, etc) keeping in mind that the directory structure changes from `src/components` to `src/app/components`, etc.
@@ -150,7 +150,7 @@ With V4, we're now able to utilize the typical events provided by [Angular](http
 
 Older events like `ionViewDidLoad`, `ionViewCanLeave`, and `ionViewCanEnter` have been removed, and the proper Angular alternatives should be used.
 
-For more details, check out the [router-outlet docs](../api/router-outlet.md)
+For more details, check out the [router-outlet docs](../api/router-outlet.mdx)
 
 ### Overlay Components
 
@@ -196,7 +196,7 @@ In V4, navigation received the most changes. Now, instead of using Ionic's own `
 
 To provide the platform-specific animations that users are used to, we have created `ion-router-outlet` for Angular Apps. This behaves in a similar manner to Angular's `router-outlet` but provides a stack-based navigation (tabs) and animations.
 
-For a detailed explanation in navigation works in a V4 project, check out the [Angular navigation guide](../angular/navigation.md).
+For a detailed explanation in navigation works in a V4 project, check out the [Angular navigation guide](../angular/navigation.mdx).
 
 ### Lazy Loading
 
@@ -246,7 +246,7 @@ export class HomePageModule {}
 export class AppModule {}
 ```
 
-For a detailed explanation of lazy loading in V4 project, check out the [Angular navigation guide](../angular/navigation.md#lazy-loading-routes).
+For a detailed explanation of lazy loading in V4 project, check out the [Angular navigation guide](../angular/navigation.mdx#lazy-loading-routes).
 
 ### Markup Changes
 
@@ -265,7 +265,7 @@ One upside is that for the most part, the Ionic UI components you know and love
 Here are some considerations to review before beginning the upgrade:
 
 - **App complexity**: Naturally, the larger and more complex the app is, the longer it will take to migrate.
-- **Framework support**: In 2019, Ionic will release full support for React. You can also use Ionic Framework components [without a framework](../intro/cdn.md). Since these are not production-ready yet, we recommend sticking with Angular or waiting until the other framework support is available.
+- **Framework support**: In 2019, Ionic will release full support for React. You can also use Ionic Framework components [without a framework](../intro/cdn.mdx). Since these are not production-ready yet, we recommend sticking with Angular or waiting until the other framework support is available.
 - **Budget and team makeup**: The length of a migration project will vary based on the size of your team, the complexity of the app, and the amount of time allotted to make the transition.
 
 ### Suggested Strategy
@@ -282,7 +282,7 @@ Please reference official [Angular upgrade guide](https://angular.io/guide/upgra
 
 ### Ionic Changes
 
-Our Ionic 3 to Ionic 4 migration sections above may prove to be a useful reference. Generate a new Ionic 4 project using the blank starter (refer to [Starting an App](../developing/starting.md)). Spend time getting familiar with Ionic 4 components. Happy building!
+Our Ionic 3 to Ionic 4 migration sections above may prove to be a useful reference. Generate a new Ionic 4 project using the blank starter (refer to [Starting an App](../developing/starting.mdx)). Spend time getting familiar with Ionic 4 components. Happy building!
 
 ### Need Assistance?
 
diff --git a/versioned_docs/version-v9/updating/5-0.md b/versioned_docs/version-v9/updating/5-0.mdx
similarity index 100%
rename from versioned_docs/version-v9/updating/5-0.md
rename to versioned_docs/version-v9/updating/5-0.mdx
diff --git a/versioned_docs/version-v9/updating/6-0.md b/versioned_docs/version-v9/updating/6-0.mdx
similarity index 100%
rename from versioned_docs/version-v9/updating/6-0.md
rename to versioned_docs/version-v9/updating/6-0.mdx
diff --git a/versioned_docs/version-v9/updating/7-0.md b/versioned_docs/version-v9/updating/7-0.mdx
similarity index 100%
rename from versioned_docs/version-v9/updating/7-0.md
rename to versioned_docs/version-v9/updating/7-0.mdx
diff --git a/versioned_docs/version-v9/updating/8-0.md b/versioned_docs/version-v9/updating/8-0.mdx
similarity index 100%
rename from versioned_docs/version-v9/updating/8-0.md
rename to versioned_docs/version-v9/updating/8-0.mdx
diff --git a/versioned_docs/version-v9/updating/9-0.md b/versioned_docs/version-v9/updating/9-0.mdx
similarity index 99%
rename from versioned_docs/version-v9/updating/9-0.md
rename to versioned_docs/version-v9/updating/9-0.mdx
index 130e5908542..05381929287 100644
--- a/versioned_docs/version-v9/updating/9-0.md
+++ b/versioned_docs/version-v9/updating/9-0.mdx
@@ -67,7 +67,7 @@ npm install @ionic/angular@latest @ionic/angular-server@latest @ionic/angular-to
 
 Ionic 9 supports zoneless change detection. Angular 21 made zoneless the default, so a new Ionic 9 app on Angular 21 or later runs without Zone.js out of the box and no change-detection provider is required.
 
-Without Zone.js, Angular does not automatically re-render when you update component state from an asynchronous callback (awaiting an overlay result, `setTimeout`, RxJS subscriptions, `Platform` events). In those cases you must notify Angular with a signal or `ChangeDetectorRef.markForCheck()`. Refer to [Zoneless Change Detection](/docs/angular/zoneless.md) for the patterns Ionic apps use.
+Without Zone.js, Angular does not automatically re-render when you update component state from an asynchronous callback (awaiting an overlay result, `setTimeout`, RxJS subscriptions, `Platform` events). In those cases you must notify Angular with a signal or `ChangeDetectorRef.markForCheck()`. Refer to [Zoneless Change Detection](/docs/angular/zoneless.mdx) for the patterns Ionic apps use.
 
 :::note
 
@@ -162,7 +162,7 @@ Ionic 9 makes standalone components the default import path. Change lazy-loaded
 
 #### IonicModule Deprecation
 
-`IonicModule` is deprecated in Ionic 9 and will be removed in a future major version. It remains fully functional, so no immediate action is required. When you are ready, migrate to `provideIonicAngular()`, which works in both standalone and NgModule-based apps. Refer to [Migrating from Modules to Standalone](/docs/angular/build-options.md#migrating-from-modules-to-standalone).
+`IonicModule` is deprecated in Ionic 9 and will be removed in a future major version. It remains fully functional, so no immediate action is required. When you are ready, migrate to `provideIonicAngular()`, which works in both standalone and NgModule-based apps. Refer to [Migrating from Modules to Standalone](/docs/angular/build-options.mdx#migrating-from-modules-to-standalone).
 
 #### CSS Imports
 
@@ -608,8 +608,8 @@ Update your selectors to account for these structural changes:
 
 The `ion-picker-legacy` and `ion-picker-legacy-column` components have been removed.
 
-- Replace `ion-picker-legacy` with `ion-picker`, and `ion-picker-legacy-column` with `ion-picker-column`. Since `ion-picker` renders inline instead of as an overlay, present it inside an `ion-modal` to keep the previous experience. Review the [Picker in Modal documentation](../api/picker.md#picker-in-modal) for more information.
-- Remove any usages of `pickerController`. If using React, remove any usages of the `useIonPicker` hook. These controller-based APIs have been removed. Use the [Picker](../api/picker.md) component instead.
+- Replace `ion-picker-legacy` with `ion-picker`, and `ion-picker-legacy-column` with `ion-picker-column`. Since `ion-picker` renders inline instead of as an overlay, present it inside an `ion-modal` to keep the previous experience. Review the [Picker in Modal documentation](../api/picker.mdx#picker-in-modal) for more information.
+- Remove any usages of `pickerController`. If using React, remove any usages of the `useIonPicker` hook. These controller-based APIs have been removed. Use the [Picker](../api/picker.mdx) component instead.
 - Remove any usages of the `PickerOptions`, `PickerButton`, `PickerColumn`, and `PickerColumnOption` type exports. These types were associated with the legacy picker and have been removed.
 
 ### Modal
@@ -650,7 +650,7 @@ If you relied on `ion-nav` to update the URL, use `ion-router-outlet` for URL-ba
 + <ion-router-outlet></ion-router-outlet>
 ```
 
-An `ion-nav` can still be nested inside a routed page for local, URL-less stack navigation. It manages its own stack via `root` and `ion-nav-link`, and the URL never changes as you push and pop. For a complete, working example, refer to [Using ion-nav within a Routed Page](../api/router.md#using-ion-nav-within-a-routed-page).
+An `ion-nav` can still be nested inside a routed page for local, URL-less stack navigation. It manages its own stack via `root` and `ion-nav-link`, and the URL never changes as you push and pop. For a complete, working example, refer to [Using ion-nav within a Routed Page](../api/router.mdx#using-ion-nav-within-a-routed-page).
 
 ### Router Outlet
 
diff --git a/versioned_docs/version-v9/utilities/animations.md b/versioned_docs/version-v9/utilities/animations.mdx
similarity index 99%
rename from versioned_docs/version-v9/utilities/animations.md
rename to versioned_docs/version-v9/utilities/animations.mdx
index 2ab8b3c6832..427e7528a3d 100644
--- a/versioned_docs/version-v9/utilities/animations.md
+++ b/versioned_docs/version-v9/utilities/animations.mdx
@@ -212,7 +212,7 @@ import Chain from '@site/static/usage/v9/animations/chain/index.mdx';
 
 ## Gesture Animations
 
-Ionic Animations gives developers the ability to create powerful gesture-based animations by integrating seamlessly with [Ionic Gestures](gestures.md).
+Ionic Animations gives developers the ability to create powerful gesture-based animations by integrating seamlessly with [Ionic Gestures](gestures.mdx).
 
 In the following example we are creating a track along which we can drag the card element. Our `animation` object will take care of moving the card element either left or right, and our `gesture` object will instruct the `animation` object which direction to move in.
 
diff --git a/versioned_docs/version-v9/utilities/gestures.md b/versioned_docs/version-v9/utilities/gestures.mdx
similarity index 99%
rename from versioned_docs/version-v9/utilities/gestures.md
rename to versioned_docs/version-v9/utilities/gestures.mdx
index 7ba9c31c77f..10ade49d77f 100644
--- a/versioned_docs/version-v9/utilities/gestures.md
+++ b/versioned_docs/version-v9/utilities/gestures.mdx
@@ -178,7 +178,7 @@ In the example below, we want to be able to detect double clicks on an element.
 
 ## Gesture Animations
 
-See our guide on implementing gesture animations: [Gesture Animations with Ionic Animations](animations.md#gesture-animations)
+See our guide on implementing gesture animations: [Gesture Animations with Ionic Animations](animations.mdx#gesture-animations)
 
 ## Types
 
diff --git a/docs/vue/add-to-existing.md b/versioned_docs/version-v9/vue/add-to-existing.mdx
similarity index 92%
rename from docs/vue/add-to-existing.md
rename to versioned_docs/version-v9/vue/add-to-existing.mdx
index f4e88f1fc3f..684cde9ec48 100644
--- a/docs/vue/add-to-existing.md
+++ b/versioned_docs/version-v9/vue/add-to-existing.mdx
@@ -14,7 +14,7 @@ import DocsCards from '@components/global/DocsCards';
   />
 </head>
 
-This guide covers how to add Ionic Vue to an existing Vue project. If you're looking to start a new project from scratch, check out the [Ionic Vue Quickstart](/docs/vue/quickstart.md) guide. For an overview of how Ionic Vue works with Vue, including version support and tooling, check out the [Ionic Vue Overview](/docs/vue/overview.md).
+This guide covers how to add Ionic Vue to an existing Vue project. If you're looking to start a new project from scratch, check out the [Ionic Vue Quickstart](/docs/vue/quickstart.mdx) guide. For an overview of how Ionic Vue works with Vue, including version support and tooling, check out the [Ionic Vue Overview](/docs/vue/overview.mdx).
 
 :::tip
 
@@ -61,7 +61,7 @@ createApp(App).use(IonicVue).mount('#app');
 
 :::info
 
-While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.md).
+While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.mdx).
 
 :::
 
@@ -82,7 +82,7 @@ import { IonButton, IonDatetime } from '@ionic/vue';
 </script>
 ```
 
-Visit the [components](/docs/components.md) page for all of the available Ionic components.
+Visit the [components](/docs/components.mdx) page for all of the available Ionic components.
 
 ## Using Ionic Pages
 
@@ -110,7 +110,7 @@ import '@ionic/vue/css/flex-utils.css';
 import '@ionic/vue/css/display.css';
 ```
 
-These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.md) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.md).
+These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.mdx) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.mdx).
 
 #### 2. Set up Theming
 
@@ -162,7 +162,7 @@ import './theme/variables.css';
 createApp(App).use(IonicVue).mount('#app');
 ```
 
-The `variables.css` file can be used to create custom Ionic Framework themes. The `dark.system.css` import enables [dark mode support](/docs/theming/dark-mode.md) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables to `theme/variables.css`.
+The `variables.css` file can be used to create custom Ionic Framework themes. The `dark.system.css` import enables [dark mode support](/docs/theming/dark-mode.mdx) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables to `theme/variables.css`.
 
 #### 3. Update the App Component
 
diff --git a/versioned_docs/version-v9/vue/build-options.md b/versioned_docs/version-v9/vue/build-options.mdx
similarity index 100%
rename from versioned_docs/version-v9/vue/build-options.md
rename to versioned_docs/version-v9/vue/build-options.mdx
diff --git a/versioned_docs/version-v9/vue/lifecycle.md b/versioned_docs/version-v9/vue/lifecycle.mdx
similarity index 100%
rename from versioned_docs/version-v9/vue/lifecycle.md
rename to versioned_docs/version-v9/vue/lifecycle.mdx
diff --git a/versioned_docs/version-v9/vue/navigation.md b/versioned_docs/version-v9/vue/navigation.mdx
similarity index 100%
rename from versioned_docs/version-v9/vue/navigation.md
rename to versioned_docs/version-v9/vue/navigation.mdx
diff --git a/docs/vue/overview.md b/versioned_docs/version-v9/vue/overview.mdx
similarity index 92%
rename from docs/vue/overview.md
rename to versioned_docs/version-v9/vue/overview.mdx
index f867fe05796..d6f8d924161 100644
--- a/docs/vue/overview.md
+++ b/versioned_docs/version-v9/vue/overview.mdx
@@ -28,7 +28,7 @@ Ionic Vue projects use the same tooling as standard Vue CLI projects, so you can
 
 [Capacitor](https://capacitorjs.com) is the official cross-platform runtime for Ionic Vue, enabling your apps to run natively on iOS, Android, and the web with a single codebase.
 
-While you can use many [Cordova](https://cordova.apache.org/) plugins with Ionic Vue, Capacitor is the recommended and fully supported solution. The [Ionic CLI](../cli.md) does not provide official Cordova integration for Ionic Vue projects. For more information on using Cordova plugins with Capacitor, refer to the [Capacitor documentation](https://capacitorjs.com/docs/cordova).
+While you can use many [Cordova](https://cordova.apache.org/) plugins with Ionic Vue, Capacitor is the recommended and fully supported solution. The [Ionic CLI](../cli.mdx) does not provide official Cordova integration for Ionic Vue projects. For more information on using Cordova plugins with Capacitor, refer to the [Capacitor documentation](https://capacitorjs.com/docs/cordova).
 
 ## Installation
 
diff --git a/versioned_docs/version-v9/vue/performance.md b/versioned_docs/version-v9/vue/performance.mdx
similarity index 100%
rename from versioned_docs/version-v9/vue/performance.md
rename to versioned_docs/version-v9/vue/performance.mdx
diff --git a/versioned_docs/version-v9/vue/platform.md b/versioned_docs/version-v9/vue/platform.mdx
similarity index 100%
rename from versioned_docs/version-v9/vue/platform.md
rename to versioned_docs/version-v9/vue/platform.mdx
diff --git a/versioned_docs/version-v9/vue/pwa.md b/versioned_docs/version-v9/vue/pwa.mdx
similarity index 100%
rename from versioned_docs/version-v9/vue/pwa.md
rename to versioned_docs/version-v9/vue/pwa.mdx
diff --git a/docs/vue/quickstart.md b/versioned_docs/version-v9/vue/quickstart.mdx
similarity index 93%
rename from docs/vue/quickstart.md
rename to versioned_docs/version-v9/vue/quickstart.mdx
index a88b14871b0..bea913c0901 100644
--- a/docs/vue/quickstart.md
+++ b/versioned_docs/version-v9/vue/quickstart.mdx
@@ -162,17 +162,17 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue
 <!-- ...styles... -->
 ```
 
-This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
+This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.mdx#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
 :::tip[Learn More]
 
-For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
+For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.mdx), [Toolbar](/docs/api/toolbar.mdx), [Title](/docs/api/title.mdx), and [Content](/docs/api/content.mdx) documentation.
 
 :::
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.md) at the end of the `ion-content`:
+You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.mdx) at the end of the `ion-content`:
 
 ```vue title="src/views/HomePage.vue"
 <ion-content>
@@ -221,7 +221,7 @@ import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, Io
 </script>
 ```
 
-This creates a page with a [Back Button](/docs/api/back-button.md) in the [Toolbar](/docs/api/toolbar.md). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
+This creates a page with a [Back Button](/docs/api/back-button.mdx) in the [Toolbar](/docs/api/toolbar.mdx). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
 
 :::warning
 
@@ -266,7 +266,7 @@ Once that is done, update the button in `HomePage.vue`:
 
 :::info
 
-Navigating can also be performed programmatically using Vue Router, and routes can be lazy loaded for better performance. Refer to the [Vue Navigation documentation](/docs/vue/navigation.md) for more information.
+Navigating can also be performed programmatically using Vue Router, and routes can be lazy loaded for better performance. Refer to the [Vue Navigation documentation](/docs/vue/navigation.mdx) for more information.
 
 :::
 
@@ -292,7 +292,7 @@ Then, include them inside of the `ion-content`:
 
 Note that we are passing the imported SVG reference, **not** the icon name as a string.
 
-For more information, refer to the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
+For more information, refer to the [Icon documentation](/docs/api/icon.mdx) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
 ## Call Component Methods
 
@@ -347,7 +347,7 @@ To call methods on Ionic components:
 
 This pattern is necessary because Ionic components are built as Web Components. The `$el` property gives you access to the actual Web Component instance where the methods are defined.
 
-You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation.
+You can find available methods for each component in the [Methods](/docs/api/content.mdx#methods) section of their API documentation.
 
 ## Run on a Device
 
diff --git a/versioned_docs/version-v9/vue/slides.md b/versioned_docs/version-v9/vue/slides.mdx
similarity index 100%
rename from versioned_docs/version-v9/vue/slides.md
rename to versioned_docs/version-v9/vue/slides.mdx
diff --git a/versioned_docs/version-v9/vue/storage.md b/versioned_docs/version-v9/vue/storage.mdx
similarity index 100%
rename from versioned_docs/version-v9/vue/storage.md
rename to versioned_docs/version-v9/vue/storage.mdx
diff --git a/versioned_docs/version-v9/vue/testing.md b/versioned_docs/version-v9/vue/testing.mdx
similarity index 100%
rename from versioned_docs/version-v9/vue/testing.md
rename to versioned_docs/version-v9/vue/testing.mdx
diff --git a/versioned_docs/version-v8/vue/troubleshooting.md b/versioned_docs/version-v9/vue/troubleshooting.mdx
similarity index 93%
rename from versioned_docs/version-v8/vue/troubleshooting.md
rename to versioned_docs/version-v9/vue/troubleshooting.mdx
index 1383c81dfa3..a0f82ac90a9 100644
--- a/versioned_docs/version-v8/vue/troubleshooting.md
+++ b/versioned_docs/version-v9/vue/troubleshooting.mdx
@@ -36,7 +36,7 @@ import { IonButton } from '@ionic/vue';
 </script>
 ```
 
-Prefer to register your components globally once? We have you covered. Our [Optimizing Your Build Guide](quickstart.md#optimizing-your-build) shows you how to register Ionic Vue components globally as well as the potential downsides to be aware of when using this approach.
+Prefer to register your components globally once? We have you covered. Our [Optimizing Your Build Guide](quickstart.mdx#optimizing-your-build) shows you how to register Ionic Vue components globally as well as the potential downsides to be aware of when using this approach.
 
 ## Slot attributes are deprecated
 
@@ -74,7 +74,7 @@ ionContentRef.value.scrollToBottom();
 
 In other framework integrations such as Ionic React, this is not needed as any `ref` you provide is automatically forwarded to the underlying Web Component instance. We are unable to do the same thing here due to limitations in how Vue manages refs.
 
-Refer to the [Quickstart Guide](quickstart.md#calling-methods-on-components) for more information.
+Refer to the [Quickstart Guide](quickstart.mdx#calling-methods-on-components) for more information.
 
 ## Page transitions are not working
 
@@ -97,7 +97,7 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue
 </script>
 ```
 
-Refer to the [IonPage documentation](navigation.md#ionpage) for more information.
+Refer to the [IonPage documentation](navigation.mdx#ionpage) for more information.
 
 ## Ionic events bound in JavaScript are not firing
 
diff --git a/versioned_docs/version-v9/vue/utility-functions.md b/versioned_docs/version-v9/vue/utility-functions.mdx
similarity index 100%
rename from versioned_docs/version-v9/vue/utility-functions.md
rename to versioned_docs/version-v9/vue/utility-functions.mdx
diff --git a/versioned_docs/version-v9/vue/virtual-scroll.md b/versioned_docs/version-v9/vue/virtual-scroll.mdx
similarity index 100%
rename from versioned_docs/version-v9/vue/virtual-scroll.md
rename to versioned_docs/version-v9/vue/virtual-scroll.mdx
diff --git a/versioned_docs/version-v8/vue/your-first-app.md b/versioned_docs/version-v9/vue/your-first-app.mdx
similarity index 96%
rename from versioned_docs/version-v8/vue/your-first-app.md
rename to versioned_docs/version-v9/vue/your-first-app.mdx
index 604849f47ca..7245297ac81 100644
--- a/versioned_docs/version-v8/vue/your-first-app.md
+++ b/versioned_docs/version-v9/vue/your-first-app.mdx
@@ -30,7 +30,7 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
 
 Highlights include:
 
-- One Vue-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.md).
+- One Vue-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.mdx).
 - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
 - Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs.
 
@@ -64,7 +64,7 @@ npm install -g @ionic/cli native-run cordova-res
 
 The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
 
-Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information.
 
 :::
 
@@ -172,7 +172,7 @@ import ExploreContainer from '@/components/ExploreContainer.vue';
 </script>
 ```
 
-`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.md#collapsible-large-titles) support). Rename both `ion-title` elements to:
+`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.mdx#collapsible-large-titles) support). Rename both `ion-title` elements to:
 
 ```vue
 <template>
@@ -197,7 +197,7 @@ import ExploreContainer from '@/components/ExploreContainer.vue';
 </template>
 ```
 
-We put the visual aspects of our app into `<ion-content>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.md) (FAB) to the bottom of the page and set the camera image as the icon.
+We put the visual aspects of our app into `<ion-content>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.mdx) (FAB) to the bottom of the page and set the camera image as the icon.
 
 ```vue
 <template>
diff --git a/docs/vue/your-first-app/2-taking-photos.md b/versioned_docs/version-v9/vue/your-first-app/2-taking-photos.mdx
similarity index 96%
rename from docs/vue/your-first-app/2-taking-photos.md
rename to versioned_docs/version-v9/vue/your-first-app/2-taking-photos.mdx
index df53544c349..80e0e8d98fd 100644
--- a/docs/vue/your-first-app/2-taking-photos.md
+++ b/versioned_docs/version-v9/vue/your-first-app/2-taking-photos.mdx
@@ -192,7 +192,7 @@ export interface UserPhoto {
 }
 ```
 
-Next, switch to `Tab2Page.vue` to display the images. We'll add a [Grid component](../../api/grid.md) to ensure the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `UserPhoto`'s `photos` array. For each item, add an `<img>` element and set its `src` property to the photo's path.
+Next, switch to `Tab2Page.vue` to display the images. We'll add a [Grid component](../../api/grid.mdx) to ensure the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `UserPhoto`'s `photos` array. For each item, add an `<img>` element and set its `src` property to the photo's path.
 
 ```vue
 <template>
diff --git a/versioned_docs/version-v9/vue/your-first-app/3-saving-photos.md b/versioned_docs/version-v9/vue/your-first-app/3-saving-photos.mdx
similarity index 100%
rename from versioned_docs/version-v9/vue/your-first-app/3-saving-photos.md
rename to versioned_docs/version-v9/vue/your-first-app/3-saving-photos.mdx
diff --git a/versioned_docs/version-v9/vue/your-first-app/4-loading-photos.md b/versioned_docs/version-v9/vue/your-first-app/4-loading-photos.mdx
similarity index 100%
rename from versioned_docs/version-v9/vue/your-first-app/4-loading-photos.md
rename to versioned_docs/version-v9/vue/your-first-app/4-loading-photos.mdx
diff --git a/docs/vue/your-first-app/5-adding-mobile.md b/versioned_docs/version-v9/vue/your-first-app/5-adding-mobile.mdx
similarity index 95%
rename from docs/vue/your-first-app/5-adding-mobile.md
rename to versioned_docs/version-v9/vue/your-first-app/5-adding-mobile.mdx
index 47f70db31d6..99c283cb9fa 100644
--- a/docs/vue/your-first-app/5-adding-mobile.md
+++ b/versioned_docs/version-v9/vue/your-first-app/5-adding-mobile.mdx
@@ -17,7 +17,7 @@ Our photo gallery app won’t be complete until it runs on iOS, Android, and the
 
 Let’s start with making some small code changes - then our app will “just work” when we deploy it to a device.
 
-Import the Ionic [Platform API](../platform.md) into `usePhotoGallery.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile).
+Import the Ionic [Platform API](../platform.mdx) into `usePhotoGallery.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile).
 
 Add `Platform` to the imports at the top of the file to use the `isPlatform` method.
 
@@ -70,7 +70,7 @@ const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> =
 };
 ```
 
-When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details on the File Protocol](../../core-concepts/webview.md#file-protocol)). To use this method, we'll need to import Capacitor into `usePhotoGallery.ts`.
+When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details on the File Protocol](../../core-concepts/webview.mdx#file-protocol)). To use this method, we'll need to import Capacitor into `usePhotoGallery.ts`.
 
 ```ts
 import { ref, watch, onMounted } from 'vue';
diff --git a/versioned_docs/version-v9/vue/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v9/vue/your-first-app/6-deploying-mobile.mdx
similarity index 100%
rename from versioned_docs/version-v9/vue/your-first-app/6-deploying-mobile.md
rename to versioned_docs/version-v9/vue/your-first-app/6-deploying-mobile.mdx
diff --git a/versioned_docs/version-v9/vue/your-first-app/7-live-reload.md b/versioned_docs/version-v9/vue/your-first-app/7-live-reload.mdx
similarity index 95%
rename from versioned_docs/version-v9/vue/your-first-app/7-live-reload.md
rename to versioned_docs/version-v9/vue/your-first-app/7-live-reload.mdx
index 3948154af94..d3448c34b2e 100644
--- a/versioned_docs/version-v9/vue/your-first-app/7-live-reload.md
+++ b/versioned_docs/version-v9/vue/your-first-app/7-live-reload.mdx
@@ -13,7 +13,7 @@ sidebar_label: Live Reload
 
 So far, we’ve learned how easy it is to develop a cross-platform app that works everywhere. The development experience is pretty quick, but what if I told you there was a way to go faster?
 
-We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.md) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
+We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.mdx) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
 
 ## Live Reload
 
@@ -135,7 +135,7 @@ const showActionSheet = async (photo: UserPhoto) => {
 </script>
 ```
 
-Wrap each image in a `<button>` element with a click handler. When the app user taps on a photo in our gallery, we'll display an [Action Sheet](../../api/action-sheet.md) dialog with the option to either delete the selected photo or cancel (close) the dialog.
+Wrap each image in a `<button>` element with a click handler. When the app user taps on a photo in our gallery, we'll display an [Action Sheet](../../api/action-sheet.mdx) dialog with the option to either delete the selected photo or cancel (close) the dialog.
 
 ```vue
 <template>
diff --git a/versioned_docs/version-v8/vue/your-first-app/8-distribute.md b/versioned_docs/version-v9/vue/your-first-app/8-distribute.mdx
similarity index 97%
rename from versioned_docs/version-v8/vue/your-first-app/8-distribute.md
rename to versioned_docs/version-v9/vue/your-first-app/8-distribute.mdx
index 87c9647395d..85361db62e6 100644
--- a/versioned_docs/version-v8/vue/your-first-app/8-distribute.md
+++ b/versioned_docs/version-v9/vue/your-first-app/8-distribute.mdx
@@ -102,6 +102,6 @@ For access to the ability to create a Native Configuration, you will need to be
 
 Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to your users' devices!
 
-There are many paths to follow from here. Try adding another [Ionic UI component](../../components.md) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
+There are many paths to follow from here. Try adding another [Ionic UI component](../../components.mdx) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
 
 Happy app building! 💙