diff --git a/versioned_docs/version-v5/angular/config.md b/versioned_docs/version-v5/angular/config.mdx
similarity index 99%
rename from versioned_docs/version-v5/angular/config.md
rename to versioned_docs/version-v5/angular/config.mdx
index 0db21cdf0aa..b8ac430fae1 100644
--- a/versioned_docs/version-v5/angular/config.md
+++ b/versioned_docs/version-v5/angular/config.mdx
@@ -60,7 +60,7 @@ Ionic Config can also be set on a per-platform basis. For example, this allows y
 Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that the provider uses directly.
 
 In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser.
-The `isPlatform()` call returns `true` or `false` based upon the platform that is passed in. See the [Platform Documentation](platform.md#platforms) for a list of possible values.
+The `isPlatform()` call returns `true` or `false` based upon the platform that is passed in. See the [Platform Documentation](platform.mdx#platforms) for a list of possible values.
 
 ```tsx
 import { isPlatform, IonicModule } from '@ionic/angular';
diff --git a/versioned_docs/version-v5/angular/lifecycle.md b/versioned_docs/version-v5/angular/lifecycle.mdx
similarity index 100%
rename from versioned_docs/version-v5/angular/lifecycle.md
rename to versioned_docs/version-v5/angular/lifecycle.mdx
diff --git a/versioned_docs/version-v5/angular/navigation.md b/versioned_docs/version-v5/angular/navigation.mdx
similarity index 100%
rename from versioned_docs/version-v5/angular/navigation.md
rename to versioned_docs/version-v5/angular/navigation.mdx
diff --git a/versioned_docs/version-v5/angular/overview.md b/versioned_docs/version-v5/angular/overview.mdx
similarity index 100%
rename from versioned_docs/version-v5/angular/overview.md
rename to versioned_docs/version-v5/angular/overview.mdx
diff --git a/versioned_docs/version-v5/angular/performance.md b/versioned_docs/version-v5/angular/performance.mdx
similarity index 100%
rename from versioned_docs/version-v5/angular/performance.md
rename to versioned_docs/version-v5/angular/performance.mdx
diff --git a/versioned_docs/version-v5/angular/platform.md b/versioned_docs/version-v5/angular/platform.mdx
similarity index 100%
rename from versioned_docs/version-v5/angular/platform.md
rename to versioned_docs/version-v5/angular/platform.mdx
diff --git a/versioned_docs/version-v5/angular/pwa.md b/versioned_docs/version-v5/angular/pwa.mdx
similarity index 100%
rename from versioned_docs/version-v5/angular/pwa.md
rename to versioned_docs/version-v5/angular/pwa.mdx
diff --git a/versioned_docs/version-v5/angular/storage.md b/versioned_docs/version-v5/angular/storage.mdx
similarity index 100%
rename from versioned_docs/version-v5/angular/storage.md
rename to versioned_docs/version-v5/angular/storage.mdx
diff --git a/versioned_docs/version-v5/angular/testing.md b/versioned_docs/version-v5/angular/testing.mdx
similarity index 100%
rename from versioned_docs/version-v5/angular/testing.md
rename to versioned_docs/version-v5/angular/testing.mdx
diff --git a/versioned_docs/version-v5/angular/your-first-app.md b/versioned_docs/version-v5/angular/your-first-app.mdx
similarity index 98%
rename from versioned_docs/version-v5/angular/your-first-app.md
rename to versioned_docs/version-v5/angular/your-first-app.mdx
index 49a2b65deec..e86420b90dc 100644
--- a/versioned_docs/version-v5/angular/your-first-app.md
+++ b/versioned_docs/version-v5/angular/your-first-app.mdx
@@ -18,7 +18,7 @@ Here’s the finished app running on all 3 platforms:
 ></iframe>
 
 :::note
-Looking for the previous version of this guide that covered Ionic 4 and Cordova? [See here.](../developer-resources/guides/first-app-v4/intro.md)
+Looking for the previous version of this guide that covered Ionic 4 and Cordova? [See here.](../developer-resources/guides/first-app-v4/intro.mdx)
 :::
 
 ## What We'll Build
@@ -59,7 +59,7 @@ npm install -g @ionic/cli native-run cordova-res
 :::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. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information.
 :::
 
 ## Create an App
diff --git a/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md b/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.mdx
similarity index 100%
rename from versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md
rename to versioned_docs/version-v5/angular/your-first-app/2-taking-photos.mdx
diff --git a/versioned_docs/version-v5/angular/your-first-app/3-saving-photos.md b/versioned_docs/version-v5/angular/your-first-app/3-saving-photos.mdx
similarity index 100%
rename from versioned_docs/version-v5/angular/your-first-app/3-saving-photos.md
rename to versioned_docs/version-v5/angular/your-first-app/3-saving-photos.mdx
diff --git a/versioned_docs/version-v5/angular/your-first-app/4-loading-photos.md b/versioned_docs/version-v5/angular/your-first-app/4-loading-photos.mdx
similarity index 100%
rename from versioned_docs/version-v5/angular/your-first-app/4-loading-photos.md
rename to versioned_docs/version-v5/angular/your-first-app/4-loading-photos.mdx
diff --git a/versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.md b/versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.mdx
similarity index 100%
rename from versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.md
rename to versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.mdx
diff --git a/versioned_docs/version-v5/angular/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v5/angular/your-first-app/6-deploying-mobile.mdx
similarity index 100%
rename from versioned_docs/version-v5/angular/your-first-app/6-deploying-mobile.md
rename to versioned_docs/version-v5/angular/your-first-app/6-deploying-mobile.mdx
diff --git a/versioned_docs/version-v5/angular/your-first-app/7-live-reload.md b/versioned_docs/version-v5/angular/your-first-app/7-live-reload.mdx
similarity index 100%
rename from versioned_docs/version-v5/angular/your-first-app/7-live-reload.md
rename to versioned_docs/version-v5/angular/your-first-app/7-live-reload.mdx
diff --git a/versioned_docs/version-v5/api.md b/versioned_docs/version-v5/api.mdx
similarity index 100%
rename from versioned_docs/version-v5/api.md
rename to versioned_docs/version-v5/api.mdx
diff --git a/versioned_docs/version-v5/api/action-sheet.md b/versioned_docs/version-v5/api/action-sheet.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/action-sheet.md
rename to versioned_docs/version-v5/api/action-sheet.mdx
index e5024b070e9..8957a91a8d1 100644
--- a/versioned_docs/version-v5/api/action-sheet.md
+++ b/versioned_docs/version-v5/api/action-sheet.mdx
@@ -7,12 +7,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/action-sheet/props.md';
-import Events from '@ionic-internal/component-api/v5/action-sheet/events.md';
-import Methods from '@ionic-internal/component-api/v5/action-sheet/methods.md';
-import Parts from '@ionic-internal/component-api/v5/action-sheet/parts.md';
+import Props from '@ionic-internal/component-api/v5/action-sheet/props.mdx';
+import Events from '@ionic-internal/component-api/v5/action-sheet/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/action-sheet/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/action-sheet/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/action-sheet/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/action-sheet/slots.md';
+import Slots from '@ionic-internal/component-api/v5/action-sheet/slots.mdx';
 
 # ion-action-sheet
 
diff --git a/versioned_docs/version-v5/api/alert.md b/versioned_docs/version-v5/api/alert.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/alert.md
rename to versioned_docs/version-v5/api/alert.mdx
index ea3878821eb..1ceda0701b2 100644
--- a/versioned_docs/version-v5/api/alert.md
+++ b/versioned_docs/version-v5/api/alert.mdx
@@ -7,12 +7,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/alert/props.md';
-import Events from '@ionic-internal/component-api/v5/alert/events.md';
-import Methods from '@ionic-internal/component-api/v5/alert/methods.md';
-import Parts from '@ionic-internal/component-api/v5/alert/parts.md';
+import Props from '@ionic-internal/component-api/v5/alert/props.mdx';
+import Events from '@ionic-internal/component-api/v5/alert/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/alert/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/alert/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/alert/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/alert/slots.md';
+import Slots from '@ionic-internal/component-api/v5/alert/slots.mdx';
 
 # ion-alert
 
diff --git a/versioned_docs/version-v5/api/app.md b/versioned_docs/version-v5/api/app.mdx
similarity index 97%
rename from versioned_docs/version-v5/api/app.md
rename to versioned_docs/version-v5/api/app.mdx
index c67abda0eec..860b05af39c 100644
--- a/versioned_docs/version-v5/api/app.md
+++ b/versioned_docs/version-v5/api/app.mdx
@@ -5,12 +5,12 @@ sidebar_label: 'ion-app'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/app/props.md';
-import Events from '@ionic-internal/component-api/v5/app/events.md';
-import Methods from '@ionic-internal/component-api/v5/app/methods.md';
-import Parts from '@ionic-internal/component-api/v5/app/parts.md';
+import Props from '@ionic-internal/component-api/v5/app/props.mdx';
+import Events from '@ionic-internal/component-api/v5/app/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/app/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/app/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/app/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/app/slots.md';
+import Slots from '@ionic-internal/component-api/v5/app/slots.mdx';
 
 # ion-app
 
diff --git a/versioned_docs/version-v5/api/avatar.md b/versioned_docs/version-v5/api/avatar.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/avatar.md
rename to versioned_docs/version-v5/api/avatar.mdx
index ae5e7a983c5..1b95376131b 100644
--- a/versioned_docs/version-v5/api/avatar.md
+++ b/versioned_docs/version-v5/api/avatar.mdx
@@ -9,12 +9,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/avatar/props.md';
-import Events from '@ionic-internal/component-api/v5/avatar/events.md';
-import Methods from '@ionic-internal/component-api/v5/avatar/methods.md';
-import Parts from '@ionic-internal/component-api/v5/avatar/parts.md';
+import Props from '@ionic-internal/component-api/v5/avatar/props.mdx';
+import Events from '@ionic-internal/component-api/v5/avatar/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/avatar/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/avatar/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/avatar/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/avatar/slots.md';
+import Slots from '@ionic-internal/component-api/v5/avatar/slots.mdx';
 
 # ion-avatar
 
diff --git a/versioned_docs/version-v5/api/back-button.md b/versioned_docs/version-v5/api/back-button.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/back-button.md
rename to versioned_docs/version-v5/api/back-button.mdx
index 2f42e15371e..a23523d1c38 100644
--- a/versioned_docs/version-v5/api/back-button.md
+++ b/versioned_docs/version-v5/api/back-button.mdx
@@ -9,12 +9,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/back-button/props.md';
-import Events from '@ionic-internal/component-api/v5/back-button/events.md';
-import Methods from '@ionic-internal/component-api/v5/back-button/methods.md';
-import Parts from '@ionic-internal/component-api/v5/back-button/parts.md';
+import Props from '@ionic-internal/component-api/v5/back-button/props.mdx';
+import Events from '@ionic-internal/component-api/v5/back-button/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/back-button/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/back-button/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/back-button/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/back-button/slots.md';
+import Slots from '@ionic-internal/component-api/v5/back-button/slots.mdx';
 
 # ion-back-button
 
diff --git a/versioned_docs/version-v5/api/backdrop.md b/versioned_docs/version-v5/api/backdrop.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/backdrop.md
rename to versioned_docs/version-v5/api/backdrop.mdx
index 272889b047f..e79755766dd 100644
--- a/versioned_docs/version-v5/api/backdrop.md
+++ b/versioned_docs/version-v5/api/backdrop.mdx
@@ -7,12 +7,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/backdrop/props.md';
-import Events from '@ionic-internal/component-api/v5/backdrop/events.md';
-import Methods from '@ionic-internal/component-api/v5/backdrop/methods.md';
-import Parts from '@ionic-internal/component-api/v5/backdrop/parts.md';
+import Props from '@ionic-internal/component-api/v5/backdrop/props.mdx';
+import Events from '@ionic-internal/component-api/v5/backdrop/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/backdrop/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/backdrop/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/backdrop/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/backdrop/slots.md';
+import Slots from '@ionic-internal/component-api/v5/backdrop/slots.mdx';
 
 # ion-backdrop
 
diff --git a/versioned_docs/version-v5/api/badge.md b/versioned_docs/version-v5/api/badge.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/badge.md
rename to versioned_docs/version-v5/api/badge.mdx
index f428e83184b..5a7e791ed21 100644
--- a/versioned_docs/version-v5/api/badge.md
+++ b/versioned_docs/version-v5/api/badge.mdx
@@ -9,12 +9,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/badge/props.md';
-import Events from '@ionic-internal/component-api/v5/badge/events.md';
-import Methods from '@ionic-internal/component-api/v5/badge/methods.md';
-import Parts from '@ionic-internal/component-api/v5/badge/parts.md';
+import Props from '@ionic-internal/component-api/v5/badge/props.mdx';
+import Events from '@ionic-internal/component-api/v5/badge/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/badge/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/badge/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/badge/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/badge/slots.md';
+import Slots from '@ionic-internal/component-api/v5/badge/slots.mdx';
 
 # ion-badge
 
diff --git a/versioned_docs/version-v5/api/button.md b/versioned_docs/version-v5/api/button.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/button.md
rename to versioned_docs/version-v5/api/button.mdx
index ddfc7d54c72..fab504d85ea 100644
--- a/versioned_docs/version-v5/api/button.md
+++ b/versioned_docs/version-v5/api/button.mdx
@@ -7,12 +7,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/button/props.md';
-import Events from '@ionic-internal/component-api/v5/button/events.md';
-import Methods from '@ionic-internal/component-api/v5/button/methods.md';
-import Parts from '@ionic-internal/component-api/v5/button/parts.md';
+import Props from '@ionic-internal/component-api/v5/button/props.mdx';
+import Events from '@ionic-internal/component-api/v5/button/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/button/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/button/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/button/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/button/slots.md';
+import Slots from '@ionic-internal/component-api/v5/button/slots.mdx';
 
 # ion-button
 
diff --git a/versioned_docs/version-v5/api/buttons.md b/versioned_docs/version-v5/api/buttons.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/buttons.md
rename to versioned_docs/version-v5/api/buttons.mdx
index 2e8497b8ef8..2fbd4b814eb 100644
--- a/versioned_docs/version-v5/api/buttons.md
+++ b/versioned_docs/version-v5/api/buttons.mdx
@@ -7,12 +7,12 @@ sidebar_label: 'ion-buttons'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/buttons/props.md';
-import Events from '@ionic-internal/component-api/v5/buttons/events.md';
-import Methods from '@ionic-internal/component-api/v5/buttons/methods.md';
-import Parts from '@ionic-internal/component-api/v5/buttons/parts.md';
+import Props from '@ionic-internal/component-api/v5/buttons/props.mdx';
+import Events from '@ionic-internal/component-api/v5/buttons/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/buttons/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/buttons/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/buttons/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/buttons/slots.md';
+import Slots from '@ionic-internal/component-api/v5/buttons/slots.mdx';
 
 # ion-buttons
 
diff --git a/versioned_docs/version-v5/api/card-content.md b/versioned_docs/version-v5/api/card-content.mdx
similarity index 92%
rename from versioned_docs/version-v5/api/card-content.md
rename to versioned_docs/version-v5/api/card-content.mdx
index bde298a8dbe..2837a65c3cc 100644
--- a/versioned_docs/version-v5/api/card-content.md
+++ b/versioned_docs/version-v5/api/card-content.mdx
@@ -5,12 +5,12 @@ sidebar_label: 'ion-card-content'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/card-content/props.md';
-import Events from '@ionic-internal/component-api/v5/card-content/events.md';
-import Methods from '@ionic-internal/component-api/v5/card-content/methods.md';
-import Parts from '@ionic-internal/component-api/v5/card-content/parts.md';
+import Props from '@ionic-internal/component-api/v5/card-content/props.mdx';
+import Events from '@ionic-internal/component-api/v5/card-content/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/card-content/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/card-content/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/card-content/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/card-content/slots.md';
+import Slots from '@ionic-internal/component-api/v5/card-content/slots.mdx';
 
 # ion-card-content
 
diff --git a/versioned_docs/version-v5/api/card-header.md b/versioned_docs/version-v5/api/card-header.mdx
similarity index 92%
rename from versioned_docs/version-v5/api/card-header.md
rename to versioned_docs/version-v5/api/card-header.mdx
index a15719c50c7..a12c469255d 100644
--- a/versioned_docs/version-v5/api/card-header.md
+++ b/versioned_docs/version-v5/api/card-header.mdx
@@ -5,12 +5,12 @@ sidebar_label: 'ion-card-header'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/card-header/props.md';
-import Events from '@ionic-internal/component-api/v5/card-header/events.md';
-import Methods from '@ionic-internal/component-api/v5/card-header/methods.md';
-import Parts from '@ionic-internal/component-api/v5/card-header/parts.md';
+import Props from '@ionic-internal/component-api/v5/card-header/props.mdx';
+import Events from '@ionic-internal/component-api/v5/card-header/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/card-header/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/card-header/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/card-header/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/card-header/slots.md';
+import Slots from '@ionic-internal/component-api/v5/card-header/slots.mdx';
 
 # ion-card-header
 
diff --git a/versioned_docs/version-v5/api/card-subtitle.md b/versioned_docs/version-v5/api/card-subtitle.mdx
similarity index 91%
rename from versioned_docs/version-v5/api/card-subtitle.md
rename to versioned_docs/version-v5/api/card-subtitle.mdx
index b25f403c2ac..ad7991ec080 100644
--- a/versioned_docs/version-v5/api/card-subtitle.md
+++ b/versioned_docs/version-v5/api/card-subtitle.mdx
@@ -5,12 +5,12 @@ sidebar_label: 'ion-card-subtitle'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/card-subtitle/props.md';
-import Events from '@ionic-internal/component-api/v5/card-subtitle/events.md';
-import Methods from '@ionic-internal/component-api/v5/card-subtitle/methods.md';
-import Parts from '@ionic-internal/component-api/v5/card-subtitle/parts.md';
+import Props from '@ionic-internal/component-api/v5/card-subtitle/props.mdx';
+import Events from '@ionic-internal/component-api/v5/card-subtitle/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/card-subtitle/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/card-subtitle/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/card-subtitle/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/card-subtitle/slots.md';
+import Slots from '@ionic-internal/component-api/v5/card-subtitle/slots.mdx';
 
 # ion-card-subtitle
 
diff --git a/versioned_docs/version-v5/api/card-title.md b/versioned_docs/version-v5/api/card-title.mdx
similarity index 92%
rename from versioned_docs/version-v5/api/card-title.md
rename to versioned_docs/version-v5/api/card-title.mdx
index 2a206ac061e..6ff77b9497e 100644
--- a/versioned_docs/version-v5/api/card-title.md
+++ b/versioned_docs/version-v5/api/card-title.mdx
@@ -5,12 +5,12 @@ sidebar_label: 'ion-card-title'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/card-title/props.md';
-import Events from '@ionic-internal/component-api/v5/card-title/events.md';
-import Methods from '@ionic-internal/component-api/v5/card-title/methods.md';
-import Parts from '@ionic-internal/component-api/v5/card-title/parts.md';
+import Props from '@ionic-internal/component-api/v5/card-title/props.mdx';
+import Events from '@ionic-internal/component-api/v5/card-title/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/card-title/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/card-title/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/card-title/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/card-title/slots.md';
+import Slots from '@ionic-internal/component-api/v5/card-title/slots.mdx';
 
 # ion-card-title
 
diff --git a/versioned_docs/version-v5/api/card.md b/versioned_docs/version-v5/api/card.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/card.md
rename to versioned_docs/version-v5/api/card.mdx
index c4f917b7b6d..8f354d755e7 100644
--- a/versioned_docs/version-v5/api/card.md
+++ b/versioned_docs/version-v5/api/card.mdx
@@ -7,12 +7,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/card/props.md';
-import Events from '@ionic-internal/component-api/v5/card/events.md';
-import Methods from '@ionic-internal/component-api/v5/card/methods.md';
-import Parts from '@ionic-internal/component-api/v5/card/parts.md';
+import Props from '@ionic-internal/component-api/v5/card/props.mdx';
+import Events from '@ionic-internal/component-api/v5/card/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/card/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/card/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/card/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/card/slots.md';
+import Slots from '@ionic-internal/component-api/v5/card/slots.mdx';
 
 # ion-card
 
diff --git a/versioned_docs/version-v5/api/checkbox.md b/versioned_docs/version-v5/api/checkbox.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/checkbox.md
rename to versioned_docs/version-v5/api/checkbox.mdx
index 45cce755b12..0e4b5efc7cc 100644
--- a/versioned_docs/version-v5/api/checkbox.md
+++ b/versioned_docs/version-v5/api/checkbox.mdx
@@ -7,12 +7,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/checkbox/props.md';
-import Events from '@ionic-internal/component-api/v5/checkbox/events.md';
-import Methods from '@ionic-internal/component-api/v5/checkbox/methods.md';
-import Parts from '@ionic-internal/component-api/v5/checkbox/parts.md';
+import Props from '@ionic-internal/component-api/v5/checkbox/props.mdx';
+import Events from '@ionic-internal/component-api/v5/checkbox/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/checkbox/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/checkbox/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/checkbox/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/checkbox/slots.md';
+import Slots from '@ionic-internal/component-api/v5/checkbox/slots.mdx';
 
 # ion-checkbox
 
diff --git a/versioned_docs/version-v5/api/chip.md b/versioned_docs/version-v5/api/chip.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/chip.md
rename to versioned_docs/version-v5/api/chip.mdx
index 0ebe05a153e..5fb7f465e00 100644
--- a/versioned_docs/version-v5/api/chip.md
+++ b/versioned_docs/version-v5/api/chip.mdx
@@ -9,12 +9,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/chip/props.md';
-import Events from '@ionic-internal/component-api/v5/chip/events.md';
-import Methods from '@ionic-internal/component-api/v5/chip/methods.md';
-import Parts from '@ionic-internal/component-api/v5/chip/parts.md';
+import Props from '@ionic-internal/component-api/v5/chip/props.mdx';
+import Events from '@ionic-internal/component-api/v5/chip/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/chip/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/chip/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/chip/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/chip/slots.md';
+import Slots from '@ionic-internal/component-api/v5/chip/slots.mdx';
 
 # ion-chip
 
diff --git a/versioned_docs/version-v5/api/col.md b/versioned_docs/version-v5/api/col.mdx
similarity index 77%
rename from versioned_docs/version-v5/api/col.md
rename to versioned_docs/version-v5/api/col.mdx
index 0b2c95ad3e3..2a08cd2b69a 100644
--- a/versioned_docs/version-v5/api/col.md
+++ b/versioned_docs/version-v5/api/col.mdx
@@ -5,23 +5,23 @@ sidebar_label: 'ion-col'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/col/props.md';
-import Events from '@ionic-internal/component-api/v5/col/events.md';
-import Methods from '@ionic-internal/component-api/v5/col/methods.md';
-import Parts from '@ionic-internal/component-api/v5/col/parts.md';
+import Props from '@ionic-internal/component-api/v5/col/props.mdx';
+import Events from '@ionic-internal/component-api/v5/col/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/col/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/col/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/col/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/col/slots.md';
+import Slots from '@ionic-internal/component-api/v5/col/slots.mdx';
 
 # ion-col
 
-Columns are cellular components of the [grid](grid.md) system and go inside of a [row](row.md).
+Columns are cellular components of the [grid](grid.mdx) system and go inside of a [row](row.mdx).
 They will expand to fill their row. All content within a grid should go inside of a column.
 
-See [Grid Layout](../layout/grid.md) for more information.
+See [Grid Layout](../layout/grid.mdx) for more information.
 
 ## Column Alignment
 
-By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](../layout/css-utilities.md#flex-item-properties) that can be applied to a column to customize this behavior.
+By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](../layout/css-utilities.mdx#flex-item-properties) that can be applied to a column to customize this behavior.
 
 ## Properties
 
diff --git a/versioned_docs/version-v5/api/content.md b/versioned_docs/version-v5/api/content.mdx
similarity index 95%
rename from versioned_docs/version-v5/api/content.md
rename to versioned_docs/version-v5/api/content.mdx
index 858ee75b095..4f32c696c5a 100644
--- a/versioned_docs/version-v5/api/content.md
+++ b/versioned_docs/version-v5/api/content.mdx
@@ -7,12 +7,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/content/props.md';
-import Events from '@ionic-internal/component-api/v5/content/events.md';
-import Methods from '@ionic-internal/component-api/v5/content/methods.md';
-import Parts from '@ionic-internal/component-api/v5/content/parts.md';
+import Props from '@ionic-internal/component-api/v5/content/props.mdx';
+import Events from '@ionic-internal/component-api/v5/content/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/content/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/content/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/content/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/content/slots.md';
+import Slots from '@ionic-internal/component-api/v5/content/slots.mdx';
 
 # ion-content
 
@@ -20,7 +20,7 @@ The content component provides an easy to use content area with some useful meth
 to control the scrollable area. There should only be one content in a single
 view.
 
-Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](../layout/css-utilities.md) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties).
+Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](../layout/css-utilities.mdx) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties).
 
 ## Fixed Content
 
diff --git a/versioned_docs/version-v5/api/datetime.md b/versioned_docs/version-v5/api/datetime.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/datetime.md
rename to versioned_docs/version-v5/api/datetime.mdx
index f33a1185593..e383158db53 100644
--- a/versioned_docs/version-v5/api/datetime.md
+++ b/versioned_docs/version-v5/api/datetime.mdx
@@ -7,12 +7,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/datetime/props.md';
-import Events from '@ionic-internal/component-api/v5/datetime/events.md';
-import Methods from '@ionic-internal/component-api/v5/datetime/methods.md';
-import Parts from '@ionic-internal/component-api/v5/datetime/parts.md';
+import Props from '@ionic-internal/component-api/v5/datetime/props.mdx';
+import Events from '@ionic-internal/component-api/v5/datetime/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/datetime/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/datetime/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/datetime/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/datetime/slots.md';
+import Slots from '@ionic-internal/component-api/v5/datetime/slots.mdx';
 
 # ion-datetime
 
diff --git a/versioned_docs/version-v5/api/fab-button.md b/versioned_docs/version-v5/api/fab-button.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/fab-button.md
rename to versioned_docs/version-v5/api/fab-button.mdx
index c7bdcdf6c07..fd833620164 100644
--- a/versioned_docs/version-v5/api/fab-button.md
+++ b/versioned_docs/version-v5/api/fab-button.mdx
@@ -7,12 +7,12 @@ sidebar_label: 'ion-fab-button'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/fab-button/props.md';
-import Events from '@ionic-internal/component-api/v5/fab-button/events.md';
-import Methods from '@ionic-internal/component-api/v5/fab-button/methods.md';
-import Parts from '@ionic-internal/component-api/v5/fab-button/parts.md';
+import Props from '@ionic-internal/component-api/v5/fab-button/props.mdx';
+import Events from '@ionic-internal/component-api/v5/fab-button/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/fab-button/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/fab-button/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/fab-button/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/fab-button/slots.md';
+import Slots from '@ionic-internal/component-api/v5/fab-button/slots.mdx';
 
 # ion-fab-button
 
diff --git a/versioned_docs/version-v5/api/fab-list.md b/versioned_docs/version-v5/api/fab-list.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/fab-list.md
rename to versioned_docs/version-v5/api/fab-list.mdx
index fe603584d2d..64cdc387008 100644
--- a/versioned_docs/version-v5/api/fab-list.md
+++ b/versioned_docs/version-v5/api/fab-list.mdx
@@ -5,12 +5,12 @@ sidebar_label: 'ion-fab-list'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/fab-list/props.md';
-import Events from '@ionic-internal/component-api/v5/fab-list/events.md';
-import Methods from '@ionic-internal/component-api/v5/fab-list/methods.md';
-import Parts from '@ionic-internal/component-api/v5/fab-list/parts.md';
+import Props from '@ionic-internal/component-api/v5/fab-list/props.mdx';
+import Events from '@ionic-internal/component-api/v5/fab-list/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/fab-list/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/fab-list/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/fab-list/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/fab-list/slots.md';
+import Slots from '@ionic-internal/component-api/v5/fab-list/slots.mdx';
 
 # ion-fab-list
 
diff --git a/versioned_docs/version-v5/api/fab.md b/versioned_docs/version-v5/api/fab.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/fab.md
rename to versioned_docs/version-v5/api/fab.mdx
index 281c7632a29..0477111d5bb 100644
--- a/versioned_docs/version-v5/api/fab.md
+++ b/versioned_docs/version-v5/api/fab.mdx
@@ -9,16 +9,16 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/fab/props.md';
-import Events from '@ionic-internal/component-api/v5/fab/events.md';
-import Methods from '@ionic-internal/component-api/v5/fab/methods.md';
-import Parts from '@ionic-internal/component-api/v5/fab/parts.md';
+import Props from '@ionic-internal/component-api/v5/fab/props.mdx';
+import Events from '@ionic-internal/component-api/v5/fab/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/fab/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/fab/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/fab/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/fab/slots.md';
+import Slots from '@ionic-internal/component-api/v5/fab/slots.mdx';
 
 # ion-fab
 
-Fabs are container elements that contain one or more fab buttons. They should be placed in a fixed position that does not scroll with the content. Fab should have one main fab-button. Fabs can also contain fab-lists which contain related buttons that show when the main fab button is clicked. The same fab container can contain several [fab-list](fab-list.md) elements with different side values.
+Fabs are container elements that contain one or more fab buttons. They should be placed in a fixed position that does not scroll with the content. Fab should have one main fab-button. Fabs can also contain fab-lists which contain related buttons that show when the main fab button is clicked. The same fab container can contain several [fab-list](fab-list.mdx) elements with different side values.
 
 ## Usage
 
diff --git a/versioned_docs/version-v5/api/footer.md b/versioned_docs/version-v5/api/footer.mdx
similarity index 98%
rename from versioned_docs/version-v5/api/footer.md
rename to versioned_docs/version-v5/api/footer.mdx
index 6b76a0cb777..7feab631513 100644
--- a/versioned_docs/version-v5/api/footer.md
+++ b/versioned_docs/version-v5/api/footer.mdx
@@ -7,12 +7,12 @@ sidebar_label: 'ion-footer'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/footer/props.md';
-import Events from '@ionic-internal/component-api/v5/footer/events.md';
-import Methods from '@ionic-internal/component-api/v5/footer/methods.md';
-import Parts from '@ionic-internal/component-api/v5/footer/parts.md';
+import Props from '@ionic-internal/component-api/v5/footer/props.mdx';
+import Events from '@ionic-internal/component-api/v5/footer/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/footer/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/footer/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/footer/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/footer/slots.md';
+import Slots from '@ionic-internal/component-api/v5/footer/slots.mdx';
 
 # ion-footer
 
diff --git a/versioned_docs/version-v5/api/grid.md b/versioned_docs/version-v5/api/grid.mdx
similarity index 97%
rename from versioned_docs/version-v5/api/grid.md
rename to versioned_docs/version-v5/api/grid.mdx
index 2f3eaa109a7..edbea6e3253 100644
--- a/versioned_docs/version-v5/api/grid.md
+++ b/versioned_docs/version-v5/api/grid.mdx
@@ -9,20 +9,20 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/grid/props.md';
-import Events from '@ionic-internal/component-api/v5/grid/events.md';
-import Methods from '@ionic-internal/component-api/v5/grid/methods.md';
-import Parts from '@ionic-internal/component-api/v5/grid/parts.md';
+import Props from '@ionic-internal/component-api/v5/grid/props.mdx';
+import Events from '@ionic-internal/component-api/v5/grid/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/grid/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/grid/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/grid/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/grid/slots.md';
+import Slots from '@ionic-internal/component-api/v5/grid/slots.mdx';
 
 # ion-grid
 
 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.
+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.
 
-See the [Responsive Grid documentation](../layout/grid.md) for more information.
+See the [Responsive Grid documentation](../layout/grid.mdx) for more information.
 
 ## Usage
 
diff --git a/versioned_docs/version-v5/api/header.md b/versioned_docs/version-v5/api/header.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/header.md
rename to versioned_docs/version-v5/api/header.mdx
index 8e793a3936a..08d820de603 100644
--- a/versioned_docs/version-v5/api/header.md
+++ b/versioned_docs/version-v5/api/header.mdx
@@ -7,12 +7,12 @@ sidebar_label: 'ion-header'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/header/props.md';
-import Events from '@ionic-internal/component-api/v5/header/events.md';
-import Methods from '@ionic-internal/component-api/v5/header/methods.md';
-import Parts from '@ionic-internal/component-api/v5/header/parts.md';
+import Props from '@ionic-internal/component-api/v5/header/props.mdx';
+import Events from '@ionic-internal/component-api/v5/header/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/header/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/header/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/header/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/header/slots.md';
+import Slots from '@ionic-internal/component-api/v5/header/slots.mdx';
 
 # ion-header
 
diff --git a/versioned_docs/version-v5/api/img.md b/versioned_docs/version-v5/api/img.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/img.md
rename to versioned_docs/version-v5/api/img.mdx
index 5b39ccd48b1..4944e7a94ca 100644
--- a/versioned_docs/version-v5/api/img.md
+++ b/versioned_docs/version-v5/api/img.mdx
@@ -7,12 +7,12 @@ sidebar_label: 'ion-img'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/img/props.md';
-import Events from '@ionic-internal/component-api/v5/img/events.md';
-import Methods from '@ionic-internal/component-api/v5/img/methods.md';
-import Parts from '@ionic-internal/component-api/v5/img/parts.md';
+import Props from '@ionic-internal/component-api/v5/img/props.mdx';
+import Events from '@ionic-internal/component-api/v5/img/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/img/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/img/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/img/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/img/slots.md';
+import Slots from '@ionic-internal/component-api/v5/img/slots.mdx';
 
 # ion-img
 
diff --git a/versioned_docs/version-v5/api/infinite-scroll-content.md b/versioned_docs/version-v5/api/infinite-scroll-content.mdx
similarity index 96%
rename from versioned_docs/version-v5/api/infinite-scroll-content.md
rename to versioned_docs/version-v5/api/infinite-scroll-content.mdx
index 91994f19f9e..ef321995b0c 100644
--- a/versioned_docs/version-v5/api/infinite-scroll-content.md
+++ b/versioned_docs/version-v5/api/infinite-scroll-content.mdx
@@ -5,12 +5,12 @@ sidebar_label: 'ion-infinite-scroll-content'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/infinite-scroll-content/props.md';
-import Events from '@ionic-internal/component-api/v5/infinite-scroll-content/events.md';
-import Methods from '@ionic-internal/component-api/v5/infinite-scroll-content/methods.md';
-import Parts from '@ionic-internal/component-api/v5/infinite-scroll-content/parts.md';
+import Props from '@ionic-internal/component-api/v5/infinite-scroll-content/props.mdx';
+import Events from '@ionic-internal/component-api/v5/infinite-scroll-content/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/infinite-scroll-content/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/infinite-scroll-content/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/infinite-scroll-content/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/infinite-scroll-content/slots.md';
+import Slots from '@ionic-internal/component-api/v5/infinite-scroll-content/slots.mdx';
 
 # ion-infinite-scroll-content
 
diff --git a/versioned_docs/version-v5/api/infinite-scroll.md b/versioned_docs/version-v5/api/infinite-scroll.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/infinite-scroll.md
rename to versioned_docs/version-v5/api/infinite-scroll.mdx
index b3f5b702620..69bc27104dd 100644
--- a/versioned_docs/version-v5/api/infinite-scroll.md
+++ b/versioned_docs/version-v5/api/infinite-scroll.mdx
@@ -9,12 +9,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/infinite-scroll/props.md';
-import Events from '@ionic-internal/component-api/v5/infinite-scroll/events.md';
-import Methods from '@ionic-internal/component-api/v5/infinite-scroll/methods.md';
-import Parts from '@ionic-internal/component-api/v5/infinite-scroll/parts.md';
+import Props from '@ionic-internal/component-api/v5/infinite-scroll/props.mdx';
+import Events from '@ionic-internal/component-api/v5/infinite-scroll/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/infinite-scroll/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/infinite-scroll/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/infinite-scroll/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/infinite-scroll/slots.md';
+import Slots from '@ionic-internal/component-api/v5/infinite-scroll/slots.mdx';
 
 # ion-infinite-scroll
 
diff --git a/versioned_docs/version-v5/api/input.md b/versioned_docs/version-v5/api/input.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/input.md
rename to versioned_docs/version-v5/api/input.mdx
index f5b5543444c..4f27b6e953c 100644
--- a/versioned_docs/version-v5/api/input.md
+++ b/versioned_docs/version-v5/api/input.mdx
@@ -7,12 +7,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/input/props.md';
-import Events from '@ionic-internal/component-api/v5/input/events.md';
-import Methods from '@ionic-internal/component-api/v5/input/methods.md';
-import Parts from '@ionic-internal/component-api/v5/input/parts.md';
+import Props from '@ionic-internal/component-api/v5/input/props.mdx';
+import Events from '@ionic-internal/component-api/v5/input/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/input/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/input/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/input/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/input/slots.md';
+import Slots from '@ionic-internal/component-api/v5/input/slots.mdx';
 
 # ion-input
 
diff --git a/versioned_docs/version-v5/api/item-divider.md b/versioned_docs/version-v5/api/item-divider.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/item-divider.md
rename to versioned_docs/version-v5/api/item-divider.mdx
index 8aba070d8a9..a1ffc10c635 100644
--- a/versioned_docs/version-v5/api/item-divider.md
+++ b/versioned_docs/version-v5/api/item-divider.mdx
@@ -7,12 +7,12 @@ sidebar_label: 'ion-item-divider'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/item-divider/props.md';
-import Events from '@ionic-internal/component-api/v5/item-divider/events.md';
-import Methods from '@ionic-internal/component-api/v5/item-divider/methods.md';
-import Parts from '@ionic-internal/component-api/v5/item-divider/parts.md';
+import Props from '@ionic-internal/component-api/v5/item-divider/props.mdx';
+import Events from '@ionic-internal/component-api/v5/item-divider/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/item-divider/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/item-divider/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/item-divider/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/item-divider/slots.md';
+import Slots from '@ionic-internal/component-api/v5/item-divider/slots.mdx';
 
 # ion-item-divider
 
diff --git a/versioned_docs/version-v5/api/item-group.md b/versioned_docs/version-v5/api/item-group.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/item-group.md
rename to versioned_docs/version-v5/api/item-group.mdx
index 1e56d0e53e8..c0b7b9612fe 100644
--- a/versioned_docs/version-v5/api/item-group.md
+++ b/versioned_docs/version-v5/api/item-group.mdx
@@ -5,12 +5,12 @@ sidebar_label: 'ion-item-group'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/item-group/props.md';
-import Events from '@ionic-internal/component-api/v5/item-group/events.md';
-import Methods from '@ionic-internal/component-api/v5/item-group/methods.md';
-import Parts from '@ionic-internal/component-api/v5/item-group/parts.md';
+import Props from '@ionic-internal/component-api/v5/item-group/props.mdx';
+import Events from '@ionic-internal/component-api/v5/item-group/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/item-group/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/item-group/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/item-group/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/item-group/slots.md';
+import Slots from '@ionic-internal/component-api/v5/item-group/slots.mdx';
 
 # ion-item-group
 
diff --git a/versioned_docs/version-v5/api/item-option.md b/versioned_docs/version-v5/api/item-option.mdx
similarity index 93%
rename from versioned_docs/version-v5/api/item-option.md
rename to versioned_docs/version-v5/api/item-option.mdx
index e0129cc57fc..86d45dafac2 100644
--- a/versioned_docs/version-v5/api/item-option.md
+++ b/versioned_docs/version-v5/api/item-option.mdx
@@ -5,12 +5,12 @@ sidebar_label: 'ion-item-option'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/item-option/props.md';
-import Events from '@ionic-internal/component-api/v5/item-option/events.md';
-import Methods from '@ionic-internal/component-api/v5/item-option/methods.md';
-import Parts from '@ionic-internal/component-api/v5/item-option/parts.md';
+import Props from '@ionic-internal/component-api/v5/item-option/props.mdx';
+import Events from '@ionic-internal/component-api/v5/item-option/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/item-option/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/item-option/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/item-option/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/item-option/slots.md';
+import Slots from '@ionic-internal/component-api/v5/item-option/slots.mdx';
 
 # ion-item-option
 
diff --git a/versioned_docs/version-v5/api/item-options.md b/versioned_docs/version-v5/api/item-options.mdx
similarity index 95%
rename from versioned_docs/version-v5/api/item-options.md
rename to versioned_docs/version-v5/api/item-options.mdx
index 0af2210c63e..8239341c42b 100644
--- a/versioned_docs/version-v5/api/item-options.md
+++ b/versioned_docs/version-v5/api/item-options.mdx
@@ -5,12 +5,12 @@ sidebar_label: 'ion-item-options'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/item-options/props.md';
-import Events from '@ionic-internal/component-api/v5/item-options/events.md';
-import Methods from '@ionic-internal/component-api/v5/item-options/methods.md';
-import Parts from '@ionic-internal/component-api/v5/item-options/parts.md';
+import Props from '@ionic-internal/component-api/v5/item-options/props.mdx';
+import Events from '@ionic-internal/component-api/v5/item-options/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/item-options/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/item-options/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/item-options/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/item-options/slots.md';
+import Slots from '@ionic-internal/component-api/v5/item-options/slots.mdx';
 
 # ion-item-options
 
diff --git a/versioned_docs/version-v5/api/item-sliding.md b/versioned_docs/version-v5/api/item-sliding.mdx
similarity index 97%
rename from versioned_docs/version-v5/api/item-sliding.md
rename to versioned_docs/version-v5/api/item-sliding.mdx
index a3a354b0221..87b894d4b72 100644
--- a/versioned_docs/version-v5/api/item-sliding.md
+++ b/versioned_docs/version-v5/api/item-sliding.mdx
@@ -7,24 +7,24 @@ sidebar_label: 'ion-item-sliding'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/item-sliding/props.md';
-import Events from '@ionic-internal/component-api/v5/item-sliding/events.md';
-import Methods from '@ionic-internal/component-api/v5/item-sliding/methods.md';
-import Parts from '@ionic-internal/component-api/v5/item-sliding/parts.md';
+import Props from '@ionic-internal/component-api/v5/item-sliding/props.mdx';
+import Events from '@ionic-internal/component-api/v5/item-sliding/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/item-sliding/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/item-sliding/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/item-sliding/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/item-sliding/slots.md';
+import Slots from '@ionic-internal/component-api/v5/item-sliding/slots.mdx';
 
 # ion-item-sliding
 
-A sliding item contains an item that can be dragged to reveal buttons. It requires an [item](item.md) component as a child. All options to reveal should be placed in the [item options](item-options.md) element.
+A sliding item contains an item that can be dragged to reveal buttons. It requires an [item](item.mdx) component as a child. All options to reveal should be placed in the [item options](item-options.mdx) element.
 
 ## Swipe Direction
 
-By default, the buttons are placed on the `"end"` side. This means that options are revealed when the sliding item is swiped from end to start, i.e. from right to left in LTR, but from left to right in RTL. To place them on the opposite side, so that they are revealed when swiping in the opposite direction, set the `side` attribute to `"start"` on the [`ion-item-options`](item-options.md) element. Up to two `ion-item-options` can be used at the same time in order to reveal two different sets of options depending on the swiping direction.
+By default, the buttons are placed on the `"end"` side. This means that options are revealed when the sliding item is swiped from end to start, i.e. from right to left in LTR, but from left to right in RTL. To place them on the opposite side, so that they are revealed when swiping in the opposite direction, set the `side` attribute to `"start"` on the [`ion-item-options`](item-options.mdx) element. Up to two `ion-item-options` can be used at the same time in order to reveal two different sets of options depending on the swiping direction.
 
 ## Options Layout
 
-By default if an icon is placed with text in the [item option](item-option.md), it will display the icon on top of the text, but the icon slot can be changed to any of the following to position it in the option.
+By default if an icon is placed with text in the [item option](item-option.mdx), it will display the icon on top of the text, but the icon slot can be changed to any of the following to position it in the option.
 
 | Slot        | Description                                                              |
 | ----------- | ------------------------------------------------------------------------ |
diff --git a/versioned_docs/version-v5/api/item.md b/versioned_docs/version-v5/api/item.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/item.md
rename to versioned_docs/version-v5/api/item.mdx
index 476d1e7d2f0..3ed4fd015c7 100644
--- a/versioned_docs/version-v5/api/item.md
+++ b/versioned_docs/version-v5/api/item.mdx
@@ -7,12 +7,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/item/props.md';
-import Events from '@ionic-internal/component-api/v5/item/events.md';
-import Methods from '@ionic-internal/component-api/v5/item/methods.md';
-import Parts from '@ionic-internal/component-api/v5/item/parts.md';
+import Props from '@ionic-internal/component-api/v5/item/props.mdx';
+import Events from '@ionic-internal/component-api/v5/item/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/item/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/item/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/item/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/item/slots.md';
+import Slots from '@ionic-internal/component-api/v5/item/slots.mdx';
 
 # ion-item
 
@@ -36,7 +36,7 @@ This feature is not enabled by default on clickable items for the `md` mode, but
 --item-detail-push-show: true;
 ```
 
-See the [theming documentation](../theming/css-variables.md) for more information.
+See the [theming documentation](../theming/css-variables.mdx) for more information.
 
 -->
 
@@ -54,13 +54,13 @@ The below chart details the item slots and where it will place the element insid
 
 ### Text Alignment
 
-Items left align text and add an ellipsis when the text is wider than the item. See the [CSS Utilities Documentation](../layout/css-utilities.md) for classes that can be added to `<ion-item>` to transform the text.
+Items left align text and add an ellipsis when the text is wider than the item. See the [CSS Utilities Documentation](../layout/css-utilities.mdx) for classes that can be added to `<ion-item>` to transform the text.
 
 ## Input Highlight
 
 ### Highlight Height
 
-Items containing an input will highlight the bottom border of the input with a different color when focused, valid, or invalid. By default, `md` items have a highlight with a height set to `2px` and `ios` has no highlight (technically the height is set to `0`). The height can be changed using the `--highlight-height` CSS property. To turn off the highlight, set this variable to `0`. For more information on setting CSS properties, see the [theming documentation](../theming/css-variables.md).
+Items containing an input will highlight the bottom border of the input with a different color when focused, valid, or invalid. By default, `md` items have a highlight with a height set to `2px` and `ios` has no highlight (technically the height is set to `0`). The height can be changed using the `--highlight-height` CSS property. To turn off the highlight, set this variable to `0`. For more information on setting CSS properties, see the [theming documentation](../theming/css-variables.mdx).
 
 ### Highlight Color
 
diff --git a/versioned_docs/version-v5/api/label.md b/versioned_docs/version-v5/api/label.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/label.md
rename to versioned_docs/version-v5/api/label.mdx
index 29919fd96dc..12886dc7061 100644
--- a/versioned_docs/version-v5/api/label.md
+++ b/versioned_docs/version-v5/api/label.mdx
@@ -7,12 +7,12 @@ sidebar_label: 'ion-label'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/label/props.md';
-import Events from '@ionic-internal/component-api/v5/label/events.md';
-import Methods from '@ionic-internal/component-api/v5/label/methods.md';
-import Parts from '@ionic-internal/component-api/v5/label/parts.md';
+import Props from '@ionic-internal/component-api/v5/label/props.mdx';
+import Events from '@ionic-internal/component-api/v5/label/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/label/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/label/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/label/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/label/slots.md';
+import Slots from '@ionic-internal/component-api/v5/label/slots.mdx';
 
 # ion-label
 
diff --git a/versioned_docs/version-v5/api/list-header.md b/versioned_docs/version-v5/api/list-header.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/list-header.md
rename to versioned_docs/version-v5/api/list-header.mdx
index 122176ab6a1..a57e5159b4b 100644
--- a/versioned_docs/version-v5/api/list-header.md
+++ b/versioned_docs/version-v5/api/list-header.mdx
@@ -5,12 +5,12 @@ sidebar_label: 'ion-list-header'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/list-header/props.md';
-import Events from '@ionic-internal/component-api/v5/list-header/events.md';
-import Methods from '@ionic-internal/component-api/v5/list-header/methods.md';
-import Parts from '@ionic-internal/component-api/v5/list-header/parts.md';
+import Props from '@ionic-internal/component-api/v5/list-header/props.mdx';
+import Events from '@ionic-internal/component-api/v5/list-header/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/list-header/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/list-header/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/list-header/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/list-header/slots.md';
+import Slots from '@ionic-internal/component-api/v5/list-header/slots.mdx';
 
 # ion-list-header
 
diff --git a/versioned_docs/version-v5/api/list.md b/versioned_docs/version-v5/api/list.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/list.md
rename to versioned_docs/version-v5/api/list.mdx
index e18ad5b81e9..1ce9f6b6749 100644
--- a/versioned_docs/version-v5/api/list.md
+++ b/versioned_docs/version-v5/api/list.mdx
@@ -7,12 +7,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/list/props.md';
-import Events from '@ionic-internal/component-api/v5/list/events.md';
-import Methods from '@ionic-internal/component-api/v5/list/methods.md';
-import Parts from '@ionic-internal/component-api/v5/list/parts.md';
+import Props from '@ionic-internal/component-api/v5/list/props.mdx';
+import Events from '@ionic-internal/component-api/v5/list/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/list/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/list/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/list/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/list/slots.md';
+import Slots from '@ionic-internal/component-api/v5/list/slots.mdx';
 
 # ion-list
 
diff --git a/versioned_docs/version-v5/api/loading.md b/versioned_docs/version-v5/api/loading.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/loading.md
rename to versioned_docs/version-v5/api/loading.mdx
index ec989774abf..a890139c1b9 100644
--- a/versioned_docs/version-v5/api/loading.md
+++ b/versioned_docs/version-v5/api/loading.mdx
@@ -9,12 +9,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/loading/props.md';
-import Events from '@ionic-internal/component-api/v5/loading/events.md';
-import Methods from '@ionic-internal/component-api/v5/loading/methods.md';
-import Parts from '@ionic-internal/component-api/v5/loading/parts.md';
+import Props from '@ionic-internal/component-api/v5/loading/props.mdx';
+import Events from '@ionic-internal/component-api/v5/loading/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/loading/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/loading/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/loading/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/loading/slots.md';
+import Slots from '@ionic-internal/component-api/v5/loading/slots.mdx';
 
 # ion-loading
 
diff --git a/versioned_docs/version-v5/api/menu-button.md b/versioned_docs/version-v5/api/menu-button.mdx
similarity index 92%
rename from versioned_docs/version-v5/api/menu-button.md
rename to versioned_docs/version-v5/api/menu-button.mdx
index 1042dd82d69..eafbd1ffe2a 100644
--- a/versioned_docs/version-v5/api/menu-button.md
+++ b/versioned_docs/version-v5/api/menu-button.mdx
@@ -5,12 +5,12 @@ sidebar_label: 'ion-menu-button'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/menu-button/props.md';
-import Events from '@ionic-internal/component-api/v5/menu-button/events.md';
-import Methods from '@ionic-internal/component-api/v5/menu-button/methods.md';
-import Parts from '@ionic-internal/component-api/v5/menu-button/parts.md';
+import Props from '@ionic-internal/component-api/v5/menu-button/props.mdx';
+import Events from '@ionic-internal/component-api/v5/menu-button/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/menu-button/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/menu-button/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/menu-button/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/menu-button/slots.md';
+import Slots from '@ionic-internal/component-api/v5/menu-button/slots.mdx';
 
 # ion-menu-button
 
diff --git a/versioned_docs/version-v5/api/menu-toggle.md b/versioned_docs/version-v5/api/menu-toggle.mdx
similarity index 94%
rename from versioned_docs/version-v5/api/menu-toggle.md
rename to versioned_docs/version-v5/api/menu-toggle.mdx
index bc8e43902d8..df16b77306f 100644
--- a/versioned_docs/version-v5/api/menu-toggle.md
+++ b/versioned_docs/version-v5/api/menu-toggle.mdx
@@ -5,12 +5,12 @@ sidebar_label: 'ion-menu-toggle'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/menu-toggle/props.md';
-import Events from '@ionic-internal/component-api/v5/menu-toggle/events.md';
-import Methods from '@ionic-internal/component-api/v5/menu-toggle/methods.md';
-import Parts from '@ionic-internal/component-api/v5/menu-toggle/parts.md';
+import Props from '@ionic-internal/component-api/v5/menu-toggle/props.mdx';
+import Events from '@ionic-internal/component-api/v5/menu-toggle/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/menu-toggle/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/menu-toggle/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/menu-toggle/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/menu-toggle/slots.md';
+import Slots from '@ionic-internal/component-api/v5/menu-toggle/slots.mdx';
 
 # ion-menu-toggle
 
diff --git a/versioned_docs/version-v5/api/menu.md b/versioned_docs/version-v5/api/menu.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/menu.md
rename to versioned_docs/version-v5/api/menu.mdx
index 0f4940a092a..de26365cdb9 100644
--- a/versioned_docs/version-v5/api/menu.md
+++ b/versioned_docs/version-v5/api/menu.mdx
@@ -7,12 +7,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/menu/props.md';
-import Events from '@ionic-internal/component-api/v5/menu/events.md';
-import Methods from '@ionic-internal/component-api/v5/menu/methods.md';
-import Parts from '@ionic-internal/component-api/v5/menu/parts.md';
+import Props from '@ionic-internal/component-api/v5/menu/props.mdx';
+import Events from '@ionic-internal/component-api/v5/menu/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/menu/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/menu/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/menu/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/menu/slots.md';
+import Slots from '@ionic-internal/component-api/v5/menu/slots.mdx';
 
 # ion-menu
 
diff --git a/versioned_docs/version-v5/api/modal.md b/versioned_docs/version-v5/api/modal.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/modal.md
rename to versioned_docs/version-v5/api/modal.mdx
index 68feb3e085d..190fa765bdc 100644
--- a/versioned_docs/version-v5/api/modal.md
+++ b/versioned_docs/version-v5/api/modal.mdx
@@ -7,12 +7,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/modal/props.md';
-import Events from '@ionic-internal/component-api/v5/modal/events.md';
-import Methods from '@ionic-internal/component-api/v5/modal/methods.md';
-import Parts from '@ionic-internal/component-api/v5/modal/parts.md';
+import Props from '@ionic-internal/component-api/v5/modal/props.mdx';
+import Events from '@ionic-internal/component-api/v5/modal/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/modal/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/modal/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/modal/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/modal/slots.md';
+import Slots from '@ionic-internal/component-api/v5/modal/slots.mdx';
 
 # ion-modal
 
diff --git a/versioned_docs/version-v5/api/nav-link.md b/versioned_docs/version-v5/api/nav-link.mdx
similarity index 94%
rename from versioned_docs/version-v5/api/nav-link.md
rename to versioned_docs/version-v5/api/nav-link.mdx
index 09ef0424050..45743404c2a 100644
--- a/versioned_docs/version-v5/api/nav-link.md
+++ b/versioned_docs/version-v5/api/nav-link.mdx
@@ -5,12 +5,12 @@ sidebar_label: 'ion-nav-link'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/nav-link/props.md';
-import Events from '@ionic-internal/component-api/v5/nav-link/events.md';
-import Methods from '@ionic-internal/component-api/v5/nav-link/methods.md';
-import Parts from '@ionic-internal/component-api/v5/nav-link/parts.md';
+import Props from '@ionic-internal/component-api/v5/nav-link/props.mdx';
+import Events from '@ionic-internal/component-api/v5/nav-link/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/nav-link/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/nav-link/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/nav-link/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/nav-link/slots.md';
+import Slots from '@ionic-internal/component-api/v5/nav-link/slots.mdx';
 
 # ion-nav-link
 
diff --git a/versioned_docs/version-v5/api/nav.md b/versioned_docs/version-v5/api/nav.mdx
similarity index 98%
rename from versioned_docs/version-v5/api/nav.md
rename to versioned_docs/version-v5/api/nav.mdx
index e1670e00796..fb3fa0cf039 100644
--- a/versioned_docs/version-v5/api/nav.md
+++ b/versioned_docs/version-v5/api/nav.mdx
@@ -9,12 +9,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/nav/props.md';
-import Events from '@ionic-internal/component-api/v5/nav/events.md';
-import Methods from '@ionic-internal/component-api/v5/nav/methods.md';
-import Parts from '@ionic-internal/component-api/v5/nav/parts.md';
+import Props from '@ionic-internal/component-api/v5/nav/props.mdx';
+import Events from '@ionic-internal/component-api/v5/nav/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/nav/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/nav/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/nav/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/nav/slots.md';
+import Slots from '@ionic-internal/component-api/v5/nav/slots.mdx';
 
 # ion-nav
 
diff --git a/versioned_docs/version-v5/api/note.md b/versioned_docs/version-v5/api/note.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/note.md
rename to versioned_docs/version-v5/api/note.mdx
index 4a83797c4a4..6ab92178812 100644
--- a/versioned_docs/version-v5/api/note.md
+++ b/versioned_docs/version-v5/api/note.mdx
@@ -7,12 +7,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/note/props.md';
-import Events from '@ionic-internal/component-api/v5/note/events.md';
-import Methods from '@ionic-internal/component-api/v5/note/methods.md';
-import Parts from '@ionic-internal/component-api/v5/note/parts.md';
+import Props from '@ionic-internal/component-api/v5/note/props.mdx';
+import Events from '@ionic-internal/component-api/v5/note/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/note/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/note/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/note/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/note/slots.md';
+import Slots from '@ionic-internal/component-api/v5/note/slots.mdx';
 
 # ion-note
 
diff --git a/versioned_docs/version-v5/api/picker.md b/versioned_docs/version-v5/api/picker.mdx
similarity index 96%
rename from versioned_docs/version-v5/api/picker.md
rename to versioned_docs/version-v5/api/picker.mdx
index f1ede61c876..b406b4f2e09 100644
--- a/versioned_docs/version-v5/api/picker.md
+++ b/versioned_docs/version-v5/api/picker.mdx
@@ -7,12 +7,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/picker/props.md';
-import Events from '@ionic-internal/component-api/v5/picker/events.md';
-import Methods from '@ionic-internal/component-api/v5/picker/methods.md';
-import Parts from '@ionic-internal/component-api/v5/picker/parts.md';
+import Props from '@ionic-internal/component-api/v5/picker/props.mdx';
+import Events from '@ionic-internal/component-api/v5/picker/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/picker/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/picker/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/picker/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/picker/slots.md';
+import Slots from '@ionic-internal/component-api/v5/picker/slots.mdx';
 
 # ion-picker
 
diff --git a/versioned_docs/version-v5/api/popover.md b/versioned_docs/version-v5/api/popover.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/popover.md
rename to versioned_docs/version-v5/api/popover.mdx
index 27a9295f0da..fc6405d54c9 100644
--- a/versioned_docs/version-v5/api/popover.md
+++ b/versioned_docs/version-v5/api/popover.mdx
@@ -7,12 +7,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/popover/props.md';
-import Events from '@ionic-internal/component-api/v5/popover/events.md';
-import Methods from '@ionic-internal/component-api/v5/popover/methods.md';
-import Parts from '@ionic-internal/component-api/v5/popover/parts.md';
+import Props from '@ionic-internal/component-api/v5/popover/props.mdx';
+import Events from '@ionic-internal/component-api/v5/popover/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/popover/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/popover/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/popover/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/popover/slots.md';
+import Slots from '@ionic-internal/component-api/v5/popover/slots.mdx';
 
 # ion-popover
 
diff --git a/versioned_docs/version-v5/api/progress-bar.md b/versioned_docs/version-v5/api/progress-bar.mdx
similarity index 98%
rename from versioned_docs/version-v5/api/progress-bar.md
rename to versioned_docs/version-v5/api/progress-bar.mdx
index b0f44bcd80f..53f92348b69 100644
--- a/versioned_docs/version-v5/api/progress-bar.md
+++ b/versioned_docs/version-v5/api/progress-bar.mdx
@@ -9,12 +9,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/progress-bar/props.md';
-import Events from '@ionic-internal/component-api/v5/progress-bar/events.md';
-import Methods from '@ionic-internal/component-api/v5/progress-bar/methods.md';
-import Parts from '@ionic-internal/component-api/v5/progress-bar/parts.md';
+import Props from '@ionic-internal/component-api/v5/progress-bar/props.mdx';
+import Events from '@ionic-internal/component-api/v5/progress-bar/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/progress-bar/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/progress-bar/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/progress-bar/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/progress-bar/slots.md';
+import Slots from '@ionic-internal/component-api/v5/progress-bar/slots.mdx';
 
 # ion-progress-bar
 
diff --git a/versioned_docs/version-v5/api/radio-group.md b/versioned_docs/version-v5/api/radio-group.mdx
similarity index 97%
rename from versioned_docs/version-v5/api/radio-group.md
rename to versioned_docs/version-v5/api/radio-group.mdx
index a4ce20f417e..52fe26f882b 100644
--- a/versioned_docs/version-v5/api/radio-group.md
+++ b/versioned_docs/version-v5/api/radio-group.mdx
@@ -5,16 +5,16 @@ sidebar_label: 'ion-radio-group'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/radio-group/props.md';
-import Events from '@ionic-internal/component-api/v5/radio-group/events.md';
-import Methods from '@ionic-internal/component-api/v5/radio-group/methods.md';
-import Parts from '@ionic-internal/component-api/v5/radio-group/parts.md';
+import Props from '@ionic-internal/component-api/v5/radio-group/props.mdx';
+import Events from '@ionic-internal/component-api/v5/radio-group/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/radio-group/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/radio-group/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/radio-group/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/radio-group/slots.md';
+import Slots from '@ionic-internal/component-api/v5/radio-group/slots.mdx';
 
 # ion-radio-group
 
-A radio group is a group of [radio buttons](radio.md). It allows
+A radio group is a group of [radio buttons](radio.mdx). It allows
 a user to select at most one radio button from a set. Checking one radio
 button that belongs to a radio group unchecks any previous checked
 radio button within the same group.
diff --git a/versioned_docs/version-v5/api/radio.md b/versioned_docs/version-v5/api/radio.mdx
similarity index 96%
rename from versioned_docs/version-v5/api/radio.md
rename to versioned_docs/version-v5/api/radio.mdx
index 4540cbc1100..66c8981da47 100644
--- a/versioned_docs/version-v5/api/radio.md
+++ b/versioned_docs/version-v5/api/radio.mdx
@@ -7,16 +7,16 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/radio/props.md';
-import Events from '@ionic-internal/component-api/v5/radio/events.md';
-import Methods from '@ionic-internal/component-api/v5/radio/methods.md';
-import Parts from '@ionic-internal/component-api/v5/radio/parts.md';
+import Props from '@ionic-internal/component-api/v5/radio/props.mdx';
+import Events from '@ionic-internal/component-api/v5/radio/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/radio/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/radio/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/radio/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/radio/slots.md';
+import Slots from '@ionic-internal/component-api/v5/radio/slots.mdx';
 
 # ion-radio
 
-Radios should be used inside of an [`ion-radio-group`](radio-group.md). Pressing on a radio will check it. They can also be checked programmatically by setting the value property of the parent `ion-radio-group` to the value of the radio.
+Radios should be used inside of an [`ion-radio-group`](radio-group.mdx). Pressing on a radio will check it. They can also be checked programmatically by setting the value property of the parent `ion-radio-group` to the value of the radio.
 
 When radios are inside of a radio group, only one radio in the group will be checked at any time. Pressing a radio will check it and uncheck the previously selected radio, if there is one. If a radio is not in a group with another radio, then both radios will have the ability to be checked at the same time.
 
diff --git a/versioned_docs/version-v5/api/range.md b/versioned_docs/version-v5/api/range.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/range.md
rename to versioned_docs/version-v5/api/range.mdx
index e9e8fec4d7a..0fb3c7b3f95 100644
--- a/versioned_docs/version-v5/api/range.md
+++ b/versioned_docs/version-v5/api/range.mdx
@@ -9,12 +9,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/range/props.md';
-import Events from '@ionic-internal/component-api/v5/range/events.md';
-import Methods from '@ionic-internal/component-api/v5/range/methods.md';
-import Parts from '@ionic-internal/component-api/v5/range/parts.md';
+import Props from '@ionic-internal/component-api/v5/range/props.mdx';
+import Events from '@ionic-internal/component-api/v5/range/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/range/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/range/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/range/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/range/slots.md';
+import Slots from '@ionic-internal/component-api/v5/range/slots.mdx';
 
 # ion-range
 
diff --git a/versioned_docs/version-v5/api/refresher-content.md b/versioned_docs/version-v5/api/refresher-content.mdx
similarity index 91%
rename from versioned_docs/version-v5/api/refresher-content.md
rename to versioned_docs/version-v5/api/refresher-content.mdx
index 48a8c8880c7..b7158d5c9e0 100644
--- a/versioned_docs/version-v5/api/refresher-content.md
+++ b/versioned_docs/version-v5/api/refresher-content.mdx
@@ -5,12 +5,12 @@ sidebar_label: 'ion-refresher-content'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/refresher-content/props.md';
-import Events from '@ionic-internal/component-api/v5/refresher-content/events.md';
-import Methods from '@ionic-internal/component-api/v5/refresher-content/methods.md';
-import Parts from '@ionic-internal/component-api/v5/refresher-content/parts.md';
+import Props from '@ionic-internal/component-api/v5/refresher-content/props.mdx';
+import Events from '@ionic-internal/component-api/v5/refresher-content/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/refresher-content/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/refresher-content/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/refresher-content/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/refresher-content/slots.md';
+import Slots from '@ionic-internal/component-api/v5/refresher-content/slots.mdx';
 
 # ion-refresher-content
 
diff --git a/versioned_docs/version-v5/api/refresher.md b/versioned_docs/version-v5/api/refresher.mdx
similarity index 96%
rename from versioned_docs/version-v5/api/refresher.md
rename to versioned_docs/version-v5/api/refresher.mdx
index e7cdf0825ce..03f97900777 100644
--- a/versioned_docs/version-v5/api/refresher.md
+++ b/versioned_docs/version-v5/api/refresher.mdx
@@ -7,12 +7,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/refresher/props.md';
-import Events from '@ionic-internal/component-api/v5/refresher/events.md';
-import Methods from '@ionic-internal/component-api/v5/refresher/methods.md';
-import Parts from '@ionic-internal/component-api/v5/refresher/parts.md';
+import Props from '@ionic-internal/component-api/v5/refresher/props.mdx';
+import Events from '@ionic-internal/component-api/v5/refresher/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/refresher/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/refresher/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/refresher/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/refresher/slots.md';
+import Slots from '@ionic-internal/component-api/v5/refresher/slots.mdx';
 
 # ion-refresher
 
@@ -32,13 +32,13 @@ Certain properties such as `pullMin` and `snapbackDuration` are not compatible b
 
 ### iOS Usage
 
-Using the iOS native `ion-refresher` requires setting the `pullingIcon` property on `ion-refresher-content` to the value of one of the available spinners. See the [Spinner Documentation](spinner.md#properties) for accepted values. The `pullingIcon` defaults to the `lines` spinner on iOS. The spinner tick marks will be progressively shown as the user pulls down on the page.
+Using the iOS native `ion-refresher` requires setting the `pullingIcon` property on `ion-refresher-content` to the value of one of the available spinners. See the [Spinner Documentation](spinner.mdx#properties) for accepted values. The `pullingIcon` defaults to the `lines` spinner on iOS. The spinner tick marks will be progressively shown as the user pulls down on the page.
 
 The iOS native `ion-refresher` relies on rubber band scrolling in order to work properly and is only compatible with iOS devices as a result. We provide a fallback refresher for apps running in iOS mode on devices that do not support rubber band scrolling.
 
 ### Android Usage
 
-Using the MD native `ion-refresher` requires setting the `pullingIcon` property on `ion-refresher-content` to the value of one of the available spinners. See the [ion-spinner Documentation](spinner.md#properties) for accepted values. `pullingIcon` defaults to the `circular` spinner on MD.
+Using the MD native `ion-refresher` requires setting the `pullingIcon` property on `ion-refresher-content` to the value of one of the available spinners. See the [ion-spinner Documentation](spinner.mdx#properties) for accepted values. `pullingIcon` defaults to the `circular` spinner on MD.
 
 ## Usage
 
diff --git a/versioned_docs/version-v5/api/reorder-group.md b/versioned_docs/version-v5/api/reorder-group.mdx
similarity index 98%
rename from versioned_docs/version-v5/api/reorder-group.md
rename to versioned_docs/version-v5/api/reorder-group.mdx
index ed102f8d5ea..22fb657f9e6 100644
--- a/versioned_docs/version-v5/api/reorder-group.md
+++ b/versioned_docs/version-v5/api/reorder-group.mdx
@@ -5,16 +5,16 @@ sidebar_label: 'ion-reorder-group'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/reorder-group/props.md';
-import Events from '@ionic-internal/component-api/v5/reorder-group/events.md';
-import Methods from '@ionic-internal/component-api/v5/reorder-group/methods.md';
-import Parts from '@ionic-internal/component-api/v5/reorder-group/parts.md';
+import Props from '@ionic-internal/component-api/v5/reorder-group/props.mdx';
+import Events from '@ionic-internal/component-api/v5/reorder-group/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/reorder-group/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/reorder-group/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/reorder-group/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/reorder-group/slots.md';
+import Slots from '@ionic-internal/component-api/v5/reorder-group/slots.mdx';
 
 # ion-reorder-group
 
-The reorder group is a wrapper component for items using the `ion-reorder` component. See the [Reorder documentation](reorder.md) for further information about the anchor component that is used to drag items within the `ion-reorder-group`.
+The reorder group is a wrapper component for items using the `ion-reorder` component. See the [Reorder documentation](reorder.mdx) for further information about the anchor component that is used to drag items within the `ion-reorder-group`.
 
 Once the user drags an item and drops it in a new position, the `ionItemReorder` event is dispatched. A handler for it should be implemented that calls the `complete()` method.
 
diff --git a/versioned_docs/version-v5/api/reorder.md b/versioned_docs/version-v5/api/reorder.mdx
similarity index 98%
rename from versioned_docs/version-v5/api/reorder.md
rename to versioned_docs/version-v5/api/reorder.mdx
index 749902a80f3..6dd968ee4d2 100644
--- a/versioned_docs/version-v5/api/reorder.md
+++ b/versioned_docs/version-v5/api/reorder.mdx
@@ -7,18 +7,18 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/reorder/props.md';
-import Events from '@ionic-internal/component-api/v5/reorder/events.md';
-import Methods from '@ionic-internal/component-api/v5/reorder/methods.md';
-import Parts from '@ionic-internal/component-api/v5/reorder/parts.md';
+import Props from '@ionic-internal/component-api/v5/reorder/props.mdx';
+import Events from '@ionic-internal/component-api/v5/reorder/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/reorder/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/reorder/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/reorder/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/reorder/slots.md';
+import Slots from '@ionic-internal/component-api/v5/reorder/slots.mdx';
 
 # ion-reorder
 
 Reorder is a component that allows an item in a group of items to be dragged to change its order within that group. It must be used within an `ion-reorder-group` to provide a visual drag and drop interface.
 
-`ion-reorder` is the anchor used to drag and drop the items inside of the `ion-reorder-group`. See the [Reorder Group](reorder-group.md) for more information on how to complete the reorder operation.
+`ion-reorder` is the anchor used to drag and drop the items inside of the `ion-reorder-group`. See the [Reorder Group](reorder-group.mdx) for more information on how to complete the reorder operation.
 
 ## Usage
 
diff --git a/versioned_docs/version-v5/api/ripple-effect.md b/versioned_docs/version-v5/api/ripple-effect.mdx
similarity index 98%
rename from versioned_docs/version-v5/api/ripple-effect.md
rename to versioned_docs/version-v5/api/ripple-effect.mdx
index addd55e6d38..116b89e11a6 100644
--- a/versioned_docs/version-v5/api/ripple-effect.md
+++ b/versioned_docs/version-v5/api/ripple-effect.mdx
@@ -5,12 +5,12 @@ sidebar_label: 'ion-ripple-effect'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/ripple-effect/props.md';
-import Events from '@ionic-internal/component-api/v5/ripple-effect/events.md';
-import Methods from '@ionic-internal/component-api/v5/ripple-effect/methods.md';
-import Parts from '@ionic-internal/component-api/v5/ripple-effect/parts.md';
+import Props from '@ionic-internal/component-api/v5/ripple-effect/props.mdx';
+import Events from '@ionic-internal/component-api/v5/ripple-effect/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/ripple-effect/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/ripple-effect/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/ripple-effect/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/ripple-effect/slots.md';
+import Slots from '@ionic-internal/component-api/v5/ripple-effect/slots.mdx';
 
 # ion-ripple-effect
 
diff --git a/versioned_docs/version-v5/api/route-redirect.md b/versioned_docs/version-v5/api/route-redirect.mdx
similarity index 96%
rename from versioned_docs/version-v5/api/route-redirect.md
rename to versioned_docs/version-v5/api/route-redirect.mdx
index b2e35af1827..e3cd5b7ba69 100644
--- a/versioned_docs/version-v5/api/route-redirect.md
+++ b/versioned_docs/version-v5/api/route-redirect.mdx
@@ -5,18 +5,18 @@ sidebar_label: 'ion-route-redirect'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/route-redirect/props.md';
-import Events from '@ionic-internal/component-api/v5/route-redirect/events.md';
-import Methods from '@ionic-internal/component-api/v5/route-redirect/methods.md';
-import Parts from '@ionic-internal/component-api/v5/route-redirect/parts.md';
+import Props from '@ionic-internal/component-api/v5/route-redirect/props.mdx';
+import Events from '@ionic-internal/component-api/v5/route-redirect/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/route-redirect/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/route-redirect/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/route-redirect/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/route-redirect/slots.md';
+import Slots from '@ionic-internal/component-api/v5/route-redirect/slots.mdx';
 
 # ion-route-redirect
 
 A route redirect can only be used with an `ion-router` as a direct child of it.
 
-> 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.
 
 The route redirect has two configurable properties:
 
diff --git a/versioned_docs/version-v5/api/route.md b/versioned_docs/version-v5/api/route.mdx
similarity index 98%
rename from versioned_docs/version-v5/api/route.md
rename to versioned_docs/version-v5/api/route.mdx
index 0c12b788a85..d3e0a64bbc0 100644
--- a/versioned_docs/version-v5/api/route.md
+++ b/versioned_docs/version-v5/api/route.mdx
@@ -5,18 +5,18 @@ sidebar_label: 'ion-route'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/route/props.md';
-import Events from '@ionic-internal/component-api/v5/route/events.md';
-import Methods from '@ionic-internal/component-api/v5/route/methods.md';
-import Parts from '@ionic-internal/component-api/v5/route/parts.md';
+import Props from '@ionic-internal/component-api/v5/route/props.mdx';
+import Events from '@ionic-internal/component-api/v5/route/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/route/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/route/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/route/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/route/slots.md';
+import Slots from '@ionic-internal/component-api/v5/route/slots.mdx';
 
 # ion-route
 
 The route component takes a component and renders it when the Browser URL matches the url property.
 
-> 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.
 
 ## Navigation Hooks
 
diff --git a/versioned_docs/version-v5/api/router-link.md b/versioned_docs/version-v5/api/router-link.mdx
similarity index 95%
rename from versioned_docs/version-v5/api/router-link.md
rename to versioned_docs/version-v5/api/router-link.mdx
index 6ba51db4500..adc9da84dde 100644
--- a/versioned_docs/version-v5/api/router-link.md
+++ b/versioned_docs/version-v5/api/router-link.mdx
@@ -9,12 +9,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/router-link/props.md';
-import Events from '@ionic-internal/component-api/v5/router-link/events.md';
-import Methods from '@ionic-internal/component-api/v5/router-link/methods.md';
-import Parts from '@ionic-internal/component-api/v5/router-link/parts.md';
+import Props from '@ionic-internal/component-api/v5/router-link/props.mdx';
+import Events from '@ionic-internal/component-api/v5/router-link/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/router-link/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/router-link/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/router-link/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/router-link/slots.md';
+import Slots from '@ionic-internal/component-api/v5/router-link/slots.mdx';
 
 # ion-router-link
 
diff --git a/versioned_docs/version-v5/api/router-outlet.md b/versioned_docs/version-v5/api/router-outlet.mdx
similarity index 94%
rename from versioned_docs/version-v5/api/router-outlet.md
rename to versioned_docs/version-v5/api/router-outlet.mdx
index f74db7657f5..5c459a4d337 100644
--- a/versioned_docs/version-v5/api/router-outlet.md
+++ b/versioned_docs/version-v5/api/router-outlet.mdx
@@ -5,18 +5,18 @@ sidebar_label: 'ion-router-outlet'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/router-outlet/props.md';
-import Events from '@ionic-internal/component-api/v5/router-outlet/events.md';
-import Methods from '@ionic-internal/component-api/v5/router-outlet/methods.md';
-import Parts from '@ionic-internal/component-api/v5/router-outlet/parts.md';
+import Props from '@ionic-internal/component-api/v5/router-outlet/props.mdx';
+import Events from '@ionic-internal/component-api/v5/router-outlet/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/router-outlet/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/router-outlet/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/router-outlet/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/router-outlet/slots.md';
+import Slots from '@ionic-internal/component-api/v5/router-outlet/slots.mdx';
 
 # ion-router-outlet
 
 Router outlet is a component used in routing within an Angular or Vue app. It behaves in a similar way to Angular's built-in router outlet component and Vue's router view component, but contains the logic for providing a stacked navigation, and animating views in and out.
 
-> Note: this component should only be used with Angular and Vue projects. For vanilla or Stencil JavaScript projects, use [`ion-router`](router.md) and [`ion-route`](route.md).
+> Note: this component should only be used with Angular and Vue projects. For vanilla or Stencil JavaScript projects, use [`ion-router`](router.mdx) and [`ion-route`](route.mdx).
 
 Although router outlet has methods for navigating around, it's recommended to use the navigation methods in your framework's router.
 
diff --git a/versioned_docs/version-v5/api/router.md b/versioned_docs/version-v5/api/router.mdx
similarity index 96%
rename from versioned_docs/version-v5/api/router.md
rename to versioned_docs/version-v5/api/router.mdx
index 72c38e55959..93b0dfb7518 100644
--- a/versioned_docs/version-v5/api/router.md
+++ b/versioned_docs/version-v5/api/router.mdx
@@ -7,18 +7,18 @@ sidebar_label: 'ion-router'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/router/props.md';
-import Events from '@ionic-internal/component-api/v5/router/events.md';
-import Methods from '@ionic-internal/component-api/v5/router/methods.md';
-import Parts from '@ionic-internal/component-api/v5/router/parts.md';
+import Props from '@ionic-internal/component-api/v5/router/props.mdx';
+import Events from '@ionic-internal/component-api/v5/router/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/router/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/router/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/router/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/router/slots.md';
+import Slots from '@ionic-internal/component-api/v5/router/slots.mdx';
 
 # ion-router
 
 The router is a component for handling routing inside vanilla and Stencil JavaScript projects.
 
-> 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.
 
 Apps should have a single `ion-router` component in the codebase.
 This component controls all interactions with the browser history and it aggregates updates through an event system.
diff --git a/versioned_docs/version-v5/api/row.md b/versioned_docs/version-v5/api/row.mdx
similarity index 69%
rename from versioned_docs/version-v5/api/row.md
rename to versioned_docs/version-v5/api/row.mdx
index 025c3a24bed..273251dfb6f 100644
--- a/versioned_docs/version-v5/api/row.md
+++ b/versioned_docs/version-v5/api/row.mdx
@@ -5,23 +5,23 @@ sidebar_label: 'ion-row'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/row/props.md';
-import Events from '@ionic-internal/component-api/v5/row/events.md';
-import Methods from '@ionic-internal/component-api/v5/row/methods.md';
-import Parts from '@ionic-internal/component-api/v5/row/parts.md';
+import Props from '@ionic-internal/component-api/v5/row/props.mdx';
+import Events from '@ionic-internal/component-api/v5/row/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/row/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/row/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/row/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/row/slots.md';
+import Slots from '@ionic-internal/component-api/v5/row/slots.mdx';
 
 # ion-row
 
-Rows are horizontal components of the [grid](grid.md) system and contain varying numbers of
-[columns](col.md). They ensure the columns are positioned properly.
+Rows are horizontal components of the [grid](grid.mdx) system and contain varying numbers of
+[columns](col.mdx). They ensure the columns are positioned properly.
 
-See [Grid Layout](../layout/grid.md) for more information.
+See [Grid Layout](../layout/grid.mdx) for more information.
 
 ## Row Alignment
 
-By default, columns will stretch to fill the entire height of the row and wrap when necessary. Rows are [flex containers](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container), so there are several [CSS classes](../layout/css-utilities.md#flex-container-properties) that can be applied to a row to customize this behavior.
+By default, columns will stretch to fill the entire height of the row and wrap when necessary. Rows are [flex containers](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container), so there are several [CSS classes](../layout/css-utilities.mdx#flex-container-properties) that can be applied to a row to customize this behavior.
 
 ## Properties
 
diff --git a/versioned_docs/version-v5/api/searchbar.md b/versioned_docs/version-v5/api/searchbar.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/searchbar.md
rename to versioned_docs/version-v5/api/searchbar.mdx
index c6ec518ade0..2cf0a6c7f7f 100644
--- a/versioned_docs/version-v5/api/searchbar.md
+++ b/versioned_docs/version-v5/api/searchbar.mdx
@@ -9,12 +9,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/searchbar/props.md';
-import Events from '@ionic-internal/component-api/v5/searchbar/events.md';
-import Methods from '@ionic-internal/component-api/v5/searchbar/methods.md';
-import Parts from '@ionic-internal/component-api/v5/searchbar/parts.md';
+import Props from '@ionic-internal/component-api/v5/searchbar/props.mdx';
+import Events from '@ionic-internal/component-api/v5/searchbar/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/searchbar/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/searchbar/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/searchbar/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/searchbar/slots.md';
+import Slots from '@ionic-internal/component-api/v5/searchbar/slots.mdx';
 
 # ion-searchbar
 
diff --git a/versioned_docs/version-v5/api/segment-button.md b/versioned_docs/version-v5/api/segment-button.mdx
similarity index 98%
rename from versioned_docs/version-v5/api/segment-button.md
rename to versioned_docs/version-v5/api/segment-button.mdx
index 9f028812e04..fa857f32b6d 100644
--- a/versioned_docs/version-v5/api/segment-button.md
+++ b/versioned_docs/version-v5/api/segment-button.mdx
@@ -5,16 +5,16 @@ sidebar_label: 'ion-segment-button'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/segment-button/props.md';
-import Events from '@ionic-internal/component-api/v5/segment-button/events.md';
-import Methods from '@ionic-internal/component-api/v5/segment-button/methods.md';
-import Parts from '@ionic-internal/component-api/v5/segment-button/parts.md';
+import Props from '@ionic-internal/component-api/v5/segment-button/props.mdx';
+import Events from '@ionic-internal/component-api/v5/segment-button/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/segment-button/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/segment-button/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/segment-button/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/segment-button/slots.md';
+import Slots from '@ionic-internal/component-api/v5/segment-button/slots.mdx';
 
 # ion-segment-button
 
-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 checked 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 checked 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.
 
 ## Usage
 
diff --git a/versioned_docs/version-v5/api/segment.md b/versioned_docs/version-v5/api/segment.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/segment.md
rename to versioned_docs/version-v5/api/segment.mdx
index 62768f8c02d..15c2121357e 100644
--- a/versioned_docs/version-v5/api/segment.md
+++ b/versioned_docs/version-v5/api/segment.mdx
@@ -7,12 +7,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/segment/props.md';
-import Events from '@ionic-internal/component-api/v5/segment/events.md';
-import Methods from '@ionic-internal/component-api/v5/segment/methods.md';
-import Parts from '@ionic-internal/component-api/v5/segment/parts.md';
+import Props from '@ionic-internal/component-api/v5/segment/props.mdx';
+import Events from '@ionic-internal/component-api/v5/segment/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/segment/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/segment/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/segment/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/segment/slots.md';
+import Slots from '@ionic-internal/component-api/v5/segment/slots.mdx';
 
 # ion-segment
 
diff --git a/versioned_docs/version-v5/api/select-option.md b/versioned_docs/version-v5/api/select-option.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/select-option.md
rename to versioned_docs/version-v5/api/select-option.mdx
index 1b52d1a6811..1dae0c0d47a 100644
--- a/versioned_docs/version-v5/api/select-option.md
+++ b/versioned_docs/version-v5/api/select-option.mdx
@@ -7,16 +7,16 @@ sidebar_label: 'ion-select-option'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/select-option/props.md';
-import Events from '@ionic-internal/component-api/v5/select-option/events.md';
-import Methods from '@ionic-internal/component-api/v5/select-option/methods.md';
-import Parts from '@ionic-internal/component-api/v5/select-option/parts.md';
+import Props from '@ionic-internal/component-api/v5/select-option/props.mdx';
+import Events from '@ionic-internal/component-api/v5/select-option/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/select-option/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/select-option/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/select-option/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/select-option/slots.md';
+import Slots from '@ionic-internal/component-api/v5/select-option/slots.mdx';
 
 # ion-select-option
 
-Select Options are components that are child elements of a Select. Each option defined is passed and displayed in the Select dialog. For more information, see the [Select docs](select.md).
+Select Options are components that are child elements of a Select. Each option defined is passed and displayed in the Select dialog. For more information, see the [Select docs](select.mdx).
 
 ## Customization
 
diff --git a/versioned_docs/version-v5/api/select.md b/versioned_docs/version-v5/api/select.mdx
similarity index 98%
rename from versioned_docs/version-v5/api/select.md
rename to versioned_docs/version-v5/api/select.mdx
index f803eab81c5..5e3746a8cdb 100644
--- a/versioned_docs/version-v5/api/select.md
+++ b/versioned_docs/version-v5/api/select.mdx
@@ -7,12 +7,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/select/props.md';
-import Events from '@ionic-internal/component-api/v5/select/events.md';
-import Methods from '@ionic-internal/component-api/v5/select/methods.md';
-import Parts from '@ionic-internal/component-api/v5/select/parts.md';
+import Props from '@ionic-internal/component-api/v5/select/props.mdx';
+import Events from '@ionic-internal/component-api/v5/select/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/select/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/select/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/select/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/select/slots.md';
+import Slots from '@ionic-internal/component-api/v5/select/slots.mdx';
 
 # ion-select
 
@@ -24,7 +24,7 @@ If `value` is set on the `<ion-select>`, the selected option will be chosen base
 
 ## 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) or [ion-popover](popover.md) by passing `action-sheet` or `popover`, 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) or [ion-popover](popover.mdx) by passing `action-sheet` or `popover`, respectively, to the `interface` property. Read on to the other sections for the limitations of the different interfaces.
 
 ## Single Selection
 
@@ -52,7 +52,7 @@ The `action-sheet` and `popover` interfaces do not have an `OK` button, clicking
 
 Since select uses the alert, action sheet and popover 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.
 
-See the [ion-alert docs](alert.md), [ion-action-sheet docs](action-sheet.md), and [ion-popover docs](popover.md) for the properties that each interface accepts.
+See the [ion-alert docs](alert.mdx), [ion-action-sheet docs](action-sheet.mdx), and [ion-popover docs](popover.mdx) for the properties that each interface accepts.
 
 Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
 
@@ -127,11 +127,11 @@ Notice that by using `::part`, any CSS property on the element can be targeted.
 
 Customizing the interface dialog should be done by following the Customization section in that interface's documentation:
 
-- [Alert Customization](alert.md#customization)
-- [Action Sheet Customization](action-sheet.md#customization)
-- [Popover Customization](popover.md#customization)
+- [Alert Customization](alert.mdx#customization)
+- [Action Sheet Customization](action-sheet.mdx#customization)
+- [Popover Customization](popover.mdx#customization)
 
-However, the Select Option does set a class for easier styling and allows for the ability to pass a class to the overlay option, see 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, see the [Select Options documentation](select-option.mdx) for usage examples of customizing options.
 
 ## Usage
 
diff --git a/versioned_docs/version-v5/api/skeleton-text.md b/versioned_docs/version-v5/api/skeleton-text.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/skeleton-text.md
rename to versioned_docs/version-v5/api/skeleton-text.mdx
index 3a420685677..71cc17ad803 100644
--- a/versioned_docs/version-v5/api/skeleton-text.md
+++ b/versioned_docs/version-v5/api/skeleton-text.mdx
@@ -9,12 +9,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/skeleton-text/props.md';
-import Events from '@ionic-internal/component-api/v5/skeleton-text/events.md';
-import Methods from '@ionic-internal/component-api/v5/skeleton-text/methods.md';
-import Parts from '@ionic-internal/component-api/v5/skeleton-text/parts.md';
+import Props from '@ionic-internal/component-api/v5/skeleton-text/props.mdx';
+import Events from '@ionic-internal/component-api/v5/skeleton-text/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/skeleton-text/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/skeleton-text/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/skeleton-text/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/skeleton-text/slots.md';
+import Slots from '@ionic-internal/component-api/v5/skeleton-text/slots.mdx';
 
 # ion-skeleton-text
 
diff --git a/versioned_docs/version-v5/api/slide.md b/versioned_docs/version-v5/api/slide.mdx
similarity index 80%
rename from versioned_docs/version-v5/api/slide.md
rename to versioned_docs/version-v5/api/slide.mdx
index 878add9fea3..e25abda7106 100644
--- a/versioned_docs/version-v5/api/slide.md
+++ b/versioned_docs/version-v5/api/slide.mdx
@@ -5,20 +5,20 @@ sidebar_label: 'ion-slide'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/slide/props.md';
-import Events from '@ionic-internal/component-api/v5/slide/events.md';
-import Methods from '@ionic-internal/component-api/v5/slide/methods.md';
-import Parts from '@ionic-internal/component-api/v5/slide/parts.md';
+import Props from '@ionic-internal/component-api/v5/slide/props.mdx';
+import Events from '@ionic-internal/component-api/v5/slide/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/slide/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/slide/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/slide/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/slide/slots.md';
+import Slots from '@ionic-internal/component-api/v5/slide/slots.mdx';
 
 # ion-slide
 
-The Slide component is a child component of [Slides](slides.md). The template
+The Slide component is a child component of [Slides](slides.mdx). The template
 should be written as `ion-slide`. Any slide content should be written
-in this component and it should be used in conjunction with [Slides](slides.md).
+in this component and it should be used in conjunction with [Slides](slides.mdx).
 
-See the [Slides API Docs](slides.md) for more usage information.
+See the [Slides API Docs](slides.mdx) for more usage information.
 
 ## Properties
 
diff --git a/versioned_docs/version-v5/api/slides.md b/versioned_docs/version-v5/api/slides.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/slides.md
rename to versioned_docs/version-v5/api/slides.mdx
index 8461e82c3d9..ca3fd8b55f3 100644
--- a/versioned_docs/version-v5/api/slides.md
+++ b/versioned_docs/version-v5/api/slides.mdx
@@ -9,17 +9,17 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/slides/props.md';
-import Events from '@ionic-internal/component-api/v5/slides/events.md';
-import Methods from '@ionic-internal/component-api/v5/slides/methods.md';
-import Parts from '@ionic-internal/component-api/v5/slides/parts.md';
+import Props from '@ionic-internal/component-api/v5/slides/props.mdx';
+import Events from '@ionic-internal/component-api/v5/slides/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/slides/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/slides/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/slides/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/slides/slots.md';
+import Slots from '@ionic-internal/component-api/v5/slides/slots.mdx';
 
 # ion-slides
 
 The Slides component is a multi-section container. Each section can be swiped
-or dragged between. It contains any number of [Slide](slide.md) components.
+or dragged between. It contains any number of [Slide](slide.mdx) components.
 
 Adopted from Swiper.js:
 The most modern mobile touch slider and framework with hardware accelerated transitions.
diff --git a/versioned_docs/version-v5/api/spinner.md b/versioned_docs/version-v5/api/spinner.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/spinner.md
rename to versioned_docs/version-v5/api/spinner.mdx
index deb453e6bbb..1be74353c42 100644
--- a/versioned_docs/version-v5/api/spinner.md
+++ b/versioned_docs/version-v5/api/spinner.mdx
@@ -9,12 +9,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/spinner/props.md';
-import Events from '@ionic-internal/component-api/v5/spinner/events.md';
-import Methods from '@ionic-internal/component-api/v5/spinner/methods.md';
-import Parts from '@ionic-internal/component-api/v5/spinner/parts.md';
+import Props from '@ionic-internal/component-api/v5/spinner/props.mdx';
+import Events from '@ionic-internal/component-api/v5/spinner/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/spinner/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/spinner/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/spinner/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/spinner/slots.md';
+import Slots from '@ionic-internal/component-api/v5/spinner/slots.mdx';
 
 # ion-spinner
 
diff --git a/versioned_docs/version-v5/api/split-pane.md b/versioned_docs/version-v5/api/split-pane.mdx
similarity index 98%
rename from versioned_docs/version-v5/api/split-pane.md
rename to versioned_docs/version-v5/api/split-pane.mdx
index 9a975a062f4..d2c3a15bd7c 100644
--- a/versioned_docs/version-v5/api/split-pane.md
+++ b/versioned_docs/version-v5/api/split-pane.mdx
@@ -7,12 +7,12 @@ sidebar_label: 'ion-split-pane'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/split-pane/props.md';
-import Events from '@ionic-internal/component-api/v5/split-pane/events.md';
-import Methods from '@ionic-internal/component-api/v5/split-pane/methods.md';
-import Parts from '@ionic-internal/component-api/v5/split-pane/parts.md';
+import Props from '@ionic-internal/component-api/v5/split-pane/props.mdx';
+import Events from '@ionic-internal/component-api/v5/split-pane/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/split-pane/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/split-pane/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/split-pane/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/split-pane/slots.md';
+import Slots from '@ionic-internal/component-api/v5/split-pane/slots.mdx';
 
 # ion-split-pane
 
diff --git a/versioned_docs/version-v5/api/tab-bar.md b/versioned_docs/version-v5/api/tab-bar.mdx
similarity index 95%
rename from versioned_docs/version-v5/api/tab-bar.md
rename to versioned_docs/version-v5/api/tab-bar.mdx
index b3884fcbcd7..e6c42a1286f 100644
--- a/versioned_docs/version-v5/api/tab-bar.md
+++ b/versioned_docs/version-v5/api/tab-bar.mdx
@@ -5,16 +5,16 @@ sidebar_label: 'ion-tab-bar'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/tab-bar/props.md';
-import Events from '@ionic-internal/component-api/v5/tab-bar/events.md';
-import Methods from '@ionic-internal/component-api/v5/tab-bar/methods.md';
-import Parts from '@ionic-internal/component-api/v5/tab-bar/parts.md';
+import Props from '@ionic-internal/component-api/v5/tab-bar/props.mdx';
+import Events from '@ionic-internal/component-api/v5/tab-bar/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/tab-bar/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/tab-bar/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/tab-bar/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/tab-bar/slots.md';
+import Slots from '@ionic-internal/component-api/v5/tab-bar/slots.mdx';
 
 # ion-tab-bar
 
-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-v5/api/tab-button.md b/versioned_docs/version-v5/api/tab-button.mdx
similarity index 95%
rename from versioned_docs/version-v5/api/tab-button.md
rename to versioned_docs/version-v5/api/tab-button.mdx
index dc197bd54cb..d98af53f787 100644
--- a/versioned_docs/version-v5/api/tab-button.md
+++ b/versioned_docs/version-v5/api/tab-button.mdx
@@ -5,18 +5,18 @@ sidebar_label: 'ion-tab-button'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/tab-button/props.md';
-import Events from '@ionic-internal/component-api/v5/tab-button/events.md';
-import Methods from '@ionic-internal/component-api/v5/tab-button/methods.md';
-import Parts from '@ionic-internal/component-api/v5/tab-button/parts.md';
+import Props from '@ionic-internal/component-api/v5/tab-button/props.mdx';
+import Events from '@ionic-internal/component-api/v5/tab-button/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/tab-button/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/tab-button/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/tab-button/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/tab-button/slots.md';
+import Slots from '@ionic-internal/component-api/v5/tab-button/slots.mdx';
 
 # ion-tab-button
 
-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).
 
-See the [tabs documentation](tabs.md) for more details on configuring tabs.
+See the [tabs documentation](tabs.mdx) for more details on configuring tabs.
 
 ## Usage
 
diff --git a/versioned_docs/version-v5/api/tab.md b/versioned_docs/version-v5/api/tab.mdx
similarity index 73%
rename from versioned_docs/version-v5/api/tab.md
rename to versioned_docs/version-v5/api/tab.mdx
index 5b15146cccd..4d541c312d6 100644
--- a/versioned_docs/version-v5/api/tab.md
+++ b/versioned_docs/version-v5/api/tab.mdx
@@ -5,20 +5,20 @@ sidebar_label: 'ion-tab'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/tab/props.md';
-import Events from '@ionic-internal/component-api/v5/tab/events.md';
-import Methods from '@ionic-internal/component-api/v5/tab/methods.md';
-import Parts from '@ionic-internal/component-api/v5/tab/parts.md';
+import Props from '@ionic-internal/component-api/v5/tab/props.mdx';
+import Events from '@ionic-internal/component-api/v5/tab/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/tab/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/tab/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/tab/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/tab/slots.md';
+import Slots from '@ionic-internal/component-api/v5/tab/slots.mdx';
 
 # ion-tab
 
-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: This component should only be used with vanilla JavaScript projects. For Angular, React, and Vue apps you do not need to use `ion-tab` to declare your tab components.
 
-See the [tabs documentation](tabs.md) for more details on configuring tabs.
+See the [tabs documentation](tabs.mdx) for more details on configuring tabs.
 
 ## Properties
 
diff --git a/versioned_docs/version-v5/api/tabs.md b/versioned_docs/version-v5/api/tabs.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/tabs.md
rename to versioned_docs/version-v5/api/tabs.mdx
index 5a8d9777831..7a560efed87 100644
--- a/versioned_docs/version-v5/api/tabs.md
+++ b/versioned_docs/version-v5/api/tabs.mdx
@@ -9,17 +9,17 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/tabs/props.md';
-import Events from '@ionic-internal/component-api/v5/tabs/events.md';
-import Methods from '@ionic-internal/component-api/v5/tabs/methods.md';
-import Parts from '@ionic-internal/component-api/v5/tabs/parts.md';
+import Props from '@ionic-internal/component-api/v5/tabs/props.mdx';
+import Events from '@ionic-internal/component-api/v5/tabs/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/tabs/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/tabs/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/tabs/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/tabs/slots.md';
+import Slots from '@ionic-internal/component-api/v5/tabs/slots.mdx';
 
 # ion-tabs
 
 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-v5/api/text.md b/versioned_docs/version-v5/api/text.mdx
similarity index 98%
rename from versioned_docs/version-v5/api/text.md
rename to versioned_docs/version-v5/api/text.mdx
index 81af4617abc..e8591180047 100644
--- a/versioned_docs/version-v5/api/text.md
+++ b/versioned_docs/version-v5/api/text.mdx
@@ -7,12 +7,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/text/props.md';
-import Events from '@ionic-internal/component-api/v5/text/events.md';
-import Methods from '@ionic-internal/component-api/v5/text/methods.md';
-import Parts from '@ionic-internal/component-api/v5/text/parts.md';
+import Props from '@ionic-internal/component-api/v5/text/props.mdx';
+import Events from '@ionic-internal/component-api/v5/text/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/text/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/text/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/text/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/text/slots.md';
+import Slots from '@ionic-internal/component-api/v5/text/slots.mdx';
 
 # ion-text
 
diff --git a/versioned_docs/version-v5/api/textarea.md b/versioned_docs/version-v5/api/textarea.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/textarea.md
rename to versioned_docs/version-v5/api/textarea.mdx
index 166bd8d6fd0..82602f9ff83 100644
--- a/versioned_docs/version-v5/api/textarea.md
+++ b/versioned_docs/version-v5/api/textarea.mdx
@@ -5,12 +5,12 @@ sidebar_label: 'ion-textarea'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/textarea/props.md';
-import Events from '@ionic-internal/component-api/v5/textarea/events.md';
-import Methods from '@ionic-internal/component-api/v5/textarea/methods.md';
-import Parts from '@ionic-internal/component-api/v5/textarea/parts.md';
+import Props from '@ionic-internal/component-api/v5/textarea/props.mdx';
+import Events from '@ionic-internal/component-api/v5/textarea/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/textarea/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/textarea/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/textarea/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/textarea/slots.md';
+import Slots from '@ionic-internal/component-api/v5/textarea/slots.mdx';
 
 # ion-textarea
 
diff --git a/versioned_docs/version-v5/api/thumbnail.md b/versioned_docs/version-v5/api/thumbnail.mdx
similarity index 98%
rename from versioned_docs/version-v5/api/thumbnail.md
rename to versioned_docs/version-v5/api/thumbnail.mdx
index e8fa9edeba2..679161f4f61 100644
--- a/versioned_docs/version-v5/api/thumbnail.md
+++ b/versioned_docs/version-v5/api/thumbnail.mdx
@@ -7,12 +7,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/thumbnail/props.md';
-import Events from '@ionic-internal/component-api/v5/thumbnail/events.md';
-import Methods from '@ionic-internal/component-api/v5/thumbnail/methods.md';
-import Parts from '@ionic-internal/component-api/v5/thumbnail/parts.md';
+import Props from '@ionic-internal/component-api/v5/thumbnail/props.mdx';
+import Events from '@ionic-internal/component-api/v5/thumbnail/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/thumbnail/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/thumbnail/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/thumbnail/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/thumbnail/slots.md';
+import Slots from '@ionic-internal/component-api/v5/thumbnail/slots.mdx';
 
 # ion-thumbnail
 
diff --git a/versioned_docs/version-v5/api/title.md b/versioned_docs/version-v5/api/title.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/title.md
rename to versioned_docs/version-v5/api/title.mdx
index f55c320ea96..ecba94e8a66 100644
--- a/versioned_docs/version-v5/api/title.md
+++ b/versioned_docs/version-v5/api/title.mdx
@@ -7,12 +7,12 @@ sidebar_label: 'ion-title'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/title/props.md';
-import Events from '@ionic-internal/component-api/v5/title/events.md';
-import Methods from '@ionic-internal/component-api/v5/title/methods.md';
-import Parts from '@ionic-internal/component-api/v5/title/parts.md';
+import Props from '@ionic-internal/component-api/v5/title/props.mdx';
+import Events from '@ionic-internal/component-api/v5/title/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/title/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/title/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/title/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/title/slots.md';
+import Slots from '@ionic-internal/component-api/v5/title/slots.mdx';
 
 # ion-title
 
diff --git a/versioned_docs/version-v5/api/toast.md b/versioned_docs/version-v5/api/toast.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/toast.md
rename to versioned_docs/version-v5/api/toast.mdx
index dd4b4b7b962..ccfb535affc 100644
--- a/versioned_docs/version-v5/api/toast.md
+++ b/versioned_docs/version-v5/api/toast.mdx
@@ -7,12 +7,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/toast/props.md';
-import Events from '@ionic-internal/component-api/v5/toast/events.md';
-import Methods from '@ionic-internal/component-api/v5/toast/methods.md';
-import Parts from '@ionic-internal/component-api/v5/toast/parts.md';
+import Props from '@ionic-internal/component-api/v5/toast/props.mdx';
+import Events from '@ionic-internal/component-api/v5/toast/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/toast/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/toast/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/toast/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/toast/slots.md';
+import Slots from '@ionic-internal/component-api/v5/toast/slots.mdx';
 
 # ion-toast
 
diff --git a/versioned_docs/version-v5/api/toggle.md b/versioned_docs/version-v5/api/toggle.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/toggle.md
rename to versioned_docs/version-v5/api/toggle.mdx
index 009cecf1b54..0c0fbcc9a55 100644
--- a/versioned_docs/version-v5/api/toggle.md
+++ b/versioned_docs/version-v5/api/toggle.mdx
@@ -9,12 +9,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/toggle/props.md';
-import Events from '@ionic-internal/component-api/v5/toggle/events.md';
-import Methods from '@ionic-internal/component-api/v5/toggle/methods.md';
-import Parts from '@ionic-internal/component-api/v5/toggle/parts.md';
+import Props from '@ionic-internal/component-api/v5/toggle/props.mdx';
+import Events from '@ionic-internal/component-api/v5/toggle/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/toggle/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/toggle/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/toggle/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/toggle/slots.md';
+import Slots from '@ionic-internal/component-api/v5/toggle/slots.mdx';
 
 # ion-toggle
 
diff --git a/versioned_docs/version-v5/api/toolbar.md b/versioned_docs/version-v5/api/toolbar.mdx
similarity index 99%
rename from versioned_docs/version-v5/api/toolbar.md
rename to versioned_docs/version-v5/api/toolbar.mdx
index 28d9eb1255b..2b2076ffaad 100644
--- a/versioned_docs/version-v5/api/toolbar.md
+++ b/versioned_docs/version-v5/api/toolbar.mdx
@@ -9,12 +9,12 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/toolbar/props.md';
-import Events from '@ionic-internal/component-api/v5/toolbar/events.md';
-import Methods from '@ionic-internal/component-api/v5/toolbar/methods.md';
-import Parts from '@ionic-internal/component-api/v5/toolbar/parts.md';
+import Props from '@ionic-internal/component-api/v5/toolbar/props.mdx';
+import Events from '@ionic-internal/component-api/v5/toolbar/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/toolbar/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/toolbar/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/toolbar/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/toolbar/slots.md';
+import Slots from '@ionic-internal/component-api/v5/toolbar/slots.mdx';
 
 # ion-toolbar
 
diff --git a/versioned_docs/version-v5/api/virtual-scroll.md b/versioned_docs/version-v5/api/virtual-scroll.mdx
similarity index 98%
rename from versioned_docs/version-v5/api/virtual-scroll.md
rename to versioned_docs/version-v5/api/virtual-scroll.mdx
index 073d48ac72f..bf3c81ae57d 100644
--- a/versioned_docs/version-v5/api/virtual-scroll.md
+++ b/versioned_docs/version-v5/api/virtual-scroll.mdx
@@ -7,12 +7,12 @@ sidebar_label: 'ion-virtual-scroll'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v5/virtual-scroll/props.md';
-import Events from '@ionic-internal/component-api/v5/virtual-scroll/events.md';
-import Methods from '@ionic-internal/component-api/v5/virtual-scroll/methods.md';
-import Parts from '@ionic-internal/component-api/v5/virtual-scroll/parts.md';
+import Props from '@ionic-internal/component-api/v5/virtual-scroll/props.mdx';
+import Events from '@ionic-internal/component-api/v5/virtual-scroll/events.mdx';
+import Methods from '@ionic-internal/component-api/v5/virtual-scroll/methods.mdx';
+import Parts from '@ionic-internal/component-api/v5/virtual-scroll/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v5/virtual-scroll/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v5/virtual-scroll/slots.md';
+import Slots from '@ionic-internal/component-api/v5/virtual-scroll/slots.mdx';
 
 # ion-virtual-scroll
 
@@ -46,7 +46,7 @@ scrolling. In order to better control images, Ionic provides `<ion-img>`
 to manage HTTP requests and image rendering. While scrolling through items
 quickly, `<ion-img>` knows when and when not to make requests, when and
 when not to render images, and only loads the images that are viewable
-after scrolling. [Read more about `ion-img`.](img.md)
+after scrolling. [Read more about `ion-img`.](img.mdx)
 
 It's also important for app developers to ensure image sizes are locked in,
 and after images have fully loaded they do not change size and affect any
@@ -82,7 +82,7 @@ via CSS.
 ### Use `ion-img` for images
 
 When including images within Virtual Scroll, be sure to use
-[`ion-img`](img.md) rather than the standard `<img>` HTML element.
+[`ion-img`](img.mdx) rather than the standard `<img>` HTML element.
 With `ion-img`, images are lazy loaded so only the viewable ones are
 rendered, and HTTP requests are efficiently controlled while scrolling.
 
diff --git a/versioned_docs/version-v5/cli.md b/versioned_docs/version-v5/cli.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli.md
rename to versioned_docs/version-v5/cli.mdx
diff --git a/versioned_docs/version-v5/cli/commands/build.md b/versioned_docs/version-v5/cli/commands/build.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/build.md
rename to versioned_docs/version-v5/cli/commands/build.mdx
diff --git a/versioned_docs/version-v5/cli/commands/capacitor-add.md b/versioned_docs/version-v5/cli/commands/capacitor-add.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/capacitor-add.md
rename to versioned_docs/version-v5/cli/commands/capacitor-add.mdx
diff --git a/versioned_docs/version-v5/cli/commands/capacitor-build.md b/versioned_docs/version-v5/cli/commands/capacitor-build.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/capacitor-build.md
rename to versioned_docs/version-v5/cli/commands/capacitor-build.mdx
diff --git a/versioned_docs/version-v5/cli/commands/capacitor-copy.md b/versioned_docs/version-v5/cli/commands/capacitor-copy.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/capacitor-copy.md
rename to versioned_docs/version-v5/cli/commands/capacitor-copy.mdx
diff --git a/versioned_docs/version-v5/cli/commands/capacitor-open.md b/versioned_docs/version-v5/cli/commands/capacitor-open.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/capacitor-open.md
rename to versioned_docs/version-v5/cli/commands/capacitor-open.mdx
diff --git a/versioned_docs/version-v5/cli/commands/capacitor-run.md b/versioned_docs/version-v5/cli/commands/capacitor-run.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/capacitor-run.md
rename to versioned_docs/version-v5/cli/commands/capacitor-run.mdx
diff --git a/versioned_docs/version-v5/cli/commands/capacitor-sync.md b/versioned_docs/version-v5/cli/commands/capacitor-sync.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/capacitor-sync.md
rename to versioned_docs/version-v5/cli/commands/capacitor-sync.mdx
diff --git a/versioned_docs/version-v5/cli/commands/capacitor-update.md b/versioned_docs/version-v5/cli/commands/capacitor-update.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/capacitor-update.md
rename to versioned_docs/version-v5/cli/commands/capacitor-update.mdx
diff --git a/versioned_docs/version-v5/cli/commands/completion.md b/versioned_docs/version-v5/cli/commands/completion.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/completion.md
rename to versioned_docs/version-v5/cli/commands/completion.mdx
diff --git a/versioned_docs/version-v5/cli/commands/config-get.md b/versioned_docs/version-v5/cli/commands/config-get.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/config-get.md
rename to versioned_docs/version-v5/cli/commands/config-get.mdx
diff --git a/versioned_docs/version-v5/cli/commands/config-set.md b/versioned_docs/version-v5/cli/commands/config-set.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/config-set.md
rename to versioned_docs/version-v5/cli/commands/config-set.mdx
diff --git a/versioned_docs/version-v5/cli/commands/config-unset.md b/versioned_docs/version-v5/cli/commands/config-unset.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/config-unset.md
rename to versioned_docs/version-v5/cli/commands/config-unset.mdx
diff --git a/versioned_docs/version-v5/cli/commands/cordova-build.md b/versioned_docs/version-v5/cli/commands/cordova-build.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/cordova-build.md
rename to versioned_docs/version-v5/cli/commands/cordova-build.mdx
diff --git a/versioned_docs/version-v5/cli/commands/cordova-compile.md b/versioned_docs/version-v5/cli/commands/cordova-compile.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/cordova-compile.md
rename to versioned_docs/version-v5/cli/commands/cordova-compile.mdx
diff --git a/versioned_docs/version-v5/cli/commands/cordova-emulate.md b/versioned_docs/version-v5/cli/commands/cordova-emulate.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/cordova-emulate.md
rename to versioned_docs/version-v5/cli/commands/cordova-emulate.mdx
diff --git a/versioned_docs/version-v5/cli/commands/cordova-platform.md b/versioned_docs/version-v5/cli/commands/cordova-platform.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/cordova-platform.md
rename to versioned_docs/version-v5/cli/commands/cordova-platform.mdx
diff --git a/versioned_docs/version-v5/cli/commands/cordova-plugin.md b/versioned_docs/version-v5/cli/commands/cordova-plugin.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/cordova-plugin.md
rename to versioned_docs/version-v5/cli/commands/cordova-plugin.mdx
diff --git a/versioned_docs/version-v5/cli/commands/cordova-prepare.md b/versioned_docs/version-v5/cli/commands/cordova-prepare.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/cordova-prepare.md
rename to versioned_docs/version-v5/cli/commands/cordova-prepare.mdx
diff --git a/versioned_docs/version-v5/cli/commands/cordova-requirements.md b/versioned_docs/version-v5/cli/commands/cordova-requirements.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/cordova-requirements.md
rename to versioned_docs/version-v5/cli/commands/cordova-requirements.mdx
diff --git a/versioned_docs/version-v5/cli/commands/cordova-resources.md b/versioned_docs/version-v5/cli/commands/cordova-resources.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/cordova-resources.md
rename to versioned_docs/version-v5/cli/commands/cordova-resources.mdx
diff --git a/versioned_docs/version-v5/cli/commands/cordova-run.md b/versioned_docs/version-v5/cli/commands/cordova-run.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/cordova-run.md
rename to versioned_docs/version-v5/cli/commands/cordova-run.mdx
diff --git a/versioned_docs/version-v5/cli/commands/deploy-add.md b/versioned_docs/version-v5/cli/commands/deploy-add.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/deploy-add.md
rename to versioned_docs/version-v5/cli/commands/deploy-add.mdx
diff --git a/versioned_docs/version-v5/cli/commands/deploy-build.md b/versioned_docs/version-v5/cli/commands/deploy-build.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/deploy-build.md
rename to versioned_docs/version-v5/cli/commands/deploy-build.mdx
diff --git a/versioned_docs/version-v5/cli/commands/deploy-configure.md b/versioned_docs/version-v5/cli/commands/deploy-configure.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/deploy-configure.md
rename to versioned_docs/version-v5/cli/commands/deploy-configure.mdx
diff --git a/versioned_docs/version-v5/cli/commands/deploy-manifest.md b/versioned_docs/version-v5/cli/commands/deploy-manifest.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/deploy-manifest.md
rename to versioned_docs/version-v5/cli/commands/deploy-manifest.mdx
diff --git a/versioned_docs/version-v5/cli/commands/docs.md b/versioned_docs/version-v5/cli/commands/docs.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/docs.md
rename to versioned_docs/version-v5/cli/commands/docs.mdx
diff --git a/versioned_docs/version-v5/cli/commands/doctor-check.md b/versioned_docs/version-v5/cli/commands/doctor-check.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/doctor-check.md
rename to versioned_docs/version-v5/cli/commands/doctor-check.mdx
diff --git a/versioned_docs/version-v5/cli/commands/doctor-list.md b/versioned_docs/version-v5/cli/commands/doctor-list.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/doctor-list.md
rename to versioned_docs/version-v5/cli/commands/doctor-list.mdx
diff --git a/versioned_docs/version-v5/cli/commands/doctor-treat.md b/versioned_docs/version-v5/cli/commands/doctor-treat.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/doctor-treat.md
rename to versioned_docs/version-v5/cli/commands/doctor-treat.mdx
diff --git a/versioned_docs/version-v5/cli/commands/enterprise-register.md b/versioned_docs/version-v5/cli/commands/enterprise-register.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/enterprise-register.md
rename to versioned_docs/version-v5/cli/commands/enterprise-register.mdx
diff --git a/versioned_docs/version-v5/cli/commands/generate.md b/versioned_docs/version-v5/cli/commands/generate.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/generate.md
rename to versioned_docs/version-v5/cli/commands/generate.mdx
diff --git a/versioned_docs/version-v5/cli/commands/git-remote.md b/versioned_docs/version-v5/cli/commands/git-remote.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/git-remote.md
rename to versioned_docs/version-v5/cli/commands/git-remote.mdx
diff --git a/versioned_docs/version-v5/cli/commands/info.md b/versioned_docs/version-v5/cli/commands/info.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/info.md
rename to versioned_docs/version-v5/cli/commands/info.mdx
diff --git a/versioned_docs/version-v5/cli/commands/init.md b/versioned_docs/version-v5/cli/commands/init.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/init.md
rename to versioned_docs/version-v5/cli/commands/init.mdx
diff --git a/versioned_docs/version-v5/cli/commands/integrations-disable.md b/versioned_docs/version-v5/cli/commands/integrations-disable.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/integrations-disable.md
rename to versioned_docs/version-v5/cli/commands/integrations-disable.mdx
diff --git a/versioned_docs/version-v5/cli/commands/integrations-enable.md b/versioned_docs/version-v5/cli/commands/integrations-enable.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/integrations-enable.md
rename to versioned_docs/version-v5/cli/commands/integrations-enable.mdx
diff --git a/versioned_docs/version-v5/cli/commands/integrations-list.md b/versioned_docs/version-v5/cli/commands/integrations-list.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/integrations-list.md
rename to versioned_docs/version-v5/cli/commands/integrations-list.mdx
diff --git a/versioned_docs/version-v5/cli/commands/link.md b/versioned_docs/version-v5/cli/commands/link.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/link.md
rename to versioned_docs/version-v5/cli/commands/link.mdx
diff --git a/versioned_docs/version-v5/cli/commands/login.md b/versioned_docs/version-v5/cli/commands/login.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/login.md
rename to versioned_docs/version-v5/cli/commands/login.mdx
diff --git a/versioned_docs/version-v5/cli/commands/logout.md b/versioned_docs/version-v5/cli/commands/logout.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/logout.md
rename to versioned_docs/version-v5/cli/commands/logout.mdx
diff --git a/versioned_docs/version-v5/cli/commands/package-build.md b/versioned_docs/version-v5/cli/commands/package-build.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/package-build.md
rename to versioned_docs/version-v5/cli/commands/package-build.mdx
diff --git a/versioned_docs/version-v5/cli/commands/package-deploy.md b/versioned_docs/version-v5/cli/commands/package-deploy.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/package-deploy.md
rename to versioned_docs/version-v5/cli/commands/package-deploy.mdx
diff --git a/versioned_docs/version-v5/cli/commands/repair.md b/versioned_docs/version-v5/cli/commands/repair.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/repair.md
rename to versioned_docs/version-v5/cli/commands/repair.mdx
diff --git a/versioned_docs/version-v5/cli/commands/serve.md b/versioned_docs/version-v5/cli/commands/serve.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/serve.md
rename to versioned_docs/version-v5/cli/commands/serve.mdx
diff --git a/versioned_docs/version-v5/cli/commands/signup.md b/versioned_docs/version-v5/cli/commands/signup.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/signup.md
rename to versioned_docs/version-v5/cli/commands/signup.mdx
diff --git a/versioned_docs/version-v5/cli/commands/ssh-add.md b/versioned_docs/version-v5/cli/commands/ssh-add.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/ssh-add.md
rename to versioned_docs/version-v5/cli/commands/ssh-add.mdx
diff --git a/versioned_docs/version-v5/cli/commands/ssh-delete.md b/versioned_docs/version-v5/cli/commands/ssh-delete.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/ssh-delete.md
rename to versioned_docs/version-v5/cli/commands/ssh-delete.mdx
diff --git a/versioned_docs/version-v5/cli/commands/ssh-generate.md b/versioned_docs/version-v5/cli/commands/ssh-generate.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/ssh-generate.md
rename to versioned_docs/version-v5/cli/commands/ssh-generate.mdx
diff --git a/versioned_docs/version-v5/cli/commands/ssh-list.md b/versioned_docs/version-v5/cli/commands/ssh-list.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/ssh-list.md
rename to versioned_docs/version-v5/cli/commands/ssh-list.mdx
diff --git a/versioned_docs/version-v5/cli/commands/ssh-setup.md b/versioned_docs/version-v5/cli/commands/ssh-setup.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/ssh-setup.md
rename to versioned_docs/version-v5/cli/commands/ssh-setup.mdx
diff --git a/versioned_docs/version-v5/cli/commands/ssh-use.md b/versioned_docs/version-v5/cli/commands/ssh-use.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/ssh-use.md
rename to versioned_docs/version-v5/cli/commands/ssh-use.mdx
diff --git a/versioned_docs/version-v5/cli/commands/ssl-generate.md b/versioned_docs/version-v5/cli/commands/ssl-generate.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/ssl-generate.md
rename to versioned_docs/version-v5/cli/commands/ssl-generate.mdx
diff --git a/versioned_docs/version-v5/cli/commands/start.md b/versioned_docs/version-v5/cli/commands/start.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/commands/start.md
rename to versioned_docs/version-v5/cli/commands/start.mdx
diff --git a/versioned_docs/version-v5/cli/configuration.md b/versioned_docs/version-v5/cli/configuration.mdx
similarity index 98%
rename from versioned_docs/version-v5/cli/configuration.md
rename to versioned_docs/version-v5/cli/configuration.mdx
index 63d6ca786af..db3e9eb2751 100644
--- a/versioned_docs/version-v5/cli/configuration.md
+++ b/versioned_docs/version-v5/cli/configuration.mdx
@@ -4,7 +4,7 @@
 
 Configuration values are stored in JSON files. The Ionic CLI maintains a global configuration file, usually located at `~/.ionic/config.json`, and project configuration files, usually at the project's root directory as `ionic.config.json`.
 
-The CLI provides commands for setting and printing config values from project config files and the global CLI config file. See `ionic config --help` or see the documentation for usage of [`ionic config get`](commands/config-get.md) and [`ionic config set`](commands/config-set.md).
+The CLI provides commands for setting and printing config values from project config files and the global CLI config file. See `ionic config --help` or see the documentation for usage of [`ionic config get`](commands/config-get.mdx) and [`ionic config set`](commands/config-set.mdx).
 
 ### Project Configuration File
 
@@ -42,7 +42,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. See [Using a Proxy](using-a-proxy.md).
+- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. See [Using a Proxy](using-a-proxy.mdx).
 - `IONIC_TOKEN`: Automatically authenticates with [Appflow](https://ionic.io/appflow).
 
 ## Flags
@@ -111,7 +111,7 @@ module.exports = function (ctx) {
   <em>Available in CLI 6.2.0+</em>
 </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
 These docs give an overview of the multi-app feature of the Ionic CLI, but don't really go into details for each framework.
diff --git a/versioned_docs/version-v5/cli/livereload.md b/versioned_docs/version-v5/cli/livereload.mdx
similarity index 96%
rename from versioned_docs/version-v5/cli/livereload.md
rename to versioned_docs/version-v5/cli/livereload.mdx
index d43ea298b02..81787c9f9de 100644
--- a/versioned_docs/version-v5/cli/livereload.md
+++ b/versioned_docs/version-v5/cli/livereload.mdx
@@ -1,6 +1,6 @@
 # Live Reload
 
-One option that can boost productivity when building Ionic apps is **Live Reload** (or **live-reload**). When active, Live Reload will reload the browser or [Web View](../core-concepts/webview.md) when changes in the app are detected. This is particularly useful for developing using hardware devices.
+One option that can boost productivity when building Ionic apps is **Live Reload** (or **live-reload**). When active, Live Reload will reload the browser or [Web View](../core-concepts/webview.mdx) when changes in the app are detected. This is particularly useful for developing using hardware devices.
 
 ## Terms
 
@@ -61,6 +61,6 @@ Remember, with the `--external` option, others on your Wi-Fi network will be abl
 
 ## Tips
 
-- With Cordova, use the `--device`, `--emulator`, and `--target` options to narrow down target devices. Use the `--list` option to list all targets. See usage in the [command docs](commands/cordova-run.md).
+- With Cordova, use the `--device`, `--emulator`, and `--target` options to narrow down target devices. Use the `--list` option to list all targets. See usage in the [command docs](commands/cordova-run.mdx).
 - You can separate the dev server process and the deploy process by using `ionic serve` and the `--livereload-url` option of `ionic cordova run` or `ionic capacitor run`.
 - For Android, it is possible to configure [adb](https://developer.android.com/studio/command-line/adb) to always forward ports while the adb server is running (see `adb reverse`). With port forwarding set up, an external address would no longer be required. You can also setup the adb bridge over TCP such that subsequent deploys no longer need a USB cable.
diff --git a/versioned_docs/version-v5/cli/using-a-proxy.md b/versioned_docs/version-v5/cli/using-a-proxy.mdx
similarity index 100%
rename from versioned_docs/version-v5/cli/using-a-proxy.md
rename to versioned_docs/version-v5/cli/using-a-proxy.mdx
diff --git a/versioned_docs/version-v5/components.md b/versioned_docs/version-v5/components.mdx
similarity index 98%
rename from versioned_docs/version-v5/components.md
rename to versioned_docs/version-v5/components.mdx
index 0c43dd0b021..8a9c8a10190 100644
--- a/versioned_docs/version-v5/components.md
+++ b/versioned_docs/version-v5/components.mdx
@@ -20,7 +20,7 @@ hide_table_of_contents: true
 import DocsCard from '@components/global/DocsCard';
 import DocsCards from '@components/global/DocsCards';
 
-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-v5/contributing/coc.md b/versioned_docs/version-v5/contributing/coc.mdx
similarity index 100%
rename from versioned_docs/version-v5/contributing/coc.md
rename to versioned_docs/version-v5/contributing/coc.mdx
diff --git a/versioned_docs/version-v5/contributing/how-to-contribute.md b/versioned_docs/version-v5/contributing/how-to-contribute.mdx
similarity index 99%
rename from versioned_docs/version-v5/contributing/how-to-contribute.md
rename to versioned_docs/version-v5/contributing/how-to-contribute.mdx
index df5f6efbd23..da368fb421f 100644
--- a/versioned_docs/version-v5/contributing/how-to-contribute.md
+++ b/versioned_docs/version-v5/contributing/how-to-contribute.mdx
@@ -8,7 +8,7 @@ Thanks for the interest in contributing to Ionic Framework!
 
 ## Contributing Etiquette
 
-Please see the [Contributor Code of Conduct](coc.md) for information on the rules of conduct.
+Please see the [Contributor Code of Conduct](coc.mdx) for information on the rules of conduct.
 
 ## Creating an Issue
 
diff --git a/versioned_docs/version-v5/core-concepts/cross-platform.md b/versioned_docs/version-v5/core-concepts/cross-platform.mdx
similarity index 93%
rename from versioned_docs/version-v5/core-concepts/cross-platform.md
rename to versioned_docs/version-v5/core-concepts/cross-platform.mdx
index f7e5accced9..634e07688d7 100644
--- a/versioned_docs/version-v5/core-concepts/cross-platform.md
+++ b/versioned_docs/version-v5/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 mob
 
 <img src={require('@site/static/img/building/cross-platform-items.png').default} />
 
-To improve this experience, we can wrap the items in a [Grid](../layout/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](../layout/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, see the [Grid](../layout/grid.md) documentation.
+For more information on customizing with grid, see the [Grid](../layout/grid.mdx) documentation.
 
 ## Storage
 
diff --git a/versioned_docs/version-v5/core-concepts/fundamentals.md b/versioned_docs/version-v5/core-concepts/fundamentals.mdx
similarity index 85%
rename from versioned_docs/version-v5/core-concepts/fundamentals.md
rename to versioned_docs/version-v5/core-concepts/fundamentals.mdx
index 23e9713a88b..caf6eefe548 100644
--- a/versioned_docs/version-v5/core-concepts/fundamentals.md
+++ b/versioned_docs/version-v5/core-concepts/fundamentals.mdx
@@ -8,13 +8,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 see [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 see [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 <a href="https://www.apple.com/ios" target="_blank">iOS design language</a>. Similarly, Android devices use Google's design language called <a href="https://material.io/guidelines/" target="_blank">Material Design</a>.
 
-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
 
@@ -31,19 +31,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 <a href="https://www.apple.com/ios/app-store/" target="_blank">App Store</a> and <a href="https://play.google.com/" target="_blank">Play Store</a>. Both iOS and Android software development kits (SDKs) provide [Web Views](webview.md) which render any Ionic app, while still allowing for <i>full</i> Native SDK access.
+One of the most common use cases for Ionic is to build an app which can be downloaded from both the <a href="https://www.apple.com/ios/app-store/" target="_blank">App Store</a> and <a href="https://play.google.com/" target="_blank">Play Store</a>. Both iOS and Android software development kits (SDKs) provide [Web Views](webview.mdx) which render any Ionic app, while still allowing for <i>full</i> Native SDK access.
 
 Projects such as <a href="https://capacitorjs.com/" target="_blank">Capacitor</a> and <a href="https://cordova.apache.org/" target="_blank">Cordova</a> 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 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank">CSS</a> which allows us to take advantage of the flexibility that <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank">CSS properties (variables)</a> 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 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank">CSS</a> which allows us to take advantage of the flexibility that <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank">CSS properties (variables)</a> 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-v5/core-concepts/webview.md b/versioned_docs/version-v5/core-concepts/webview.mdx
similarity index 77%
rename from versioned_docs/version-v5/core-concepts/webview.md
rename to versioned_docs/version-v5/core-concepts/webview.mdx
index a2e69cf59c2..78df3e829a6 100644
--- a/versioned_docs/version-v5/core-concepts/webview.md
+++ b/versioned_docs/version-v5/core-concepts/webview.mdx
@@ -2,13 +2,13 @@
 
 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 <a href="https://github.com/ionic-team/cordova-plugin-ionic-webview" target="_blank">Web View plugin</a>. The plugin is provided by default when using the Ionic CLI.
+For [Cordova](../reference/glossary.mdx#cordova), Ionic maintains a <a href="https://github.com/ionic-team/cordova-plugin-ionic-webview" target="_blank">Web View plugin</a>. 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 <a href="https://whatwebcando.today" target="_blank">HTML5 APIs</a> 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.
 
@@ -18,7 +18,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. See 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. See the [CORS FAQs](../troubleshooting/cors.mdx) for information on dealing with CORS in Ionic apps.
 
 ### File Protocol
 
@@ -32,7 +32,7 @@ import { Capacitor } from '@capacitor/core';
 Capacitor.convertFileSrc(filePath);
 ```
 
-For Cordova apps, the [Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview) provides a utility function for converting File URIs: `window.Ionic.WebView.convertFileSrc()`. There is also a corresponding Ionic Native plugin: [`@awesome-cordova-plugins/ionic-webview`](../native/ionic-webview.md).
+For Cordova apps, the [Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview) provides a utility function for converting File URIs: `window.Ionic.WebView.convertFileSrc()`. There is also a corresponding Ionic Native plugin: [`@awesome-cordova-plugins/ionic-webview`](../native/ionic-webview.mdx).
 
 ### Implementations
 
diff --git a/versioned_docs/version-v5/core-concepts/what-are-progressive-web-apps.md b/versioned_docs/version-v5/core-concepts/what-are-progressive-web-apps.mdx
similarity index 100%
rename from versioned_docs/version-v5/core-concepts/what-are-progressive-web-apps.md
rename to versioned_docs/version-v5/core-concepts/what-are-progressive-web-apps.mdx
diff --git a/versioned_docs/version-v5/deployment/app-store.md b/versioned_docs/version-v5/deployment/app-store.mdx
similarity index 100%
rename from versioned_docs/version-v5/deployment/app-store.md
rename to versioned_docs/version-v5/deployment/app-store.mdx
diff --git a/versioned_docs/version-v5/deployment/desktop-app.md b/versioned_docs/version-v5/deployment/desktop-app.mdx
similarity index 100%
rename from versioned_docs/version-v5/deployment/desktop-app.md
rename to versioned_docs/version-v5/deployment/desktop-app.mdx
diff --git a/versioned_docs/version-v5/deployment/play-store.md b/versioned_docs/version-v5/deployment/play-store.mdx
similarity index 100%
rename from versioned_docs/version-v5/deployment/play-store.md
rename to versioned_docs/version-v5/deployment/play-store.mdx
diff --git a/versioned_docs/version-v5/deployment/progressive-web-app.md b/versioned_docs/version-v5/deployment/progressive-web-app.mdx
similarity index 96%
rename from versioned_docs/version-v5/deployment/progressive-web-app.md
rename to versioned_docs/version-v5/deployment/progressive-web-app.mdx
index 98efa8b40e0..46de694920a 100644
--- a/versioned_docs/version-v5/deployment/progressive-web-app.md
+++ b/versioned_docs/version-v5/deployment/progressive-web-app.mdx
@@ -9,7 +9,7 @@ import DocsCards from '@components/global/DocsCards';
 
 # Deploying a Progressive Web App
 
-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 <a href="https://ionicframework.com/pwa" target="_blank">PWA Overview</a> 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 <a href="https://ionicframework.com/pwa" target="_blank">PWA Overview</a> 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 and React.
 
diff --git a/versioned_docs/version-v5/developer-resources/books.md b/versioned_docs/version-v5/developer-resources/books.mdx
similarity index 100%
rename from versioned_docs/version-v5/developer-resources/books.md
rename to versioned_docs/version-v5/developer-resources/books.mdx
diff --git a/versioned_docs/version-v5/developer-resources/courses.md b/versioned_docs/version-v5/developer-resources/courses.mdx
similarity index 100%
rename from versioned_docs/version-v5/developer-resources/courses.md
rename to versioned_docs/version-v5/developer-resources/courses.mdx
diff --git a/versioned_docs/version-v5/developer-resources/guides.md b/versioned_docs/version-v5/developer-resources/guides.mdx
similarity index 76%
rename from versioned_docs/version-v5/developer-resources/guides.md
rename to versioned_docs/version-v5/developer-resources/guides.mdx
index dbe6d9477b8..c0590b83684 100644
--- a/versioned_docs/version-v5/developer-resources/guides.md
+++ b/versioned_docs/version-v5/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-v5/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md b/versioned_docs/version-v5/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx
similarity index 100%
rename from versioned_docs/version-v5/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md
rename to versioned_docs/version-v5/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx
diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/intro.md b/versioned_docs/version-v5/developer-resources/guides/first-app-v3/intro.mdx
similarity index 100%
rename from versioned_docs/version-v5/developer-resources/guides/first-app-v3/intro.md
rename to versioned_docs/version-v5/developer-resources/guides/first-app-v3/intro.mdx
diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/ios-android-camera.md b/versioned_docs/version-v5/developer-resources/guides/first-app-v3/ios-android-camera.mdx
similarity index 100%
rename from versioned_docs/version-v5/developer-resources/guides/first-app-v3/ios-android-camera.md
rename to versioned_docs/version-v5/developer-resources/guides/first-app-v3/ios-android-camera.mdx
diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md b/versioned_docs/version-v5/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx
similarity index 94%
rename from versioned_docs/version-v5/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
rename to versioned_docs/version-v5/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx
index 61d4605e865..30049b7017e 100644
--- a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
+++ b/versioned_docs/version-v5/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 instructions here](../../../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 instructions here](../../../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-v5/developer-resources/guides/first-app-v3/theming.md b/versioned_docs/version-v5/developer-resources/guides/first-app-v3/theming.mdx
similarity index 100%
rename from versioned_docs/version-v5/developer-resources/guides/first-app-v3/theming.md
rename to versioned_docs/version-v5/developer-resources/guides/first-app-v3/theming.mdx
diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md b/versioned_docs/version-v5/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx
similarity index 100%
rename from versioned_docs/version-v5/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
rename to versioned_docs/version-v5/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx
diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md b/versioned_docs/version-v5/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx
similarity index 100%
rename from versioned_docs/version-v5/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md
rename to versioned_docs/version-v5/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx
diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v4/intro.md b/versioned_docs/version-v5/developer-resources/guides/first-app-v4/intro.mdx
similarity index 98%
rename from versioned_docs/version-v5/developer-resources/guides/first-app-v4/intro.md
rename to versioned_docs/version-v5/developer-resources/guides/first-app-v4/intro.mdx
index 88b596a707c..7916776c975 100644
--- a/versioned_docs/version-v5/developer-resources/guides/first-app-v4/intro.md
+++ b/versioned_docs/version-v5/developer-resources/guides/first-app-v4/intro.mdx
@@ -30,7 +30,7 @@ npm install -g @ionic/cli cordova
 :::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. See [Resolving Permission Errors](../../../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../../../developing/tips.mdx#resolving-permission-errors) for more information.
 :::
 
 ## Create an App
diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v4/ios-android-camera.md b/versioned_docs/version-v5/developer-resources/guides/first-app-v4/ios-android-camera.mdx
similarity index 98%
rename from versioned_docs/version-v5/developer-resources/guides/first-app-v4/ios-android-camera.md
rename to versioned_docs/version-v5/developer-resources/guides/first-app-v4/ios-android-camera.mdx
index 8908090edec..d5c4dfcb129 100644
--- a/versioned_docs/version-v5/developer-resources/guides/first-app-v4/ios-android-camera.md
+++ b/versioned_docs/version-v5/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-v5/developer-resources/guides/first-app-v4/theming.md b/versioned_docs/version-v5/developer-resources/guides/first-app-v4/theming.mdx
similarity index 92%
rename from versioned_docs/version-v5/developer-resources/guides/first-app-v4/theming.md
rename to versioned_docs/version-v5/developer-resources/guides/first-app-v4/theming.mdx
index c185f6761c1..c55d591b308 100644
--- a/versioned_docs/version-v5/developer-resources/guides/first-app-v4/theming.md
+++ b/versioned_docs/version-v5/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-v5/developer-resources/posts.md b/versioned_docs/version-v5/developer-resources/posts.mdx
similarity index 100%
rename from versioned_docs/version-v5/developer-resources/posts.md
rename to versioned_docs/version-v5/developer-resources/posts.mdx
diff --git a/versioned_docs/version-v5/developer-resources/tools.md b/versioned_docs/version-v5/developer-resources/tools.mdx
similarity index 92%
rename from versioned_docs/version-v5/developer-resources/tools.md
rename to versioned_docs/version-v5/developer-resources/tools.mdx
index 0cd5ac7d7f3..aa1a7301ba9 100644
--- a/versioned_docs/version-v5/developer-resources/tools.md
+++ b/versioned_docs/version-v5/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 see while developing in Ionic.
 
diff --git a/versioned_docs/version-v5/developer-resources/videos.md b/versioned_docs/version-v5/developer-resources/videos.mdx
similarity index 100%
rename from versioned_docs/version-v5/developer-resources/videos.md
rename to versioned_docs/version-v5/developer-resources/videos.mdx
diff --git a/versioned_docs/version-v5/developing/android.md b/versioned_docs/version-v5/developing/android.mdx
similarity index 95%
rename from versioned_docs/version-v5/developing/android.md
rename to versioned_docs/version-v5/developing/android.mdx
index 23aaa565a6e..03dbe7ba7c3 100644
--- a/versioned_docs/version-v5/developing/android.md
+++ b/versioned_docs/version-v5/developing/android.mdx
@@ -4,14 +4,14 @@ sidebar_label: Developing for Android
 
 # Android Development
 
-This guide covers how to run and debug Ionic apps on Android emulators and devices using [Capacitor](../reference/glossary.md#capacitor) or [Cordova](../reference/glossary.md#cordova). Android apps can be developed on Windows, macOS, and Linux.
+This guide covers how to run and debug Ionic apps on Android emulators and devices using [Capacitor](../reference/glossary.mdx#capacitor) or [Cordova](../reference/glossary.mdx#cordova). Android apps can be developed on Windows, macOS, and Linux.
 
 ## Android Studio
 
-[Android Studio](https://developer.android.com/studio/) is the IDE for creating native Android apps. It includes the [Android SDK](../reference/glossary.md#android-sdk), which
+[Android Studio](https://developer.android.com/studio/) is the IDE for creating native Android apps. It includes the [Android SDK](../reference/glossary.mdx#android-sdk), which
 will need to be configured for use in the command line.
 
-Android Studio is also used to [create Android virtual devices](android.md#creating-an-android-virtual-device), which are required for the Android emulator. Ionic apps can also be [launched to a device](android.md#set-up-an-android-device).
+Android Studio is also used to [create Android virtual devices](android.mdx#creating-an-android-virtual-device), which are required for the Android emulator. Ionic apps can also be [launched to a device](android.mdx#set-up-an-android-device).
 
 :::note
 We don't recommend using Android Studio for _developing_ Ionic apps. Instead, it should only really be used to build and run your apps for the native Android platform and to manage the Android SDK and virtual devices.
@@ -133,7 +133,7 @@ Before apps can be deployed to Android simulators and devices, the native projec
    $ ionic cordova prepare android
    ```
 
-2. **Set the [Package ID](../reference/glossary.md#package-id).**
+2. **Set the [Package ID](../reference/glossary.mdx#package-id).**
 
    For Capacitor, open the `capacitor.config.json` file and modify the `appId` property.
 
@@ -167,7 +167,7 @@ When running on a device make sure the device and your development machine are c
 
 ## Running with Cordova
 
-The Ionic CLI can build, copy, and deploy Ionic apps to Android simulators and devices with a single command. It can also spin up a development server, like the one used in `ionic serve`, to provide [live-reload](../reference/glossary.md#livereload) functionality.
+The Ionic CLI can build, copy, and deploy Ionic apps to Android simulators and devices with a single command. It can also spin up a development server, like the one used in `ionic serve`, to provide [live-reload](../reference/glossary.mdx#livereload) functionality.
 
 Run the following to start a long-running CLI process that boots up a live-reload server:
 
diff --git a/versioned_docs/version-v5/developing/hardware-back-button.md b/versioned_docs/version-v5/developing/hardware-back-button.mdx
similarity index 100%
rename from versioned_docs/version-v5/developing/hardware-back-button.md
rename to versioned_docs/version-v5/developing/hardware-back-button.mdx
diff --git a/versioned_docs/version-v5/developing/ios.md b/versioned_docs/version-v5/developing/ios.mdx
similarity index 94%
rename from versioned_docs/version-v5/developing/ios.md
rename to versioned_docs/version-v5/developing/ios.mdx
index ff2b3129869..ef0c33addfb 100644
--- a/versioned_docs/version-v5/developing/ios.md
+++ b/versioned_docs/version-v5/developing/ios.mdx
@@ -5,14 +5,14 @@ skipIntros: true
 
 # iOS Development
 
-This guide covers how to run and debug Ionic apps on iOS simulators and devices using [Capacitor](../reference/glossary.md#capacitor) or [Cordova](../reference/glossary.md#cordova). iOS apps can only be developed on macOS with Xcode installed.
+This guide covers how to run and debug Ionic apps on iOS simulators and devices using [Capacitor](../reference/glossary.mdx#capacitor) or [Cordova](../reference/glossary.mdx#cordova). iOS apps can only be developed on macOS with Xcode installed.
 
 There are two workflows for running Ionic apps on iOS:
 
 - [Running with Xcode](#running-with-xcode)
 - [Running with the Ionic CLI](#running-with-the-ionic-cli)
 
-The Xcode approach is generally more stable, but the Ionic CLI approach offers [live-reload](../reference/glossary.md#livereload) functionality.
+The Xcode approach is generally more stable, but the Ionic CLI approach offers [live-reload](../reference/glossary.mdx#livereload) functionality.
 
 ## Xcode Setup
 
@@ -46,7 +46,7 @@ Additional setup is required for Cordova to support programmatic builds. This se
 
 ### ios-sim & ios-deploy
 
-The [`ios-sim`](https://github.com/ios-control/ios-sim) and [`ios-deploy`](https://github.com/ios-control/ios-deploy) are utilities that deploy apps to the iOS simulator and iOS devices during development. They can be installed globally with [npm](../reference/glossary.md#npm).
+The [`ios-sim`](https://github.com/ios-control/ios-sim) and [`ios-deploy`](https://github.com/ios-control/ios-deploy) are utilities that deploy apps to the iOS simulator and iOS devices during development. They can be installed globally with [npm](../reference/glossary.mdx#npm).
 
 ```shell
 $ npm install -g ios-sim
@@ -71,7 +71,7 @@ Before apps can be deployed to iOS simulators and devices, the native project mu
    $ ionic cordova prepare ios
    ```
 
-1. <strong>Set the [Package ID](../reference/glossary.md#package-id).</strong>
+1. <strong>Set the [Package ID](../reference/glossary.mdx#package-id).</strong>
 
    For Capacitor, open the `capacitor.config.json` file and modify the `appId` property.
 
@@ -124,7 +124,7 @@ In this workflow, Xcode can automatically fix common compilation and signing iss
 
 ## Running with the Ionic CLI
 
-The Ionic CLI can build, copy, and deploy Ionic apps to iOS simulators and devices with a single command. It can also spin up a development server, like the one used in `ionic serve`, to provide [live-reload](../reference/glossary.md#livereload) functionality.
+The Ionic CLI can build, copy, and deploy Ionic apps to iOS simulators and devices with a single command. It can also spin up a development server, like the one used in `ionic serve`, to provide [live-reload](../reference/glossary.mdx#livereload) functionality.
 
 With live-reload, changes made to the app's source files trigger a rebuild of web assets and the changes are reflected on the simulator or device without having to deploy again.
 
diff --git a/versioned_docs/version-v5/developing/keyboard.md b/versioned_docs/version-v5/developing/keyboard.mdx
similarity index 100%
rename from versioned_docs/version-v5/developing/keyboard.md
rename to versioned_docs/version-v5/developing/keyboard.mdx
diff --git a/versioned_docs/version-v5/developing/previewing.md b/versioned_docs/version-v5/developing/previewing.mdx
similarity index 85%
rename from versioned_docs/version-v5/developing/previewing.md
rename to versioned_docs/version-v5/developing/previewing.mdx
index 10330b093e8..db5f7093fc0 100644
--- a/versioned_docs/version-v5/developing/previewing.md
+++ b/versioned_docs/version-v5/developing/previewing.mdx
@@ -2,9 +2,9 @@
 
 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
 
@@ -28,5 +28,5 @@ $ ionic serve
 
 With `ionic serve` running, continue developing your app. As you save changes, the app reloads with those changes applied.
 
-When implementing native functionality, use [Platform Detection](../core-concepts/cross-platform.md).
-When you're ready to test on a real device, see here 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, see here for [iOS](ios.mdx) and [Android](android.mdx).
diff --git a/versioned_docs/version-v5/developing/scaffolding.md b/versioned_docs/version-v5/developing/scaffolding.mdx
similarity index 91%
rename from versioned_docs/version-v5/developing/scaffolding.md
rename to versioned_docs/version-v5/developing/scaffolding.mdx
index c46c2eabd72..7d11da620e7 100644
--- a/versioned_docs/version-v5/developing/scaffolding.md
+++ b/versioned_docs/version-v5/developing/scaffolding.mdx
@@ -34,7 +34,7 @@ The `src/app/` directory contains the root app component and module as well as a
 
 ## Generating New Features
 
-The Ionic CLI can generate new app features with the [`ionic generate`](../cli/commands/generate.md) command. By running `ionic generate` in the command line, a selection prompt is displayed which lists the available features that can be generated.
+The Ionic CLI can generate new app features with the [`ionic generate`](../cli/commands/generate.mdx) command. By running `ionic generate` in the command line, a selection prompt is displayed which lists the available features that can be generated.
 
 ```shell-session
 $ ionic generate
@@ -78,4 +78,4 @@ The Ionic CLI uses the underlying framework tooling to stay close to best practi
 
 After creating the files and directories for the new page, the CLI will also update the router configuration to include the new page. This reduces the amount of manual work needed to keep the development lifecycle moving.
 
-For more details, run `ionic g --help` from the command line or see [the documentation](../cli/commands/generate.md) for `ionic generate`.
+For more details, run `ionic g --help` from the command line or see [the documentation](../cli/commands/generate.mdx) for `ionic generate`.
diff --git a/versioned_docs/version-v5/developing/starting.md b/versioned_docs/version-v5/developing/starting.mdx
similarity index 100%
rename from versioned_docs/version-v5/developing/starting.md
rename to versioned_docs/version-v5/developing/starting.mdx
diff --git a/versioned_docs/version-v5/developing/tips.md b/versioned_docs/version-v5/developing/tips.mdx
similarity index 98%
rename from versioned_docs/version-v5/developing/tips.md
rename to versioned_docs/version-v5/developing/tips.mdx
index 2a43aa9c1c1..71edfdbe810 100644
--- a/versioned_docs/version-v5/developing/tips.md
+++ b/versioned_docs/version-v5/developing/tips.mdx
@@ -122,7 +122,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-v5/index.md b/versioned_docs/version-v5/index.mdx
similarity index 92%
rename from versioned_docs/version-v5/index.md
rename to versioned_docs/version-v5/index.mdx
index 53e6f39a030..451291d3bd8 100644
--- a/versioned_docs/version-v5/index.md
+++ b/versioned_docs/version-v5/index.mdx
@@ -13,9 +13,9 @@ import DocsCards from '@components/global/DocsCards';
 
 # Ionic Framework
 
-Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.md), [React](react.md), and [Vue](vue/overview.md).
+Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.mdx), [React](react.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 />
 
@@ -49,11 +49,11 @@ Get started building by [installing Ionic](intro/cli.md) or following our [First
 
 ## Overview
 
-Ionic Framework 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.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 Framework before diving in, we <a href="https://youtu.be/p3AN3igqiRc" target="_blank">created a video</a> to walk you through the basics.
+Ionic Framework 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.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 Framework before diving in, we <a href="https://youtu.be/p3AN3igqiRc" target="_blank">created a video</a> 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
 
diff --git a/versioned_docs/version-v5/intro/cdn.md b/versioned_docs/version-v5/intro/cdn.mdx
similarity index 94%
rename from versioned_docs/version-v5/intro/cdn.md
rename to versioned_docs/version-v5/intro/cdn.mdx
index 577515b06b2..ef024c4d8bb 100644
--- a/versioned_docs/version-v5/intro/cdn.md
+++ b/versioned_docs/version-v5/intro/cdn.mdx
@@ -26,13 +26,13 @@ This does not install Angular or any other frameworks. This allows use of the Io
 
 ## Ionic + Angular
 
-When using Ionic Framework in an Angular project, install the latest `@ionic/angular` package from [npm](../reference/glossary.md#npm). This comes with all of the Ionic Framework components and Angular specific services and features.
+When using Ionic Framework in an Angular project, install the latest `@ionic/angular` package from [npm](../reference/glossary.mdx#npm). This comes with all of the Ionic Framework components and Angular specific services and features.
 
 ```shell
 npm install @ionic/angular@latest --save
 ```
 
-Each time there is a new Ionic Framework release, this [version](../reference/versioning.md) will need to be updated to get the latest features and fixes. The version can be [updated using npm](../developing/tips.md#updating-dependencies), as well.
+Each time there is a new Ionic Framework release, this [version](../reference/versioning.mdx) will need to be updated to get the latest features and fixes. The version can be [updated using npm](../developing/tips.mdx#updating-dependencies), as well.
 
 For adding Ionic to an already existing Angular project, use the Angular CLI's `ng add` feature.
 
diff --git a/versioned_docs/version-v5/intro/cli.md b/versioned_docs/version-v5/intro/cli.mdx
similarity index 76%
rename from versioned_docs/version-v5/intro/cli.md
rename to versioned_docs/version-v5/intro/cli.mdx
index 3457033b711..691251007fd 100644
--- a/versioned_docs/version-v5/intro/cli.md
+++ b/versioned_docs/version-v5/intro/cli.mdx
@@ -6,13 +6,13 @@ import AppWizard from '@components/page/intro/AppWizard';
 
 # Installing Ionic
 
-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. See [these instructions](environment.md) to set up an environment for Ionic.
+Before proceeding, make sure your computer has [Node.js](../reference/glossary.mdx#node) installed. See [these instructions](environment.mdx) to set up an environment for Ionic.
 
 Install the Ionic CLI with npm:
 
@@ -30,7 +30,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. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information.
 :::
 
 ## Start an App
@@ -43,7 +43,7 @@ ionic start myApp tabs
 
 ![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, see the [Starting Guide](../developing/starting.md).
+To learn more about starting Ionic apps, see the [Starting Guide](../developing/starting.mdx).
 
 ## Run the App
 
@@ -54,4 +54,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, see 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, see the [Running an App Guide](../developing/previewing.mdx).
diff --git a/versioned_docs/version-v5/intro/environment.md b/versioned_docs/version-v5/intro/environment.mdx
similarity index 85%
rename from versioned_docs/version-v5/intro/environment.md
rename to versioned_docs/version-v5/intro/environment.mdx
index ac423003d8d..9da996cfc61 100644
--- a/versioned_docs/version-v5/intro/environment.md
+++ b/versioned_docs/version-v5/intro/environment.mdx
@@ -19,9 +19,9 @@ Git Bash (from <a href="https://git-scm.com" target="_blank">git-scm.com</a>) do
 
 ## 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:
 
@@ -31,12 +31,12 @@ $ npm --version
 ```
 
 :::note
-Permission errors are common on macOS when installing global packages with `npm`. If you get an `EACCES` error, see [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, see [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-v5/intro/first-app.md b/versioned_docs/version-v5/intro/first-app.mdx
similarity index 100%
rename from versioned_docs/version-v5/intro/first-app.md
rename to versioned_docs/version-v5/intro/first-app.mdx
diff --git a/versioned_docs/version-v5/intro/next.md b/versioned_docs/version-v5/intro/next.mdx
similarity index 100%
rename from versioned_docs/version-v5/intro/next.md
rename to versioned_docs/version-v5/intro/next.mdx
diff --git a/versioned_docs/version-v5/layout/css-utilities.md b/versioned_docs/version-v5/layout/css-utilities.mdx
similarity index 98%
rename from versioned_docs/version-v5/layout/css-utilities.md
rename to versioned_docs/version-v5/layout/css-utilities.mdx
index e81b9503249..3e0c95dc9a0 100644
--- a/versioned_docs/version-v5/layout/css-utilities.md
+++ b/versioned_docs/version-v5/layout/css-utilities.mdx
@@ -7,7 +7,7 @@ title: CSS Utilities
 Ionic Framework provides a set of CSS utility classes that can be used on any element in order to modify the text, element placement or adjust the padding and margin.
 
 :::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.
 :::
 
 ## Text Modification
@@ -207,7 +207,7 @@ There are also additional classes to modify the visibility based on the screen s
 
 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. See 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. See the [CSS Variables](../theming/css-variables.mdx) section for more information on how to change these values.
 
 ```html
 <ion-grid>
@@ -257,7 +257,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. See 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. See 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-v5/layout/global-stylesheets.md b/versioned_docs/version-v5/layout/global-stylesheets.mdx
similarity index 79%
rename from versioned_docs/version-v5/layout/global-stylesheets.md
rename to versioned_docs/version-v5/layout/global-stylesheets.mdx
index f02df1116c4..7c327fbe4be 100644
--- a/versioned_docs/version-v5/layout/global-stylesheets.md
+++ b/versioned_docs/version-v5/layout/global-stylesheets.mdx
@@ -38,28 +38,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, see [CSS Utilities](css-utilities.md#content-space) for usage information.
+Adds utility classes to modify the padding or margin on any element, see [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, see [CSS Utilities](css-utilities.md#element-placement) for usage information.
+Adds utility classes to float an element based on the breakpoint and side, see [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, see [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, see [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, see [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, see [CSS Utilities](css-utilities.mdx#text-transformation) for usage information.
 
 #### flex-utils.css
 
-Adds utility classes to align flex containers and items, see [CSS Utilities](css-utilities.md#flex-properties) for usage information.
+Adds utility classes to align flex containers and items, see [CSS Utilities](css-utilities.mdx#flex-properties) for usage information.
 
 #### display.css
 
-Adds utility classes to hide any element based on the breakpoint, see [CSS Utilities](css-utilities.md#element-display) for usage information.
+Adds utility classes to hide any element based on the breakpoint, see [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-v5/layout/grid.md b/versioned_docs/version-v5/layout/grid.mdx
similarity index 96%
rename from versioned_docs/version-v5/layout/grid.md
rename to versioned_docs/version-v5/layout/grid.mdx
index 98cf32e90ee..b92360e6fd8 100644
--- a/versioned_docs/version-v5/layout/grid.md
+++ b/versioned_docs/version-v5/layout/grid.mdx
@@ -6,7 +6,7 @@ sidebar_label: Responsive Grid
 
 # Responsive Grid
 
-The grid is a powerful mobile-first flexbox system for building custom layouts. It is composed of three units — a [grid](../api/grid.md), [row(s)](../api/row.md) and [column(s)](../api/col.md). Columns will expand to fill their 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](../api/grid.mdx), [row(s)](../api/row.mdx) and [column(s)](../api/col.mdx). Columns will expand to fill their 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.
 
 ## How it works
 
@@ -35,7 +35,7 @@ The grid is a powerful mobile-first flexbox system for building custom layouts.
 - Columns without a value for size will automatically have equal widths. For example, four instances of `size-sm` will each automatically be 25% wide for the small breakpoint and up.
 - Column widths are set as a percentage, so they’re always fluid and sized relative to their parent element.
 - Columns have padding between individual columns, however, the padding can be removed from the grid and
-  columns by adding the `ion-no-padding` class to the grid. See the [CSS Utilities](css-utilities.md) for more styles that can be applied to the grid.
+  columns by adding the `ion-no-padding` class to the grid. See the [CSS Utilities](css-utilities.mdx) for more styles that can be applied to the grid.
 - There are five grid tiers, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.
 - Grid tiers are based on minimum widths, meaning they apply to their tier and all those larger than them
   (e.g., `size-sm="4"` applies to small, medium, large, and extra large devices).
@@ -71,7 +71,7 @@ The grid takes up the entire width of the screen by default. This can be modifie
 
 ## Default breakpoints
 
-The default breakpoints are defined in the table below. Breakpoints can not be customized at this time. For more information on why they can't be customized, see [Variables in Media Queries](../theming/advanced.md#variables-in-media-queries).
+The default breakpoints are defined in the table below. Breakpoints can not be customized at this time. For more information on why they can't be customized, see [Variables in Media Queries](../theming/advanced.mdx#variables-in-media-queries).
 
 | Name | Value  | Width Prefix | Offset Prefix | Push Prefix | Pull Prefix | Description                          |
 | ---- | ------ | ------------ | ------------- | ----------- | ----------- | ------------------------------------ |
@@ -322,7 +322,7 @@ You can view a live example of this in Angular [here](https://stackblitz.com/edi
 
 ### Vertical alignment
 
-All columns can be vertically aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](css-utilities.md#flex-container-properties).
+All columns can be vertically aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](css-utilities.mdx#flex-container-properties).
 
 ```html
 <ion-grid>
@@ -373,7 +373,7 @@ All columns can be vertically aligned inside of a row by adding different classe
 </ion-grid>
 ```
 
-Columns can also align themselves differently than other columns by adding the alignment class directly to the column. For a list of available classes, see [css utilities](css-utilities.md#flex-item-properties).
+Columns can also align themselves differently than other columns by adding the alignment class directly to the column. For a list of available classes, see [css utilities](css-utilities.mdx#flex-item-properties).
 
 ```html
 <ion-grid>
@@ -400,7 +400,7 @@ You can view a live example of this in Angular [here](https://stackblitz.com/edi
 
 ### 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, see [css utilities](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, see [css utilities](css-utilities.mdx#flex-container-properties).
 
 ```html
 <ion-grid>
diff --git a/versioned_docs/version-v5/layout/rtl.md b/versioned_docs/version-v5/layout/rtl.mdx
similarity index 100%
rename from versioned_docs/version-v5/layout/rtl.md
rename to versioned_docs/version-v5/layout/rtl.mdx
diff --git a/versioned_docs/version-v5/layout/structure.md b/versioned_docs/version-v5/layout/structure.mdx
similarity index 86%
rename from versioned_docs/version-v5/layout/structure.md
rename to versioned_docs/version-v5/layout/structure.mdx
index 798ddd137aa..5a64d5a5091 100644
--- a/versioned_docs/version-v5/layout/structure.md
+++ b/versioned_docs/version-v5/layout/structure.mdx
@@ -19,7 +19,7 @@ Ionic Framework provides several different layouts that can be used to structure
   </DocsCard>
 </aside>
 
-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.
 
 ```html
 <ion-app>
@@ -89,7 +89,7 @@ You can view a live example of this setup in Angular [here](https://stackblitz.c
 
 ## 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 an `ion-router-outlet` or `ion-nav`.
+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 an `ion-router-outlet` or `ion-nav`.
 
 ```html
 <ion-app>
@@ -121,7 +121,7 @@ You can view a live example of this setup in Angular [here](https://stackblitz.c
 
 ## 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.
 
 ```html
 <ion-app>
@@ -174,7 +174,7 @@ You can view a live example of this setup in Angular [here](https://stackblitz.c
 
 ## 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 `sm` screens and up, or when the viewport is larger than `576px`. By resizing the browser horizontally so that the app is smaller than this, the split pane view will disappear.
 
@@ -222,7 +222,7 @@ By default, the split pane view will show when the screen is larger than `768px`
 </ion-app>
 ```
 
-It's important to note that the element with the `id` matching the `content-id` specified by the split pane will be the main content that is always visible. This can be any element, including an [ion-nav](../api/nav.md), [ion-router-outlet](../api/router-outlet.md), or an [ion-tabs](../api/tabs.md).
+It's important to note that the element with the `id` matching the `content-id` specified by the split pane will be the main content that is always visible. This can be any element, including an [ion-nav](../api/nav.mdx), [ion-router-outlet](../api/router-outlet.mdx), or an [ion-tabs](../api/tabs.mdx).
 
 ### Live examples
 
diff --git a/versioned_docs/version-v5/native-community.md b/versioned_docs/version-v5/native-community.mdx
similarity index 97%
rename from versioned_docs/version-v5/native-community.md
rename to versioned_docs/version-v5/native-community.mdx
index cd8773d8bba..f3e6fcb1783 100644
--- a/versioned_docs/version-v5/native-community.md
+++ b/versioned_docs/version-v5/native-community.mdx
@@ -34,7 +34,7 @@ In addition to Cordova, Ionic Native also works with [Capacitor](https://capacit
 All plugins have two components - the native code (Cordova) and the TypeScript code (Ionic Native).
 Cordova plugins are also wrapped in a `Promise` or `Observable` in order to provide a common plugin interface and modernized development approach.
 
-Using the [Camera plugin](native/camera.md) as an example, first install it:
+Using the [Camera plugin](native/camera.mdx) as an example, first install it:
 
 ````mdx-code-block
 <Tabs
@@ -78,7 +78,7 @@ $ ionic cap sync
 </Tabs>
 ````
 
-Next, begin using the plugin, following the various framework usage options below. For FAQ, see [here](native-faq.md).
+Next, begin using the plugin, following the various framework usage options below. For FAQ, see [here](native-faq.mdx).
 
 ## Angular
 
diff --git a/versioned_docs/version-v5/native-faq.md b/versioned_docs/version-v5/native-faq.mdx
similarity index 96%
rename from versioned_docs/version-v5/native-faq.md
rename to versioned_docs/version-v5/native-faq.mdx
index 80cb5b1ae89..2c57b3ca399 100644
--- a/versioned_docs/version-v5/native-faq.md
+++ b/versioned_docs/version-v5/native-faq.mdx
@@ -7,7 +7,7 @@ slug: /native/faq
 
 ## Cordova Management Tips
 
-**1) Use the [Ionic CLI](cli.md) to add/update/delete plugins.**
+**1) Use the [Ionic CLI](cli.mdx) to add/update/delete plugins.**
 
 Instead of directly editing `config.xml` and `package.json`. Use `ionic` in front of Cordova commands for a better experience and additional functionality (`ionic cordova build ios` instead of `cordova build ios`).
 
@@ -32,8 +32,8 @@ Useful when adding new developers to a project. `ionic cordova prepare` restores
 
 **5) Troubleshoot Cordova issues with Ionic CLI commands**
 
-- `ionic doctor list`: Detects [common issues](cli/commands/doctor-list.md) and suggests steps to fix them
-- `ionic repair`: Remove, then [regenerate](cli/commands/repair.md) all dependencies
+- `ionic doctor list`: Detects [common issues](cli/commands/doctor-list.mdx) and suggests steps to fix them
+- `ionic repair`: Remove, then [regenerate](cli/commands/repair.mdx) all dependencies
 
 ## Understanding Version Numbers
 
diff --git a/versioned_docs/version-v5/native.md b/versioned_docs/version-v5/native.mdx
similarity index 100%
rename from versioned_docs/version-v5/native.md
rename to versioned_docs/version-v5/native.mdx
diff --git a/versioned_docs/version-v5/native/abbyy-rtr.md b/versioned_docs/version-v5/native/abbyy-rtr.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/abbyy-rtr.md
rename to versioned_docs/version-v5/native/abbyy-rtr.mdx
index 0aef215889b..59a485bade8 100644
--- a/versioned_docs/version-v5/native/abbyy-rtr.md
+++ b/versioned_docs/version-v5/native/abbyy-rtr.mdx
@@ -71,7 +71,7 @@ ABBYY Real-Time Recognition SDK (RTR SDK) in apps.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/action-sheet.md b/versioned_docs/version-v5/native/action-sheet.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/action-sheet.md
rename to versioned_docs/version-v5/native/action-sheet.mdx
index cbc5d6a85e5..cd89b007bce 100644
--- a/versioned_docs/version-v5/native/action-sheet.md
+++ b/versioned_docs/version-v5/native/action-sheet.mdx
@@ -75,7 +75,7 @@ Requires Cordova plugin: `cordova-plugin-actionsheet`. For more info, please see
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/adjust.md b/versioned_docs/version-v5/native/adjust.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/adjust.md
rename to versioned_docs/version-v5/native/adjust.mdx
index 34932afb300..14a0fa9749a 100644
--- a/versioned_docs/version-v5/native/adjust.md
+++ b/versioned_docs/version-v5/native/adjust.mdx
@@ -70,7 +70,7 @@ Requires Cordova plugin: `com.adjust.sdk`. For more info, please see the [Adjust
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/admob-plus.md b/versioned_docs/version-v5/native/admob-plus.mdx
similarity index 100%
rename from versioned_docs/version-v5/native/admob-plus.md
rename to versioned_docs/version-v5/native/admob-plus.mdx
diff --git a/versioned_docs/version-v5/native/admob.md b/versioned_docs/version-v5/native/admob.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/admob.md
rename to versioned_docs/version-v5/native/admob.mdx
index c3baec8fa0b..4419db3546d 100644
--- a/versioned_docs/version-v5/native/admob.md
+++ b/versioned_docs/version-v5/native/admob.mdx
@@ -77,7 +77,7 @@ Monetize your apps and games with AdMob ads, using latest Google AdMob SDK. With
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/aes-256.md b/versioned_docs/version-v5/native/aes-256.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/aes-256.md
rename to versioned_docs/version-v5/native/aes-256.mdx
index 74f2598bd00..64e058088e9 100644
--- a/versioned_docs/version-v5/native/aes-256.md
+++ b/versioned_docs/version-v5/native/aes-256.mdx
@@ -72,7 +72,7 @@ The encryption and decryption are performed on the device native layer so that t
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/all-in-one-sdk.md b/versioned_docs/version-v5/native/all-in-one-sdk.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/all-in-one-sdk.md
rename to versioned_docs/version-v5/native/all-in-one-sdk.mdx
index 4b84c03b674..b560aa06443 100644
--- a/versioned_docs/version-v5/native/all-in-one-sdk.md
+++ b/versioned_docs/version-v5/native/all-in-one-sdk.mdx
@@ -73,7 +73,7 @@ For more information about Paytm All-in-One SDK, please visit https://developer.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/analytics-firebase.md b/versioned_docs/version-v5/native/analytics-firebase.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/analytics-firebase.md
rename to versioned_docs/version-v5/native/analytics-firebase.mdx
index 843d78cceb1..cf15c5961ba 100644
--- a/versioned_docs/version-v5/native/analytics-firebase.md
+++ b/versioned_docs/version-v5/native/analytics-firebase.mdx
@@ -70,7 +70,7 @@ Google Analytics Firebase plugin for Ionic Native apps.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/android-exoplayer.md b/versioned_docs/version-v5/native/android-exoplayer.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/android-exoplayer.md
rename to versioned_docs/version-v5/native/android-exoplayer.mdx
index c41eda47fce..2f29203aaf8 100644
--- a/versioned_docs/version-v5/native/android-exoplayer.md
+++ b/versioned_docs/version-v5/native/android-exoplayer.mdx
@@ -71,7 +71,7 @@ https://github.com/google/ExoPlayer
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/android-full-screen.md b/versioned_docs/version-v5/native/android-full-screen.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/android-full-screen.md
rename to versioned_docs/version-v5/native/android-full-screen.mdx
index beeb4114bfc..7fde5b6bcce 100644
--- a/versioned_docs/version-v5/native/android-full-screen.md
+++ b/versioned_docs/version-v5/native/android-full-screen.mdx
@@ -71,7 +71,7 @@ In Android 4.4+, however, you can now enter true full screen, fully interactive
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/android-notch.md b/versioned_docs/version-v5/native/android-notch.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/android-notch.md
rename to versioned_docs/version-v5/native/android-notch.mdx
index c2b9d80df5d..58bbf1b3974 100644
--- a/versioned_docs/version-v5/native/android-notch.md
+++ b/versioned_docs/version-v5/native/android-notch.mdx
@@ -71,7 +71,7 @@ This plugin works on all android versions, but we can only detect notches starti
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/android-permissions.md b/versioned_docs/version-v5/native/android-permissions.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/android-permissions.md
rename to versioned_docs/version-v5/native/android-permissions.mdx
index cc6cd9a49d0..08722e94d76 100644
--- a/versioned_docs/version-v5/native/android-permissions.md
+++ b/versioned_docs/version-v5/native/android-permissions.mdx
@@ -73,7 +73,7 @@ You can find all permissions here: https://developer.android.com/reference/andro
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/anyline.md b/versioned_docs/version-v5/native/anyline.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/anyline.md
rename to versioned_docs/version-v5/native/anyline.mdx
index bc9ec166ba3..7e184054ab9 100644
--- a/versioned_docs/version-v5/native/anyline.md
+++ b/versioned_docs/version-v5/native/anyline.mdx
@@ -68,7 +68,7 @@ Anyline provides an easy-to-use SDK for applications to enable Optical Character
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/app-availability.md b/versioned_docs/version-v5/native/app-availability.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/app-availability.md
rename to versioned_docs/version-v5/native/app-availability.mdx
index cdd3e6cc5b6..01677bb152c 100644
--- a/versioned_docs/version-v5/native/app-availability.md
+++ b/versioned_docs/version-v5/native/app-availability.mdx
@@ -72,7 +72,7 @@ Requires Cordova plugin: cordova-plugin-appavailability. For more info, please s
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/app-center-analytics.md b/versioned_docs/version-v5/native/app-center-analytics.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/app-center-analytics.md
rename to versioned_docs/version-v5/native/app-center-analytics.mdx
index c5751de0cd7..fc552296b94 100644
--- a/versioned_docs/version-v5/native/app-center-analytics.md
+++ b/versioned_docs/version-v5/native/app-center-analytics.mdx
@@ -75,7 +75,7 @@ For more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/analyti
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/app-center-crashes.md b/versioned_docs/version-v5/native/app-center-crashes.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/app-center-crashes.md
rename to versioned_docs/version-v5/native/app-center-crashes.mdx
index 8aca0878212..371a85ae76d 100644
--- a/versioned_docs/version-v5/native/app-center-crashes.md
+++ b/versioned_docs/version-v5/native/app-center-crashes.mdx
@@ -75,7 +75,7 @@ For more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/crashes
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/app-center-push.md b/versioned_docs/version-v5/native/app-center-push.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/app-center-push.md
rename to versioned_docs/version-v5/native/app-center-push.mdx
index 6c13119c665..4c2810d55b5 100644
--- a/versioned_docs/version-v5/native/app-center-push.md
+++ b/versioned_docs/version-v5/native/app-center-push.mdx
@@ -70,7 +70,7 @@ For more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/push/co
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/app-preferences.md b/versioned_docs/version-v5/native/app-preferences.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/app-preferences.md
rename to versioned_docs/version-v5/native/app-preferences.mdx
index 2f9b36f18a9..bcee871da9c 100644
--- a/versioned_docs/version-v5/native/app-preferences.md
+++ b/versioned_docs/version-v5/native/app-preferences.mdx
@@ -75,7 +75,7 @@ This plugin allows you to read and write app preferences
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/app-rate.md b/versioned_docs/version-v5/native/app-rate.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/app-rate.md
rename to versioned_docs/version-v5/native/app-rate.mdx
index a48f696c168..51c388b1e4d 100644
--- a/versioned_docs/version-v5/native/app-rate.md
+++ b/versioned_docs/version-v5/native/app-rate.mdx
@@ -72,7 +72,7 @@ Requires Cordova plugin: cordova-plugin-apprate. For more info, please see the [
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/app-version.md b/versioned_docs/version-v5/native/app-version.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/app-version.md
rename to versioned_docs/version-v5/native/app-version.mdx
index 2a218f41f02..07cf49c379b 100644
--- a/versioned_docs/version-v5/native/app-version.md
+++ b/versioned_docs/version-v5/native/app-version.mdx
@@ -75,7 +75,7 @@ Requires Cordova plugin: `cordova-plugin-app-version`. For more info, please see
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/apple-wallet.md b/versioned_docs/version-v5/native/apple-wallet.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/apple-wallet.md
rename to versioned_docs/version-v5/native/apple-wallet.mdx
index eacca30f4e2..7ca3166b8e2 100644
--- a/versioned_docs/version-v5/native/apple-wallet.md
+++ b/versioned_docs/version-v5/native/apple-wallet.mdx
@@ -68,7 +68,7 @@ A Cordova plugin that enables users from Add Payment Cards to their Apple Wallet
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/appsflyer.md b/versioned_docs/version-v5/native/appsflyer.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/appsflyer.md
rename to versioned_docs/version-v5/native/appsflyer.mdx
index 5f72f054a88..1b6aa71b728 100644
--- a/versioned_docs/version-v5/native/appsflyer.md
+++ b/versioned_docs/version-v5/native/appsflyer.mdx
@@ -70,7 +70,7 @@ Appsflyer Cordova SDK support for Attribution
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/background-fetch.md b/versioned_docs/version-v5/native/background-fetch.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/background-fetch.md
rename to versioned_docs/version-v5/native/background-fetch.mdx
index 0003192291d..8eae8fd0a17 100644
--- a/versioned_docs/version-v5/native/background-fetch.md
+++ b/versioned_docs/version-v5/native/background-fetch.mdx
@@ -71,7 +71,7 @@ For more detail, please see https://github.com/transistorsoft/cordova-plugin-bac
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/background-geolocation.md b/versioned_docs/version-v5/native/background-geolocation.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/background-geolocation.md
rename to versioned_docs/version-v5/native/background-geolocation.mdx
index e2e68558b85..7790cf6ede2 100644
--- a/versioned_docs/version-v5/native/background-geolocation.md
+++ b/versioned_docs/version-v5/native/background-geolocation.mdx
@@ -73,7 +73,7 @@ more detail, please see https://github.com/mauron85/cordova-plugin-background-ge
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/background-mode.md b/versioned_docs/version-v5/native/background-mode.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/background-mode.md
rename to versioned_docs/version-v5/native/background-mode.mdx
index ad0458a0460..75924561ace 100644
--- a/versioned_docs/version-v5/native/background-mode.md
+++ b/versioned_docs/version-v5/native/background-mode.mdx
@@ -76,7 +76,7 @@ Requires Cordova plugin: cordova-plugin-background-mode. For more info about plu
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/background-upload.md b/versioned_docs/version-v5/native/background-upload.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/background-upload.md
rename to versioned_docs/version-v5/native/background-upload.mdx
index 396b8c62271..1fcbff578b0 100644
--- a/versioned_docs/version-v5/native/background-upload.md
+++ b/versioned_docs/version-v5/native/background-upload.mdx
@@ -70,7 +70,7 @@ This plugin does something
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/badge.md b/versioned_docs/version-v5/native/badge.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/badge.md
rename to versioned_docs/version-v5/native/badge.mdx
index d2cfc105b13..cde7479ccaa 100644
--- a/versioned_docs/version-v5/native/badge.md
+++ b/versioned_docs/version-v5/native/badge.mdx
@@ -74,7 +74,7 @@ Android Note: Badges have historically only been a feature implemented by third
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/barcode-scanner.md b/versioned_docs/version-v5/native/barcode-scanner.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/barcode-scanner.md
rename to versioned_docs/version-v5/native/barcode-scanner.mdx
index fcd96c75e32..c13f0966a58 100644
--- a/versioned_docs/version-v5/native/barcode-scanner.md
+++ b/versioned_docs/version-v5/native/barcode-scanner.mdx
@@ -77,7 +77,7 @@ Requires Cordova plugin: `phonegap-plugin-barcodescanner`. For more info, please
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/battery-status.md b/versioned_docs/version-v5/native/battery-status.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/battery-status.md
rename to versioned_docs/version-v5/native/battery-status.mdx
index a141bf03f84..a843d6f2b19 100644
--- a/versioned_docs/version-v5/native/battery-status.md
+++ b/versioned_docs/version-v5/native/battery-status.mdx
@@ -72,7 +72,7 @@ Requires Cordova plugin: cordova-plugin-batterystatus. For more info, please see
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/biocatch.md b/versioned_docs/version-v5/native/biocatch.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/biocatch.md
rename to versioned_docs/version-v5/native/biocatch.mdx
index 98813df1bf8..bebcdbc59f2 100644
--- a/versioned_docs/version-v5/native/biocatch.md
+++ b/versioned_docs/version-v5/native/biocatch.mdx
@@ -68,7 +68,7 @@ BioCatch SDK Cordova support
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/biometric-wrapper.md b/versioned_docs/version-v5/native/biometric-wrapper.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/biometric-wrapper.md
rename to versioned_docs/version-v5/native/biometric-wrapper.mdx
index d8561965fd1..6f2bc2a06dd 100644
--- a/versioned_docs/version-v5/native/biometric-wrapper.md
+++ b/versioned_docs/version-v5/native/biometric-wrapper.mdx
@@ -66,7 +66,7 @@ May be used in Banking domain
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/ble.md b/versioned_docs/version-v5/native/ble.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/ble.md
rename to versioned_docs/version-v5/native/ble.mdx
index 91dba27963f..bd142788714 100644
--- a/versioned_docs/version-v5/native/ble.md
+++ b/versioned_docs/version-v5/native/ble.mdx
@@ -80,7 +80,7 @@ Simultaneous connections to multiple peripherals are supported.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/blinkid.md b/versioned_docs/version-v5/native/blinkid.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/blinkid.md
rename to versioned_docs/version-v5/native/blinkid.mdx
index 7435676b923..7aaacb50be3 100644
--- a/versioned_docs/version-v5/native/blinkid.md
+++ b/versioned_docs/version-v5/native/blinkid.mdx
@@ -69,7 +69,7 @@ blinkid-phonegap repository for available recognizers and other settings
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/bluetooth-le.md b/versioned_docs/version-v5/native/bluetooth-le.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/bluetooth-le.md
rename to versioned_docs/version-v5/native/bluetooth-le.mdx
index d5571ea55b3..ca7990414d7 100644
--- a/versioned_docs/version-v5/native/bluetooth-le.md
+++ b/versioned_docs/version-v5/native/bluetooth-le.mdx
@@ -72,7 +72,7 @@ It supports peripheral **and** central modes and covers most of the API methods
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/bluetooth-serial.md b/versioned_docs/version-v5/native/bluetooth-serial.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/bluetooth-serial.md
rename to versioned_docs/version-v5/native/bluetooth-serial.mdx
index 67dec208e3c..87633f65596 100644
--- a/versioned_docs/version-v5/native/bluetooth-serial.md
+++ b/versioned_docs/version-v5/native/bluetooth-serial.mdx
@@ -71,7 +71,7 @@ This plugin enables serial communication over Bluetooth. It was written for comm
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/branch-io.md b/versioned_docs/version-v5/native/branch-io.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/branch-io.md
rename to versioned_docs/version-v5/native/branch-io.mdx
index 4581e78ac9a..f81686efbb3 100644
--- a/versioned_docs/version-v5/native/branch-io.md
+++ b/versioned_docs/version-v5/native/branch-io.mdx
@@ -68,7 +68,7 @@ Branch.io is an attribution service for deeplinking and invitation links
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/broadcaster.md b/versioned_docs/version-v5/native/broadcaster.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/broadcaster.md
rename to versioned_docs/version-v5/native/broadcaster.mdx
index a689afcf90c..a71a0885e2b 100644
--- a/versioned_docs/version-v5/native/broadcaster.md
+++ b/versioned_docs/version-v5/native/broadcaster.mdx
@@ -71,7 +71,7 @@ This plugin adds exchanging events between native code and your app.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/build-info.md b/versioned_docs/version-v5/native/build-info.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/build-info.md
rename to versioned_docs/version-v5/native/build-info.mdx
index fcefd3eadc4..9648072bbba 100644
--- a/versioned_docs/version-v5/native/build-info.md
+++ b/versioned_docs/version-v5/native/build-info.mdx
@@ -73,7 +73,7 @@ This plugin provides build information.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/calendar.md b/versioned_docs/version-v5/native/calendar.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/calendar.md
rename to versioned_docs/version-v5/native/calendar.mdx
index edf994e1843..1620a2edb72 100644
--- a/versioned_docs/version-v5/native/calendar.md
+++ b/versioned_docs/version-v5/native/calendar.mdx
@@ -72,7 +72,7 @@ Requires Cordova plugin: `cordova-plugin-calendar`. For more info, please see th
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/call-directory.md b/versioned_docs/version-v5/native/call-directory.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/call-directory.md
rename to versioned_docs/version-v5/native/call-directory.mdx
index 6117296e998..935311444ae 100644
--- a/versioned_docs/version-v5/native/call-directory.md
+++ b/versioned_docs/version-v5/native/call-directory.mdx
@@ -70,7 +70,7 @@ to process the changes in the call directory extension.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/call-number.md b/versioned_docs/version-v5/native/call-number.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/call-number.md
rename to versioned_docs/version-v5/native/call-number.mdx
index d3df8b38a33..036b059d5a1 100644
--- a/versioned_docs/version-v5/native/call-number.md
+++ b/versioned_docs/version-v5/native/call-number.mdx
@@ -69,7 +69,7 @@ Call a number directly from your Cordova/Ionic application.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/camera-preview.md b/versioned_docs/version-v5/native/camera-preview.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/camera-preview.md
rename to versioned_docs/version-v5/native/camera-preview.mdx
index 2816a745374..98095d89924 100644
--- a/versioned_docs/version-v5/native/camera-preview.md
+++ b/versioned_docs/version-v5/native/camera-preview.mdx
@@ -72,7 +72,7 @@ Requires Cordova plugin: `https://github.com/cordova-plugin-camera-preview/cordo
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/camera.md b/versioned_docs/version-v5/native/camera.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/camera.md
rename to versioned_docs/version-v5/native/camera.mdx
index 1e4b5c102fa..40b754ca428 100644
--- a/versioned_docs/version-v5/native/camera.md
+++ b/versioned_docs/version-v5/native/camera.mdx
@@ -84,7 +84,7 @@ inside of the `<platform name='ios'>` section
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/chooser.md b/versioned_docs/version-v5/native/chooser.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/chooser.md
rename to versioned_docs/version-v5/native/chooser.mdx
index a6b776648cc..3b1303624b9 100644
--- a/versioned_docs/version-v5/native/chooser.md
+++ b/versioned_docs/version-v5/native/chooser.mdx
@@ -81,7 +81,7 @@ The following must be added to config.xml to prevent crashing when selecting lar
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/clevertap.md b/versioned_docs/version-v5/native/clevertap.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/clevertap.md
rename to versioned_docs/version-v5/native/clevertap.mdx
index 5f68362ae66..691a57b6314 100644
--- a/versioned_docs/version-v5/native/clevertap.md
+++ b/versioned_docs/version-v5/native/clevertap.mdx
@@ -68,7 +68,7 @@ Cordova Plugin that wraps CleverTap SDK for Android and iOS
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/clipboard.md b/versioned_docs/version-v5/native/clipboard.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/clipboard.md
rename to versioned_docs/version-v5/native/clipboard.mdx
index ab7aac84453..25c61bd89bb 100644
--- a/versioned_docs/version-v5/native/clipboard.md
+++ b/versioned_docs/version-v5/native/clipboard.mdx
@@ -69,7 +69,7 @@ Clipboard management plugin for Cordova that supports iOS, Android, and Windows
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/cloud-settings.md b/versioned_docs/version-v5/native/cloud-settings.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/cloud-settings.md
rename to versioned_docs/version-v5/native/cloud-settings.mdx
index e95186273c4..f1bfcfb22dd 100644
--- a/versioned_docs/version-v5/native/cloud-settings.md
+++ b/versioned_docs/version-v5/native/cloud-settings.mdx
@@ -70,7 +70,7 @@ Stores app settings in cloud storage so if the user re-installs the app or insta
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/code-push.md b/versioned_docs/version-v5/native/code-push.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/code-push.md
rename to versioned_docs/version-v5/native/code-push.mdx
index 328f2e736f8..ee5b1ec807b 100644
--- a/versioned_docs/version-v5/native/code-push.md
+++ b/versioned_docs/version-v5/native/code-push.mdx
@@ -71,7 +71,7 @@ For more info, please see https://github.com/Dellos7/example-cordova-code-push-p
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/custom-uisdk.md b/versioned_docs/version-v5/native/custom-uisdk.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/custom-uisdk.md
rename to versioned_docs/version-v5/native/custom-uisdk.mdx
index 2c9b8e6ca1c..52e5000eba3 100644
--- a/versioned_docs/version-v5/native/custom-uisdk.md
+++ b/versioned_docs/version-v5/native/custom-uisdk.mdx
@@ -69,7 +69,7 @@ This plugin is used to access Paytm's native CustomUISDK framework's apis.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/deeplinks.md b/versioned_docs/version-v5/native/deeplinks.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/deeplinks.md
rename to versioned_docs/version-v5/native/deeplinks.mdx
index ab3d65732eb..2905874a2c8 100644
--- a/versioned_docs/version-v5/native/deeplinks.md
+++ b/versioned_docs/version-v5/native/deeplinks.mdx
@@ -73,7 +73,7 @@ You must add `universal-links` to your `config.xml` and set up Apple App Site As
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/device-accounts.md b/versioned_docs/version-v5/native/device-accounts.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/device-accounts.md
rename to versioned_docs/version-v5/native/device-accounts.mdx
index 68a35118d15..6037eebb3f0 100644
--- a/versioned_docs/version-v5/native/device-accounts.md
+++ b/versioned_docs/version-v5/native/device-accounts.mdx
@@ -69,7 +69,7 @@ Gets the Google accounts associated with the Android device
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/device-motion.md b/versioned_docs/version-v5/native/device-motion.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/device-motion.md
rename to versioned_docs/version-v5/native/device-motion.mdx
index ae1f7ef5056..53ccc074355 100644
--- a/versioned_docs/version-v5/native/device-motion.md
+++ b/versioned_docs/version-v5/native/device-motion.mdx
@@ -77,7 +77,7 @@ Requires Cordova plugin: `cordova-plugin-device-motion`. For more info, please s
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/device-orientation.md b/versioned_docs/version-v5/native/device-orientation.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/device-orientation.md
rename to versioned_docs/version-v5/native/device-orientation.mdx
index 434a5d57d3a..0dea15b58bf 100644
--- a/versioned_docs/version-v5/native/device-orientation.md
+++ b/versioned_docs/version-v5/native/device-orientation.mdx
@@ -78,7 +78,7 @@ Requires Cordova plugin: `cordova-plugin-device-orientation`. For more info, ple
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/device.md b/versioned_docs/version-v5/native/device.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/device.md
rename to versioned_docs/version-v5/native/device.mdx
index 48c802df1df..994b754b91b 100644
--- a/versioned_docs/version-v5/native/device.md
+++ b/versioned_docs/version-v5/native/device.mdx
@@ -71,7 +71,7 @@ Access information about the underlying device and platform.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/dfu-update.md b/versioned_docs/version-v5/native/dfu-update.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/dfu-update.md
rename to versioned_docs/version-v5/native/dfu-update.mdx
index 03eea864fc5..0727df446e6 100644
--- a/versioned_docs/version-v5/native/dfu-update.md
+++ b/versioned_docs/version-v5/native/dfu-update.mdx
@@ -70,7 +70,7 @@ This plugin is a Wrapper to use Nordic Semiconductor's Device Firmware Update (D
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/diagnostic.md b/versioned_docs/version-v5/native/diagnostic.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/diagnostic.md
rename to versioned_docs/version-v5/native/diagnostic.mdx
index f7fd5051e26..b392821b7c0 100644
--- a/versioned_docs/version-v5/native/diagnostic.md
+++ b/versioned_docs/version-v5/native/diagnostic.mdx
@@ -71,7 +71,7 @@ Checks whether device hardware features are enabled or available to the app, e.g
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/dialogs.md b/versioned_docs/version-v5/native/dialogs.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/dialogs.md
rename to versioned_docs/version-v5/native/dialogs.mdx
index c77a0788459..f4d86acb43d 100644
--- a/versioned_docs/version-v5/native/dialogs.md
+++ b/versioned_docs/version-v5/native/dialogs.mdx
@@ -73,7 +73,7 @@ Requires Cordova plugin: `cordova-plugin-dialogs`. For more info, please see the
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/dns.md b/versioned_docs/version-v5/native/dns.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/dns.md
rename to versioned_docs/version-v5/native/dns.mdx
index be6f522bc16..3624c12f4a7 100644
--- a/versioned_docs/version-v5/native/dns.md
+++ b/versioned_docs/version-v5/native/dns.mdx
@@ -67,7 +67,7 @@ A plugin for Apache Cordova that enables applications to manually resolve hostna
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/document-picker.md b/versioned_docs/version-v5/native/document-picker.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/document-picker.md
rename to versioned_docs/version-v5/native/document-picker.mdx
index 780439ae892..8c36556bcdc 100644
--- a/versioned_docs/version-v5/native/document-picker.md
+++ b/versioned_docs/version-v5/native/document-picker.mdx
@@ -70,7 +70,7 @@ Allows the user to upload files from iCloud
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/document-scanner.md b/versioned_docs/version-v5/native/document-scanner.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/document-scanner.md
rename to versioned_docs/version-v5/native/document-scanner.mdx
index 5c28400b5e7..f13be88cd62 100644
--- a/versioned_docs/version-v5/native/document-scanner.md
+++ b/versioned_docs/version-v5/native/document-scanner.mdx
@@ -70,7 +70,7 @@ This plugin processes images of documents, compensating for perspective.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/document-viewer.md b/versioned_docs/version-v5/native/document-viewer.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/document-viewer.md
rename to versioned_docs/version-v5/native/document-viewer.mdx
index b6aa17fdf9f..71e36dcf6bf 100644
--- a/versioned_docs/version-v5/native/document-viewer.md
+++ b/versioned_docs/version-v5/native/document-viewer.mdx
@@ -73,7 +73,7 @@ This plugin offers a slim API to view PDF files which are either stored in the a
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/email-composer.md b/versioned_docs/version-v5/native/email-composer.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/email-composer.md
rename to versioned_docs/version-v5/native/email-composer.mdx
index 4f5f57ab7c3..66ab12a7a71 100644
--- a/versioned_docs/version-v5/native/email-composer.md
+++ b/versioned_docs/version-v5/native/email-composer.mdx
@@ -74,7 +74,7 @@ Requires Cordova plugin: cordova-plugin-email-composer. For more info, please se
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/fabric.md b/versioned_docs/version-v5/native/fabric.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/fabric.md
rename to versioned_docs/version-v5/native/fabric.mdx
index 5139a67c59a..3f94ce8857b 100644
--- a/versioned_docs/version-v5/native/fabric.md
+++ b/versioned_docs/version-v5/native/fabric.mdx
@@ -70,7 +70,7 @@ https://docs.fabric.io/crashlytics/index.html
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/facebook.md b/versioned_docs/version-v5/native/facebook.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/facebook.md
rename to versioned_docs/version-v5/native/facebook.mdx
index f2f3912ede3..4d6c10faf7d 100644
--- a/versioned_docs/version-v5/native/facebook.md
+++ b/versioned_docs/version-v5/native/facebook.mdx
@@ -137,7 +137,7 @@ For tracking events, see `logEvent` and `logPurchase`.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/fcm.md b/versioned_docs/version-v5/native/fcm.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/fcm.md
rename to versioned_docs/version-v5/native/fcm.mdx
index 674b683323c..7d2e20290b4 100644
--- a/versioned_docs/version-v5/native/fcm.md
+++ b/versioned_docs/version-v5/native/fcm.mdx
@@ -76,7 +76,7 @@ Not Compatible
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/file-opener.md b/versioned_docs/version-v5/native/file-opener.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/file-opener.md
rename to versioned_docs/version-v5/native/file-opener.mdx
index 25d95e1d7cd..c2b5e1b8063 100644
--- a/versioned_docs/version-v5/native/file-opener.md
+++ b/versioned_docs/version-v5/native/file-opener.mdx
@@ -72,7 +72,7 @@ This plugin will open a file on your device file system with its default applica
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/file-path.md b/versioned_docs/version-v5/native/file-path.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/file-path.md
rename to versioned_docs/version-v5/native/file-path.mdx
index 90000d4958a..9081ec9d891 100644
--- a/versioned_docs/version-v5/native/file-path.md
+++ b/versioned_docs/version-v5/native/file-path.mdx
@@ -68,7 +68,7 @@ This plugin allows you to resolve the native filesystem path for Android content
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/file-transfer.md b/versioned_docs/version-v5/native/file-transfer.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/file-transfer.md
rename to versioned_docs/version-v5/native/file-transfer.mdx
index a812c2ecacd..9c6dd08a64d 100644
--- a/versioned_docs/version-v5/native/file-transfer.md
+++ b/versioned_docs/version-v5/native/file-transfer.mdx
@@ -78,7 +78,7 @@ This plugin allows you to upload and download files.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/file.md b/versioned_docs/version-v5/native/file.mdx
similarity index 100%
rename from versioned_docs/version-v5/native/file.md
rename to versioned_docs/version-v5/native/file.mdx
diff --git a/versioned_docs/version-v5/native/firebase-analytics.md b/versioned_docs/version-v5/native/firebase-analytics.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/firebase-analytics.md
rename to versioned_docs/version-v5/native/firebase-analytics.mdx
index 4e5b004704a..7e95e9075d9 100644
--- a/versioned_docs/version-v5/native/firebase-analytics.md
+++ b/versioned_docs/version-v5/native/firebase-analytics.mdx
@@ -92,7 +92,7 @@ And in the same file, you'll have to add `xmlns:tools="http://schemas.android.co
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/firebase-authentication.md b/versioned_docs/version-v5/native/firebase-authentication.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/firebase-authentication.md
rename to versioned_docs/version-v5/native/firebase-authentication.mdx
index 48c12194ea6..2c9036b9189 100644
--- a/versioned_docs/version-v5/native/firebase-authentication.md
+++ b/versioned_docs/version-v5/native/firebase-authentication.mdx
@@ -70,7 +70,7 @@ Cordova plugin for Firebase Authentication
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/firebase-config.md b/versioned_docs/version-v5/native/firebase-config.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/firebase-config.md
rename to versioned_docs/version-v5/native/firebase-config.mdx
index cc0f39b3488..06436401d84 100644
--- a/versioned_docs/version-v5/native/firebase-config.md
+++ b/versioned_docs/version-v5/native/firebase-config.mdx
@@ -70,7 +70,7 @@ Cordova plugin for Firebase Config
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/firebase-crash.md b/versioned_docs/version-v5/native/firebase-crash.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/firebase-crash.md
rename to versioned_docs/version-v5/native/firebase-crash.mdx
index 2caff796238..3fee68ec116 100644
--- a/versioned_docs/version-v5/native/firebase-crash.md
+++ b/versioned_docs/version-v5/native/firebase-crash.mdx
@@ -70,7 +70,7 @@ This plugin brings crash reporting from Google Firebase to your Cordova project!
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/firebase-crashlytics.md b/versioned_docs/version-v5/native/firebase-crashlytics.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/firebase-crashlytics.md
rename to versioned_docs/version-v5/native/firebase-crashlytics.mdx
index 2e540c7ffdd..752c887cff4 100644
--- a/versioned_docs/version-v5/native/firebase-crashlytics.md
+++ b/versioned_docs/version-v5/native/firebase-crashlytics.mdx
@@ -70,7 +70,7 @@ A Google Firebase Crashlytics plugin to enable capture of crash reports.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/firebase-dynamic-links.md b/versioned_docs/version-v5/native/firebase-dynamic-links.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/firebase-dynamic-links.md
rename to versioned_docs/version-v5/native/firebase-dynamic-links.mdx
index f7bbfb94be1..6cf00bd9d8c 100644
--- a/versioned_docs/version-v5/native/firebase-dynamic-links.md
+++ b/versioned_docs/version-v5/native/firebase-dynamic-links.mdx
@@ -89,7 +89,7 @@ config.xml:
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/firebase-messaging.md b/versioned_docs/version-v5/native/firebase-messaging.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/firebase-messaging.md
rename to versioned_docs/version-v5/native/firebase-messaging.mdx
index 0907b93e266..ecbaa6af9d7 100644
--- a/versioned_docs/version-v5/native/firebase-messaging.md
+++ b/versioned_docs/version-v5/native/firebase-messaging.mdx
@@ -70,7 +70,7 @@ Cordova plugin for Firebase Messaging
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/firebase-vision.md b/versioned_docs/version-v5/native/firebase-vision.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/firebase-vision.md
rename to versioned_docs/version-v5/native/firebase-vision.mdx
index 93a8c6feb7d..f999557cffc 100644
--- a/versioned_docs/version-v5/native/firebase-vision.md
+++ b/versioned_docs/version-v5/native/firebase-vision.mdx
@@ -70,7 +70,7 @@ Cordova plugin for Firebase MLKit Vision
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/firebase-x.md b/versioned_docs/version-v5/native/firebase-x.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/firebase-x.md
rename to versioned_docs/version-v5/native/firebase-x.mdx
index d1baade7124..74f840597cc 100644
--- a/versioned_docs/version-v5/native/firebase-x.md
+++ b/versioned_docs/version-v5/native/firebase-x.mdx
@@ -70,7 +70,7 @@ It is a maintained fork from unmaintained ionic-navite plugin called Firebase.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/firebase.md b/versioned_docs/version-v5/native/firebase.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/firebase.md
rename to versioned_docs/version-v5/native/firebase.mdx
index f7d05991790..29c606171e8 100644
--- a/versioned_docs/version-v5/native/firebase.md
+++ b/versioned_docs/version-v5/native/firebase.mdx
@@ -72,7 +72,7 @@ Not Compatible
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/flashlight.md b/versioned_docs/version-v5/native/flashlight.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/flashlight.md
rename to versioned_docs/version-v5/native/flashlight.mdx
index cc3367c06bb..ad140c01a02 100644
--- a/versioned_docs/version-v5/native/flashlight.md
+++ b/versioned_docs/version-v5/native/flashlight.mdx
@@ -73,7 +73,7 @@ Requires Cordova plugin: `cordova-plugin-flashlight`. For more info, please see
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/foreground-service.md b/versioned_docs/version-v5/native/foreground-service.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/foreground-service.md
rename to versioned_docs/version-v5/native/foreground-service.mdx
index 54f6a1ae291..0a3f31b607a 100644
--- a/versioned_docs/version-v5/native/foreground-service.md
+++ b/versioned_docs/version-v5/native/foreground-service.mdx
@@ -82,7 +82,7 @@ For android API 28+, the following xml snippet should be inserted into `config.x
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/ftp.md b/versioned_docs/version-v5/native/ftp.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/ftp.md
rename to versioned_docs/version-v5/native/ftp.mdx
index 51377876d88..2cf46b2829f 100644
--- a/versioned_docs/version-v5/native/ftp.md
+++ b/versioned_docs/version-v5/native/ftp.mdx
@@ -68,7 +68,7 @@ This cordova plugin is created to use ftp (client) in web/js.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/gao-de-location.md b/versioned_docs/version-v5/native/gao-de-location.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/gao-de-location.md
rename to versioned_docs/version-v5/native/gao-de-location.mdx
index b217c601758..b1c9b38fe03 100644
--- a/versioned_docs/version-v5/native/gao-de-location.md
+++ b/versioned_docs/version-v5/native/gao-de-location.mdx
@@ -71,7 +71,7 @@ Gaode location can directly return address informationGaode location can directl
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/ge-tui-sdk-plugin.md b/versioned_docs/version-v5/native/ge-tui-sdk-plugin.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/ge-tui-sdk-plugin.md
rename to versioned_docs/version-v5/native/ge-tui-sdk-plugin.mdx
index 96fe3452207..d0cf8612caf 100644
--- a/versioned_docs/version-v5/native/ge-tui-sdk-plugin.md
+++ b/versioned_docs/version-v5/native/ge-tui-sdk-plugin.mdx
@@ -70,7 +70,7 @@ This plugin does something
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/geolocation.md b/versioned_docs/version-v5/native/geolocation.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/geolocation.md
rename to versioned_docs/version-v5/native/geolocation.mdx
index 808bbaf6d12..7092bf17c65 100644
--- a/versioned_docs/version-v5/native/geolocation.md
+++ b/versioned_docs/version-v5/native/geolocation.mdx
@@ -85,7 +85,7 @@ For iOS you have to add this configuration to your configuration.xml file
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/globalization.md b/versioned_docs/version-v5/native/globalization.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/globalization.md
rename to versioned_docs/version-v5/native/globalization.mdx
index 0cd8a837d69..c605d920bef 100644
--- a/versioned_docs/version-v5/native/globalization.md
+++ b/versioned_docs/version-v5/native/globalization.mdx
@@ -73,7 +73,7 @@ This plugin obtains information and performs operations specific to the user's l
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/google-analytics.md b/versioned_docs/version-v5/native/google-analytics.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/google-analytics.md
rename to versioned_docs/version-v5/native/google-analytics.mdx
index 066b8a48c26..fc660aa14be 100644
--- a/versioned_docs/version-v5/native/google-analytics.md
+++ b/versioned_docs/version-v5/native/google-analytics.mdx
@@ -77,7 +77,7 @@ Prerequisites:
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/google-nearby.md b/versioned_docs/version-v5/native/google-nearby.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/google-nearby.md
rename to versioned_docs/version-v5/native/google-nearby.mdx
index 51874c65750..baf89f0a142 100644
--- a/versioned_docs/version-v5/native/google-nearby.md
+++ b/versioned_docs/version-v5/native/google-nearby.mdx
@@ -69,7 +69,7 @@ This plugin adds support for the Google Nearby Messages API.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/google-plus.md b/versioned_docs/version-v5/native/google-plus.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/google-plus.md
rename to versioned_docs/version-v5/native/google-plus.mdx
index 6901168a648..e1388571cfe 100644
--- a/versioned_docs/version-v5/native/google-plus.md
+++ b/versioned_docs/version-v5/native/google-plus.mdx
@@ -68,7 +68,7 @@ import CodeBlock from '@theme/CodeBlock';
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/health-kit.md b/versioned_docs/version-v5/native/health-kit.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/health-kit.md
rename to versioned_docs/version-v5/native/health-kit.mdx
index a09078dd782..d6ac154ae7f 100644
--- a/versioned_docs/version-v5/native/health-kit.md
+++ b/versioned_docs/version-v5/native/health-kit.mdx
@@ -70,7 +70,7 @@ Any data saved shows up in the iOS Health app and is available for other iOS app
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/health.md b/versioned_docs/version-v5/native/health.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/health.md
rename to versioned_docs/version-v5/native/health.mdx
index 9ec2f16902a..a5b278fe3d0 100644
--- a/versioned_docs/version-v5/native/health.md
+++ b/versioned_docs/version-v5/native/health.mdx
@@ -68,7 +68,7 @@ A plugin that abstracts fitness and health repositories like Apple HealthKit or
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/http.md b/versioned_docs/version-v5/native/http.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/http.md
rename to versioned_docs/version-v5/native/http.mdx
index 8265b75fd52..c229610745b 100644
--- a/versioned_docs/version-v5/native/http.md
+++ b/versioned_docs/version-v5/native/http.mdx
@@ -75,7 +75,7 @@ Advantages over Javascript requests:
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/iamport-cordova.md b/versioned_docs/version-v5/native/iamport-cordova.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/iamport-cordova.md
rename to versioned_docs/version-v5/native/iamport-cordova.mdx
index b2ab5d4ed26..81d252fb52f 100644
--- a/versioned_docs/version-v5/native/iamport-cordova.md
+++ b/versioned_docs/version-v5/native/iamport-cordova.mdx
@@ -68,7 +68,7 @@ This plugin does something
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/ibeacon.md b/versioned_docs/version-v5/native/ibeacon.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/ibeacon.md
rename to versioned_docs/version-v5/native/ibeacon.mdx
index 09d40e65c62..8b45c93fd55 100644
--- a/versioned_docs/version-v5/native/ibeacon.md
+++ b/versioned_docs/version-v5/native/ibeacon.mdx
@@ -70,7 +70,7 @@ The plugin's API closely mimics the one exposed through the [CLLocationManager](
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/image-picker.md b/versioned_docs/version-v5/native/image-picker.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/image-picker.md
rename to versioned_docs/version-v5/native/image-picker.mdx
index 2b42c1f2f20..2c113374535 100644
--- a/versioned_docs/version-v5/native/image-picker.md
+++ b/versioned_docs/version-v5/native/image-picker.mdx
@@ -73,7 +73,7 @@ For more info, please see the https://github.com/Telerik-Verified-Plugins/ImageP
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/imap.md b/versioned_docs/version-v5/native/imap.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/imap.md
rename to versioned_docs/version-v5/native/imap.mdx
index 33fc049191e..1d60208f48f 100644
--- a/versioned_docs/version-v5/native/imap.md
+++ b/versioned_docs/version-v5/native/imap.mdx
@@ -70,7 +70,7 @@ Planned improvements and support for iOS.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/in-app-browser.md b/versioned_docs/version-v5/native/in-app-browser.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/in-app-browser.md
rename to versioned_docs/version-v5/native/in-app-browser.mdx
index c089d7c8b87..163cba48ed1 100644
--- a/versioned_docs/version-v5/native/in-app-browser.md
+++ b/versioned_docs/version-v5/native/in-app-browser.mdx
@@ -74,7 +74,7 @@ Launches in app Browser
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/in-app-purchase-2.md b/versioned_docs/version-v5/native/in-app-purchase-2.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/in-app-purchase-2.md
rename to versioned_docs/version-v5/native/in-app-purchase-2.mdx
index ea0be992e16..e404cf657fe 100644
--- a/versioned_docs/version-v5/native/in-app-purchase-2.md
+++ b/versioned_docs/version-v5/native/in-app-purchase-2.mdx
@@ -94,7 +94,7 @@ Supports:
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/in-app-review.md b/versioned_docs/version-v5/native/in-app-review.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/in-app-review.md
rename to versioned_docs/version-v5/native/in-app-review.mdx
index 14d1827e8ff..0a36bde8f94 100644
--- a/versioned_docs/version-v5/native/in-app-review.md
+++ b/versioned_docs/version-v5/native/in-app-review.mdx
@@ -71,7 +71,7 @@ This functionality only works on iOS devices
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/insomnia.md b/versioned_docs/version-v5/native/insomnia.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/insomnia.md
rename to versioned_docs/version-v5/native/insomnia.mdx
index d8fd256bcf4..03a27ff3e10 100644
--- a/versioned_docs/version-v5/native/insomnia.md
+++ b/versioned_docs/version-v5/native/insomnia.mdx
@@ -72,7 +72,7 @@ Prevent the screen of the mobile device from falling asleep.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/instagram.md b/versioned_docs/version-v5/native/instagram.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/instagram.md
rename to versioned_docs/version-v5/native/instagram.mdx
index 033e079aba6..6878d49f033 100644
--- a/versioned_docs/version-v5/native/instagram.md
+++ b/versioned_docs/version-v5/native/instagram.mdx
@@ -69,7 +69,7 @@ Share a photo with the instagram app
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/intercom.md b/versioned_docs/version-v5/native/intercom.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/intercom.md
rename to versioned_docs/version-v5/native/intercom.mdx
index bb9949627c3..1e961c1ad47 100644
--- a/versioned_docs/version-v5/native/intercom.md
+++ b/versioned_docs/version-v5/native/intercom.mdx
@@ -69,7 +69,7 @@ Follow the offical documentation to setup this plugin correctly: https://develop
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/ionic-webview.md b/versioned_docs/version-v5/native/ionic-webview.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/ionic-webview.md
rename to versioned_docs/version-v5/native/ionic-webview.mdx
index 0942368d3f4..b5e7f2a1a04 100644
--- a/versioned_docs/version-v5/native/ionic-webview.md
+++ b/versioned_docs/version-v5/native/ionic-webview.mdx
@@ -79,7 +79,7 @@ Not Compatible
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.md b/versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.md
rename to versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.mdx
index 0e2946eba89..b8e5f4a973d 100644
--- a/versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.md
+++ b/versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.mdx
@@ -69,7 +69,7 @@ Plugin for iOS 12 ASWebAuthenticationSession API
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/is-debug.md b/versioned_docs/version-v5/native/is-debug.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/is-debug.md
rename to versioned_docs/version-v5/native/is-debug.mdx
index 8e1029377cf..6a2ba332e5d 100644
--- a/versioned_docs/version-v5/native/is-debug.md
+++ b/versioned_docs/version-v5/native/is-debug.mdx
@@ -69,7 +69,7 @@ Debug mode is when the app is built and installed locally via xcode / eclipse /
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/keyboard.md b/versioned_docs/version-v5/native/keyboard.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/keyboard.md
rename to versioned_docs/version-v5/native/keyboard.mdx
index 75ca74637d7..5677e0a3e17 100644
--- a/versioned_docs/version-v5/native/keyboard.md
+++ b/versioned_docs/version-v5/native/keyboard.mdx
@@ -76,7 +76,7 @@ Not Compatible
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/keychain.md b/versioned_docs/version-v5/native/keychain.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/keychain.md
rename to versioned_docs/version-v5/native/keychain.mdx
index dfd93eb3ca8..5dae923222b 100644
--- a/versioned_docs/version-v5/native/keychain.md
+++ b/versioned_docs/version-v5/native/keychain.mdx
@@ -73,7 +73,7 @@ See also [Secure Storage](https://ionicframework.com/docs/native/secure-storage/
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/kommunicate.md b/versioned_docs/version-v5/native/kommunicate.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/kommunicate.md
rename to versioned_docs/version-v5/native/kommunicate.mdx
index 57f5b2be2b6..c69dd4bbf4e 100644
--- a/versioned_docs/version-v5/native/kommunicate.md
+++ b/versioned_docs/version-v5/native/kommunicate.mdx
@@ -74,7 +74,7 @@ For documentation: TODO: insert link
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/launch-navigator.md b/versioned_docs/version-v5/native/launch-navigator.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/launch-navigator.md
rename to versioned_docs/version-v5/native/launch-navigator.mdx
index a384c735a00..11a8447f165 100644
--- a/versioned_docs/version-v5/native/launch-navigator.md
+++ b/versioned_docs/version-v5/native/launch-navigator.mdx
@@ -72,7 +72,7 @@ Requires Cordova plugin: uk.co.workingedge.phonegap.plugin.launchnavigator. For
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/launch-review.md b/versioned_docs/version-v5/native/launch-review.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/launch-review.md
rename to versioned_docs/version-v5/native/launch-review.mdx
index 9877914e443..629b8e77ad9 100644
--- a/versioned_docs/version-v5/native/launch-review.md
+++ b/versioned_docs/version-v5/native/launch-review.mdx
@@ -72,7 +72,7 @@ Assists in leaving user reviews/ratings in the App Stores.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/line-login.md b/versioned_docs/version-v5/native/line-login.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/line-login.md
rename to versioned_docs/version-v5/native/line-login.mdx
index 1fe09c04178..7c6cbc2ad13 100644
--- a/versioned_docs/version-v5/native/line-login.md
+++ b/versioned_docs/version-v5/native/line-login.mdx
@@ -70,7 +70,7 @@ The function login, logs out, acquires, verifies, and refreshes the access token
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/local-notifications.md b/versioned_docs/version-v5/native/local-notifications.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/local-notifications.md
rename to versioned_docs/version-v5/native/local-notifications.mdx
index 01767dd661d..82613baad49 100644
--- a/versioned_docs/version-v5/native/local-notifications.md
+++ b/versioned_docs/version-v5/native/local-notifications.mdx
@@ -73,7 +73,7 @@ This plugin allows you to display local notifications on the device
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/location-accuracy.md b/versioned_docs/version-v5/native/location-accuracy.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/location-accuracy.md
rename to versioned_docs/version-v5/native/location-accuracy.mdx
index 8fc8a83c460..3b8ef2adb65 100644
--- a/versioned_docs/version-v5/native/location-accuracy.md
+++ b/versioned_docs/version-v5/native/location-accuracy.mdx
@@ -70,7 +70,7 @@ This Cordova/Phonegap plugin for Android and iOS to request enabling/changing of
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/lottie-splash-screen.md b/versioned_docs/version-v5/native/lottie-splash-screen.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/lottie-splash-screen.md
rename to versioned_docs/version-v5/native/lottie-splash-screen.mdx
index 7349ec5ca64..28e6486c18d 100644
--- a/versioned_docs/version-v5/native/lottie-splash-screen.md
+++ b/versioned_docs/version-v5/native/lottie-splash-screen.mdx
@@ -70,7 +70,7 @@ Cordova plugin to show bodymovin/Lottie animations as the splash screen with Air
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/media-capture.md b/versioned_docs/version-v5/native/media-capture.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/media-capture.md
rename to versioned_docs/version-v5/native/media-capture.mdx
index 62085c70145..58bb68cf8fd 100644
--- a/versioned_docs/version-v5/native/media-capture.md
+++ b/versioned_docs/version-v5/native/media-capture.mdx
@@ -74,7 +74,7 @@ Requires Cordova plugin: `cordova-plugin-media-capture`. For more info, please s
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/media.md b/versioned_docs/version-v5/native/media.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/media.md
rename to versioned_docs/version-v5/native/media.mdx
index c6a0f1aa08d..e1e3fafff39 100644
--- a/versioned_docs/version-v5/native/media.md
+++ b/versioned_docs/version-v5/native/media.mdx
@@ -70,7 +70,7 @@ This plugin provides the ability to record and play back audio files on a device
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/metrix.md b/versioned_docs/version-v5/native/metrix.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/metrix.md
rename to versioned_docs/version-v5/native/metrix.mdx
index 88665cc8b26..dec157af897 100644
--- a/versioned_docs/version-v5/native/metrix.md
+++ b/versioned_docs/version-v5/native/metrix.mdx
@@ -69,7 +69,7 @@ Requires Cordova plugin: `ir.metrix.sdk`. For more info, please see the [Metrix
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/mixpanel.md b/versioned_docs/version-v5/native/mixpanel.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/mixpanel.md
rename to versioned_docs/version-v5/native/mixpanel.mdx
index 258969fd1bc..93d41ce1b10 100644
--- a/versioned_docs/version-v5/native/mixpanel.md
+++ b/versioned_docs/version-v5/native/mixpanel.mdx
@@ -69,7 +69,7 @@ Cordova Plugin that wraps Mixpanel SDK for Android and iOS
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/mlkit-translate.md b/versioned_docs/version-v5/native/mlkit-translate.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/mlkit-translate.md
rename to versioned_docs/version-v5/native/mlkit-translate.mdx
index ad87e8d07b1..8f8a62ea0cd 100644
--- a/versioned_docs/version-v5/native/mlkit-translate.md
+++ b/versioned_docs/version-v5/native/mlkit-translate.mdx
@@ -70,7 +70,7 @@ Plugin that implements MLKit Translation and Language Identification features.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/mobile-messaging.md b/versioned_docs/version-v5/native/mobile-messaging.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/mobile-messaging.md
rename to versioned_docs/version-v5/native/mobile-messaging.mdx
index 47ad73602c8..4770742e430 100644
--- a/versioned_docs/version-v5/native/mobile-messaging.md
+++ b/versioned_docs/version-v5/native/mobile-messaging.mdx
@@ -74,7 +74,7 @@ For more info see [Cordova plugin docs](https://github.com/infobip/mobile-messag
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/multiple-document-picker.md b/versioned_docs/version-v5/native/multiple-document-picker.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/multiple-document-picker.md
rename to versioned_docs/version-v5/native/multiple-document-picker.mdx
index b0b6a9f4d7c..0d87d31f6da 100644
--- a/versioned_docs/version-v5/native/multiple-document-picker.md
+++ b/versioned_docs/version-v5/native/multiple-document-picker.mdx
@@ -70,7 +70,7 @@ This plugin allows users to pick multiple documents/images at once
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/music-controls.md b/versioned_docs/version-v5/native/music-controls.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/music-controls.md
rename to versioned_docs/version-v5/native/music-controls.mdx
index 1c6c6bdd29f..b52e611dd6b 100644
--- a/versioned_docs/version-v5/native/music-controls.md
+++ b/versioned_docs/version-v5/native/music-controls.mdx
@@ -77,7 +77,7 @@ Not Compatible
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/native-audio.md b/versioned_docs/version-v5/native/native-audio.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/native-audio.md
rename to versioned_docs/version-v5/native/native-audio.mdx
index fd6ad275f70..d25ab236421 100644
--- a/versioned_docs/version-v5/native/native-audio.md
+++ b/versioned_docs/version-v5/native/native-audio.mdx
@@ -71,7 +71,7 @@ Native Audio Playback
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/native-geocoder.md b/versioned_docs/version-v5/native/native-geocoder.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/native-geocoder.md
rename to versioned_docs/version-v5/native/native-geocoder.mdx
index 90439573449..f82b7713bc5 100644
--- a/versioned_docs/version-v5/native/native-geocoder.md
+++ b/versioned_docs/version-v5/native/native-geocoder.mdx
@@ -70,7 +70,7 @@ Cordova plugin for native forward and reverse geocoding
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/native-keyboard.md b/versioned_docs/version-v5/native/native-keyboard.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/native-keyboard.md
rename to versioned_docs/version-v5/native/native-keyboard.mdx
index afa74683b6a..dbb5e9e3b97 100644
--- a/versioned_docs/version-v5/native/native-keyboard.md
+++ b/versioned_docs/version-v5/native/native-keyboard.mdx
@@ -70,7 +70,7 @@ A cross platform WhatsApp / Messenger / Slack -style keyboard even. For your Cor
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/native-page-transitions.md b/versioned_docs/version-v5/native/native-page-transitions.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/native-page-transitions.md
rename to versioned_docs/version-v5/native/native-page-transitions.mdx
index 6bc09cdb8ac..ac3e88da7f4 100644
--- a/versioned_docs/version-v5/native/native-page-transitions.md
+++ b/versioned_docs/version-v5/native/native-page-transitions.mdx
@@ -71,7 +71,7 @@ The Native Page Transitions plugin uses native hardware acceleration to animate
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/native-storage.md b/versioned_docs/version-v5/native/native-storage.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/native-storage.md
rename to versioned_docs/version-v5/native/native-storage.mdx
index e5d940242b6..13990682a64 100644
--- a/versioned_docs/version-v5/native/native-storage.md
+++ b/versioned_docs/version-v5/native/native-storage.mdx
@@ -75,7 +75,7 @@ Native storage of variables in Android and iOS
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/network-interface.md b/versioned_docs/version-v5/native/network-interface.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/network-interface.md
rename to versioned_docs/version-v5/native/network-interface.mdx
index 940338b2ab7..1c37cb06d39 100644
--- a/versioned_docs/version-v5/native/network-interface.md
+++ b/versioned_docs/version-v5/native/network-interface.mdx
@@ -74,7 +74,7 @@ Network interface information plugin for Cordova/PhoneGap that supports Android,
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/network.md b/versioned_docs/version-v5/native/network.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/network.md
rename to versioned_docs/version-v5/native/network.mdx
index c25a0813951..d65aa2b0d3f 100644
--- a/versioned_docs/version-v5/native/network.md
+++ b/versioned_docs/version-v5/native/network.mdx
@@ -75,7 +75,7 @@ Requires Cordova plugin: cordova-plugin-network-information. For more info, plea
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/nfc.md b/versioned_docs/version-v5/native/nfc.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/nfc.md
rename to versioned_docs/version-v5/native/nfc.mdx
index 799489b6452..cea0e81a90b 100644
--- a/versioned_docs/version-v5/native/nfc.md
+++ b/versioned_docs/version-v5/native/nfc.mdx
@@ -78,7 +78,7 @@ This plugin uses NDEF (NFC Data Exchange Format) for maximum compatibilty betwee
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/ocr.md b/versioned_docs/version-v5/native/ocr.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/ocr.md
rename to versioned_docs/version-v5/native/ocr.mdx
index f648df386dd..6f980341035 100644
--- a/versioned_docs/version-v5/native/ocr.md
+++ b/versioned_docs/version-v5/native/ocr.mdx
@@ -71,7 +71,7 @@ For more info, please see the following Github issue [Google Mobile Vision relyi
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/onesignal.md b/versioned_docs/version-v5/native/onesignal.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/onesignal.md
rename to versioned_docs/version-v5/native/onesignal.mdx
index bd9e6586f67..51910f6c789 100644
--- a/versioned_docs/version-v5/native/onesignal.md
+++ b/versioned_docs/version-v5/native/onesignal.mdx
@@ -141,7 +141,7 @@ module.exports = function(context) {
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/open-native-settings.md b/versioned_docs/version-v5/native/open-native-settings.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/open-native-settings.md
rename to versioned_docs/version-v5/native/open-native-settings.mdx
index 82db03f4c8e..832f8919252 100644
--- a/versioned_docs/version-v5/native/open-native-settings.md
+++ b/versioned_docs/version-v5/native/open-native-settings.mdx
@@ -70,7 +70,7 @@ Plugin to open native screens of iOS/android settings
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/openalpr.md b/versioned_docs/version-v5/native/openalpr.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/openalpr.md
rename to versioned_docs/version-v5/native/openalpr.mdx
index 6ad4fb2025f..2564a30d15f 100644
--- a/versioned_docs/version-v5/native/openalpr.md
+++ b/versioned_docs/version-v5/native/openalpr.mdx
@@ -68,7 +68,7 @@ This Cordova plugin adds support for the OpenALPR (Automatic License Plate Recog
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/pdf-generator.md b/versioned_docs/version-v5/native/pdf-generator.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/pdf-generator.md
rename to versioned_docs/version-v5/native/pdf-generator.mdx
index 107ed720bb8..12604e10409 100644
--- a/versioned_docs/version-v5/native/pdf-generator.md
+++ b/versioned_docs/version-v5/native/pdf-generator.mdx
@@ -69,7 +69,7 @@ Simple plugin to generate (offline) pdf. The plugin transforms HTML to PDF and a
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/photo-library.md b/versioned_docs/version-v5/native/photo-library.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/photo-library.md
rename to versioned_docs/version-v5/native/photo-library.mdx
index b9a37450967..8a85ef97a65 100644
--- a/versioned_docs/version-v5/native/photo-library.md
+++ b/versioned_docs/version-v5/native/photo-library.mdx
@@ -73,7 +73,7 @@ cdvphotolibrary urls should be trusted by Angular. See plugin homepage to learn
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/photo-viewer.md b/versioned_docs/version-v5/native/photo-viewer.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/photo-viewer.md
rename to versioned_docs/version-v5/native/photo-viewer.mdx
index 413c354e904..d68361ba6de 100644
--- a/versioned_docs/version-v5/native/photo-viewer.md
+++ b/versioned_docs/version-v5/native/photo-viewer.mdx
@@ -70,7 +70,7 @@ This plugin can display your image in full screen with the ability to pan, zoom,
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/printer.md b/versioned_docs/version-v5/native/printer.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/printer.md
rename to versioned_docs/version-v5/native/printer.mdx
index 8a256bc2939..d3ac964842f 100644
--- a/versioned_docs/version-v5/native/printer.md
+++ b/versioned_docs/version-v5/native/printer.mdx
@@ -69,7 +69,7 @@ Prints documents or HTML rendered content
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/pspdfkit-cordova.md b/versioned_docs/version-v5/native/pspdfkit-cordova.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/pspdfkit-cordova.md
rename to versioned_docs/version-v5/native/pspdfkit-cordova.mdx
index bd3c4882691..c1ac5f052c7 100644
--- a/versioned_docs/version-v5/native/pspdfkit-cordova.md
+++ b/versioned_docs/version-v5/native/pspdfkit-cordova.mdx
@@ -69,7 +69,7 @@ The official plugin to use PSPDFKit with Cordova and Ionic.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/purchases.md b/versioned_docs/version-v5/native/purchases.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/purchases.md
rename to versioned_docs/version-v5/native/purchases.mdx
index e7288c19a1c..01af5df5959 100644
--- a/versioned_docs/version-v5/native/purchases.md
+++ b/versioned_docs/version-v5/native/purchases.mdx
@@ -88,7 +88,7 @@ For more detailed information, you can view our complete documentation at [docs.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/push.md b/versioned_docs/version-v5/native/push.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/push.md
rename to versioned_docs/version-v5/native/push.mdx
index de211458bcc..7f41642bf7c 100644
--- a/versioned_docs/version-v5/native/push.md
+++ b/versioned_docs/version-v5/native/push.mdx
@@ -76,7 +76,7 @@ For TypeScript users, see the [Push plugin docs about using TypeScript for custo
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/pushape-push.md b/versioned_docs/version-v5/native/pushape-push.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/pushape-push.md
rename to versioned_docs/version-v5/native/pushape-push.mdx
index c395223022e..59d5f94c65e 100644
--- a/versioned_docs/version-v5/native/pushape-push.md
+++ b/versioned_docs/version-v5/native/pushape-push.mdx
@@ -77,7 +77,7 @@ For TypeScript users, see the [Pushape plugin docs about using TypeScript for cu
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/safari-view-controller.md b/versioned_docs/version-v5/native/safari-view-controller.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/safari-view-controller.md
rename to versioned_docs/version-v5/native/safari-view-controller.mdx
index 06f56ce773a..97cd91c8aba 100644
--- a/versioned_docs/version-v5/native/safari-view-controller.md
+++ b/versioned_docs/version-v5/native/safari-view-controller.mdx
@@ -72,7 +72,7 @@ Requires Cordova plugin: `cordova-plugin-safariviewcontroller`. For more info, p
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/screen-orientation.md b/versioned_docs/version-v5/native/screen-orientation.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/screen-orientation.md
rename to versioned_docs/version-v5/native/screen-orientation.mdx
index 52d5a8edb88..3fb0c37a78e 100644
--- a/versioned_docs/version-v5/native/screen-orientation.md
+++ b/versioned_docs/version-v5/native/screen-orientation.mdx
@@ -73,7 +73,7 @@ Requires Cordova plugin: `cordova-plugin-screen-orientation`. For more info, ple
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/service-discovery.md b/versioned_docs/version-v5/native/service-discovery.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/service-discovery.md
rename to versioned_docs/version-v5/native/service-discovery.mdx
index 7918888ab78..938a1f0cf8f 100644
--- a/versioned_docs/version-v5/native/service-discovery.md
+++ b/versioned_docs/version-v5/native/service-discovery.mdx
@@ -70,7 +70,7 @@ Simple plugin to get any SSDP / UPnP / DLNA service on a local network
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/shake.md b/versioned_docs/version-v5/native/shake.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/shake.md
rename to versioned_docs/version-v5/native/shake.mdx
index f671de5d8fc..707912d3f44 100644
--- a/versioned_docs/version-v5/native/shake.md
+++ b/versioned_docs/version-v5/native/shake.mdx
@@ -67,7 +67,7 @@ Handles shake gesture
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/sign-in-with-apple.md b/versioned_docs/version-v5/native/sign-in-with-apple.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/sign-in-with-apple.md
rename to versioned_docs/version-v5/native/sign-in-with-apple.mdx
index aa9f1d12d0f..d60e48c333d 100644
--- a/versioned_docs/version-v5/native/sign-in-with-apple.md
+++ b/versioned_docs/version-v5/native/sign-in-with-apple.mdx
@@ -74,7 +74,7 @@ _Source:_ https://developer.apple.com/sign-in-with-apple/
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/smartlook.md b/versioned_docs/version-v5/native/smartlook.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/smartlook.md
rename to versioned_docs/version-v5/native/smartlook.mdx
index a1abfa0206e..72cc0854e72 100644
--- a/versioned_docs/version-v5/native/smartlook.md
+++ b/versioned_docs/version-v5/native/smartlook.mdx
@@ -71,7 +71,7 @@ Full documentation can be found here: https://smartlook.github.io/docs/sdk/ionic
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/sms-retriever.md b/versioned_docs/version-v5/native/sms-retriever.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/sms-retriever.md
rename to versioned_docs/version-v5/native/sms-retriever.mdx
index 5e587ac7330..550dc0bba41 100644
--- a/versioned_docs/version-v5/native/sms-retriever.md
+++ b/versioned_docs/version-v5/native/sms-retriever.mdx
@@ -70,7 +70,7 @@ This plugin retrives the SMS which arrive without requiring READ permissions.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/sms.md b/versioned_docs/version-v5/native/sms.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/sms.md
rename to versioned_docs/version-v5/native/sms.mdx
index 3f7c413a721..533a924488e 100644
--- a/versioned_docs/version-v5/native/sms.md
+++ b/versioned_docs/version-v5/native/sms.mdx
@@ -70,7 +70,7 @@ Requires Cordova plugin: cordova-sms-plugin. For more info, please see the [SMS
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/social-sharing.md b/versioned_docs/version-v5/native/social-sharing.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/social-sharing.md
rename to versioned_docs/version-v5/native/social-sharing.mdx
index 68eb9fd500d..7ab1215b196 100644
--- a/versioned_docs/version-v5/native/social-sharing.md
+++ b/versioned_docs/version-v5/native/social-sharing.mdx
@@ -77,7 +77,7 @@ For Browser usage check out the Web Share API docs: https://github.com/EddyVerbr
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/speech-recognition.md b/versioned_docs/version-v5/native/speech-recognition.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/speech-recognition.md
rename to versioned_docs/version-v5/native/speech-recognition.mdx
index e7f3b735890..028443c33d5 100644
--- a/versioned_docs/version-v5/native/speech-recognition.md
+++ b/versioned_docs/version-v5/native/speech-recognition.mdx
@@ -70,7 +70,7 @@ This plugin does speech recognition using cloud services
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/spinner-dialog.md b/versioned_docs/version-v5/native/spinner-dialog.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/spinner-dialog.md
rename to versioned_docs/version-v5/native/spinner-dialog.mdx
index 78456f1dcbb..c190ed6f9ad 100644
--- a/versioned_docs/version-v5/native/spinner-dialog.md
+++ b/versioned_docs/version-v5/native/spinner-dialog.mdx
@@ -74,7 +74,7 @@ Requires Cordova plugin: `cordova-plugin-native-spinner`. For more info, please
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/splash-screen.md b/versioned_docs/version-v5/native/splash-screen.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/splash-screen.md
rename to versioned_docs/version-v5/native/splash-screen.mdx
index ed5fbb83119..051bafa3b22 100644
--- a/versioned_docs/version-v5/native/splash-screen.md
+++ b/versioned_docs/version-v5/native/splash-screen.mdx
@@ -78,7 +78,7 @@ Not Compatible
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/spotify-auth.md b/versioned_docs/version-v5/native/spotify-auth.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/spotify-auth.md
rename to versioned_docs/version-v5/native/spotify-auth.mdx
index 832138055b5..c33e982d9c9 100644
--- a/versioned_docs/version-v5/native/spotify-auth.md
+++ b/versioned_docs/version-v5/native/spotify-auth.mdx
@@ -71,7 +71,7 @@ Cordova plugin for authenticating with Spotify
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/sqlite-db-copy.md b/versioned_docs/version-v5/native/sqlite-db-copy.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/sqlite-db-copy.md
rename to versioned_docs/version-v5/native/sqlite-db-copy.mdx
index 195d00f76de..12e8b559509 100644
--- a/versioned_docs/version-v5/native/sqlite-db-copy.md
+++ b/versioned_docs/version-v5/native/sqlite-db-copy.mdx
@@ -70,7 +70,7 @@ This plugin does something
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/sqlite-porter.md b/versioned_docs/version-v5/native/sqlite-porter.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/sqlite-porter.md
rename to versioned_docs/version-v5/native/sqlite-porter.mdx
index b46dcf3cc69..49c41b42b8f 100644
--- a/versioned_docs/version-v5/native/sqlite-porter.md
+++ b/versioned_docs/version-v5/native/sqlite-porter.mdx
@@ -76,7 +76,7 @@ This Cordova/Phonegap plugin can be used to import/export to/from a SQLite datab
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/sqlite.md b/versioned_docs/version-v5/native/sqlite.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/sqlite.md
rename to versioned_docs/version-v5/native/sqlite.mdx
index e28752ad5b5..79a0b14f0b3 100644
--- a/versioned_docs/version-v5/native/sqlite.md
+++ b/versioned_docs/version-v5/native/sqlite.mdx
@@ -73,7 +73,7 @@ Access SQLite databases on the device.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/star-prnt.md b/versioned_docs/version-v5/native/star-prnt.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/star-prnt.md
rename to versioned_docs/version-v5/native/star-prnt.mdx
index b6f89e3e8a7..cd1197aa538 100644
--- a/versioned_docs/version-v5/native/star-prnt.md
+++ b/versioned_docs/version-v5/native/star-prnt.mdx
@@ -69,7 +69,7 @@ import CodeBlock from '@theme/CodeBlock';
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/status-bar.md b/versioned_docs/version-v5/native/status-bar.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/status-bar.md
rename to versioned_docs/version-v5/native/status-bar.mdx
index 585f957caf0..c3f955e51a8 100644
--- a/versioned_docs/version-v5/native/status-bar.md
+++ b/versioned_docs/version-v5/native/status-bar.mdx
@@ -78,7 +78,7 @@ Not Compatible
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/streaming-media.md b/versioned_docs/version-v5/native/streaming-media.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/streaming-media.md
rename to versioned_docs/version-v5/native/streaming-media.mdx
index e3d28e2feed..090580cf018 100644
--- a/versioned_docs/version-v5/native/streaming-media.md
+++ b/versioned_docs/version-v5/native/streaming-media.mdx
@@ -71,7 +71,7 @@ This plugin allows you to stream audio and video in a fullscreen, native player
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/stripe.md b/versioned_docs/version-v5/native/stripe.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/stripe.md
rename to versioned_docs/version-v5/native/stripe.mdx
index abaf9ee7e09..e4f2fcec226 100644
--- a/versioned_docs/version-v5/native/stripe.md
+++ b/versioned_docs/version-v5/native/stripe.mdx
@@ -69,7 +69,7 @@ A plugin that allows you to use Stripe's Native SDKs for Android and iOS.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/sum-up.md b/versioned_docs/version-v5/native/sum-up.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/sum-up.md
rename to versioned_docs/version-v5/native/sum-up.mdx
index e318ef84c6b..3298dbfc293 100644
--- a/versioned_docs/version-v5/native/sum-up.md
+++ b/versioned_docs/version-v5/native/sum-up.mdx
@@ -68,7 +68,7 @@ Plugin to communicate with a SumUp payment terminal
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/taptic-engine.md b/versioned_docs/version-v5/native/taptic-engine.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/taptic-engine.md
rename to versioned_docs/version-v5/native/taptic-engine.mdx
index ee86ecd23d2..dcdfcda74b8 100644
--- a/versioned_docs/version-v5/native/taptic-engine.md
+++ b/versioned_docs/version-v5/native/taptic-engine.mdx
@@ -69,7 +69,7 @@ An Ionic plugin to use Taptic Engine API on iPhone 7, 7 Plus or newer.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/tealium-adidentifier.md b/versioned_docs/version-v5/native/tealium-adidentifier.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/tealium-adidentifier.md
rename to versioned_docs/version-v5/native/tealium-adidentifier.mdx
index d08610c1d8a..b5f9a737a16 100644
--- a/versioned_docs/version-v5/native/tealium-adidentifier.md
+++ b/versioned_docs/version-v5/native/tealium-adidentifier.mdx
@@ -71,7 +71,7 @@ Makes the IDFA and Google Ad Identifier available in the Tealium data layer.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/tealium-installreferrer.md b/versioned_docs/version-v5/native/tealium-installreferrer.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/tealium-installreferrer.md
rename to versioned_docs/version-v5/native/tealium-installreferrer.mdx
index d9be83679d8..0c07e2fae3d 100644
--- a/versioned_docs/version-v5/native/tealium-installreferrer.md
+++ b/versioned_docs/version-v5/native/tealium-installreferrer.mdx
@@ -70,7 +70,7 @@ Implements a Broadcast Receiver for the INSTALL_REFERRER intent.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/tealium.md b/versioned_docs/version-v5/native/tealium.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/tealium.md
rename to versioned_docs/version-v5/native/tealium.mdx
index afb02e4ff6a..321f89f18b6 100644
--- a/versioned_docs/version-v5/native/tealium.md
+++ b/versioned_docs/version-v5/native/tealium.mdx
@@ -70,7 +70,7 @@ For full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/theme-detection.md b/versioned_docs/version-v5/native/theme-detection.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/theme-detection.md
rename to versioned_docs/version-v5/native/theme-detection.mdx
index 4c80836bda0..365c3de4fa1 100644
--- a/versioned_docs/version-v5/native/theme-detection.md
+++ b/versioned_docs/version-v5/native/theme-detection.mdx
@@ -70,7 +70,7 @@ Cordova plugin to detect whether dark mode is enabled or not
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/three-dee-touch.md b/versioned_docs/version-v5/native/three-dee-touch.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/three-dee-touch.md
rename to versioned_docs/version-v5/native/three-dee-touch.mdx
index f34303700e6..b547fefd8a4 100644
--- a/versioned_docs/version-v5/native/three-dee-touch.md
+++ b/versioned_docs/version-v5/native/three-dee-touch.mdx
@@ -71,7 +71,7 @@ Requires Cordova plugin: `cordova-plugin-3dtouch`. For more info, please see the
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/toast.md b/versioned_docs/version-v5/native/toast.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/toast.md
rename to versioned_docs/version-v5/native/toast.mdx
index 881f22db2cf..c98bd4c92ad 100644
--- a/versioned_docs/version-v5/native/toast.md
+++ b/versioned_docs/version-v5/native/toast.mdx
@@ -73,7 +73,7 @@ Requires Cordova plugin: `cordova-plugin-x-toast`. For more info, please see the
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/touch-id.md b/versioned_docs/version-v5/native/touch-id.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/touch-id.md
rename to versioned_docs/version-v5/native/touch-id.mdx
index ebce241e46a..ba97f8389b2 100644
--- a/versioned_docs/version-v5/native/touch-id.md
+++ b/versioned_docs/version-v5/native/touch-id.mdx
@@ -69,7 +69,7 @@ Requires Cordova plugin: `cordova-plugin-touch-id`. For more info, please see th
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/unvired-cordova-sdk.md b/versioned_docs/version-v5/native/unvired-cordova-sdk.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/unvired-cordova-sdk.md
rename to versioned_docs/version-v5/native/unvired-cordova-sdk.mdx
index 56a5b875386..2f4ff636ad5 100644
--- a/versioned_docs/version-v5/native/unvired-cordova-sdk.md
+++ b/versioned_docs/version-v5/native/unvired-cordova-sdk.mdx
@@ -81,7 +81,7 @@ pod repo update
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/uptime.md b/versioned_docs/version-v5/native/uptime.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/uptime.md
rename to versioned_docs/version-v5/native/uptime.mdx
index ff6c196af25..e144a6bfef4 100644
--- a/versioned_docs/version-v5/native/uptime.md
+++ b/versioned_docs/version-v5/native/uptime.mdx
@@ -68,7 +68,7 @@ This plugin provides the time spent in milliseconds since boot (uptime).
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/urbanairship.md b/versioned_docs/version-v5/native/urbanairship.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/urbanairship.md
rename to versioned_docs/version-v5/native/urbanairship.mdx
index eecb56d4232..719af7f3fe5 100644
--- a/versioned_docs/version-v5/native/urbanairship.md
+++ b/versioned_docs/version-v5/native/urbanairship.mdx
@@ -69,7 +69,7 @@ This plugin does something
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/usabilla-cordova-sdk.md b/versioned_docs/version-v5/native/usabilla-cordova-sdk.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/usabilla-cordova-sdk.md
rename to versioned_docs/version-v5/native/usabilla-cordova-sdk.mdx
index 4a56bb350f8..bd5e6d5d9a9 100644
--- a/versioned_docs/version-v5/native/usabilla-cordova-sdk.md
+++ b/versioned_docs/version-v5/native/usabilla-cordova-sdk.mdx
@@ -73,7 +73,7 @@ For more info see [Cordova plugin docs](https://github.com/usabilla/usabilla-u4a
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/vibes.md b/versioned_docs/version-v5/native/vibes.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/vibes.md
rename to versioned_docs/version-v5/native/vibes.mdx
index 90ad45231a7..4add667eb77 100644
--- a/versioned_docs/version-v5/native/vibes.md
+++ b/versioned_docs/version-v5/native/vibes.mdx
@@ -68,7 +68,7 @@ This plugin enables integration with the Vibes Push SDK to your Cordova project
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/vibration.md b/versioned_docs/version-v5/native/vibration.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/vibration.md
rename to versioned_docs/version-v5/native/vibration.mdx
index f863c053693..b224be0c558 100644
--- a/versioned_docs/version-v5/native/vibration.md
+++ b/versioned_docs/version-v5/native/vibration.mdx
@@ -70,7 +70,7 @@ Vibrates the device
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/video-editor.md b/versioned_docs/version-v5/native/video-editor.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/video-editor.md
rename to versioned_docs/version-v5/native/video-editor.mdx
index ddfe47114e5..6a633d35793 100644
--- a/versioned_docs/version-v5/native/video-editor.md
+++ b/versioned_docs/version-v5/native/video-editor.mdx
@@ -72,7 +72,7 @@ Edit videos using native device APIs
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/video-player.md b/versioned_docs/version-v5/native/video-player.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/video-player.md
rename to versioned_docs/version-v5/native/video-player.mdx
index a3be580e38b..88094ad1ae3 100644
--- a/versioned_docs/version-v5/native/video-player.md
+++ b/versioned_docs/version-v5/native/video-player.mdx
@@ -71,7 +71,7 @@ Requires Cordova plugin: `com.moust.cordova.videoplayer`. For more info, please
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/web-intent.md b/versioned_docs/version-v5/native/web-intent.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/web-intent.md
rename to versioned_docs/version-v5/native/web-intent.mdx
index 4eb61d3d90f..1c289e7a5fc 100644
--- a/versioned_docs/version-v5/native/web-intent.md
+++ b/versioned_docs/version-v5/native/web-intent.mdx
@@ -69,7 +69,7 @@ This Plugin provides a general purpose shim layer for the Android intent mechani
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/web-server.md b/versioned_docs/version-v5/native/web-server.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/web-server.md
rename to versioned_docs/version-v5/native/web-server.mdx
index 4d1f1b9533b..f50bcfe1f12 100644
--- a/versioned_docs/version-v5/native/web-server.md
+++ b/versioned_docs/version-v5/native/web-server.mdx
@@ -69,7 +69,7 @@ This plugin allows you to start a local dynamic content web server for android a
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/web-socket-server.md b/versioned_docs/version-v5/native/web-socket-server.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/web-socket-server.md
rename to versioned_docs/version-v5/native/web-socket-server.mdx
index 4f818669a5f..36b89366142 100644
--- a/versioned_docs/version-v5/native/web-socket-server.md
+++ b/versioned_docs/version-v5/native/web-socket-server.mdx
@@ -70,7 +70,7 @@ This plugin allows you to run a single, lightweight, barebone WebSocket Server.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/webengage.md b/versioned_docs/version-v5/native/webengage.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/webengage.md
rename to versioned_docs/version-v5/native/webengage.mdx
index 3b0fe5af85f..33dc89a8f4f 100644
--- a/versioned_docs/version-v5/native/webengage.md
+++ b/versioned_docs/version-v5/native/webengage.mdx
@@ -69,7 +69,7 @@ Ionic-Native wrapper that wraps Webengage Cordova plugin for Android and iOS
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/wechat.md b/versioned_docs/version-v5/native/wechat.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/wechat.md
rename to versioned_docs/version-v5/native/wechat.mdx
index 4a16a0ff5ec..a93a77f3c69 100644
--- a/versioned_docs/version-v5/native/wechat.md
+++ b/versioned_docs/version-v5/native/wechat.mdx
@@ -68,7 +68,7 @@ A cordova plugin, a JS version of Wechat SDK
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/wheel-selector.md b/versioned_docs/version-v5/native/wheel-selector.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/wheel-selector.md
rename to versioned_docs/version-v5/native/wheel-selector.mdx
index a9e125f147f..a2311f0eac0 100644
--- a/versioned_docs/version-v5/native/wheel-selector.md
+++ b/versioned_docs/version-v5/native/wheel-selector.mdx
@@ -70,7 +70,7 @@ Native wheel selector for Cordova (Android/iOS).
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/wifi-wizard-2.md b/versioned_docs/version-v5/native/wifi-wizard-2.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/wifi-wizard-2.md
rename to versioned_docs/version-v5/native/wifi-wizard-2.mdx
index 575bc03482f..b098f1e9ec9 100644
--- a/versioned_docs/version-v5/native/wifi-wizard-2.md
+++ b/versioned_docs/version-v5/native/wifi-wizard-2.mdx
@@ -72,7 +72,7 @@ This project is a fork of the WifiWizard plugin with fixes and updates, as well
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/wonderpush.md b/versioned_docs/version-v5/native/wonderpush.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/wonderpush.md
rename to versioned_docs/version-v5/native/wonderpush.mdx
index e0df24ba1a3..b8cb982759e 100644
--- a/versioned_docs/version-v5/native/wonderpush.md
+++ b/versioned_docs/version-v5/native/wonderpush.mdx
@@ -78,7 +78,7 @@ to retain your users and grow your audience while remaining fully GDPR compliant
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/youtube-video-player.md b/versioned_docs/version-v5/native/youtube-video-player.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/youtube-video-player.md
rename to versioned_docs/version-v5/native/youtube-video-player.mdx
index 7f4fdda4731..07aa545645e 100644
--- a/versioned_docs/version-v5/native/youtube-video-player.md
+++ b/versioned_docs/version-v5/native/youtube-video-player.mdx
@@ -70,7 +70,7 @@ Plays YouTube videos in Native YouTube App
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/zbar.md b/versioned_docs/version-v5/native/zbar.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/zbar.md
rename to versioned_docs/version-v5/native/zbar.mdx
index 345e75b2038..f3a41a17f68 100644
--- a/versioned_docs/version-v5/native/zbar.md
+++ b/versioned_docs/version-v5/native/zbar.mdx
@@ -70,7 +70,7 @@ Requires Cordova plugin: `cordova-plugin-cszbar`. For more info, please see the
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/zeroconf.md b/versioned_docs/version-v5/native/zeroconf.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/zeroconf.md
rename to versioned_docs/version-v5/native/zeroconf.mdx
index d81faca0dbe..9156f59e91d 100644
--- a/versioned_docs/version-v5/native/zeroconf.md
+++ b/versioned_docs/version-v5/native/zeroconf.mdx
@@ -68,7 +68,7 @@ This plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services.
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/native/zoom.md b/versioned_docs/version-v5/native/zoom.mdx
similarity index 99%
rename from versioned_docs/version-v5/native/zoom.md
rename to versioned_docs/version-v5/native/zoom.mdx
index bb41d3c0e31..f1b8b7b83a6 100644
--- a/versioned_docs/version-v5/native/zoom.md
+++ b/versioned_docs/version-v5/native/zoom.mdx
@@ -68,7 +68,7 @@ A Cordova plugin to use Zoom Video Conferencing services on Cordova applications
 
 ### React
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
 
 ### Angular
 
diff --git a/versioned_docs/version-v5/react.md b/versioned_docs/version-v5/react.mdx
similarity index 100%
rename from versioned_docs/version-v5/react.md
rename to versioned_docs/version-v5/react.mdx
diff --git a/versioned_docs/version-v5/react/config.md b/versioned_docs/version-v5/react/config.mdx
similarity index 99%
rename from versioned_docs/version-v5/react/config.md
rename to versioned_docs/version-v5/react/config.mdx
index 14eb3641e2f..4763928a5b5 100644
--- a/versioned_docs/version-v5/react/config.md
+++ b/versioned_docs/version-v5/react/config.mdx
@@ -20,7 +20,7 @@ In the above example, we are disabling the Material Design ripple effect across
 Ionic Config can also be set on a per-platform basis. For example, this allows you to disable animations if the app is being run in a browser on a potentially slower device. Developers can take advantage of the Platform utilities to accomplish this.
 
 In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser.
-The `isPlatform()` call returns `true` or `false` based upon the platform that is passed in. See the [Platform Documentation](platform.md#platforms) for a list of possible values.
+The `isPlatform()` call returns `true` or `false` based upon the platform that is passed in. See the [Platform Documentation](platform.mdx#platforms) for a list of possible values.
 
 ```tsx
 import { isPlatform, setupConfig } from '@ionic/react';
diff --git a/versioned_docs/version-v5/react/lifecycle.md b/versioned_docs/version-v5/react/lifecycle.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/lifecycle.md
rename to versioned_docs/version-v5/react/lifecycle.mdx
diff --git a/versioned_docs/version-v5/react/navigation.md b/versioned_docs/version-v5/react/navigation.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/navigation.md
rename to versioned_docs/version-v5/react/navigation.mdx
diff --git a/versioned_docs/version-v5/react/overlays.md b/versioned_docs/version-v5/react/overlays.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/overlays.md
rename to versioned_docs/version-v5/react/overlays.mdx
diff --git a/versioned_docs/version-v5/react/performance.md b/versioned_docs/version-v5/react/performance.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/performance.md
rename to versioned_docs/version-v5/react/performance.mdx
diff --git a/versioned_docs/version-v5/react/platform.md b/versioned_docs/version-v5/react/platform.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/platform.md
rename to versioned_docs/version-v5/react/platform.mdx
diff --git a/versioned_docs/version-v5/react/pwa.md b/versioned_docs/version-v5/react/pwa.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/pwa.md
rename to versioned_docs/version-v5/react/pwa.mdx
diff --git a/versioned_docs/version-v5/react/quickstart.md b/versioned_docs/version-v5/react/quickstart.mdx
similarity index 99%
rename from versioned_docs/version-v5/react/quickstart.md
rename to versioned_docs/version-v5/react/quickstart.mdx
index 750b84bd4da..83ca7380f60 100644
--- a/versioned_docs/version-v5/react/quickstart.md
+++ b/versioned_docs/version-v5/react/quickstart.mdx
@@ -87,7 +87,7 @@ The next import is from `react-router-dom`. We're importing Route, which is how
 
 Following ReactRouter, we next have our first imports for Ionic. To use a component in React, you must first import it. So for Ionic, this means anytime we want to use a Button or a Card, it must be added to our imports. In the case of our App component, we're only using `IonApp`, `IonRouterOutlet`, and `IonReactRouter`.
 
-`IonReactRouter` is a component that wraps ReactRouter’s BrowserRouter component. It more or less behaves the same as BrowserRouter with a few differences. We have a deeper guide that goes over these differences in our [React Navigation Docs](navigation.md).
+`IonReactRouter` is a component that wraps ReactRouter’s BrowserRouter component. It more or less behaves the same as BrowserRouter with a few differences. We have a deeper guide that goes over these differences in our [React Navigation Docs](navigation.mdx).
 
 The last important import is the `Home` component import. This is a component that we will be able to navigate to in our app. We'll look at the navigation part a bit later.
 
@@ -311,7 +311,7 @@ export default NewItem;
 ```
 
 :::note
-Each view must contain an `IonPage` component. Page transitions will not work correctly without it. See the [IonPage Documentation](navigation.md#ionpage) for more information.
+Each view must contain an `IonPage` component. Page transitions will not work correctly without it. See the [IonPage Documentation](navigation.mdx#ionpage) for more information.
 :::
 
 The content here is pretty straight forward and should look similar to the `Home` component. What is new is the `IonBackButton` component. This is used to navigate back to the previous route. Pretty straight forward? Ok, but what if we reload the page?
@@ -401,7 +401,7 @@ export default Home;
 
 ## Where to go from here
 
-This guide covered the basics of creating an Ionic React app, adding some basic navigation, and introducing Capacitor as a way of building native apps. To dive deeper into building complete Ionic apps with React and Capacitor, follow our [First App guide](your-first-app.md).
+This guide covered the basics of creating an Ionic React app, adding some basic navigation, and introducing Capacitor as a way of building native apps. To dive deeper into building complete Ionic apps with React and Capacitor, follow our [First App guide](your-first-app.mdx).
 
 For a more detailed look at Ionic’s components, check out the [component API pages](https://ionicframework.com/docs/components). For more details on React, review the [React Docs](https://reactjs.org/). To keep building native features, see the [Capacitor docs](https://capacitorjs.com/docs/).
 
diff --git a/versioned_docs/version-v5/react/storage.md b/versioned_docs/version-v5/react/storage.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/storage.md
rename to versioned_docs/version-v5/react/storage.mdx
diff --git a/versioned_docs/version-v5/react/testing.md b/versioned_docs/version-v5/react/testing.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/testing.md
rename to versioned_docs/version-v5/react/testing.mdx
diff --git a/versioned_docs/version-v5/react/your-first-app.md b/versioned_docs/version-v5/react/your-first-app.mdx
similarity index 99%
rename from versioned_docs/version-v5/react/your-first-app.md
rename to versioned_docs/version-v5/react/your-first-app.mdx
index 3ad5c20a441..10e4da21b01 100644
--- a/versioned_docs/version-v5/react/your-first-app.md
+++ b/versioned_docs/version-v5/react/your-first-app.mdx
@@ -57,7 +57,7 @@ npm install -g @ionic/cli native-run cordova-res
 :::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. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information.
 :::
 
 ## Create an App
diff --git a/versioned_docs/version-v5/react/your-first-app/2-taking-photos.md b/versioned_docs/version-v5/react/your-first-app/2-taking-photos.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/your-first-app/2-taking-photos.md
rename to versioned_docs/version-v5/react/your-first-app/2-taking-photos.mdx
diff --git a/versioned_docs/version-v5/react/your-first-app/3-saving-photos.md b/versioned_docs/version-v5/react/your-first-app/3-saving-photos.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/your-first-app/3-saving-photos.md
rename to versioned_docs/version-v5/react/your-first-app/3-saving-photos.mdx
diff --git a/versioned_docs/version-v5/react/your-first-app/4-loading-photos.md b/versioned_docs/version-v5/react/your-first-app/4-loading-photos.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/your-first-app/4-loading-photos.md
rename to versioned_docs/version-v5/react/your-first-app/4-loading-photos.mdx
diff --git a/versioned_docs/version-v5/react/your-first-app/5-adding-mobile.md b/versioned_docs/version-v5/react/your-first-app/5-adding-mobile.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/your-first-app/5-adding-mobile.md
rename to versioned_docs/version-v5/react/your-first-app/5-adding-mobile.mdx
diff --git a/versioned_docs/version-v5/react/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v5/react/your-first-app/6-deploying-mobile.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/your-first-app/6-deploying-mobile.md
rename to versioned_docs/version-v5/react/your-first-app/6-deploying-mobile.mdx
diff --git a/versioned_docs/version-v5/react/your-first-app/7-live-reload.md b/versioned_docs/version-v5/react/your-first-app/7-live-reload.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/your-first-app/7-live-reload.md
rename to versioned_docs/version-v5/react/your-first-app/7-live-reload.mdx
diff --git a/versioned_docs/version-v5/reference/browser-support.md b/versioned_docs/version-v5/reference/browser-support.mdx
similarity index 89%
rename from versioned_docs/version-v5/reference/browser-support.md
rename to versioned_docs/version-v5/reference/browser-support.mdx
index c4894f28f7a..88f1d5e1f0f 100644
--- a/versioned_docs/version-v5/reference/browser-support.md
+++ b/versioned_docs/version-v5/reference/browser-support.mdx
@@ -4,7 +4,7 @@ Ionic's earliest goal was to make it easy to develop mobile apps using web techn
 
 ## Mobile Browsers
 
-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  |
 | :-------: | :-----: | :---: |
@@ -17,7 +17,7 @@ Check the [latest Android stats](https://developer.android.com/about/dashboards/
 
 ## Desktop Browsers
 
-Because Ionic is based on web technologies, it works just as well on desktop browsers as it does on mobile devices. For more information on desktop layouts, see [Cross Platform](../core-concepts/cross-platform.md#desktop).
+Because Ionic is based on web technologies, it works just as well on desktop browsers as it does on mobile devices. For more information on desktop layouts, see [Cross Platform](../core-concepts/cross-platform.mdx#desktop).
 
 |   Browser   | Ionic v5 | Ionic V4 |
 | :---------: | :------: | :------: |
diff --git a/versioned_docs/version-v5/reference/glossary.md b/versioned_docs/version-v5/reference/glossary.mdx
similarity index 100%
rename from versioned_docs/version-v5/reference/glossary.md
rename to versioned_docs/version-v5/reference/glossary.mdx
diff --git a/versioned_docs/version-v5/reference/migration.md b/versioned_docs/version-v5/reference/migration.mdx
similarity index 100%
rename from versioned_docs/version-v5/reference/migration.md
rename to versioned_docs/version-v5/reference/migration.mdx
diff --git a/versioned_docs/version-v5/reference/release-notes.md b/versioned_docs/version-v5/reference/release-notes.mdx
similarity index 100%
rename from versioned_docs/version-v5/reference/release-notes.md
rename to versioned_docs/version-v5/reference/release-notes.mdx
diff --git a/versioned_docs/version-v5/reference/support.md b/versioned_docs/version-v5/reference/support.mdx
similarity index 99%
rename from versioned_docs/version-v5/reference/support.md
rename to versioned_docs/version-v5/reference/support.mdx
index 663ddaed953..3021ae77d27 100644
--- a/versioned_docs/version-v5/reference/support.md
+++ b/versioned_docs/version-v5/reference/support.mdx
@@ -6,7 +6,7 @@ The Ionic Framework has been 100% open source (MIT) since the very beginning, an
 
 ## Framework Maintenance and Support Status
 
-Given the reality of time and resource restraints as well as the desire to keep innovating in the frontend development space, over time it becomes necessary for the Ionic team to shift focus to newer versions of the Framework. However, Ionic will do everything it can to make the transition to newer versions as smooth as possible. The Ionic team recommends updating to the newest version of the Ionic Framework for the latest features, improvements and stability updates. For more details, consult [the Migration page](migration.md).
+Given the reality of time and resource restraints as well as the desire to keep innovating in the frontend development space, over time it becomes necessary for the Ionic team to shift focus to newer versions of the Framework. However, Ionic will do everything it can to make the transition to newer versions as smooth as possible. The Ionic team recommends updating to the newest version of the Ionic Framework for the latest features, improvements and stability updates. For more details, consult [the Migration page](migration.mdx).
 
 The current status of each Ionic Framework version is:
 
@@ -76,4 +76,4 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo
 |      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-v5/reference/versioning.md b/versioned_docs/version-v5/reference/versioning.mdx
similarity index 100%
rename from versioned_docs/version-v5/reference/versioning.md
rename to versioned_docs/version-v5/reference/versioning.mdx
diff --git a/versioned_docs/version-v5/techniques/security.md b/versioned_docs/version-v5/techniques/security.mdx
similarity index 100%
rename from versioned_docs/version-v5/techniques/security.md
rename to versioned_docs/version-v5/techniques/security.mdx
diff --git a/versioned_docs/version-v5/test/page1.md b/versioned_docs/version-v5/test/page1.md
deleted file mode 100644
index d965196cf5d..00000000000
--- a/versioned_docs/version-v5/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-v5/test/page1.mdx b/versioned_docs/version-v5/test/page1.mdx
new file mode 100644
index 00000000000..cd5b72410d0
--- /dev/null
+++ b/versioned_docs/version-v5/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-v5/test/page2.md b/versioned_docs/version-v5/test/page2.md
deleted file mode 100644
index 2d2d61adacf..00000000000
--- a/versioned_docs/version-v5/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-v5/test/page2.mdx b/versioned_docs/version-v5/test/page2.mdx
new file mode 100644
index 00000000000..5ebdef8dca0
--- /dev/null
+++ b/versioned_docs/version-v5/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-v5/theming/advanced.md b/versioned_docs/version-v5/theming/advanced.mdx
similarity index 94%
rename from versioned_docs/version-v5/theming/advanced.md
rename to versioned_docs/version-v5/theming/advanced.mdx
index dc0f3af3250..16c9460666b 100644
--- a/versioned_docs/version-v5/theming/advanced.md
+++ b/versioned_docs/version-v5/theming/advanced.mdx
@@ -23,8 +23,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) |
 
 ### Grid Variables
 
@@ -66,7 +66,7 @@ There is not yet full <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/
 ```
 
 :::note
-See the [CSS Variables](css-variables.md) section for more information on how to get and set CSS variables.
+See the [CSS Variables](css-variables.mdx) section for more information on how to get and set CSS variables.
 :::
 
 Ionic uses colors with an opacity (alpha) in several components. In order for this to work, those properties must be provided in RGB format. When changing any of the properties that have a variation ending in `-rgb`, it is important they are also provided in a comma separated format **without parentheses**. Below are some examples for changing text and background color.
@@ -136,6 +136,6 @@ 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-v5/theming/basics.md b/versioned_docs/version-v5/theming/basics.mdx
similarity index 90%
rename from versioned_docs/version-v5/theming/basics.md
rename to versioned_docs/version-v5/theming/basics.mdx
index bcd73d84b66..d15d710975a 100644
--- a/versioned_docs/version-v5/theming/basics.md
+++ b/versioned_docs/version-v5/theming/basics.mdx
@@ -14,7 +14,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, see [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, see [Colors](colors.mdx).
 
 <ColorAccordion />
 
@@ -22,16 +22,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 <strong>Adaptive Styling</strong>. 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, see [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, see [Platform Styles](platform-styles.mdx).
 
 ## CSS Variables
 
-The Ionic Framework components are themed using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank" rel="noopener noreferrer">CSS properties (variables)</a>. 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 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank" rel="noopener noreferrer">CSS properties (variables)</a>. 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 <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM" target="_blank" rel="noopener noreferrer">Shadow DOM</a> 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, see 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 <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM" target="_blank" rel="noopener noreferrer">Shadow DOM</a> 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, see 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, see [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, see [Themes](themes.mdx).
diff --git a/versioned_docs/version-v5/theming/color-generator.md b/versioned_docs/version-v5/theming/color-generator.mdx
similarity index 100%
rename from versioned_docs/version-v5/theming/color-generator.md
rename to versioned_docs/version-v5/theming/color-generator.mdx
diff --git a/versioned_docs/version-v5/theming/colors.md b/versioned_docs/version-v5/theming/colors.mdx
similarity index 88%
rename from versioned_docs/version-v5/theming/colors.md
rename to versioned_docs/version-v5/theming/colors.mdx
index dad9ab020bf..8c64c48dbdb 100644
--- a/versioned_docs/version-v5/theming/colors.md
+++ b/versioned_docs/version-v5/theming/colors.mdx
@@ -27,7 +27,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 <a href="https://developer.mozilla.org/en-US/docs/Glossary/RGB" target="_blank">rgb format</a>. See [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 see all 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 <a href="https://developer.mozilla.org/en-US/docs/Glossary/RGB" target="_blank">rgb format</a>. See [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 see all of the default colors Ionic provides and their variations.
 
 <LayeredColorsSelect />
 
@@ -49,10 +49,10 @@ To change the default values of a color, all of the listed variations for that c
 When `secondary` is applied to a button, not only is the base color <CodeColor color="#006600">#006600</CodeColor> used, but the contrast color <CodeColor color="#ffffff">#ffffff</CodeColor> is used for the text, along with shade <CodeColor color="#005a00">#005a00</CodeColor> and tint <CodeColor color="#1a751a">#1a751a</CodeColor> colors for the different states of the button.
 
 :::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!
 :::
 
-See the [CSS Variables documentation](css-variables.md) for more information on CSS variables.
+See the [CSS Variables documentation](css-variables.mdx) for more information on CSS variables.
 
 ## Adding Colors
 
@@ -99,7 +99,7 @@ div {
 }
 ```
 
-See the [CSS Variables documentation](css-variables.md) for more information on setting and using CSS variables.
+See 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-v5/theming/css-shadow-parts.md b/versioned_docs/version-v5/theming/css-shadow-parts.mdx
similarity index 93%
rename from versioned_docs/version-v5/theming/css-shadow-parts.md
rename to versioned_docs/version-v5/theming/css-shadow-parts.mdx
index 59afb185fa6..1dad4e4a7d3 100644
--- a/versioned_docs/version-v5/theming/css-shadow-parts.md
+++ b/versioned_docs/version-v5/theming/css-shadow-parts.mdx
@@ -7,7 +7,7 @@ CSS Shadow Parts allow developers to style CSS properties on an element inside o
 Ionic Framework is a distributed set of <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank" rel="noopener noreferrer">Web Components</a>. Web Components follow the <a href="https://w3c.github.io/webcomponents/spec/shadow/" target="_blank" rel="noopener noreferrer">Shadow DOM specification</a> in order to encapsulate styles and markup.
 
 :::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).
 :::
 
 Shadow DOM is useful for preventing styles from leaking out of components and unintentionally applying to other elements. For example, we assign a `.button` class to our `ion-button` component. Without Shadow DOM encapsulation, if a user were to set the class `.button` on one of their own elements, it would inherit the Ionic Framework button styles. Since `ion-button` is a Shadow component, this is not a problem.
@@ -51,7 +51,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`. See the [select documentation](../api/select.md#css-shadow-parts) for all of its parts.
+The above shows two parts: `placeholder` and `icon`. See 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).
 
@@ -93,11 +93,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, see 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, see 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.
 
@@ -109,7 +109,7 @@ We welcome recommendations for additional parts. Please create a <a href="https:
 
 ### 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 <a href="https://caniuse.com/#feat=mdn-css_selectors_part" target="_blank" rel="noopener noreferrer">browser support</a> 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 <a href="https://caniuse.com/#feat=mdn-css_selectors_part" target="_blank" rel="noopener noreferrer">browser support</a> 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-v5/theming/css-variables.md b/versioned_docs/version-v5/theming/css-variables.mdx
similarity index 94%
rename from versioned_docs/version-v5/theming/css-variables.md
rename to versioned_docs/version-v5/theming/css-variables.mdx
index b0647ef5600..5134fab270b 100644
--- a/versioned_docs/version-v5/theming/css-variables.md
+++ b/versioned_docs/version-v5/theming/css-variables.mdx
@@ -87,8 +87,8 @@ const color = el.style.getPropertyValue('--charcoal');
 
 ### 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, see 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, see 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, see [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, see [Colors](colors.mdx), [Themes](themes.mdx) and [Advanced Theming](advanced.mdx).
diff --git a/versioned_docs/version-v5/theming/dark-mode.md b/versioned_docs/version-v5/theming/dark-mode.mdx
similarity index 98%
rename from versioned_docs/version-v5/theming/dark-mode.md
rename to versioned_docs/version-v5/theming/dark-mode.mdx
index d25629ad020..e57874f8b45 100644
--- a/versioned_docs/version-v5/theming/dark-mode.md
+++ b/versioned_docs/version-v5/theming/dark-mode.mdx
@@ -138,21 +138,21 @@ color-scheme: light dark;
 For more information regarding `color-scheme` please see https://web.dev/color-scheme/.
 
 :::note
-`color-scheme` does not apply to the keyboard. For details on how dark mode works with the keyboard, see [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, see [Keyboard Documentation](../developing/keyboard.mdx#dark-mode).
 :::
 
 ## Ionic Dark Theme
 
 Ionic has a recommended theme for variables to use in order to get a dark mode based on the device running the app. It can be broken down into the following parts:
 
-1. Changing the default [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement the dark background in the `body.dark` selector.
+1. Changing the default [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement the dark background in the `body.dark` selector.
 1. Setting variables for the dark theme on `ios` devices.
 1. Setting variables for the dark theme on `md` devices.
 
 The following code can be copied and pasted into an app to get Ionic's dark theme. We add the `dark` class to the document body using JavaScript as mentioned in the [combining with JavaScript](#combining-with-javascript) section. The dark mode will not be enabled until the `dark` class is added to the document body.
 
 :::note
-For more information on the variables that are being changed, including other variables that can be added to further customize, see [Themes](themes.md).
+For more information on the variables that are being changed, including other variables that can be added to further customize, see [Themes](themes.mdx).
 :::
 
 ```css
diff --git a/versioned_docs/version-v5/theming/platform-styles.md b/versioned_docs/version-v5/theming/platform-styles.mdx
similarity index 89%
rename from versioned_docs/version-v5/theming/platform-styles.md
rename to versioned_docs/version-v5/theming/platform-styles.mdx
index 5e5a38d1303..63e04926be8 100644
--- a/versioned_docs/version-v5/theming/platform-styles.md
+++ b/versioned_docs/version-v5/theming/platform-styles.mdx
@@ -10,7 +10,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](../angular/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](../angular/config.mdx). The following chart displays the default **mode** that is added to each **platform**:
 
 | Platform  | Mode  | Description                                                                                                                      |
 | --------- | ----- | -------------------------------------------------------------------------------------------------------------------------------- |
@@ -24,7 +24,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](../angular/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](../angular/config.mdx) of an app._
 
 ## Overriding Mode Styles
 
@@ -44,4 +44,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-v5/theming/themes.md b/versioned_docs/version-v5/theming/themes.mdx
similarity index 97%
rename from versioned_docs/version-v5/theming/themes.md
rename to versioned_docs/version-v5/theming/themes.mdx
index 22879ad1b64..e7eb72c3479 100644
--- a/versioned_docs/version-v5/theming/themes.md
+++ b/versioned_docs/version-v5/theming/themes.mdx
@@ -15,7 +15,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 themes 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 <a href="https://developer.mozilla.org/en-US/docs/Glossary/RGB" target="_blank">rgb format</a>. See [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 <a href="https://developer.mozilla.org/en-US/docs/Glossary/RGB" target="_blank">rgb format</a>. See [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-v5/troubleshooting/build.md b/versioned_docs/version-v5/troubleshooting/build.mdx
similarity index 100%
rename from versioned_docs/version-v5/troubleshooting/build.md
rename to versioned_docs/version-v5/troubleshooting/build.mdx
diff --git a/versioned_docs/version-v5/troubleshooting/cors.md b/versioned_docs/version-v5/troubleshooting/cors.mdx
similarity index 98%
rename from versioned_docs/version-v5/troubleshooting/cors.md
rename to versioned_docs/version-v5/troubleshooting/cors.mdx
index 26b208f1086..8cb6a321315 100644
--- a/versioned_docs/version-v5/troubleshooting/cors.md
+++ b/versioned_docs/version-v5/troubleshooting/cors.mdx
@@ -229,7 +229,7 @@ If you are trying to connect to a 3rd-party API, first check in its documentatio
 
 #### 1. Native-only apps (iOS/Android)
 
-Use the [HTTP plugin from Ionic Native](../native/http.md) to make the requests natively from outside the webview. Please note that this plugin doesn't work in the browser, so the development and testing of the app must always be done in a device or simulator going forward.
+Use the [HTTP plugin from Ionic Native](../native/http.mdx) to make the requests natively from outside the webview. Please note that this plugin doesn't work in the browser, so the development and testing of the app must always be done in a device or simulator going forward.
 
 ##### Usage in Ionic Angular 4
 
diff --git a/versioned_docs/version-v5/troubleshooting/debugging.md b/versioned_docs/version-v5/troubleshooting/debugging.mdx
similarity index 99%
rename from versioned_docs/version-v5/troubleshooting/debugging.md
rename to versioned_docs/version-v5/troubleshooting/debugging.mdx
index 56c1c98ad14..1b1ed0d7a68 100644
--- a/versioned_docs/version-v5/troubleshooting/debugging.md
+++ b/versioned_docs/version-v5/troubleshooting/debugging.mdx
@@ -11,7 +11,7 @@
 
 ## 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 here](../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 here](../cli/livereload.mdx).
 
 ## iOS and Safari
 
diff --git a/versioned_docs/version-v5/troubleshooting/native.md b/versioned_docs/version-v5/troubleshooting/native.mdx
similarity index 97%
rename from versioned_docs/version-v5/troubleshooting/native.md
rename to versioned_docs/version-v5/troubleshooting/native.mdx
index 7e418bb6e9d..fc8328c837f 100644
--- a/versioned_docs/version-v5/troubleshooting/native.md
+++ b/versioned_docs/version-v5/troubleshooting/native.mdx
@@ -8,7 +8,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. <strong>Set the [Package ID](../reference/glossary.md#package-id).</strong>
+1. <strong>Set the [Package ID](../reference/glossary.mdx#package-id).</strong>
 
    For Capacitor, open the `capacitor.config.json` file and modify the `appId` property.
 
@@ -43,7 +43,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-v5/troubleshooting/runtime.md b/versioned_docs/version-v5/troubleshooting/runtime.mdx
similarity index 100%
rename from versioned_docs/version-v5/troubleshooting/runtime.md
rename to versioned_docs/version-v5/troubleshooting/runtime.mdx
diff --git a/versioned_docs/version-v5/utilities/animations.md b/versioned_docs/version-v5/utilities/animations.mdx
similarity index 99%
rename from versioned_docs/version-v5/utilities/animations.md
rename to versioned_docs/version-v5/utilities/animations.mdx
index e1fe5b310cd..4f48176ce33 100644
--- a/versioned_docs/version-v5/utilities/animations.md
+++ b/versioned_docs/version-v5/utilities/animations.mdx
@@ -844,7 +844,7 @@ await squareC.play();
 
 ## 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).
 
 ### Usage
 
diff --git a/versioned_docs/version-v5/utilities/gestures.md b/versioned_docs/version-v5/utilities/gestures.mdx
similarity index 99%
rename from versioned_docs/version-v5/utilities/gestures.md
rename to versioned_docs/version-v5/utilities/gestures.mdx
index 80c96f088e1..62fbd99c9dd 100644
--- a/versioned_docs/version-v5/utilities/gestures.md
+++ b/versioned_docs/version-v5/utilities/gestures.mdx
@@ -437,7 +437,7 @@ In the example above, 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-v5/vue/config.md b/versioned_docs/version-v5/vue/config.mdx
similarity index 99%
rename from versioned_docs/version-v5/vue/config.md
rename to versioned_docs/version-v5/vue/config.mdx
index 410c3bcf8b9..76b4250a1a0 100644
--- a/versioned_docs/version-v5/vue/config.md
+++ b/versioned_docs/version-v5/vue/config.mdx
@@ -20,7 +20,7 @@ In the above example, we are disabling the Material Design ripple effect across
 Ionic Config can also be set on a per-platform basis. For example, this allows you to disable animations if the app is being run in a browser on a potentially slower device. Developers can take advantage of the Platform utilities to accomplish this.
 
 In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser.
-The `isPlatform()` call returns `true` or `false` based upon the platform that is passed in. See the [Platform Documentation](platform.md#platforms) for a list of possible values.
+The `isPlatform()` call returns `true` or `false` based upon the platform that is passed in. See the [Platform Documentation](platform.mdx#platforms) for a list of possible values.
 
 ```tsx
 import { IonicVue, isPlatform } from '@ionic/vue';
diff --git a/versioned_docs/version-v5/vue/lifecycle.md b/versioned_docs/version-v5/vue/lifecycle.mdx
similarity index 100%
rename from versioned_docs/version-v5/vue/lifecycle.md
rename to versioned_docs/version-v5/vue/lifecycle.mdx
diff --git a/versioned_docs/version-v5/vue/navigation.md b/versioned_docs/version-v5/vue/navigation.mdx
similarity index 100%
rename from versioned_docs/version-v5/vue/navigation.md
rename to versioned_docs/version-v5/vue/navigation.mdx
diff --git a/versioned_docs/version-v5/vue/overview.md b/versioned_docs/version-v5/vue/overview.mdx
similarity index 95%
rename from versioned_docs/version-v5/vue/overview.md
rename to versioned_docs/version-v5/vue/overview.mdx
index 3f76716b824..81f3727d603 100644
--- a/versioned_docs/version-v5/vue/overview.md
+++ b/versioned_docs/version-v5/vue/overview.mdx
@@ -21,7 +21,7 @@ Ionic Vue projects ship with the same tooling as regular Vue CLI projects. Meani
 
 [Capacitor](https://capacitorjs.com) is the official cross-platform app runtime used to make your `Ionic Vue` web app run natively on iOS, Android, and the web.
 
-While there are no known technical limitations to using `Ionic Vue` with [Cordova](https://cordova.apache.org/) plugins, Capacitor is officially recommended. There are no plans to support a Cordova integration for `Ionic Vue` in the [Ionic CLI tooling](../cli.md) at this time. For more details, please [see here](https://capacitorjs.com/docs/cordova).
+While there are no known technical limitations to using `Ionic Vue` with [Cordova](https://cordova.apache.org/) plugins, Capacitor is officially recommended. There are no plans to support a Cordova integration for `Ionic Vue` in the [Ionic CLI tooling](../cli.mdx) at this time. For more details, please [see here](https://capacitorjs.com/docs/cordova).
 
 ## From the Community
 
diff --git a/versioned_docs/version-v5/vue/performance.md b/versioned_docs/version-v5/vue/performance.mdx
similarity index 100%
rename from versioned_docs/version-v5/vue/performance.md
rename to versioned_docs/version-v5/vue/performance.mdx
diff --git a/versioned_docs/version-v5/vue/platform.md b/versioned_docs/version-v5/vue/platform.mdx
similarity index 100%
rename from versioned_docs/version-v5/vue/platform.md
rename to versioned_docs/version-v5/vue/platform.mdx
diff --git a/versioned_docs/version-v5/vue/pwa.md b/versioned_docs/version-v5/vue/pwa.mdx
similarity index 100%
rename from versioned_docs/version-v5/vue/pwa.md
rename to versioned_docs/version-v5/vue/pwa.mdx
diff --git a/versioned_docs/version-v5/vue/quickstart.md b/versioned_docs/version-v5/vue/quickstart.mdx
similarity index 99%
rename from versioned_docs/version-v5/vue/quickstart.md
rename to versioned_docs/version-v5/vue/quickstart.mdx
index d67b4a2282f..aa5efc9d5c6 100644
--- a/versioned_docs/version-v5/vue/quickstart.md
+++ b/versioned_docs/version-v5/vue/quickstart.mdx
@@ -496,7 +496,7 @@ Let's fill the `NewItem.vue` file with some placeholder content for the moment.
 ```
 
 :::note
-Each view must contain an `IonPage` component. Page transitions will not work correctly without it. See the [IonPage Documentation](navigation.md#ionpage) for more information.
+Each view must contain an `IonPage` component. Page transitions will not work correctly without it. See the [IonPage Documentation](navigation.mdx#ionpage) for more information.
 :::
 
 The content here should look similar to the `Home` component. What is different here is the `IonBackButton` component. This is used to navigate back to the previous route. Seems easy enough, right? Ok, but what if we reload the page?
@@ -842,7 +842,7 @@ Next, check out [all the APIs](https://capacitorjs.com/docs/apis) that are avail
 
 ## Where to go from here
 
-This guide covered the basics of creating an Ionic Vue app, adding some basic navigation, and introducing Capacitor as a way of building native apps. To dive deeper into building complete Ionic Framework apps with Vue and Capacitor, follow our [First App guide](your-first-app.md).
+This guide covered the basics of creating an Ionic Vue app, adding some basic navigation, and introducing Capacitor as a way of building native apps. To dive deeper into building complete Ionic Framework apps with Vue and Capacitor, follow our [First App guide](your-first-app.mdx).
 
 For a more detailed look at Ionic Frameworks’s components, check out the [component API pages](https://ionicframework.com/docs/components). For more details on Vue, review the [Vue Docs](https://v3.vuejs.org/). To keep building native features, see the [Capacitor docs](https://capacitorjs.com/docs/).
 
diff --git a/versioned_docs/version-v5/vue/storage.md b/versioned_docs/version-v5/vue/storage.mdx
similarity index 100%
rename from versioned_docs/version-v5/vue/storage.md
rename to versioned_docs/version-v5/vue/storage.mdx
diff --git a/versioned_docs/version-v5/vue/testing.md b/versioned_docs/version-v5/vue/testing.mdx
similarity index 100%
rename from versioned_docs/version-v5/vue/testing.md
rename to versioned_docs/version-v5/vue/testing.mdx
diff --git a/versioned_docs/version-v5/vue/troubleshooting.md b/versioned_docs/version-v5/vue/troubleshooting.mdx
similarity index 90%
rename from versioned_docs/version-v5/vue/troubleshooting.md
rename to versioned_docs/version-v5/vue/troubleshooting.mdx
index d48b1843a1b..7ea1856c16e 100644
--- a/versioned_docs/version-v5/vue/troubleshooting.md
+++ b/versioned_docs/version-v5/vue/troubleshooting.mdx
@@ -31,7 +31,7 @@ To resolve this issue, you need to import the component from `@ionic/vue` and pr
 </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
 
@@ -69,7 +69,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.
 
-See the [Quickstart Guide](quickstart.md#calling-methods-on-components) for more information.
+See the [Quickstart Guide](quickstart.mdx#calling-methods-on-components) for more information.
 
 ## Page transitions are not working
 
@@ -103,4 +103,4 @@ In order for page transitions to work correctly, each page must have an `ion-pag
 </script>
 ```
 
-See the [IonPage documentation](navigation.md#ionpage) for more information.
+See the [IonPage documentation](navigation.mdx#ionpage) for more information.
diff --git a/versioned_docs/version-v5/vue/your-first-app.md b/versioned_docs/version-v5/vue/your-first-app.mdx
similarity index 99%
rename from versioned_docs/version-v5/vue/your-first-app.md
rename to versioned_docs/version-v5/vue/your-first-app.mdx
index f952a9a1e46..e6f92eeca54 100644
--- a/versioned_docs/version-v5/vue/your-first-app.md
+++ b/versioned_docs/version-v5/vue/your-first-app.mdx
@@ -55,7 +55,7 @@ npm install -g @ionic/cli@latest native-run cordova-res
 :::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. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information.
 :::
 
 ## Create an App
diff --git a/versioned_docs/version-v5/vue/your-first-app/2-taking-photos.md b/versioned_docs/version-v5/vue/your-first-app/2-taking-photos.mdx
similarity index 100%
rename from versioned_docs/version-v5/vue/your-first-app/2-taking-photos.md
rename to versioned_docs/version-v5/vue/your-first-app/2-taking-photos.mdx
diff --git a/versioned_docs/version-v5/vue/your-first-app/3-saving-photos.md b/versioned_docs/version-v5/vue/your-first-app/3-saving-photos.mdx
similarity index 100%
rename from versioned_docs/version-v5/vue/your-first-app/3-saving-photos.md
rename to versioned_docs/version-v5/vue/your-first-app/3-saving-photos.mdx
diff --git a/versioned_docs/version-v5/vue/your-first-app/4-loading-photos.md b/versioned_docs/version-v5/vue/your-first-app/4-loading-photos.mdx
similarity index 100%
rename from versioned_docs/version-v5/vue/your-first-app/4-loading-photos.md
rename to versioned_docs/version-v5/vue/your-first-app/4-loading-photos.mdx
diff --git a/versioned_docs/version-v5/vue/your-first-app/5-adding-mobile.md b/versioned_docs/version-v5/vue/your-first-app/5-adding-mobile.mdx
similarity index 100%
rename from versioned_docs/version-v5/vue/your-first-app/5-adding-mobile.md
rename to versioned_docs/version-v5/vue/your-first-app/5-adding-mobile.mdx
diff --git a/versioned_docs/version-v5/vue/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v5/vue/your-first-app/6-deploying-mobile.mdx
similarity index 100%
rename from versioned_docs/version-v5/vue/your-first-app/6-deploying-mobile.md
rename to versioned_docs/version-v5/vue/your-first-app/6-deploying-mobile.mdx
diff --git a/versioned_docs/version-v5/vue/your-first-app/7-live-reload.md b/versioned_docs/version-v5/vue/your-first-app/7-live-reload.mdx
similarity index 100%
rename from versioned_docs/version-v5/vue/your-first-app/7-live-reload.md
rename to versioned_docs/version-v5/vue/your-first-app/7-live-reload.mdx