diff --git a/static/usage/v7/accordion/accessibility/animations/index.md b/static/usage/v7/accordion/accessibility/animations/index.mdx
similarity index 100%
rename from static/usage/v7/accordion/accessibility/animations/index.md
rename to static/usage/v7/accordion/accessibility/animations/index.mdx
diff --git a/static/usage/v7/accordion/basic/index.md b/static/usage/v7/accordion/basic/index.mdx
similarity index 100%
rename from static/usage/v7/accordion/basic/index.md
rename to static/usage/v7/accordion/basic/index.mdx
diff --git a/static/usage/v7/accordion/customization/advanced-expansion-styles/index.md b/static/usage/v7/accordion/customization/advanced-expansion-styles/index.mdx
similarity index 100%
rename from static/usage/v7/accordion/customization/advanced-expansion-styles/index.md
rename to static/usage/v7/accordion/customization/advanced-expansion-styles/index.mdx
diff --git a/static/usage/v7/accordion/customization/expansion-styles/index.md b/static/usage/v7/accordion/customization/expansion-styles/index.mdx
similarity index 100%
rename from static/usage/v7/accordion/customization/expansion-styles/index.md
rename to static/usage/v7/accordion/customization/expansion-styles/index.mdx
diff --git a/static/usage/v7/accordion/customization/icons/index.md b/static/usage/v7/accordion/customization/icons/index.mdx
similarity index 100%
rename from static/usage/v7/accordion/customization/icons/index.md
rename to static/usage/v7/accordion/customization/icons/index.mdx
diff --git a/static/usage/v7/accordion/customization/theming/index.md b/static/usage/v7/accordion/customization/theming/index.mdx
similarity index 100%
rename from static/usage/v7/accordion/customization/theming/index.md
rename to static/usage/v7/accordion/customization/theming/index.mdx
diff --git a/static/usage/v7/accordion/disable/group/index.md b/static/usage/v7/accordion/disable/group/index.mdx
similarity index 100%
rename from static/usage/v7/accordion/disable/group/index.md
rename to static/usage/v7/accordion/disable/group/index.mdx
diff --git a/static/usage/v7/accordion/disable/individual/index.md b/static/usage/v7/accordion/disable/individual/index.mdx
similarity index 100%
rename from static/usage/v7/accordion/disable/individual/index.md
rename to static/usage/v7/accordion/disable/individual/index.mdx
diff --git a/static/usage/v7/accordion/listen-changes/index.md b/static/usage/v7/accordion/listen-changes/index.mdx
similarity index 100%
rename from static/usage/v7/accordion/listen-changes/index.md
rename to static/usage/v7/accordion/listen-changes/index.mdx
diff --git a/static/usage/v7/accordion/multiple/index.md b/static/usage/v7/accordion/multiple/index.mdx
similarity index 100%
rename from static/usage/v7/accordion/multiple/index.md
rename to static/usage/v7/accordion/multiple/index.mdx
diff --git a/static/usage/v7/accordion/readonly/group/index.md b/static/usage/v7/accordion/readonly/group/index.mdx
similarity index 100%
rename from static/usage/v7/accordion/readonly/group/index.md
rename to static/usage/v7/accordion/readonly/group/index.mdx
diff --git a/static/usage/v7/accordion/readonly/individual/index.md b/static/usage/v7/accordion/readonly/individual/index.mdx
similarity index 100%
rename from static/usage/v7/accordion/readonly/individual/index.md
rename to static/usage/v7/accordion/readonly/individual/index.mdx
diff --git a/static/usage/v7/accordion/toggle/index.md b/static/usage/v7/accordion/toggle/index.mdx
similarity index 100%
rename from static/usage/v7/accordion/toggle/index.md
rename to static/usage/v7/accordion/toggle/index.mdx
diff --git a/static/usage/v7/action-sheet/controller/index.md b/static/usage/v7/action-sheet/controller/index.mdx
similarity index 100%
rename from static/usage/v7/action-sheet/controller/index.md
rename to static/usage/v7/action-sheet/controller/index.mdx
diff --git a/static/usage/v7/action-sheet/inline/isOpen/index.md b/static/usage/v7/action-sheet/inline/isOpen/index.mdx
similarity index 100%
rename from static/usage/v7/action-sheet/inline/isOpen/index.md
rename to static/usage/v7/action-sheet/inline/isOpen/index.mdx
diff --git a/static/usage/v7/action-sheet/inline/trigger/index.md b/static/usage/v7/action-sheet/inline/trigger/index.mdx
similarity index 100%
rename from static/usage/v7/action-sheet/inline/trigger/index.md
rename to static/usage/v7/action-sheet/inline/trigger/index.mdx
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/index.md b/static/usage/v7/action-sheet/role-info-on-dismiss/index.mdx
similarity index 100%
rename from static/usage/v7/action-sheet/role-info-on-dismiss/index.md
rename to static/usage/v7/action-sheet/role-info-on-dismiss/index.mdx
diff --git a/static/usage/v7/action-sheet/theming/css-properties/index.md b/static/usage/v7/action-sheet/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/action-sheet/theming/css-properties/index.md
rename to static/usage/v7/action-sheet/theming/css-properties/index.mdx
diff --git a/static/usage/v7/action-sheet/theming/styling/index.md b/static/usage/v7/action-sheet/theming/styling/index.mdx
similarity index 100%
rename from static/usage/v7/action-sheet/theming/styling/index.md
rename to static/usage/v7/action-sheet/theming/styling/index.mdx
diff --git a/static/usage/v7/alert/buttons/index.md b/static/usage/v7/alert/buttons/index.mdx
similarity index 100%
rename from static/usage/v7/alert/buttons/index.md
rename to static/usage/v7/alert/buttons/index.mdx
diff --git a/static/usage/v7/alert/customization/index.md b/static/usage/v7/alert/customization/index.mdx
similarity index 100%
rename from static/usage/v7/alert/customization/index.md
rename to static/usage/v7/alert/customization/index.mdx
diff --git a/static/usage/v7/alert/inputs/radios/index.md b/static/usage/v7/alert/inputs/radios/index.mdx
similarity index 100%
rename from static/usage/v7/alert/inputs/radios/index.md
rename to static/usage/v7/alert/inputs/radios/index.mdx
diff --git a/static/usage/v7/alert/inputs/text-inputs/index.md b/static/usage/v7/alert/inputs/text-inputs/index.mdx
similarity index 100%
rename from static/usage/v7/alert/inputs/text-inputs/index.md
rename to static/usage/v7/alert/inputs/text-inputs/index.mdx
diff --git a/static/usage/v7/alert/presenting/controller/index.md b/static/usage/v7/alert/presenting/controller/index.mdx
similarity index 100%
rename from static/usage/v7/alert/presenting/controller/index.md
rename to static/usage/v7/alert/presenting/controller/index.mdx
diff --git a/static/usage/v7/alert/presenting/isOpen/index.md b/static/usage/v7/alert/presenting/isOpen/index.mdx
similarity index 100%
rename from static/usage/v7/alert/presenting/isOpen/index.md
rename to static/usage/v7/alert/presenting/isOpen/index.mdx
diff --git a/static/usage/v7/alert/presenting/trigger/index.md b/static/usage/v7/alert/presenting/trigger/index.mdx
similarity index 100%
rename from static/usage/v7/alert/presenting/trigger/index.md
rename to static/usage/v7/alert/presenting/trigger/index.mdx
diff --git a/static/usage/v7/animations/basic/index.md b/static/usage/v7/animations/basic/index.mdx
similarity index 100%
rename from static/usage/v7/animations/basic/index.md
rename to static/usage/v7/animations/basic/index.mdx
diff --git a/static/usage/v7/animations/before-and-after-hooks/index.md b/static/usage/v7/animations/before-and-after-hooks/index.mdx
similarity index 100%
rename from static/usage/v7/animations/before-and-after-hooks/index.md
rename to static/usage/v7/animations/before-and-after-hooks/index.mdx
diff --git a/static/usage/v7/animations/chain/index.md b/static/usage/v7/animations/chain/index.mdx
similarity index 100%
rename from static/usage/v7/animations/chain/index.md
rename to static/usage/v7/animations/chain/index.mdx
diff --git a/static/usage/v7/animations/gesture/index.md b/static/usage/v7/animations/gesture/index.mdx
similarity index 100%
rename from static/usage/v7/animations/gesture/index.md
rename to static/usage/v7/animations/gesture/index.mdx
diff --git a/static/usage/v7/animations/group/index.md b/static/usage/v7/animations/group/index.mdx
similarity index 100%
rename from static/usage/v7/animations/group/index.md
rename to static/usage/v7/animations/group/index.mdx
diff --git a/static/usage/v7/animations/keyframes/index.md b/static/usage/v7/animations/keyframes/index.mdx
similarity index 100%
rename from static/usage/v7/animations/keyframes/index.md
rename to static/usage/v7/animations/keyframes/index.mdx
diff --git a/static/usage/v7/animations/modal-override/index.md b/static/usage/v7/animations/modal-override/index.mdx
similarity index 100%
rename from static/usage/v7/animations/modal-override/index.md
rename to static/usage/v7/animations/modal-override/index.mdx
diff --git a/static/usage/v7/animations/preference-based/index.md b/static/usage/v7/animations/preference-based/index.mdx
similarity index 100%
rename from static/usage/v7/animations/preference-based/index.md
rename to static/usage/v7/animations/preference-based/index.mdx
diff --git a/static/usage/v7/avatar/basic/index.md b/static/usage/v7/avatar/basic/index.mdx
similarity index 100%
rename from static/usage/v7/avatar/basic/index.md
rename to static/usage/v7/avatar/basic/index.mdx
diff --git a/static/usage/v7/avatar/chip/index.md b/static/usage/v7/avatar/chip/index.mdx
similarity index 100%
rename from static/usage/v7/avatar/chip/index.md
rename to static/usage/v7/avatar/chip/index.mdx
diff --git a/static/usage/v7/avatar/item/index.md b/static/usage/v7/avatar/item/index.mdx
similarity index 100%
rename from static/usage/v7/avatar/item/index.md
rename to static/usage/v7/avatar/item/index.mdx
diff --git a/static/usage/v7/avatar/theming/css-properties/index.md b/static/usage/v7/avatar/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/avatar/theming/css-properties/index.md
rename to static/usage/v7/avatar/theming/css-properties/index.mdx
diff --git a/static/usage/v7/back-button/basic/index.md b/static/usage/v7/back-button/basic/index.mdx
similarity index 100%
rename from static/usage/v7/back-button/basic/index.md
rename to static/usage/v7/back-button/basic/index.mdx
diff --git a/static/usage/v7/back-button/custom/index.md b/static/usage/v7/back-button/custom/index.mdx
similarity index 100%
rename from static/usage/v7/back-button/custom/index.md
rename to static/usage/v7/back-button/custom/index.mdx
diff --git a/static/usage/v7/backdrop/basic/index.md b/static/usage/v7/backdrop/basic/index.mdx
similarity index 100%
rename from static/usage/v7/backdrop/basic/index.md
rename to static/usage/v7/backdrop/basic/index.mdx
diff --git a/static/usage/v7/backdrop/styling/index.md b/static/usage/v7/backdrop/styling/index.mdx
similarity index 100%
rename from static/usage/v7/backdrop/styling/index.md
rename to static/usage/v7/backdrop/styling/index.mdx
diff --git a/static/usage/v7/badge/basic/index.md b/static/usage/v7/badge/basic/index.mdx
similarity index 100%
rename from static/usage/v7/badge/basic/index.md
rename to static/usage/v7/badge/basic/index.mdx
diff --git a/static/usage/v7/badge/theming/colors/index.md b/static/usage/v7/badge/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v7/badge/theming/colors/index.md
rename to static/usage/v7/badge/theming/colors/index.mdx
diff --git a/static/usage/v7/badge/theming/css-properties/index.md b/static/usage/v7/badge/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/badge/theming/css-properties/index.md
rename to static/usage/v7/badge/theming/css-properties/index.mdx
diff --git a/static/usage/v7/breadcrumbs/basic/index.md b/static/usage/v7/breadcrumbs/basic/index.mdx
similarity index 100%
rename from static/usage/v7/breadcrumbs/basic/index.md
rename to static/usage/v7/breadcrumbs/basic/index.mdx
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.md b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.mdx
similarity index 100%
rename from static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.md
rename to static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.mdx
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.mdx
similarity index 100%
rename from static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md
rename to static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.mdx
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md b/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.mdx
similarity index 100%
rename from static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md
rename to static/usage/v7/breadcrumbs/collapsing-items/max-items/index.mdx
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.mdx
similarity index 100%
rename from static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.md
rename to static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.mdx
diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/index.md b/static/usage/v7/breadcrumbs/icons/custom-separators/index.mdx
similarity index 100%
rename from static/usage/v7/breadcrumbs/icons/custom-separators/index.md
rename to static/usage/v7/breadcrumbs/icons/custom-separators/index.mdx
diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md b/static/usage/v7/breadcrumbs/icons/icons-on-items/index.mdx
similarity index 100%
rename from static/usage/v7/breadcrumbs/icons/icons-on-items/index.md
rename to static/usage/v7/breadcrumbs/icons/icons-on-items/index.mdx
diff --git a/static/usage/v7/breadcrumbs/theming/colors/index.md b/static/usage/v7/breadcrumbs/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v7/breadcrumbs/theming/colors/index.md
rename to static/usage/v7/breadcrumbs/theming/colors/index.mdx
diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/index.md b/static/usage/v7/breadcrumbs/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/breadcrumbs/theming/css-properties/index.md
rename to static/usage/v7/breadcrumbs/theming/css-properties/index.mdx
diff --git a/static/usage/v7/button/basic/index.md b/static/usage/v7/button/basic/index.mdx
similarity index 100%
rename from static/usage/v7/button/basic/index.md
rename to static/usage/v7/button/basic/index.mdx
diff --git a/static/usage/v7/button/expand/index.md b/static/usage/v7/button/expand/index.mdx
similarity index 100%
rename from static/usage/v7/button/expand/index.md
rename to static/usage/v7/button/expand/index.mdx
diff --git a/static/usage/v7/button/fill/index.md b/static/usage/v7/button/fill/index.mdx
similarity index 100%
rename from static/usage/v7/button/fill/index.md
rename to static/usage/v7/button/fill/index.mdx
diff --git a/static/usage/v7/button/icons/index.md b/static/usage/v7/button/icons/index.mdx
similarity index 100%
rename from static/usage/v7/button/icons/index.md
rename to static/usage/v7/button/icons/index.mdx
diff --git a/static/usage/v7/button/shape/index.md b/static/usage/v7/button/shape/index.mdx
similarity index 100%
rename from static/usage/v7/button/shape/index.md
rename to static/usage/v7/button/shape/index.mdx
diff --git a/static/usage/v7/button/size/index.md b/static/usage/v7/button/size/index.mdx
similarity index 100%
rename from static/usage/v7/button/size/index.md
rename to static/usage/v7/button/size/index.mdx
diff --git a/static/usage/v7/button/text-wrapping/index.md b/static/usage/v7/button/text-wrapping/index.mdx
similarity index 100%
rename from static/usage/v7/button/text-wrapping/index.md
rename to static/usage/v7/button/text-wrapping/index.mdx
diff --git a/static/usage/v7/button/theming/colors/index.md b/static/usage/v7/button/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v7/button/theming/colors/index.md
rename to static/usage/v7/button/theming/colors/index.mdx
diff --git a/static/usage/v7/button/theming/css-properties/index.md b/static/usage/v7/button/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/button/theming/css-properties/index.md
rename to static/usage/v7/button/theming/css-properties/index.mdx
diff --git a/static/usage/v7/buttons/basic/index.md b/static/usage/v7/buttons/basic/index.mdx
similarity index 100%
rename from static/usage/v7/buttons/basic/index.md
rename to static/usage/v7/buttons/basic/index.mdx
diff --git a/static/usage/v7/buttons/placement/index.md b/static/usage/v7/buttons/placement/index.mdx
similarity index 100%
rename from static/usage/v7/buttons/placement/index.md
rename to static/usage/v7/buttons/placement/index.mdx
diff --git a/static/usage/v7/buttons/types/index.md b/static/usage/v7/buttons/types/index.mdx
similarity index 100%
rename from static/usage/v7/buttons/types/index.md
rename to static/usage/v7/buttons/types/index.mdx
diff --git a/static/usage/v7/card/basic/index.md b/static/usage/v7/card/basic/index.mdx
similarity index 100%
rename from static/usage/v7/card/basic/index.md
rename to static/usage/v7/card/basic/index.mdx
diff --git a/static/usage/v7/card/buttons/index.md b/static/usage/v7/card/buttons/index.mdx
similarity index 100%
rename from static/usage/v7/card/buttons/index.md
rename to static/usage/v7/card/buttons/index.mdx
diff --git a/static/usage/v7/card/list/index.md b/static/usage/v7/card/list/index.mdx
similarity index 100%
rename from static/usage/v7/card/list/index.md
rename to static/usage/v7/card/list/index.mdx
diff --git a/static/usage/v7/card/media/index.md b/static/usage/v7/card/media/index.mdx
similarity index 100%
rename from static/usage/v7/card/media/index.md
rename to static/usage/v7/card/media/index.mdx
diff --git a/static/usage/v7/card/theming/colors/index.md b/static/usage/v7/card/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v7/card/theming/colors/index.md
rename to static/usage/v7/card/theming/colors/index.mdx
diff --git a/static/usage/v7/card/theming/css-properties/index.md b/static/usage/v7/card/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/card/theming/css-properties/index.md
rename to static/usage/v7/card/theming/css-properties/index.mdx
diff --git a/static/usage/v7/checkbox/alignment/index.md b/static/usage/v7/checkbox/alignment/index.mdx
similarity index 100%
rename from static/usage/v7/checkbox/alignment/index.md
rename to static/usage/v7/checkbox/alignment/index.mdx
diff --git a/static/usage/v7/checkbox/basic/index.md b/static/usage/v7/checkbox/basic/index.mdx
similarity index 100%
rename from static/usage/v7/checkbox/basic/index.md
rename to static/usage/v7/checkbox/basic/index.mdx
diff --git a/static/usage/v7/checkbox/indeterminate/index.md b/static/usage/v7/checkbox/indeterminate/index.mdx
similarity index 100%
rename from static/usage/v7/checkbox/indeterminate/index.md
rename to static/usage/v7/checkbox/indeterminate/index.mdx
diff --git a/static/usage/v7/checkbox/justify/index.md b/static/usage/v7/checkbox/justify/index.mdx
similarity index 100%
rename from static/usage/v7/checkbox/justify/index.md
rename to static/usage/v7/checkbox/justify/index.mdx
diff --git a/static/usage/v7/checkbox/label-link/index.md b/static/usage/v7/checkbox/label-link/index.mdx
similarity index 100%
rename from static/usage/v7/checkbox/label-link/index.md
rename to static/usage/v7/checkbox/label-link/index.mdx
diff --git a/static/usage/v7/checkbox/label-placement/index.md b/static/usage/v7/checkbox/label-placement/index.mdx
similarity index 100%
rename from static/usage/v7/checkbox/label-placement/index.md
rename to static/usage/v7/checkbox/label-placement/index.mdx
diff --git a/static/usage/v7/checkbox/migration/index.md b/static/usage/v7/checkbox/migration/index.mdx
similarity index 100%
rename from static/usage/v7/checkbox/migration/index.md
rename to static/usage/v7/checkbox/migration/index.mdx
diff --git a/static/usage/v7/checkbox/theming/css-properties/index.md b/static/usage/v7/checkbox/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/checkbox/theming/css-properties/index.md
rename to static/usage/v7/checkbox/theming/css-properties/index.mdx
diff --git a/static/usage/v7/chip/basic/index.md b/static/usage/v7/chip/basic/index.mdx
similarity index 100%
rename from static/usage/v7/chip/basic/index.md
rename to static/usage/v7/chip/basic/index.mdx
diff --git a/static/usage/v7/chip/slots/index.md b/static/usage/v7/chip/slots/index.mdx
similarity index 100%
rename from static/usage/v7/chip/slots/index.md
rename to static/usage/v7/chip/slots/index.mdx
diff --git a/static/usage/v7/chip/theming/colors/index.md b/static/usage/v7/chip/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v7/chip/theming/colors/index.md
rename to static/usage/v7/chip/theming/colors/index.mdx
diff --git a/static/usage/v7/chip/theming/css-properties/index.md b/static/usage/v7/chip/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/chip/theming/css-properties/index.md
rename to static/usage/v7/chip/theming/css-properties/index.mdx
diff --git a/static/usage/v7/config/mode/index.md b/static/usage/v7/config/mode/index.mdx
similarity index 100%
rename from static/usage/v7/config/mode/index.md
rename to static/usage/v7/config/mode/index.mdx
diff --git a/static/usage/v7/content/basic/index.md b/static/usage/v7/content/basic/index.mdx
similarity index 100%
rename from static/usage/v7/content/basic/index.md
rename to static/usage/v7/content/basic/index.mdx
diff --git a/static/usage/v7/content/fixed/index.md b/static/usage/v7/content/fixed/index.mdx
similarity index 100%
rename from static/usage/v7/content/fixed/index.md
rename to static/usage/v7/content/fixed/index.mdx
diff --git a/static/usage/v7/content/fullscreen/index.md b/static/usage/v7/content/fullscreen/index.mdx
similarity index 100%
rename from static/usage/v7/content/fullscreen/index.md
rename to static/usage/v7/content/fullscreen/index.mdx
diff --git a/static/usage/v7/content/header-footer/index.md b/static/usage/v7/content/header-footer/index.mdx
similarity index 100%
rename from static/usage/v7/content/header-footer/index.md
rename to static/usage/v7/content/header-footer/index.mdx
diff --git a/static/usage/v7/content/scroll-events/index.md b/static/usage/v7/content/scroll-events/index.mdx
similarity index 100%
rename from static/usage/v7/content/scroll-events/index.md
rename to static/usage/v7/content/scroll-events/index.mdx
diff --git a/static/usage/v7/content/scroll-methods/index.md b/static/usage/v7/content/scroll-methods/index.mdx
similarity index 100%
rename from static/usage/v7/content/scroll-methods/index.md
rename to static/usage/v7/content/scroll-methods/index.mdx
diff --git a/static/usage/v7/content/theming/colors/index.md b/static/usage/v7/content/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v7/content/theming/colors/index.md
rename to static/usage/v7/content/theming/colors/index.mdx
diff --git a/static/usage/v7/content/theming/css-properties/index.md b/static/usage/v7/content/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/content/theming/css-properties/index.md
rename to static/usage/v7/content/theming/css-properties/index.mdx
diff --git a/static/usage/v7/content/theming/css-shadow-parts/index.md b/static/usage/v7/content/theming/css-shadow-parts/index.mdx
similarity index 100%
rename from static/usage/v7/content/theming/css-shadow-parts/index.md
rename to static/usage/v7/content/theming/css-shadow-parts/index.mdx
diff --git a/static/usage/v7/content/theming/safe-area/index.md b/static/usage/v7/content/theming/safe-area/index.mdx
similarity index 100%
rename from static/usage/v7/content/theming/safe-area/index.md
rename to static/usage/v7/content/theming/safe-area/index.mdx
diff --git a/static/usage/v7/datetime-button/basic/index.md b/static/usage/v7/datetime-button/basic/index.mdx
similarity index 100%
rename from static/usage/v7/datetime-button/basic/index.md
rename to static/usage/v7/datetime-button/basic/index.mdx
diff --git a/static/usage/v7/datetime-button/format-options/index.md b/static/usage/v7/datetime-button/format-options/index.mdx
similarity index 100%
rename from static/usage/v7/datetime-button/format-options/index.md
rename to static/usage/v7/datetime-button/format-options/index.mdx
diff --git a/static/usage/v7/datetime/basic/index.md b/static/usage/v7/datetime/basic/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/basic/index.md
rename to static/usage/v7/datetime/basic/index.mdx
diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/index.md b/static/usage/v7/datetime/buttons/customizing-button-texts/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/buttons/customizing-button-texts/index.md
rename to static/usage/v7/datetime/buttons/customizing-button-texts/index.mdx
diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/index.md b/static/usage/v7/datetime/buttons/customizing-buttons/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/buttons/customizing-buttons/index.md
rename to static/usage/v7/datetime/buttons/customizing-buttons/index.mdx
diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.md b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.md
rename to static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.mdx
diff --git a/static/usage/v7/datetime/date-constraints/advanced/index.md b/static/usage/v7/datetime/date-constraints/advanced/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/date-constraints/advanced/index.md
rename to static/usage/v7/datetime/date-constraints/advanced/index.mdx
diff --git a/static/usage/v7/datetime/date-constraints/max-min/index.md b/static/usage/v7/datetime/date-constraints/max-min/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/date-constraints/max-min/index.md
rename to static/usage/v7/datetime/date-constraints/max-min/index.mdx
diff --git a/static/usage/v7/datetime/date-constraints/values/index.md b/static/usage/v7/datetime/date-constraints/values/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/date-constraints/values/index.md
rename to static/usage/v7/datetime/date-constraints/values/index.mdx
diff --git a/static/usage/v7/datetime/format-options/index.md b/static/usage/v7/datetime/format-options/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/format-options/index.md
rename to static/usage/v7/datetime/format-options/index.mdx
diff --git a/static/usage/v7/datetime/highlightedDates/array/index.md b/static/usage/v7/datetime/highlightedDates/array/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/highlightedDates/array/index.md
rename to static/usage/v7/datetime/highlightedDates/array/index.mdx
diff --git a/static/usage/v7/datetime/highlightedDates/callback/index.md b/static/usage/v7/datetime/highlightedDates/callback/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/highlightedDates/callback/index.md
rename to static/usage/v7/datetime/highlightedDates/callback/index.mdx
diff --git a/static/usage/v7/datetime/localization/custom-locale/index.md b/static/usage/v7/datetime/localization/custom-locale/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/localization/custom-locale/index.md
rename to static/usage/v7/datetime/localization/custom-locale/index.mdx
diff --git a/static/usage/v7/datetime/localization/first-day-of-week/index.md b/static/usage/v7/datetime/localization/first-day-of-week/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/localization/first-day-of-week/index.md
rename to static/usage/v7/datetime/localization/first-day-of-week/index.mdx
diff --git a/static/usage/v7/datetime/localization/hour-cycle/index.md b/static/usage/v7/datetime/localization/hour-cycle/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/localization/hour-cycle/index.md
rename to static/usage/v7/datetime/localization/hour-cycle/index.mdx
diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/index.md b/static/usage/v7/datetime/localization/locale-extension-tags/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/localization/locale-extension-tags/index.md
rename to static/usage/v7/datetime/localization/locale-extension-tags/index.mdx
diff --git a/static/usage/v7/datetime/localization/time-label/index.md b/static/usage/v7/datetime/localization/time-label/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/localization/time-label/index.md
rename to static/usage/v7/datetime/localization/time-label/index.mdx
diff --git a/static/usage/v7/datetime/multiple/index.md b/static/usage/v7/datetime/multiple/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/multiple/index.md
rename to static/usage/v7/datetime/multiple/index.mdx
diff --git a/static/usage/v7/datetime/presentation/date/index.md b/static/usage/v7/datetime/presentation/date/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/presentation/date/index.md
rename to static/usage/v7/datetime/presentation/date/index.mdx
diff --git a/static/usage/v7/datetime/presentation/month-and-year/index.md b/static/usage/v7/datetime/presentation/month-and-year/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/presentation/month-and-year/index.md
rename to static/usage/v7/datetime/presentation/month-and-year/index.mdx
diff --git a/static/usage/v7/datetime/presentation/time/index.md b/static/usage/v7/datetime/presentation/time/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/presentation/time/index.md
rename to static/usage/v7/datetime/presentation/time/index.mdx
diff --git a/static/usage/v7/datetime/presentation/wheel/index.md b/static/usage/v7/datetime/presentation/wheel/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/presentation/wheel/index.md
rename to static/usage/v7/datetime/presentation/wheel/index.mdx
diff --git a/static/usage/v7/datetime/styling/calendar-days/index.md b/static/usage/v7/datetime/styling/calendar-days/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/styling/calendar-days/index.md
rename to static/usage/v7/datetime/styling/calendar-days/index.mdx
diff --git a/static/usage/v7/datetime/styling/calendar-header/index.md b/static/usage/v7/datetime/styling/calendar-header/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/styling/calendar-header/index.md
rename to static/usage/v7/datetime/styling/calendar-header/index.mdx
diff --git a/static/usage/v7/datetime/styling/global-theming/index.md b/static/usage/v7/datetime/styling/global-theming/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/styling/global-theming/index.md
rename to static/usage/v7/datetime/styling/global-theming/index.mdx
diff --git a/static/usage/v7/datetime/styling/wheel-styling/index.md b/static/usage/v7/datetime/styling/wheel-styling/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/styling/wheel-styling/index.md
rename to static/usage/v7/datetime/styling/wheel-styling/index.mdx
diff --git a/static/usage/v7/datetime/theming/index.md b/static/usage/v7/datetime/theming/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/theming/index.md
rename to static/usage/v7/datetime/theming/index.mdx
diff --git a/static/usage/v7/datetime/title/customizing-title/index.md b/static/usage/v7/datetime/title/customizing-title/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/title/customizing-title/index.md
rename to static/usage/v7/datetime/title/customizing-title/index.mdx
diff --git a/static/usage/v7/datetime/title/showing-default-title/index.md b/static/usage/v7/datetime/title/showing-default-title/index.mdx
similarity index 100%
rename from static/usage/v7/datetime/title/showing-default-title/index.md
rename to static/usage/v7/datetime/title/showing-default-title/index.mdx
diff --git a/static/usage/v7/fab/basic/index.md b/static/usage/v7/fab/basic/index.mdx
similarity index 100%
rename from static/usage/v7/fab/basic/index.md
rename to static/usage/v7/fab/basic/index.mdx
diff --git a/static/usage/v7/fab/button-sizing/index.md b/static/usage/v7/fab/button-sizing/index.mdx
similarity index 100%
rename from static/usage/v7/fab/button-sizing/index.md
rename to static/usage/v7/fab/button-sizing/index.mdx
diff --git a/static/usage/v7/fab/list-side/index.md b/static/usage/v7/fab/list-side/index.mdx
similarity index 100%
rename from static/usage/v7/fab/list-side/index.md
rename to static/usage/v7/fab/list-side/index.mdx
diff --git a/static/usage/v7/fab/positioning/index.md b/static/usage/v7/fab/positioning/index.mdx
similarity index 100%
rename from static/usage/v7/fab/positioning/index.md
rename to static/usage/v7/fab/positioning/index.mdx
diff --git a/static/usage/v7/fab/safe-area/index.md b/static/usage/v7/fab/safe-area/index.mdx
similarity index 100%
rename from static/usage/v7/fab/safe-area/index.md
rename to static/usage/v7/fab/safe-area/index.mdx
diff --git a/static/usage/v7/fab/theming/colors/index.md b/static/usage/v7/fab/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v7/fab/theming/colors/index.md
rename to static/usage/v7/fab/theming/colors/index.mdx
diff --git a/static/usage/v7/fab/theming/css-custom-properties/index.md b/static/usage/v7/fab/theming/css-custom-properties/index.mdx
similarity index 100%
rename from static/usage/v7/fab/theming/css-custom-properties/index.md
rename to static/usage/v7/fab/theming/css-custom-properties/index.mdx
diff --git a/static/usage/v7/fab/theming/css-shadow-parts/index.md b/static/usage/v7/fab/theming/css-shadow-parts/index.mdx
similarity index 100%
rename from static/usage/v7/fab/theming/css-shadow-parts/index.md
rename to static/usage/v7/fab/theming/css-shadow-parts/index.mdx
diff --git a/static/usage/v7/footer/basic/index.md b/static/usage/v7/footer/basic/index.mdx
similarity index 100%
rename from static/usage/v7/footer/basic/index.md
rename to static/usage/v7/footer/basic/index.mdx
diff --git a/static/usage/v7/footer/custom-scroll-target/index.md b/static/usage/v7/footer/custom-scroll-target/index.mdx
similarity index 100%
rename from static/usage/v7/footer/custom-scroll-target/index.md
rename to static/usage/v7/footer/custom-scroll-target/index.mdx
diff --git a/static/usage/v7/footer/fade/index.md b/static/usage/v7/footer/fade/index.mdx
similarity index 100%
rename from static/usage/v7/footer/fade/index.md
rename to static/usage/v7/footer/fade/index.mdx
diff --git a/static/usage/v7/footer/no-border/index.md b/static/usage/v7/footer/no-border/index.mdx
similarity index 100%
rename from static/usage/v7/footer/no-border/index.md
rename to static/usage/v7/footer/no-border/index.mdx
diff --git a/static/usage/v7/footer/translucent/index.md b/static/usage/v7/footer/translucent/index.mdx
similarity index 100%
rename from static/usage/v7/footer/translucent/index.md
rename to static/usage/v7/footer/translucent/index.mdx
diff --git a/static/usage/v7/gestures/basic/index.md b/static/usage/v7/gestures/basic/index.mdx
similarity index 100%
rename from static/usage/v7/gestures/basic/index.md
rename to static/usage/v7/gestures/basic/index.mdx
diff --git a/static/usage/v7/gestures/double-click/index.md b/static/usage/v7/gestures/double-click/index.mdx
similarity index 100%
rename from static/usage/v7/gestures/double-click/index.md
rename to static/usage/v7/gestures/double-click/index.mdx
diff --git a/static/usage/v7/grid/basic/index.md b/static/usage/v7/grid/basic/index.mdx
similarity index 100%
rename from static/usage/v7/grid/basic/index.md
rename to static/usage/v7/grid/basic/index.mdx
diff --git a/static/usage/v7/grid/customizing/column-number/index.md b/static/usage/v7/grid/customizing/column-number/index.mdx
similarity index 100%
rename from static/usage/v7/grid/customizing/column-number/index.md
rename to static/usage/v7/grid/customizing/column-number/index.mdx
diff --git a/static/usage/v7/grid/customizing/padding/index.md b/static/usage/v7/grid/customizing/padding/index.mdx
similarity index 100%
rename from static/usage/v7/grid/customizing/padding/index.md
rename to static/usage/v7/grid/customizing/padding/index.mdx
diff --git a/static/usage/v7/grid/customizing/width/index.md b/static/usage/v7/grid/customizing/width/index.mdx
similarity index 100%
rename from static/usage/v7/grid/customizing/width/index.md
rename to static/usage/v7/grid/customizing/width/index.mdx
diff --git a/static/usage/v7/grid/fixed/index.md b/static/usage/v7/grid/fixed/index.mdx
similarity index 100%
rename from static/usage/v7/grid/fixed/index.md
rename to static/usage/v7/grid/fixed/index.mdx
diff --git a/static/usage/v7/grid/horizontal-alignment/index.md b/static/usage/v7/grid/horizontal-alignment/index.mdx
similarity index 100%
rename from static/usage/v7/grid/horizontal-alignment/index.md
rename to static/usage/v7/grid/horizontal-alignment/index.mdx
diff --git a/static/usage/v7/grid/offset-responsive/index.md b/static/usage/v7/grid/offset-responsive/index.mdx
similarity index 100%
rename from static/usage/v7/grid/offset-responsive/index.md
rename to static/usage/v7/grid/offset-responsive/index.mdx
diff --git a/static/usage/v7/grid/offset/index.md b/static/usage/v7/grid/offset/index.mdx
similarity index 100%
rename from static/usage/v7/grid/offset/index.md
rename to static/usage/v7/grid/offset/index.mdx
diff --git a/static/usage/v7/grid/push-pull-responsive/index.md b/static/usage/v7/grid/push-pull-responsive/index.mdx
similarity index 100%
rename from static/usage/v7/grid/push-pull-responsive/index.md
rename to static/usage/v7/grid/push-pull-responsive/index.mdx
diff --git a/static/usage/v7/grid/push-pull/index.md b/static/usage/v7/grid/push-pull/index.mdx
similarity index 100%
rename from static/usage/v7/grid/push-pull/index.md
rename to static/usage/v7/grid/push-pull/index.mdx
diff --git a/static/usage/v7/grid/size-auto/index.md b/static/usage/v7/grid/size-auto/index.mdx
similarity index 100%
rename from static/usage/v7/grid/size-auto/index.md
rename to static/usage/v7/grid/size-auto/index.mdx
diff --git a/static/usage/v7/grid/size-responsive/index.md b/static/usage/v7/grid/size-responsive/index.mdx
similarity index 100%
rename from static/usage/v7/grid/size-responsive/index.md
rename to static/usage/v7/grid/size-responsive/index.mdx
diff --git a/static/usage/v7/grid/size/index.md b/static/usage/v7/grid/size/index.mdx
similarity index 100%
rename from static/usage/v7/grid/size/index.md
rename to static/usage/v7/grid/size/index.mdx
diff --git a/static/usage/v7/grid/vertical-alignment/index.md b/static/usage/v7/grid/vertical-alignment/index.mdx
similarity index 100%
rename from static/usage/v7/grid/vertical-alignment/index.md
rename to static/usage/v7/grid/vertical-alignment/index.mdx
diff --git a/static/usage/v7/header/basic/index.md b/static/usage/v7/header/basic/index.mdx
similarity index 100%
rename from static/usage/v7/header/basic/index.md
rename to static/usage/v7/header/basic/index.mdx
diff --git a/static/usage/v7/header/condense/index.md b/static/usage/v7/header/condense/index.mdx
similarity index 100%
rename from static/usage/v7/header/condense/index.md
rename to static/usage/v7/header/condense/index.mdx
diff --git a/static/usage/v7/header/custom-scroll-target/index.md b/static/usage/v7/header/custom-scroll-target/index.mdx
similarity index 100%
rename from static/usage/v7/header/custom-scroll-target/index.md
rename to static/usage/v7/header/custom-scroll-target/index.mdx
diff --git a/static/usage/v7/header/fade/index.md b/static/usage/v7/header/fade/index.mdx
similarity index 100%
rename from static/usage/v7/header/fade/index.md
rename to static/usage/v7/header/fade/index.mdx
diff --git a/static/usage/v7/header/no-border/index.md b/static/usage/v7/header/no-border/index.mdx
similarity index 100%
rename from static/usage/v7/header/no-border/index.md
rename to static/usage/v7/header/no-border/index.mdx
diff --git a/static/usage/v7/header/translucent/index.md b/static/usage/v7/header/translucent/index.mdx
similarity index 100%
rename from static/usage/v7/header/translucent/index.md
rename to static/usage/v7/header/translucent/index.mdx
diff --git a/static/usage/v7/icon/basic/index.md b/static/usage/v7/icon/basic/index.mdx
similarity index 100%
rename from static/usage/v7/icon/basic/index.md
rename to static/usage/v7/icon/basic/index.mdx
diff --git a/static/usage/v7/img/basic/index.md b/static/usage/v7/img/basic/index.mdx
similarity index 100%
rename from static/usage/v7/img/basic/index.md
rename to static/usage/v7/img/basic/index.mdx
diff --git a/static/usage/v7/infinite-scroll/basic/index.md b/static/usage/v7/infinite-scroll/basic/index.mdx
similarity index 100%
rename from static/usage/v7/infinite-scroll/basic/index.md
rename to static/usage/v7/infinite-scroll/basic/index.mdx
diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/index.md b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/index.mdx
similarity index 100%
rename from static/usage/v7/infinite-scroll/custom-infinite-scroll-content/index.md
rename to static/usage/v7/infinite-scroll/custom-infinite-scroll-content/index.mdx
diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/index.md b/static/usage/v7/infinite-scroll/infinite-scroll-content/index.mdx
similarity index 100%
rename from static/usage/v7/infinite-scroll/infinite-scroll-content/index.md
rename to static/usage/v7/infinite-scroll/infinite-scroll-content/index.mdx
diff --git a/static/usage/v7/input/basic/index.md b/static/usage/v7/input/basic/index.mdx
similarity index 100%
rename from static/usage/v7/input/basic/index.md
rename to static/usage/v7/input/basic/index.mdx
diff --git a/static/usage/v7/input/clear/index.md b/static/usage/v7/input/clear/index.mdx
similarity index 100%
rename from static/usage/v7/input/clear/index.md
rename to static/usage/v7/input/clear/index.mdx
diff --git a/static/usage/v7/input/counter-alignment/index.md b/static/usage/v7/input/counter-alignment/index.mdx
similarity index 100%
rename from static/usage/v7/input/counter-alignment/index.md
rename to static/usage/v7/input/counter-alignment/index.mdx
diff --git a/static/usage/v7/input/counter/index.md b/static/usage/v7/input/counter/index.mdx
similarity index 100%
rename from static/usage/v7/input/counter/index.md
rename to static/usage/v7/input/counter/index.mdx
diff --git a/static/usage/v7/input/fill/index.md b/static/usage/v7/input/fill/index.mdx
similarity index 100%
rename from static/usage/v7/input/fill/index.md
rename to static/usage/v7/input/fill/index.mdx
diff --git a/static/usage/v7/input/filtering/index.md b/static/usage/v7/input/filtering/index.mdx
similarity index 100%
rename from static/usage/v7/input/filtering/index.md
rename to static/usage/v7/input/filtering/index.mdx
diff --git a/static/usage/v7/input/helper-error/index.md b/static/usage/v7/input/helper-error/index.mdx
similarity index 100%
rename from static/usage/v7/input/helper-error/index.md
rename to static/usage/v7/input/helper-error/index.mdx
diff --git a/static/usage/v7/input/label-placement/index.md b/static/usage/v7/input/label-placement/index.mdx
similarity index 100%
rename from static/usage/v7/input/label-placement/index.md
rename to static/usage/v7/input/label-placement/index.mdx
diff --git a/static/usage/v7/input/label-slot/index.md b/static/usage/v7/input/label-slot/index.mdx
similarity index 100%
rename from static/usage/v7/input/label-slot/index.md
rename to static/usage/v7/input/label-slot/index.mdx
diff --git a/static/usage/v7/input/mask/index.md b/static/usage/v7/input/mask/index.mdx
similarity index 100%
rename from static/usage/v7/input/mask/index.md
rename to static/usage/v7/input/mask/index.mdx
diff --git a/static/usage/v7/input/migration/index.md b/static/usage/v7/input/migration/index.mdx
similarity index 100%
rename from static/usage/v7/input/migration/index.md
rename to static/usage/v7/input/migration/index.mdx
diff --git a/static/usage/v7/input/no-visible-label/index.md b/static/usage/v7/input/no-visible-label/index.mdx
similarity index 100%
rename from static/usage/v7/input/no-visible-label/index.md
rename to static/usage/v7/input/no-visible-label/index.mdx
diff --git a/static/usage/v7/input/set-focus/index.md b/static/usage/v7/input/set-focus/index.mdx
similarity index 100%
rename from static/usage/v7/input/set-focus/index.md
rename to static/usage/v7/input/set-focus/index.mdx
diff --git a/static/usage/v7/input/start-end-slots/index.md b/static/usage/v7/input/start-end-slots/index.mdx
similarity index 100%
rename from static/usage/v7/input/start-end-slots/index.md
rename to static/usage/v7/input/start-end-slots/index.mdx
diff --git a/static/usage/v7/input/theming/colors/index.md b/static/usage/v7/input/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v7/input/theming/colors/index.md
rename to static/usage/v7/input/theming/colors/index.mdx
diff --git a/static/usage/v7/input/theming/css-properties/index.md b/static/usage/v7/input/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/input/theming/css-properties/index.md
rename to static/usage/v7/input/theming/css-properties/index.mdx
diff --git a/static/usage/v7/input/types/index.md b/static/usage/v7/input/types/index.mdx
similarity index 100%
rename from static/usage/v7/input/types/index.md
rename to static/usage/v7/input/types/index.mdx
diff --git a/static/usage/v7/item-divider/basic/index.md b/static/usage/v7/item-divider/basic/index.mdx
similarity index 100%
rename from static/usage/v7/item-divider/basic/index.md
rename to static/usage/v7/item-divider/basic/index.mdx
diff --git a/static/usage/v7/item-divider/theming/colors/index.md b/static/usage/v7/item-divider/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v7/item-divider/theming/colors/index.md
rename to static/usage/v7/item-divider/theming/colors/index.mdx
diff --git a/static/usage/v7/item-divider/theming/css-properties/index.md b/static/usage/v7/item-divider/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/item-divider/theming/css-properties/index.md
rename to static/usage/v7/item-divider/theming/css-properties/index.mdx
diff --git a/static/usage/v7/item-group/basic/index.md b/static/usage/v7/item-group/basic/index.mdx
similarity index 100%
rename from static/usage/v7/item-group/basic/index.md
rename to static/usage/v7/item-group/basic/index.mdx
diff --git a/static/usage/v7/item-group/sliding-items/index.md b/static/usage/v7/item-group/sliding-items/index.mdx
similarity index 100%
rename from static/usage/v7/item-group/sliding-items/index.md
rename to static/usage/v7/item-group/sliding-items/index.mdx
diff --git a/static/usage/v7/item-sliding/basic/index.md b/static/usage/v7/item-sliding/basic/index.mdx
similarity index 100%
rename from static/usage/v7/item-sliding/basic/index.md
rename to static/usage/v7/item-sliding/basic/index.mdx
diff --git a/static/usage/v7/item-sliding/expandable/index.md b/static/usage/v7/item-sliding/expandable/index.mdx
similarity index 100%
rename from static/usage/v7/item-sliding/expandable/index.md
rename to static/usage/v7/item-sliding/expandable/index.mdx
diff --git a/static/usage/v7/item-sliding/icons/index.md b/static/usage/v7/item-sliding/icons/index.mdx
similarity index 100%
rename from static/usage/v7/item-sliding/icons/index.md
rename to static/usage/v7/item-sliding/icons/index.mdx
diff --git a/static/usage/v7/item/basic/index.md b/static/usage/v7/item/basic/index.mdx
similarity index 100%
rename from static/usage/v7/item/basic/index.md
rename to static/usage/v7/item/basic/index.mdx
diff --git a/static/usage/v7/item/buttons/index.md b/static/usage/v7/item/buttons/index.mdx
similarity index 100%
rename from static/usage/v7/item/buttons/index.md
rename to static/usage/v7/item/buttons/index.mdx
diff --git a/static/usage/v7/item/clickable/index.md b/static/usage/v7/item/clickable/index.mdx
similarity index 100%
rename from static/usage/v7/item/clickable/index.md
rename to static/usage/v7/item/clickable/index.mdx
diff --git a/static/usage/v7/item/content-types/actions/index.md b/static/usage/v7/item/content-types/actions/index.mdx
similarity index 100%
rename from static/usage/v7/item/content-types/actions/index.md
rename to static/usage/v7/item/content-types/actions/index.mdx
diff --git a/static/usage/v7/item/content-types/controls/index.md b/static/usage/v7/item/content-types/controls/index.mdx
similarity index 100%
rename from static/usage/v7/item/content-types/controls/index.md
rename to static/usage/v7/item/content-types/controls/index.mdx
diff --git a/static/usage/v7/item/content-types/metadata/index.md b/static/usage/v7/item/content-types/metadata/index.mdx
similarity index 100%
rename from static/usage/v7/item/content-types/metadata/index.md
rename to static/usage/v7/item/content-types/metadata/index.mdx
diff --git a/static/usage/v7/item/content-types/supporting-visuals/index.md b/static/usage/v7/item/content-types/supporting-visuals/index.mdx
similarity index 100%
rename from static/usage/v7/item/content-types/supporting-visuals/index.md
rename to static/usage/v7/item/content-types/supporting-visuals/index.mdx
diff --git a/static/usage/v7/item/content-types/text/index.md b/static/usage/v7/item/content-types/text/index.mdx
similarity index 100%
rename from static/usage/v7/item/content-types/text/index.md
rename to static/usage/v7/item/content-types/text/index.mdx
diff --git a/static/usage/v7/item/detail-arrows/index.md b/static/usage/v7/item/detail-arrows/index.mdx
similarity index 100%
rename from static/usage/v7/item/detail-arrows/index.md
rename to static/usage/v7/item/detail-arrows/index.mdx
diff --git a/static/usage/v7/item/inputs/index.md b/static/usage/v7/item/inputs/index.mdx
similarity index 100%
rename from static/usage/v7/item/inputs/index.md
rename to static/usage/v7/item/inputs/index.mdx
diff --git a/static/usage/v7/item/lines/index.md b/static/usage/v7/item/lines/index.mdx
similarity index 100%
rename from static/usage/v7/item/lines/index.md
rename to static/usage/v7/item/lines/index.mdx
diff --git a/static/usage/v7/item/media/index.md b/static/usage/v7/item/media/index.mdx
similarity index 100%
rename from static/usage/v7/item/media/index.md
rename to static/usage/v7/item/media/index.mdx
diff --git a/static/usage/v7/item/theming/colors/index.md b/static/usage/v7/item/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v7/item/theming/colors/index.md
rename to static/usage/v7/item/theming/colors/index.mdx
diff --git a/static/usage/v7/item/theming/css-properties/index.md b/static/usage/v7/item/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/item/theming/css-properties/index.md
rename to static/usage/v7/item/theming/css-properties/index.mdx
diff --git a/static/usage/v7/item/theming/css-shadow-parts/index.md b/static/usage/v7/item/theming/css-shadow-parts/index.mdx
similarity index 100%
rename from static/usage/v7/item/theming/css-shadow-parts/index.md
rename to static/usage/v7/item/theming/css-shadow-parts/index.mdx
diff --git a/static/usage/v7/item/theming/input-highlight/index.md b/static/usage/v7/item/theming/input-highlight/index.mdx
similarity index 100%
rename from static/usage/v7/item/theming/input-highlight/index.md
rename to static/usage/v7/item/theming/input-highlight/index.mdx
diff --git a/static/usage/v7/keyboard/enterkeyhint/index.md b/static/usage/v7/keyboard/enterkeyhint/index.mdx
similarity index 100%
rename from static/usage/v7/keyboard/enterkeyhint/index.md
rename to static/usage/v7/keyboard/enterkeyhint/index.mdx
diff --git a/static/usage/v7/keyboard/inputmode/index.md b/static/usage/v7/keyboard/inputmode/index.mdx
similarity index 100%
rename from static/usage/v7/keyboard/inputmode/index.md
rename to static/usage/v7/keyboard/inputmode/index.mdx
diff --git a/static/usage/v7/label/basic/index.md b/static/usage/v7/label/basic/index.mdx
similarity index 100%
rename from static/usage/v7/label/basic/index.md
rename to static/usage/v7/label/basic/index.mdx
diff --git a/static/usage/v7/label/input/index.md b/static/usage/v7/label/input/index.mdx
similarity index 100%
rename from static/usage/v7/label/input/index.md
rename to static/usage/v7/label/input/index.mdx
diff --git a/static/usage/v7/label/item/index.md b/static/usage/v7/label/item/index.mdx
similarity index 100%
rename from static/usage/v7/label/item/index.md
rename to static/usage/v7/label/item/index.mdx
diff --git a/static/usage/v7/label/theming/colors/index.md b/static/usage/v7/label/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v7/label/theming/colors/index.md
rename to static/usage/v7/label/theming/colors/index.mdx
diff --git a/static/usage/v7/layout/dynamic-font-scaling/index.md b/static/usage/v7/layout/dynamic-font-scaling/index.mdx
similarity index 100%
rename from static/usage/v7/layout/dynamic-font-scaling/index.md
rename to static/usage/v7/layout/dynamic-font-scaling/index.mdx
diff --git a/static/usage/v7/list-header/basic/index.md b/static/usage/v7/list-header/basic/index.mdx
similarity index 100%
rename from static/usage/v7/list-header/basic/index.md
rename to static/usage/v7/list-header/basic/index.mdx
diff --git a/static/usage/v7/list-header/buttons/index.md b/static/usage/v7/list-header/buttons/index.mdx
similarity index 100%
rename from static/usage/v7/list-header/buttons/index.md
rename to static/usage/v7/list-header/buttons/index.mdx
diff --git a/static/usage/v7/list-header/lines/index.md b/static/usage/v7/list-header/lines/index.mdx
similarity index 100%
rename from static/usage/v7/list-header/lines/index.md
rename to static/usage/v7/list-header/lines/index.mdx
diff --git a/static/usage/v7/list-header/theming/colors/index.md b/static/usage/v7/list-header/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v7/list-header/theming/colors/index.md
rename to static/usage/v7/list-header/theming/colors/index.mdx
diff --git a/static/usage/v7/list-header/theming/css-properties/index.md b/static/usage/v7/list-header/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/list-header/theming/css-properties/index.md
rename to static/usage/v7/list-header/theming/css-properties/index.mdx
diff --git a/static/usage/v7/list/basic/index.md b/static/usage/v7/list/basic/index.mdx
similarity index 100%
rename from static/usage/v7/list/basic/index.md
rename to static/usage/v7/list/basic/index.mdx
diff --git a/static/usage/v7/list/inset/index.md b/static/usage/v7/list/inset/index.mdx
similarity index 100%
rename from static/usage/v7/list/inset/index.md
rename to static/usage/v7/list/inset/index.mdx
diff --git a/static/usage/v7/list/lines/index.md b/static/usage/v7/list/lines/index.mdx
similarity index 100%
rename from static/usage/v7/list/lines/index.md
rename to static/usage/v7/list/lines/index.mdx
diff --git a/static/usage/v7/loading/controller/index.md b/static/usage/v7/loading/controller/index.mdx
similarity index 100%
rename from static/usage/v7/loading/controller/index.md
rename to static/usage/v7/loading/controller/index.mdx
diff --git a/static/usage/v7/loading/inline/index.md b/static/usage/v7/loading/inline/index.mdx
similarity index 100%
rename from static/usage/v7/loading/inline/index.md
rename to static/usage/v7/loading/inline/index.mdx
diff --git a/static/usage/v7/loading/spinners/index.md b/static/usage/v7/loading/spinners/index.mdx
similarity index 100%
rename from static/usage/v7/loading/spinners/index.md
rename to static/usage/v7/loading/spinners/index.mdx
diff --git a/static/usage/v7/loading/theming/index.md b/static/usage/v7/loading/theming/index.mdx
similarity index 100%
rename from static/usage/v7/loading/theming/index.md
rename to static/usage/v7/loading/theming/index.mdx
diff --git a/static/usage/v7/menu/basic/index.md b/static/usage/v7/menu/basic/index.mdx
similarity index 100%
rename from static/usage/v7/menu/basic/index.md
rename to static/usage/v7/menu/basic/index.mdx
diff --git a/static/usage/v7/menu/multiple/index.md b/static/usage/v7/menu/multiple/index.mdx
similarity index 100%
rename from static/usage/v7/menu/multiple/index.md
rename to static/usage/v7/menu/multiple/index.mdx
diff --git a/static/usage/v7/menu/sides/index.md b/static/usage/v7/menu/sides/index.mdx
similarity index 100%
rename from static/usage/v7/menu/sides/index.md
rename to static/usage/v7/menu/sides/index.mdx
diff --git a/static/usage/v7/menu/theming/index.md b/static/usage/v7/menu/theming/index.mdx
similarity index 100%
rename from static/usage/v7/menu/theming/index.md
rename to static/usage/v7/menu/theming/index.mdx
diff --git a/static/usage/v7/menu/toggle/index.md b/static/usage/v7/menu/toggle/index.mdx
similarity index 100%
rename from static/usage/v7/menu/toggle/index.md
rename to static/usage/v7/menu/toggle/index.mdx
diff --git a/static/usage/v7/menu/type/index.md b/static/usage/v7/menu/type/index.mdx
similarity index 100%
rename from static/usage/v7/menu/type/index.md
rename to static/usage/v7/menu/type/index.mdx
diff --git a/static/usage/v7/modal/can-dismiss/boolean/index.md b/static/usage/v7/modal/can-dismiss/boolean/index.mdx
similarity index 100%
rename from static/usage/v7/modal/can-dismiss/boolean/index.md
rename to static/usage/v7/modal/can-dismiss/boolean/index.mdx
diff --git a/static/usage/v7/modal/can-dismiss/child-state/index.md b/static/usage/v7/modal/can-dismiss/child-state/index.mdx
similarity index 100%
rename from static/usage/v7/modal/can-dismiss/child-state/index.md
rename to static/usage/v7/modal/can-dismiss/child-state/index.mdx
diff --git a/static/usage/v7/modal/can-dismiss/function/index.md b/static/usage/v7/modal/can-dismiss/function/index.mdx
similarity index 100%
rename from static/usage/v7/modal/can-dismiss/function/index.md
rename to static/usage/v7/modal/can-dismiss/function/index.mdx
diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.mdx
similarity index 100%
rename from static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md
rename to static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.mdx
diff --git a/static/usage/v7/modal/card/basic/index.md b/static/usage/v7/modal/card/basic/index.mdx
similarity index 100%
rename from static/usage/v7/modal/card/basic/index.md
rename to static/usage/v7/modal/card/basic/index.mdx
diff --git a/static/usage/v7/modal/controller/index.md b/static/usage/v7/modal/controller/index.mdx
similarity index 100%
rename from static/usage/v7/modal/controller/index.md
rename to static/usage/v7/modal/controller/index.mdx
diff --git a/static/usage/v7/modal/custom-dialogs/index.md b/static/usage/v7/modal/custom-dialogs/index.mdx
similarity index 100%
rename from static/usage/v7/modal/custom-dialogs/index.md
rename to static/usage/v7/modal/custom-dialogs/index.mdx
diff --git a/static/usage/v7/modal/inline/basic/index.md b/static/usage/v7/modal/inline/basic/index.mdx
similarity index 100%
rename from static/usage/v7/modal/inline/basic/index.md
rename to static/usage/v7/modal/inline/basic/index.mdx
diff --git a/static/usage/v7/modal/inline/is-open/index.md b/static/usage/v7/modal/inline/is-open/index.mdx
similarity index 100%
rename from static/usage/v7/modal/inline/is-open/index.md
rename to static/usage/v7/modal/inline/is-open/index.mdx
diff --git a/static/usage/v7/modal/performance/mount/index.md b/static/usage/v7/modal/performance/mount/index.mdx
similarity index 100%
rename from static/usage/v7/modal/performance/mount/index.md
rename to static/usage/v7/modal/performance/mount/index.mdx
diff --git a/static/usage/v7/modal/sheet/auto-height/index.md b/static/usage/v7/modal/sheet/auto-height/index.mdx
similarity index 100%
rename from static/usage/v7/modal/sheet/auto-height/index.md
rename to static/usage/v7/modal/sheet/auto-height/index.mdx
diff --git a/static/usage/v7/modal/sheet/background-content/index.md b/static/usage/v7/modal/sheet/background-content/index.mdx
similarity index 100%
rename from static/usage/v7/modal/sheet/background-content/index.md
rename to static/usage/v7/modal/sheet/background-content/index.mdx
diff --git a/static/usage/v7/modal/sheet/basic/index.md b/static/usage/v7/modal/sheet/basic/index.mdx
similarity index 100%
rename from static/usage/v7/modal/sheet/basic/index.md
rename to static/usage/v7/modal/sheet/basic/index.mdx
diff --git a/static/usage/v7/modal/sheet/handle-behavior/index.md b/static/usage/v7/modal/sheet/handle-behavior/index.mdx
similarity index 100%
rename from static/usage/v7/modal/sheet/handle-behavior/index.md
rename to static/usage/v7/modal/sheet/handle-behavior/index.mdx
diff --git a/static/usage/v7/modal/styling/animations/index.md b/static/usage/v7/modal/styling/animations/index.mdx
similarity index 100%
rename from static/usage/v7/modal/styling/animations/index.md
rename to static/usage/v7/modal/styling/animations/index.mdx
diff --git a/static/usage/v7/modal/styling/theming/index.md b/static/usage/v7/modal/styling/theming/index.mdx
similarity index 100%
rename from static/usage/v7/modal/styling/theming/index.md
rename to static/usage/v7/modal/styling/theming/index.mdx
diff --git a/static/usage/v7/nav/modal-navigation/index.md b/static/usage/v7/nav/modal-navigation/index.mdx
similarity index 100%
rename from static/usage/v7/nav/modal-navigation/index.md
rename to static/usage/v7/nav/modal-navigation/index.mdx
diff --git a/static/usage/v7/nav/nav-link/index.md b/static/usage/v7/nav/nav-link/index.mdx
similarity index 100%
rename from static/usage/v7/nav/nav-link/index.md
rename to static/usage/v7/nav/nav-link/index.mdx
diff --git a/static/usage/v7/note/basic/index.md b/static/usage/v7/note/basic/index.mdx
similarity index 100%
rename from static/usage/v7/note/basic/index.md
rename to static/usage/v7/note/basic/index.mdx
diff --git a/static/usage/v7/note/item/index.md b/static/usage/v7/note/item/index.mdx
similarity index 100%
rename from static/usage/v7/note/item/index.md
rename to static/usage/v7/note/item/index.mdx
diff --git a/static/usage/v7/note/theming/colors/index.md b/static/usage/v7/note/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v7/note/theming/colors/index.md
rename to static/usage/v7/note/theming/colors/index.mdx
diff --git a/static/usage/v7/note/theming/css-properties/index.md b/static/usage/v7/note/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/note/theming/css-properties/index.md
rename to static/usage/v7/note/theming/css-properties/index.mdx
diff --git a/static/usage/v7/picker/controller/index.md b/static/usage/v7/picker/controller/index.mdx
similarity index 100%
rename from static/usage/v7/picker/controller/index.md
rename to static/usage/v7/picker/controller/index.mdx
diff --git a/static/usage/v7/picker/inline/isOpen/index.md b/static/usage/v7/picker/inline/isOpen/index.mdx
similarity index 100%
rename from static/usage/v7/picker/inline/isOpen/index.md
rename to static/usage/v7/picker/inline/isOpen/index.mdx
diff --git a/static/usage/v7/picker/inline/trigger/index.md b/static/usage/v7/picker/inline/trigger/index.mdx
similarity index 100%
rename from static/usage/v7/picker/inline/trigger/index.md
rename to static/usage/v7/picker/inline/trigger/index.mdx
diff --git a/static/usage/v7/picker/multiple-column/index.md b/static/usage/v7/picker/multiple-column/index.mdx
similarity index 100%
rename from static/usage/v7/picker/multiple-column/index.md
rename to static/usage/v7/picker/multiple-column/index.mdx
diff --git a/static/usage/v7/popover/customization/positioning/index.md b/static/usage/v7/popover/customization/positioning/index.mdx
similarity index 100%
rename from static/usage/v7/popover/customization/positioning/index.md
rename to static/usage/v7/popover/customization/positioning/index.mdx
diff --git a/static/usage/v7/popover/customization/sizing/index.md b/static/usage/v7/popover/customization/sizing/index.mdx
similarity index 100%
rename from static/usage/v7/popover/customization/sizing/index.md
rename to static/usage/v7/popover/customization/sizing/index.mdx
diff --git a/static/usage/v7/popover/customization/styling/index.md b/static/usage/v7/popover/customization/styling/index.mdx
similarity index 100%
rename from static/usage/v7/popover/customization/styling/index.md
rename to static/usage/v7/popover/customization/styling/index.mdx
diff --git a/static/usage/v7/popover/nested/index.md b/static/usage/v7/popover/nested/index.mdx
similarity index 100%
rename from static/usage/v7/popover/nested/index.md
rename to static/usage/v7/popover/nested/index.mdx
diff --git a/static/usage/v7/popover/performance/mount/index.md b/static/usage/v7/popover/performance/mount/index.mdx
similarity index 100%
rename from static/usage/v7/popover/performance/mount/index.md
rename to static/usage/v7/popover/performance/mount/index.mdx
diff --git a/static/usage/v7/popover/presenting/controller/index.md b/static/usage/v7/popover/presenting/controller/index.mdx
similarity index 100%
rename from static/usage/v7/popover/presenting/controller/index.md
rename to static/usage/v7/popover/presenting/controller/index.mdx
diff --git a/static/usage/v7/popover/presenting/inline-isopen/index.md b/static/usage/v7/popover/presenting/inline-isopen/index.mdx
similarity index 100%
rename from static/usage/v7/popover/presenting/inline-isopen/index.md
rename to static/usage/v7/popover/presenting/inline-isopen/index.mdx
diff --git a/static/usage/v7/popover/presenting/inline-trigger/index.md b/static/usage/v7/popover/presenting/inline-trigger/index.mdx
similarity index 100%
rename from static/usage/v7/popover/presenting/inline-trigger/index.md
rename to static/usage/v7/popover/presenting/inline-trigger/index.mdx
diff --git a/static/usage/v7/progress-bar/buffer/index.md b/static/usage/v7/progress-bar/buffer/index.mdx
similarity index 100%
rename from static/usage/v7/progress-bar/buffer/index.md
rename to static/usage/v7/progress-bar/buffer/index.mdx
diff --git a/static/usage/v7/progress-bar/determinate/index.md b/static/usage/v7/progress-bar/determinate/index.mdx
similarity index 100%
rename from static/usage/v7/progress-bar/determinate/index.md
rename to static/usage/v7/progress-bar/determinate/index.mdx
diff --git a/static/usage/v7/progress-bar/indeterminate/index.md b/static/usage/v7/progress-bar/indeterminate/index.mdx
similarity index 100%
rename from static/usage/v7/progress-bar/indeterminate/index.md
rename to static/usage/v7/progress-bar/indeterminate/index.mdx
diff --git a/static/usage/v7/progress-bar/theming/colors/index.md b/static/usage/v7/progress-bar/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v7/progress-bar/theming/colors/index.md
rename to static/usage/v7/progress-bar/theming/colors/index.mdx
diff --git a/static/usage/v7/progress-bar/theming/css-properties/index.md b/static/usage/v7/progress-bar/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/progress-bar/theming/css-properties/index.md
rename to static/usage/v7/progress-bar/theming/css-properties/index.mdx
diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/index.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/index.mdx
similarity index 100%
rename from static/usage/v7/progress-bar/theming/css-shadow-parts/index.md
rename to static/usage/v7/progress-bar/theming/css-shadow-parts/index.mdx
diff --git a/static/usage/v7/radio/alignment/index.md b/static/usage/v7/radio/alignment/index.mdx
similarity index 100%
rename from static/usage/v7/radio/alignment/index.md
rename to static/usage/v7/radio/alignment/index.mdx
diff --git a/static/usage/v7/radio/basic/index.md b/static/usage/v7/radio/basic/index.mdx
similarity index 100%
rename from static/usage/v7/radio/basic/index.md
rename to static/usage/v7/radio/basic/index.mdx
diff --git a/static/usage/v7/radio/empty-selection/index.md b/static/usage/v7/radio/empty-selection/index.mdx
similarity index 100%
rename from static/usage/v7/radio/empty-selection/index.md
rename to static/usage/v7/radio/empty-selection/index.mdx
diff --git a/static/usage/v7/radio/justify/index.md b/static/usage/v7/radio/justify/index.mdx
similarity index 100%
rename from static/usage/v7/radio/justify/index.md
rename to static/usage/v7/radio/justify/index.mdx
diff --git a/static/usage/v7/radio/label-placement/index.md b/static/usage/v7/radio/label-placement/index.mdx
similarity index 100%
rename from static/usage/v7/radio/label-placement/index.md
rename to static/usage/v7/radio/label-placement/index.mdx
diff --git a/static/usage/v7/radio/label-wrap/index.md b/static/usage/v7/radio/label-wrap/index.mdx
similarity index 100%
rename from static/usage/v7/radio/label-wrap/index.md
rename to static/usage/v7/radio/label-wrap/index.mdx
diff --git a/static/usage/v7/radio/migration/index.md b/static/usage/v7/radio/migration/index.mdx
similarity index 100%
rename from static/usage/v7/radio/migration/index.md
rename to static/usage/v7/radio/migration/index.mdx
diff --git a/static/usage/v7/radio/theming/colors/index.md b/static/usage/v7/radio/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v7/radio/theming/colors/index.md
rename to static/usage/v7/radio/theming/colors/index.mdx
diff --git a/static/usage/v7/radio/theming/css-properties/index.md b/static/usage/v7/radio/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/radio/theming/css-properties/index.md
rename to static/usage/v7/radio/theming/css-properties/index.mdx
diff --git a/static/usage/v7/radio/theming/css-shadow-parts/index.md b/static/usage/v7/radio/theming/css-shadow-parts/index.mdx
similarity index 100%
rename from static/usage/v7/radio/theming/css-shadow-parts/index.md
rename to static/usage/v7/radio/theming/css-shadow-parts/index.mdx
diff --git a/static/usage/v7/radio/using-comparewith/index.md b/static/usage/v7/radio/using-comparewith/index.mdx
similarity index 100%
rename from static/usage/v7/radio/using-comparewith/index.md
rename to static/usage/v7/radio/using-comparewith/index.mdx
diff --git a/static/usage/v7/range/basic/index.md b/static/usage/v7/range/basic/index.mdx
similarity index 100%
rename from static/usage/v7/range/basic/index.md
rename to static/usage/v7/range/basic/index.mdx
diff --git a/static/usage/v7/range/dual-knobs/index.md b/static/usage/v7/range/dual-knobs/index.mdx
similarity index 100%
rename from static/usage/v7/range/dual-knobs/index.md
rename to static/usage/v7/range/dual-knobs/index.mdx
diff --git a/static/usage/v7/range/ion-change-event/index.md b/static/usage/v7/range/ion-change-event/index.mdx
similarity index 100%
rename from static/usage/v7/range/ion-change-event/index.md
rename to static/usage/v7/range/ion-change-event/index.mdx
diff --git a/static/usage/v7/range/ion-knob-move-event/index.md b/static/usage/v7/range/ion-knob-move-event/index.mdx
similarity index 100%
rename from static/usage/v7/range/ion-knob-move-event/index.md
rename to static/usage/v7/range/ion-knob-move-event/index.mdx
diff --git a/static/usage/v7/range/label-slot/index.md b/static/usage/v7/range/label-slot/index.mdx
similarity index 100%
rename from static/usage/v7/range/label-slot/index.md
rename to static/usage/v7/range/label-slot/index.mdx
diff --git a/static/usage/v7/range/labels/index.md b/static/usage/v7/range/labels/index.mdx
similarity index 100%
rename from static/usage/v7/range/labels/index.md
rename to static/usage/v7/range/labels/index.mdx
diff --git a/static/usage/v7/range/migration/index.md b/static/usage/v7/range/migration/index.mdx
similarity index 100%
rename from static/usage/v7/range/migration/index.md
rename to static/usage/v7/range/migration/index.mdx
diff --git a/static/usage/v7/range/no-visible-label/index.md b/static/usage/v7/range/no-visible-label/index.mdx
similarity index 100%
rename from static/usage/v7/range/no-visible-label/index.md
rename to static/usage/v7/range/no-visible-label/index.mdx
diff --git a/static/usage/v7/range/pins/index.md b/static/usage/v7/range/pins/index.mdx
similarity index 100%
rename from static/usage/v7/range/pins/index.md
rename to static/usage/v7/range/pins/index.mdx
diff --git a/static/usage/v7/range/slots/index.md b/static/usage/v7/range/slots/index.mdx
similarity index 100%
rename from static/usage/v7/range/slots/index.md
rename to static/usage/v7/range/slots/index.mdx
diff --git a/static/usage/v7/range/snapping-ticks/index.md b/static/usage/v7/range/snapping-ticks/index.mdx
similarity index 100%
rename from static/usage/v7/range/snapping-ticks/index.md
rename to static/usage/v7/range/snapping-ticks/index.mdx
diff --git a/static/usage/v7/range/theming/css-properties/index.md b/static/usage/v7/range/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/range/theming/css-properties/index.md
rename to static/usage/v7/range/theming/css-properties/index.mdx
diff --git a/static/usage/v7/range/theming/css-shadow-parts/index.md b/static/usage/v7/range/theming/css-shadow-parts/index.mdx
similarity index 100%
rename from static/usage/v7/range/theming/css-shadow-parts/index.md
rename to static/usage/v7/range/theming/css-shadow-parts/index.mdx
diff --git a/static/usage/v7/refresher/advanced/index.md b/static/usage/v7/refresher/advanced/index.mdx
similarity index 100%
rename from static/usage/v7/refresher/advanced/index.md
rename to static/usage/v7/refresher/advanced/index.mdx
diff --git a/static/usage/v7/refresher/basic/index.md b/static/usage/v7/refresher/basic/index.mdx
similarity index 100%
rename from static/usage/v7/refresher/basic/index.md
rename to static/usage/v7/refresher/basic/index.mdx
diff --git a/static/usage/v7/refresher/custom-content/index.md b/static/usage/v7/refresher/custom-content/index.mdx
similarity index 100%
rename from static/usage/v7/refresher/custom-content/index.md
rename to static/usage/v7/refresher/custom-content/index.mdx
diff --git a/static/usage/v7/refresher/custom-scroll-target/index.md b/static/usage/v7/refresher/custom-scroll-target/index.mdx
similarity index 100%
rename from static/usage/v7/refresher/custom-scroll-target/index.md
rename to static/usage/v7/refresher/custom-scroll-target/index.mdx
diff --git a/static/usage/v7/refresher/pull-properties/index.md b/static/usage/v7/refresher/pull-properties/index.mdx
similarity index 100%
rename from static/usage/v7/refresher/pull-properties/index.md
rename to static/usage/v7/refresher/pull-properties/index.mdx
diff --git a/static/usage/v7/reorder/basic/index.md b/static/usage/v7/reorder/basic/index.mdx
similarity index 100%
rename from static/usage/v7/reorder/basic/index.md
rename to static/usage/v7/reorder/basic/index.mdx
diff --git a/static/usage/v7/reorder/custom-icon/index.md b/static/usage/v7/reorder/custom-icon/index.mdx
similarity index 100%
rename from static/usage/v7/reorder/custom-icon/index.md
rename to static/usage/v7/reorder/custom-icon/index.mdx
diff --git a/static/usage/v7/reorder/custom-scroll-target/index.md b/static/usage/v7/reorder/custom-scroll-target/index.mdx
similarity index 100%
rename from static/usage/v7/reorder/custom-scroll-target/index.md
rename to static/usage/v7/reorder/custom-scroll-target/index.mdx
diff --git a/static/usage/v7/reorder/toggling-disabled/index.md b/static/usage/v7/reorder/toggling-disabled/index.mdx
similarity index 100%
rename from static/usage/v7/reorder/toggling-disabled/index.md
rename to static/usage/v7/reorder/toggling-disabled/index.mdx
diff --git a/static/usage/v7/reorder/updating-data/index.md b/static/usage/v7/reorder/updating-data/index.mdx
similarity index 100%
rename from static/usage/v7/reorder/updating-data/index.md
rename to static/usage/v7/reorder/updating-data/index.mdx
diff --git a/static/usage/v7/reorder/wrapper/index.md b/static/usage/v7/reorder/wrapper/index.mdx
similarity index 100%
rename from static/usage/v7/reorder/wrapper/index.md
rename to static/usage/v7/reorder/wrapper/index.mdx
diff --git a/static/usage/v7/ripple-effect/basic/index.md b/static/usage/v7/ripple-effect/basic/index.mdx
similarity index 100%
rename from static/usage/v7/ripple-effect/basic/index.md
rename to static/usage/v7/ripple-effect/basic/index.mdx
diff --git a/static/usage/v7/ripple-effect/customizing/index.md b/static/usage/v7/ripple-effect/customizing/index.mdx
similarity index 100%
rename from static/usage/v7/ripple-effect/customizing/index.md
rename to static/usage/v7/ripple-effect/customizing/index.mdx
diff --git a/static/usage/v7/ripple-effect/type/index.md b/static/usage/v7/ripple-effect/type/index.mdx
similarity index 100%
rename from static/usage/v7/ripple-effect/type/index.md
rename to static/usage/v7/ripple-effect/type/index.mdx
diff --git a/static/usage/v7/router/basic/index.md b/static/usage/v7/router/basic/index.mdx
similarity index 100%
rename from static/usage/v7/router/basic/index.md
rename to static/usage/v7/router/basic/index.mdx
diff --git a/static/usage/v7/searchbar/basic/index.md b/static/usage/v7/searchbar/basic/index.mdx
similarity index 100%
rename from static/usage/v7/searchbar/basic/index.md
rename to static/usage/v7/searchbar/basic/index.mdx
diff --git a/static/usage/v7/searchbar/cancel-button/index.md b/static/usage/v7/searchbar/cancel-button/index.mdx
similarity index 100%
rename from static/usage/v7/searchbar/cancel-button/index.md
rename to static/usage/v7/searchbar/cancel-button/index.mdx
diff --git a/static/usage/v7/searchbar/clear-button/index.md b/static/usage/v7/searchbar/clear-button/index.mdx
similarity index 100%
rename from static/usage/v7/searchbar/clear-button/index.md
rename to static/usage/v7/searchbar/clear-button/index.mdx
diff --git a/static/usage/v7/searchbar/debounce/index.md b/static/usage/v7/searchbar/debounce/index.mdx
similarity index 100%
rename from static/usage/v7/searchbar/debounce/index.md
rename to static/usage/v7/searchbar/debounce/index.mdx
diff --git a/static/usage/v7/searchbar/search-icon/index.md b/static/usage/v7/searchbar/search-icon/index.mdx
similarity index 100%
rename from static/usage/v7/searchbar/search-icon/index.md
rename to static/usage/v7/searchbar/search-icon/index.mdx
diff --git a/static/usage/v7/searchbar/theming/colors/index.md b/static/usage/v7/searchbar/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v7/searchbar/theming/colors/index.md
rename to static/usage/v7/searchbar/theming/colors/index.mdx
diff --git a/static/usage/v7/searchbar/theming/css-properties/index.md b/static/usage/v7/searchbar/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/searchbar/theming/css-properties/index.md
rename to static/usage/v7/searchbar/theming/css-properties/index.mdx
diff --git a/static/usage/v7/segment-button/basic/index.md b/static/usage/v7/segment-button/basic/index.mdx
similarity index 100%
rename from static/usage/v7/segment-button/basic/index.md
rename to static/usage/v7/segment-button/basic/index.mdx
diff --git a/static/usage/v7/segment-button/layout/index.md b/static/usage/v7/segment-button/layout/index.mdx
similarity index 100%
rename from static/usage/v7/segment-button/layout/index.md
rename to static/usage/v7/segment-button/layout/index.mdx
diff --git a/static/usage/v7/segment-button/theming/css-properties/index.md b/static/usage/v7/segment-button/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/segment-button/theming/css-properties/index.md
rename to static/usage/v7/segment-button/theming/css-properties/index.mdx
diff --git a/static/usage/v7/segment-button/theming/css-shadow-parts/index.md b/static/usage/v7/segment-button/theming/css-shadow-parts/index.mdx
similarity index 100%
rename from static/usage/v7/segment-button/theming/css-shadow-parts/index.md
rename to static/usage/v7/segment-button/theming/css-shadow-parts/index.mdx
diff --git a/static/usage/v7/segment/basic/index.md b/static/usage/v7/segment/basic/index.mdx
similarity index 100%
rename from static/usage/v7/segment/basic/index.md
rename to static/usage/v7/segment/basic/index.mdx
diff --git a/static/usage/v7/segment/scrollable/index.md b/static/usage/v7/segment/scrollable/index.mdx
similarity index 100%
rename from static/usage/v7/segment/scrollable/index.md
rename to static/usage/v7/segment/scrollable/index.mdx
diff --git a/static/usage/v7/segment/theming/colors/index.md b/static/usage/v7/segment/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v7/segment/theming/colors/index.md
rename to static/usage/v7/segment/theming/colors/index.mdx
diff --git a/static/usage/v7/segment/theming/css-properties/index.md b/static/usage/v7/segment/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/segment/theming/css-properties/index.md
rename to static/usage/v7/segment/theming/css-properties/index.mdx
diff --git a/static/usage/v7/select/basic/multiple-selection/index.md b/static/usage/v7/select/basic/multiple-selection/index.mdx
similarity index 100%
rename from static/usage/v7/select/basic/multiple-selection/index.md
rename to static/usage/v7/select/basic/multiple-selection/index.mdx
diff --git a/static/usage/v7/select/basic/responding-to-interaction/index.md b/static/usage/v7/select/basic/responding-to-interaction/index.mdx
similarity index 100%
rename from static/usage/v7/select/basic/responding-to-interaction/index.md
rename to static/usage/v7/select/basic/responding-to-interaction/index.mdx
diff --git a/static/usage/v7/select/basic/single-selection/index.md b/static/usage/v7/select/basic/single-selection/index.mdx
similarity index 100%
rename from static/usage/v7/select/basic/single-selection/index.md
rename to static/usage/v7/select/basic/single-selection/index.mdx
diff --git a/static/usage/v7/select/customization/button-text/index.md b/static/usage/v7/select/customization/button-text/index.mdx
similarity index 100%
rename from static/usage/v7/select/customization/button-text/index.md
rename to static/usage/v7/select/customization/button-text/index.mdx
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/index.md b/static/usage/v7/select/customization/custom-toggle-icons/index.mdx
similarity index 100%
rename from static/usage/v7/select/customization/custom-toggle-icons/index.md
rename to static/usage/v7/select/customization/custom-toggle-icons/index.mdx
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/index.md b/static/usage/v7/select/customization/icon-flip-behavior/index.mdx
similarity index 100%
rename from static/usage/v7/select/customization/icon-flip-behavior/index.md
rename to static/usage/v7/select/customization/icon-flip-behavior/index.mdx
diff --git a/static/usage/v7/select/customization/interface-options/index.md b/static/usage/v7/select/customization/interface-options/index.mdx
similarity index 100%
rename from static/usage/v7/select/customization/interface-options/index.md
rename to static/usage/v7/select/customization/interface-options/index.mdx
diff --git a/static/usage/v7/select/customization/styling-select/index.md b/static/usage/v7/select/customization/styling-select/index.mdx
similarity index 100%
rename from static/usage/v7/select/customization/styling-select/index.md
rename to static/usage/v7/select/customization/styling-select/index.mdx
diff --git a/static/usage/v7/select/fill/index.md b/static/usage/v7/select/fill/index.mdx
similarity index 100%
rename from static/usage/v7/select/fill/index.md
rename to static/usage/v7/select/fill/index.mdx
diff --git a/static/usage/v7/select/interfaces/action-sheet/index.md b/static/usage/v7/select/interfaces/action-sheet/index.mdx
similarity index 100%
rename from static/usage/v7/select/interfaces/action-sheet/index.md
rename to static/usage/v7/select/interfaces/action-sheet/index.mdx
diff --git a/static/usage/v7/select/interfaces/popover/index.md b/static/usage/v7/select/interfaces/popover/index.mdx
similarity index 100%
rename from static/usage/v7/select/interfaces/popover/index.md
rename to static/usage/v7/select/interfaces/popover/index.mdx
diff --git a/static/usage/v7/select/justify/index.md b/static/usage/v7/select/justify/index.mdx
similarity index 100%
rename from static/usage/v7/select/justify/index.md
rename to static/usage/v7/select/justify/index.mdx
diff --git a/static/usage/v7/select/label-placement/index.md b/static/usage/v7/select/label-placement/index.mdx
similarity index 100%
rename from static/usage/v7/select/label-placement/index.md
rename to static/usage/v7/select/label-placement/index.mdx
diff --git a/static/usage/v7/select/label-slot/index.md b/static/usage/v7/select/label-slot/index.mdx
similarity index 100%
rename from static/usage/v7/select/label-slot/index.md
rename to static/usage/v7/select/label-slot/index.mdx
diff --git a/static/usage/v7/select/migration/index.md b/static/usage/v7/select/migration/index.mdx
similarity index 100%
rename from static/usage/v7/select/migration/index.md
rename to static/usage/v7/select/migration/index.mdx
diff --git a/static/usage/v7/select/no-visible-label/index.md b/static/usage/v7/select/no-visible-label/index.mdx
similarity index 100%
rename from static/usage/v7/select/no-visible-label/index.md
rename to static/usage/v7/select/no-visible-label/index.mdx
diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/index.md b/static/usage/v7/select/objects-as-values/multiple-selection/index.mdx
similarity index 100%
rename from static/usage/v7/select/objects-as-values/multiple-selection/index.md
rename to static/usage/v7/select/objects-as-values/multiple-selection/index.mdx
diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/index.md b/static/usage/v7/select/objects-as-values/using-comparewith/index.mdx
similarity index 100%
rename from static/usage/v7/select/objects-as-values/using-comparewith/index.md
rename to static/usage/v7/select/objects-as-values/using-comparewith/index.mdx
diff --git a/static/usage/v7/select/start-end-slots/index.md b/static/usage/v7/select/start-end-slots/index.mdx
similarity index 100%
rename from static/usage/v7/select/start-end-slots/index.md
rename to static/usage/v7/select/start-end-slots/index.mdx
diff --git a/static/usage/v7/select/typeahead/index.md b/static/usage/v7/select/typeahead/index.mdx
similarity index 100%
rename from static/usage/v7/select/typeahead/index.md
rename to static/usage/v7/select/typeahead/index.mdx
diff --git a/static/usage/v7/skeleton-text/basic/index.md b/static/usage/v7/skeleton-text/basic/index.mdx
similarity index 100%
rename from static/usage/v7/skeleton-text/basic/index.md
rename to static/usage/v7/skeleton-text/basic/index.mdx
diff --git a/static/usage/v7/skeleton-text/theming/css-properties/index.md b/static/usage/v7/skeleton-text/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/skeleton-text/theming/css-properties/index.md
rename to static/usage/v7/skeleton-text/theming/css-properties/index.mdx
diff --git a/static/usage/v7/spinner/basic/index.md b/static/usage/v7/spinner/basic/index.mdx
similarity index 100%
rename from static/usage/v7/spinner/basic/index.md
rename to static/usage/v7/spinner/basic/index.mdx
diff --git a/static/usage/v7/spinner/theming/colors/index.md b/static/usage/v7/spinner/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v7/spinner/theming/colors/index.md
rename to static/usage/v7/spinner/theming/colors/index.mdx
diff --git a/static/usage/v7/spinner/theming/css-properties/index.md b/static/usage/v7/spinner/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/spinner/theming/css-properties/index.md
rename to static/usage/v7/spinner/theming/css-properties/index.mdx
diff --git a/static/usage/v7/spinner/theming/resizing/index.md b/static/usage/v7/spinner/theming/resizing/index.mdx
similarity index 100%
rename from static/usage/v7/spinner/theming/resizing/index.md
rename to static/usage/v7/spinner/theming/resizing/index.mdx
diff --git a/static/usage/v7/split-pane/basic/index.md b/static/usage/v7/split-pane/basic/index.mdx
similarity index 100%
rename from static/usage/v7/split-pane/basic/index.md
rename to static/usage/v7/split-pane/basic/index.mdx
diff --git a/static/usage/v7/split-pane/theming/css-properties/index.md b/static/usage/v7/split-pane/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/split-pane/theming/css-properties/index.md
rename to static/usage/v7/split-pane/theming/css-properties/index.mdx
diff --git a/static/usage/v7/tabs/router/index.md b/static/usage/v7/tabs/router/index.mdx
similarity index 100%
rename from static/usage/v7/tabs/router/index.md
rename to static/usage/v7/tabs/router/index.mdx
diff --git a/static/usage/v7/text/basic/index.md b/static/usage/v7/text/basic/index.mdx
similarity index 100%
rename from static/usage/v7/text/basic/index.md
rename to static/usage/v7/text/basic/index.mdx
diff --git a/static/usage/v7/textarea/autogrow/index.md b/static/usage/v7/textarea/autogrow/index.mdx
similarity index 100%
rename from static/usage/v7/textarea/autogrow/index.md
rename to static/usage/v7/textarea/autogrow/index.mdx
diff --git a/static/usage/v7/textarea/basic/index.md b/static/usage/v7/textarea/basic/index.mdx
similarity index 100%
rename from static/usage/v7/textarea/basic/index.md
rename to static/usage/v7/textarea/basic/index.mdx
diff --git a/static/usage/v7/textarea/clear-on-edit/index.md b/static/usage/v7/textarea/clear-on-edit/index.mdx
similarity index 100%
rename from static/usage/v7/textarea/clear-on-edit/index.md
rename to static/usage/v7/textarea/clear-on-edit/index.mdx
diff --git a/static/usage/v7/textarea/counter/index.md b/static/usage/v7/textarea/counter/index.mdx
similarity index 100%
rename from static/usage/v7/textarea/counter/index.md
rename to static/usage/v7/textarea/counter/index.mdx
diff --git a/static/usage/v7/textarea/fill/index.md b/static/usage/v7/textarea/fill/index.mdx
similarity index 100%
rename from static/usage/v7/textarea/fill/index.md
rename to static/usage/v7/textarea/fill/index.mdx
diff --git a/static/usage/v7/textarea/helper-error/index.md b/static/usage/v7/textarea/helper-error/index.mdx
similarity index 100%
rename from static/usage/v7/textarea/helper-error/index.md
rename to static/usage/v7/textarea/helper-error/index.mdx
diff --git a/static/usage/v7/textarea/label-placement/index.md b/static/usage/v7/textarea/label-placement/index.mdx
similarity index 100%
rename from static/usage/v7/textarea/label-placement/index.md
rename to static/usage/v7/textarea/label-placement/index.mdx
diff --git a/static/usage/v7/textarea/label-slot/index.md b/static/usage/v7/textarea/label-slot/index.mdx
similarity index 100%
rename from static/usage/v7/textarea/label-slot/index.md
rename to static/usage/v7/textarea/label-slot/index.mdx
diff --git a/static/usage/v7/textarea/migration/index.md b/static/usage/v7/textarea/migration/index.mdx
similarity index 100%
rename from static/usage/v7/textarea/migration/index.md
rename to static/usage/v7/textarea/migration/index.mdx
diff --git a/static/usage/v7/textarea/no-visible-label/index.md b/static/usage/v7/textarea/no-visible-label/index.mdx
similarity index 100%
rename from static/usage/v7/textarea/no-visible-label/index.md
rename to static/usage/v7/textarea/no-visible-label/index.mdx
diff --git a/static/usage/v7/textarea/start-end-slots/index.md b/static/usage/v7/textarea/start-end-slots/index.mdx
similarity index 100%
rename from static/usage/v7/textarea/start-end-slots/index.md
rename to static/usage/v7/textarea/start-end-slots/index.mdx
diff --git a/static/usage/v7/textarea/theming/index.md b/static/usage/v7/textarea/theming/index.mdx
similarity index 100%
rename from static/usage/v7/textarea/theming/index.md
rename to static/usage/v7/textarea/theming/index.mdx
diff --git a/static/usage/v7/theming/automatic-dark-mode/index.md b/static/usage/v7/theming/automatic-dark-mode/index.mdx
similarity index 100%
rename from static/usage/v7/theming/automatic-dark-mode/index.md
rename to static/usage/v7/theming/automatic-dark-mode/index.mdx
diff --git a/static/usage/v7/theming/manual-dark-mode/index.md b/static/usage/v7/theming/manual-dark-mode/index.mdx
similarity index 100%
rename from static/usage/v7/theming/manual-dark-mode/index.md
rename to static/usage/v7/theming/manual-dark-mode/index.mdx
diff --git a/static/usage/v7/thumbnail/basic/index.md b/static/usage/v7/thumbnail/basic/index.mdx
similarity index 100%
rename from static/usage/v7/thumbnail/basic/index.md
rename to static/usage/v7/thumbnail/basic/index.mdx
diff --git a/static/usage/v7/thumbnail/item/index.md b/static/usage/v7/thumbnail/item/index.mdx
similarity index 100%
rename from static/usage/v7/thumbnail/item/index.md
rename to static/usage/v7/thumbnail/item/index.mdx
diff --git a/static/usage/v7/thumbnail/theming/css-properties/index.md b/static/usage/v7/thumbnail/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/thumbnail/theming/css-properties/index.md
rename to static/usage/v7/thumbnail/theming/css-properties/index.mdx
diff --git a/static/usage/v7/title/basic/index.md b/static/usage/v7/title/basic/index.mdx
similarity index 100%
rename from static/usage/v7/title/basic/index.md
rename to static/usage/v7/title/basic/index.mdx
diff --git a/static/usage/v7/title/collapsible-large-title/basic/index.md b/static/usage/v7/title/collapsible-large-title/basic/index.mdx
similarity index 100%
rename from static/usage/v7/title/collapsible-large-title/basic/index.md
rename to static/usage/v7/title/collapsible-large-title/basic/index.mdx
diff --git a/static/usage/v7/title/collapsible-large-title/buttons/index.md b/static/usage/v7/title/collapsible-large-title/buttons/index.mdx
similarity index 100%
rename from static/usage/v7/title/collapsible-large-title/buttons/index.md
rename to static/usage/v7/title/collapsible-large-title/buttons/index.mdx
diff --git a/static/usage/v7/title/theming/css-properties/index.md b/static/usage/v7/title/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/title/theming/css-properties/index.md
rename to static/usage/v7/title/theming/css-properties/index.mdx
diff --git a/static/usage/v7/toast/buttons/index.md b/static/usage/v7/toast/buttons/index.mdx
similarity index 100%
rename from static/usage/v7/toast/buttons/index.md
rename to static/usage/v7/toast/buttons/index.mdx
diff --git a/static/usage/v7/toast/icon/index.md b/static/usage/v7/toast/icon/index.mdx
similarity index 100%
rename from static/usage/v7/toast/icon/index.md
rename to static/usage/v7/toast/icon/index.mdx
diff --git a/static/usage/v7/toast/inline/basic/index.md b/static/usage/v7/toast/inline/basic/index.mdx
similarity index 100%
rename from static/usage/v7/toast/inline/basic/index.md
rename to static/usage/v7/toast/inline/basic/index.mdx
diff --git a/static/usage/v7/toast/inline/is-open/index.md b/static/usage/v7/toast/inline/is-open/index.mdx
similarity index 100%
rename from static/usage/v7/toast/inline/is-open/index.md
rename to static/usage/v7/toast/inline/is-open/index.mdx
diff --git a/static/usage/v7/toast/layout/index.md b/static/usage/v7/toast/layout/index.mdx
similarity index 100%
rename from static/usage/v7/toast/layout/index.md
rename to static/usage/v7/toast/layout/index.mdx
diff --git a/static/usage/v7/toast/position-anchor/index.md b/static/usage/v7/toast/position-anchor/index.mdx
similarity index 100%
rename from static/usage/v7/toast/position-anchor/index.md
rename to static/usage/v7/toast/position-anchor/index.mdx
diff --git a/static/usage/v7/toast/presenting/controller/index.md b/static/usage/v7/toast/presenting/controller/index.mdx
similarity index 100%
rename from static/usage/v7/toast/presenting/controller/index.md
rename to static/usage/v7/toast/presenting/controller/index.mdx
diff --git a/static/usage/v7/toast/swipe-gesture/index.md b/static/usage/v7/toast/swipe-gesture/index.mdx
similarity index 100%
rename from static/usage/v7/toast/swipe-gesture/index.md
rename to static/usage/v7/toast/swipe-gesture/index.mdx
diff --git a/static/usage/v7/toast/theming/index.md b/static/usage/v7/toast/theming/index.mdx
similarity index 100%
rename from static/usage/v7/toast/theming/index.md
rename to static/usage/v7/toast/theming/index.mdx
diff --git a/static/usage/v7/toggle/alignment/index.md b/static/usage/v7/toggle/alignment/index.mdx
similarity index 100%
rename from static/usage/v7/toggle/alignment/index.md
rename to static/usage/v7/toggle/alignment/index.mdx
diff --git a/static/usage/v7/toggle/basic/index.md b/static/usage/v7/toggle/basic/index.mdx
similarity index 100%
rename from static/usage/v7/toggle/basic/index.md
rename to static/usage/v7/toggle/basic/index.mdx
diff --git a/static/usage/v7/toggle/justify/index.md b/static/usage/v7/toggle/justify/index.mdx
similarity index 100%
rename from static/usage/v7/toggle/justify/index.md
rename to static/usage/v7/toggle/justify/index.mdx
diff --git a/static/usage/v7/toggle/label-placement/index.md b/static/usage/v7/toggle/label-placement/index.mdx
similarity index 100%
rename from static/usage/v7/toggle/label-placement/index.md
rename to static/usage/v7/toggle/label-placement/index.mdx
diff --git a/static/usage/v7/toggle/list/index.md b/static/usage/v7/toggle/list/index.mdx
similarity index 100%
rename from static/usage/v7/toggle/list/index.md
rename to static/usage/v7/toggle/list/index.mdx
diff --git a/static/usage/v7/toggle/migration/index.md b/static/usage/v7/toggle/migration/index.mdx
similarity index 100%
rename from static/usage/v7/toggle/migration/index.md
rename to static/usage/v7/toggle/migration/index.mdx
diff --git a/static/usage/v7/toggle/on-off/index.md b/static/usage/v7/toggle/on-off/index.mdx
similarity index 100%
rename from static/usage/v7/toggle/on-off/index.md
rename to static/usage/v7/toggle/on-off/index.mdx
diff --git a/static/usage/v7/toggle/theming/colors/index.md b/static/usage/v7/toggle/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v7/toggle/theming/colors/index.md
rename to static/usage/v7/toggle/theming/colors/index.mdx
diff --git a/static/usage/v7/toggle/theming/css-properties/index.md b/static/usage/v7/toggle/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/toggle/theming/css-properties/index.md
rename to static/usage/v7/toggle/theming/css-properties/index.mdx
diff --git a/static/usage/v7/toggle/theming/css-shadow-parts/index.md b/static/usage/v7/toggle/theming/css-shadow-parts/index.mdx
similarity index 100%
rename from static/usage/v7/toggle/theming/css-shadow-parts/index.md
rename to static/usage/v7/toggle/theming/css-shadow-parts/index.mdx
diff --git a/static/usage/v7/toolbar/basic/index.md b/static/usage/v7/toolbar/basic/index.mdx
similarity index 100%
rename from static/usage/v7/toolbar/basic/index.md
rename to static/usage/v7/toolbar/basic/index.mdx
diff --git a/static/usage/v7/toolbar/buttons/index.md b/static/usage/v7/toolbar/buttons/index.mdx
similarity index 100%
rename from static/usage/v7/toolbar/buttons/index.md
rename to static/usage/v7/toolbar/buttons/index.mdx
diff --git a/static/usage/v7/toolbar/progress-bars/index.md b/static/usage/v7/toolbar/progress-bars/index.mdx
similarity index 100%
rename from static/usage/v7/toolbar/progress-bars/index.md
rename to static/usage/v7/toolbar/progress-bars/index.mdx
diff --git a/static/usage/v7/toolbar/searchbars/index.md b/static/usage/v7/toolbar/searchbars/index.mdx
similarity index 100%
rename from static/usage/v7/toolbar/searchbars/index.md
rename to static/usage/v7/toolbar/searchbars/index.mdx
diff --git a/static/usage/v7/toolbar/segments/index.md b/static/usage/v7/toolbar/segments/index.mdx
similarity index 100%
rename from static/usage/v7/toolbar/segments/index.md
rename to static/usage/v7/toolbar/segments/index.mdx
diff --git a/static/usage/v7/toolbar/theming/colors/index.md b/static/usage/v7/toolbar/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v7/toolbar/theming/colors/index.md
rename to static/usage/v7/toolbar/theming/colors/index.mdx
diff --git a/static/usage/v7/toolbar/theming/css-properties/index.md b/static/usage/v7/toolbar/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v7/toolbar/theming/css-properties/index.md
rename to static/usage/v7/toolbar/theming/css-properties/index.mdx
diff --git a/versioned_docs/version-v7/angular/build-options.md b/versioned_docs/version-v7/angular/build-options.mdx
similarity index 100%
rename from versioned_docs/version-v7/angular/build-options.md
rename to versioned_docs/version-v7/angular/build-options.mdx
diff --git a/versioned_docs/version-v7/angular/lifecycle.md b/versioned_docs/version-v7/angular/lifecycle.mdx
similarity index 100%
rename from versioned_docs/version-v7/angular/lifecycle.md
rename to versioned_docs/version-v7/angular/lifecycle.mdx
diff --git a/versioned_docs/version-v7/angular/navigation.md b/versioned_docs/version-v7/angular/navigation.mdx
similarity index 100%
rename from versioned_docs/version-v7/angular/navigation.md
rename to versioned_docs/version-v7/angular/navigation.mdx
diff --git a/versioned_docs/version-v7/angular/overview.md b/versioned_docs/version-v7/angular/overview.mdx
similarity index 100%
rename from versioned_docs/version-v7/angular/overview.md
rename to versioned_docs/version-v7/angular/overview.mdx
diff --git a/versioned_docs/version-v7/angular/performance.md b/versioned_docs/version-v7/angular/performance.mdx
similarity index 100%
rename from versioned_docs/version-v7/angular/performance.md
rename to versioned_docs/version-v7/angular/performance.mdx
diff --git a/versioned_docs/version-v7/angular/platform.md b/versioned_docs/version-v7/angular/platform.mdx
similarity index 100%
rename from versioned_docs/version-v7/angular/platform.md
rename to versioned_docs/version-v7/angular/platform.mdx
diff --git a/versioned_docs/version-v7/angular/pwa.md b/versioned_docs/version-v7/angular/pwa.mdx
similarity index 100%
rename from versioned_docs/version-v7/angular/pwa.md
rename to versioned_docs/version-v7/angular/pwa.mdx
diff --git a/versioned_docs/version-v7/angular/quickstart.md b/versioned_docs/version-v7/angular/quickstart.mdx
similarity index 94%
rename from versioned_docs/version-v7/angular/quickstart.md
rename to versioned_docs/version-v7/angular/quickstart.mdx
index 39e6aed97aa..3332c74ab32 100644
--- a/versioned_docs/version-v7/angular/quickstart.md
+++ b/versioned_docs/version-v7/angular/quickstart.mdx
@@ -172,15 +172,15 @@ And the template, in the `home.page.html` file, uses those components:
 </ion-content>
 ```
 
-This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
+This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.mdx#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
 :::tip[Learn More]
-For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
+For detailed information about Ionic layout components, see the [Header](/docs/api/header.mdx), [Toolbar](/docs/api/toolbar.mdx), [Title](/docs/api/title.mdx), and [Content](/docs/api/content.mdx) documentation.
 :::
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.md) at the end of the `ion-content`:
+You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.mdx) at the end of the `ion-content`:
 
 ```html title="src/app/home/home.page.html"
 <ion-content>
@@ -211,7 +211,7 @@ ionic generate page new
 
 A route will be automatically added to `app.routes.ts`.
 
-In `new.page.html`, you can add a [Back Button](/docs/api/back-button.md) to the [Toolbar](/docs/api/toolbar.md):
+In `new.page.html`, you can add a [Back Button](/docs/api/back-button.mdx) to the [Toolbar](/docs/api/toolbar.mdx):
 
 ```html title="src/app/new/new.page.html"
 <ion-header [translucent]="true">
@@ -257,7 +257,7 @@ import { RouterLink } from '@angular/router';
 ```
 
 :::info
-Navigating can also be performed using Angular's Router service. See the [Angular Navigation documentation](/docs/angular/navigation.md#navigating-to-different-routes) for more information.
+Navigating can also be performed using Angular's Router service. See the [Angular Navigation documentation](/docs/angular/navigation.mdx#navigating-to-different-routes) for more information.
 :::
 
 ## Add Icons to the New Page
@@ -301,7 +301,7 @@ export class NewPage implements OnInit {
 
 Alternatively, you can register icons in `app.component.ts` to use them throughout your app.
 
-For more information, see the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
+For more information, see the [Icon documentation](/docs/api/icon.mdx) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
 ## Call Component Methods
 
@@ -387,7 +387,7 @@ To call methods on Ionic components:
 1. Create a `ViewChild` reference for the component
 2. Call the method directly on the component instance
 
-You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation.
+You can find available methods for each component in the [Methods](/docs/api/content.mdx#methods) section of their API documentation.
 
 ## Run on a Device
 
diff --git a/versioned_docs/version-v7/angular/slides.md b/versioned_docs/version-v7/angular/slides.mdx
similarity index 100%
rename from versioned_docs/version-v7/angular/slides.md
rename to versioned_docs/version-v7/angular/slides.mdx
diff --git a/versioned_docs/version-v7/angular/storage.md b/versioned_docs/version-v7/angular/storage.mdx
similarity index 100%
rename from versioned_docs/version-v7/angular/storage.md
rename to versioned_docs/version-v7/angular/storage.mdx
diff --git a/versioned_docs/version-v7/angular/testing.md b/versioned_docs/version-v7/angular/testing.mdx
similarity index 100%
rename from versioned_docs/version-v7/angular/testing.md
rename to versioned_docs/version-v7/angular/testing.mdx
diff --git a/versioned_docs/version-v7/angular/virtual-scroll.md b/versioned_docs/version-v7/angular/virtual-scroll.mdx
similarity index 100%
rename from versioned_docs/version-v7/angular/virtual-scroll.md
rename to versioned_docs/version-v7/angular/virtual-scroll.mdx
diff --git a/versioned_docs/version-v7/angular/your-first-app.md b/versioned_docs/version-v7/angular/your-first-app.mdx
similarity index 92%
rename from versioned_docs/version-v7/angular/your-first-app.md
rename to versioned_docs/version-v7/angular/your-first-app.mdx
index 33da48ce580..0865ab0a747 100644
--- a/versioned_docs/version-v7/angular/your-first-app.md
+++ b/versioned_docs/version-v7/angular/your-first-app.mdx
@@ -25,7 +25,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
@@ -34,9 +34,9 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
 
 Highlights include:
 
-- One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.md).
+- One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.mdx).
 - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
-- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs.
+- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.mdx), [Filesystem](../native/filesystem.mdx), and [Preferences](../native/preferences.mdx) APIs.
 
 Find the [complete app code](https://github.com/ionic-team/tutorial-photo-gallery-angular) referenced in this guide on GitHub.
 
@@ -65,7 +65,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
@@ -98,7 +98,7 @@ npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
 
 ### PWA Elements
 
-Some Capacitor plugins, including the [Camera API](../native/camera.md), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements).
+Some Capacitor plugins, including the [Camera API](../native/camera.mdx), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements).
 
 It's a separate dependency, so install it next:
 
@@ -160,7 +160,7 @@ Open `/src/app/tab2/tab2.page.html`. We see:
 </ion-content>
 ```
 
-`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.md#collapsible-large-titles) support). Rename both `ion-title` elements to:
+`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.mdx#collapsible-large-titles) support). Rename both `ion-title` elements to:
 
 ```html
 <ion-header [translucent]="true">
@@ -182,7 +182,7 @@ Open `/src/app/tab2/tab2.page.html`. We see:
 </ion-content>
 ```
 
-We put the visual aspects of our app into `<ion-content>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.md) (FAB) to the bottom of the page and set the camera image as the icon.
+We put the visual aspects of our app into `<ion-content>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.mdx) (FAB) to the bottom of the page and set the camera image as the icon.
 
 ```html
 <ion-header [translucent]="true">
diff --git a/versioned_docs/version-v7/angular/your-first-app/2-taking-photos.md b/versioned_docs/version-v7/angular/your-first-app/2-taking-photos.mdx
similarity index 94%
rename from versioned_docs/version-v7/angular/your-first-app/2-taking-photos.md
rename to versioned_docs/version-v7/angular/your-first-app/2-taking-photos.mdx
index 5d3b3dec862..bf357f59e20 100644
--- a/versioned_docs/version-v7/angular/your-first-app/2-taking-photos.md
+++ b/versioned_docs/version-v7/angular/your-first-app/2-taking-photos.mdx
@@ -11,7 +11,7 @@ sidebar_label: Taking Photos
   />
 </head>
 
-Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.md). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android).
+Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.mdx). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android).
 
 ## Photo Service
 
@@ -197,7 +197,7 @@ export interface UserPhoto {
 }
 ```
 
-Next, switch to `tab2.page.html` to display the images. We'll add a [Grid component](../../api/grid.md) to ensure the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `PhotoService`'s `photos` array. For each item, add an [Image component](../../api/img.md) and set its `src` property to the photo's path.
+Next, switch to `tab2.page.html` to display the images. We'll add a [Grid component](../../api/grid.mdx) to ensure the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `PhotoService`'s `photos` array. For each item, add an [Image component](../../api/img.mdx) and set its `src` property to the photo's path.
 
 ```html
 <ion-header [translucent]="true">
diff --git a/versioned_docs/version-v7/angular/your-first-app/3-saving-photos.md b/versioned_docs/version-v7/angular/your-first-app/3-saving-photos.mdx
similarity index 98%
rename from versioned_docs/version-v7/angular/your-first-app/3-saving-photos.md
rename to versioned_docs/version-v7/angular/your-first-app/3-saving-photos.mdx
index 4212757730d..72d809be232 100644
--- a/versioned_docs/version-v7/angular/your-first-app/3-saving-photos.md
+++ b/versioned_docs/version-v7/angular/your-first-app/3-saving-photos.mdx
@@ -86,7 +86,7 @@ export interface UserPhoto {
 }
 ```
 
-We'll use the Capacitor [Filesystem API](../../native/filesystem.md) to save the photo. First, convert the photo to base64 format.
+We'll use the Capacitor [Filesystem API](../../native/filesystem.mdx) to save the photo. First, convert the photo to base64 format.
 
 Then, pass the data to the Filesystem's `writeFile` method. Recall that we display photos by setting the image's source path (`src`) to the `webviewPath` property. So, set the `webviewPath` and return the new `Photo` object.
 
diff --git a/versioned_docs/version-v7/angular/your-first-app/4-loading-photos.md b/versioned_docs/version-v7/angular/your-first-app/4-loading-photos.mdx
similarity index 98%
rename from versioned_docs/version-v7/angular/your-first-app/4-loading-photos.md
rename to versioned_docs/version-v7/angular/your-first-app/4-loading-photos.mdx
index db1919122c6..cc280e04ffc 100644
--- a/versioned_docs/version-v7/angular/your-first-app/4-loading-photos.md
+++ b/versioned_docs/version-v7/angular/your-first-app/4-loading-photos.mdx
@@ -13,7 +13,7 @@ sidebar_label: Loading Photos
 
 We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery.
 
-Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](../../native/preferences.md) to store our array of Photos in a key-value store.
+Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](../../native/preferences.mdx) to store our array of Photos in a key-value store.
 
 ## Preferences API
 
diff --git a/versioned_docs/version-v7/angular/your-first-app/5-adding-mobile.md b/versioned_docs/version-v7/angular/your-first-app/5-adding-mobile.mdx
similarity index 95%
rename from versioned_docs/version-v7/angular/your-first-app/5-adding-mobile.md
rename to versioned_docs/version-v7/angular/your-first-app/5-adding-mobile.mdx
index aee2ab86be9..6925d30d93a 100644
--- a/versioned_docs/version-v7/angular/your-first-app/5-adding-mobile.md
+++ b/versioned_docs/version-v7/angular/your-first-app/5-adding-mobile.mdx
@@ -17,7 +17,7 @@ Our photo gallery app won’t be complete until it runs on iOS, Android, and the
 
 Let’s start with making some small code changes - then our app will “just work” when we deploy it to a device.
 
-Import the Ionic [Platform API](../platform.md) into `photo.service.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile).
+Import the Ionic [Platform API](../platform.mdx) into `photo.service.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile).
 
 Add `Platform` to the imports at the top of the file and a new property `platform` to the `PhotoService` class. We'll also need to update the constructor to set the user's platform.
 
@@ -93,7 +93,7 @@ private async savePicture(photo: Photo) {
 }
 ```
 
-When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details on the File Protocol](../../core-concepts/webview.md#file-protocol)). To use this method, we'll need to import Capacitor into `photo.service.ts`.
+When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details on the File Protocol](../../core-concepts/webview.mdx#file-protocol)). To use this method, we'll need to import Capacitor into `photo.service.ts`.
 
 ```ts
 import { Injectable } from '@angular/core';
diff --git a/versioned_docs/version-v7/angular/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v7/angular/your-first-app/6-deploying-mobile.mdx
similarity index 100%
rename from versioned_docs/version-v7/angular/your-first-app/6-deploying-mobile.md
rename to versioned_docs/version-v7/angular/your-first-app/6-deploying-mobile.mdx
diff --git a/versioned_docs/version-v7/angular/your-first-app/7-live-reload.md b/versioned_docs/version-v7/angular/your-first-app/7-live-reload.mdx
similarity index 94%
rename from versioned_docs/version-v7/angular/your-first-app/7-live-reload.md
rename to versioned_docs/version-v7/angular/your-first-app/7-live-reload.mdx
index 96b58ced5ef..a538a05c1c3 100644
--- a/versioned_docs/version-v7/angular/your-first-app/7-live-reload.md
+++ b/versioned_docs/version-v7/angular/your-first-app/7-live-reload.mdx
@@ -13,7 +13,7 @@ sidebar_label: Live Reload
 
 So far, we’ve seen how easy it is to develop a cross-platform app that works everywhere. The development experience is pretty quick, but what if I told you there was a way to go faster?
 
-We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.md) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
+We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.mdx) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
 
 ## Live Reload
 
@@ -129,7 +129,7 @@ export class Tab2Page {
 }
 ```
 
-Open `tab2.page.html` and add a new click handler to each `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](../../api/action-sheet.md) dialog with the option to either delete the selected photo or cancel (close) the dialog.
+Open `tab2.page.html` and add a new click handler to each `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](../../api/action-sheet.mdx) dialog with the option to either delete the selected photo or cancel (close) the dialog.
 
 ```html
 <ion-header [translucent]="true">
diff --git a/versioned_docs/version-v7/angular/your-first-app/8-distribute.md b/versioned_docs/version-v7/angular/your-first-app/8-distribute.mdx
similarity index 97%
rename from versioned_docs/version-v7/angular/your-first-app/8-distribute.md
rename to versioned_docs/version-v7/angular/your-first-app/8-distribute.mdx
index bf495f68421..f66a2d7ea8e 100644
--- a/versioned_docs/version-v7/angular/your-first-app/8-distribute.md
+++ b/versioned_docs/version-v7/angular/your-first-app/8-distribute.mdx
@@ -102,6 +102,6 @@ For access to the ability to create a Native Configuration, you will need to be
 
 Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to your users' devices!
 
-There are many paths to follow from here. Try adding another [Ionic UI component](../../components.md) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
+There are many paths to follow from here. Try adding another [Ionic UI component](../../components.mdx) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
 
 Happy app building! 💙
diff --git a/versioned_docs/version-v7/api.md b/versioned_docs/version-v7/api.mdx
similarity index 100%
rename from versioned_docs/version-v7/api.md
rename to versioned_docs/version-v7/api.mdx
diff --git a/versioned_docs/version-v7/api/accordion-group.md b/versioned_docs/version-v7/api/accordion-group.mdx
similarity index 94%
rename from versioned_docs/version-v7/api/accordion-group.md
rename to versioned_docs/version-v7/api/accordion-group.mdx
index 5ed5efee327..02465126c8e 100644
--- a/versioned_docs/version-v7/api/accordion-group.md
+++ b/versioned_docs/version-v7/api/accordion-group.mdx
@@ -2,12 +2,12 @@
 title: 'ion-accordion-group'
 ---
 
-import Props from '@ionic-internal/component-api/v7/accordion-group/props.md';
-import Events from '@ionic-internal/component-api/v7/accordion-group/events.md';
-import Methods from '@ionic-internal/component-api/v7/accordion-group/methods.md';
-import Parts from '@ionic-internal/component-api/v7/accordion-group/parts.md';
+import Props from '@ionic-internal/component-api/v7/accordion-group/props.mdx';
+import Events from '@ionic-internal/component-api/v7/accordion-group/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/accordion-group/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/accordion-group/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/accordion-group/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/accordion-group/slots.md';
+import Slots from '@ionic-internal/component-api/v7/accordion-group/slots.mdx';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v7/api/accordion.md b/versioned_docs/version-v7/api/accordion.mdx
similarity index 96%
rename from versioned_docs/version-v7/api/accordion.md
rename to versioned_docs/version-v7/api/accordion.mdx
index 47528bcef02..6b8f1e7582e 100644
--- a/versioned_docs/version-v7/api/accordion.md
+++ b/versioned_docs/version-v7/api/accordion.mdx
@@ -2,12 +2,12 @@
 title: 'ion-accordion'
 ---
 
-import Props from '@ionic-internal/component-api/v7/accordion/props.md';
-import Events from '@ionic-internal/component-api/v7/accordion/events.md';
-import Methods from '@ionic-internal/component-api/v7/accordion/methods.md';
-import Parts from '@ionic-internal/component-api/v7/accordion/parts.md';
+import Props from '@ionic-internal/component-api/v7/accordion/props.mdx';
+import Events from '@ionic-internal/component-api/v7/accordion/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/accordion/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/accordion/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/accordion/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/accordion/slots.md';
+import Slots from '@ionic-internal/component-api/v7/accordion/slots.mdx';
 
 <head>
   <title>ion-accordion: Accordion Components: How to Build & Examples</title>
@@ -25,7 +25,7 @@ Accordions provide collapsible sections in your content to reduce vertical space
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/accordion/basic/index.md';
+import Basic from '@site/static/usage/v7/accordion/basic/index.mdx';
 
 <Basic />
 
@@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v7/accordion/basic/index.md';
 
 Which accordion is open is controlled by setting the `value` property on `ion-accordion-group`. Setting this property allows developers to programmatically expand or collapse certain accordions.
 
-import Toggle from '@site/static/usage/v7/accordion/toggle/index.md';
+import Toggle from '@site/static/usage/v7/accordion/toggle/index.mdx';
 
 <Toggle />
 
@@ -47,7 +47,7 @@ When using other components that emit `ionChange` inside of Accordion it is reco
 
 Developers can listen for the `ionChange` event to be notified when accordions expand or collapse.
 
-import ListenChanges from '@site/static/usage/v7/accordion/listen-changes/index.md';
+import ListenChanges from '@site/static/usage/v7/accordion/listen-changes/index.mdx';
 
 <ListenChanges />
 
@@ -55,7 +55,7 @@ import ListenChanges from '@site/static/usage/v7/accordion/listen-changes/index.
 
 Developers can allow multiple accordions to be open at once with the `multiple` property.
 
-import Multiple from '@site/static/usage/v7/accordion/multiple/index.md';
+import Multiple from '@site/static/usage/v7/accordion/multiple/index.mdx';
 
 <Multiple />
 
@@ -65,7 +65,7 @@ import Multiple from '@site/static/usage/v7/accordion/multiple/index.md';
 
 Individual accordions can be disabled with the `disabled` property on `ion-accordion`.
 
-import DisableIndividual from '@site/static/usage/v7/accordion/disable/individual/index.md';
+import DisableIndividual from '@site/static/usage/v7/accordion/disable/individual/index.mdx';
 
 <DisableIndividual />
 
@@ -73,7 +73,7 @@ import DisableIndividual from '@site/static/usage/v7/accordion/disable/individua
 
 The accordion group can be disabled with the `disabled` property on `ion-accordion-group`.
 
-import DisableGroup from '@site/static/usage/v7/accordion/disable/group/index.md';
+import DisableGroup from '@site/static/usage/v7/accordion/disable/group/index.mdx';
 
 <DisableGroup />
 
@@ -83,7 +83,7 @@ import DisableGroup from '@site/static/usage/v7/accordion/disable/group/index.md
 
 Individual accordions can be disabled with the `readonly` property on `ion-accordion`.
 
-import ReadonlyIndividual from '@site/static/usage/v7/accordion/readonly/individual/index.md';
+import ReadonlyIndividual from '@site/static/usage/v7/accordion/readonly/individual/index.mdx';
 
 <ReadonlyIndividual />
 
@@ -91,7 +91,7 @@ import ReadonlyIndividual from '@site/static/usage/v7/accordion/readonly/individ
 
 The accordion group can be disabled with the `readonly` property on `ion-accordion-group`.
 
-import ReadonlyGroup from '@site/static/usage/v7/accordion/readonly/group/index.md';
+import ReadonlyGroup from '@site/static/usage/v7/accordion/readonly/group/index.mdx';
 
 <ReadonlyGroup />
 
@@ -115,7 +115,7 @@ There are two built in expansion styles: `compact` and `inset`. This expansion s
 
 When `expand="inset"`, the accordion group is given a border radius. On `md` mode, the entire accordion will shift down when it is opened.
 
-import ExpansionStyles from '@site/static/usage/v7/accordion/customization/expansion-styles/index.md';
+import ExpansionStyles from '@site/static/usage/v7/accordion/customization/expansion-styles/index.mdx';
 
 <ExpansionStyles />
 
@@ -139,7 +139,7 @@ ion-accordion.accordion-expanded ion-item[slot='header'] {
 }
 ```
 
-import AdvancedExpansionStyles from '@site/static/usage/v7/accordion/customization/advanced-expansion-styles/index.md';
+import AdvancedExpansionStyles from '@site/static/usage/v7/accordion/customization/advanced-expansion-styles/index.mdx';
 
 <AdvancedExpansionStyles />
 
@@ -151,7 +151,7 @@ If you would like to manage the icon yourself or use an icon that is not an `ion
 
 Regardless of which option you choose, the icon will automatically be rotated when you expand or collapse the accordion.
 
-import Icons from '@site/static/usage/v7/accordion/customization/icons/index.md';
+import Icons from '@site/static/usage/v7/accordion/customization/icons/index.mdx';
 
 <Icons />
 
@@ -159,7 +159,7 @@ import Icons from '@site/static/usage/v7/accordion/customization/icons/index.md'
 
 Since `ion-accordion` acts as a shell around the header and content elements, you can easily theme the accordion however you would like. You can theme the header by targeting the slotted `ion-item`. Since you are using `ion-item`, you also have access to all of the [ion-item CSS Variables](./item#css-custom-properties) and [ion-item Shadow Parts](./item#css-shadow-parts). Theming the content is also easily achieved by targeting the element that is in the `content` slot.
 
-import Theming from '@site/static/usage/v7/accordion/customization/theming/index.md';
+import Theming from '@site/static/usage/v7/accordion/customization/theming/index.mdx';
 
 <Theming />
 
@@ -169,7 +169,7 @@ import Theming from '@site/static/usage/v7/accordion/customization/theming/index
 
 By default, animations are enabled when expanding or collapsing an accordion item. Animations will be automatically disabled when the `prefers-reduced-motion` media query is supported and set to `reduce`. For browsers that do not support this, animations can be disabled by setting the `animated` config in your Ionic Framework app.
 
-import AccessibilityAnimations from '@site/static/usage/v7/accordion/accessibility/animations/index.md';
+import AccessibilityAnimations from '@site/static/usage/v7/accordion/accessibility/animations/index.mdx';
 
 <AccessibilityAnimations />
 
diff --git a/versioned_docs/version-v7/api/action-sheet.md b/versioned_docs/version-v7/api/action-sheet.mdx
similarity index 97%
rename from versioned_docs/version-v7/api/action-sheet.md
rename to versioned_docs/version-v7/api/action-sheet.mdx
index 2b3cade3e37..46a56757fca 100644
--- a/versioned_docs/version-v7/api/action-sheet.md
+++ b/versioned_docs/version-v7/api/action-sheet.mdx
@@ -5,12 +5,12 @@ title: 'ion-action-sheet'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v7/action-sheet/props.md';
-import Events from '@ionic-internal/component-api/v7/action-sheet/events.md';
-import Methods from '@ionic-internal/component-api/v7/action-sheet/methods.md';
-import Parts from '@ionic-internal/component-api/v7/action-sheet/parts.md';
+import Props from '@ionic-internal/component-api/v7/action-sheet/props.mdx';
+import Events from '@ionic-internal/component-api/v7/action-sheet/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/action-sheet/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/action-sheet/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/action-sheet/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/action-sheet/slots.md';
+import Slots from '@ionic-internal/component-api/v7/action-sheet/slots.mdx';
 
 <head>
   <title>ion-action-sheet: Action Sheet Dialog for iOS and Android</title>
@@ -30,7 +30,7 @@ An Action Sheet is a dialog that displays a set of options. It appears on top of
 
 `ion-action-sheet` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the Action Sheet.
 
-import Trigger from '@site/static/usage/v7/action-sheet/inline/trigger/index.md';
+import Trigger from '@site/static/usage/v7/action-sheet/inline/trigger/index.mdx';
 
 <Trigger />
 
@@ -40,7 +40,7 @@ The `isOpen` property on `ion-action-sheet` allows developers to control the pre
 
 `isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the Action Sheet is dismissed. Developers should listen for the `ionActionSheetDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-action-sheet` from being tightly coupled with the state of the application. With a one way data binding, the Action Sheet only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Action Sheet needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug.
 
-import IsOpen from '@site/static/usage/v7/action-sheet/inline/isOpen/index.md';
+import IsOpen from '@site/static/usage/v7/action-sheet/inline/isOpen/index.mdx';
 
 <IsOpen />
 
@@ -48,7 +48,7 @@ import IsOpen from '@site/static/usage/v7/action-sheet/inline/isOpen/index.md';
 
 The `actionSheetController` can be used in situations where more control is needed over when the Action Sheet is presented and dismissed.
 
-import Controller from '@site/static/usage/v7/action-sheet/controller/index.md';
+import Controller from '@site/static/usage/v7/action-sheet/controller/index.mdx';
 
 <Controller />
 
@@ -62,7 +62,7 @@ A button can also be passed data via the `data` property on `ActionSheetButton`.
 
 When the `didDismiss` event is fired, the `data` and `role` fields of the event detail can be used to gather information about how the Action Sheet was dismissed.
 
-import RoleInfo from '@site/static/usage/v7/action-sheet/role-info-on-dismiss/index.md';
+import RoleInfo from '@site/static/usage/v7/action-sheet/role-info-on-dismiss/index.mdx';
 
 <RoleInfo />
 
@@ -86,7 +86,7 @@ We recommend passing a custom class to `cssClass` in the `create` method and usi
 }
 ```
 
-import Styling from '@site/static/usage/v7/action-sheet/theming/styling/index.md';
+import Styling from '@site/static/usage/v7/action-sheet/theming/styling/index.mdx';
 
 <Styling />
 
@@ -94,7 +94,7 @@ import Styling from '@site/static/usage/v7/action-sheet/theming/styling/index.md
 
 Any of the defined [CSS Custom Properties](#css-custom-properties-1) can be used to style the Action Sheet without needing to target individual elements.
 
-import CssCustomProperties from '@site/static/usage/v7/action-sheet/theming/css-properties/index.md';
+import CssCustomProperties from '@site/static/usage/v7/action-sheet/theming/css-properties/index.mdx';
 
 <CssCustomProperties />
 
diff --git a/versioned_docs/version-v7/api/alert.md b/versioned_docs/version-v7/api/alert.mdx
similarity index 98%
rename from versioned_docs/version-v7/api/alert.md
rename to versioned_docs/version-v7/api/alert.mdx
index 5076362c822..55a53e7a06e 100644
--- a/versioned_docs/version-v7/api/alert.md
+++ b/versioned_docs/version-v7/api/alert.mdx
@@ -5,12 +5,12 @@ title: 'ion-alert'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v7/alert/props.md';
-import Events from '@ionic-internal/component-api/v7/alert/events.md';
-import Methods from '@ionic-internal/component-api/v7/alert/methods.md';
-import Parts from '@ionic-internal/component-api/v7/alert/parts.md';
+import Props from '@ionic-internal/component-api/v7/alert/props.mdx';
+import Events from '@ionic-internal/component-api/v7/alert/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/alert/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/alert/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/alert/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/alert/slots.md';
+import Slots from '@ionic-internal/component-api/v7/alert/slots.mdx';
 
 <head>
   <title>ion-alert: Ionic Alert Buttons with Custom Message Prompts</title>
@@ -30,7 +30,7 @@ An Alert is a dialog that presents users with information or collects informatio
 
 `ion-alert` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the Alert.
 
-import Trigger from '@site/static/usage/v7/alert/presenting/trigger/index.md';
+import Trigger from '@site/static/usage/v7/alert/presenting/trigger/index.mdx';
 
 <Trigger />
 
@@ -40,7 +40,7 @@ The `isOpen` property on `ion-alert` allows developers to control the presentati
 
 `isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the Alert is dismissed. Developers should listen for the `ionAlertDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-alert` from being tightly coupled with the state of the application. With a one way data binding, the Alert only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Alert needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug.
 
-import IsOpen from '@site/static/usage/v7/alert/presenting/isOpen/index.md';
+import IsOpen from '@site/static/usage/v7/alert/presenting/isOpen/index.mdx';
 
 <IsOpen />
 
@@ -48,7 +48,7 @@ import IsOpen from '@site/static/usage/v7/alert/presenting/isOpen/index.md';
 
 The `alertController` can be used in situations where more control is needed over when the Alert is presented and dismissed.
 
-import Controller from '@site/static/usage/v7/alert/presenting/controller/index.md';
+import Controller from '@site/static/usage/v7/alert/presenting/controller/index.mdx';
 
 <Controller />
 
@@ -58,7 +58,7 @@ In the array of `buttons`, each button includes properties for its `text`, and o
 
 Optionally, a `role` property can be added to a button, such as `cancel`. If a `cancel` role is on one of the buttons, then if the alert is dismissed by tapping the backdrop, then it will fire the handler from the button with a cancel role.
 
-import Buttons from '@site/static/usage/v7/alert/buttons/index.md';
+import Buttons from '@site/static/usage/v7/alert/buttons/index.mdx';
 
 <Buttons />
 
@@ -68,13 +68,13 @@ Alerts can also include several different inputs whose data can be passed back t
 
 ### Text Inputs Example
 
-import TextInputs from '@site/static/usage/v7/alert/inputs/text-inputs/index.md';
+import TextInputs from '@site/static/usage/v7/alert/inputs/text-inputs/index.mdx';
 
 <TextInputs />
 
 ### Radio Example
 
-import Radios from '@site/static/usage/v7/alert/inputs/radios/index.md';
+import Radios from '@site/static/usage/v7/alert/inputs/radios/index.mdx';
 
 <Radios />
 
@@ -104,7 +104,7 @@ Any of the defined [CSS Custom Properties](#css-custom-properties) can be used t
 }
 ```
 
-import Customization from '@site/static/usage/v7/alert/customization/index.md';
+import Customization from '@site/static/usage/v7/alert/customization/index.mdx';
 
 <Customization />
 
diff --git a/versioned_docs/version-v7/api/app.md b/versioned_docs/version-v7/api/app.mdx
similarity index 98%
rename from versioned_docs/version-v7/api/app.md
rename to versioned_docs/version-v7/api/app.mdx
index c077e71bf17..d6b990dabaf 100644
--- a/versioned_docs/version-v7/api/app.md
+++ b/versioned_docs/version-v7/api/app.mdx
@@ -2,12 +2,12 @@
 title: 'ion-app'
 ---
 
-import Props from '@ionic-internal/component-api/v7/app/props.md';
-import Events from '@ionic-internal/component-api/v7/app/events.md';
-import Methods from '@ionic-internal/component-api/v7/app/methods.md';
-import Parts from '@ionic-internal/component-api/v7/app/parts.md';
+import Props from '@ionic-internal/component-api/v7/app/props.mdx';
+import Events from '@ionic-internal/component-api/v7/app/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/app/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/app/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/app/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/app/slots.md';
+import Slots from '@ionic-internal/component-api/v7/app/slots.mdx';
 
 <head>
   <title>ion-app: Container Element for an Ionic Application</title>
diff --git a/versioned_docs/version-v7/api/avatar.md b/versioned_docs/version-v7/api/avatar.mdx
similarity index 86%
rename from versioned_docs/version-v7/api/avatar.md
rename to versioned_docs/version-v7/api/avatar.mdx
index 6f4832425f2..011450a20b0 100644
--- a/versioned_docs/version-v7/api/avatar.md
+++ b/versioned_docs/version-v7/api/avatar.mdx
@@ -2,12 +2,12 @@
 title: 'ion-avatar'
 ---
 
-import Props from '@ionic-internal/component-api/v7/avatar/props.md';
-import Events from '@ionic-internal/component-api/v7/avatar/events.md';
-import Methods from '@ionic-internal/component-api/v7/avatar/methods.md';
-import Parts from '@ionic-internal/component-api/v7/avatar/parts.md';
+import Props from '@ionic-internal/component-api/v7/avatar/props.mdx';
+import Events from '@ionic-internal/component-api/v7/avatar/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/avatar/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/avatar/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/avatar/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/avatar/slots.md';
+import Slots from '@ionic-internal/component-api/v7/avatar/slots.mdx';
 
 <head>
   <title>ion-avatar: Circular Application Avatar Icon Component</title>
@@ -27,19 +27,19 @@ Avatars can be used by themselves or inside of any element. If placed inside of
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/avatar/basic/index.md';
+import Basic from '@site/static/usage/v7/avatar/basic/index.mdx';
 
 <Basic />
 
 ## Chip Avatar
 
-import Chip from '@site/static/usage/v7/avatar/chip/index.md';
+import Chip from '@site/static/usage/v7/avatar/chip/index.mdx';
 
 <Chip />
 
 ## Item Avatar
 
-import Item from '@site/static/usage/v7/avatar/item/index.md';
+import Item from '@site/static/usage/v7/avatar/item/index.mdx';
 
 <Item />
 
@@ -47,7 +47,7 @@ import Item from '@site/static/usage/v7/avatar/item/index.md';
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v7/avatar/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/avatar/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v7/api/back-button.md b/versioned_docs/version-v7/api/back-button.mdx
similarity index 96%
rename from versioned_docs/version-v7/api/back-button.md
rename to versioned_docs/version-v7/api/back-button.mdx
index 81fdf1a475d..502da0bc80a 100644
--- a/versioned_docs/version-v7/api/back-button.md
+++ b/versioned_docs/version-v7/api/back-button.mdx
@@ -2,12 +2,12 @@
 title: 'ion-back-button'
 ---
 
-import Props from '@ionic-internal/component-api/v7/back-button/props.md';
-import Events from '@ionic-internal/component-api/v7/back-button/events.md';
-import Methods from '@ionic-internal/component-api/v7/back-button/methods.md';
-import Parts from '@ionic-internal/component-api/v7/back-button/parts.md';
+import Props from '@ionic-internal/component-api/v7/back-button/props.mdx';
+import Events from '@ionic-internal/component-api/v7/back-button/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/back-button/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/back-button/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/back-button/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/back-button/slots.md';
+import Slots from '@ionic-internal/component-api/v7/back-button/slots.mdx';
 
 <head>
   <title>ion-back-button: Custom Menu Back Button for Applications</title>
@@ -25,7 +25,7 @@ The back button navigates back in the app's history when clicked. It is only dis
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/back-button/basic/index.md';
+import Basic from '@site/static/usage/v7/back-button/basic/index.mdx';
 
 <Basic />
 
@@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v7/back-button/basic/index.md';
 
 By default, the back button will display the text `"Back"` with a `"chevron-back"` icon on `ios`, and an `"arrow-back-sharp"` icon on `md`. This can be customized per back button component by setting the `icon` or `text` properties. Alternatively, it can be set globally using the `backButtonIcon` or `backButtonText` properties in the global config. See the [Config docs](../developing/config) for more information.
 
-import Custom from '@site/static/usage/v7/back-button/custom/index.md';
+import Custom from '@site/static/usage/v7/back-button/custom/index.mdx';
 
 <Custom />
 
diff --git a/versioned_docs/version-v7/api/backdrop.md b/versioned_docs/version-v7/api/backdrop.mdx
similarity index 96%
rename from versioned_docs/version-v7/api/backdrop.md
rename to versioned_docs/version-v7/api/backdrop.mdx
index a29f7f1483a..4d4d0a8e250 100644
--- a/versioned_docs/version-v7/api/backdrop.md
+++ b/versioned_docs/version-v7/api/backdrop.mdx
@@ -2,12 +2,12 @@
 title: 'ion-backdrop'
 ---
 
-import Props from '@ionic-internal/component-api/v7/backdrop/props.md';
-import Events from '@ionic-internal/component-api/v7/backdrop/events.md';
-import Methods from '@ionic-internal/component-api/v7/backdrop/methods.md';
-import Parts from '@ionic-internal/component-api/v7/backdrop/parts.md';
+import Props from '@ionic-internal/component-api/v7/backdrop/props.mdx';
+import Events from '@ionic-internal/component-api/v7/backdrop/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/backdrop/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/backdrop/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/backdrop/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/backdrop/slots.md';
+import Slots from '@ionic-internal/component-api/v7/backdrop/slots.mdx';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
@@ -19,7 +19,7 @@ Backdrops are full screen components that overlay other components. They are use
 
 The backdrop prevents clicking or tapping on the content behind it. It is transparent by default, so the below demo includes CSS to make it visible.
 
-import Basic from '@site/static/usage/v7/backdrop/basic/index.md';
+import Basic from '@site/static/usage/v7/backdrop/basic/index.mdx';
 
 <Basic />
 
@@ -29,7 +29,7 @@ The backdrop can be customized by assigning CSS properties directly to the backd
 
 Content can be displayed above the backdrop by setting a `z-index` on the content, higher than the backdrop (defaults to `2`).
 
-import Styling from '@site/static/usage/v7/backdrop/styling/index.md';
+import Styling from '@site/static/usage/v7/backdrop/styling/index.mdx';
 
 <Styling />
 
diff --git a/versioned_docs/version-v7/api/badge.md b/versioned_docs/version-v7/api/badge.mdx
similarity index 92%
rename from versioned_docs/version-v7/api/badge.md
rename to versioned_docs/version-v7/api/badge.mdx
index 162d37bf8ef..a9e1c37aff2 100644
--- a/versioned_docs/version-v7/api/badge.md
+++ b/versioned_docs/version-v7/api/badge.mdx
@@ -2,12 +2,12 @@
 title: 'ion-badge'
 ---
 
-import Props from '@ionic-internal/component-api/v7/badge/props.md';
-import Events from '@ionic-internal/component-api/v7/badge/events.md';
-import Methods from '@ionic-internal/component-api/v7/badge/methods.md';
-import Parts from '@ionic-internal/component-api/v7/badge/parts.md';
+import Props from '@ionic-internal/component-api/v7/badge/props.mdx';
+import Events from '@ionic-internal/component-api/v7/badge/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/badge/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/badge/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/badge/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/badge/slots.md';
+import Slots from '@ionic-internal/component-api/v7/badge/slots.mdx';
 
 <head>
   <title>ion-badge: iOS & Android App Notification Badge Icons</title>
@@ -25,7 +25,7 @@ Badges are inline block elements that usually appear near another element. Typic
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/badge/basic/index.md';
+import Basic from '@site/static/usage/v7/badge/basic/index.mdx';
 
 <Basic />
 
@@ -33,13 +33,13 @@ import Basic from '@site/static/usage/v7/badge/basic/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v7/badge/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/badge/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Properties
 
-import CSSProps from '@site/static/usage/v7/badge/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/badge/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v7/api/breadcrumb.md b/versioned_docs/version-v7/api/breadcrumb.mdx
similarity index 96%
rename from versioned_docs/version-v7/api/breadcrumb.md
rename to versioned_docs/version-v7/api/breadcrumb.mdx
index 8ec134f9138..50db52f3a6a 100644
--- a/versioned_docs/version-v7/api/breadcrumb.md
+++ b/versioned_docs/version-v7/api/breadcrumb.mdx
@@ -2,12 +2,12 @@
 title: 'ion-breadcrumb'
 ---
 
-import Props from '@ionic-internal/component-api/v7/breadcrumb/props.md';
-import Events from '@ionic-internal/component-api/v7/breadcrumb/events.md';
-import Methods from '@ionic-internal/component-api/v7/breadcrumb/methods.md';
-import Parts from '@ionic-internal/component-api/v7/breadcrumb/parts.md';
+import Props from '@ionic-internal/component-api/v7/breadcrumb/props.mdx';
+import Events from '@ionic-internal/component-api/v7/breadcrumb/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/breadcrumb/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/breadcrumb/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/breadcrumb/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/breadcrumb/slots.md';
+import Slots from '@ionic-internal/component-api/v7/breadcrumb/slots.mdx';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v7/api/breadcrumbs.md b/versioned_docs/version-v7/api/breadcrumbs.mdx
similarity index 88%
rename from versioned_docs/version-v7/api/breadcrumbs.md
rename to versioned_docs/version-v7/api/breadcrumbs.mdx
index 63b125e08f0..6b9694965a8 100644
--- a/versioned_docs/version-v7/api/breadcrumbs.md
+++ b/versioned_docs/version-v7/api/breadcrumbs.mdx
@@ -2,12 +2,12 @@
 title: 'ion-breadcrumbs'
 ---
 
-import Props from '@ionic-internal/component-api/v7/breadcrumbs/props.md';
-import Events from '@ionic-internal/component-api/v7/breadcrumbs/events.md';
-import Methods from '@ionic-internal/component-api/v7/breadcrumbs/methods.md';
-import Parts from '@ionic-internal/component-api/v7/breadcrumbs/parts.md';
+import Props from '@ionic-internal/component-api/v7/breadcrumbs/props.mdx';
+import Events from '@ionic-internal/component-api/v7/breadcrumbs/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/breadcrumbs/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/breadcrumbs/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/breadcrumbs/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/breadcrumbs/slots.md';
+import Slots from '@ionic-internal/component-api/v7/breadcrumbs/slots.mdx';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
@@ -17,7 +17,7 @@ Breadcrumbs are navigation items that are used to indicate where a user is on an
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/breadcrumbs/basic/index.md';
+import Basic from '@site/static/usage/v7/breadcrumbs/basic/index.mdx';
 
 <Basic />
 
@@ -25,13 +25,13 @@ import Basic from '@site/static/usage/v7/breadcrumbs/basic/index.md';
 
 ### Icons on Items
 
-import IconsOnItems from '@site/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md';
+import IconsOnItems from '@site/static/usage/v7/breadcrumbs/icons/icons-on-items/index.mdx';
 
 <IconsOnItems />
 
 ### Custom Separators
 
-import CustomSeparators from '@site/static/usage/v7/breadcrumbs/icons/custom-separators/index.md';
+import CustomSeparators from '@site/static/usage/v7/breadcrumbs/icons/custom-separators/index.mdx';
 
 <CustomSeparators />
 
@@ -41,7 +41,7 @@ import CustomSeparators from '@site/static/usage/v7/breadcrumbs/icons/custom-sep
 
 If there are more items than the value of `maxItems`, the breadcrumbs will be collapsed. By default, only the first and last items will be shown.
 
-import MaxItems from '@site/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md';
+import MaxItems from '@site/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.mdx';
 
 <MaxItems />
 
@@ -49,7 +49,7 @@ import MaxItems from '@site/static/usage/v7/breadcrumbs/collapsing-items/max-ite
 
 Once the items are collapsed, the number of items to show can be controlled by the `itemsBeforeCollapse` and `itemsAfterCollapse` properties.
 
-import ItemsBeforeAfter from '@site/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md';
+import ItemsBeforeAfter from '@site/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.mdx';
 
 <ItemsBeforeAfter />
 
@@ -57,7 +57,7 @@ import ItemsBeforeAfter from '@site/static/usage/v7/breadcrumbs/collapsing-items
 
 Clicking the collapsed indicator will fire the `ionCollapsedClick` event. This can be used to, for example, expand the breadcrumbs.
 
-import ExpandOnClick from '@site/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.md';
+import ExpandOnClick from '@site/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.mdx';
 
 <ExpandOnClick />
 
@@ -65,7 +65,7 @@ import ExpandOnClick from '@site/static/usage/v7/breadcrumbs/collapsing-items/ex
 
 The `ionCollapsedClick` event can also be used to present an overlay (in this case, an `ion-popover`) showing the hidden breadcrumbs.
 
-import PopoverOnClick from '@site/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.md';
+import PopoverOnClick from '@site/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.mdx';
 
 <PopoverOnClick />
 
@@ -73,13 +73,13 @@ import PopoverOnClick from '@site/static/usage/v7/breadcrumbs/collapsing-items/p
 
 ### Colors
 
-import Colors from '@site/static/usage/v7/breadcrumbs/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/breadcrumbs/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v7/breadcrumbs/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/breadcrumbs/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v7/api/button.md b/versioned_docs/version-v7/api/button.mdx
similarity index 89%
rename from versioned_docs/version-v7/api/button.md
rename to versioned_docs/version-v7/api/button.mdx
index b71d96c5176..a59d3634bb8 100644
--- a/versioned_docs/version-v7/api/button.md
+++ b/versioned_docs/version-v7/api/button.mdx
@@ -2,12 +2,12 @@
 title: 'ion-button'
 ---
 
-import Props from '@ionic-internal/component-api/v7/button/props.md';
-import Events from '@ionic-internal/component-api/v7/button/events.md';
-import Methods from '@ionic-internal/component-api/v7/button/methods.md';
-import Parts from '@ionic-internal/component-api/v7/button/parts.md';
+import Props from '@ionic-internal/component-api/v7/button/props.mdx';
+import Events from '@ionic-internal/component-api/v7/button/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/button/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/button/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/button/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/button/slots.md';
+import Slots from '@ionic-internal/component-api/v7/button/slots.mdx';
 
 <head>
   <title>ion-button: Style Buttons with Custom CSS Properties</title>
@@ -25,7 +25,7 @@ Buttons provide a clickable element, which can be used in forms, or anywhere tha
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/button/basic/index.md';
+import Basic from '@site/static/usage/v7/button/basic/index.mdx';
 
 <Basic />
 
@@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v7/button/basic/index.md';
 
 This property lets you specify how wide the button should be. By default, buttons have `display: inline-block`, but setting this property will change the button to a full-width element with `display: block`.
 
-import Expand from '@site/static/usage/v7/button/expand/index.md';
+import Expand from '@site/static/usage/v7/button/expand/index.mdx';
 
 <Expand />
 
@@ -41,7 +41,7 @@ import Expand from '@site/static/usage/v7/button/expand/index.md';
 
 This property lets you specify the shape of the button. By default, buttons are rectangular with a small border radius, but setting this to `"round"` will change the button to a rounded element.
 
-import Shape from '@site/static/usage/v7/button/shape/index.md';
+import Shape from '@site/static/usage/v7/button/shape/index.mdx';
 
 <Shape />
 
@@ -49,7 +49,7 @@ import Shape from '@site/static/usage/v7/button/shape/index.md';
 
 This property determines the background and border color of the button. By default, buttons have a solid background unless the button is inside of a toolbar, in which case it has a transparent background.
 
-import Fill from '@site/static/usage/v7/button/fill/index.md';
+import Fill from '@site/static/usage/v7/button/fill/index.mdx';
 
 <Fill />
 
@@ -57,13 +57,13 @@ import Fill from '@site/static/usage/v7/button/fill/index.md';
 
 This property specifies the size of the button. Setting this property will change the height and padding of a button.
 
-import Size from '@site/static/usage/v7/button/size/index.md';
+import Size from '@site/static/usage/v7/button/size/index.mdx';
 
 <Size />
 
 ## Icons
 
-import Icons from '@site/static/usage/v7/button/icons/index.md';
+import Icons from '@site/static/usage/v7/button/icons/index.mdx';
 
 <Icons />
 
@@ -71,13 +71,13 @@ import Icons from '@site/static/usage/v7/button/icons/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v7/button/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/button/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v7/button/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/button/theming/css-properties/index.mdx';
 
 <CSSProps />
 
@@ -95,7 +95,7 @@ The button text does not automatically wrap to the next line when the text is to
 The `max-width` style is set on the button below for demo purposes only. Text wrapping will work with a dynamic button width.
 :::
 
-import TextWrapping from '@site/static/usage/v7/button/text-wrapping/index.md';
+import TextWrapping from '@site/static/usage/v7/button/text-wrapping/index.mdx';
 
 <TextWrapping />
 
diff --git a/versioned_docs/version-v7/api/buttons.md b/versioned_docs/version-v7/api/buttons.mdx
similarity index 92%
rename from versioned_docs/version-v7/api/buttons.md
rename to versioned_docs/version-v7/api/buttons.mdx
index 1202797f2f7..93c8b26285f 100644
--- a/versioned_docs/version-v7/api/buttons.md
+++ b/versioned_docs/version-v7/api/buttons.mdx
@@ -2,12 +2,12 @@
 title: 'ion-buttons'
 ---
 
-import Props from '@ionic-internal/component-api/v7/buttons/props.md';
-import Events from '@ionic-internal/component-api/v7/buttons/events.md';
-import Methods from '@ionic-internal/component-api/v7/buttons/methods.md';
-import Parts from '@ionic-internal/component-api/v7/buttons/parts.md';
+import Props from '@ionic-internal/component-api/v7/buttons/props.mdx';
+import Events from '@ionic-internal/component-api/v7/buttons/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/buttons/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/buttons/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/buttons/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/buttons/slots.md';
+import Slots from '@ionic-internal/component-api/v7/buttons/slots.mdx';
 
 <head>
   <title>ion-buttons: Toolbar Element with Named Slots for Buttons</title>
@@ -25,7 +25,7 @@ The Buttons component is a container element. It should be used inside of a [too
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/buttons/basic/index.md';
+import Basic from '@site/static/usage/v7/buttons/basic/index.mdx';
 
 <Basic />
 
@@ -40,7 +40,7 @@ Buttons can be positioned inside of the toolbar using a named slot. The below ch
 | `secondary` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` mode. |
 | `primary`   | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` mode.     |
 
-import Placement from '@site/static/usage/v7/buttons/placement/index.md';
+import Placement from '@site/static/usage/v7/buttons/placement/index.mdx';
 
 <Placement />
 
@@ -48,7 +48,7 @@ import Placement from '@site/static/usage/v7/buttons/placement/index.md';
 
 A button in a toolbar is styled to be clear by default, but this can be changed using the [`fill`](./button#fill) property on the button. The properties included on [back button](./back-button) and [menu button](./menu-button) in this example are for display purposes; see their respective documentation for proper usage.
 
-import Types from '@site/static/usage/v7/buttons/types/index.md';
+import Types from '@site/static/usage/v7/buttons/types/index.mdx';
 
 <Types />
 
@@ -64,7 +64,7 @@ This feature is only available for iOS.
 
 {/* Reuse the playground from the Title directory */}
 
-import CollapsibleLargeTitleButtons from '@site/static/usage/v7/title/collapsible-large-title/buttons/index.md';
+import CollapsibleLargeTitleButtons from '@site/static/usage/v7/title/collapsible-large-title/buttons/index.mdx';
 
 <CollapsibleLargeTitleButtons />
 
diff --git a/versioned_docs/version-v7/api/card-content.md b/versioned_docs/version-v7/api/card-content.mdx
similarity index 92%
rename from versioned_docs/version-v7/api/card-content.md
rename to versioned_docs/version-v7/api/card-content.mdx
index ec99b7060f6..7dc4fcd788d 100644
--- a/versioned_docs/version-v7/api/card-content.md
+++ b/versioned_docs/version-v7/api/card-content.mdx
@@ -2,12 +2,12 @@
 title: 'ion-card-content'
 ---
 
-import Props from '@ionic-internal/component-api/v7/card-content/props.md';
-import Events from '@ionic-internal/component-api/v7/card-content/events.md';
-import Methods from '@ionic-internal/component-api/v7/card-content/methods.md';
-import Parts from '@ionic-internal/component-api/v7/card-content/parts.md';
+import Props from '@ionic-internal/component-api/v7/card-content/props.mdx';
+import Events from '@ionic-internal/component-api/v7/card-content/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/card-content/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/card-content/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/card-content/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/card-content/slots.md';
+import Slots from '@ionic-internal/component-api/v7/card-content/slots.mdx';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v7/api/card-header.md b/versioned_docs/version-v7/api/card-header.mdx
similarity index 93%
rename from versioned_docs/version-v7/api/card-header.md
rename to versioned_docs/version-v7/api/card-header.mdx
index 7573edc96a1..bf1ba7e0d9e 100644
--- a/versioned_docs/version-v7/api/card-header.md
+++ b/versioned_docs/version-v7/api/card-header.mdx
@@ -2,12 +2,12 @@
 title: 'ion-card-header'
 ---
 
-import Props from '@ionic-internal/component-api/v7/card-header/props.md';
-import Events from '@ionic-internal/component-api/v7/card-header/events.md';
-import Methods from '@ionic-internal/component-api/v7/card-header/methods.md';
-import Parts from '@ionic-internal/component-api/v7/card-header/parts.md';
+import Props from '@ionic-internal/component-api/v7/card-header/props.mdx';
+import Events from '@ionic-internal/component-api/v7/card-header/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/card-header/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/card-header/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/card-header/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/card-header/slots.md';
+import Slots from '@ionic-internal/component-api/v7/card-header/slots.mdx';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v7/api/card-subtitle.md b/versioned_docs/version-v7/api/card-subtitle.mdx
similarity index 92%
rename from versioned_docs/version-v7/api/card-subtitle.md
rename to versioned_docs/version-v7/api/card-subtitle.mdx
index 1ded5db8502..fc38bbf0eb3 100644
--- a/versioned_docs/version-v7/api/card-subtitle.md
+++ b/versioned_docs/version-v7/api/card-subtitle.mdx
@@ -2,12 +2,12 @@
 title: 'ion-card-subtitle'
 ---
 
-import Props from '@ionic-internal/component-api/v7/card-subtitle/props.md';
-import Events from '@ionic-internal/component-api/v7/card-subtitle/events.md';
-import Methods from '@ionic-internal/component-api/v7/card-subtitle/methods.md';
-import Parts from '@ionic-internal/component-api/v7/card-subtitle/parts.md';
+import Props from '@ionic-internal/component-api/v7/card-subtitle/props.mdx';
+import Events from '@ionic-internal/component-api/v7/card-subtitle/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/card-subtitle/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/card-subtitle/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/card-subtitle/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/card-subtitle/slots.md';
+import Slots from '@ionic-internal/component-api/v7/card-subtitle/slots.mdx';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v7/api/card-title.md b/versioned_docs/version-v7/api/card-title.mdx
similarity index 95%
rename from versioned_docs/version-v7/api/card-title.md
rename to versioned_docs/version-v7/api/card-title.mdx
index bafe4965d64..bf96cbcb6af 100644
--- a/versioned_docs/version-v7/api/card-title.md
+++ b/versioned_docs/version-v7/api/card-title.mdx
@@ -2,12 +2,12 @@
 title: 'ion-card-title'
 ---
 
-import Props from '@ionic-internal/component-api/v7/card-title/props.md';
-import Events from '@ionic-internal/component-api/v7/card-title/events.md';
-import Methods from '@ionic-internal/component-api/v7/card-title/methods.md';
-import Parts from '@ionic-internal/component-api/v7/card-title/parts.md';
+import Props from '@ionic-internal/component-api/v7/card-title/props.mdx';
+import Events from '@ionic-internal/component-api/v7/card-title/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/card-title/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/card-title/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/card-title/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/card-title/slots.md';
+import Slots from '@ionic-internal/component-api/v7/card-title/slots.mdx';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v7/api/card.md b/versioned_docs/version-v7/api/card.mdx
similarity index 87%
rename from versioned_docs/version-v7/api/card.md
rename to versioned_docs/version-v7/api/card.mdx
index 364de73ae39..51bf34060b4 100644
--- a/versioned_docs/version-v7/api/card.md
+++ b/versioned_docs/version-v7/api/card.mdx
@@ -2,12 +2,12 @@
 title: 'ion-card'
 ---
 
-import Props from '@ionic-internal/component-api/v7/card/props.md';
-import Events from '@ionic-internal/component-api/v7/card/events.md';
-import Methods from '@ionic-internal/component-api/v7/card/methods.md';
-import Parts from '@ionic-internal/component-api/v7/card/parts.md';
+import Props from '@ionic-internal/component-api/v7/card/props.mdx';
+import Events from '@ionic-internal/component-api/v7/card/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/card/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/card/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/card/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/card/slots.md';
+import Slots from '@ionic-internal/component-api/v7/card/slots.mdx';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
@@ -29,25 +29,25 @@ and [card content](./card-content).
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/card/basic/index.md';
+import Basic from '@site/static/usage/v7/card/basic/index.mdx';
 
 <Basic />
 
 ## Media Cards
 
-import Media from '@site/static/usage/v7/card/media/index.md';
+import Media from '@site/static/usage/v7/card/media/index.mdx';
 
 <Media />
 
 ## Card Buttons
 
-import Buttons from '@site/static/usage/v7/card/buttons/index.md';
+import Buttons from '@site/static/usage/v7/card/buttons/index.mdx';
 
 <Buttons />
 
 ## List Card
 
-import List from '@site/static/usage/v7/card/list/index.md';
+import List from '@site/static/usage/v7/card/list/index.mdx';
 
 <List />
 
@@ -55,13 +55,13 @@ import List from '@site/static/usage/v7/card/list/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v7/card/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/card/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v7/card/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/card/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v7/api/checkbox.md b/versioned_docs/version-v7/api/checkbox.mdx
similarity index 96%
rename from versioned_docs/version-v7/api/checkbox.md
rename to versioned_docs/version-v7/api/checkbox.mdx
index e09616c99e7..0eec7955f83 100644
--- a/versioned_docs/version-v7/api/checkbox.md
+++ b/versioned_docs/version-v7/api/checkbox.mdx
@@ -2,12 +2,12 @@
 title: 'ion-checkbox'
 ---
 
-import Props from '@ionic-internal/component-api/v7/checkbox/props.md';
-import Events from '@ionic-internal/component-api/v7/checkbox/events.md';
-import Methods from '@ionic-internal/component-api/v7/checkbox/methods.md';
-import Parts from '@ionic-internal/component-api/v7/checkbox/parts.md';
+import Props from '@ionic-internal/component-api/v7/checkbox/props.mdx';
+import Events from '@ionic-internal/component-api/v7/checkbox/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/checkbox/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/checkbox/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/checkbox/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/checkbox/slots.md';
+import Slots from '@ionic-internal/component-api/v7/checkbox/slots.mdx';
 
 <head>
   <title>ion-checkbox: Ionic App Checkbox to Select Multiple Options</title>
@@ -25,7 +25,7 @@ Checkboxes allow the selection of multiple options from a set of options. They a
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/checkbox/basic/index.md';
+import Basic from '@site/static/usage/v7/checkbox/basic/index.mdx';
 
 <Basic />
 
@@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v7/checkbox/basic/index.md';
 
 Developers can use the `labelPlacement` property to control how the label is placed relative to the control. This property mirrors the flexbox `flex-direction` property.
 
-import LabelPlacement from '@site/static/usage/v7/checkbox/label-placement/index.md';
+import LabelPlacement from '@site/static/usage/v7/checkbox/label-placement/index.mdx';
 
 <LabelPlacement />
 
@@ -45,7 +45,7 @@ Developers can use the `alignment` property to control how the label and control
 Stacked checkboxes can be aligned using the `alignment` property. This can be useful when the label and control need to be centered horizontally.
 :::
 
-import Alignment from '@site/static/usage/v7/checkbox/alignment/index.md';
+import Alignment from '@site/static/usage/v7/checkbox/alignment/index.mdx';
 
 <Alignment />
 
@@ -53,7 +53,7 @@ import Alignment from '@site/static/usage/v7/checkbox/alignment/index.md';
 
 Developers can use the `justify` property to control how the label and control are packed on a line. This property mirrors the flexbox `justify-content` property.
 
-import Justify from '@site/static/usage/v7/checkbox/justify/index.md';
+import Justify from '@site/static/usage/v7/checkbox/justify/index.mdx';
 
 <Justify />
 
@@ -63,7 +63,7 @@ import Justify from '@site/static/usage/v7/checkbox/justify/index.md';
 
 ## Indeterminate Checkboxes
 
-import Indeterminate from '@site/static/usage/v7/checkbox/indeterminate/index.md';
+import Indeterminate from '@site/static/usage/v7/checkbox/indeterminate/index.mdx';
 
 <Indeterminate />
 
@@ -71,7 +71,7 @@ import Indeterminate from '@site/static/usage/v7/checkbox/indeterminate/index.md
 
 Checkbox labels can sometimes be accompanied with links. These links can provide more information related to the checkbox. However, clicking the link should not check the checkbox. To achieve this, we can use [stopPropagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) to prevent the click event from bubbling. When using this approach, the rest of the label still remains clickable.
 
-import LabelLink from '@site/static/usage/v7/checkbox/label-link/index.md';
+import LabelLink from '@site/static/usage/v7/checkbox/label-link/index.mdx';
 
 <LabelLink />
 
@@ -79,7 +79,7 @@ import LabelLink from '@site/static/usage/v7/checkbox/label-link/index.md';
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v7/checkbox/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/checkbox/theming/css-properties/index.mdx';
 
 <CSSProps />
 
@@ -115,7 +115,7 @@ Developers can perform this migration one checkbox at a time. While developers c
 
 Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-checkbox`. The placement of the label can be configured using the `labelPlacement` property on `ion-checkbox`. The way the label and the control are packed on a line can be controlled using the `justify` property on `ion-checkbox`.
 
-import Migration from '@site/static/usage/v7/checkbox/migration/index.md';
+import Migration from '@site/static/usage/v7/checkbox/migration/index.mdx';
 
 <Migration />
 
diff --git a/versioned_docs/version-v7/api/chip.md b/versioned_docs/version-v7/api/chip.mdx
similarity index 92%
rename from versioned_docs/version-v7/api/chip.md
rename to versioned_docs/version-v7/api/chip.mdx
index 4418c0f7ffb..1f455850c9b 100644
--- a/versioned_docs/version-v7/api/chip.md
+++ b/versioned_docs/version-v7/api/chip.mdx
@@ -2,12 +2,12 @@
 title: 'ion-chip'
 ---
 
-import Props from '@ionic-internal/component-api/v7/chip/props.md';
-import Events from '@ionic-internal/component-api/v7/chip/events.md';
-import Methods from '@ionic-internal/component-api/v7/chip/methods.md';
-import Parts from '@ionic-internal/component-api/v7/chip/parts.md';
+import Props from '@ionic-internal/component-api/v7/chip/props.mdx';
+import Events from '@ionic-internal/component-api/v7/chip/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/chip/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/chip/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/chip/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/chip/slots.md';
+import Slots from '@ionic-internal/component-api/v7/chip/slots.mdx';
 
 <head>
   <title>ion-chip: Text, Icon and Avatar for Ionic Framework Apps</title>
@@ -25,13 +25,13 @@ Chips represent complex entities in small blocks, such as a contact. A chip can
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/chip/basic/index.md';
+import Basic from '@site/static/usage/v7/chip/basic/index.mdx';
 
 <Basic />
 
 ## Slotting Components and Icons
 
-import SlotExample from '@site/static/usage/v7/chip/slots/index.md';
+import SlotExample from '@site/static/usage/v7/chip/slots/index.mdx';
 
 <SlotExample />
 
@@ -39,13 +39,13 @@ import SlotExample from '@site/static/usage/v7/chip/slots/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v7/chip/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/chip/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v7/chip/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/chip/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v7/api/col.md b/versioned_docs/version-v7/api/col.mdx
similarity index 98%
rename from versioned_docs/version-v7/api/col.md
rename to versioned_docs/version-v7/api/col.mdx
index f4ab426318f..53687ada2dc 100644
--- a/versioned_docs/version-v7/api/col.md
+++ b/versioned_docs/version-v7/api/col.mdx
@@ -2,12 +2,12 @@
 title: 'ion-col'
 ---
 
-import Props from '@ionic-internal/component-api/v7/col/props.md';
-import Events from '@ionic-internal/component-api/v7/col/events.md';
-import Methods from '@ionic-internal/component-api/v7/col/methods.md';
-import Parts from '@ionic-internal/component-api/v7/col/parts.md';
+import Props from '@ionic-internal/component-api/v7/col/props.mdx';
+import Events from '@ionic-internal/component-api/v7/col/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/col/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/col/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/col/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/col/slots.md';
+import Slots from '@ionic-internal/component-api/v7/col/slots.mdx';
 
 <head>
   <title>ion-col: Column Component Padding and Other Properties</title>
diff --git a/versioned_docs/version-v7/api/content.md b/versioned_docs/version-v7/api/content.mdx
similarity index 93%
rename from versioned_docs/version-v7/api/content.md
rename to versioned_docs/version-v7/api/content.mdx
index e5a167a96e3..7303ceda044 100644
--- a/versioned_docs/version-v7/api/content.md
+++ b/versioned_docs/version-v7/api/content.mdx
@@ -2,12 +2,12 @@
 title: 'ion-content'
 ---
 
-import Props from '@ionic-internal/component-api/v7/content/props.md';
-import Events from '@ionic-internal/component-api/v7/content/events.md';
-import Methods from '@ionic-internal/component-api/v7/content/methods.md';
-import Parts from '@ionic-internal/component-api/v7/content/parts.md';
+import Props from '@ionic-internal/component-api/v7/content/props.mdx';
+import Events from '@ionic-internal/component-api/v7/content/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/content/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/content/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/content/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/content/slots.md';
+import Slots from '@ionic-internal/component-api/v7/content/slots.mdx';
 
 <head>
   <title>ion-content: Scrollable Component for Ionic App Content</title>
@@ -29,7 +29,7 @@ Content, along with many other Ionic components, can be customized to modify its
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/content/basic/index.md';
+import Basic from '@site/static/usage/v7/content/basic/index.mdx';
 
 <Basic />
 
@@ -37,7 +37,7 @@ import Basic from '@site/static/usage/v7/content/basic/index.md';
 
 Content can be the only top-level component in a page, or it can be used alongside a [header](./header), [footer](./footer), or both. When used with a header or footer, it will adjust its size to fill the remaining height.
 
-import HeaderFooter from '@site/static/usage/v7/content/header-footer/index.md';
+import HeaderFooter from '@site/static/usage/v7/content/header-footer/index.mdx';
 
 <HeaderFooter />
 
@@ -45,7 +45,7 @@ import HeaderFooter from '@site/static/usage/v7/content/header-footer/index.md';
 
 By default, content fills the space between a [header](./header) and [footer](./footer) but does not go behind them. In certain cases, it may be desired to have the content scroll behind the header and footer, such as when the `translucent` property is set on either of them, or `opacity` is set on the toolbar. This can be achieved by setting the `fullscreen` property on the content to `true`.
 
-import Fullscreen from '@site/static/usage/v7/content/fullscreen/index.md';
+import Fullscreen from '@site/static/usage/v7/content/fullscreen/index.mdx';
 
 <Fullscreen />
 
@@ -53,7 +53,7 @@ import Fullscreen from '@site/static/usage/v7/content/fullscreen/index.md';
 
 To place elements outside of the scrollable area, assign them to the `fixed` slot. Doing so will [absolutely position](https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute_positioning) the element to the top left of the content. In order to change the position of the element, it can be styled using the [top, right, bottom, and left](https://developer.mozilla.org/en-US/docs/Web/CSS/position) CSS properties.
 
-import Fixed from '@site/static/usage/v7/content/fixed/index.md';
+import Fixed from '@site/static/usage/v7/content/fixed/index.mdx';
 
 <Fixed />
 
@@ -61,7 +61,7 @@ import Fixed from '@site/static/usage/v7/content/fixed/index.md';
 
 Content provides [methods](#methods) that can be called to scroll the content to the bottom, top, or to a specific point. They can be passed a `duration` in order to smoothly transition instead of instantly changing the position.
 
-import ScrollMethods from '@site/static/usage/v7/content/scroll-methods/index.md';
+import ScrollMethods from '@site/static/usage/v7/content/scroll-methods/index.mdx';
 
 <ScrollMethods />
 
@@ -69,7 +69,7 @@ import ScrollMethods from '@site/static/usage/v7/content/scroll-methods/index.md
 
 Scroll events are disabled by default for content due to performance. However, they can be enabled by setting `scrollEvents` to `true`. This is necessary before listening to any of the scroll [events](#events).
 
-import ScrollEvents from '@site/static/usage/v7/content/scroll-events/index.md';
+import ScrollEvents from '@site/static/usage/v7/content/scroll-events/index.mdx';
 
 <ScrollEvents />
 
@@ -77,25 +77,25 @@ import ScrollEvents from '@site/static/usage/v7/content/scroll-events/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v7/content/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/content/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Shadow Parts
 
-import CSSParts from '@site/static/usage/v7/content/theming/css-shadow-parts/index.md';
+import CSSParts from '@site/static/usage/v7/content/theming/css-shadow-parts/index.mdx';
 
 <CSSParts />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v7/content/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/content/theming/css-properties/index.mdx';
 
 <CSSProps />
 
 ### Safe Area Padding
 
-The content component will not automatically apply padding to any of its sides to account for the [safe area](/docs/theming/advanced#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.md#application-variables).
+The content component will not automatically apply padding to any of its sides to account for the [safe area](/docs/theming/advanced#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.mdx#application-variables).
 
 The most common use case for this is to apply padding to the top of the content to account for the status bar. This can be done by setting the `padding-top` property to the value of the `--ion-safe-area-top` variable.
 
@@ -113,7 +113,7 @@ ion-content::part(scroll) {
 }
 ```
 
-import SafeArea from '@site/static/usage/v7/content/theming/safe-area/index.md';
+import SafeArea from '@site/static/usage/v7/content/theming/safe-area/index.mdx';
 
 <SafeArea />
 
diff --git a/versioned_docs/version-v7/api/datetime-button.md b/versioned_docs/version-v7/api/datetime-button.mdx
similarity index 95%
rename from versioned_docs/version-v7/api/datetime-button.md
rename to versioned_docs/version-v7/api/datetime-button.mdx
index 6e19182974a..d2ba6a9214f 100644
--- a/versioned_docs/version-v7/api/datetime-button.md
+++ b/versioned_docs/version-v7/api/datetime-button.mdx
@@ -2,12 +2,12 @@
 title: 'ion-datetime-button'
 ---
 
-import Props from '@ionic-internal/component-api/v7/datetime-button/props.md';
-import Events from '@ionic-internal/component-api/v7/datetime-button/events.md';
-import Methods from '@ionic-internal/component-api/v7/datetime-button/methods.md';
-import Parts from '@ionic-internal/component-api/v7/datetime-button/parts.md';
+import Props from '@ionic-internal/component-api/v7/datetime-button/props.mdx';
+import Events from '@ionic-internal/component-api/v7/datetime-button/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/datetime-button/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/datetime-button/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/datetime-button/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/datetime-button/slots.md';
+import Slots from '@ionic-internal/component-api/v7/datetime-button/slots.mdx';
 
 <head>
   <title>ion-datetime-button: Ionic Input for Datetime Picker</title>
@@ -31,7 +31,7 @@ When using Datetime Button with a JavaScript framework such as Angular, React, o
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/datetime-button/basic/index.md';
+import Basic from '@site/static/usage/v7/datetime-button/basic/index.mdx';
 
 <Basic />
 
@@ -43,7 +43,7 @@ The localized text on `ion-datetime-button` is determined by the `locale` proper
 
 You can customize the format of the date and time in a Datetime Button by providing `formatOptions` on the associated Datetime instance. See [Datetime Format Options](./datetime#format-options) for more details.
 
-import FormatOptions from '@site/static/usage/v7/datetime-button/format-options/index.md';
+import FormatOptions from '@site/static/usage/v7/datetime-button/format-options/index.mdx';
 
 <FormatOptions />
 
diff --git a/versioned_docs/version-v7/api/datetime.md b/versioned_docs/version-v7/api/datetime.mdx
similarity index 96%
rename from versioned_docs/version-v7/api/datetime.md
rename to versioned_docs/version-v7/api/datetime.mdx
index e31bdb93467..c553c9f3cfd 100644
--- a/versioned_docs/version-v7/api/datetime.md
+++ b/versioned_docs/version-v7/api/datetime.mdx
@@ -2,47 +2,47 @@
 title: 'ion-datetime'
 ---
 
-import Props from '@ionic-internal/component-api/v7/datetime/props.md';
-import Events from '@ionic-internal/component-api/v7/datetime/events.md';
-import Methods from '@ionic-internal/component-api/v7/datetime/methods.md';
-import Parts from '@ionic-internal/component-api/v7/datetime/parts.md';
+import Props from '@ionic-internal/component-api/v7/datetime/props.mdx';
+import Events from '@ionic-internal/component-api/v7/datetime/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/datetime/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/datetime/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/datetime/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/datetime/slots.md';
+import Slots from '@ionic-internal/component-api/v7/datetime/slots.mdx';
 
-import Basic from '@site/static/usage/v7/datetime/basic/index.md';
+import Basic from '@site/static/usage/v7/datetime/basic/index.mdx';
 
-import MaxMin from '@site/static/usage/v7/datetime/date-constraints/max-min/index.md';
-import Values from '@site/static/usage/v7/datetime/date-constraints/values/index.md';
-import Advanced from '@site/static/usage/v7/datetime/date-constraints/advanced/index.md';
+import MaxMin from '@site/static/usage/v7/datetime/date-constraints/max-min/index.mdx';
+import Values from '@site/static/usage/v7/datetime/date-constraints/values/index.mdx';
+import Advanced from '@site/static/usage/v7/datetime/date-constraints/advanced/index.mdx';
 
-import FormatOptions from '@site/static/usage/v7/datetime/format-options/index.md';
+import FormatOptions from '@site/static/usage/v7/datetime/format-options/index.mdx';
 
-import CustomLocale from '@site/static/usage/v7/datetime/localization/custom-locale/index.md';
-import HourCycle from '@site/static/usage/v7/datetime/localization/hour-cycle/index.md';
-import FirstDayOfWeek from '@site/static/usage/v7/datetime/localization/first-day-of-week/index.md';
-import LocaleExtensionTags from '@site/static/usage/v7/datetime/localization/locale-extension-tags/index.md';
-import TimeLabel from '@site/static/usage/v7/datetime/localization/time-label/index.md';
+import CustomLocale from '@site/static/usage/v7/datetime/localization/custom-locale/index.mdx';
+import HourCycle from '@site/static/usage/v7/datetime/localization/hour-cycle/index.mdx';
+import FirstDayOfWeek from '@site/static/usage/v7/datetime/localization/first-day-of-week/index.mdx';
+import LocaleExtensionTags from '@site/static/usage/v7/datetime/localization/locale-extension-tags/index.mdx';
+import TimeLabel from '@site/static/usage/v7/datetime/localization/time-label/index.mdx';
 
-import MonthAndYear from '@site/static/usage/v7/datetime/presentation/month-and-year/index.md';
-import Time from '@site/static/usage/v7/datetime/presentation/time/index.md';
-import Date from '@site/static/usage/v7/datetime/presentation/date/index.md';
+import MonthAndYear from '@site/static/usage/v7/datetime/presentation/month-and-year/index.mdx';
+import Time from '@site/static/usage/v7/datetime/presentation/time/index.mdx';
+import Date from '@site/static/usage/v7/datetime/presentation/date/index.mdx';
 
-import ShowingDefaultTitle from '@site/static/usage/v7/datetime/title/showing-default-title/index.md';
-import CustomizingTitle from '@site/static/usage/v7/datetime/title/customizing-title/index.md';
+import ShowingDefaultTitle from '@site/static/usage/v7/datetime/title/showing-default-title/index.mdx';
+import CustomizingTitle from '@site/static/usage/v7/datetime/title/customizing-title/index.mdx';
 
-import ShowingConfirmationButtons from '@site/static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.md';
-import CustomizingButtons from '@site/static/usage/v7/datetime/buttons/customizing-buttons/index.md';
-import CustomizingButtonTexts from '@site/static/usage/v7/datetime/buttons/customizing-button-texts/index.md';
+import ShowingConfirmationButtons from '@site/static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.mdx';
+import CustomizingButtons from '@site/static/usage/v7/datetime/buttons/customizing-buttons/index.mdx';
+import CustomizingButtonTexts from '@site/static/usage/v7/datetime/buttons/customizing-button-texts/index.mdx';
 
-import HighlightedDatesArray from '@site/static/usage/v7/datetime/highlightedDates/array/index.md';
-import HighlightedDatesCallback from '@site/static/usage/v7/datetime/highlightedDates/callback/index.md';
+import HighlightedDatesArray from '@site/static/usage/v7/datetime/highlightedDates/array/index.mdx';
+import HighlightedDatesCallback from '@site/static/usage/v7/datetime/highlightedDates/callback/index.mdx';
 
-import MultipleDateSelection from '@site/static/usage/v7/datetime/multiple/index.md';
+import MultipleDateSelection from '@site/static/usage/v7/datetime/multiple/index.mdx';
 
-import GlobalTheming from '@site/static/usage/v7/datetime/styling/global-theming/index.md';
-import CalendarHeaderStyling from '@site/static/usage/v7/datetime/styling/calendar-header/index.md';
-import CalendarDaysStyling from '@site/static/usage/v7/datetime/styling/calendar-days/index.md';
-import WheelStyling from '@site/static/usage/v7/datetime/styling/wheel-styling/index.md';
+import GlobalTheming from '@site/static/usage/v7/datetime/styling/global-theming/index.mdx';
+import CalendarHeaderStyling from '@site/static/usage/v7/datetime/styling/calendar-header/index.mdx';
+import CalendarDaysStyling from '@site/static/usage/v7/datetime/styling/calendar-days/index.mdx';
+import WheelStyling from '@site/static/usage/v7/datetime/styling/wheel-styling/index.mdx';
 
 <head>
   <title>ion-datetime: Ionic API Input for Datetime Format Picker</title>
@@ -248,7 +248,7 @@ Certain `presentation` options have both grid and wheel styles that developers c
 
 The example below shows the wheel picker with `presentation="date-time"`.
 
-import Wheel from '@site/static/usage/v7/datetime/presentation/wheel/index.md';
+import Wheel from '@site/static/usage/v7/datetime/presentation/wheel/index.mdx';
 
 <Wheel />
 
diff --git a/versioned_docs/version-v7/api/fab-button.md b/versioned_docs/version-v7/api/fab-button.mdx
similarity index 96%
rename from versioned_docs/version-v7/api/fab-button.md
rename to versioned_docs/version-v7/api/fab-button.mdx
index d009ef88ec5..24cb0ad7a59 100644
--- a/versioned_docs/version-v7/api/fab-button.md
+++ b/versioned_docs/version-v7/api/fab-button.mdx
@@ -2,12 +2,12 @@
 title: 'ion-fab-button'
 ---
 
-import Props from '@ionic-internal/component-api/v7/fab-button/props.md';
-import Events from '@ionic-internal/component-api/v7/fab-button/events.md';
-import Methods from '@ionic-internal/component-api/v7/fab-button/methods.md';
-import Parts from '@ionic-internal/component-api/v7/fab-button/parts.md';
+import Props from '@ionic-internal/component-api/v7/fab-button/props.mdx';
+import Events from '@ionic-internal/component-api/v7/fab-button/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/fab-button/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/fab-button/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/fab-button/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/fab-button/slots.md';
+import Slots from '@ionic-internal/component-api/v7/fab-button/slots.mdx';
 
 <head>
   <title>ion-fab-button: Ionic FAB Button Icon for Primary Action</title>
diff --git a/versioned_docs/version-v7/api/fab-list.md b/versioned_docs/version-v7/api/fab-list.mdx
similarity index 95%
rename from versioned_docs/version-v7/api/fab-list.md
rename to versioned_docs/version-v7/api/fab-list.mdx
index 3faa38a31a9..14272b2c7f1 100644
--- a/versioned_docs/version-v7/api/fab-list.md
+++ b/versioned_docs/version-v7/api/fab-list.mdx
@@ -2,12 +2,12 @@
 title: 'ion-fab-list'
 ---
 
-import Props from '@ionic-internal/component-api/v7/fab-list/props.md';
-import Events from '@ionic-internal/component-api/v7/fab-list/events.md';
-import Methods from '@ionic-internal/component-api/v7/fab-list/methods.md';
-import Parts from '@ionic-internal/component-api/v7/fab-list/parts.md';
+import Props from '@ionic-internal/component-api/v7/fab-list/props.mdx';
+import Events from '@ionic-internal/component-api/v7/fab-list/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/fab-list/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/fab-list/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/fab-list/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/fab-list/slots.md';
+import Slots from '@ionic-internal/component-api/v7/fab-list/slots.mdx';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v7/api/fab.md b/versioned_docs/version-v7/api/fab.mdx
similarity index 96%
rename from versioned_docs/version-v7/api/fab.md
rename to versioned_docs/version-v7/api/fab.mdx
index 1ef85cf7808..437741dcd13 100644
--- a/versioned_docs/version-v7/api/fab.md
+++ b/versioned_docs/version-v7/api/fab.mdx
@@ -2,12 +2,12 @@
 title: 'ion-fab'
 ---
 
-import Props from '@ionic-internal/component-api/v7/fab/props.md';
-import Events from '@ionic-internal/component-api/v7/fab/events.md';
-import Methods from '@ionic-internal/component-api/v7/fab/methods.md';
-import Parts from '@ionic-internal/component-api/v7/fab/parts.md';
+import Props from '@ionic-internal/component-api/v7/fab/props.mdx';
+import Events from '@ionic-internal/component-api/v7/fab/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/fab/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/fab/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/fab/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/fab/slots.md';
+import Slots from '@ionic-internal/component-api/v7/fab/slots.mdx';
 
 <head>
   <title>ion-fab: Ionic Floating Action Button for Android and iOS</title>
@@ -25,7 +25,7 @@ Fabs are container elements that contain one or more [fab buttons](./fab-button)
 
 ## Basic Usage
 
-import BasicUsage from '@site/static/usage/v7/fab/basic/index.md';
+import BasicUsage from '@site/static/usage/v7/fab/basic/index.mdx';
 
 <BasicUsage />
 
@@ -33,7 +33,7 @@ import BasicUsage from '@site/static/usage/v7/fab/basic/index.md';
 
 The `side` property of the [fab list](./fab-list) component controls where it appears relative to the main fab button. A single fab can have multiple fab lists as long as they all have different values for `side`.
 
-import ListSide from '@site/static/usage/v7/fab/list-side/index.md';
+import ListSide from '@site/static/usage/v7/fab/list-side/index.mdx';
 
 <ListSide />
 
@@ -41,7 +41,7 @@ import ListSide from '@site/static/usage/v7/fab/list-side/index.md';
 
 In order to place the fab in a fixed position, it should be assigned to the `fixed` slot of the outer [content](./content) component. Use the `vertical` and `horizontal` props to control the alignment of the fab in the viewport. The `edge` prop will cause the fab button to overlap with the app's header or footer.
 
-import Positioning from '@site/static/usage/v7/fab/positioning/index.md';
+import Positioning from '@site/static/usage/v7/fab/positioning/index.mdx';
 
 <Positioning />
 
@@ -67,7 +67,7 @@ ion-fab {
 
 If there is an `ion-header` (for a fab with `vertical` set to `"top"`) or `ion-footer` (for a fab with `vertical` set to `"bottom"`), no CSS adjustment is needed because the fab gets positioned relative to the header or footer.
 
-import SafeArea from '@site/static/usage/v7/fab/safe-area/index.md';
+import SafeArea from '@site/static/usage/v7/fab/safe-area/index.mdx';
 
 <SafeArea />
 
@@ -75,7 +75,7 @@ import SafeArea from '@site/static/usage/v7/fab/safe-area/index.md';
 
 Setting the `size` property of the main fab button to `"small"` will render it at a mini size. Note that this property will not have an effect when used with the inner fab buttons.
 
-import ButtonSizing from '@site/static/usage/v7/fab/button-sizing/index.md';
+import ButtonSizing from '@site/static/usage/v7/fab/button-sizing/index.mdx';
 
 <ButtonSizing />
 
@@ -83,19 +83,19 @@ import ButtonSizing from '@site/static/usage/v7/fab/button-sizing/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v7/fab/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/fab/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSCustomProperties from '@site/static/usage/v7/fab/theming/css-custom-properties/index.md';
+import CSSCustomProperties from '@site/static/usage/v7/fab/theming/css-custom-properties/index.mdx';
 
 <CSSCustomProperties />
 
 ### CSS Shadow Parts
 
-import CSSShadowParts from '@site/static/usage/v7/fab/theming/css-shadow-parts/index.md';
+import CSSShadowParts from '@site/static/usage/v7/fab/theming/css-shadow-parts/index.mdx';
 
 <CSSShadowParts />
 
diff --git a/versioned_docs/version-v7/api/footer.md b/versioned_docs/version-v7/api/footer.mdx
similarity index 92%
rename from versioned_docs/version-v7/api/footer.md
rename to versioned_docs/version-v7/api/footer.mdx
index 2ec0f6cc0bf..1844227cc42 100644
--- a/versioned_docs/version-v7/api/footer.md
+++ b/versioned_docs/version-v7/api/footer.mdx
@@ -2,12 +2,12 @@
 title: 'ion-footer'
 ---
 
-import Props from '@ionic-internal/component-api/v7/footer/props.md';
-import Events from '@ionic-internal/component-api/v7/footer/events.md';
-import Methods from '@ionic-internal/component-api/v7/footer/methods.md';
-import Parts from '@ionic-internal/component-api/v7/footer/parts.md';
+import Props from '@ionic-internal/component-api/v7/footer/props.mdx';
+import Events from '@ionic-internal/component-api/v7/footer/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/footer/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/footer/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/footer/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/footer/slots.md';
+import Slots from '@ionic-internal/component-api/v7/footer/slots.mdx';
 
 <head>
   <title>ion-footer: Page Footer | Ionic App Footer Root Component</title>
@@ -23,7 +23,7 @@ Footer is a root component of a page that aligns itself to the bottom of the pag
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/footer/basic/index.md';
+import Basic from '@site/static/usage/v7/footer/basic/index.mdx';
 
 <Basic />
 
@@ -31,7 +31,7 @@ import Basic from '@site/static/usage/v7/footer/basic/index.md';
 
 Footers can match the transparency found in native iOS applications by setting the `translucent` property. In order to see the content scrolling behind the footer, the `fullscreen` property needs to be set on the content. This effect will only apply when the mode is `"ios"` and the device supports [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility).
 
-import Translucent from '@site/static/usage/v7/footer/translucent/index.md';
+import Translucent from '@site/static/usage/v7/footer/translucent/index.mdx';
 
 <Translucent />
 
@@ -39,7 +39,7 @@ import Translucent from '@site/static/usage/v7/footer/translucent/index.md';
 
 Many native iOS applications have a fade effect on the toolbar. This can be achieved by setting the `collapse` property on the footer to `"fade"`. When the content is scrolled to the end, the background and border on the footer will fade away. This effect will only apply when the mode is `"ios"`.
 
-import Fade from '@site/static/usage/v7/footer/fade/index.md';
+import Fade from '@site/static/usage/v7/footer/fade/index.mdx';
 
 <Fade />
 
@@ -47,7 +47,7 @@ import Fade from '@site/static/usage/v7/footer/fade/index.md';
 
 A fade footer requires a scroll container to work properly. When using a virtual scrolling solution, a custom scroll target needs to be provided. Scrolling on the content needs to be disabled and the `.ion-content-scroll-host` class needs to be added to the element responsible for scrolling.
 
-import CustomScrollTarget from '@site/static/usage/v7/footer/custom-scroll-target/index.md';
+import CustomScrollTarget from '@site/static/usage/v7/footer/custom-scroll-target/index.mdx';
 
 <CustomScrollTarget />
 
@@ -55,7 +55,7 @@ import CustomScrollTarget from '@site/static/usage/v7/footer/custom-scroll-targe
 
 In `"md"` mode, the footer will have a `box-shadow` on the top. In `"ios"` mode, it will receive a `border` on the top. These can be removed by adding the `.ion-no-border` class to the footer.
 
-import NoBorder from '@site/static/usage/v7/footer/no-border/index.md';
+import NoBorder from '@site/static/usage/v7/footer/no-border/index.mdx';
 
 <NoBorder />
 
diff --git a/versioned_docs/version-v7/api/grid.md b/versioned_docs/version-v7/api/grid.mdx
similarity index 92%
rename from versioned_docs/version-v7/api/grid.md
rename to versioned_docs/version-v7/api/grid.mdx
index 85a002e62fe..eff2dc136b7 100644
--- a/versioned_docs/version-v7/api/grid.md
+++ b/versioned_docs/version-v7/api/grid.mdx
@@ -2,12 +2,12 @@
 title: 'ion-grid'
 ---
 
-import Props from '@ionic-internal/component-api/v7/grid/props.md';
-import Events from '@ionic-internal/component-api/v7/grid/events.md';
-import Methods from '@ionic-internal/component-api/v7/grid/methods.md';
-import Parts from '@ionic-internal/component-api/v7/grid/parts.md';
+import Props from '@ionic-internal/component-api/v7/grid/props.mdx';
+import Events from '@ionic-internal/component-api/v7/grid/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/grid/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/grid/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/grid/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/grid/slots.md';
+import Slots from '@ionic-internal/component-api/v7/grid/slots.mdx';
 
 <head>
   <title>ion-grid: Display Grids for Mobile-First Custom App Layout</title>
@@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-The grid is a powerful mobile-first flexbox system for building custom layouts. It is composed of three units — a grid, [row(s)](row.md) and [column(s)](col.md). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS.
+The grid is a powerful mobile-first flexbox system for building custom layouts. It is composed of three units — a grid, [row(s)](row.mdx) and [column(s)](col.mdx). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS.
 
 ## Overview
 
@@ -56,7 +56,7 @@ The default breakpoints for the grid and the corresponding properties are define
 
 By default, columns will take up equal width inside of a row for all devices and screen sizes.
 
-import Basic from '@site/static/usage/v7/grid/basic/index.md';
+import Basic from '@site/static/usage/v7/grid/basic/index.mdx';
 
 <Basic />
 
@@ -72,7 +72,7 @@ Grids take up 100% width of their container. By adding the `fixed` property to t
 | lg   | 960px  | Set grid width to 960px when (min-width: 992px)   |
 | xl   | 1140px | Set grid width to 1140px when (min-width: 1200px) |
 
-import Fixed from '@site/static/usage/v7/grid/fixed/index.md';
+import Fixed from '@site/static/usage/v7/grid/fixed/index.mdx';
 
 <Fixed />
 
@@ -84,7 +84,7 @@ Columns can be set to specific sizes to take up a certain number out of the tota
 
 By setting the `size` to `"auto"` the column can size itself based on the natural width of its content. This is necessary when setting a column to an absolute width, such as a specific number of pixels. The columns next to the auto-width column will resize to fill the row.
 
-import SizeAuto from '@site/static/usage/v7/grid/size-auto/index.md';
+import SizeAuto from '@site/static/usage/v7/grid/size-auto/index.mdx';
 
 <SizeAuto />
 
@@ -92,7 +92,7 @@ import SizeAuto from '@site/static/usage/v7/grid/size-auto/index.md';
 
 Set the `size` of a column and the others will automatically resize around it. If a size is specified on all of the columns and it doesn't add up to the total number of columns, there will be empty space after the columns.
 
-import Size from '@site/static/usage/v7/grid/size/index.md';
+import Size from '@site/static/usage/v7/grid/size/index.mdx';
 
 <Size />
 
@@ -100,7 +100,7 @@ import Size from '@site/static/usage/v7/grid/size/index.md';
 
 The `size` property will change the column width for all [breakpoints](#default-breakpoints). Column also provides several size properties with the breakpoint name appended to the end of "size". These properties can be used to change the width of the column based on the screen size. Open the below example in StackBlitz and resize the screen to see the column widths change.
 
-import SizeResponsive from '@site/static/usage/v7/grid/size-responsive/index.md';
+import SizeResponsive from '@site/static/usage/v7/grid/size-responsive/index.mdx';
 
 <SizeResponsive />
 
@@ -112,7 +112,7 @@ Columns can be offset to shift to the right by a certain number of columns out o
 
 Columns can be moved to the right by using the `offset` property. This property increases the left margin of the column by the number of specified columns. It also shifts the columns to the right of it, if any exist.
 
-import Offset from '@site/static/usage/v7/grid/offset/index.md';
+import Offset from '@site/static/usage/v7/grid/offset/index.mdx';
 
 <Offset />
 
@@ -120,7 +120,7 @@ import Offset from '@site/static/usage/v7/grid/offset/index.md';
 
 The `offset` property will change the column's left margin for all [breakpoints](#default-breakpoints). Column also provides several offset properties with the breakpoint name appended to the end of "offset". These properties can be used to change the offset of the column based on the screen size. Open the below example in StackBlitz and resize the screen to see the column offsets change.
 
-import OffsetResponsive from '@site/static/usage/v7/grid/offset-responsive/index.md';
+import OffsetResponsive from '@site/static/usage/v7/grid/offset-responsive/index.mdx';
 
 <OffsetResponsive />
 
@@ -132,7 +132,7 @@ Columns can be pushed to to the right or pulled to the left by a certain number
 
 Reorder the columns by adding the `push` and `pull` properties. These properties adjust the `left` and `right` of the columns by the specified number of columns making it easy to reorder columns. This will cause columns to overlap if they are shifted to where another column is positioned.
 
-import PushPull from '@site/static/usage/v7/grid/push-pull/index.md';
+import PushPull from '@site/static/usage/v7/grid/push-pull/index.mdx';
 
 <PushPull />
 
@@ -140,7 +140,7 @@ import PushPull from '@site/static/usage/v7/grid/push-pull/index.md';
 
 The `push` and `pull` properties will change the column's position for all [breakpoints](#default-breakpoints). Column also provides several `push` and `pull` properties with the breakpoint name appended to the end of "push" / "pull". These properties can be used to change the position of the column based on the screen size. Open the below example in StackBlitz and resize the screen to see the column positions change.
 
-import PushPullResponsive from '@site/static/usage/v7/grid/push-pull-responsive/index.md';
+import PushPullResponsive from '@site/static/usage/v7/grid/push-pull-responsive/index.mdx';
 
 <PushPullResponsive />
 
@@ -150,15 +150,15 @@ import PushPullResponsive from '@site/static/usage/v7/grid/push-pull-responsive/
 
 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](/layout/css-utilities#flex-container-properties).
 
-import VerticalAlignment from '@site/static/usage/v7/grid/vertical-alignment/index.md';
+import VerticalAlignment from '@site/static/usage/v7/grid/vertical-alignment/index.mdx';
 
 <VerticalAlignment />
 
 ### 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](/layout/css-utilities.md#flex-container-properties).
+All columns can be horizontally aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](/layout/css-utilities.mdx#flex-container-properties).
 
-import HorizontalAlignment from '@site/static/usage/v7/grid/horizontal-alignment/index.md';
+import HorizontalAlignment from '@site/static/usage/v7/grid/horizontal-alignment/index.mdx';
 
 <HorizontalAlignment />
 
@@ -170,7 +170,7 @@ Using our built-in CSS variables, it’s possible to customize the predefined gr
 
 The width of a fixed grid can be set for all breakpoints with the `--ion-grid-width` CSS variable. To override individual breakpoints, use the `--ion-grid-width-{breakpoint}` CSS variables. The default value for each of the breakpoints can be found in the [Fixed Grid](#fixed-grid) section. Open the below example in StackBlitz and resize the screen to see the grid width change.
 
-import Width from '@site/static/usage/v7/grid/customizing/width/index.md';
+import Width from '@site/static/usage/v7/grid/customizing/width/index.mdx';
 
 <Width />
 
@@ -178,7 +178,7 @@ import Width from '@site/static/usage/v7/grid/customizing/width/index.md';
 
 The number of grid columns can be modified with the `--ion-grid-columns` CSS variable. By default there are 12 grid columns, but this can be changed to any positive integer and be used to calculate the width of each individual column.
 
-import ColumnNumber from '@site/static/usage/v7/grid/customizing/column-number/index.md';
+import ColumnNumber from '@site/static/usage/v7/grid/customizing/column-number/index.mdx';
 
 <ColumnNumber />
 
@@ -188,7 +188,7 @@ The padding on the grid container can be set for all breakpoints with the `--ion
 
 The padding on the columns can be set for all breakpoints with the `--ion-grid-column-padding` CSS variable. To override individual breakpoints, use the `--ion-grid-column-padding-{breakpoint}` CSS variables.
 
-import Padding from '@site/static/usage/v7/grid/customizing/padding/index.md';
+import Padding from '@site/static/usage/v7/grid/customizing/padding/index.mdx';
 
 <Padding />
 
diff --git a/versioned_docs/version-v7/api/header.md b/versioned_docs/version-v7/api/header.mdx
similarity index 93%
rename from versioned_docs/version-v7/api/header.md
rename to versioned_docs/version-v7/api/header.mdx
index 8acee8b6331..16c7aa1fc57 100644
--- a/versioned_docs/version-v7/api/header.md
+++ b/versioned_docs/version-v7/api/header.mdx
@@ -2,12 +2,12 @@
 title: 'ion-header'
 ---
 
-import Props from '@ionic-internal/component-api/v7/header/props.md';
-import Events from '@ionic-internal/component-api/v7/header/events.md';
-import Methods from '@ionic-internal/component-api/v7/header/methods.md';
-import Parts from '@ionic-internal/component-api/v7/header/parts.md';
+import Props from '@ionic-internal/component-api/v7/header/props.mdx';
+import Events from '@ionic-internal/component-api/v7/header/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/header/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/header/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/header/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/header/slots.md';
+import Slots from '@ionic-internal/component-api/v7/header/slots.mdx';
 
 <head>
   <title>ion-header: Header Parent Component for Ionic Framework Apps</title>
@@ -23,7 +23,7 @@ Header is a root component of a page that aligns itself to the top of the page.
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/header/basic/index.md';
+import Basic from '@site/static/usage/v7/header/basic/index.mdx';
 
 <Basic />
 
@@ -31,7 +31,7 @@ import Basic from '@site/static/usage/v7/header/basic/index.md';
 
 Headers can match the transparency found in native iOS applications by setting the `translucent` property. In order to see the content scrolling behind the header, the `fullscreen` property needs to be set on the content. This effect will only apply when the mode is `"ios"` and the device supports [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility).
 
-import Translucent from '@site/static/usage/v7/header/translucent/index.md';
+import Translucent from '@site/static/usage/v7/header/translucent/index.mdx';
 
 <Translucent />
 
@@ -39,7 +39,7 @@ import Translucent from '@site/static/usage/v7/header/translucent/index.md';
 
 Ionic provides the functionality found in native iOS applications to show a large toolbar title and then collapse it to a small title when scrolling. This can be done by adding two headers, one above the content and one inside of the content, and then setting the `collapse` property to `"condense"` on the header inside of the content. This effect will only apply when the mode is "ios".
 
-import Condense from '@site/static/usage/v7/header/condense/index.md';
+import Condense from '@site/static/usage/v7/header/condense/index.mdx';
 
 <Condense />
 
@@ -49,7 +49,7 @@ Many native iOS applications have a fade effect on the toolbar. This can be achi
 
 This functionality can be combined with a [Condensed Header](#condensed-header) as well. The `collapse` property with a value set to `"fade"` should be on the header outside of the content.
 
-import Fade from '@site/static/usage/v7/header/fade/index.md';
+import Fade from '@site/static/usage/v7/header/fade/index.mdx';
 
 <Fade />
 
@@ -57,7 +57,7 @@ import Fade from '@site/static/usage/v7/header/fade/index.md';
 
 A fade header requires a scroll container to work properly. When using a virtual scrolling solution, a custom scroll target needs to be provided. Scrolling on the content needs to be disabled and the `.ion-content-scroll-host` class needs to be added to the element responsible for scrolling.
 
-import CustomScrollTarget from '@site/static/usage/v7/header/custom-scroll-target/index.md';
+import CustomScrollTarget from '@site/static/usage/v7/header/custom-scroll-target/index.mdx';
 
 <CustomScrollTarget />
 
@@ -65,7 +65,7 @@ import CustomScrollTarget from '@site/static/usage/v7/header/custom-scroll-targe
 
 In `"md"` mode, the header will have a `box-shadow` on the bottom. In `"ios"` mode, it will receive a `border` on the bottom. These can be removed by adding the `.ion-no-border` class to the header.
 
-import NoBorder from '@site/static/usage/v7/header/no-border/index.md';
+import NoBorder from '@site/static/usage/v7/header/no-border/index.mdx';
 
 <NoBorder />
 
diff --git a/versioned_docs/version-v7/api/icon.md b/versioned_docs/version-v7/api/icon.mdx
similarity index 96%
rename from versioned_docs/version-v7/api/icon.md
rename to versioned_docs/version-v7/api/icon.mdx
index a6919737974..229512d4eae 100644
--- a/versioned_docs/version-v7/api/icon.md
+++ b/versioned_docs/version-v7/api/icon.mdx
@@ -16,7 +16,7 @@ For a list of all available icons, see <a href="https://ionic.io/ionicons">ionic
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/icon/basic/index.md';
+import Basic from '@site/static/usage/v7/icon/basic/index.mdx';
 
 <Basic />
 
diff --git a/versioned_docs/version-v7/api/img.md b/versioned_docs/version-v7/api/img.mdx
similarity index 94%
rename from versioned_docs/version-v7/api/img.md
rename to versioned_docs/version-v7/api/img.mdx
index 355ca819204..ee6368788bc 100644
--- a/versioned_docs/version-v7/api/img.md
+++ b/versioned_docs/version-v7/api/img.mdx
@@ -2,12 +2,12 @@
 title: 'ion-img'
 ---
 
-import Props from '@ionic-internal/component-api/v7/img/props.md';
-import Events from '@ionic-internal/component-api/v7/img/events.md';
-import Methods from '@ionic-internal/component-api/v7/img/methods.md';
-import Parts from '@ionic-internal/component-api/v7/img/parts.md';
+import Props from '@ionic-internal/component-api/v7/img/props.mdx';
+import Events from '@ionic-internal/component-api/v7/img/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/img/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/img/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/img/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/img/slots.md';
+import Slots from '@ionic-internal/component-api/v7/img/slots.mdx';
 
 <head>
   <title>ion-img: Img Tag to Lazy Load Images in Viewport</title>
@@ -25,7 +25,7 @@ Img is a tag that will lazily load an image whenever the tag is in the viewport.
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/img/basic/index.md';
+import Basic from '@site/static/usage/v7/img/basic/index.mdx';
 
 <Basic />
 
diff --git a/versioned_docs/version-v7/api/infinite-scroll-content.md b/versioned_docs/version-v7/api/infinite-scroll-content.mdx
similarity index 85%
rename from versioned_docs/version-v7/api/infinite-scroll-content.md
rename to versioned_docs/version-v7/api/infinite-scroll-content.mdx
index 477881b56a6..ccd6b839c41 100644
--- a/versioned_docs/version-v7/api/infinite-scroll-content.md
+++ b/versioned_docs/version-v7/api/infinite-scroll-content.mdx
@@ -2,18 +2,18 @@
 title: 'ion-infinite-scroll-content'
 ---
 
-import Props from '@ionic-internal/component-api/v7/infinite-scroll-content/props.md';
-import Events from '@ionic-internal/component-api/v7/infinite-scroll-content/events.md';
-import Methods from '@ionic-internal/component-api/v7/infinite-scroll-content/methods.md';
-import Parts from '@ionic-internal/component-api/v7/infinite-scroll-content/parts.md';
+import Props from '@ionic-internal/component-api/v7/infinite-scroll-content/props.mdx';
+import Events from '@ionic-internal/component-api/v7/infinite-scroll-content/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/infinite-scroll-content/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/infinite-scroll-content/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/infinite-scroll-content/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/infinite-scroll-content/slots.md';
+import Slots from '@ionic-internal/component-api/v7/infinite-scroll-content/slots.mdx';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 The `ion-infinite-scroll-content` component is the default child used by the `ion-infinite-scroll`. It displays an infinite scroll spinner that looks best based on the platform and changes the look depending on the infinite scroll's state. The default spinner can be changed and text can be added by setting the `loadingSpinner` and `loadingText` properties.
 
-For more information as well as usage, see the [Infinite Scroll Documentation](./infinite-scroll.md#infinite-scroll-content).
+For more information as well as usage, see the [Infinite Scroll Documentation](./infinite-scroll.mdx#infinite-scroll-content).
 
 ## Properties
 
diff --git a/versioned_docs/version-v7/api/infinite-scroll.md b/versioned_docs/version-v7/api/infinite-scroll.mdx
similarity index 95%
rename from versioned_docs/version-v7/api/infinite-scroll.md
rename to versioned_docs/version-v7/api/infinite-scroll.mdx
index 4b33dda184e..4b09b8f1e13 100644
--- a/versioned_docs/version-v7/api/infinite-scroll.md
+++ b/versioned_docs/version-v7/api/infinite-scroll.mdx
@@ -2,12 +2,12 @@
 title: 'ion-infinite-scroll'
 ---
 
-import Props from '@ionic-internal/component-api/v7/infinite-scroll/props.md';
-import Events from '@ionic-internal/component-api/v7/infinite-scroll/events.md';
-import Methods from '@ionic-internal/component-api/v7/infinite-scroll/methods.md';
-import Parts from '@ionic-internal/component-api/v7/infinite-scroll/parts.md';
+import Props from '@ionic-internal/component-api/v7/infinite-scroll/props.mdx';
+import Events from '@ionic-internal/component-api/v7/infinite-scroll/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/infinite-scroll/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/infinite-scroll/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/infinite-scroll/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/infinite-scroll/slots.md';
+import Slots from '@ionic-internal/component-api/v7/infinite-scroll/slots.mdx';
 
 <head>
   <title>ion-infinite-scroll: Infinite Scroller Action Component</title>
@@ -25,7 +25,7 @@ The expression assigned to the `ionInfinite` event is called when the user reach
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/infinite-scroll/basic/index.md';
+import Basic from '@site/static/usage/v7/infinite-scroll/basic/index.mdx';
 
 <Basic />
 
@@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v7/infinite-scroll/basic/index.md';
 
 The `ion-infinite-scroll-content` is responsible for the visual display of the infinite scroll interaction. By default this component changes its look depending on the infinite scroll's state. It displays a spinner that looks best based on the platform the user is on. Both the spinner and loading text can be customized by setting properties on the `ion-infinite-scroll-content` component.
 
-import InfiniteScrollContent from '@site/static/usage/v7/infinite-scroll/infinite-scroll-content/index.md';
+import InfiniteScrollContent from '@site/static/usage/v7/infinite-scroll/infinite-scroll-content/index.mdx';
 
 <InfiniteScrollContent />
 
@@ -41,7 +41,7 @@ import InfiniteScrollContent from '@site/static/usage/v7/infinite-scroll/infinit
 
 Separating the `ion-infinite-scroll` and `ion-infinite-scroll-content` components allows developers to create their own content components, if desired. This content can contain anything, from an SVG element to elements with unique CSS animations.
 
-import CustomContent from '@site/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/index.md';
+import CustomContent from '@site/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/index.mdx';
 
 <CustomContent />
 
diff --git a/versioned_docs/version-v7/api/input.md b/versioned_docs/version-v7/api/input.mdx
similarity index 92%
rename from versioned_docs/version-v7/api/input.md
rename to versioned_docs/version-v7/api/input.mdx
index c6a6c35a7b4..e873ccb37a8 100644
--- a/versioned_docs/version-v7/api/input.md
+++ b/versioned_docs/version-v7/api/input.mdx
@@ -2,12 +2,12 @@
 title: 'ion-input'
 ---
 
-import Props from '@ionic-internal/component-api/v7/input/props.md';
-import Events from '@ionic-internal/component-api/v7/input/events.md';
-import Methods from '@ionic-internal/component-api/v7/input/methods.md';
-import Parts from '@ionic-internal/component-api/v7/input/parts.md';
+import Props from '@ionic-internal/component-api/v7/input/props.mdx';
+import Events from '@ionic-internal/component-api/v7/input/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/input/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/input/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/input/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/input/slots.md';
+import Slots from '@ionic-internal/component-api/v7/input/slots.mdx';
 
 <head>
   <title>ion-input: Custom Input With Styling and CSS Properties</title>
@@ -25,7 +25,7 @@ The input component is a wrapper to the HTML input element with custom styling a
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/input/basic/index.md';
+import Basic from '@site/static/usage/v7/input/basic/index.mdx';
 
 <Basic />
 
@@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v7/input/basic/index.md';
 
 The input component is meant for text type inputs only, such as `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, and `"url"`. It supports all standard text input events including `keyup`, `keydown`, `keypress`, and more. The default `type` is `"text"`.
 
-import Types from '@site/static/usage/v7/input/types/index.md';
+import Types from '@site/static/usage/v7/input/types/index.mdx';
 
 <Types />
 
@@ -49,7 +49,7 @@ Labels should be used to describe the input. They can be used visually, and they
 
 Labels will take up the width of their content by default. Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
 
-import LabelPlacement from '@site/static/usage/v7/input/label-placement/index.md';
+import LabelPlacement from '@site/static/usage/v7/input/label-placement/index.mdx';
 
 <LabelPlacement />
 
@@ -59,7 +59,7 @@ While plaintext labels should be passed in via the `label` property, if custom H
 
 Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior.
 
-import LabelSlot from '@site/static/usage/v7/input/label-slot/index.md';
+import LabelSlot from '@site/static/usage/v7/input/label-slot/index.mdx';
 
 <LabelSlot />
 
@@ -67,7 +67,7 @@ import LabelSlot from '@site/static/usage/v7/input/label-slot/index.md';
 
 If no visible label is needed, developers should still supply an `aria-label` so the input is accessible to screen readers.
 
-import NoVisibleLabel from '@site/static/usage/v7/input/no-visible-label/index.md';
+import NoVisibleLabel from '@site/static/usage/v7/input/no-visible-label/index.mdx';
 
 <NoVisibleLabel />
 
@@ -75,7 +75,7 @@ import NoVisibleLabel from '@site/static/usage/v7/input/no-visible-label/index.m
 
 Inputs offer two options for clearing the input based on how you interact with it. The first way is by adding the `clearInput` property which will show a clear button when the input has a `value`. The second way is the `clearOnEdit` property which will clear the input after it has been blurred and then typed in again. Inputs with a `type` set to `"password"` will have `clearOnEdit` enabled by default.
 
-import Clear from '@site/static/usage/v7/input/clear/index.md';
+import Clear from '@site/static/usage/v7/input/clear/index.mdx';
 
 <Clear />
 
@@ -87,7 +87,7 @@ Since the `fill` styles visually defines the input container, inputs that use `f
 
 Filled inputs can be used on iOS by setting Input's `mode` to `md`.
 
-import Fill from '@site/static/usage/v7/input/fill/index.md';
+import Fill from '@site/static/usage/v7/input/fill/index.mdx';
 
 <Fill />
 
@@ -97,7 +97,7 @@ Helper and error text can be used inside of an input with the `helperText` and `
 
 In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation.
 
-import HelperError from '@site/static/usage/v7/input/helper-error/index.md';
+import HelperError from '@site/static/usage/v7/input/helper-error/index.mdx';
 
 <HelperError />
 
@@ -107,13 +107,13 @@ The input counter is text that displays under an input to notify the user of how
 
 The `counter` and `counterFormatter` properties on `ion-item` were [deprecated in Ionic 7](/docs/api/input#using-the-modern-syntax) and should be used directly on `ion-input` instead.
 
-import Counter from '@site/static/usage/v7/input/counter/index.md';
+import Counter from '@site/static/usage/v7/input/counter/index.mdx';
 
 <Counter />
 
 Inputs with a counter add a border between the input and the counter, therefore they should not be placed inside of an `ion-item` which adds an additional border under the item. The `ion-padding-start` class can be added to align the counter inputs with inputs inside of items.
 
-import CounterAlignment from '@site/static/usage/v7/input/counter-alignment/index.md';
+import CounterAlignment from '@site/static/usage/v7/input/counter-alignment/index.mdx';
 
 <CounterAlignment />
 
@@ -123,7 +123,7 @@ Developers can use the `ionInput` event to update the input value in response to
 
 When storing the value in a state variable, we recommend updating both the state variable and the `ion-input` component value. This ensures that the state variable and the `ion-input` component value remain in sync.
 
-import FilteringData from '@site/static/usage/v7/input/filtering/index.md';
+import FilteringData from '@site/static/usage/v7/input/filtering/index.mdx';
 
 <FilteringData />
 
@@ -137,7 +137,7 @@ To get started with Maskito, install the library:
 npm install @maskito/core @maskito/{angular,react,vue}
 ```
 
-import Masking from '@site/static/usage/v7/input/mask/index.md';
+import Masking from '@site/static/usage/v7/input/mask/index.mdx';
 
 <Masking />
 
@@ -154,12 +154,12 @@ The `start` and `end` slots can be used to place icons, buttons, or prefix/suffi
 Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior.
 
 :::note
-In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
+In most cases, [Icon](./icon.mdx) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
 
-If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to.
+If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.mdx). This ensures that the content can be tabbed to.
 :::
 
-import StartEndSlots from '@site/static/usage/v7/input/start-end-slots/index.md';
+import StartEndSlots from '@site/static/usage/v7/input/start-end-slots/index.mdx';
 
 <StartEndSlots />
 
@@ -173,7 +173,7 @@ Setting the `color` property changes the color palette for each input. On `ios`
 The `color` property does _not_ change the text color of the input. For that, use the [`--color` CSS property](#css-custom-properties-1).
 :::
 
-import Colors from '@site/static/usage/v7/input/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/input/theming/colors/index.mdx';
 
 <Colors />
 
@@ -181,7 +181,7 @@ import Colors from '@site/static/usage/v7/input/theming/colors/index.md';
 
 Input uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. Targeting the `ion-input` for customization will not work; therefore we recommend adding a class and customizing it that way.
 
-import CSSProps from '@site/static/usage/v7/input/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/input/theming/css-properties/index.mdx';
 
 <CSSProps />
 
@@ -199,7 +199,7 @@ Using the modern syntax involves three steps:
 2. Move input-specific properties from `ion-item` on to `ion-input`. This includes the `counter`, `counterFormatter`, `fill`, and `shape` properties.
 3. Remove usages of the `helper` and `error` slots on `ion-item` and use the `helperText` and `errorText` properties on `ion-input` instead.
 
-import Migration from '@site/static/usage/v7/input/migration/index.md';
+import Migration from '@site/static/usage/v7/input/migration/index.mdx';
 
 <Migration />
 
diff --git a/versioned_docs/version-v7/api/item-divider.md b/versioned_docs/version-v7/api/item-divider.mdx
similarity index 92%
rename from versioned_docs/version-v7/api/item-divider.md
rename to versioned_docs/version-v7/api/item-divider.mdx
index 0d9fd56a5e4..18d86c6116f 100644
--- a/versioned_docs/version-v7/api/item-divider.md
+++ b/versioned_docs/version-v7/api/item-divider.mdx
@@ -2,12 +2,12 @@
 title: 'ion-item-divider'
 ---
 
-import Props from '@ionic-internal/component-api/v7/item-divider/props.md';
-import Events from '@ionic-internal/component-api/v7/item-divider/events.md';
-import Methods from '@ionic-internal/component-api/v7/item-divider/methods.md';
-import Parts from '@ionic-internal/component-api/v7/item-divider/parts.md';
+import Props from '@ionic-internal/component-api/v7/item-divider/props.mdx';
+import Events from '@ionic-internal/component-api/v7/item-divider/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/item-divider/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/item-divider/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/item-divider/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/item-divider/slots.md';
+import Slots from '@ionic-internal/component-api/v7/item-divider/slots.mdx';
 
 <head>
   <title>ion-item-divider: Item Divider Block Element for Ionic Apps</title>
@@ -25,7 +25,7 @@ Item dividers are block elements that can be used to separate [items](./item) in
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/item-divider/basic/index.md';
+import Basic from '@site/static/usage/v7/item-divider/basic/index.mdx';
 
 <Basic />
 
@@ -33,13 +33,13 @@ import Basic from '@site/static/usage/v7/item-divider/basic/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v7/item-divider/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/item-divider/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v7/item-divider/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/item-divider/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v7/api/item-group.md b/versioned_docs/version-v7/api/item-group.mdx
similarity index 94%
rename from versioned_docs/version-v7/api/item-group.md
rename to versioned_docs/version-v7/api/item-group.mdx
index 7944da693a6..00b64f05eb3 100644
--- a/versioned_docs/version-v7/api/item-group.md
+++ b/versioned_docs/version-v7/api/item-group.mdx
@@ -2,12 +2,12 @@
 title: 'ion-item-group'
 ---
 
-import Props from '@ionic-internal/component-api/v7/item-group/props.md';
-import Events from '@ionic-internal/component-api/v7/item-group/events.md';
-import Methods from '@ionic-internal/component-api/v7/item-group/methods.md';
-import Parts from '@ionic-internal/component-api/v7/item-group/parts.md';
+import Props from '@ionic-internal/component-api/v7/item-group/props.mdx';
+import Events from '@ionic-internal/component-api/v7/item-group/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/item-group/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/item-group/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/item-group/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/item-group/slots.md';
+import Slots from '@ionic-internal/component-api/v7/item-group/slots.mdx';
 
 <head>
   <title>ion-item-group: Group Items to Divide into Multiple Sections</title>
@@ -23,13 +23,13 @@ Item groups are containers that organize similar [items](./item) together. They
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/item-group/basic/index.md';
+import Basic from '@site/static/usage/v7/item-group/basic/index.mdx';
 
 <Basic />
 
 ## Sliding Items
 
-import SlidingItems from '@site/static/usage/v7/item-group/sliding-items/index.md';
+import SlidingItems from '@site/static/usage/v7/item-group/sliding-items/index.mdx';
 
 <SlidingItems />
 
diff --git a/versioned_docs/version-v7/api/item-option.md b/versioned_docs/version-v7/api/item-option.mdx
similarity index 95%
rename from versioned_docs/version-v7/api/item-option.md
rename to versioned_docs/version-v7/api/item-option.mdx
index 42fdc7c01c9..958564b0bd5 100644
--- a/versioned_docs/version-v7/api/item-option.md
+++ b/versioned_docs/version-v7/api/item-option.mdx
@@ -2,12 +2,12 @@
 title: 'ion-item-option'
 ---
 
-import Props from '@ionic-internal/component-api/v7/item-option/props.md';
-import Events from '@ionic-internal/component-api/v7/item-option/events.md';
-import Methods from '@ionic-internal/component-api/v7/item-option/methods.md';
-import Parts from '@ionic-internal/component-api/v7/item-option/parts.md';
+import Props from '@ionic-internal/component-api/v7/item-option/props.mdx';
+import Events from '@ionic-internal/component-api/v7/item-option/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/item-option/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/item-option/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/item-option/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/item-option/slots.md';
+import Slots from '@ionic-internal/component-api/v7/item-option/slots.mdx';
 
 <head>
   <title>ion-item-option: Option Button for Sliding Item in Ionic</title>
diff --git a/versioned_docs/version-v7/api/item-options.md b/versioned_docs/version-v7/api/item-options.mdx
similarity index 96%
rename from versioned_docs/version-v7/api/item-options.md
rename to versioned_docs/version-v7/api/item-options.mdx
index 0268c4fb163..32237875697 100644
--- a/versioned_docs/version-v7/api/item-options.md
+++ b/versioned_docs/version-v7/api/item-options.mdx
@@ -2,12 +2,12 @@
 title: 'ion-item-options'
 ---
 
-import Props from '@ionic-internal/component-api/v7/item-options/props.md';
-import Events from '@ionic-internal/component-api/v7/item-options/events.md';
-import Methods from '@ionic-internal/component-api/v7/item-options/methods.md';
-import Parts from '@ionic-internal/component-api/v7/item-options/parts.md';
+import Props from '@ionic-internal/component-api/v7/item-options/props.mdx';
+import Events from '@ionic-internal/component-api/v7/item-options/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/item-options/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/item-options/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/item-options/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/item-options/slots.md';
+import Slots from '@ionic-internal/component-api/v7/item-options/slots.mdx';
 
 <head>
   <title>ion-item-options: Option Button Components for Ionic Apps</title>
diff --git a/versioned_docs/version-v7/api/item-sliding.md b/versioned_docs/version-v7/api/item-sliding.mdx
similarity index 96%
rename from versioned_docs/version-v7/api/item-sliding.md
rename to versioned_docs/version-v7/api/item-sliding.mdx
index 7104eaa21a5..0e420c98b28 100644
--- a/versioned_docs/version-v7/api/item-sliding.md
+++ b/versioned_docs/version-v7/api/item-sliding.mdx
@@ -2,12 +2,12 @@
 title: 'ion-item-sliding'
 ---
 
-import Props from '@ionic-internal/component-api/v7/item-sliding/props.md';
-import Events from '@ionic-internal/component-api/v7/item-sliding/events.md';
-import Methods from '@ionic-internal/component-api/v7/item-sliding/methods.md';
-import Parts from '@ionic-internal/component-api/v7/item-sliding/parts.md';
+import Props from '@ionic-internal/component-api/v7/item-sliding/props.mdx';
+import Events from '@ionic-internal/component-api/v7/item-sliding/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/item-sliding/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/item-sliding/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/item-sliding/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/item-sliding/slots.md';
+import Slots from '@ionic-internal/component-api/v7/item-sliding/slots.mdx';
 
 <head>
   <title>ion-item-sliding: Slide Buttons | Slide Right to Left</title>
@@ -25,7 +25,7 @@ A sliding item contains an item that can be dragged to reveal option buttons. It
 
 Sliding item options are placed on the `"end"` side of the item by default. This means that options are revealed when the 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 [item options](./item-options) element. Up to two item options can be used at the same time in order to reveal two different sets of options depending on the swiping direction.
 
-import Basic from '@site/static/usage/v7/item-sliding/basic/index.md';
+import Basic from '@site/static/usage/v7/item-sliding/basic/index.mdx';
 
 <Basic />
 
@@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v7/item-sliding/basic/index.md';
 
 When an icon is placed alongside text in the [item option](./item-option), it will display the icon on top of the text by default. The slot on the icon can be changed to any of the available [item option slots](./item-option#slots) to change its position.
 
-import Icons from '@site/static/usage/v7/item-sliding/icons/index.md';
+import Icons from '@site/static/usage/v7/item-sliding/icons/index.mdx';
 
 <Icons />
 
@@ -41,7 +41,7 @@ import Icons from '@site/static/usage/v7/item-sliding/icons/index.md';
 
 Options can be expanded to take up the full width of the parent `ion-item` if you swipe past a certain point. This can be combined with the `ionSwipe` event on the [item options](./item-options) to call a method when the item is fully swiped.
 
-import Expandable from '@site/static/usage/v7/item-sliding/expandable/index.md';
+import Expandable from '@site/static/usage/v7/item-sliding/expandable/index.mdx';
 
 <Expandable />
 
diff --git a/versioned_docs/version-v7/api/item.md b/versioned_docs/version-v7/api/item.mdx
similarity index 97%
rename from versioned_docs/version-v7/api/item.md
rename to versioned_docs/version-v7/api/item.mdx
index 598cae79c9e..463f056f4f7 100644
--- a/versioned_docs/version-v7/api/item.md
+++ b/versioned_docs/version-v7/api/item.mdx
@@ -2,12 +2,12 @@
 title: 'ion-item'
 ---
 
-import Props from '@ionic-internal/component-api/v7/item/props.md';
-import Events from '@ionic-internal/component-api/v7/item/events.md';
-import Methods from '@ionic-internal/component-api/v7/item/methods.md';
-import Parts from '@ionic-internal/component-api/v7/item/parts.md';
+import Props from '@ionic-internal/component-api/v7/item/props.mdx';
+import Events from '@ionic-internal/component-api/v7/item/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/item/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/item/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/item/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/item/slots.md';
+import Slots from '@ionic-internal/component-api/v7/item/slots.mdx';
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import BestPracticeFigure from '@components/global/BestPracticeFigure';
@@ -30,7 +30,7 @@ Items are elements that can contain text, icons, avatars, images, inputs, and an
 
 Items left align text and wrap when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using `.ion-text-nowrap` in the below example. See the [CSS Utilities Documentation](/docs/layout/css-utilities) for more classes that can be added to an item to transform the text.
 
-import Basic from '@site/static/usage/v7/item/basic/index.md';
+import Basic from '@site/static/usage/v7/item/basic/index.mdx';
 
 <Basic />
 
@@ -64,7 +64,7 @@ If a visual is required to interact with the item, such as an icon button, then
 
 In the example below, we are creating two lists with supporting visuals. The first list uses icons, and the second list uses avatars. The visuals are decorative, so they all have `aria-hidden="true"`. Additionally, they are presented consistently in the `start` slot.
 
-import SupportingVisuals from '@site/static/usage/v7/item/content-types/supporting-visuals/index.md';
+import SupportingVisuals from '@site/static/usage/v7/item/content-types/supporting-visuals/index.mdx';
 
 <SupportingVisuals />
 
@@ -102,7 +102,7 @@ The "Allow Notifications" label on the toggle has additional text underneath it
 
 Below that list is another list containing a textarea with a [Note](./note) containing long text underneath. The textarea was placed in its own list to make it apparent that the long text is associated with the textarea and not any other fields.
 
-import Text from '@site/static/usage/v7/item/content-types/text/index.md';
+import Text from '@site/static/usage/v7/item/content-types/text/index.mdx';
 
 <Text />
 
@@ -150,7 +150,7 @@ In the example below, we are creating two lists with different kinds of metadata
 
 The second list mimics the iOS Mail app to show an inbox. This list makes use of custom metadata including an "unread message" indicator in the "start" slot as well as a timestamp and custom detail icon in the "end" slot. The "unread message" indicator is highlighted in blue to draw the user's attention to the unread messages, while the timestamp is more subtle.
 
-import Metadata from '@site/static/usage/v7/item/content-types/metadata/index.md';
+import Metadata from '@site/static/usage/v7/item/content-types/metadata/index.mdx';
 
 <Metadata />
 
@@ -191,7 +191,7 @@ Developers should avoid creating <a href="https://dequeuniversity.com/rules/axe/
 
 In the example below, we are creating a list of contacts. Each item is a stubbed button intended to bring you to the full contact page for that item. There are additional actions associated with each item that users can reveal by swiping on the item.
 
-import Actions from '@site/static/usage/v7/item/content-types/actions/index.md';
+import Actions from '@site/static/usage/v7/item/content-types/actions/index.mdx';
 
 <Actions />
 
@@ -272,7 +272,7 @@ Controls are form components such as checkboxes, inputs, radios, and more. Each
 
 In the example below, we are creating a list of to-do tasks. Each item has a checkbox and an input. The checkbox lets the user mark a task as complete, and the input lets the user change the name of the task.
 
-import Controls from '@site/static/usage/v7/item/content-types/controls/index.md';
+import Controls from '@site/static/usage/v7/item/content-types/controls/index.mdx';
 
 <Controls />
 
@@ -280,7 +280,7 @@ import Controls from '@site/static/usage/v7/item/content-types/controls/index.md
 
 An item is considered "clickable" if it has an `href` or `button` property set. Clickable items have a few visual differences that indicate they can be interacted with. For example, a clickable item receives the ripple effect upon activation in `md` mode, has a highlight when activated in `ios` mode, and has a [detail arrow](#detail-arrows) by default in `ios` mode.
 
-import Clickable from '@site/static/usage/v7/item/clickable/index.md';
+import Clickable from '@site/static/usage/v7/item/clickable/index.mdx';
 
 <Clickable />
 
@@ -288,7 +288,7 @@ import Clickable from '@site/static/usage/v7/item/clickable/index.md';
 
 By default [clickable items](#clickable-items) will display a right arrow icon on `ios` mode. To hide the right arrow icon on clickable elements, set the `detail` property to `false`. To show the right arrow icon on an item that doesn't display it naturally, set the `detail` property to `true`.
 
-import DetailArrows from '@site/static/usage/v7/item/detail-arrows/index.md';
+import DetailArrows from '@site/static/usage/v7/item/detail-arrows/index.mdx';
 
 <DetailArrows />
 
@@ -296,7 +296,7 @@ import DetailArrows from '@site/static/usage/v7/item/detail-arrows/index.md';
 
 Items show an inset bottom border by default. The border has padding on the left and does not appear under any content that is slotted in the `"start"` slot. The `lines` property can be modified to `"full"` or `"none"` which will show a full width border or no border, respectively.
 
-import Lines from '@site/static/usage/v7/item/lines/index.md';
+import Lines from '@site/static/usage/v7/item/lines/index.mdx';
 
 <Lines />
 
@@ -304,13 +304,13 @@ import Lines from '@site/static/usage/v7/item/lines/index.md';
 
 Buttons are styled smaller inside of items than when they are outside of them. To make the button size match buttons outside of an item, set the `size` attribute to `"default"`.
 
-import Buttons from '@site/static/usage/v7/item/buttons/index.md';
+import Buttons from '@site/static/usage/v7/item/buttons/index.mdx';
 
 <Buttons />
 
 ## Item Inputs
 
-import Inputs from '@site/static/usage/v7/item/inputs/index.md';
+import Inputs from '@site/static/usage/v7/item/inputs/index.mdx';
 
 <Inputs />
 
@@ -318,19 +318,19 @@ import Inputs from '@site/static/usage/v7/item/inputs/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v7/item/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/item/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Shadow Parts
 
-import CSSParts from '@site/static/usage/v7/item/theming/css-shadow-parts/index.md';
+import CSSParts from '@site/static/usage/v7/item/theming/css-shadow-parts/index.mdx';
 
 <CSSParts />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v7/item/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/item/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v7/api/label.md b/versioned_docs/version-v7/api/label.mdx
similarity index 78%
rename from versioned_docs/version-v7/api/label.md
rename to versioned_docs/version-v7/api/label.mdx
index e3a896e1aad..83024d75a5b 100644
--- a/versioned_docs/version-v7/api/label.md
+++ b/versioned_docs/version-v7/api/label.mdx
@@ -2,12 +2,12 @@
 title: 'ion-label'
 ---
 
-import Props from '@ionic-internal/component-api/v7/label/props.md';
-import Events from '@ionic-internal/component-api/v7/label/events.md';
-import Methods from '@ionic-internal/component-api/v7/label/methods.md';
-import Parts from '@ionic-internal/component-api/v7/label/parts.md';
+import Props from '@ionic-internal/component-api/v7/label/props.mdx';
+import Events from '@ionic-internal/component-api/v7/label/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/label/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/label/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/label/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/label/slots.md';
+import Slots from '@ionic-internal/component-api/v7/label/slots.mdx';
 
 <head>
   <title>ion-label: Item Label Color and Properties for Applications</title>
@@ -21,19 +21,19 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="scoped" />
 
-Label is an element used primarily to add text content to [Item](./item.md) components. Label can also be used inside of form control components such as [Input](./input.md) or [Radio](./radio.md) when specifying the visible label, but it is not required.
+Label is an element used primarily to add text content to [Item](./item.mdx) components. Label can also be used inside of form control components such as [Input](./input.mdx) or [Radio](./radio.mdx) when specifying the visible label, but it is not required.
 
 The position of the label inside of an item can be inline, fixed, stacked, or floating.
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/label/basic/index.md';
+import Basic from '@site/static/usage/v7/label/basic/index.mdx';
 
 <Basic />
 
 ## Item Labels
 
-import Item from '@site/static/usage/v7/label/item/index.md';
+import Item from '@site/static/usage/v7/label/item/index.mdx';
 
 <Item />
 
@@ -41,7 +41,7 @@ import Item from '@site/static/usage/v7/label/item/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v7/label/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/label/theming/colors/index.mdx';
 
 <Colors />
 
diff --git a/versioned_docs/version-v7/api/list-header.md b/versioned_docs/version-v7/api/list-header.mdx
similarity index 92%
rename from versioned_docs/version-v7/api/list-header.md
rename to versioned_docs/version-v7/api/list-header.mdx
index 6d296bd04c0..486f61375be 100644
--- a/versioned_docs/version-v7/api/list-header.md
+++ b/versioned_docs/version-v7/api/list-header.mdx
@@ -2,12 +2,12 @@
 title: 'ion-list-header'
 ---
 
-import Props from '@ionic-internal/component-api/v7/list-header/props.md';
-import Events from '@ionic-internal/component-api/v7/list-header/events.md';
-import Methods from '@ionic-internal/component-api/v7/list-header/methods.md';
-import Parts from '@ionic-internal/component-api/v7/list-header/parts.md';
+import Props from '@ionic-internal/component-api/v7/list-header/props.mdx';
+import Events from '@ionic-internal/component-api/v7/list-header/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/list-header/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/list-header/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/list-header/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/list-header/slots.md';
+import Slots from '@ionic-internal/component-api/v7/list-header/slots.mdx';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
@@ -17,7 +17,7 @@ List headers are block elements that are used to describe the contents of a [lis
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/list-header/basic/index.md';
+import Basic from '@site/static/usage/v7/list-header/basic/index.mdx';
 
 <Basic />
 
@@ -25,7 +25,7 @@ import Basic from '@site/static/usage/v7/list-header/basic/index.md';
 
 A [button](./button) placed in a list header can be useful for showing part of a list and redirecting to the full list with the button.
 
-import Buttons from '@site/static/usage/v7/list-header/buttons/index.md';
+import Buttons from '@site/static/usage/v7/list-header/buttons/index.mdx';
 
 <Buttons />
 
@@ -33,7 +33,7 @@ import Buttons from '@site/static/usage/v7/list-header/buttons/index.md';
 
 List headers do not show a bottom border by default. The `lines` property can be modified to `"full"` or `"inset"` which will show a full width border or an inset border with left padding, respectively.
 
-import Lines from '@site/static/usage/v7/list-header/lines/index.md';
+import Lines from '@site/static/usage/v7/list-header/lines/index.mdx';
 
 <Lines />
 
@@ -41,13 +41,13 @@ import Lines from '@site/static/usage/v7/list-header/lines/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v7/list-header/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/list-header/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v7/list-header/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/list-header/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v7/api/list.md b/versioned_docs/version-v7/api/list.mdx
similarity index 89%
rename from versioned_docs/version-v7/api/list.md
rename to versioned_docs/version-v7/api/list.mdx
index 97ce3e331c7..fd5ba2e0d03 100644
--- a/versioned_docs/version-v7/api/list.md
+++ b/versioned_docs/version-v7/api/list.mdx
@@ -2,12 +2,12 @@
 title: 'ion-list'
 ---
 
-import Props from '@ionic-internal/component-api/v7/list/props.md';
-import Events from '@ionic-internal/component-api/v7/list/events.md';
-import Methods from '@ionic-internal/component-api/v7/list/methods.md';
-import Parts from '@ionic-internal/component-api/v7/list/parts.md';
+import Props from '@ionic-internal/component-api/v7/list/props.mdx';
+import Events from '@ionic-internal/component-api/v7/list/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/list/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/list/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/list/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/list/slots.md';
+import Slots from '@ionic-internal/component-api/v7/list/slots.mdx';
 
 <head>
   <title>ion-list: Item List View Component for iOS and Android Apps</title>
@@ -26,7 +26,7 @@ Lists support several interactions including swiping items to reveal options, dr
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/list/basic/index.md';
+import Basic from '@site/static/usage/v7/list/basic/index.mdx';
 
 <Basic />
 
@@ -34,7 +34,7 @@ import Basic from '@site/static/usage/v7/list/basic/index.md';
 
 Adding the `inset` property to a list will apply margin around the list. In `ios` mode it will also add rounded corners to the list.
 
-import Inset from '@site/static/usage/v7/list/inset/index.md';
+import Inset from '@site/static/usage/v7/list/inset/index.mdx';
 
 <Inset />
 
@@ -42,7 +42,7 @@ import Inset from '@site/static/usage/v7/list/inset/index.md';
 
 Adding the `lines` property to a list will adjust the bottom borders of all of the items in the list. Setting it to `"full"` will display full width borders, `"inset"` will display borders adjusted with left padding, and `"none"` will show no borders. If the `lines` property is set on an item in a list, that will take priority over the property on the list.
 
-import Lines from '@site/static/usage/v7/list/lines/index.md';
+import Lines from '@site/static/usage/v7/list/lines/index.mdx';
 
 <Lines />
 
diff --git a/versioned_docs/version-v7/api/loading.md b/versioned_docs/version-v7/api/loading.mdx
similarity index 98%
rename from versioned_docs/version-v7/api/loading.md
rename to versioned_docs/version-v7/api/loading.mdx
index 35cf73fc394..539a1c01fc0 100644
--- a/versioned_docs/version-v7/api/loading.md
+++ b/versioned_docs/version-v7/api/loading.mdx
@@ -2,12 +2,12 @@
 title: 'ion-loading'
 ---
 
-import Props from '@ionic-internal/component-api/v7/loading/props.md';
-import Events from '@ionic-internal/component-api/v7/loading/events.md';
-import Methods from '@ionic-internal/component-api/v7/loading/methods.md';
-import Parts from '@ionic-internal/component-api/v7/loading/parts.md';
+import Props from '@ionic-internal/component-api/v7/loading/props.mdx';
+import Events from '@ionic-internal/component-api/v7/loading/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/loading/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/loading/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/loading/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/loading/slots.md';
+import Slots from '@ionic-internal/component-api/v7/loading/slots.mdx';
 
 <head>
   <title>ion-loading: Loading | Application Loading Indicator Overlay</title>
@@ -31,13 +31,13 @@ Alternatively, developers can configure the loading indicator to dismiss automat
 
 ### Inline (Recommended)
 
-import Inline from '@site/static/usage/v7/loading/inline/index.md';
+import Inline from '@site/static/usage/v7/loading/inline/index.mdx';
 
 <Inline />
 
 ### Controller
 
-import Controller from '@site/static/usage/v7/loading/controller/index.md';
+import Controller from '@site/static/usage/v7/loading/controller/index.mdx';
 
 <Controller />
 
@@ -47,7 +47,7 @@ import Controller from '@site/static/usage/v7/loading/controller/index.md';
 
 The spinner that is used can be customized using the `spinner` property. See the [spinner property documentation](#prop-spinner) for a full list of options.
 
-import Spinners from '@site/static/usage/v7/loading/spinners/index.md';
+import Spinners from '@site/static/usage/v7/loading/spinners/index.mdx';
 
 <Spinners />
 
@@ -57,7 +57,7 @@ Loading uses scoped encapsulation, which means it will automatically scope its C
 
 We recommend passing a custom class and using that to add custom styles to the host and inner elements.
 
-import Theming from '@site/static/usage/v7/loading/theming/index.md';
+import Theming from '@site/static/usage/v7/loading/theming/index.mdx';
 
 <Theming />
 
diff --git a/versioned_docs/version-v7/api/menu-button.md b/versioned_docs/version-v7/api/menu-button.mdx
similarity index 94%
rename from versioned_docs/version-v7/api/menu-button.md
rename to versioned_docs/version-v7/api/menu-button.mdx
index cb804848f65..19149736151 100644
--- a/versioned_docs/version-v7/api/menu-button.md
+++ b/versioned_docs/version-v7/api/menu-button.mdx
@@ -2,12 +2,12 @@
 title: 'ion-menu-button'
 ---
 
-import Props from '@ionic-internal/component-api/v7/menu-button/props.md';
-import Events from '@ionic-internal/component-api/v7/menu-button/events.md';
-import Methods from '@ionic-internal/component-api/v7/menu-button/methods.md';
-import Parts from '@ionic-internal/component-api/v7/menu-button/parts.md';
+import Props from '@ionic-internal/component-api/v7/menu-button/props.mdx';
+import Events from '@ionic-internal/component-api/v7/menu-button/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/menu-button/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/menu-button/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/menu-button/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/menu-button/slots.md';
+import Slots from '@ionic-internal/component-api/v7/menu-button/slots.mdx';
 
 <head>
   <title>ion-menu-button: Menu Button to Open an App Menu on a Page</title>
diff --git a/versioned_docs/version-v7/api/menu-toggle.md b/versioned_docs/version-v7/api/menu-toggle.mdx
similarity index 95%
rename from versioned_docs/version-v7/api/menu-toggle.md
rename to versioned_docs/version-v7/api/menu-toggle.mdx
index 928b1f61885..d6d7ae30085 100644
--- a/versioned_docs/version-v7/api/menu-toggle.md
+++ b/versioned_docs/version-v7/api/menu-toggle.mdx
@@ -2,12 +2,12 @@
 title: 'ion-menu-toggle'
 ---
 
-import Props from '@ionic-internal/component-api/v7/menu-toggle/props.md';
-import Events from '@ionic-internal/component-api/v7/menu-toggle/events.md';
-import Methods from '@ionic-internal/component-api/v7/menu-toggle/methods.md';
-import Parts from '@ionic-internal/component-api/v7/menu-toggle/parts.md';
+import Props from '@ionic-internal/component-api/v7/menu-toggle/props.mdx';
+import Events from '@ionic-internal/component-api/v7/menu-toggle/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/menu-toggle/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/menu-toggle/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/menu-toggle/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/menu-toggle/slots.md';
+import Slots from '@ionic-internal/component-api/v7/menu-toggle/slots.mdx';
 
 <head>
   <title>ion-menu-toggle: MenuToggle Component to Open/Close Menus</title>
diff --git a/versioned_docs/version-v7/api/menu.md b/versioned_docs/version-v7/api/menu.mdx
similarity index 92%
rename from versioned_docs/version-v7/api/menu.md
rename to versioned_docs/version-v7/api/menu.mdx
index b209fbf663d..7ec8fafd8c2 100644
--- a/versioned_docs/version-v7/api/menu.md
+++ b/versioned_docs/version-v7/api/menu.mdx
@@ -2,12 +2,12 @@
 title: 'ion-menu'
 ---
 
-import Props from '@ionic-internal/component-api/v7/menu/props.md';
-import Events from '@ionic-internal/component-api/v7/menu/events.md';
-import Methods from '@ionic-internal/component-api/v7/menu/methods.md';
-import Parts from '@ionic-internal/component-api/v7/menu/parts.md';
+import Props from '@ionic-internal/component-api/v7/menu/props.mdx';
+import Events from '@ionic-internal/component-api/v7/menu/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/menu/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/menu/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/menu/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/menu/slots.md';
+import Slots from '@ionic-internal/component-api/v7/menu/slots.mdx';
 
 <head>
   <title>ion-menu: API Framework Docs for Types of Menu Components</title>
@@ -27,7 +27,7 @@ The menu element should be a sibling to the root content element. There can be a
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/menu/basic/index.md';
+import Basic from '@site/static/usage/v7/menu/basic/index.mdx';
 
 <Basic />
 
@@ -35,7 +35,7 @@ import Basic from '@site/static/usage/v7/menu/basic/index.md';
 
 The [menu toggle](./menu-toggle) component can be used to create custom button that can open or close the menu.
 
-import MenuToggle from '@site/static/usage/v7/menu/toggle/index.md';
+import MenuToggle from '@site/static/usage/v7/menu/toggle/index.mdx';
 
 <MenuToggle />
 
@@ -43,7 +43,7 @@ import MenuToggle from '@site/static/usage/v7/menu/toggle/index.md';
 
 The `type` property can be used to customize how menus display in your application.
 
-import MenuType from '@site/static/usage/v7/menu/type/index.md';
+import MenuType from '@site/static/usage/v7/menu/type/index.mdx';
 
 <MenuType />
 
@@ -53,7 +53,7 @@ Menus are displayed on the `"start"` side by default. In apps that use left-to-r
 
 If menus on both sides are needed in an app, the menu can be opened by passing the `side` value to the `open` method on `MenuController`. If a side is not provided, the menu on the `"start"` side will be opened. See the [multiple menus](#multiple-menus) section below for an example using `MenuController`.
 
-import Sides from '@site/static/usage/v7/menu/sides/index.md';
+import Sides from '@site/static/usage/v7/menu/sides/index.mdx';
 
 <Sides />
 
@@ -61,7 +61,7 @@ import Sides from '@site/static/usage/v7/menu/sides/index.md';
 
 When multiple menus exist on the same side, we need refer to them by ID instead of side. Otherwise, the wrong menu may be activated.
 
-import Multiple from '@site/static/usage/v7/menu/multiple/index.md';
+import Multiple from '@site/static/usage/v7/menu/multiple/index.mdx';
 
 <Multiple />
 
@@ -69,7 +69,7 @@ import Multiple from '@site/static/usage/v7/menu/multiple/index.md';
 
 ### CSS Shadow Parts
 
-import Theming from '@site/static/usage/v7/menu/theming/index.md';
+import Theming from '@site/static/usage/v7/menu/theming/index.mdx';
 
 <Theming />
 
diff --git a/versioned_docs/version-v7/api/modal.md b/versioned_docs/version-v7/api/modal.mdx
similarity index 97%
rename from versioned_docs/version-v7/api/modal.md
rename to versioned_docs/version-v7/api/modal.mdx
index a3e661af9b4..c098fe75b22 100644
--- a/versioned_docs/version-v7/api/modal.md
+++ b/versioned_docs/version-v7/api/modal.mdx
@@ -2,12 +2,12 @@
 title: 'ion-modal'
 ---
 
-import Props from '@ionic-internal/component-api/v7/modal/props.md';
-import Events from '@ionic-internal/component-api/v7/modal/events.md';
-import Methods from '@ionic-internal/component-api/v7/modal/methods.md';
-import Parts from '@ionic-internal/component-api/v7/modal/parts.md';
+import Props from '@ionic-internal/component-api/v7/modal/props.mdx';
+import Events from '@ionic-internal/component-api/v7/modal/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/modal/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/modal/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/modal/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/modal/slots.md';
+import Slots from '@ionic-internal/component-api/v7/modal/slots.mdx';
 
 <head>
   <title>ion-modal: Ionic Mobile App Custom Modal API Component</title>
@@ -29,7 +29,7 @@ A Modal is a dialog that appears on top of the app's content, and must be dismis
 
 When using `ion-modal` with Angular, React, or Vue, the component you pass in will be destroyed when the modal is dismissed. As this functionality is provided by the JavaScript framework, using `ion-modal` without a JavaScript framework will not destroy the component you passed in. If this is a needed functionality, we recommend using the `modalController` instead.
 
-import InlineModalTriggerExample from '@site/static/usage/v7/modal/inline/basic/index.md';
+import InlineModalTriggerExample from '@site/static/usage/v7/modal/inline/basic/index.mdx';
 
 <InlineModalTriggerExample />
 
@@ -39,7 +39,7 @@ The `isOpen` property on `ion-modal` allows developers to control the presentati
 
 `isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the modal is dismissed. Developers should listen for the `ionModalDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-modal` from being tightly coupled with the state of the application. With a one way data binding, the modal only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the modal needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug.
 
-import InlineModalIsOpenExample from '@site/static/usage/v7/modal/inline/is-open/index.md';
+import InlineModalIsOpenExample from '@site/static/usage/v7/modal/inline/is-open/index.mdx';
 
 <InlineModalIsOpenExample />
 
@@ -47,7 +47,7 @@ import InlineModalIsOpenExample from '@site/static/usage/v7/modal/inline/is-open
 
 With the `modalController` developers can present an `ion-modal` programmatically. Developers will have complete control over when a modal is presented and dismissed.
 
-import ControllerExample from '@site/static/usage/v7/modal/controller/index.md';
+import ControllerExample from '@site/static/usage/v7/modal/controller/index.mdx';
 
 <ControllerExample />
 
@@ -67,7 +67,7 @@ Developers can set `canDismiss` to a boolean value. If `canDismiss` is `true`, t
 
 Setting a boolean value should be used when you need to require a particular action to be taken prior to a modal being dismissed. For example, if developers want to require that a "Terms of Use" checkbox is checked prior to closing the modal, they could set `canDismiss` to `false` initially and update it to `true` when the checkbox is checked.
 
-import CanDismissBooleanExample from '@site/static/usage/v7/modal/can-dismiss/boolean/index.md';
+import CanDismissBooleanExample from '@site/static/usage/v7/modal/can-dismiss/boolean/index.mdx';
 
 <CanDismissBooleanExample />
 
@@ -79,7 +79,7 @@ Setting a callback function should be used when you have complex dismissing crit
 
 Note that setting a callback function will cause the swipe gesture to be interrupted when using a card or sheet modal. This is because Ionic does not know what your callback function will resolve to ahead of time.
 
-import CanDismissFunctionExample from '@site/static/usage/v7/modal/can-dismiss/function/index.md';
+import CanDismissFunctionExample from '@site/static/usage/v7/modal/can-dismiss/function/index.mdx';
 
 <CanDismissFunctionExample />
 
@@ -87,7 +87,7 @@ import CanDismissFunctionExample from '@site/static/usage/v7/modal/can-dismiss/f
 
 Developers may want to prevent users from swiping to close a card or sheet modal. This can be done by setting a callback function for `canDismiss` and checking if the `role` is not `gesture`.
 
-import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md';
+import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.mdx';
 
 <CanDismissPreventSwipeToCloseExample />
 
@@ -99,7 +99,7 @@ To achieve this customization, child components can employ various techniques su
 
 Here's a simplified example illustrating how a child component can interact with a parent component to modify the `canDismiss` callback:
 
-import CanDismissChildStateExample from '@site/static/usage/v7/modal/can-dismiss/child-state/index.md';
+import CanDismissChildStateExample from '@site/static/usage/v7/modal/can-dismiss/child-state/index.mdx';
 
 <CanDismissChildStateExample />
 
@@ -115,7 +115,7 @@ The `canDismiss` property can be used to control whether or not the card modal c
 The card display style is only available on iOS.
 :::
 
-import CardExample from '@site/static/usage/v7/modal/card/basic/index.md';
+import CardExample from '@site/static/usage/v7/modal/card/basic/index.mdx';
 
 <CardExample />
 
@@ -133,13 +133,13 @@ The `initialBreakpoint` property is required so that the sheet modal knows which
 
 The `backdropBreakpoint` property can be used to customize the point at which the `ion-backdrop` will begin to fade in. This is useful when creating interfaces that have content underneath the sheet that should remain interactive. A common use case is a sheet modal that overlays a map where the map is interactive until the sheet is fully expanded.
 
-import SheetExample from '@site/static/usage/v7/modal/sheet/basic/index.md';
+import SheetExample from '@site/static/usage/v7/modal/sheet/basic/index.mdx';
 
 <SheetExample />
 
 ### Interacting with background content
 
-import SheetBackgroundContentExample from '@site/static/usage/v7/modal/sheet/background-content/index.md';
+import SheetBackgroundContentExample from '@site/static/usage/v7/modal/sheet/background-content/index.mdx';
 
 <SheetBackgroundContentExample />
 
@@ -149,7 +149,7 @@ Developers should use the `--height` CSS Variable to change the height of the sh
 
 The following example shows how to get a sheet modal that is automatically sized based on its content. Note that by keeping the maximum breakpoint at `1` we ensure that the entire modal is accessible in the viewport.
 
-import SheetAutoHeightExample from '@site/static/usage/v7/modal/sheet/auto-height/index.md';
+import SheetAutoHeightExample from '@site/static/usage/v7/modal/sheet/auto-height/index.mdx';
 
 <SheetAutoHeightExample />
 
@@ -157,7 +157,7 @@ import SheetAutoHeightExample from '@site/static/usage/v7/modal/sheet/auto-heigh
 
 Sheet modals can optionally render a handle indicator used for dragging the sheet between breakpoints. The `handleBehavior` property can be used to configure the behavior of when the handle is activated by the user.
 
-import SheetHandleBehaviorExample from '@site/static/usage/v7/modal/sheet/handle-behavior/index.md';
+import SheetHandleBehaviorExample from '@site/static/usage/v7/modal/sheet/handle-behavior/index.mdx';
 
 <SheetHandleBehaviorExample />
 
@@ -180,7 +180,7 @@ ion-modal.stack-modal {
 }
 ```
 
-import ThemeExample from '@site/static/usage/v7/modal/styling/theming/index.md';
+import ThemeExample from '@site/static/usage/v7/modal/styling/theming/index.mdx';
 
 <ThemeExample />
 
@@ -188,7 +188,7 @@ import ThemeExample from '@site/static/usage/v7/modal/styling/theming/index.md';
 
 The enter and leave animations can be customized by using our animation builder and assigning animations to `enterAnimation` and `leaveAnimation`.
 
-import AnimationsExample from '@site/static/usage/v7/modal/styling/animations/index.md';
+import AnimationsExample from '@site/static/usage/v7/modal/styling/animations/index.mdx';
 
 <AnimationsExample />
 
@@ -196,7 +196,7 @@ import AnimationsExample from '@site/static/usage/v7/modal/styling/animations/in
 
 While `ion-modal` is most often used for full-page views, cards, or sheets, it is also possible to use it for custom dialogs. This is useful if developers need an interface that is more complex than what components such as [ion-alert](./alert) or [ion-loading](./loading) provide.
 
-import CustomDialogs from '@site/static/usage/v7/modal/custom-dialogs/index.md';
+import CustomDialogs from '@site/static/usage/v7/modal/custom-dialogs/index.mdx';
 
 <CustomDialogs />
 
@@ -285,7 +285,7 @@ When the backdrop is disabled, users will be able to interact with elements outs
 
 The content of an inline `ion-modal` is unmounted when closed. If this content is expensive to render, developers can use the `keepContentsMounted` property to mount the content as soon as the modal is mounted. This can help optimize the responsiveness of your application as the inner contents will have already been mounted when the modal opens.
 
-import Mount from '@site/static/usage/v7/modal/performance/mount/index.md';
+import Mount from '@site/static/usage/v7/modal/performance/mount/index.mdx';
 
 <Mount />
 
diff --git a/versioned_docs/version-v7/api/nav-link.md b/versioned_docs/version-v7/api/nav-link.mdx
similarity index 96%
rename from versioned_docs/version-v7/api/nav-link.md
rename to versioned_docs/version-v7/api/nav-link.mdx
index 9af3649b27b..1648acf1b8b 100644
--- a/versioned_docs/version-v7/api/nav-link.md
+++ b/versioned_docs/version-v7/api/nav-link.mdx
@@ -2,12 +2,12 @@
 title: 'ion-nav-link'
 ---
 
-import Props from '@ionic-internal/component-api/v7/nav-link/props.md';
-import Events from '@ionic-internal/component-api/v7/nav-link/events.md';
-import Methods from '@ionic-internal/component-api/v7/nav-link/methods.md';
-import Parts from '@ionic-internal/component-api/v7/nav-link/parts.md';
+import Props from '@ionic-internal/component-api/v7/nav-link/props.mdx';
+import Events from '@ionic-internal/component-api/v7/nav-link/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/nav-link/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/nav-link/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/nav-link/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/nav-link/slots.md';
+import Slots from '@ionic-internal/component-api/v7/nav-link/slots.mdx';
 
 <head>
   <title>ion-nav-link: Navigation Links to a Specified Component</title>
diff --git a/versioned_docs/version-v7/api/nav.md b/versioned_docs/version-v7/api/nav.mdx
similarity index 97%
rename from versioned_docs/version-v7/api/nav.md
rename to versioned_docs/version-v7/api/nav.mdx
index 5195dc19efb..a0a14da4f09 100644
--- a/versioned_docs/version-v7/api/nav.md
+++ b/versioned_docs/version-v7/api/nav.mdx
@@ -2,12 +2,12 @@
 title: 'ion-nav'
 ---
 
-import Props from '@ionic-internal/component-api/v7/nav/props.md';
-import Events from '@ionic-internal/component-api/v7/nav/events.md';
-import Methods from '@ionic-internal/component-api/v7/nav/methods.md';
-import Parts from '@ionic-internal/component-api/v7/nav/parts.md';
+import Props from '@ionic-internal/component-api/v7/nav/props.mdx';
+import Events from '@ionic-internal/component-api/v7/nav/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/nav/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/nav/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/nav/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/nav/slots.md';
+import Slots from '@ionic-internal/component-api/v7/nav/slots.mdx';
 
 <head>
   <title>ion-nav: Nav View Component for Ionic Framework Apps</title>
@@ -33,7 +33,7 @@ Unlike Router Outlet, Nav is not tied to a particular router. This means that if
 
 NavLink is a simplified API when interacting with Nav. Developers can customize the component, pass along component properties, modify the direction of the route animation or define a custom animation when navigating.
 
-import NavLinkExample from '@site/static/usage/v7/nav/nav-link/index.md';
+import NavLinkExample from '@site/static/usage/v7/nav/nav-link/index.mdx';
 
 <NavLinkExample />
 
@@ -47,7 +47,7 @@ The example below uses a reference to Nav and the public method APIs to push and
 
 :::
 
-import ModalNavigationExample from '@site/static/usage/v7/nav/modal-navigation/index.md';
+import ModalNavigationExample from '@site/static/usage/v7/nav/modal-navigation/index.mdx';
 
 <ModalNavigationExample />
 
diff --git a/versioned_docs/version-v7/api/note.md b/versioned_docs/version-v7/api/note.mdx
similarity index 88%
rename from versioned_docs/version-v7/api/note.md
rename to versioned_docs/version-v7/api/note.mdx
index 292c9cc0efa..aadba036434 100644
--- a/versioned_docs/version-v7/api/note.md
+++ b/versioned_docs/version-v7/api/note.mdx
@@ -2,12 +2,12 @@
 title: 'ion-note'
 ---
 
-import Props from '@ionic-internal/component-api/v7/note/props.md';
-import Events from '@ionic-internal/component-api/v7/note/events.md';
-import Methods from '@ionic-internal/component-api/v7/note/methods.md';
-import Parts from '@ionic-internal/component-api/v7/note/parts.md';
+import Props from '@ionic-internal/component-api/v7/note/props.mdx';
+import Events from '@ionic-internal/component-api/v7/note/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/note/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/note/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/note/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/note/slots.md';
+import Slots from '@ionic-internal/component-api/v7/note/slots.mdx';
 
 <head>
   <title>ion-note: Note Text Elements for iOS and Android Ionic Apps</title>
@@ -25,13 +25,13 @@ Notes are text elements generally used as subtitles that provide more informatio
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/note/basic/index.md';
+import Basic from '@site/static/usage/v7/note/basic/index.mdx';
 
 <Basic />
 
 ## Item Notes
 
-import Item from '@site/static/usage/v7/note/item/index.md';
+import Item from '@site/static/usage/v7/note/item/index.mdx';
 
 <Item />
 
@@ -39,13 +39,13 @@ import Item from '@site/static/usage/v7/note/item/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v7/note/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/note/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v7/note/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/note/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v7/api/picker.md b/versioned_docs/version-v7/api/picker.mdx
similarity index 97%
rename from versioned_docs/version-v7/api/picker.md
rename to versioned_docs/version-v7/api/picker.mdx
index 76019f44997..a8169b07c41 100644
--- a/versioned_docs/version-v7/api/picker.md
+++ b/versioned_docs/version-v7/api/picker.mdx
@@ -2,12 +2,12 @@
 title: 'ion-picker'
 ---
 
-import Props from '@ionic-internal/component-api/v7/picker/props.md';
-import Events from '@ionic-internal/component-api/v7/picker/events.md';
-import Methods from '@ionic-internal/component-api/v7/picker/methods.md';
-import Parts from '@ionic-internal/component-api/v7/picker/parts.md';
+import Props from '@ionic-internal/component-api/v7/picker/props.mdx';
+import Events from '@ionic-internal/component-api/v7/picker/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/picker/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/picker/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/picker/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/picker/slots.md';
+import Slots from '@ionic-internal/component-api/v7/picker/slots.mdx';
 
 <head>
   <title>ion-picker: A Dialog That Displays Buttons and Columns</title>
@@ -27,7 +27,7 @@ A Picker is a dialog that displays a row of buttons and columns underneath. It a
 
 `ion-picker` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the Picker.
 
-import Trigger from '@site/static/usage/v7/picker/inline/trigger/index.md';
+import Trigger from '@site/static/usage/v7/picker/inline/trigger/index.mdx';
 
 <Trigger />
 
@@ -37,7 +37,7 @@ The `isOpen` property on `ion-picker` allows developers to control the presentat
 
 `isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the Picker is dismissed. Developers should listen for the `ionPickerDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-picker` from being tightly coupled with the state of the application. With a one way data binding, the Picker only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Picker needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug.
 
-import IsOpen from '@site/static/usage/v7/picker/inline/isOpen/index.md';
+import IsOpen from '@site/static/usage/v7/picker/inline/isOpen/index.mdx';
 
 <IsOpen />
 
@@ -45,7 +45,7 @@ import IsOpen from '@site/static/usage/v7/picker/inline/isOpen/index.md';
 
 The `pickerController` can be used in situations where more control is needed over when the Picker is presented and dismissed.
 
-import Controller from '@site/static/usage/v7/picker/controller/index.md';
+import Controller from '@site/static/usage/v7/picker/controller/index.mdx';
 
 <Controller />
 
@@ -53,7 +53,7 @@ import Controller from '@site/static/usage/v7/picker/controller/index.md';
 
 The `columns` property can be used to display a Picker with multiple columns of different options.
 
-import MultipleColumn from '@site/static/usage/v7/picker/multiple-column/index.md';
+import MultipleColumn from '@site/static/usage/v7/picker/multiple-column/index.mdx';
 
 <MultipleColumn />
 
diff --git a/versioned_docs/version-v7/api/popover.md b/versioned_docs/version-v7/api/popover.mdx
similarity index 98%
rename from versioned_docs/version-v7/api/popover.md
rename to versioned_docs/version-v7/api/popover.mdx
index 8b462803961..60fd2216ff9 100644
--- a/versioned_docs/version-v7/api/popover.md
+++ b/versioned_docs/version-v7/api/popover.mdx
@@ -2,12 +2,12 @@
 title: 'ion-popover'
 ---
 
-import Props from '@ionic-internal/component-api/v7/popover/props.md';
-import Events from '@ionic-internal/component-api/v7/popover/events.md';
-import Methods from '@ionic-internal/component-api/v7/popover/methods.md';
-import Parts from '@ionic-internal/component-api/v7/popover/parts.md';
+import Props from '@ionic-internal/component-api/v7/popover/props.mdx';
+import Events from '@ionic-internal/component-api/v7/popover/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/popover/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/popover/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/popover/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/popover/slots.md';
+import Slots from '@ionic-internal/component-api/v7/popover/slots.mdx';
 
 <head>
   <title>ion-popover: iOS / Android Popover UI Dialog Component</title>
@@ -57,7 +57,7 @@ A trigger for an inline `ion-popover` is the element that will open a popover wh
 Triggers are not applicable when using the `popoverController` because the `ion-popover` is not created ahead of time.
 :::
 
-import InlineTrigger from '@site/static/usage/v7/popover/presenting/inline-trigger/index.md';
+import InlineTrigger from '@site/static/usage/v7/popover/presenting/inline-trigger/index.mdx';
 
 <InlineTrigger />
 
@@ -67,7 +67,7 @@ Inline popovers can also be opened by setting the `isOpen` property to `true`. T
 
 `isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the popover is dismissed. Developers should listen for the `ionPopoverDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-popover` from being tightly coupled with the state of the application. With a one way data binding, the popover only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the popover needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug.
 
-import IsOpenTrigger from '@site/static/usage/v7/popover/presenting/inline-isopen/index.md';
+import IsOpenTrigger from '@site/static/usage/v7/popover/presenting/inline-isopen/index.mdx';
 
 <IsOpenTrigger />
 
@@ -85,7 +85,7 @@ Instead of a controller, React has a hook called `useIonPopover` which behaves i
 
 ### Usage
 
-import ControllerExample from '@site/static/usage/v7/popover/presenting/controller/index.md';
+import ControllerExample from '@site/static/usage/v7/popover/presenting/controller/index.mdx';
 
 <ControllerExample />
 
@@ -97,7 +97,7 @@ Popovers are presented at the root of your application so they overlay your enti
 If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file.
 :::
 
-import Styling from '@site/static/usage/v7/popover/customization/styling/index.md';
+import Styling from '@site/static/usage/v7/popover/customization/styling/index.mdx';
 
 <Styling />
 
@@ -117,7 +117,7 @@ The `alignment` property allows you to line up an edge of your popover with a co
 
 ### Side and Alignment Demo
 
-import Positioning from '@site/static/usage/v7/popover/customization/positioning/index.md';
+import Positioning from '@site/static/usage/v7/popover/customization/positioning/index.mdx';
 
 <Positioning />
 
@@ -131,7 +131,7 @@ When making dropdown menus, you may want to have the width of the popover match
 
 If you are using the `popoverController`, you must provide an event via the `event` option and Ionic Framework will use `event.target` as the reference element. See the [controller demo](#controller-popovers) for an example of this pattern.
 
-import Sizing from '@site/static/usage/v7/popover/customization/sizing/index.md';
+import Sizing from '@site/static/usage/v7/popover/customization/sizing/index.mdx';
 
 <Sizing />
 
@@ -145,7 +145,7 @@ You can use the `dismissOnSelect` property to automatically close the popover wh
 Nested popovers cannot be created when using the `popoverController` because the popover is automatically added to the root of your application when the `create` method is called.
 :::
 
-import NestedPopover from '@site/static/usage/v7/popover/nested/index.md';
+import NestedPopover from '@site/static/usage/v7/popover/nested/index.mdx';
 
 <NestedPopover />
 
@@ -223,7 +223,7 @@ type PositionAlign = 'start' | 'center' | 'end';
 
 The content of an inline `ion-popover` is unmounted when closed. If this content is expensive to render, developers can use the `keepContentsMounted` property to mount the content as soon as the popover is mounted. This can help optimize the responsiveness of your application as the inner contents will have already been mounted when the popover opens.
 
-import Mount from '@site/static/usage/v7/popover/performance/mount/index.md';
+import Mount from '@site/static/usage/v7/popover/performance/mount/index.mdx';
 
 <Mount />
 
diff --git a/versioned_docs/version-v7/api/progress-bar.md b/versioned_docs/version-v7/api/progress-bar.mdx
similarity index 92%
rename from versioned_docs/version-v7/api/progress-bar.md
rename to versioned_docs/version-v7/api/progress-bar.mdx
index 2136470967f..f0348ecb5b2 100644
--- a/versioned_docs/version-v7/api/progress-bar.md
+++ b/versioned_docs/version-v7/api/progress-bar.mdx
@@ -2,12 +2,12 @@
 title: 'ion-progress-bar'
 ---
 
-import Props from '@ionic-internal/component-api/v7/progress-bar/props.md';
-import Events from '@ionic-internal/component-api/v7/progress-bar/events.md';
-import Methods from '@ionic-internal/component-api/v7/progress-bar/methods.md';
-import Parts from '@ionic-internal/component-api/v7/progress-bar/parts.md';
+import Props from '@ionic-internal/component-api/v7/progress-bar/props.mdx';
+import Events from '@ionic-internal/component-api/v7/progress-bar/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/progress-bar/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/progress-bar/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/progress-bar/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/progress-bar/slots.md';
+import Slots from '@ionic-internal/component-api/v7/progress-bar/slots.mdx';
 
 <head>
   <title>ion-progress-bar: App Progress Bar for Loading Indicator</title>
@@ -27,7 +27,7 @@ Progress bars inform users about the status of ongoing processes, such as loadin
 
 Determinate is the default type. It should be used when the percentage of an operation is known. The progress is represented by setting the `value` property. This can be used to show the progress increasing from 0 to 100% of the track.
 
-import Determinate from '@site/static/usage/v7/progress-bar/determinate/index.md';
+import Determinate from '@site/static/usage/v7/progress-bar/determinate/index.mdx';
 
 <Determinate />
 
@@ -35,7 +35,7 @@ import Determinate from '@site/static/usage/v7/progress-bar/determinate/index.md
 
 If the `buffer` property is set, a buffer stream will show with animated circles to indicate activity. The value of the `buffer` property will also be represented by how much visible track there is. If the value of `buffer` is less than the `value` property, there will be no visible track. If `buffer` is equal to `1` then the buffer stream will be hidden.
 
-import Buffer from '@site/static/usage/v7/progress-bar/buffer/index.md';
+import Buffer from '@site/static/usage/v7/progress-bar/buffer/index.mdx';
 
 <Buffer />
 
@@ -43,7 +43,7 @@ import Buffer from '@site/static/usage/v7/progress-bar/buffer/index.md';
 
 The indeterminate type should be used when it is unknown how long the process will take. The progress bar is not tied to the `value`, instead it continually slides along the track until the process is complete.
 
-import Indeterminate from '@site/static/usage/v7/progress-bar/indeterminate/index.md';
+import Indeterminate from '@site/static/usage/v7/progress-bar/indeterminate/index.mdx';
 
 <Indeterminate />
 
@@ -51,7 +51,7 @@ import Indeterminate from '@site/static/usage/v7/progress-bar/indeterminate/inde
 
 {/* Reuse the playground from the Toolbar directory */}
 
-import Toolbar from '@site/static/usage/v7/toolbar/progress-bars/index.md';
+import Toolbar from '@site/static/usage/v7/toolbar/progress-bars/index.mdx';
 
 <Toolbar />
 
@@ -59,19 +59,19 @@ import Toolbar from '@site/static/usage/v7/toolbar/progress-bars/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v7/progress-bar/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/progress-bar/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v7/progress-bar/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/progress-bar/theming/css-properties/index.mdx';
 
 <CSSProps />
 
 ### CSS Shadow Parts
 
-import CSSParts from '@site/static/usage/v7/progress-bar/theming/css-shadow-parts/index.md';
+import CSSParts from '@site/static/usage/v7/progress-bar/theming/css-shadow-parts/index.mdx';
 
 <CSSParts />
 
diff --git a/versioned_docs/version-v7/api/radio-group.md b/versioned_docs/version-v7/api/radio-group.mdx
similarity index 96%
rename from versioned_docs/version-v7/api/radio-group.md
rename to versioned_docs/version-v7/api/radio-group.mdx
index 62d300b0cb6..25b7cb900ea 100644
--- a/versioned_docs/version-v7/api/radio-group.md
+++ b/versioned_docs/version-v7/api/radio-group.mdx
@@ -2,12 +2,12 @@
 title: 'ion-radio-group'
 ---
 
-import Props from '@ionic-internal/component-api/v7/radio-group/props.md';
-import Events from '@ionic-internal/component-api/v7/radio-group/events.md';
-import Methods from '@ionic-internal/component-api/v7/radio-group/methods.md';
-import Parts from '@ionic-internal/component-api/v7/radio-group/parts.md';
+import Props from '@ionic-internal/component-api/v7/radio-group/props.mdx';
+import Events from '@ionic-internal/component-api/v7/radio-group/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/radio-group/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/radio-group/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/radio-group/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/radio-group/slots.md';
+import Slots from '@ionic-internal/component-api/v7/radio-group/slots.mdx';
 
 <head>
   <title>ion-radio-group: Radio Button Group Usage for Ionic Apps</title>
diff --git a/versioned_docs/version-v7/api/radio.md b/versioned_docs/version-v7/api/radio.mdx
similarity index 95%
rename from versioned_docs/version-v7/api/radio.md
rename to versioned_docs/version-v7/api/radio.mdx
index 75dfcd8dc32..cde69cbb05f 100644
--- a/versioned_docs/version-v7/api/radio.md
+++ b/versioned_docs/version-v7/api/radio.mdx
@@ -2,12 +2,12 @@
 title: 'ion-radio'
 ---
 
-import Props from '@ionic-internal/component-api/v7/radio/props.md';
-import Events from '@ionic-internal/component-api/v7/radio/events.md';
-import Methods from '@ionic-internal/component-api/v7/radio/methods.md';
-import Parts from '@ionic-internal/component-api/v7/radio/parts.md';
+import Props from '@ionic-internal/component-api/v7/radio/props.mdx';
+import Events from '@ionic-internal/component-api/v7/radio/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/radio/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/radio/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/radio/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/radio/slots.md';
+import Slots from '@ionic-internal/component-api/v7/radio/slots.mdx';
 
 <head>
   <title>ion-radio: Radio Component for iOS and Android</title>
@@ -27,7 +27,7 @@ When radios are inside of a radio group, only one radio will be checked at any t
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/radio/basic/index.md';
+import Basic from '@site/static/usage/v7/radio/basic/index.mdx';
 
 <Basic />
 
@@ -35,7 +35,7 @@ import Basic from '@site/static/usage/v7/radio/basic/index.md';
 
 Developers can use the `labelPlacement` property to control how the label is placed relative to the control. This property mirrors the flexbox `flex-direction` property.
 
-import LabelPlacement from '@site/static/usage/v7/radio/label-placement/index.md';
+import LabelPlacement from '@site/static/usage/v7/radio/label-placement/index.mdx';
 
 <LabelPlacement />
 
@@ -43,7 +43,7 @@ import LabelPlacement from '@site/static/usage/v7/radio/label-placement/index.md
 
 Regardless of label placement, long text will not wrap by default. If the width of the radio is constrained, overflowing text will be truncated with an ellipsis. You can enable text wrapping by adding the `ion-text-wrap` class to a wrapper around the radio text or styling the `label` shadow part using the `::part()` selector.
 
-import LabelWrap from '@site/static/usage/v7/radio/label-wrap/index.md';
+import LabelWrap from '@site/static/usage/v7/radio/label-wrap/index.mdx';
 
 <LabelWrap />
 
@@ -51,7 +51,7 @@ import LabelWrap from '@site/static/usage/v7/radio/label-wrap/index.md';
 
 By default, the radio group uses strict equality (`===`) to determine if an option is selected. This can be overridden by providing a property name or a function to the `compareWith` property.
 
-import UsingComparewith from '@site/static/usage/v7/radio/using-comparewith/index.md';
+import UsingComparewith from '@site/static/usage/v7/radio/using-comparewith/index.mdx';
 
 <UsingComparewith />
 
@@ -63,7 +63,7 @@ Developers can use the `alignment` property to control how the label and control
 Stacked radios can be aligned using the `alignment` property. This can be useful when the label and control need to be centered horizontally.
 :::
 
-import Alignment from '@site/static/usage/v7/radio/alignment/index.md';
+import Alignment from '@site/static/usage/v7/radio/alignment/index.mdx';
 
 <Alignment />
 
@@ -71,7 +71,7 @@ import Alignment from '@site/static/usage/v7/radio/alignment/index.md';
 
 Developers can use the `justify` property to control how the label and control are packed on a line. This property mirrors the flexbox `justify-content` property.
 
-import Justify from '@site/static/usage/v7/radio/justify/index.md';
+import Justify from '@site/static/usage/v7/radio/justify/index.mdx';
 
 <Justify />
 
@@ -83,7 +83,7 @@ import Justify from '@site/static/usage/v7/radio/justify/index.md';
 
 By default, once a radio is selected it cannot be deselected; pressing it again will keep it selected. This behavior can be modified by using the `allowEmptySelection` property on the parent radio group, which enables the radios to be deselected.
 
-import EmptySelection from '@site/static/usage/v7/radio/empty-selection/index.md';
+import EmptySelection from '@site/static/usage/v7/radio/empty-selection/index.mdx';
 
 <EmptySelection />
 
@@ -91,19 +91,19 @@ import EmptySelection from '@site/static/usage/v7/radio/empty-selection/index.md
 
 ### Colors
 
-import Colors from '@site/static/usage/v7/radio/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/radio/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v7/radio/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/radio/theming/css-properties/index.mdx';
 
 <CSSProps />
 
 ### CSS Shadow Parts
 
-import CSSParts from '@site/static/usage/v7/radio/theming/css-shadow-parts/index.md';
+import CSSParts from '@site/static/usage/v7/radio/theming/css-shadow-parts/index.mdx';
 
 <CSSParts />
 
@@ -117,7 +117,7 @@ Developers can perform this migration one radio at a time. While developers can
 
 Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-radio`. The placement of the label can be configured using the `labelPlacement` property on `ion-radio`. The way the label and the control are packed on a line can be controlled using the `justify` property on `ion-radio`.
 
-import Migration from '@site/static/usage/v7/radio/migration/index.md';
+import Migration from '@site/static/usage/v7/radio/migration/index.mdx';
 
 <Migration />
 
diff --git a/versioned_docs/version-v7/api/range.md b/versioned_docs/version-v7/api/range.mdx
similarity index 96%
rename from versioned_docs/version-v7/api/range.md
rename to versioned_docs/version-v7/api/range.mdx
index 71aa564f092..19e5777cb4d 100644
--- a/versioned_docs/version-v7/api/range.md
+++ b/versioned_docs/version-v7/api/range.mdx
@@ -2,12 +2,12 @@
 title: 'ion-range'
 ---
 
-import Props from '@ionic-internal/component-api/v7/range/props.md';
-import Events from '@ionic-internal/component-api/v7/range/events.md';
-import Methods from '@ionic-internal/component-api/v7/range/methods.md';
-import Parts from '@ionic-internal/component-api/v7/range/parts.md';
+import Props from '@ionic-internal/component-api/v7/range/props.mdx';
+import Events from '@ionic-internal/component-api/v7/range/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/range/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/range/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/range/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/range/slots.md';
+import Slots from '@ionic-internal/component-api/v7/range/slots.mdx';
 
 <head>
   <title>ion-range: Range Slider Knob Controls with Labels</title>
@@ -37,7 +37,7 @@ Labels should be used to describe the range. They can be used visually, and they
 
 The below demo shows how to use the `labelPlacement` property to change the position of the label relative to the range. While the `label` property is used here, `labelPlacement` can also be used with the `label` slot.
 
-import LabelsPlayground from '@site/static/usage/v7/range/labels/index.md';
+import LabelsPlayground from '@site/static/usage/v7/range/labels/index.mdx';
 
 <LabelsPlayground />
 
@@ -45,7 +45,7 @@ import LabelsPlayground from '@site/static/usage/v7/range/labels/index.md';
 
 While plaintext labels should be passed in via the `label` property, if custom HTML is needed, it can be passed through the `label` slot instead.
 
-import LabelSlotPlayground from '@site/static/usage/v7/range/label-slot/index.md';
+import LabelSlotPlayground from '@site/static/usage/v7/range/label-slot/index.mdx';
 
 <LabelSlotPlayground />
 
@@ -53,7 +53,7 @@ import LabelSlotPlayground from '@site/static/usage/v7/range/label-slot/index.md
 
 If no visible label is needed, developers should still supply an `aria-label` so the range is accessible to screen readers.
 
-import NoVisibleLabel from '@site/static/usage/v7/range/no-visible-label/index.md';
+import NoVisibleLabel from '@site/static/usage/v7/range/no-visible-label/index.mdx';
 
 <NoVisibleLabel />
 
@@ -63,7 +63,7 @@ Decorative elements can be passed into the `start` or `end` slots of the range.
 
 If the directionality of the document is set to left to right, the contents slotted to the `start` position will display to the left of the range, where as contents slotted to the `end` position will display to the right of the range. In right to left (rtl) directionality, the contents slotted to the `start` position will display to the right of the range, where as contents slotted to the `end` position will display to the left of the range.
 
-import DecorationsPlayground from '@site/static/usage/v7/range/slots/index.md';
+import DecorationsPlayground from '@site/static/usage/v7/range/slots/index.mdx';
 
 <DecorationsPlayground />
 
@@ -71,7 +71,7 @@ import DecorationsPlayground from '@site/static/usage/v7/range/slots/index.md';
 
 Dual knobs introduce two knob controls that users can use to select a value at a lower and upper bounds. When selected, the Range will emit an `ionChange` event with a [RangeValue](#rangevalue), containing the upper and lower values selected.
 
-import DualKnobs from '@site/static/usage/v7/range/dual-knobs/index.md';
+import DualKnobs from '@site/static/usage/v7/range/dual-knobs/index.mdx';
 
 <DualKnobs />
 
@@ -81,7 +81,7 @@ The `pin` attribute will display the value of the Range above the knob when drag
 
 With the `pinFormatter` function, developers can customize the formatting of the range value to the user.
 
-import Pins from '@site/static/usage/v7/range/pins/index.md';
+import Pins from '@site/static/usage/v7/range/pins/index.mdx';
 
 <Pins />
 
@@ -91,7 +91,7 @@ Ticks show indications for each available value on the Range. In order to use ti
 
 With snapping enabled, the Range knob will snap to the nearest available value as the knob is dragged and released.
 
-import SnappingTicks from '@site/static/usage/v7/range/snapping-ticks/index.md';
+import SnappingTicks from '@site/static/usage/v7/range/snapping-ticks/index.mdx';
 
 <SnappingTicks />
 
@@ -101,7 +101,7 @@ import SnappingTicks from '@site/static/usage/v7/range/snapping-ticks/index.md';
 
 The `ionChange` event emits as the Range knob value changes.
 
-import IonChangeEvent from '@site/static/usage/v7/range/ion-change-event/index.md';
+import IonChangeEvent from '@site/static/usage/v7/range/ion-change-event/index.mdx';
 
 <IonChangeEvent />
 
@@ -109,7 +109,7 @@ import IonChangeEvent from '@site/static/usage/v7/range/ion-change-event/index.m
 
 The `ionKnobMoveStart` event emits when the Range knob begins dragging, whether through mouse drag, touch gesture or keyboard interaction. Inversely, `ionKnobMoveEnd` emits when the Range knob is released. Both events emit with the `RangeValue` type and work in combination with the `dualKnobs` property.
 
-import IonKnobMoveEvent from '@site/static/usage/v7/range/ion-knob-move-event/index.md';
+import IonKnobMoveEvent from '@site/static/usage/v7/range/ion-knob-move-event/index.mdx';
 
 <IonKnobMoveEvent />
 
@@ -119,7 +119,7 @@ import IonKnobMoveEvent from '@site/static/usage/v7/range/ion-knob-move-event/in
 
 Range includes [CSS Variables](#css-custom-properties) to quickly theme and customize the appearance of the Range component to match your application's design.
 
-import CSSProps from '@site/static/usage/v7/range/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/range/theming/css-properties/index.mdx';
 
 <CSSProps />
 
@@ -127,7 +127,7 @@ import CSSProps from '@site/static/usage/v7/range/theming/css-properties/index.m
 
 Range includes [CSS Shadow Parts](#css-shadow-parts) to allow complete customization of specific element nodes within the Range component. CSS Shadow Parts offer the most customization capabilities and are the recommended approach when requiring advance styling with the Range component.
 
-import CSSParts from '@site/static/usage/v7/range/theming/css-shadow-parts/index.md';
+import CSSParts from '@site/static/usage/v7/range/theming/css-shadow-parts/index.mdx';
 
 <CSSParts />
 
@@ -143,7 +143,7 @@ Using the modern syntax involves removing the `ion-label` and passing the label
 
 If custom HTML is needed for the label, it can be passed directly inside the `ion-range` using the `label` slot instead.
 
-import Migration from '@site/static/usage/v7/range/migration/index.md';
+import Migration from '@site/static/usage/v7/range/migration/index.mdx';
 
 <Migration />
 
diff --git a/versioned_docs/version-v7/api/refresher-content.md b/versioned_docs/version-v7/api/refresher-content.mdx
similarity index 91%
rename from versioned_docs/version-v7/api/refresher-content.md
rename to versioned_docs/version-v7/api/refresher-content.mdx
index 2b7b11fd458..6fbb80c726e 100644
--- a/versioned_docs/version-v7/api/refresher-content.md
+++ b/versioned_docs/version-v7/api/refresher-content.mdx
@@ -2,12 +2,12 @@
 title: 'ion-refresher-content'
 ---
 
-import Props from '@ionic-internal/component-api/v7/refresher-content/props.md';
-import Events from '@ionic-internal/component-api/v7/refresher-content/events.md';
-import Methods from '@ionic-internal/component-api/v7/refresher-content/methods.md';
-import Parts from '@ionic-internal/component-api/v7/refresher-content/parts.md';
+import Props from '@ionic-internal/component-api/v7/refresher-content/props.mdx';
+import Events from '@ionic-internal/component-api/v7/refresher-content/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/refresher-content/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/refresher-content/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/refresher-content/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/refresher-content/slots.md';
+import Slots from '@ionic-internal/component-api/v7/refresher-content/slots.mdx';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v7/api/refresher.md b/versioned_docs/version-v7/api/refresher.mdx
similarity index 97%
rename from versioned_docs/version-v7/api/refresher.md
rename to versioned_docs/version-v7/api/refresher.mdx
index cfdd1be390a..d4125d0439d 100644
--- a/versioned_docs/version-v7/api/refresher.md
+++ b/versioned_docs/version-v7/api/refresher.mdx
@@ -2,12 +2,12 @@
 title: 'ion-refresher'
 ---
 
-import Props from '@ionic-internal/component-api/v7/refresher/props.md';
-import Events from '@ionic-internal/component-api/v7/refresher/events.md';
-import Methods from '@ionic-internal/component-api/v7/refresher/methods.md';
-import Parts from '@ionic-internal/component-api/v7/refresher/parts.md';
+import Props from '@ionic-internal/component-api/v7/refresher/props.mdx';
+import Events from '@ionic-internal/component-api/v7/refresher/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/refresher/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/refresher/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/refresher/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/refresher/slots.md';
+import Slots from '@ionic-internal/component-api/v7/refresher/slots.mdx';
 
 <head>
   <title>ion-refresher: Pull-to-Refresh Page Content on Ionic Apps</title>
@@ -25,7 +25,7 @@ Data should be modified during the refresher's output events. Once the async ope
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/refresher/basic/index.md';
+import Basic from '@site/static/usage/v7/refresher/basic/index.mdx';
 
 <Basic />
 
@@ -35,7 +35,7 @@ The refresher has several properties for customizing the pull gesture. Set the `
 
 These properties do not apply when the [native refresher](#native-refreshers) is enabled.
 
-import PullProperties from '@site/static/usage/v7/refresher/pull-properties/index.md';
+import PullProperties from '@site/static/usage/v7/refresher/pull-properties/index.mdx';
 
 <PullProperties />
 
@@ -45,7 +45,7 @@ The default icon, spinner, and text can be customized on the [refresher content]
 
 Setting `pullingIcon` will disable the [native refresher](#native-refreshers).
 
-import CustomContent from '@site/static/usage/v7/refresher/custom-content/index.md';
+import CustomContent from '@site/static/usage/v7/refresher/custom-content/index.mdx';
 
 <CustomContent />
 
@@ -87,7 +87,7 @@ Developers should apply the following CSS to the scrollable container. This CSS
 }
 ```
 
-import CustomScrollTarget from '@site/static/usage/v7/refresher/custom-scroll-target/index.md';
+import CustomScrollTarget from '@site/static/usage/v7/refresher/custom-scroll-target/index.mdx';
 
 <CustomScrollTarget />
 
@@ -95,7 +95,7 @@ import CustomScrollTarget from '@site/static/usage/v7/refresher/custom-scroll-ta
 
 While the refresher can be used with any type of content, a common use case in native apps is to display a list of data that gets updated on refresh. In the below example, the app generates a list of data and then appends data to the top of the list when the refresh is completed. In a real app, the data would be received and updated after sending a request via a network or database call.
 
-import Advanced from '@site/static/usage/v7/refresher/advanced/index.md';
+import Advanced from '@site/static/usage/v7/refresher/advanced/index.mdx';
 
 <Advanced />
 
diff --git a/versioned_docs/version-v7/api/reorder-group.md b/versioned_docs/version-v7/api/reorder-group.mdx
similarity index 96%
rename from versioned_docs/version-v7/api/reorder-group.md
rename to versioned_docs/version-v7/api/reorder-group.mdx
index 9880637b779..2e61af1b4fd 100644
--- a/versioned_docs/version-v7/api/reorder-group.md
+++ b/versioned_docs/version-v7/api/reorder-group.mdx
@@ -2,12 +2,12 @@
 title: 'ion-reorder-group'
 ---
 
-import Props from '@ionic-internal/component-api/v7/reorder-group/props.md';
-import Events from '@ionic-internal/component-api/v7/reorder-group/events.md';
-import Methods from '@ionic-internal/component-api/v7/reorder-group/methods.md';
-import Parts from '@ionic-internal/component-api/v7/reorder-group/parts.md';
+import Props from '@ionic-internal/component-api/v7/reorder-group/props.mdx';
+import Events from '@ionic-internal/component-api/v7/reorder-group/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/reorder-group/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/reorder-group/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/reorder-group/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/reorder-group/slots.md';
+import Slots from '@ionic-internal/component-api/v7/reorder-group/slots.mdx';
 
 <head>
   <title>ion-reorder-group: Wrapper Component for Reorder Items</title>
diff --git a/versioned_docs/version-v7/api/reorder.md b/versioned_docs/version-v7/api/reorder.mdx
similarity index 95%
rename from versioned_docs/version-v7/api/reorder.md
rename to versioned_docs/version-v7/api/reorder.mdx
index 8d5e7ef6aa6..78bd04b052f 100644
--- a/versioned_docs/version-v7/api/reorder.md
+++ b/versioned_docs/version-v7/api/reorder.mdx
@@ -2,12 +2,12 @@
 title: 'ion-reorder'
 ---
 
-import Props from '@ionic-internal/component-api/v7/reorder/props.md';
-import Events from '@ionic-internal/component-api/v7/reorder/events.md';
-import Methods from '@ionic-internal/component-api/v7/reorder/methods.md';
-import Parts from '@ionic-internal/component-api/v7/reorder/parts.md';
+import Props from '@ionic-internal/component-api/v7/reorder/props.mdx';
+import Events from '@ionic-internal/component-api/v7/reorder/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/reorder/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/reorder/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/reorder/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/reorder/slots.md';
+import Slots from '@ionic-internal/component-api/v7/reorder/slots.mdx';
 
 <head>
   <title>ion-reorder: Drag and Drop Icon to Reorder Items</title>
@@ -29,7 +29,7 @@ The reorder is the anchor used to drag and drop the items. Once the reorder is c
 
 The most basic example of a reorder is slotting it inside of an item. By default, the reorder functionality is disabled for a reorder group. It can be enabled by setting the `disabled` property on the reorder group to `false`. The reorder icon can then be used to drag and drop the items and reorder them.
 
-import Basic from '@site/static/usage/v7/reorder/basic/index.md';
+import Basic from '@site/static/usage/v7/reorder/basic/index.mdx';
 
 <Basic />
 
@@ -37,7 +37,7 @@ import Basic from '@site/static/usage/v7/reorder/basic/index.md';
 
 In some cases, it may be desired to have the option to toggle the reorder functionality. This can be done by making the `disabled` property reactive, based on a function or variable.
 
-import TogglingDisabled from '@site/static/usage/v7/reorder/toggling-disabled/index.md';
+import TogglingDisabled from '@site/static/usage/v7/reorder/toggling-disabled/index.mdx';
 
 <TogglingDisabled />
 
@@ -45,7 +45,7 @@ import TogglingDisabled from '@site/static/usage/v7/reorder/toggling-disabled/in
 
 The reorder component uses a reorder icon with three lines on iOS and two lines on Material Design. This can be customized by adding an [Icon](https://ionic.io/ionicons) component inside of the reorder with any of the available Ionicons.
 
-import CustomIcon from '@site/static/usage/v7/reorder/custom-icon/index.md';
+import CustomIcon from '@site/static/usage/v7/reorder/custom-icon/index.mdx';
 
 <CustomIcon />
 
@@ -53,7 +53,7 @@ import CustomIcon from '@site/static/usage/v7/reorder/custom-icon/index.md';
 
 Reorder can also be used as a wrapper around an item, making the item itself the anchor. Click anywhere on an item below and drag it to reorder the list.
 
-import Wrapper from '@site/static/usage/v7/reorder/wrapper/index.md';
+import Wrapper from '@site/static/usage/v7/reorder/wrapper/index.mdx';
 
 <Wrapper />
 
@@ -67,7 +67,7 @@ In some cases, it may be necessary for an app to reorder both the array and the
 
 Regardless of the approach taken, a stable identity should be provided to reorder items if provided in a loop. This means using `track` for Angular, and `key` for React and Vue.
 
-import UpdatingData from '@site/static/usage/v7/reorder/updating-data/index.md';
+import UpdatingData from '@site/static/usage/v7/reorder/updating-data/index.mdx';
 
 <UpdatingData />
 
@@ -75,7 +75,7 @@ import UpdatingData from '@site/static/usage/v7/reorder/updating-data/index.md';
 
 Reorder requires a scroll container to work properly. When using a virtual scrolling solution, a custom scroll target needs to be provided. Scrolling on the content needs to be disabled and the `.ion-content-scroll-host` class needs to be added to the element responsible for scrolling.
 
-import CustomScrollTarget from '@site/static/usage/v7/reorder/custom-scroll-target/index.md';
+import CustomScrollTarget from '@site/static/usage/v7/reorder/custom-scroll-target/index.mdx';
 
 <CustomScrollTarget />
 
diff --git a/versioned_docs/version-v7/api/ripple-effect.md b/versioned_docs/version-v7/api/ripple-effect.mdx
similarity index 95%
rename from versioned_docs/version-v7/api/ripple-effect.md
rename to versioned_docs/version-v7/api/ripple-effect.mdx
index fba5c3217ca..d379a123b09 100644
--- a/versioned_docs/version-v7/api/ripple-effect.md
+++ b/versioned_docs/version-v7/api/ripple-effect.mdx
@@ -2,12 +2,12 @@
 title: 'ion-ripple-effect'
 ---
 
-import Props from '@ionic-internal/component-api/v7/ripple-effect/props.md';
-import Events from '@ionic-internal/component-api/v7/ripple-effect/events.md';
-import Methods from '@ionic-internal/component-api/v7/ripple-effect/methods.md';
-import Parts from '@ionic-internal/component-api/v7/ripple-effect/parts.md';
+import Props from '@ionic-internal/component-api/v7/ripple-effect/props.mdx';
+import Events from '@ionic-internal/component-api/v7/ripple-effect/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/ripple-effect/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/ripple-effect/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/ripple-effect/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/ripple-effect/slots.md';
+import Slots from '@ionic-internal/component-api/v7/ripple-effect/slots.mdx';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
@@ -27,7 +27,7 @@ It's important to set [relative positioning](https://developer.mozilla.org/en-US
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/ripple-effect/basic/index.md';
+import Basic from '@site/static/usage/v7/ripple-effect/basic/index.mdx';
 
 <Basic />
 
@@ -35,7 +35,7 @@ import Basic from '@site/static/usage/v7/ripple-effect/basic/index.md';
 
 There are two types of ripple effects: `"bounded"` and `"unbounded"`. The default type, `"bounded"`, will expand the ripple effect from the click position outwards. To add a ripple effect that always starts in the center of the element and expands in a circle, set the type to `"unbounded"`.
 
-import Type from '@site/static/usage/v7/ripple-effect/type/index.md';
+import Type from '@site/static/usage/v7/ripple-effect/type/index.mdx';
 
 <Type />
 
@@ -43,7 +43,7 @@ import Type from '@site/static/usage/v7/ripple-effect/type/index.md';
 
 The ripple can be customized to a different color through CSS. By default the ripple color is set to inherit the text color, which is generally the body color. This can be changed by setting the CSS `color` on the parent or the ripple effect itself.
 
-import Customizing from '@site/static/usage/v7/ripple-effect/customizing/index.md';
+import Customizing from '@site/static/usage/v7/ripple-effect/customizing/index.mdx';
 
 <Customizing />
 
diff --git a/versioned_docs/version-v7/api/route-redirect.md b/versioned_docs/version-v7/api/route-redirect.mdx
similarity index 96%
rename from versioned_docs/version-v7/api/route-redirect.md
rename to versioned_docs/version-v7/api/route-redirect.mdx
index ad2709591fa..e86c3eeb50b 100644
--- a/versioned_docs/version-v7/api/route-redirect.md
+++ b/versioned_docs/version-v7/api/route-redirect.mdx
@@ -2,12 +2,12 @@
 title: 'ion-route-redirect'
 ---
 
-import Props from '@ionic-internal/component-api/v7/route-redirect/props.md';
-import Events from '@ionic-internal/component-api/v7/route-redirect/events.md';
-import Methods from '@ionic-internal/component-api/v7/route-redirect/methods.md';
-import Parts from '@ionic-internal/component-api/v7/route-redirect/parts.md';
+import Props from '@ionic-internal/component-api/v7/route-redirect/props.mdx';
+import Events from '@ionic-internal/component-api/v7/route-redirect/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/route-redirect/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/route-redirect/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/route-redirect/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/route-redirect/slots.md';
+import Slots from '@ionic-internal/component-api/v7/route-redirect/slots.mdx';
 
 <head>
   <title>ion-route-redirect: Redirect 'from' a URL 'to' Another URL</title>
@@ -22,7 +22,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 A route redirect can only be used with an `ion-router` as a direct child of it.
 
 :::note
-Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.md) and the Angular router.
+Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.mdx) and the Angular router.
 :::
 
 The route redirect has two configurable properties:
diff --git a/versioned_docs/version-v7/api/route.md b/versioned_docs/version-v7/api/route.mdx
similarity index 98%
rename from versioned_docs/version-v7/api/route.md
rename to versioned_docs/version-v7/api/route.mdx
index 405132c217b..fd2b17be714 100644
--- a/versioned_docs/version-v7/api/route.md
+++ b/versioned_docs/version-v7/api/route.mdx
@@ -5,12 +5,12 @@ title: 'ion-route'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v7/route/props.md';
-import Events from '@ionic-internal/component-api/v7/route/events.md';
-import Methods from '@ionic-internal/component-api/v7/route/methods.md';
-import Parts from '@ionic-internal/component-api/v7/route/parts.md';
+import Props from '@ionic-internal/component-api/v7/route/props.mdx';
+import Events from '@ionic-internal/component-api/v7/route/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/route/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/route/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/route/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/route/slots.md';
+import Slots from '@ionic-internal/component-api/v7/route/slots.mdx';
 
 <head>
   <title>ion-route: API Route Component for Ionic Framework Apps</title>
@@ -25,7 +25,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 The route component takes a component and renders it when the Browser URL matches the url property.
 
 :::note
-Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.md) and the Angular router.
+Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.mdx) and the Angular router.
 :::
 
 ## Navigation Hooks
diff --git a/versioned_docs/version-v7/api/router-link.md b/versioned_docs/version-v7/api/router-link.mdx
similarity index 95%
rename from versioned_docs/version-v7/api/router-link.md
rename to versioned_docs/version-v7/api/router-link.mdx
index 732ee19cb34..5bcdf2c8b42 100644
--- a/versioned_docs/version-v7/api/router-link.md
+++ b/versioned_docs/version-v7/api/router-link.mdx
@@ -2,12 +2,12 @@
 title: 'ion-router-link'
 ---
 
-import Props from '@ionic-internal/component-api/v7/router-link/props.md';
-import Events from '@ionic-internal/component-api/v7/router-link/events.md';
-import Methods from '@ionic-internal/component-api/v7/router-link/methods.md';
-import Parts from '@ionic-internal/component-api/v7/router-link/parts.md';
+import Props from '@ionic-internal/component-api/v7/router-link/props.mdx';
+import Events from '@ionic-internal/component-api/v7/router-link/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/router-link/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/router-link/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/router-link/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/router-link/slots.md';
+import Slots from '@ionic-internal/component-api/v7/router-link/slots.mdx';
 
 <head>
   <title>ion-router-link: Navigate To a Specified Link</title>
diff --git a/versioned_docs/version-v7/api/router-outlet.md b/versioned_docs/version-v7/api/router-outlet.mdx
similarity index 96%
rename from versioned_docs/version-v7/api/router-outlet.md
rename to versioned_docs/version-v7/api/router-outlet.mdx
index dd88956fead..d01415d1c83 100644
--- a/versioned_docs/version-v7/api/router-outlet.md
+++ b/versioned_docs/version-v7/api/router-outlet.mdx
@@ -2,12 +2,12 @@
 title: 'ion-router-outlet'
 ---
 
-import Props from '@ionic-internal/component-api/v7/router-outlet/props.md';
-import Events from '@ionic-internal/component-api/v7/router-outlet/events.md';
-import Methods from '@ionic-internal/component-api/v7/router-outlet/methods.md';
-import Parts from '@ionic-internal/component-api/v7/router-outlet/parts.md';
+import Props from '@ionic-internal/component-api/v7/router-outlet/props.mdx';
+import Events from '@ionic-internal/component-api/v7/router-outlet/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/router-outlet/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/router-outlet/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/router-outlet/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/router-outlet/slots.md';
+import Slots from '@ionic-internal/component-api/v7/router-outlet/slots.mdx';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v7/api/router.md b/versioned_docs/version-v7/api/router.mdx
similarity index 98%
rename from versioned_docs/version-v7/api/router.md
rename to versioned_docs/version-v7/api/router.mdx
index c574f982389..b3ee1958b75 100644
--- a/versioned_docs/version-v7/api/router.md
+++ b/versioned_docs/version-v7/api/router.mdx
@@ -2,12 +2,12 @@
 title: 'ion-router'
 ---
 
-import Props from '@ionic-internal/component-api/v7/router/props.md';
-import Events from '@ionic-internal/component-api/v7/router/events.md';
-import Methods from '@ionic-internal/component-api/v7/router/methods.md';
-import Parts from '@ionic-internal/component-api/v7/router/parts.md';
+import Props from '@ionic-internal/component-api/v7/router/props.mdx';
+import Events from '@ionic-internal/component-api/v7/router/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/router/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/router/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/router/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/router/slots.md';
+import Slots from '@ionic-internal/component-api/v7/router/slots.mdx';
 
 <head>
   <title>ion-router: Router Component to Coordinate URL Navigation</title>
@@ -36,7 +36,7 @@ To configure this relationship between components (to load/select) and URLs, `io
 
 ## Basic Usage
 
-import BasicExample from '@site/static/usage/v7/router/basic/index.md';
+import BasicExample from '@site/static/usage/v7/router/basic/index.mdx';
 
 <BasicExample />
 
diff --git a/versioned_docs/version-v7/api/row.md b/versioned_docs/version-v7/api/row.mdx
similarity index 98%
rename from versioned_docs/version-v7/api/row.md
rename to versioned_docs/version-v7/api/row.mdx
index f7594363217..557ca356e8d 100644
--- a/versioned_docs/version-v7/api/row.md
+++ b/versioned_docs/version-v7/api/row.mdx
@@ -2,12 +2,12 @@
 title: 'ion-row'
 ---
 
-import Props from '@ionic-internal/component-api/v7/row/props.md';
-import Events from '@ionic-internal/component-api/v7/row/events.md';
-import Methods from '@ionic-internal/component-api/v7/row/methods.md';
-import Parts from '@ionic-internal/component-api/v7/row/parts.md';
+import Props from '@ionic-internal/component-api/v7/row/props.mdx';
+import Events from '@ionic-internal/component-api/v7/row/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/row/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/row/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/row/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/row/slots.md';
+import Slots from '@ionic-internal/component-api/v7/row/slots.mdx';
 
 <head>
   <title>ion-row: Horizontal Row Components of the Grid System</title>
diff --git a/versioned_docs/version-v7/api/searchbar.md b/versioned_docs/version-v7/api/searchbar.mdx
similarity index 96%
rename from versioned_docs/version-v7/api/searchbar.md
rename to versioned_docs/version-v7/api/searchbar.mdx
index 1296f4f8374..3c3d7774937 100644
--- a/versioned_docs/version-v7/api/searchbar.md
+++ b/versioned_docs/version-v7/api/searchbar.mdx
@@ -2,12 +2,12 @@
 title: 'ion-searchbar'
 ---
 
-import Props from '@ionic-internal/component-api/v7/searchbar/props.md';
-import Events from '@ionic-internal/component-api/v7/searchbar/events.md';
-import Methods from '@ionic-internal/component-api/v7/searchbar/methods.md';
-import Parts from '@ionic-internal/component-api/v7/searchbar/parts.md';
+import Props from '@ionic-internal/component-api/v7/searchbar/props.mdx';
+import Events from '@ionic-internal/component-api/v7/searchbar/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/searchbar/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/searchbar/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/searchbar/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/searchbar/slots.md';
+import Slots from '@ionic-internal/component-api/v7/searchbar/slots.mdx';
 
 <head>
   <title>ion-searchbar: Search Bar for Searching a Collection</title>
@@ -25,7 +25,7 @@ Searchbars represent a text field that can be used to search through a collectio
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/searchbar/basic/index.md';
+import Basic from '@site/static/usage/v7/searchbar/basic/index.mdx';
 
 <Basic />
 
@@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v7/searchbar/basic/index.md';
 
 A search icon is displayed to the left of the input field in a searchbar. It can be customized to any [Ionicon](https://ionic.io/ionicons/).
 
-import SearchIcon from '@site/static/usage/v7/searchbar/search-icon/index.md';
+import SearchIcon from '@site/static/usage/v7/searchbar/search-icon/index.mdx';
 
 <SearchIcon />
 
@@ -41,7 +41,7 @@ import SearchIcon from '@site/static/usage/v7/searchbar/search-icon/index.md';
 
 A clear button is displayed when a searchbar has a value or upon entering input in the searchbar's text field. Clicking on the clear button will erase the text field and the input will remain focused. By default, the clear button is set to show when focusing the searchbar, but it can be set to always show or never show. The icon inside of the clear button can also be customized to any [Ionicon](https://ionic.io/ionicons/).
 
-import ClearButton from '@site/static/usage/v7/searchbar/clear-button/index.md';
+import ClearButton from '@site/static/usage/v7/searchbar/clear-button/index.mdx';
 
 <ClearButton />
 
@@ -49,7 +49,7 @@ import ClearButton from '@site/static/usage/v7/searchbar/clear-button/index.md';
 
 A cancel button can be enabled which will clear the input and lose the focus upon click. By default, cancel buttons are set to never show, but they can be set to always show or only show when focusing the searchbar. The cancel button is displayed as text in `ios` mode, and as an icon in `md` mode. Both the text and icon can be customized using different properties, with the icon accepting any [Ionicon](https://ionic.io/ionicons/).
 
-import CancelButton from '@site/static/usage/v7/searchbar/cancel-button/index.md';
+import CancelButton from '@site/static/usage/v7/searchbar/cancel-button/index.mdx';
 
 <CancelButton />
 
@@ -59,7 +59,7 @@ Searchbars are styled to look native when placed inside of a toolbar. In iOS, se
 
 {/* Reuse the playground from the Toolbar directory */}
 
-import Toolbar from '@site/static/usage/v7/toolbar/searchbars/index.md';
+import Toolbar from '@site/static/usage/v7/toolbar/searchbars/index.mdx';
 
 <Toolbar />
 
@@ -67,7 +67,7 @@ import Toolbar from '@site/static/usage/v7/toolbar/searchbars/index.md';
 
 A debounce can be set on the searchbar in order to delay triggering the `ionInput` event. This is useful when querying data, as it can be used to wait to make a request instead of requesting the data each time a character is entered in the input.
 
-import Debounce from '@site/static/usage/v7/searchbar/debounce/index.md';
+import Debounce from '@site/static/usage/v7/searchbar/debounce/index.mdx';
 
 <Debounce />
 
@@ -75,7 +75,7 @@ import Debounce from '@site/static/usage/v7/searchbar/debounce/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v7/searchbar/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/searchbar/theming/colors/index.mdx';
 
 <Colors />
 
@@ -83,7 +83,7 @@ import Colors from '@site/static/usage/v7/searchbar/theming/colors/index.md';
 
 Searchbar uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. Targeting the `ion-searchbar` for customization will not work, therefore we recommend adding a class and customizing it that way.
 
-import CSSProps from '@site/static/usage/v7/searchbar/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/searchbar/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v7/api/segment-button.md b/versioned_docs/version-v7/api/segment-button.mdx
similarity index 83%
rename from versioned_docs/version-v7/api/segment-button.md
rename to versioned_docs/version-v7/api/segment-button.mdx
index fd01b386d83..a220b1959c2 100644
--- a/versioned_docs/version-v7/api/segment-button.md
+++ b/versioned_docs/version-v7/api/segment-button.mdx
@@ -2,12 +2,12 @@
 title: 'ion-segment-button'
 ---
 
-import Props from '@ionic-internal/component-api/v7/segment-button/props.md';
-import Events from '@ionic-internal/component-api/v7/segment-button/events.md';
-import Methods from '@ionic-internal/component-api/v7/segment-button/methods.md';
-import Parts from '@ionic-internal/component-api/v7/segment-button/parts.md';
+import Props from '@ionic-internal/component-api/v7/segment-button/props.mdx';
+import Events from '@ionic-internal/component-api/v7/segment-button/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/segment-button/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/segment-button/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/segment-button/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/segment-button/slots.md';
+import Slots from '@ionic-internal/component-api/v7/segment-button/slots.mdx';
 
 <head>
   <title>ion-segment-button | Segment Button Icon and Segment Value</title>
@@ -21,11 +21,11 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-Segment buttons are groups of related buttons inside of a [segment](segment.md). They are displayed in a horizontal row. A segment button can be selected by default by setting the `value` of the segment to the `value` of the segment button. Only one segment button can be selected at a time.
+Segment buttons are groups of related buttons inside of a [segment](segment.mdx). They are displayed in a horizontal row. A segment button can be selected by default by setting the `value` of the segment to the `value` of the segment button. Only one segment button can be selected at a time.
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/segment-button/basic/index.md';
+import Basic from '@site/static/usage/v7/segment-button/basic/index.mdx';
 
 <Basic />
 
@@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v7/segment-button/basic/index.md';
 
 The `layout` property is set to `"icon-top"` by default. When a segment button has both an icon and a label, it will display the icon on top of the label. This behavior can be changed by setting the `layout` property to `"icon-bottom"`, `"icon-start"`, or `"icon-end"` which will show the icon below the label, to the start of the label (left in LTR and right in RTL) or to the end of the label (right in LTR and left in RTL), respectively.
 
-import Layout from '@site/static/usage/v7/segment-button/layout/index.md';
+import Layout from '@site/static/usage/v7/segment-button/layout/index.mdx';
 
 <Layout />
 
@@ -41,13 +41,13 @@ import Layout from '@site/static/usage/v7/segment-button/layout/index.md';
 
 ### CSS Shadow Parts
 
-import CSSParts from '@site/static/usage/v7/segment-button/theming/css-shadow-parts/index.md';
+import CSSParts from '@site/static/usage/v7/segment-button/theming/css-shadow-parts/index.mdx';
 
 <CSSParts />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v7/segment-button/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/segment-button/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v7/api/segment.md b/versioned_docs/version-v7/api/segment.mdx
similarity index 96%
rename from versioned_docs/version-v7/api/segment.md
rename to versioned_docs/version-v7/api/segment.mdx
index 3ec85af17f5..0f351558014 100644
--- a/versioned_docs/version-v7/api/segment.md
+++ b/versioned_docs/version-v7/api/segment.mdx
@@ -2,12 +2,12 @@
 title: 'ion-segment'
 ---
 
-import Props from '@ionic-internal/component-api/v7/segment/props.md';
-import Events from '@ionic-internal/component-api/v7/segment/events.md';
-import Methods from '@ionic-internal/component-api/v7/segment/methods.md';
-import Parts from '@ionic-internal/component-api/v7/segment/parts.md';
+import Props from '@ionic-internal/component-api/v7/segment/props.mdx';
+import Events from '@ionic-internal/component-api/v7/segment/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/segment/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/segment/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/segment/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/segment/slots.md';
+import Slots from '@ionic-internal/component-api/v7/segment/slots.mdx';
 
 <head>
   <title>ion-segment: API Documentation for Segmented Controls</title>
@@ -29,7 +29,7 @@ Their functionality is similar to tabs, where selecting one will deselect all ot
 
 Segments consist of [segment buttons](./segment-button) with a `value` property on each button. Set the `value` property on the segment to match the value of a button to select that button. Segments can also be disabled to prevent users from interacting with them.
 
-import Basic from '@site/static/usage/v7/segment/basic/index.md';
+import Basic from '@site/static/usage/v7/segment/basic/index.mdx';
 
 <Basic />
 
@@ -37,7 +37,7 @@ import Basic from '@site/static/usage/v7/segment/basic/index.md';
 
 Segments are not scrollable by default. Each segment button has a fixed width, and the width is determined by dividing the number of segment buttons by the screen width. This ensures that each segment button can be displayed on the screen without having to scroll. As a result, some segment buttons with longer labels may get cut off. To avoid this we recommend either using a shorter label or switching to a scrollable segment by setting the `scrollable` property to `true`. This will cause the segment to scroll horizontally, but will allow each segment button to have a variable width.
 
-import Scrollable from '@site/static/usage/v7/segment/scrollable/index.md';
+import Scrollable from '@site/static/usage/v7/segment/scrollable/index.mdx';
 
 <Scrollable />
 
@@ -45,7 +45,7 @@ import Scrollable from '@site/static/usage/v7/segment/scrollable/index.md';
 
 {/* Reuse the playground from the Toolbar directory */}
 
-import Toolbar from '@site/static/usage/v7/toolbar/segments/index.md';
+import Toolbar from '@site/static/usage/v7/toolbar/segments/index.mdx';
 
 <Toolbar />
 
@@ -53,13 +53,13 @@ import Toolbar from '@site/static/usage/v7/toolbar/segments/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v7/segment/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/segment/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v7/segment/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/segment/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v7/api/select-option.md b/versioned_docs/version-v7/api/select-option.mdx
similarity index 94%
rename from versioned_docs/version-v7/api/select-option.md
rename to versioned_docs/version-v7/api/select-option.mdx
index a1f9951b078..00dd0aff1a5 100644
--- a/versioned_docs/version-v7/api/select-option.md
+++ b/versioned_docs/version-v7/api/select-option.mdx
@@ -2,12 +2,12 @@
 title: 'ion-select-option'
 ---
 
-import Props from '@ionic-internal/component-api/v7/select-option/props.md';
-import Events from '@ionic-internal/component-api/v7/select-option/events.md';
-import Methods from '@ionic-internal/component-api/v7/select-option/methods.md';
-import Parts from '@ionic-internal/component-api/v7/select-option/parts.md';
+import Props from '@ionic-internal/component-api/v7/select-option/props.mdx';
+import Events from '@ionic-internal/component-api/v7/select-option/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/select-option/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/select-option/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/select-option/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/select-option/slots.md';
+import Slots from '@ionic-internal/component-api/v7/select-option/slots.mdx';
 
 <head>
   <title>ion-select-option: Option For a Select Dialog</title>
diff --git a/versioned_docs/version-v7/api/select.md b/versioned_docs/version-v7/api/select.mdx
similarity index 90%
rename from versioned_docs/version-v7/api/select.md
rename to versioned_docs/version-v7/api/select.mdx
index b664bec16cd..792031ba37b 100644
--- a/versioned_docs/version-v7/api/select.md
+++ b/versioned_docs/version-v7/api/select.mdx
@@ -2,12 +2,12 @@
 title: 'ion-select'
 ---
 
-import Props from '@ionic-internal/component-api/v7/select/props.md';
-import Events from '@ionic-internal/component-api/v7/select/events.md';
-import Methods from '@ionic-internal/component-api/v7/select/methods.md';
-import Parts from '@ionic-internal/component-api/v7/select/parts.md';
+import Props from '@ionic-internal/component-api/v7/select/props.mdx';
+import Events from '@ionic-internal/component-api/v7/select/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/select/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/select/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/select/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/select/slots.md';
+import Slots from '@ionic-internal/component-api/v7/select/slots.mdx';
 
 <head>
   <title>ion-select: Select One or Multiple Value Boxes or Placeholders</title>
@@ -41,7 +41,7 @@ Select has several options for supplying a label for the component:
 
 Labels will take up the width of their content by default. Developers can use the `labelPlacement` property to control how the label is placed relative to the control. While the `label` property is used here, `labelPlacement` can also be used with the `label` slot.
 
-import LabelPlacement from '@site/static/usage/v7/select/label-placement/index.md';
+import LabelPlacement from '@site/static/usage/v7/select/label-placement/index.mdx';
 
 <LabelPlacement />
 
@@ -49,7 +49,7 @@ import LabelPlacement from '@site/static/usage/v7/select/label-placement/index.m
 
 While plaintext labels should be passed in via the `label` property, if custom HTML is needed, it can be passed through the `label` slot instead.
 
-import LabelSlot from '@site/static/usage/v7/select/label-slot/index.md';
+import LabelSlot from '@site/static/usage/v7/select/label-slot/index.mdx';
 
 <LabelSlot />
 
@@ -57,7 +57,7 @@ import LabelSlot from '@site/static/usage/v7/select/label-slot/index.md';
 
 If no visible label is needed, developers should still supply an `aria-label` so the select is accessible to screen readers.
 
-import NoVisibleLabel from '@site/static/usage/v7/select/no-visible-label/index.md';
+import NoVisibleLabel from '@site/static/usage/v7/select/no-visible-label/index.mdx';
 
 <NoVisibleLabel />
 
@@ -67,7 +67,7 @@ By default, the select allows the user to select only one option. The alert inte
 
 Keyboard interactions for single selection are described in the [Keyboard Interactions](#single-selection-1) section below.
 
-import SingleSelectionExample from '@site/static/usage/v7/select/basic/single-selection/index.md';
+import SingleSelectionExample from '@site/static/usage/v7/select/basic/single-selection/index.mdx';
 
 <SingleSelectionExample />
 
@@ -83,29 +83,29 @@ The `action-sheet` interface is not supported with multiple selection.
 
 Keyboard interactions for multiple selection are described in the [Keyboard Interactions](#multiple-selection-1) section below.
 
-import MultipleSelectionExample from '@site/static/usage/v7/select/basic/multiple-selection/index.md';
+import MultipleSelectionExample from '@site/static/usage/v7/select/basic/multiple-selection/index.mdx';
 
 <MultipleSelectionExample />
 
 ## 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.
 
 ### Alert
 
-import AlertExample from '@site/static/usage/v7/select/basic/single-selection/index.md';
+import AlertExample from '@site/static/usage/v7/select/basic/single-selection/index.mdx';
 
 <AlertExample />
 
 ### Action Sheet
 
-import ActionSheetExample from '@site/static/usage/v7/select/interfaces/action-sheet/index.md';
+import ActionSheetExample from '@site/static/usage/v7/select/interfaces/action-sheet/index.mdx';
 
 <ActionSheetExample />
 
 ### Popover
 
-import PopoverExample from '@site/static/usage/v7/select/interfaces/popover/index.md';
+import PopoverExample from '@site/static/usage/v7/select/interfaces/popover/index.mdx';
 
 <PopoverExample />
 
@@ -113,7 +113,7 @@ import PopoverExample from '@site/static/usage/v7/select/interfaces/popover/inde
 
 The main ways of handling user interaction with the select are the `ionChange`, `ionDismiss`, and `ionCancel` events. See [Events](#events) for more details on these and other events that select fires.
 
-import RespondingToInteractionExample from '@site/static/usage/v7/select/basic/responding-to-interaction/index.md';
+import RespondingToInteractionExample from '@site/static/usage/v7/select/basic/responding-to-interaction/index.mdx';
 
 <RespondingToInteractionExample />
 
@@ -125,13 +125,13 @@ By default, the select uses object equality (`===`) to determine if an option is
 
 ### Using compareWith
 
-import UsingCompareWithExample from '@site/static/usage/v7/select/objects-as-values/using-comparewith/index.md';
+import UsingCompareWithExample from '@site/static/usage/v7/select/objects-as-values/using-comparewith/index.mdx';
 
 <UsingCompareWithExample />
 
 ### Object Values and Multiple Selection
 
-import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v7/select/objects-as-values/multiple-selection/index.md';
+import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v7/select/objects-as-values/multiple-selection/index.mdx';
 
 <ObjectValuesAndMultipleSelectionExample />
 
@@ -139,7 +139,7 @@ import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v7/selec
 
 Developers can use the `justify` property to control how the label and control are packed on a line.
 
-import JustifyExample from '@site/static/usage/v7/select/justify/index.md';
+import JustifyExample from '@site/static/usage/v7/select/justify/index.mdx';
 
 <JustifyExample />
 
@@ -149,7 +149,7 @@ Material Design offers filled styles for a select. The `fill` property on the se
 
 Since the `fill` styles visually defines the select container, selects that use `fill` should not be used in `ion-item`.
 
-import FillExample from '@site/static/usage/v7/select/fill/index.md';
+import FillExample from '@site/static/usage/v7/select/fill/index.mdx';
 
 <FillExample />
 
@@ -159,7 +159,7 @@ The alert supports two buttons: `Cancel` and `OK`. Each button's text can be cus
 
 The `action-sheet` and `popover` interfaces do not have an `OK` button, clicking on any of the options will automatically close the overlay and select that value. The `popover` interface does not have a `Cancel` button, clicking on the backdrop will close the overlay.
 
-import ButtonTextExample from '@site/static/usage/v7/select/customization/button-text/index.md';
+import ButtonTextExample from '@site/static/usage/v7/select/customization/button-text/index.mdx';
 
 <ButtonTextExample />
 
@@ -167,11 +167,11 @@ import ButtonTextExample from '@site/static/usage/v7/select/customization/button
 
 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.
 
-import InterfaceOptionsExample from '@site/static/usage/v7/select/customization/interface-options/index.md';
+import InterfaceOptionsExample from '@site/static/usage/v7/select/customization/interface-options/index.mdx';
 
 <InterfaceOptionsExample />
 
@@ -180,12 +180,12 @@ import InterfaceOptionsExample from '@site/static/usage/v7/select/customization/
 The `start` and `end` slots can be used to place icons, buttons, or prefix/suffix text on either side of the select. If the slot content is clicked, the select will not open.
 
 :::note
-In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
+In most cases, [Icon](./icon.mdx) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
 
-If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to.
+If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.mdx). This ensures that the content can be tabbed to.
 :::
 
-import StartEndSlots from '@site/static/usage/v7/select/start-end-slots/index.md';
+import StartEndSlots from '@site/static/usage/v7/select/start-end-slots/index.mdx';
 
 <StartEndSlots />
 
@@ -199,7 +199,7 @@ As mentioned, the `ion-select` element consists only of the value(s), or placeho
 
 Alternatively, depending on the [browser support](https://caniuse.com/#feat=mdn-css_selectors_part) needed, CSS shadow parts can be used to style the select. Notice that by using `::part`, any CSS property on the element can be targeted.
 
-import StylingSelectExample from '@site/static/usage/v7/select/customization/styling-select/index.md';
+import StylingSelectExample from '@site/static/usage/v7/select/customization/styling-select/index.mdx';
 
 <StylingSelectExample />
 
@@ -207,17 +207,17 @@ import StylingSelectExample from '@site/static/usage/v7/select/customization/sty
 
 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.
 
 ### Custom Toggle Icons
 
 The icon that displays next to the select text can be set to any [Ionicon](https://ionic.io/ionicons) using the `toggleIcon` and/or `expandedIcon` properties.
 
-import CustomToggleIconsExample from '@site/static/usage/v7/select/customization/custom-toggle-icons/index.md';
+import CustomToggleIconsExample from '@site/static/usage/v7/select/customization/custom-toggle-icons/index.mdx';
 
 <CustomToggleIconsExample />
 
@@ -227,7 +227,7 @@ By default, when the select is open, the toggle icon will automatically rotate o
 
 The below example also uses a [custom `toggleIcon`](#custom-toggle-icons) to better demonstrate the flip behavior on `ios`, since the default icon is vertically symmetrical.
 
-import IconFlipBehaviorExample from '@site/static/usage/v7/select/customization/icon-flip-behavior/index.md';
+import IconFlipBehaviorExample from '@site/static/usage/v7/select/customization/icon-flip-behavior/index.mdx';
 
 <IconFlipBehaviorExample />
 
@@ -235,7 +235,7 @@ import IconFlipBehaviorExample from '@site/static/usage/v7/select/customization/
 
 Typeahead or autocomplete functionality can be built using existing Ionic components. We recommend using an `ion-modal` to make the best use of the available screen space.
 
-import TypeaheadExample from '@site/static/usage/v7/select/typeahead/index.md';
+import TypeaheadExample from '@site/static/usage/v7/select/typeahead/index.mdx';
 
 <TypeaheadExample />
 
@@ -273,7 +273,7 @@ Using the modern syntax involves two steps:
 1. Remove `ion-label` and use the `label` property on `ion-select` instead. The placement of the label can be configured using the `labelPlacement` property on `ion-select`.
 2. Move any usage of `fill` and `shape` from `ion-item` on to `ion-select`.
 
-import Migration from '@site/static/usage/v7/select/migration/index.md';
+import Migration from '@site/static/usage/v7/select/migration/index.mdx';
 
 <Migration />
 
diff --git a/versioned_docs/version-v7/api/skeleton-text.md b/versioned_docs/version-v7/api/skeleton-text.mdx
similarity index 92%
rename from versioned_docs/version-v7/api/skeleton-text.md
rename to versioned_docs/version-v7/api/skeleton-text.mdx
index 77c669eaeab..3e60be977ac 100644
--- a/versioned_docs/version-v7/api/skeleton-text.md
+++ b/versioned_docs/version-v7/api/skeleton-text.mdx
@@ -2,12 +2,12 @@
 title: 'ion-skeleton-text'
 ---
 
-import Props from '@ionic-internal/component-api/v7/skeleton-text/props.md';
-import Events from '@ionic-internal/component-api/v7/skeleton-text/events.md';
-import Methods from '@ionic-internal/component-api/v7/skeleton-text/methods.md';
-import Parts from '@ionic-internal/component-api/v7/skeleton-text/parts.md';
+import Props from '@ionic-internal/component-api/v7/skeleton-text/props.mdx';
+import Events from '@ionic-internal/component-api/v7/skeleton-text/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/skeleton-text/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/skeleton-text/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/skeleton-text/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/skeleton-text/slots.md';
+import Slots from '@ionic-internal/component-api/v7/skeleton-text/slots.mdx';
 
 <head>
   <title>ion-skeleton-text: Skeleton Loading Placeholder for Text</title>
@@ -25,7 +25,7 @@ Skeleton Text is a component for rendering placeholder content. The element will
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/skeleton-text/basic/index.md';
+import Basic from '@site/static/usage/v7/skeleton-text/basic/index.mdx';
 
 <Basic />
 
@@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v7/skeleton-text/basic/index.md';
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v7/skeleton-text/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/skeleton-text/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v7/api/spinner.md b/versioned_docs/version-v7/api/spinner.mdx
similarity index 92%
rename from versioned_docs/version-v7/api/spinner.md
rename to versioned_docs/version-v7/api/spinner.mdx
index 6c0da0da24c..ee3a8a1f93e 100644
--- a/versioned_docs/version-v7/api/spinner.md
+++ b/versioned_docs/version-v7/api/spinner.mdx
@@ -2,12 +2,12 @@
 title: 'ion-spinner'
 ---
 
-import Props from '@ionic-internal/component-api/v7/spinner/props.md';
-import Events from '@ionic-internal/component-api/v7/spinner/events.md';
-import Methods from '@ionic-internal/component-api/v7/spinner/methods.md';
-import Parts from '@ionic-internal/component-api/v7/spinner/parts.md';
+import Props from '@ionic-internal/component-api/v7/spinner/props.mdx';
+import Events from '@ionic-internal/component-api/v7/spinner/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/spinner/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/spinner/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/spinner/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/spinner/slots.md';
+import Slots from '@ionic-internal/component-api/v7/spinner/slots.mdx';
 
 <head>
   <title>ion-spinner: Animated Spinner Icon Components and Properties</title>
@@ -27,7 +27,7 @@ The Spinner component provides a variety of animated SVG spinners. Spinners are
 
 The default spinner is based on the mode. When the mode is `ios` the spinner will be `"lines"`, and when the mode is `md` the spinner will be `"circular"`. If the `name` property is set, then that spinner will be used instead of the mode specific spinner.
 
-import Basic from '@site/static/usage/v7/spinner/basic/index.md';
+import Basic from '@site/static/usage/v7/spinner/basic/index.mdx';
 
 <Basic />
 
@@ -35,7 +35,7 @@ import Basic from '@site/static/usage/v7/spinner/basic/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v7/spinner/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/spinner/theming/colors/index.mdx';
 
 <Colors />
 
@@ -43,13 +43,13 @@ import Colors from '@site/static/usage/v7/spinner/theming/colors/index.md';
 
 You may use custom CSS to style the spinner. For example, you can resize the spinner by setting the width and height.
 
-import Resizing from '@site/static/usage/v7/spinner/theming/resizing/index.md';
+import Resizing from '@site/static/usage/v7/spinner/theming/resizing/index.mdx';
 
 <Resizing />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v7/spinner/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/spinner/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v7/api/split-pane.md b/versioned_docs/version-v7/api/split-pane.mdx
similarity index 96%
rename from versioned_docs/version-v7/api/split-pane.md
rename to versioned_docs/version-v7/api/split-pane.mdx
index 3a7915569f6..9c7ab780792 100644
--- a/versioned_docs/version-v7/api/split-pane.md
+++ b/versioned_docs/version-v7/api/split-pane.mdx
@@ -2,12 +2,12 @@
 title: 'ion-split-pane'
 ---
 
-import Props from '@ionic-internal/component-api/v7/split-pane/props.md';
-import Events from '@ionic-internal/component-api/v7/split-pane/events.md';
-import Methods from '@ionic-internal/component-api/v7/split-pane/methods.md';
-import Parts from '@ionic-internal/component-api/v7/split-pane/parts.md';
+import Props from '@ionic-internal/component-api/v7/split-pane/props.mdx';
+import Events from '@ionic-internal/component-api/v7/split-pane/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/split-pane/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/split-pane/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/split-pane/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/split-pane/slots.md';
+import Slots from '@ionic-internal/component-api/v7/split-pane/slots.mdx';
 
 <head>
   <title>ion-split-pane: Split Plane for Menus and Multi-View Layouts</title>
@@ -32,7 +32,7 @@ If the device's screen width is below a certain size, the split pane will collap
 This demo sets the `when` property to `'xs'` so the split pane always shows up. Your Ionic application does not need this if you want the split pane to collapse on smaller viewports. See [Setting Breakpoints](#setting-breakpoints) for more information.
 :::
 
-import Basic from '@site/static/usage/v7/split-pane/basic/index.md';
+import Basic from '@site/static/usage/v7/split-pane/basic/index.mdx';
 
 <Basic />
 
@@ -60,7 +60,7 @@ By default, the split pane will expand when the screen is larger than 992px. To
 
 ### CSS Custom Properties
 
-import CSSProperties from '@site/static/usage/v7/split-pane/theming/css-properties/index.md';
+import CSSProperties from '@site/static/usage/v7/split-pane/theming/css-properties/index.mdx';
 
 <CSSProperties />
 
diff --git a/versioned_docs/version-v7/api/tab-bar.md b/versioned_docs/version-v7/api/tab-bar.mdx
similarity index 95%
rename from versioned_docs/version-v7/api/tab-bar.md
rename to versioned_docs/version-v7/api/tab-bar.mdx
index c49d9507557..bd13ac6f010 100644
--- a/versioned_docs/version-v7/api/tab-bar.md
+++ b/versioned_docs/version-v7/api/tab-bar.mdx
@@ -5,12 +5,12 @@ title: 'ion-tab-bar'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v7/tab-bar/props.md';
-import Events from '@ionic-internal/component-api/v7/tab-bar/events.md';
-import Methods from '@ionic-internal/component-api/v7/tab-bar/methods.md';
-import Parts from '@ionic-internal/component-api/v7/tab-bar/parts.md';
+import Props from '@ionic-internal/component-api/v7/tab-bar/props.mdx';
+import Events from '@ionic-internal/component-api/v7/tab-bar/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/tab-bar/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/tab-bar/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/tab-bar/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/tab-bar/slots.md';
+import Slots from '@ionic-internal/component-api/v7/tab-bar/slots.mdx';
 
 <head>
   <title>ion-tab-bar: Tab Bar Component with CSS Custom Properties</title>
@@ -24,7 +24,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-The tab bar is a UI component that contains a set of [tab buttons](tab-button.md). A tab bar must be provided inside of [tabs](tabs.md) to communicate with each [tab](tab.md).
+The tab bar is a UI component that contains a set of [tab buttons](tab-button.mdx). A tab bar must be provided inside of [tabs](tabs.mdx) to communicate with each [tab](tab.mdx).
 
 ## Usage
 
diff --git a/versioned_docs/version-v7/api/tab-button.md b/versioned_docs/version-v7/api/tab-button.mdx
similarity index 95%
rename from versioned_docs/version-v7/api/tab-button.md
rename to versioned_docs/version-v7/api/tab-button.mdx
index 206e2caabde..9875cb3259b 100644
--- a/versioned_docs/version-v7/api/tab-button.md
+++ b/versioned_docs/version-v7/api/tab-button.mdx
@@ -5,20 +5,20 @@ title: 'ion-tab-button'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v7/tab-button/props.md';
-import Events from '@ionic-internal/component-api/v7/tab-button/events.md';
-import Methods from '@ionic-internal/component-api/v7/tab-button/methods.md';
-import Parts from '@ionic-internal/component-api/v7/tab-button/parts.md';
+import Props from '@ionic-internal/component-api/v7/tab-button/props.mdx';
+import Events from '@ionic-internal/component-api/v7/tab-button/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/tab-button/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/tab-button/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/tab-button/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/tab-button/slots.md';
+import Slots from '@ionic-internal/component-api/v7/tab-button/slots.mdx';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-A tab button is a UI component that is placed inside of a [tab bar](tab-bar.md). The tab button can specify the layout of the icon and label and connect to a [tab view](tab.md).
+A tab button is a UI component that is placed inside of a [tab bar](tab-bar.mdx). The tab button can specify the layout of the icon and label and connect to a [tab view](tab.mdx).
 
-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-v7/api/tab.md b/versioned_docs/version-v7/api/tab.mdx
similarity index 79%
rename from versioned_docs/version-v7/api/tab.md
rename to versioned_docs/version-v7/api/tab.mdx
index 895a378e17e..e9de69d7756 100644
--- a/versioned_docs/version-v7/api/tab.md
+++ b/versioned_docs/version-v7/api/tab.mdx
@@ -2,12 +2,12 @@
 title: 'ion-tab'
 ---
 
-import Props from '@ionic-internal/component-api/v7/tab/props.md';
-import Events from '@ionic-internal/component-api/v7/tab/events.md';
-import Methods from '@ionic-internal/component-api/v7/tab/methods.md';
-import Parts from '@ionic-internal/component-api/v7/tab/parts.md';
+import Props from '@ionic-internal/component-api/v7/tab/props.mdx';
+import Events from '@ionic-internal/component-api/v7/tab/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/tab/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/tab/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/tab/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/tab/slots.md';
+import Slots from '@ionic-internal/component-api/v7/tab/slots.mdx';
 
 <head>
   <title>ion-tab: Ionic Framework Application Component</title>
@@ -21,13 +21,13 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-The tab component is a child component of [tabs](tabs.md). Each tab can contain a top level navigation stack for an app or a single view. An app can have many tabs, all with their own independent navigation.
+The tab component is a child component of [tabs](tabs.mdx). Each tab can contain a top level navigation stack for an app or a single view. An app can have many tabs, all with their own independent navigation.
 
 :::note
 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-v7/api/tabs.md b/versioned_docs/version-v7/api/tabs.mdx
similarity index 94%
rename from versioned_docs/version-v7/api/tabs.md
rename to versioned_docs/version-v7/api/tabs.mdx
index c3a9b5ee572..6a40f222fee 100644
--- a/versioned_docs/version-v7/api/tabs.md
+++ b/versioned_docs/version-v7/api/tabs.mdx
@@ -2,12 +2,12 @@
 title: 'ion-tabs'
 ---
 
-import Props from '@ionic-internal/component-api/v7/tabs/props.md';
-import Events from '@ionic-internal/component-api/v7/tabs/events.md';
-import Methods from '@ionic-internal/component-api/v7/tabs/methods.md';
-import Parts from '@ionic-internal/component-api/v7/tabs/parts.md';
+import Props from '@ionic-internal/component-api/v7/tabs/props.mdx';
+import Events from '@ionic-internal/component-api/v7/tabs/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/tabs/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/tabs/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/tabs/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/tabs/slots.md';
+import Slots from '@ionic-internal/component-api/v7/tabs/slots.mdx';
 
 <head>
   <title>ion-tabs: Tab-Based Component for App Top-Level Navigation</title>
@@ -22,7 +22,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 <EncapsulationPill type="shadow" />
 
 Tabs are a top level navigation component to implement a tab-based navigation.
-The component is a container of individual [Tab](tab.md) components.
+The component is a container of individual [Tab](tab.mdx) components.
 
 The `ion-tabs` component does not have any styling and works as a router outlet in order to handle navigation. It does not provide any UI feedback or mechanism to switch between tabs. In order to do so, an `ion-tab-bar` should be provided as a direct child of `ion-tabs`.
 
@@ -40,7 +40,7 @@ Using `ion-tabs` within Angular, React or Vue requires the use of the `ion-route
 
 Tabs can be used with the Ionic router to implement tab-based navigation. The tab bar and active tab will automatically resolve based on the url. This is the most common pattern for tabs navigation.
 
-import Router from '@site/static/usage/v7/tabs/router/index.md';
+import Router from '@site/static/usage/v7/tabs/router/index.mdx';
 
 <Router />
 
diff --git a/versioned_docs/version-v7/api/text.md b/versioned_docs/version-v7/api/text.mdx
similarity index 93%
rename from versioned_docs/version-v7/api/text.md
rename to versioned_docs/version-v7/api/text.mdx
index a13b255b42a..b15e5fff4ad 100644
--- a/versioned_docs/version-v7/api/text.md
+++ b/versioned_docs/version-v7/api/text.mdx
@@ -2,12 +2,12 @@
 title: 'ion-text'
 ---
 
-import Props from '@ionic-internal/component-api/v7/text/props.md';
-import Events from '@ionic-internal/component-api/v7/text/events.md';
-import Methods from '@ionic-internal/component-api/v7/text/methods.md';
-import Parts from '@ionic-internal/component-api/v7/text/parts.md';
+import Props from '@ionic-internal/component-api/v7/text/props.mdx';
+import Events from '@ionic-internal/component-api/v7/text/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/text/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/text/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/text/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/text/slots.md';
+import Slots from '@ionic-internal/component-api/v7/text/slots.mdx';
 
 <head>
   <title>ion-text: Ionic App Component to Style or Change Text Color</title>
@@ -25,7 +25,7 @@ The text component is a simple component that can be used to style the text colo
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/text/basic/index.md';
+import Basic from '@site/static/usage/v7/text/basic/index.mdx';
 
 <Basic />
 
diff --git a/versioned_docs/version-v7/api/textarea.md b/versioned_docs/version-v7/api/textarea.mdx
similarity index 92%
rename from versioned_docs/version-v7/api/textarea.md
rename to versioned_docs/version-v7/api/textarea.mdx
index aca893c93c1..d1985ed2cfb 100644
--- a/versioned_docs/version-v7/api/textarea.md
+++ b/versioned_docs/version-v7/api/textarea.mdx
@@ -2,12 +2,12 @@
 title: 'ion-textarea'
 ---
 
-import Props from '@ionic-internal/component-api/v7/textarea/props.md';
-import Events from '@ionic-internal/component-api/v7/textarea/events.md';
-import Methods from '@ionic-internal/component-api/v7/textarea/methods.md';
-import Parts from '@ionic-internal/component-api/v7/textarea/parts.md';
+import Props from '@ionic-internal/component-api/v7/textarea/props.mdx';
+import Events from '@ionic-internal/component-api/v7/textarea/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/textarea/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/textarea/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/textarea/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/textarea/slots.md';
+import Slots from '@ionic-internal/component-api/v7/textarea/slots.mdx';
 
 <head>
   <title>Ionic Textarea Component and CSS Properties for Multi-Line Input</title>
@@ -29,7 +29,7 @@ The textarea component accepts the [native textarea attributes](https://develope
 
 ## Basic Usage
 
-import BasicPlayground from '@site/static/usage/v7/textarea/basic/index.md';
+import BasicPlayground from '@site/static/usage/v7/textarea/basic/index.mdx';
 
 <BasicPlayground />
 
@@ -45,7 +45,7 @@ Labels should be used to describe the textarea. They can be used visually, and t
 
 Labels will take up the width of their content by default. Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
 
-import LabelPlacement from '@site/static/usage/v7/textarea/label-placement/index.md';
+import LabelPlacement from '@site/static/usage/v7/textarea/label-placement/index.mdx';
 
 <LabelPlacement />
 
@@ -55,7 +55,7 @@ While plaintext labels should be passed in via the `label` property, if custom H
 
 Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior.
 
-import LabelSlot from '@site/static/usage/v7/textarea/label-slot/index.md';
+import LabelSlot from '@site/static/usage/v7/textarea/label-slot/index.mdx';
 
 <LabelSlot />
 
@@ -63,7 +63,7 @@ import LabelSlot from '@site/static/usage/v7/textarea/label-slot/index.md';
 
 If no visible label is needed, developers should still supply an `aria-label` so the textarea is accessible to screen readers.
 
-import NoVisibleLabel from '@site/static/usage/v7/textarea/no-visible-label/index.md';
+import NoVisibleLabel from '@site/static/usage/v7/textarea/no-visible-label/index.mdx';
 
 <NoVisibleLabel />
 
@@ -75,7 +75,7 @@ Since the `fill` styles visually defines the textarea container, textareas that
 
 Filled textareas can be used on iOS by setting Textarea's `mode` to `md`.
 
-import Fill from '@site/static/usage/v7/textarea/fill/index.md';
+import Fill from '@site/static/usage/v7/textarea/fill/index.mdx';
 
 <Fill />
 
@@ -85,7 +85,7 @@ Helper and error text can be used inside of a textarea with the `helperText` and
 
 In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation.
 
-import HelperError from '@site/static/usage/v7/textarea/helper-error/index.md';
+import HelperError from '@site/static/usage/v7/textarea/helper-error/index.mdx';
 
 <HelperError />
 
@@ -93,7 +93,7 @@ import HelperError from '@site/static/usage/v7/textarea/helper-error/index.md';
 
 The textarea counter is text that displays under a textarea to notify the user of how many characters have been entered out of the total that the textarea will accept. When adding counter, the default behavior is to format the value that gets displayed as `inputLength` / `maxLength`. This behavior can be customized by passing in a formatter function to the `counterFormatter` property.
 
-import Counter from '@site/static/usage/v7/textarea/counter/index.md';
+import Counter from '@site/static/usage/v7/textarea/counter/index.mdx';
 
 <Counter />
 
@@ -101,7 +101,7 @@ import Counter from '@site/static/usage/v7/textarea/counter/index.md';
 
 When the `autoGrow` property is set to `true`, the textarea will grow and shrink based on its contents.
 
-import AutogrowPlayground from '@site/static/usage/v7/textarea/autogrow/index.md';
+import AutogrowPlayground from '@site/static/usage/v7/textarea/autogrow/index.mdx';
 
 <AutogrowPlayground />
 
@@ -109,7 +109,7 @@ import AutogrowPlayground from '@site/static/usage/v7/textarea/autogrow/index.md
 
 Setting the `clearOnEdit` property to `true` will clear the textarea after it has been blurred and then typed in again.
 
-import ClearOnEditPlayground from '@site/static/usage/v7/textarea/clear-on-edit/index.md';
+import ClearOnEditPlayground from '@site/static/usage/v7/textarea/clear-on-edit/index.mdx';
 
 <ClearOnEditPlayground />
 
@@ -120,12 +120,12 @@ The `start` and `end` slots can be used to place icons, buttons, or prefix/suffi
 Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior.
 
 :::note
-In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
+In most cases, [Icon](./icon.mdx) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
 
-If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to.
+If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.mdx). This ensures that the content can be tabbed to.
 :::
 
-import StartEndSlots from '@site/static/usage/v7/textarea/start-end-slots/index.md';
+import StartEndSlots from '@site/static/usage/v7/textarea/start-end-slots/index.mdx';
 
 <StartEndSlots />
 
@@ -143,7 +143,7 @@ Using the modern syntax involves three steps:
 2. Move textarea-specific properties from `ion-item` on to `ion-textarea`. This includes the `counter`, `counterFormatter`, `fill`, and `shape` properties.
 3. Remove usages of the `helper` and `error` slots on `ion-item` and use the `helperText` and `errorText` properties on `ion-textarea` instead.
 
-import Migration from '@site/static/usage/v7/textarea/migration/index.md';
+import Migration from '@site/static/usage/v7/textarea/migration/index.mdx';
 
 <Migration />
 
@@ -153,7 +153,7 @@ Ionic uses heuristics to detect if an app is using the modern textarea syntax. I
 
 ## Theming
 
-import ThemingPlayground from '@site/static/usage/v7/textarea/theming/index.md';
+import ThemingPlayground from '@site/static/usage/v7/textarea/theming/index.mdx';
 
 <ThemingPlayground />
 
diff --git a/versioned_docs/version-v7/api/thumbnail.md b/versioned_docs/version-v7/api/thumbnail.mdx
similarity index 91%
rename from versioned_docs/version-v7/api/thumbnail.md
rename to versioned_docs/version-v7/api/thumbnail.mdx
index 3344258478a..4141c344924 100644
--- a/versioned_docs/version-v7/api/thumbnail.md
+++ b/versioned_docs/version-v7/api/thumbnail.mdx
@@ -2,12 +2,12 @@
 title: 'ion-thumbnail'
 ---
 
-import Props from '@ionic-internal/component-api/v7/thumbnail/props.md';
-import Events from '@ionic-internal/component-api/v7/thumbnail/events.md';
-import Methods from '@ionic-internal/component-api/v7/thumbnail/methods.md';
-import Parts from '@ionic-internal/component-api/v7/thumbnail/parts.md';
+import Props from '@ionic-internal/component-api/v7/thumbnail/props.mdx';
+import Events from '@ionic-internal/component-api/v7/thumbnail/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/thumbnail/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/thumbnail/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/thumbnail/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/thumbnail/slots.md';
+import Slots from '@ionic-internal/component-api/v7/thumbnail/slots.mdx';
 
 <head>
   <title>ion-thumbnail: Thumbnail App Component for Images or Icons</title>
@@ -27,13 +27,13 @@ Thumbnails can be used by themselves or inside of any element. If placed inside
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/thumbnail/basic/index.md';
+import Basic from '@site/static/usage/v7/thumbnail/basic/index.mdx';
 
 <Basic />
 
 ## Item Thumbnails
 
-import Item from '@site/static/usage/v7/thumbnail/item/index.md';
+import Item from '@site/static/usage/v7/thumbnail/item/index.mdx';
 
 <Item />
 
@@ -41,7 +41,7 @@ import Item from '@site/static/usage/v7/thumbnail/item/index.md';
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v7/thumbnail/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/thumbnail/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v7/api/title.md b/versioned_docs/version-v7/api/title.mdx
similarity index 90%
rename from versioned_docs/version-v7/api/title.md
rename to versioned_docs/version-v7/api/title.mdx
index 2b3ec5440b3..d25641bc8dd 100644
--- a/versioned_docs/version-v7/api/title.md
+++ b/versioned_docs/version-v7/api/title.mdx
@@ -2,12 +2,12 @@
 title: 'ion-title'
 ---
 
-import Props from '@ionic-internal/component-api/v7/title/props.md';
-import Events from '@ionic-internal/component-api/v7/title/events.md';
-import Methods from '@ionic-internal/component-api/v7/title/methods.md';
-import Parts from '@ionic-internal/component-api/v7/title/parts.md';
+import Props from '@ionic-internal/component-api/v7/title/props.mdx';
+import Events from '@ionic-internal/component-api/v7/title/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/title/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/title/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/title/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/title/slots.md';
+import Slots from '@ionic-internal/component-api/v7/title/slots.mdx';
 
 <head>
   <title>ion-title: Ionic Framework App Title Component for Toolbars</title>
@@ -25,7 +25,7 @@ Title is a text component that sets the title for a [toolbar](./toolbar). It can
 
 ## Basic
 
-import Basic from '@site/static/usage/v7/title/basic/index.md';
+import Basic from '@site/static/usage/v7/title/basic/index.mdx';
 
 <Basic />
 
@@ -39,15 +39,15 @@ This feature is only available for iOS.
 
 :::
 
-import CollapsibleLargeTitle from '@site/static/usage/v7/title/collapsible-large-title/basic/index.md';
+import CollapsibleLargeTitle from '@site/static/usage/v7/title/collapsible-large-title/basic/index.mdx';
 
 <CollapsibleLargeTitle />
 
 ### Collapsible Buttons
 
-The [buttons](./buttons.md) component can be used with the [`collapse`](./buttons.md#collapse) property to additionally display in the header as the toolbar is collapsed.
+The [buttons](./buttons.mdx) component can be used with the [`collapse`](./buttons.mdx#collapse) property to additionally display in the header as the toolbar is collapsed.
 
-import CollapsibleLargeTitleButtons from '@site/static/usage/v7/title/collapsible-large-title/buttons/index.md';
+import CollapsibleLargeTitleButtons from '@site/static/usage/v7/title/collapsible-large-title/buttons/index.mdx';
 
 <CollapsibleLargeTitleButtons />
 
@@ -75,7 +75,7 @@ When styling the text color of the large title, you should target the large titl
 
 ### CSS Custom Properties
 
-import CSSCustomProperties from '@site/static/usage/v7/title/theming/css-properties/index.md';
+import CSSCustomProperties from '@site/static/usage/v7/title/theming/css-properties/index.mdx';
 
 <CSSCustomProperties />
 
diff --git a/versioned_docs/version-v7/api/toast.md b/versioned_docs/version-v7/api/toast.mdx
similarity index 93%
rename from versioned_docs/version-v7/api/toast.md
rename to versioned_docs/version-v7/api/toast.mdx
index 82e821e62dd..328c3ae7154 100644
--- a/versioned_docs/version-v7/api/toast.md
+++ b/versioned_docs/version-v7/api/toast.mdx
@@ -5,12 +5,12 @@ title: 'ion-toast'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v7/toast/props.md';
-import Events from '@ionic-internal/component-api/v7/toast/events.md';
-import Methods from '@ionic-internal/component-api/v7/toast/methods.md';
-import Parts from '@ionic-internal/component-api/v7/toast/parts.md';
+import Props from '@ionic-internal/component-api/v7/toast/props.mdx';
+import Events from '@ionic-internal/component-api/v7/toast/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/toast/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/toast/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/toast/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/toast/slots.md';
+import Slots from '@ionic-internal/component-api/v7/toast/slots.mdx';
 
 <head>
   <title>ion-toast: A Dismissible App Notification Alert Component</title>
@@ -30,7 +30,7 @@ A Toast is a subtle notification commonly used in modern applications. It can be
 
 `ion-toast` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the toast.
 
-import InlineToastTriggerExample from '@site/static/usage/v7/toast/inline/basic/index.md';
+import InlineToastTriggerExample from '@site/static/usage/v7/toast/inline/basic/index.mdx';
 
 <InlineToastTriggerExample />
 
@@ -40,13 +40,13 @@ The `isOpen` property on `ion-toast` allows developers to control the presentati
 
 `isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the toast is dismissed. Developers should listen for the `ionToastDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-toast` from being tightly coupled with the state of the application. With a one way data binding, the toast only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the toast needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug.
 
-import InlineToastIsOpenExample from '@site/static/usage/v7/toast/inline/is-open/index.md';
+import InlineToastIsOpenExample from '@site/static/usage/v7/toast/inline/is-open/index.mdx';
 
 <InlineToastIsOpenExample />
 
 ## Controller Toasts
 
-import ControllerExample from '@site/static/usage/v7/toast/presenting/controller/index.md';
+import ControllerExample from '@site/static/usage/v7/toast/presenting/controller/index.mdx';
 
 <ControllerExample />
 
@@ -60,7 +60,7 @@ Pressing the hardware back button does not dismiss toasts since they are not sup
 
 The following example demonstrates how to use the `buttons` property to add a button that automatically dismisses the toast when clicked, as well as how to collect the `role` of the dismiss event.
 
-import ButtonsPlayground from '@site/static/usage/v7/toast/buttons/index.md';
+import ButtonsPlayground from '@site/static/usage/v7/toast/buttons/index.mdx';
 
 <ButtonsPlayground />
 
@@ -70,9 +70,9 @@ Toasts can be positioned at the top, bottom or middle of the viewport. The posit
 
 ### Relative Positioning
 
-If a toast is presented alongside navigation elements such as a header, footer, or [FAB](./fab.md), the toast may overlap these elements by default. This can be fixed using the `positionAnchor` property, which takes either an element reference or an ID. The toast will be positioned relative to the chosen element, appearing below it when using `position="top"` or above it when using `position="bottom"`. When using `position="middle"`, the `positionAnchor` property is ignored.
+If a toast is presented alongside navigation elements such as a header, footer, or [FAB](./fab.mdx), the toast may overlap these elements by default. This can be fixed using the `positionAnchor` property, which takes either an element reference or an ID. The toast will be positioned relative to the chosen element, appearing below it when using `position="top"` or above it when using `position="bottom"`. When using `position="middle"`, the `positionAnchor` property is ignored.
 
-import PositionAnchor from '@site/static/usage/v7/toast/position-anchor/index.md';
+import PositionAnchor from '@site/static/usage/v7/toast/position-anchor/index.mdx';
 
 <PositionAnchor />
 
@@ -80,21 +80,21 @@ import PositionAnchor from '@site/static/usage/v7/toast/position-anchor/index.md
 
 Button containers within the toast can be displayed either on the same line as the message or stacked on separate lines using the `layout` property. The stacked layout should be used with buttons that have long text values. Additionally, buttons in a stacked toast layout can use a `side` value of either `start` or `end`, but not both.
 
-import StackedPlayground from '@site/static/usage/v7/toast/layout/index.md';
+import StackedPlayground from '@site/static/usage/v7/toast/layout/index.mdx';
 
 <StackedPlayground />
 
 ## Icons
 
-An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an [Alert](alert.md) instead.
+An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an [Alert](alert.mdx) instead.
 
-import IconPlayground from '@site/static/usage/v7/toast/icon/index.md';
+import IconPlayground from '@site/static/usage/v7/toast/icon/index.mdx';
 
 <IconPlayground />
 
 ## Theming
 
-import ThemingPlayground from '@site/static/usage/v7/toast/theming/index.md';
+import ThemingPlayground from '@site/static/usage/v7/toast/theming/index.mdx';
 
 <ThemingPlayground />
 
diff --git a/versioned_docs/version-v7/api/toggle.md b/versioned_docs/version-v7/api/toggle.mdx
similarity index 93%
rename from versioned_docs/version-v7/api/toggle.md
rename to versioned_docs/version-v7/api/toggle.mdx
index be809e2d5a5..381f373d029 100644
--- a/versioned_docs/version-v7/api/toggle.md
+++ b/versioned_docs/version-v7/api/toggle.mdx
@@ -2,12 +2,12 @@
 title: 'ion-toggle'
 ---
 
-import Props from '@ionic-internal/component-api/v7/toggle/props.md';
-import Events from '@ionic-internal/component-api/v7/toggle/events.md';
-import Methods from '@ionic-internal/component-api/v7/toggle/methods.md';
-import Parts from '@ionic-internal/component-api/v7/toggle/parts.md';
+import Props from '@ionic-internal/component-api/v7/toggle/props.mdx';
+import Events from '@ionic-internal/component-api/v7/toggle/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/toggle/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/toggle/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/toggle/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/toggle/slots.md';
+import Slots from '@ionic-internal/component-api/v7/toggle/slots.mdx';
 
 <head>
   <title>ion-toggle: Custom Toggle Button for Ionic Applications</title>
@@ -25,7 +25,7 @@ Toggles are switches that change the state of a single option. They can be switc
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/toggle/basic/index.md';
+import Basic from '@site/static/usage/v7/toggle/basic/index.mdx';
 
 <Basic />
 
@@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v7/toggle/basic/index.md';
 
 Toggles can enable on/off labels by setting the `enableOnOffLabels` property. This is important for accessibility as it makes it easier to differentiate between a checked and unchecked toggle.
 
-import OnOff from '@site/static/usage/v7/toggle/on-off/index.md';
+import OnOff from '@site/static/usage/v7/toggle/on-off/index.mdx';
 
 <OnOff />
 
@@ -41,7 +41,7 @@ import OnOff from '@site/static/usage/v7/toggle/on-off/index.md';
 
 Toggles can also be used in a list view by using the [Item](./item) and [List](./list) components.
 
-import List from '@site/static/usage/v7/toggle/list/index.md';
+import List from '@site/static/usage/v7/toggle/list/index.mdx';
 
 <List />
 
@@ -49,7 +49,7 @@ import List from '@site/static/usage/v7/toggle/list/index.md';
 
 Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
 
-import LabelPlacement from '@site/static/usage/v7/toggle/label-placement/index.md';
+import LabelPlacement from '@site/static/usage/v7/toggle/label-placement/index.mdx';
 
 <LabelPlacement />
 
@@ -61,7 +61,7 @@ Developers can use the `alignment` property to control how the label and control
 Stacked toggles can be aligned using the `alignment` property. This can be useful when the label and control need to be centered horizontally.
 :::
 
-import Alignment from '@site/static/usage/v7/toggle/alignment/index.md';
+import Alignment from '@site/static/usage/v7/toggle/alignment/index.mdx';
 
 <Alignment />
 
@@ -69,7 +69,7 @@ import Alignment from '@site/static/usage/v7/toggle/alignment/index.md';
 
 Developers can use the `justify` property to control how the label and control are packed on a line.
 
-import Justify from '@site/static/usage/v7/toggle/justify/index.md';
+import Justify from '@site/static/usage/v7/toggle/justify/index.mdx';
 
 <Justify />
 
@@ -77,7 +77,7 @@ import Justify from '@site/static/usage/v7/toggle/justify/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v7/toggle/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/toggle/theming/colors/index.mdx';
 
 <Colors />
 
@@ -85,7 +85,7 @@ import Colors from '@site/static/usage/v7/toggle/theming/colors/index.md';
 
 CSS custom properties can be combined with standard CSS to target different parts of a toggle. We can modify the `width` and `height` of the toggle directly to change the size of the track, while using the `--handle-width` and `--handle-height` custom properties to customize the handle size.
 
-import CSSProps from '@site/static/usage/v7/toggle/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/toggle/theming/css-properties/index.mdx';
 
 <CSSProps />
 
@@ -93,7 +93,7 @@ import CSSProps from '@site/static/usage/v7/toggle/theming/css-properties/index.
 
 We can further customize toggle by targeting specific shadow parts that are exposed. Any CSS property on these parts can be styled and they can also be combined with CSS custom properties.
 
-import CSSParts from '@site/static/usage/v7/toggle/theming/css-shadow-parts/index.md';
+import CSSParts from '@site/static/usage/v7/toggle/theming/css-shadow-parts/index.mdx';
 
 <CSSParts />
 
@@ -107,7 +107,7 @@ While developers can continue using the legacy syntax, we recommend migrating as
 
 Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-toggle`. The placement of the label can be configured using the `labelPlacement` property on `ion-toggle`. The way the label and the control are packed on a line can be controlled using the `justify` property on `ion-toggle`.
 
-import Migration from '@site/static/usage/v7/toggle/migration/index.md';
+import Migration from '@site/static/usage/v7/toggle/migration/index.mdx';
 
 <Migration />
 
diff --git a/versioned_docs/version-v7/api/toolbar.md b/versioned_docs/version-v7/api/toolbar.mdx
similarity index 95%
rename from versioned_docs/version-v7/api/toolbar.md
rename to versioned_docs/version-v7/api/toolbar.mdx
index d2eb6c420b8..e93dc415101 100644
--- a/versioned_docs/version-v7/api/toolbar.md
+++ b/versioned_docs/version-v7/api/toolbar.mdx
@@ -2,12 +2,12 @@
 title: 'ion-toolbar'
 ---
 
-import Props from '@ionic-internal/component-api/v7/toolbar/props.md';
-import Events from '@ionic-internal/component-api/v7/toolbar/events.md';
-import Methods from '@ionic-internal/component-api/v7/toolbar/methods.md';
-import Parts from '@ionic-internal/component-api/v7/toolbar/parts.md';
+import Props from '@ionic-internal/component-api/v7/toolbar/props.mdx';
+import Events from '@ionic-internal/component-api/v7/toolbar/events.mdx';
+import Methods from '@ionic-internal/component-api/v7/toolbar/methods.mdx';
+import Parts from '@ionic-internal/component-api/v7/toolbar/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v7/toolbar/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v7/toolbar/slots.md';
+import Slots from '@ionic-internal/component-api/v7/toolbar/slots.mdx';
 
 <head>
   <title>ion-toolbar: Customize App Menu Toolbar Buttons and Icons</title>
@@ -29,7 +29,7 @@ Toolbars can contain several different components including titles, buttons, ico
 
 It is recommended to put a toolbar inside of a [header](./header) or [footer](./footer) for proper positioning. When a toolbar is placed in a header it will appear fixed at the top of the content. When it is placed in a footer it will appear fixed at the bottom. Fullscreen content will scroll behind a toolbar in a header or footer. A [title](./title) component can be used to display text inside of the toolbar.
 
-import Basic from '@site/static/usage/v7/toolbar/basic/index.md';
+import Basic from '@site/static/usage/v7/toolbar/basic/index.mdx';
 
 <Basic />
 
@@ -39,7 +39,7 @@ Buttons placed in a toolbar should be placed inside of the [buttons](./buttons)
 
 The buttons component can wrap a standard [button](./button), [back button](./back-button), [menu button](./menu-button), or several of any of them. A button in a toolbar is styled to be clear by default, but this can be changed using the [`fill`](./button#fill) property on the button. The properties included on back button and menu button in this example are for display purposes; see their respective documentation for proper usage.
 
-import Buttons from '@site/static/usage/v7/toolbar/buttons/index.md';
+import Buttons from '@site/static/usage/v7/toolbar/buttons/index.mdx';
 
 <Buttons />
 
@@ -47,7 +47,7 @@ import Buttons from '@site/static/usage/v7/toolbar/buttons/index.md';
 
 A [searchbar](./searchbar) can be placed inside of a toolbar to search through the content. It should be the only child component of the toolbar, and will take up the full width and height.
 
-import Searchbars from '@site/static/usage/v7/toolbar/searchbars/index.md';
+import Searchbars from '@site/static/usage/v7/toolbar/searchbars/index.mdx';
 
 <Searchbars />
 
@@ -55,7 +55,7 @@ import Searchbars from '@site/static/usage/v7/toolbar/searchbars/index.md';
 
 [Segments](./segment) are generally used in toolbars to toggle between two different content views on the same page. They can be placed in a toolbar with other components, such as buttons, but should not be placed alongside a title.
 
-import Segments from '@site/static/usage/v7/toolbar/segments/index.md';
+import Segments from '@site/static/usage/v7/toolbar/segments/index.mdx';
 
 <Segments />
 
@@ -63,7 +63,7 @@ import Segments from '@site/static/usage/v7/toolbar/segments/index.md';
 
 A [progress bar](./progress-bar) is used as a loading indicator to show an ongoing process in an app. Progress bars can be placed with any other components inside of a toolbar as they will align with the bottom of the toolbar.
 
-import ProgressBars from '@site/static/usage/v7/toolbar/progress-bars/index.md';
+import ProgressBars from '@site/static/usage/v7/toolbar/progress-bars/index.mdx';
 
 <ProgressBars />
 
@@ -71,13 +71,13 @@ import ProgressBars from '@site/static/usage/v7/toolbar/progress-bars/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v7/toolbar/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/toolbar/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v7/toolbar/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/toolbar/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v7/cli.md b/versioned_docs/version-v7/cli.mdx
similarity index 100%
rename from versioned_docs/version-v7/cli.md
rename to versioned_docs/version-v7/cli.mdx
diff --git a/versioned_docs/version-v7/cli/configuration.md b/versioned_docs/version-v7/cli/configuration.mdx
similarity index 98%
rename from versioned_docs/version-v7/cli/configuration.md
rename to versioned_docs/version-v7/cli/configuration.mdx
index 9b3d7d31a95..0b67e85a2ce 100644
--- a/versioned_docs/version-v7/cli/configuration.md
+++ b/versioned_docs/version-v7/cli/configuration.mdx
@@ -14,7 +14,7 @@ title: Configuration
 
 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
 
@@ -52,7 +52,7 @@ Each Ionic project has a project configuration file, usually at the project's ro
 The CLI will look for the following environment variables:
 
 - `IONIC_CONFIG_DIRECTORY`: The directory of the global CLI config. Defaults to `~/.ionic`.
-- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. 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
@@ -121,7 +121,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-v7/cli/livereload.md b/versioned_docs/version-v7/cli/livereload.mdx
similarity index 95%
rename from versioned_docs/version-v7/cli/livereload.md
rename to versioned_docs/version-v7/cli/livereload.mdx
index be45d2e0392..adfd786b228 100644
--- a/versioned_docs/version-v7/cli/livereload.md
+++ b/versioned_docs/version-v7/cli/livereload.mdx
@@ -1,6 +1,6 @@
 # Live Reload
 
-Using the Live Reload option will reload the browser or [Web View](../core-concepts/webview.md) when you change your app's code in your development environment. This is particularly useful for developing using hardware devices.
+Using the Live Reload option will reload the browser or [Web View](../core-concepts/webview.mdx) when you change your app's code in your development environment. This is particularly useful for developing using hardware devices.
 
 ## Terms
 
@@ -55,7 +55,7 @@ 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.
 - If you are using a development container with Angular, you may see that live reload does not work. To fix it, set `projects.app.architect.serve.configurations.development.poll` to `1` in `angular.json`.
diff --git a/versioned_docs/version-v7/cli/using-a-proxy.md b/versioned_docs/version-v7/cli/using-a-proxy.mdx
similarity index 100%
rename from versioned_docs/version-v7/cli/using-a-proxy.md
rename to versioned_docs/version-v7/cli/using-a-proxy.mdx
diff --git a/versioned_docs/version-v7/components.md b/versioned_docs/version-v7/components.mdx
similarity index 99%
rename from versioned_docs/version-v7/components.md
rename to versioned_docs/version-v7/components.mdx
index a437db16c89..343d28d2e1a 100644
--- a/versioned_docs/version-v7/components.md
+++ b/versioned_docs/version-v7/components.mdx
@@ -19,7 +19,7 @@ import DocsCards from '@components/global/DocsCards';
   `}</style>
 </head>
 
-Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you're familiar with the basics, refer to the [API Index](api.md) for a complete list of each component and sub-component.
+Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you're familiar with the basics, refer to the [API Index](api.mdx) for a complete list of each component and sub-component.
 
 <intro-end />
 
diff --git a/versioned_docs/version-v7/contributing/coc.md b/versioned_docs/version-v7/contributing/coc.mdx
similarity index 100%
rename from versioned_docs/version-v7/contributing/coc.md
rename to versioned_docs/version-v7/contributing/coc.mdx
diff --git a/versioned_docs/version-v7/contributing/how-to-contribute.md b/versioned_docs/version-v7/contributing/how-to-contribute.mdx
similarity index 99%
rename from versioned_docs/version-v7/contributing/how-to-contribute.md
rename to versioned_docs/version-v7/contributing/how-to-contribute.mdx
index df5f6efbd23..da368fb421f 100644
--- a/versioned_docs/version-v7/contributing/how-to-contribute.md
+++ b/versioned_docs/version-v7/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-v7/core-concepts/cross-platform.md b/versioned_docs/version-v7/core-concepts/cross-platform.mdx
similarity index 93%
rename from versioned_docs/version-v7/core-concepts/cross-platform.md
rename to versioned_docs/version-v7/core-concepts/cross-platform.mdx
index 9d2e39248b9..6942c38ec0f 100644
--- a/versioned_docs/version-v7/core-concepts/cross-platform.md
+++ b/versioned_docs/version-v7/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](../api/grid.md) component. The view can be easily rewritten into something more usable on larger screens:
+To improve this experience, we can wrap the items in a [Grid](../api/grid.mdx) component. The view can be easily rewritten into something more usable on larger screens:
 
 ```html
 <ion-grid>
@@ -149,7 +149,7 @@ There’s a lot going on in the example above. These are the key points:
 
 - The `size` attribute can have a breakpoint added to it, `size-{breakpoint}`. This value sets the size for the specified breakpoint and above.
 
-For more information on customizing with grid, see the [Grid](../api/grid.md) documentation.
+For more information on customizing with grid, see the [Grid](../api/grid.mdx) documentation.
 
 ## Storage
 
diff --git a/versioned_docs/version-v7/core-concepts/fundamentals.md b/versioned_docs/version-v7/core-concepts/fundamentals.mdx
similarity index 85%
rename from versioned_docs/version-v7/core-concepts/fundamentals.md
rename to versioned_docs/version-v7/core-concepts/fundamentals.mdx
index 512824fc8fd..dd38a670819 100644
--- a/versioned_docs/version-v7/core-concepts/fundamentals.md
+++ b/versioned_docs/version-v7/core-concepts/fundamentals.mdx
@@ -15,13 +15,13 @@ For those completely new to Ionic app development, it can be helpful to get a hi
 
 ## UI Components
 
-Ionic Framework is a library of UI Components, which are reusable elements that serve as the building blocks for an application. Ionic Components are built with [web standards](../reference/glossary.md#web-standards) using HTML, CSS, and JavaScript. Though the components are pre-built, they're designed from the ground up to be highly customizable so apps can make each component their own, allowing each app to have its own look and feel. More specifically, Ionic components can be easily themed to globally change appearance across an entire app. For more information about customizing the look, please 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
 
@@ -38,19 +38,19 @@ For apps that are built with Angular and `@ionic/angular`, we recommend using th
 
 An amazing feature of apps built with web technologies (such as Ionic apps!) is that it can run on virtually any platform: desktop computers, phones, tablets, cars, refrigerators, and more! The same code base for Ionic apps can work on many platforms because it is based on web standards and common APIs that are shared across these platforms.
 
-One of the most common use cases for Ionic is to build an app which can be downloaded from both the <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-v7/core-concepts/webview.md b/versioned_docs/version-v7/core-concepts/webview.mdx
similarity index 80%
rename from versioned_docs/version-v7/core-concepts/webview.md
rename to versioned_docs/version-v7/core-concepts/webview.mdx
index d32f338a4dc..22d5373412a 100644
--- a/versioned_docs/version-v7/core-concepts/webview.md
+++ b/versioned_docs/version-v7/core-concepts/webview.mdx
@@ -12,13 +12,13 @@ title: Web View
 
 Web Views power web apps on native devices.
 
-The Web View is automatically provided for apps integrated with [Capacitor](../reference/glossary.md#capacitor).
+The Web View is automatically provided for apps integrated with [Capacitor](../reference/glossary.mdx#capacitor).
 
-For [Cordova](../reference/glossary.md#cordova), Ionic maintains a <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.
 
@@ -28,7 +28,7 @@ The Ionic Web View plugin is specialized for modern JavaScript apps. For both iO
 
 ### CORS
 
-Web Views enforce [CORS](../reference/glossary.md#cors), so it's important that external services properly handle cross-origin requests. 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
 
diff --git a/versioned_docs/version-v7/core-concepts/what-are-progressive-web-apps.md b/versioned_docs/version-v7/core-concepts/what-are-progressive-web-apps.mdx
similarity index 100%
rename from versioned_docs/version-v7/core-concepts/what-are-progressive-web-apps.md
rename to versioned_docs/version-v7/core-concepts/what-are-progressive-web-apps.mdx
diff --git a/versioned_docs/version-v7/deployment/app-store.md b/versioned_docs/version-v7/deployment/app-store.mdx
similarity index 100%
rename from versioned_docs/version-v7/deployment/app-store.md
rename to versioned_docs/version-v7/deployment/app-store.mdx
diff --git a/versioned_docs/version-v7/deployment/progressive-web-app.md b/versioned_docs/version-v7/deployment/progressive-web-app.mdx
similarity index 97%
rename from versioned_docs/version-v7/deployment/progressive-web-app.md
rename to versioned_docs/version-v7/deployment/progressive-web-app.mdx
index ccaab935cf0..3c418eb1510 100644
--- a/versioned_docs/version-v7/deployment/progressive-web-app.md
+++ b/versioned_docs/version-v7/deployment/progressive-web-app.mdx
@@ -14,7 +14,7 @@ import DocsCards from '@components/global/DocsCards';
   />
 </head>
 
-Because Ionic Apps are built with web technologies, they can run just as well as a Progressive Web App as they can a native app. Not sure what PWAs are? Check out Ionic's <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, React, and Vue.
 
diff --git a/versioned_docs/version-v7/developer-resources/courses.md b/versioned_docs/version-v7/developer-resources/courses.mdx
similarity index 100%
rename from versioned_docs/version-v7/developer-resources/courses.md
rename to versioned_docs/version-v7/developer-resources/courses.mdx
diff --git a/versioned_docs/version-v7/developer-resources/guides.md b/versioned_docs/version-v7/developer-resources/guides.mdx
similarity index 76%
rename from versioned_docs/version-v7/developer-resources/guides.md
rename to versioned_docs/version-v7/developer-resources/guides.mdx
index dbe6d9477b8..c0590b83684 100644
--- a/versioned_docs/version-v7/developer-resources/guides.md
+++ b/versioned_docs/version-v7/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-v7/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md b/versioned_docs/version-v7/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx
similarity index 100%
rename from versioned_docs/version-v7/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md
rename to versioned_docs/version-v7/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx
diff --git a/versioned_docs/version-v7/developer-resources/guides/first-app-v3/intro.md b/versioned_docs/version-v7/developer-resources/guides/first-app-v3/intro.mdx
similarity index 100%
rename from versioned_docs/version-v7/developer-resources/guides/first-app-v3/intro.md
rename to versioned_docs/version-v7/developer-resources/guides/first-app-v3/intro.mdx
diff --git a/versioned_docs/version-v7/developer-resources/guides/first-app-v3/ios-android-camera.md b/versioned_docs/version-v7/developer-resources/guides/first-app-v3/ios-android-camera.mdx
similarity index 100%
rename from versioned_docs/version-v7/developer-resources/guides/first-app-v3/ios-android-camera.md
rename to versioned_docs/version-v7/developer-resources/guides/first-app-v3/ios-android-camera.mdx
diff --git a/versioned_docs/version-v7/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md b/versioned_docs/version-v7/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx
similarity index 94%
rename from versioned_docs/version-v7/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
rename to versioned_docs/version-v7/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx
index a1e96838779..11e25a0a1fa 100644
--- a/versioned_docs/version-v7/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
+++ b/versioned_docs/version-v7/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-v7/developer-resources/guides/first-app-v3/theming.md b/versioned_docs/version-v7/developer-resources/guides/first-app-v3/theming.mdx
similarity index 100%
rename from versioned_docs/version-v7/developer-resources/guides/first-app-v3/theming.md
rename to versioned_docs/version-v7/developer-resources/guides/first-app-v3/theming.mdx
diff --git a/versioned_docs/version-v7/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md b/versioned_docs/version-v7/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx
similarity index 100%
rename from versioned_docs/version-v7/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
rename to versioned_docs/version-v7/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx
diff --git a/versioned_docs/version-v7/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md b/versioned_docs/version-v7/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx
similarity index 100%
rename from versioned_docs/version-v7/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md
rename to versioned_docs/version-v7/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx
diff --git a/versioned_docs/version-v7/developer-resources/guides/first-app-v4/intro.md b/versioned_docs/version-v7/developer-resources/guides/first-app-v4/intro.mdx
similarity index 98%
rename from versioned_docs/version-v7/developer-resources/guides/first-app-v4/intro.md
rename to versioned_docs/version-v7/developer-resources/guides/first-app-v4/intro.mdx
index 29508dc3359..00e9e11ad2c 100644
--- a/versioned_docs/version-v7/developer-resources/guides/first-app-v4/intro.md
+++ b/versioned_docs/version-v7/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-v7/developer-resources/guides/first-app-v4/ios-android-camera.md b/versioned_docs/version-v7/developer-resources/guides/first-app-v4/ios-android-camera.mdx
similarity index 98%
rename from versioned_docs/version-v7/developer-resources/guides/first-app-v4/ios-android-camera.md
rename to versioned_docs/version-v7/developer-resources/guides/first-app-v4/ios-android-camera.mdx
index 8908090edec..d5c4dfcb129 100644
--- a/versioned_docs/version-v7/developer-resources/guides/first-app-v4/ios-android-camera.md
+++ b/versioned_docs/version-v7/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-v7/developer-resources/guides/first-app-v4/theming.md b/versioned_docs/version-v7/developer-resources/guides/first-app-v4/theming.mdx
similarity index 92%
rename from versioned_docs/version-v7/developer-resources/guides/first-app-v4/theming.md
rename to versioned_docs/version-v7/developer-resources/guides/first-app-v4/theming.mdx
index c185f6761c1..c55d591b308 100644
--- a/versioned_docs/version-v7/developer-resources/guides/first-app-v4/theming.md
+++ b/versioned_docs/version-v7/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-v7/developer-resources/posts.md b/versioned_docs/version-v7/developer-resources/posts.mdx
similarity index 100%
rename from versioned_docs/version-v7/developer-resources/posts.md
rename to versioned_docs/version-v7/developer-resources/posts.mdx
diff --git a/versioned_docs/version-v7/developer-resources/tools.md b/versioned_docs/version-v7/developer-resources/tools.mdx
similarity index 92%
rename from versioned_docs/version-v7/developer-resources/tools.md
rename to versioned_docs/version-v7/developer-resources/tools.mdx
index 0cd5ac7d7f3..aa1a7301ba9 100644
--- a/versioned_docs/version-v7/developer-resources/tools.md
+++ b/versioned_docs/version-v7/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-v7/developer-resources/videos.md b/versioned_docs/version-v7/developer-resources/videos.mdx
similarity index 100%
rename from versioned_docs/version-v7/developer-resources/videos.md
rename to versioned_docs/version-v7/developer-resources/videos.mdx
diff --git a/versioned_docs/version-v7/developing/android.md b/versioned_docs/version-v7/developing/android.mdx
similarity index 100%
rename from versioned_docs/version-v7/developing/android.md
rename to versioned_docs/version-v7/developing/android.mdx
diff --git a/versioned_docs/version-v7/developing/config.md b/versioned_docs/version-v7/developing/config.mdx
similarity index 99%
rename from versioned_docs/version-v7/developing/config.md
rename to versioned_docs/version-v7/developing/config.mdx
index 7c471584120..232d8bfc419 100644
--- a/versioned_docs/version-v7/developing/config.md
+++ b/versioned_docs/version-v7/developing/config.mdx
@@ -13,7 +13,7 @@ The available config keys can be found in the [`IonicConfig`](#ionicconfig) inte
 
 The following example disables ripple effects and default the mode to Material Design:
 
-import GlobalExample from '@site/docs/developing/config/global/index.md';
+import GlobalExample from '@site/docs/developing/config/global/index.mdx';
 
 <GlobalExample />
 
@@ -21,7 +21,7 @@ import GlobalExample from '@site/docs/developing/config/global/index.md';
 
 Ionic Config is not reactive. Updating the config's value after the component has rendered will result in the previous value. It is recommended to use a component's properties instead of updating the config, when you require reactive values.
 
-import PerComponentExample from '@site/docs/developing/config/per-component/index.md';
+import PerComponentExample from '@site/docs/developing/config/per-component/index.mdx';
 
 <PerComponentExample />
 
@@ -31,7 +31,7 @@ Ionic Config can also be set on a per-platform basis. For example, this allows y
 
 In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser.
 
-import PerPlatformExample from '@site/docs/developing/config/per-platform/index.md';
+import PerPlatformExample from '@site/docs/developing/config/per-platform/index.mdx';
 
 <PerPlatformExample />
 
@@ -39,7 +39,7 @@ import PerPlatformExample from '@site/docs/developing/config/per-platform/index.
 
 The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match:
 
-import PerPlatformFallbackExample from '@site/docs/developing/config/per-platform-overrides/index.md';
+import PerPlatformFallbackExample from '@site/docs/developing/config/per-platform-overrides/index.mdx';
 
 <PerPlatformFallbackExample />
 
@@ -47,7 +47,7 @@ import PerPlatformFallbackExample from '@site/docs/developing/config/per-platfor
 
 This final example allows you to accumulate a config object based upon different platform requirements.
 
-import PerPlatformOverridesExample from '@site/docs/developing/config/per-platform-fallback/index.md';
+import PerPlatformOverridesExample from '@site/docs/developing/config/per-platform-fallback/index.mdx';
 
 <PerPlatformOverridesExample />
 
@@ -55,7 +55,7 @@ import PerPlatformOverridesExample from '@site/docs/developing/config/per-platfo
 
 In some cases, you may need to access the current Ionic mode programmatically within your application logic. This can be useful for applying conditional behavior, fetching specific assets, or performing other actions based on the active styling mode.
 
-import IonicMode from '@site/static/usage/v7/config/mode/index.md';
+import IonicMode from '@site/static/usage/v7/config/mode/index.mdx';
 
 <IonicMode />
 
diff --git a/versioned_docs/version-v7/developing/config/global/index.md b/versioned_docs/version-v7/developing/config/global/index.mdx
similarity index 100%
rename from versioned_docs/version-v7/developing/config/global/index.md
rename to versioned_docs/version-v7/developing/config/global/index.mdx
diff --git a/versioned_docs/version-v7/developing/config/per-component/index.md b/versioned_docs/version-v7/developing/config/per-component/index.mdx
similarity index 100%
rename from versioned_docs/version-v7/developing/config/per-component/index.md
rename to versioned_docs/version-v7/developing/config/per-component/index.mdx
diff --git a/versioned_docs/version-v7/developing/config/per-platform-fallback/index.md b/versioned_docs/version-v7/developing/config/per-platform-fallback/index.mdx
similarity index 100%
rename from versioned_docs/version-v7/developing/config/per-platform-fallback/index.md
rename to versioned_docs/version-v7/developing/config/per-platform-fallback/index.mdx
diff --git a/versioned_docs/version-v7/developing/config/per-platform-overrides/index.md b/versioned_docs/version-v7/developing/config/per-platform-overrides/index.mdx
similarity index 100%
rename from versioned_docs/version-v7/developing/config/per-platform-overrides/index.md
rename to versioned_docs/version-v7/developing/config/per-platform-overrides/index.mdx
diff --git a/versioned_docs/version-v7/developing/config/per-platform/index.md b/versioned_docs/version-v7/developing/config/per-platform/index.mdx
similarity index 100%
rename from versioned_docs/version-v7/developing/config/per-platform/index.md
rename to versioned_docs/version-v7/developing/config/per-platform/index.mdx
diff --git a/versioned_docs/version-v7/developing/hardware-back-button.md b/versioned_docs/version-v7/developing/hardware-back-button.mdx
similarity index 97%
rename from versioned_docs/version-v7/developing/hardware-back-button.md
rename to versioned_docs/version-v7/developing/hardware-back-button.mdx
index b8698ef3377..5ae2606eea2 100644
--- a/versioned_docs/version-v7/developing/hardware-back-button.md
+++ b/versioned_docs/version-v7/developing/hardware-back-button.mdx
@@ -40,7 +40,7 @@ The table below shows how hardware back button support varies by environment.
 
 ### Hardware Back Button in a Browser or a PWA
 
-Ionic has experimental support for handling the hardware back button in a browser or a PWA by setting [`experimentalCloseWatcher: true` in the IonicConfig](./config.md). When this feature is enabled, Ionic will use the [Close Watcher API](https://github.com/WICG/close-watcher) to pass any close requests through the `ionBackButton` event. This includes pressing the hardware back button to navigate or the Escape key to dismiss a modal.
+Ionic has experimental support for handling the hardware back button in a browser or a PWA by setting [`experimentalCloseWatcher: true` in the IonicConfig](./config.mdx). When this feature is enabled, Ionic will use the [Close Watcher API](https://github.com/WICG/close-watcher) to pass any close requests through the `ionBackButton` event. This includes pressing the hardware back button to navigate or the Escape key to dismiss a modal.
 
 Chrome has support for Close Watcher starting in [Chrome 120](https://developer.chrome.com/blog/new-in-chrome-120).
 
diff --git a/versioned_docs/version-v7/developing/ios.md b/versioned_docs/version-v7/developing/ios.mdx
similarity index 100%
rename from versioned_docs/version-v7/developing/ios.md
rename to versioned_docs/version-v7/developing/ios.mdx
diff --git a/versioned_docs/version-v7/developing/keyboard.md b/versioned_docs/version-v7/developing/keyboard.mdx
similarity index 99%
rename from versioned_docs/version-v7/developing/keyboard.md
rename to versioned_docs/version-v7/developing/keyboard.mdx
index 20fa164f1af..7cd93d4ce3a 100644
--- a/versioned_docs/version-v7/developing/keyboard.md
+++ b/versioned_docs/version-v7/developing/keyboard.mdx
@@ -27,7 +27,7 @@ For a list of accepted values, see the <a href="https://developer.mozilla.org/en
 
 ### Usage
 
-import Inputmode from '@site/static/usage/v7/keyboard/inputmode/index.md';
+import Inputmode from '@site/static/usage/v7/keyboard/inputmode/index.mdx';
 
 <Inputmode />
 
@@ -45,7 +45,7 @@ For a list of accepted values, see the <a href="https://html.spec.whatwg.org/dev
 
 ### Usage
 
-import Enterkeyhint from '@site/static/usage/v7/keyboard/enterkeyhint/index.md';
+import Enterkeyhint from '@site/static/usage/v7/keyboard/enterkeyhint/index.mdx';
 
 <Enterkeyhint />
 
diff --git a/versioned_docs/version-v7/developing/managing-focus.md b/versioned_docs/version-v7/developing/managing-focus.mdx
similarity index 99%
rename from versioned_docs/version-v7/developing/managing-focus.md
rename to versioned_docs/version-v7/developing/managing-focus.mdx
index 01b112ea68c..7911473a7b5 100644
--- a/versioned_docs/version-v7/developing/managing-focus.md
+++ b/versioned_docs/version-v7/developing/managing-focus.mdx
@@ -35,7 +35,7 @@ There are platform restrictions you should be aware of when using the `setFocus`
 
 The example below demonstrates how to use the `setFocus` API to request focus on an input when the user clicks a button.
 
-import Basic from '@site/static/usage/v7/input/set-focus/index.md';
+import Basic from '@site/static/usage/v7/input/set-focus/index.mdx';
 
 <Basic />
 
diff --git a/versioned_docs/version-v7/developing/previewing.md b/versioned_docs/version-v7/developing/previewing.mdx
similarity index 94%
rename from versioned_docs/version-v7/developing/previewing.md
rename to versioned_docs/version-v7/developing/previewing.mdx
index d3e3e513fa5..fa7a153af01 100644
--- a/versioned_docs/version-v7/developing/previewing.md
+++ b/versioned_docs/version-v7/developing/previewing.mdx
@@ -12,9 +12,9 @@ title: Previewing
 
 There are many different options to test native functionality depending on your target platforms and needs.
 
-- Run locally in a web browser (using [Platform Detection](../core-concepts/cross-platform.md) for native functionality)
-- [Deploy to iOS](ios.md)
-- [Deploy to Android](android.md)
+- Run locally in a web browser (using [Platform Detection](../core-concepts/cross-platform.mdx) for native functionality)
+- [Deploy to iOS](ios.mdx)
+- [Deploy to Android](android.mdx)
 
 ## Run Locally in a Web Browser
 
@@ -44,8 +44,8 @@ If the external link isn't listed on the terminal, then run `ionic serve --exter
 
 :::
 
-When implementing native functionality, use [Platform Detection](../core-concepts/cross-platform.md).
-When you're ready to test on a real device, 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).
 
 ## Simulating a Mobile Viewport
 
diff --git a/versioned_docs/version-v7/developing/scaffolding.md b/versioned_docs/version-v7/developing/scaffolding.mdx
similarity index 92%
rename from versioned_docs/version-v7/developing/scaffolding.md
rename to versioned_docs/version-v7/developing/scaffolding.mdx
index 740d913a196..fbf979809f1 100644
--- a/versioned_docs/version-v7/developing/scaffolding.md
+++ b/versioned_docs/version-v7/developing/scaffolding.mdx
@@ -48,7 +48,7 @@ The `src/app/` directory contains the root app component and module as well as a
 This command is only supported in Ionic Angular.
 :::
 
-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
@@ -92,4 +92,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-v7/developing/starting.md b/versioned_docs/version-v7/developing/starting.mdx
similarity index 100%
rename from versioned_docs/version-v7/developing/starting.md
rename to versioned_docs/version-v7/developing/starting.mdx
diff --git a/versioned_docs/version-v7/developing/tips.md b/versioned_docs/version-v7/developing/tips.mdx
similarity index 98%
rename from versioned_docs/version-v7/developing/tips.md
rename to versioned_docs/version-v7/developing/tips.mdx
index 1071960531f..19f9ac7babe 100644
--- a/versioned_docs/version-v7/developing/tips.md
+++ b/versioned_docs/version-v7/developing/tips.mdx
@@ -131,7 +131,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-v7/index.md b/versioned_docs/version-v7/index.mdx
similarity index 86%
rename from versioned_docs/version-v7/index.md
rename to versioned_docs/version-v7/index.mdx
index f11135453a8..7359c573265 100644
--- a/versioned_docs/version-v7/index.md
+++ b/versioned_docs/version-v7/index.mdx
@@ -22,9 +22,9 @@ import DocsCards from '@components/global/DocsCards';
   <meta property="og:url" content="https://ionicframework.com/docs" />
 </head>
 
-Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.md), [React](react.md), and [Vue](vue/overview.md).
+Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.mdx), [React](react.md), and [Vue](vue/overview.mdx).
 
-Get started building by [installing Ionic](intro/cli.md) or following our [First App Tutorial](intro/next.md#build-your-first-app) to learn the main concepts.
+Get started building by [installing Ionic](intro/cli.mdx) or following our [First App Tutorial](intro/next.mdx#build-your-first-app) to learn the main concepts.
 
 <intro-end />
 
@@ -58,11 +58,11 @@ Get started building by [installing Ionic](intro/cli.md) or following our [First
 
 ## Overview
 
-Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.md), [React](react.md), or [Vue](vue/overview.md). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.md). If you’d like to learn more about Ionic before diving in, we <a href="https://youtu.be/p3AN3igqiRc" target="_blank">created a video</a> to walk you through the basics.
+Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.mdx), [React](react.md), or [Vue](vue/overview.mdx). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.mdx). If you’d like to learn more about Ionic before diving in, we <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
 
@@ -84,7 +84,7 @@ Build and deploy apps that work across multiple platforms, such as native iOS, A
 
 ### Web Standards-based
 
-Ionic is built on top of reliable, [standardized web technologies](reference/glossary.md#web-standards): HTML, CSS, and JavaScript, using modern Web APIs such as Custom Elements and Shadow DOM. Because of this, Ionic components have a stable API, and aren't at the whim of a single platform vendor.
+Ionic is built on top of reliable, [standardized web technologies](reference/glossary.mdx#web-standards): HTML, CSS, and JavaScript, using modern Web APIs such as Custom Elements and Shadow DOM. Because of this, Ionic components have a stable API, and aren't at the whim of a single platform vendor.
 
 ### Beautiful Design
 
@@ -121,7 +121,7 @@ Support for other frameworks will be considered in future releases.
 
 ## Ionic CLI
 
-The official [Ionic CLI](cli.md), or Command Line Interface, is a tool that quickly scaffolds Ionic apps and provides a number of helpful commands to Ionic developers. In addition to installing and updating Ionic, the CLI comes with a built-in development server, build and debugging tools, and much more. If you are an [Appflow](#appflow) member, the CLI can be used to perform cloud builds and deployments, and administer your account.
+The official [Ionic CLI](cli.mdx), or Command Line Interface, is a tool that quickly scaffolds Ionic apps and provides a number of helpful commands to Ionic developers. In addition to installing and updating Ionic, the CLI comes with a built-in development server, build and debugging tools, and much more. If you are an [Appflow](#appflow) member, the CLI can be used to perform cloud builds and deployments, and administer your account.
 
 ## Appflow
 
diff --git a/versioned_docs/version-v7/intro/cdn.md b/versioned_docs/version-v7/intro/cdn.mdx
similarity index 94%
rename from versioned_docs/version-v7/intro/cdn.md
rename to versioned_docs/version-v7/intro/cdn.mdx
index a90c4a6b250..f45acec8d0f 100644
--- a/versioned_docs/version-v7/intro/cdn.md
+++ b/versioned_docs/version-v7/intro/cdn.mdx
@@ -33,13 +33,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-v7/intro/cli.md b/versioned_docs/version-v7/intro/cli.mdx
similarity index 79%
rename from versioned_docs/version-v7/intro/cli.md
rename to versioned_docs/version-v7/intro/cli.mdx
index 38a8a37e4b8..2e304c50a65 100644
--- a/versioned_docs/version-v7/intro/cli.md
+++ b/versioned_docs/version-v7/intro/cli.mdx
@@ -13,13 +13,13 @@ import AppWizard from '@components/page/intro/AppWizard';
   />
 </head>
 
-Ionic apps are created and developed primarily through the Ionic [command-line](../reference/glossary.md#cli) utility. The Ionic CLI is the preferred method of installation, as it offers a wide range of dev tools and help options along the way. It is also the main tool through which to run the app and connect it to other services, such as Appflow.
+Ionic apps are created and developed primarily through the Ionic [command-line](../reference/glossary.mdx#cli) utility. The Ionic CLI is the preferred method of installation, as it offers a wide range of dev tools and help options along the way. It is also the main tool through which to run the app and connect it to other services, such as Appflow.
 
 <AppWizard />
 
 ## Install the Ionic CLI
 
-Before proceeding, make sure your computer has [Node.js](../reference/glossary.md#node) installed. 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:
 
@@ -37,7 +37,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
@@ -50,7 +50,7 @@ ionic start
 
 ![Three thumbnail previews of Ionic app templates: blank, tabs, and side menu.](/img/installation/start-app-thumbnails.png 'Ionic App Starter Templates')
 
-To learn more about starting Ionic apps, see the [Starting Guide](../developing/starting.md).
+To learn more about starting Ionic apps, see the [Starting Guide](../developing/starting.mdx).
 
 ## Run the App
 
@@ -61,4 +61,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-v7/intro/environment.md b/versioned_docs/version-v7/intro/environment.mdx
similarity index 86%
rename from versioned_docs/version-v7/intro/environment.md
rename to versioned_docs/version-v7/intro/environment.mdx
index 476dda2acf1..d1f118bc5a7 100644
--- a/versioned_docs/version-v7/intro/environment.md
+++ b/versioned_docs/version-v7/intro/environment.mdx
@@ -29,9 +29,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:
 
@@ -41,12 +41,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-v7/intro/first-app.md b/versioned_docs/version-v7/intro/first-app.mdx
similarity index 100%
rename from versioned_docs/version-v7/intro/first-app.md
rename to versioned_docs/version-v7/intro/first-app.mdx
diff --git a/versioned_docs/version-v7/intro/next.md b/versioned_docs/version-v7/intro/next.mdx
similarity index 100%
rename from versioned_docs/version-v7/intro/next.md
rename to versioned_docs/version-v7/intro/next.mdx
diff --git a/versioned_docs/version-v7/intro/vscode-extension.md b/versioned_docs/version-v7/intro/vscode-extension.mdx
similarity index 100%
rename from versioned_docs/version-v7/intro/vscode-extension.md
rename to versioned_docs/version-v7/intro/vscode-extension.mdx
diff --git a/versioned_docs/version-v7/layout/css-utilities.md b/versioned_docs/version-v7/layout/css-utilities.mdx
similarity index 98%
rename from versioned_docs/version-v7/layout/css-utilities.md
rename to versioned_docs/version-v7/layout/css-utilities.mdx
index 21bf56b8d4c..5084e867fbf 100644
--- a/versioned_docs/version-v7/layout/css-utilities.md
+++ b/versioned_docs/version-v7/layout/css-utilities.mdx
@@ -15,7 +15,7 @@ inlineHtmlPreviews: true
 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
@@ -232,7 +232,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>
@@ -282,7 +282,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-v7/layout/dynamic-font-scaling.md b/versioned_docs/version-v7/layout/dynamic-font-scaling.mdx
similarity index 99%
rename from versioned_docs/version-v7/layout/dynamic-font-scaling.md
rename to versioned_docs/version-v7/layout/dynamic-font-scaling.mdx
index d27c621f850..3b38c247668 100644
--- a/versioned_docs/version-v7/layout/dynamic-font-scaling.md
+++ b/versioned_docs/version-v7/layout/dynamic-font-scaling.mdx
@@ -14,7 +14,7 @@ If you are testing on Chrome for Android, make sure ["Accessibility Page Zoom"](
 
 Follow the [Changing the Font Size on a Device](#changing-the-font-size-on-a-device) guide to set your preferred font size, and watch the text in the demo below grow or shrink according to your preferences.
 
-import DynamicFontScaling from '@site/static/usage/v7/layout/dynamic-font-scaling/index.md';
+import DynamicFontScaling from '@site/static/usage/v7/layout/dynamic-font-scaling/index.mdx';
 
 <DynamicFontScaling />
 
diff --git a/versioned_docs/version-v7/layout/global-stylesheets.md b/versioned_docs/version-v7/layout/global-stylesheets.mdx
similarity index 81%
rename from versioned_docs/version-v7/layout/global-stylesheets.md
rename to versioned_docs/version-v7/layout/global-stylesheets.mdx
index a271094eafe..bad01403029 100644
--- a/versioned_docs/version-v7/layout/global-stylesheets.md
+++ b/versioned_docs/version-v7/layout/global-stylesheets.mdx
@@ -46,28 +46,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-v7/layout/structure.md b/versioned_docs/version-v7/layout/structure.mdx
similarity index 57%
rename from versioned_docs/version-v7/layout/structure.md
rename to versioned_docs/version-v7/layout/structure.mdx
index 700e77372fa..9e981ddad62 100644
--- a/versioned_docs/version-v7/layout/structure.md
+++ b/versioned_docs/version-v7/layout/structure.mdx
@@ -20,9 +20,9 @@ Ionic Framework provides several different layouts that can be used to structure
 
 ### Header
 
-The most simple layout available consists of a [header](../api/header.md) and [content](../api/content.md). Most pages in an app generally have both of these, but a header is not required in order to use content.
+The most simple layout available consists of a [header](../api/header.mdx) and [content](../api/content.mdx). Most pages in an app generally have both of these, but a header is not required in order to use content.
 
-import Header from '@site/static/usage/v7/header/basic/index.md';
+import Header from '@site/static/usage/v7/header/basic/index.mdx';
 
 <Header />
 
@@ -30,34 +30,34 @@ import Header from '@site/static/usage/v7/header/basic/index.md';
 
 While a toolbar in a header appears above the content, a footer appears below the content. A header and a footer can also be used together on the same page.
 
-import Footer from '@site/static/usage/v7/footer/basic/index.md';
+import Footer from '@site/static/usage/v7/footer/basic/index.mdx';
 
 <Footer />
 
 ## Tabs Layout
 
-A layout consisting of horizontal [tabs](../api/tabs.md) can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using a [router outlet](../api/router-outlet.md) or [nav](../api/nav.md).
+A layout consisting of horizontal [tabs](../api/tabs.mdx) can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using a [router outlet](../api/router-outlet.mdx) or [nav](../api/nav.mdx).
 
-import Tabs from '@site/static/usage/v7/tabs/router/index.md';
+import Tabs from '@site/static/usage/v7/tabs/router/index.mdx';
 
 <Tabs />
 
 ## Menu Layout
 
-A standard layout among mobile apps includes the ability to toggle a side [menu](../api/menu.md) by clicking a button or swiping it open from the side. Side menus are generally used for navigation, but they can contain any content.
+A standard layout among mobile apps includes the ability to toggle a side [menu](../api/menu.mdx) by clicking a button or swiping it open from the side. Side menus are generally used for navigation, but they can contain any content.
 
-import Menu from '@site/static/usage/v7/menu/basic/index.md';
+import Menu from '@site/static/usage/v7/menu/basic/index.mdx';
 
 <Menu />
 
 ## Split Pane Layout
 
-A [split pane](../api/split-pane.md) layout has a more complex structure because it can combine the previous layouts. It allows for multiple views to be displayed when the viewport is above a specified breakpoint. If the device's screen size is below a certain size, the split pane view will be hidden.
+A [split pane](../api/split-pane.mdx) layout has a more complex structure because it can combine the previous layouts. It allows for multiple views to be displayed when the viewport is above a specified breakpoint. If the device's screen size is below a certain size, the split pane view will be hidden.
 
 By default, the split pane view will show when the screen is larger than `768px`, or the `md` breakpoint, but this can be customized to use different breakpoints by setting the `when` property. Below is an example where the split pane contains a menu that is visible for `xs` screens and up, or when the viewport is larger than `0px`. This will show the split pane for all screen sizes.
 
-It's important to note that the element with the `id` matching the `contentId` specified by the split pane will be the main content that is always visible. This can be any element, including a [nav](../api/nav.md), [router outlet](../api/router-outlet.md), or [tabs](../api/tabs.md).
+It's important to note that the element with the `id` matching the `contentId` specified by the split pane will be the main content that is always visible. This can be any element, including a [nav](../api/nav.mdx), [router outlet](../api/router-outlet.mdx), or [tabs](../api/tabs.mdx).
 
-import SplitPane from '@site/static/usage/v7/split-pane/basic/index.md';
+import SplitPane from '@site/static/usage/v7/split-pane/basic/index.mdx';
 
 <SplitPane />
diff --git a/versioned_docs/version-v7/native-faq.md b/versioned_docs/version-v7/native-faq.mdx
similarity index 100%
rename from versioned_docs/version-v7/native-faq.md
rename to versioned_docs/version-v7/native-faq.mdx
diff --git a/versioned_docs/version-v7/native-setup.md b/versioned_docs/version-v7/native-setup.mdx
similarity index 97%
rename from versioned_docs/version-v7/native-setup.md
rename to versioned_docs/version-v7/native-setup.mdx
index 26a5469f3f9..640a195f911 100644
--- a/versioned_docs/version-v7/native-setup.md
+++ b/versioned_docs/version-v7/native-setup.mdx
@@ -37,7 +37,7 @@ $ npm install @capacitor/camera
 
 Once installed, plugins can be imported into a component and you can call the native functionality directly from your code.
 
-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
diff --git a/versioned_docs/version-v7/native.md b/versioned_docs/version-v7/native.mdx
similarity index 100%
rename from versioned_docs/version-v7/native.md
rename to versioned_docs/version-v7/native.mdx
diff --git a/versioned_docs/version-v7/react/add-to-existing.md b/versioned_docs/version-v7/react/add-to-existing.mdx
similarity index 92%
rename from versioned_docs/version-v7/react/add-to-existing.md
rename to versioned_docs/version-v7/react/add-to-existing.mdx
index eee23e0f10c..858c520f977 100644
--- a/versioned_docs/version-v7/react/add-to-existing.md
+++ b/versioned_docs/version-v7/react/add-to-existing.mdx
@@ -14,7 +14,7 @@ import DocsCards from '@components/global/DocsCards';
   />
 </head>
 
-This guide covers how to add Ionic React to an existing React project. If you're looking to start a new project from scratch, check out the [Ionic React Quickstart](/docs/react/quickstart.md) guide. For an overview of how Ionic React works with React, including version support and tooling, check out the [Ionic React Overview](/docs/react/overview.md).
+This guide covers how to add Ionic React to an existing React project. If you're looking to start a new project from scratch, check out the [Ionic React Quickstart](/docs/react/quickstart.mdx) guide. For an overview of how Ionic React works with React, including version support and tooling, check out the [Ionic React Overview](/docs/react/overview.mdx).
 
 :::tip
 
@@ -64,7 +64,7 @@ setupIonicReact();
 
 :::info
 
-While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.md).
+While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.mdx).
 
 :::
 
@@ -98,7 +98,7 @@ const App: React.FC = () => (
 export default App;
 ```
 
-Visit the [components](/docs/components.md) page for all of the available Ionic components.
+Visit the [components](/docs/components.mdx) page for all of the available Ionic components.
 
 :::tip
 
@@ -132,7 +132,7 @@ import '@ionic/react/css/flex-utils.css';
 import '@ionic/react/css/display.css';
 ```
 
-These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.md) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.md).
+These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.mdx) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.mdx).
 
 #### 2. Set up Theming
 
@@ -169,7 +169,7 @@ setupIonicReact();
 // ...existing app function and export...
 ```
 
-The `variables.css` file can be used to create custom Ionic Framework themes. The `dark.system.css` import enables [dark mode support](/docs/theming/dark-mode.md) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables to `theme/variables.css`.
+The `variables.css` file can be used to create custom Ionic Framework themes. The `dark.system.css` import enables [dark mode support](/docs/theming/dark-mode.mdx) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables to `theme/variables.css`.
 
 #### 3. Update the App Component
 
diff --git a/versioned_docs/version-v7/react/lifecycle.md b/versioned_docs/version-v7/react/lifecycle.mdx
similarity index 100%
rename from versioned_docs/version-v7/react/lifecycle.md
rename to versioned_docs/version-v7/react/lifecycle.mdx
diff --git a/versioned_docs/version-v7/react/navigation.md b/versioned_docs/version-v7/react/navigation.mdx
similarity index 100%
rename from versioned_docs/version-v7/react/navigation.md
rename to versioned_docs/version-v7/react/navigation.mdx
diff --git a/versioned_docs/version-v7/react/overlays.md b/versioned_docs/version-v7/react/overlays.mdx
similarity index 100%
rename from versioned_docs/version-v7/react/overlays.md
rename to versioned_docs/version-v7/react/overlays.mdx
diff --git a/versioned_docs/version-v7/react/overview.md b/versioned_docs/version-v7/react/overview.mdx
similarity index 100%
rename from versioned_docs/version-v7/react/overview.md
rename to versioned_docs/version-v7/react/overview.mdx
diff --git a/versioned_docs/version-v7/react/performance.md b/versioned_docs/version-v7/react/performance.mdx
similarity index 100%
rename from versioned_docs/version-v7/react/performance.md
rename to versioned_docs/version-v7/react/performance.mdx
diff --git a/versioned_docs/version-v7/react/platform.md b/versioned_docs/version-v7/react/platform.mdx
similarity index 100%
rename from versioned_docs/version-v7/react/platform.md
rename to versioned_docs/version-v7/react/platform.mdx
diff --git a/versioned_docs/version-v7/react/pwa.md b/versioned_docs/version-v7/react/pwa.mdx
similarity index 100%
rename from versioned_docs/version-v7/react/pwa.md
rename to versioned_docs/version-v7/react/pwa.mdx
diff --git a/versioned_docs/version-v7/react/quickstart.md b/versioned_docs/version-v7/react/quickstart.mdx
similarity index 93%
rename from versioned_docs/version-v7/react/quickstart.md
rename to versioned_docs/version-v7/react/quickstart.mdx
index 98fd16579ee..0809bfb10f7 100644
--- a/versioned_docs/version-v7/react/quickstart.md
+++ b/versioned_docs/version-v7/react/quickstart.mdx
@@ -156,15 +156,15 @@ const Home: React.FC = () => {
 export default Home;
 ```
 
-This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
+This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/docs/api/title.mdx#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
 :::tip[Learn More]
-For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
+For detailed information about Ionic layout components, see the [Header](/docs/api/header.mdx), [Toolbar](/docs/api/toolbar.mdx), [Title](/docs/api/title.mdx), and [Content](/docs/api/content.mdx) documentation.
 :::
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, import and add a [Button](/docs/api/button.md) at the end of the `IonContent` in `Home.tsx`:
+You can enhance your Home page with more Ionic UI components. For example, import and add a [Button](/docs/api/button.mdx) at the end of the `IonContent` in `Home.tsx`:
 
 ```tsx title="src/pages/Home.tsx"
 import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
@@ -222,7 +222,7 @@ const New: React.FC = () => {
 export default New;
 ```
 
-This creates a page with a [Back Button](/docs/api/back-button.md) in the [Toolbar](/docs/api/toolbar.md). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
+This creates a page with a [Back Button](/docs/api/back-button.mdx) in the [Toolbar](/docs/api/toolbar.mdx). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
 
 :::warning
 When creating your own pages, always use `IonPage` as the root component. This is essential for proper transitions between pages, base CSS styling that Ionic components depend on, and consistent layout behavior across your app.
@@ -259,7 +259,7 @@ Once that is done, update the button in `Home.tsx`:
 ```
 
 :::info
-Navigating can also be performed programmatically using React Router's `history` prop. See the [React Navigation documentation](/docs/react/navigation.md#navigating-using-history) for more information.
+Navigating can also be performed programmatically using React Router's `history` prop. See the [React Navigation documentation](/docs/react/navigation.mdx#navigating-using-history) for more information.
 :::
 
 ## Add Icons to the New Page
@@ -282,7 +282,7 @@ Then, include them inside of the `IonContent`:
 
 Note that we are passing the imported SVG reference, **not** the icon name as a string.
 
-For more information, see the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
+For more information, see the [Icon documentation](/docs/api/icon.mdx) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
 ## Call Component Methods
 
@@ -335,7 +335,7 @@ To call methods on Ionic components:
 
 This pattern is necessary because React refs store the component instance in the `.current` property.
 
-You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation.
+You can find available methods for each component in the [Methods](/docs/api/content.mdx#methods) section of their API documentation.
 
 ## Run on a Device
 
diff --git a/versioned_docs/version-v7/react/slides.md b/versioned_docs/version-v7/react/slides.mdx
similarity index 100%
rename from versioned_docs/version-v7/react/slides.md
rename to versioned_docs/version-v7/react/slides.mdx
diff --git a/versioned_docs/version-v7/react/storage.md b/versioned_docs/version-v7/react/storage.mdx
similarity index 100%
rename from versioned_docs/version-v7/react/storage.md
rename to versioned_docs/version-v7/react/storage.mdx
diff --git a/versioned_docs/version-v7/react/testing/introduction.md b/versioned_docs/version-v7/react/testing/introduction.mdx
similarity index 100%
rename from versioned_docs/version-v7/react/testing/introduction.md
rename to versioned_docs/version-v7/react/testing/introduction.mdx
diff --git a/versioned_docs/version-v7/react/testing/unit-testing/best-practices.md b/versioned_docs/version-v7/react/testing/unit-testing/best-practices.mdx
similarity index 100%
rename from versioned_docs/version-v7/react/testing/unit-testing/best-practices.md
rename to versioned_docs/version-v7/react/testing/unit-testing/best-practices.mdx
diff --git a/versioned_docs/version-v7/react/testing/unit-testing/examples.md b/versioned_docs/version-v7/react/testing/unit-testing/examples.mdx
similarity index 100%
rename from versioned_docs/version-v7/react/testing/unit-testing/examples.md
rename to versioned_docs/version-v7/react/testing/unit-testing/examples.mdx
diff --git a/versioned_docs/version-v7/react/testing/unit-testing/setup.md b/versioned_docs/version-v7/react/testing/unit-testing/setup.mdx
similarity index 100%
rename from versioned_docs/version-v7/react/testing/unit-testing/setup.md
rename to versioned_docs/version-v7/react/testing/unit-testing/setup.mdx
diff --git a/versioned_docs/version-v7/react/virtual-scroll.md b/versioned_docs/version-v7/react/virtual-scroll.mdx
similarity index 100%
rename from versioned_docs/version-v7/react/virtual-scroll.md
rename to versioned_docs/version-v7/react/virtual-scroll.mdx
diff --git a/versioned_docs/version-v7/react/your-first-app.md b/versioned_docs/version-v7/react/your-first-app.mdx
similarity index 94%
rename from versioned_docs/version-v7/react/your-first-app.md
rename to versioned_docs/version-v7/react/your-first-app.mdx
index 539c40fff27..3c5ec7a40ba 100644
--- a/versioned_docs/version-v7/react/your-first-app.md
+++ b/versioned_docs/version-v7/react/your-first-app.mdx
@@ -30,9 +30,9 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
 
 Highlights include:
 
-- One React-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.md).
+- One React-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.mdx).
 - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
-- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs.
+- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.mdx), [Filesystem](../native/filesystem.mdx), and [Preferences](../native/preferences.mdx) APIs.
 
 Find the [complete app code](https://github.com/ionic-team/tutorial-photo-gallery-react) referenced in this guide on GitHub.
 
@@ -61,7 +61,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
@@ -88,7 +88,7 @@ npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
 
 ### PWA Elements
 
-Some Capacitor plugins, including the [Camera API](../native/camera.md), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements).
+Some Capacitor plugins, including the [Camera API](../native/camera.mdx), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements).
 
 It's a separate dependency, so install it next:
 
@@ -165,7 +165,7 @@ const Tab2: React.FC = () => {
 export default Tab2;
 ```
 
-`IonHeader` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.md#collapsible-large-titles) support). Let’s rename both `IonTitle` elements to:
+`IonHeader` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.mdx#collapsible-large-titles) support). Let’s rename both `IonTitle` elements to:
 
 ```tsx
 <IonPage>
@@ -188,7 +188,7 @@ export default Tab2;
 </IonPage>
 ```
 
-We put the visual aspects of our app into `<IonContent>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.md) (FAB) to the bottom of the page and set the camera image as the icon.
+We put the visual aspects of our app into `<IonContent>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.mdx) (FAB) to the bottom of the page and set the camera image as the icon.
 
 ```tsx
 // CHANGE: Add the following import
diff --git a/versioned_docs/version-v7/react/your-first-app/2-taking-photos.md b/versioned_docs/version-v7/react/your-first-app/2-taking-photos.mdx
similarity index 95%
rename from versioned_docs/version-v7/react/your-first-app/2-taking-photos.md
rename to versioned_docs/version-v7/react/your-first-app/2-taking-photos.mdx
index 47ed7b3bc26..6ca19585f40 100644
--- a/versioned_docs/version-v7/react/your-first-app/2-taking-photos.md
+++ b/versioned_docs/version-v7/react/your-first-app/2-taking-photos.mdx
@@ -11,7 +11,7 @@ sidebar_label: Taking Photos
   />
 </head>
 
-Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.md). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android).
+Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.mdx). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android).
 
 ## Photo Gallery Hook
 
@@ -201,7 +201,7 @@ export interface UserPhoto {
 }
 ```
 
-Next, switch to `Tab2.tsx` to display the images. We'll add a [Grid component](../../api/grid.md) to ensure the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `UserPhoto`'s `photos` array. For each item, add an [Image component](../../api/img.md) and set its `src` property to the photo's path.
+Next, switch to `Tab2.tsx` to display the images. We'll add a [Grid component](../../api/grid.mdx) to ensure the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `UserPhoto`'s `photos` array. For each item, add an [Image component](../../api/img.mdx) and set its `src` property to the photo's path.
 
 ```tsx
 import { camera } from 'ionicons/icons';
diff --git a/versioned_docs/version-v7/react/your-first-app/3-saving-photos.md b/versioned_docs/version-v7/react/your-first-app/3-saving-photos.mdx
similarity index 99%
rename from versioned_docs/version-v7/react/your-first-app/3-saving-photos.md
rename to versioned_docs/version-v7/react/your-first-app/3-saving-photos.mdx
index f68985fb3cc..1188575ab8d 100644
--- a/versioned_docs/version-v7/react/your-first-app/3-saving-photos.md
+++ b/versioned_docs/version-v7/react/your-first-app/3-saving-photos.mdx
@@ -93,7 +93,7 @@ export interface UserPhoto {
 }
 ```
 
-We'll use the Capacitor [Filesystem API](../../native/filesystem.md) to save the photo. First, convert the photo to base64 format.
+We'll use the Capacitor [Filesystem API](../../native/filesystem.mdx) to save the photo. First, convert the photo to base64 format.
 
 Then, pass the data to the Filesystem's `writeFile` method. Recall that we display photos by setting the image's source path (`src`) to the `webviewPath` property. So, set the `webviewPath` and return the new `Photo` object.
 
diff --git a/versioned_docs/version-v7/react/your-first-app/4-loading-photos.md b/versioned_docs/version-v7/react/your-first-app/4-loading-photos.mdx
similarity index 98%
rename from versioned_docs/version-v7/react/your-first-app/4-loading-photos.md
rename to versioned_docs/version-v7/react/your-first-app/4-loading-photos.mdx
index 9ba92b607c2..a6f02ed3c8a 100644
--- a/versioned_docs/version-v7/react/your-first-app/4-loading-photos.md
+++ b/versioned_docs/version-v7/react/your-first-app/4-loading-photos.mdx
@@ -13,7 +13,7 @@ sidebar_label: Loading Photos
 
 We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery.
 
-Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](../../native/preferences.md) to store our array of Photos in a key-value store.
+Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](../../native/preferences.mdx) to store our array of Photos in a key-value store.
 
 ## Preferences API
 
diff --git a/versioned_docs/version-v7/react/your-first-app/5-adding-mobile.md b/versioned_docs/version-v7/react/your-first-app/5-adding-mobile.mdx
similarity index 96%
rename from versioned_docs/version-v7/react/your-first-app/5-adding-mobile.md
rename to versioned_docs/version-v7/react/your-first-app/5-adding-mobile.mdx
index 9585640b1f6..9fd5c8a78a7 100644
--- a/versioned_docs/version-v7/react/your-first-app/5-adding-mobile.md
+++ b/versioned_docs/version-v7/react/your-first-app/5-adding-mobile.mdx
@@ -17,7 +17,7 @@ Our photo gallery app won’t be complete until it runs on iOS, Android, and the
 
 Let’s start with making some small code changes - then our app will “just work” when we deploy it to a device.
 
-Import the Ionic [Platform API](../platform.md) into `usePhotoGallery.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile).
+Import the Ionic [Platform API](../platform.mdx) into `usePhotoGallery.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile).
 
 Add `isPlatform` to the imports at the top of the file to use the `isPlatform` method. `Capacitor` is also imported to help with file paths on mobile devices.
 
diff --git a/versioned_docs/version-v7/react/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v7/react/your-first-app/6-deploying-mobile.mdx
similarity index 100%
rename from versioned_docs/version-v7/react/your-first-app/6-deploying-mobile.md
rename to versioned_docs/version-v7/react/your-first-app/6-deploying-mobile.mdx
diff --git a/versioned_docs/version-v7/react/your-first-app/7-live-reload.md b/versioned_docs/version-v7/react/your-first-app/7-live-reload.mdx
similarity index 95%
rename from versioned_docs/version-v7/react/your-first-app/7-live-reload.md
rename to versioned_docs/version-v7/react/your-first-app/7-live-reload.mdx
index f7e769b77dc..7ce61f9e6dc 100644
--- a/versioned_docs/version-v7/react/your-first-app/7-live-reload.md
+++ b/versioned_docs/version-v7/react/your-first-app/7-live-reload.mdx
@@ -13,7 +13,7 @@ sidebar_label: Live Reload
 
 So far, we’ve seen how easy it is to develop a cross-platform app that works everywhere. The development experience is pretty quick, but what if I told you there was a way to go faster?
 
-We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.md) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
+We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.mdx) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
 
 ## Live Reload
 
@@ -179,7 +179,7 @@ const Tab2: React.FC = () => {
 export default Tab2;
 ```
 
-Add a click handler to the `<IonImg>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](../../api/action-sheet.md) dialog with the option to either delete the selected photo or cancel (close) the dialog.
+Add a click handler to the `<IonImg>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](../../api/action-sheet.mdx) dialog with the option to either delete the selected photo or cancel (close) the dialog.
 
 ```tsx
 <IonGrid>
diff --git a/versioned_docs/version-v7/react/your-first-app/8-distribute.md b/versioned_docs/version-v7/react/your-first-app/8-distribute.mdx
similarity index 97%
rename from versioned_docs/version-v7/react/your-first-app/8-distribute.md
rename to versioned_docs/version-v7/react/your-first-app/8-distribute.mdx
index 204b065650f..2299f49f9b1 100644
--- a/versioned_docs/version-v7/react/your-first-app/8-distribute.md
+++ b/versioned_docs/version-v7/react/your-first-app/8-distribute.mdx
@@ -102,6 +102,6 @@ For access to the ability to create a Native Configuration, you will need to be
 
 Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to your users' devices!
 
-There are many paths to follow from here. Try adding another [Ionic UI component](../../components.md) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
+There are many paths to follow from here. Try adding another [Ionic UI component](../../components.mdx) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
 
 Happy app building! 💙
diff --git a/versioned_docs/version-v7/reference/browser-support.md b/versioned_docs/version-v7/reference/browser-support.mdx
similarity index 94%
rename from versioned_docs/version-v7/reference/browser-support.md
rename to versioned_docs/version-v7/reference/browser-support.mdx
index 12a79e474b5..e02efe6819f 100644
--- a/versioned_docs/version-v7/reference/browser-support.md
+++ b/versioned_docs/version-v7/reference/browser-support.mdx
@@ -14,7 +14,7 @@ Ionic's earliest goal was to make it easy to develop mobile apps using web techn
 
 ## Mobile 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  |
 | :-------: | :--------------------: | :---: |
@@ -35,7 +35,7 @@ To figure out what version of the webview a device is running, log `window.navig
 
 ## 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 v7 | Ionic v6 | Ionic v5 | Ionic v4 |
 | :---------: | :------: | :------: | :------: | :------: |
diff --git a/versioned_docs/version-v7/reference/glossary.md b/versioned_docs/version-v7/reference/glossary.mdx
similarity index 100%
rename from versioned_docs/version-v7/reference/glossary.md
rename to versioned_docs/version-v7/reference/glossary.mdx
diff --git a/versioned_docs/version-v7/reference/release-notes.md b/versioned_docs/version-v7/reference/release-notes.mdx
similarity index 100%
rename from versioned_docs/version-v7/reference/release-notes.md
rename to versioned_docs/version-v7/reference/release-notes.mdx
diff --git a/versioned_docs/version-v7/reference/support.md b/versioned_docs/version-v7/reference/support.mdx
similarity index 99%
rename from versioned_docs/version-v7/reference/support.md
rename to versioned_docs/version-v7/reference/support.mdx
index 92ad85a42d5..d1776ff002c 100644
--- a/versioned_docs/version-v7/reference/support.md
+++ b/versioned_docs/version-v7/reference/support.mdx
@@ -113,4 +113,4 @@ Note that later versions of Ionic do not support iOS 13; see [mobile support tab
 |      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-v7/reference/versioning.md b/versioned_docs/version-v7/reference/versioning.mdx
similarity index 100%
rename from versioned_docs/version-v7/reference/versioning.md
rename to versioned_docs/version-v7/reference/versioning.mdx
diff --git a/versioned_docs/version-v7/techniques/security.md b/versioned_docs/version-v7/techniques/security.mdx
similarity index 100%
rename from versioned_docs/version-v7/techniques/security.md
rename to versioned_docs/version-v7/techniques/security.mdx
diff --git a/versioned_docs/version-v7/test/page1.md b/versioned_docs/version-v7/test/page1.md
deleted file mode 100644
index d965196cf5d..00000000000
--- a/versioned_docs/version-v7/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-v7/test/page1.mdx b/versioned_docs/version-v7/test/page1.mdx
new file mode 100644
index 00000000000..cd5b72410d0
--- /dev/null
+++ b/versioned_docs/version-v7/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-v7/test/page2.md b/versioned_docs/version-v7/test/page2.md
deleted file mode 100644
index 2d2d61adacf..00000000000
--- a/versioned_docs/version-v7/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-v7/test/page2.mdx b/versioned_docs/version-v7/test/page2.mdx
new file mode 100644
index 00000000000..5ebdef8dca0
--- /dev/null
+++ b/versioned_docs/version-v7/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-v7/theming/advanced.md b/versioned_docs/version-v7/theming/advanced.mdx
similarity index 96%
rename from versioned_docs/version-v7/theming/advanced.md
rename to versioned_docs/version-v7/theming/advanced.mdx
index bcf0b2b0747..51514954b03 100644
--- a/versioned_docs/version-v7/theming/advanced.md
+++ b/versioned_docs/version-v7/theming/advanced.mdx
@@ -64,8 +64,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
 
@@ -107,7 +107,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.
@@ -177,7 +177,7 @@ After running through the Sass compiler, the colors will have the following valu
 
 However, because CSS variables can be set at runtime and are more dynamic, it is not currently possible to manipulate them using a simple function.
 
-This is normally not a problem, but when an application needs to have dynamic theming it presents issues. In Ionic, this is the reason that there are [variations to each color](colors.md#layered-colors), and it is also why [stepped colors](themes.md#stepped-colors) are necessary for theming.
+This is normally not a problem, but when an application needs to have dynamic theming it presents issues. In Ionic, this is the reason that there are [variations to each color](colors.mdx#layered-colors), and it is also why [stepped colors](themes.mdx#stepped-colors) are necessary for theming.
 
 There are drafts and issues discussing [color modification proposals](https://github.com/w3c/csswg-drafts/issues/3187) that would make this possible.
 
diff --git a/versioned_docs/version-v7/theming/basics.md b/versioned_docs/version-v7/theming/basics.mdx
similarity index 90%
rename from versioned_docs/version-v7/theming/basics.md
rename to versioned_docs/version-v7/theming/basics.mdx
index d12f551ef1e..c8232fba559 100644
--- a/versioned_docs/version-v7/theming/basics.md
+++ b/versioned_docs/version-v7/theming/basics.mdx
@@ -19,7 +19,7 @@ Ionic Framework is built to be a blank slate that can easily be customized and m
 
 Ionic has nine default colors that can be used to change the color of many components. Each color is actually a collection of multiple properties, including a `shade` and `tint`, used throughout Ionic.
 
-When changing a color, it is important to set all of the related properties. This can be done easily with the [Color Generator](color-generator.md) tool, but these can also be manually written if desired. For more information on Ionic colors, 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 />
 
@@ -27,16 +27,16 @@ When changing a color, it is important to set all of the related properties. Thi
 
 Ionic components adapt their look and behavior based on the platform the app is running on. We call this <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-v7/theming/color-generator.md b/versioned_docs/version-v7/theming/color-generator.mdx
similarity index 100%
rename from versioned_docs/version-v7/theming/color-generator.md
rename to versioned_docs/version-v7/theming/color-generator.mdx
diff --git a/versioned_docs/version-v7/theming/colors.md b/versioned_docs/version-v7/theming/colors.mdx
similarity index 89%
rename from versioned_docs/version-v7/theming/colors.md
rename to versioned_docs/version-v7/theming/colors.mdx
index cadbed4bb94..292fdd5c84d 100644
--- a/versioned_docs/version-v7/theming/colors.md
+++ b/versioned_docs/version-v7/theming/colors.mdx
@@ -35,7 +35,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 />
 
@@ -57,10 +57,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
 
@@ -107,7 +107,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-v7/theming/css-shadow-parts.md b/versioned_docs/version-v7/theming/css-shadow-parts.mdx
similarity index 93%
rename from versioned_docs/version-v7/theming/css-shadow-parts.md
rename to versioned_docs/version-v7/theming/css-shadow-parts.mdx
index 7dcc2431bb3..9c079cf793f 100644
--- a/versioned_docs/version-v7/theming/css-shadow-parts.md
+++ b/versioned_docs/version-v7/theming/css-shadow-parts.mdx
@@ -17,7 +17,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.
@@ -61,7 +61,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).
 
@@ -103,11 +103,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.
 
@@ -119,7 +119,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-v7/theming/css-variables.md b/versioned_docs/version-v7/theming/css-variables.mdx
similarity index 94%
rename from versioned_docs/version-v7/theming/css-variables.md
rename to versioned_docs/version-v7/theming/css-variables.mdx
index 85b320b6392..f05098535ac 100644
--- a/versioned_docs/version-v7/theming/css-variables.md
+++ b/versioned_docs/version-v7/theming/css-variables.mdx
@@ -91,8 +91,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-v7/theming/dark-mode.md b/versioned_docs/version-v7/theming/dark-mode.mdx
similarity index 97%
rename from versioned_docs/version-v7/theming/dark-mode.md
rename to versioned_docs/version-v7/theming/dark-mode.mdx
index dbfc6f582c4..4d3d498961a 100644
--- a/versioned_docs/version-v7/theming/dark-mode.md
+++ b/versioned_docs/version-v7/theming/dark-mode.mdx
@@ -73,7 +73,7 @@ The demo below prioritizes the site's theme over the system settings. If your sy
 Not sure how to change the system settings? Here's [how to enable dark mode on Windows 11](https://support.microsoft.com/en-us/windows/change-colors-in-windows-d26ef4d6-819a-581c-1581-493cfcc005fe) and [how to enable it on a Mac](https://support.apple.com/en-us/HT208976).
 :::
 
-import AutomaticDarkMode from '@site/static/usage/v7/theming/automatic-dark-mode/index.md';
+import AutomaticDarkMode from '@site/static/usage/v7/theming/automatic-dark-mode/index.mdx';
 
 <AutomaticDarkMode />
 
@@ -81,7 +81,7 @@ import AutomaticDarkMode from '@site/static/usage/v7/theming/automatic-dark-mode
 
 In addition to adding the `dark` class to the `<body>` when the media query changes, the class can be added by the app, such as when a user changes a toggle, to switch between the light and dark themes:
 
-import ManualDarkMode from '@site/static/usage/v7/theming/manual-dark-mode/index.md';
+import ManualDarkMode from '@site/static/usage/v7/theming/manual-dark-mode/index.mdx';
 
 <ManualDarkMode />
 
@@ -108,25 +108,25 @@ color-scheme: light dark;
 For more information regarding `color-scheme`, please see the [Web.dev guide on color schemes](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).
 :::
 
 :::note
-For developers looking to customize the theme color under the status bar in Safari on iOS 15 or the toolbar in Safari on macOS, see [`theme-color` Meta](./advanced.md#theme-color-meta).
+For developers looking to customize the theme color under the status bar in Safari on iOS 15 or the toolbar in Safari on macOS, see [`theme-color` Meta](./advanced.mdx#theme-color-meta).
 :::
 
 ## 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.
 2. Setting variables for the dark theme on `ios` devices.
 3. Setting variables for the dark theme on `md` devices.
 
 The following code can be copied and pasted into an app's global CSS file to get Ionic's dark theme. We are [using the CSS media query](#using-media-queries) to enable dark mode. If older browser support is required, use the method described in the [combining with JavaScript](#combining-with-javascript) section.
 
 :::info
-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-v7/theming/platform-styles.md b/versioned_docs/version-v7/theming/platform-styles.mdx
similarity index 89%
rename from versioned_docs/version-v7/theming/platform-styles.md
rename to versioned_docs/version-v7/theming/platform-styles.mdx
index 77d0a5665fc..e58a1be4579 100644
--- a/versioned_docs/version-v7/theming/platform-styles.md
+++ b/versioned_docs/version-v7/theming/platform-styles.mdx
@@ -14,7 +14,7 @@ Ionic provides platform specific styles based on the device the application is r
 
 ## Ionic Modes
 
-Ionic uses **modes** to customize the look of components. Each **platform** has a default **mode**, but this can be overridden through the global [config](../developing/config.md). The following chart displays the default **mode** that is added to each **platform**:
+Ionic uses **modes** to customize the look of components. Each **platform** has a default **mode**, but this can be overridden through the global [config](../developing/config.mdx). The following chart displays the default **mode** that is added to each **platform**:
 
 | Platform  | Mode  | Description                                                                                                                      |
 | --------- | ----- | -------------------------------------------------------------------------------------------------------------------------------- |
@@ -28,7 +28,7 @@ For example, an app being viewed on an Android platform will use the `md` (Mater
 <html class="md"></html>
 ```
 
-_Note: The **platform** and the **mode** are not the same. The platform can be set to use any mode in the [config](../developing/config.md) of an app._
+_Note: The **platform** and the **mode** are not the same. The platform can be set to use any mode in the [config](../developing/config.mdx) of an app._
 
 ## Overriding Mode Styles
 
@@ -48,4 +48,4 @@ There are also many global CSS variables that can be used to override the styles
 }
 ```
 
-There are many global variables that can be overridden by mode, including [Ionic's color variables](colors.md), [theme variables](themes.md) and [global component variables](advanced.md).
+There are many global variables that can be overridden by mode, including [Ionic's color variables](colors.mdx), [theme variables](themes.mdx) and [global component variables](advanced.mdx).
diff --git a/versioned_docs/version-v7/theming/themes.md b/versioned_docs/version-v7/theming/themes.mdx
similarity index 97%
rename from versioned_docs/version-v7/theming/themes.md
rename to versioned_docs/version-v7/theming/themes.mdx
index 79408c5fa96..9ef41c9c685 100644
--- a/versioned_docs/version-v7/theming/themes.md
+++ b/versioned_docs/version-v7/theming/themes.mdx
@@ -19,7 +19,7 @@ Ionic provides several global variables that are used throughout components to c
 
 The application colors are used in multiple places in Ionic. These are useful for easily creating dark 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-v7/troubleshooting/build.md b/versioned_docs/version-v7/troubleshooting/build.mdx
similarity index 100%
rename from versioned_docs/version-v7/troubleshooting/build.md
rename to versioned_docs/version-v7/troubleshooting/build.mdx
diff --git a/versioned_docs/version-v7/troubleshooting/cors.md b/versioned_docs/version-v7/troubleshooting/cors.mdx
similarity index 100%
rename from versioned_docs/version-v7/troubleshooting/cors.md
rename to versioned_docs/version-v7/troubleshooting/cors.mdx
diff --git a/versioned_docs/version-v7/troubleshooting/debugging.md b/versioned_docs/version-v7/troubleshooting/debugging.mdx
similarity index 99%
rename from versioned_docs/version-v7/troubleshooting/debugging.md
rename to versioned_docs/version-v7/troubleshooting/debugging.mdx
index 326f1513653..6447e088645 100644
--- a/versioned_docs/version-v7/troubleshooting/debugging.md
+++ b/versioned_docs/version-v7/troubleshooting/debugging.mdx
@@ -21,7 +21,7 @@ title: Debugging
 
 ## Live Reload
 
-Live Reload is useful for debugging native functionality (such as plugins) on device hardware. Rather than deploy a new native binary each time you make a code change, it reloads the browser (or WebView) when changes in the app are detected. [Learn more 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-v7/troubleshooting/native.md b/versioned_docs/version-v7/troubleshooting/native.mdx
similarity index 97%
rename from versioned_docs/version-v7/troubleshooting/native.md
rename to versioned_docs/version-v7/troubleshooting/native.mdx
index 460266fbc4f..e0680cf3c53 100644
--- a/versioned_docs/version-v7/troubleshooting/native.md
+++ b/versioned_docs/version-v7/troubleshooting/native.mdx
@@ -18,7 +18,7 @@ Code Signing Error: Failed to create provisioning profile. The app ID "com.csfor
 
 Running an app on an iOS device requires a provisioning profile. If a provisioning profile has not been created yet follow these directions:
 
-1. **Set the [Package ID](../reference/glossary.md#package-id).**
+1. **Set the [Package ID](../reference/glossary.mdx#package-id).**
 
    For Capacitor, open the `capacitor.config.json` file and modify the `appId` property.
 
@@ -48,7 +48,7 @@ Running an app on an iOS device requires a provisioning profile. If a provisioni
 Error: Error code 65 for command: xcodebuild with args: -xcconfig,/Users/ionitron/projects/my-project/platforms/ios/cordova/build-debug.xcconfig,-workspace,SC project.xcworkspace,-scheme,SC project,-configuration,Debug,-sdk,iphonesimulator,-destination,platform=iOS Simulator,name=iPhone X,build,CONFIGURATION_BUILD_DIR=/Users/ionitron/projects/my-project/platforms/ios/build/emulator,SHARED_PRECOMPS_DIR=/Users/ionitron/projects/my-project/platforms/ios/build/sharedpch
 ```
 
-This error is an error code from Xcode that can be caused by provisioning issues or outdated cordova dependencies. To fix this error first make sure a provisioning profile has been generated using the above instructions and then try to [run the app from Xcode](../developing/ios.md#running-with-xcode).
+This error is an error code from Xcode that can be caused by provisioning issues or outdated cordova dependencies. To fix this error first make sure a provisioning profile has been generated using the above instructions and then try to [run the app from Xcode](../developing/ios.mdx#running-with-xcode).
 
 If this does not fix the error then run the following commands:
 
diff --git a/versioned_docs/version-v7/troubleshooting/runtime.md b/versioned_docs/version-v7/troubleshooting/runtime.mdx
similarity index 100%
rename from versioned_docs/version-v7/troubleshooting/runtime.md
rename to versioned_docs/version-v7/troubleshooting/runtime.mdx
diff --git a/versioned_docs/version-v7/updating/4-0.md b/versioned_docs/version-v7/updating/4-0.mdx
similarity index 96%
rename from versioned_docs/version-v7/updating/4-0.md
rename to versioned_docs/version-v7/updating/4-0.mdx
index f471955ba7b..5392959c7b5 100644
--- a/versioned_docs/version-v7/updating/4-0.md
+++ b/versioned_docs/version-v7/updating/4-0.mdx
@@ -19,7 +19,7 @@ For a **complete list of breaking changes** from Ionic 3 to Ionic 4, please refe
 
 We suggest the following general process when migrating an existing application from Ionic 3 to 4:
 
-1. Generate a new project using the `blank` starter (see [Starting an App](../developing/starting.md))
+1. Generate a new project using the `blank` starter (see [Starting an App](../developing/starting.mdx))
 1. Copy any Angular services from `src/providers` to `src/app/services`
    - Services should include `{ providedIn: 'root' }` in the `@Injectable()` decorator. For details, please see Angular [provider docs](https://angular.io/guide/providers).
 1. Copy the app's other root-level items (pipes, components, etc) keeping in mind that the directory structure changes from `src/components` to `src/app/components`, etc.
@@ -146,7 +146,7 @@ With V4, we're now able to utilize the typical events provided by [Angular](http
 
 Older events like `ionViewDidLoad`, `ionViewCanLeave`, and `ionViewCanEnter` have been removed, and the proper Angular alternatives should be used.
 
-For more details, check out the [router-outlet docs](../api/router-outlet.md)
+For more details, check out the [router-outlet docs](../api/router-outlet.mdx)
 
 ### Overlay Components
 
@@ -192,7 +192,7 @@ In V4, navigation received the most changes. Now, instead of using Ionic's own `
 
 To provide the platform-specific animations that users are used to, we have created `ion-router-outlet` for Angular Apps. This behaves in a similar manner to Angular's `router-outlet` but provides a stack-based navigation (tabs) and animations.
 
-For a detailed explanation in navigation works in a V4 project, check out the [Angular navigation guide](../angular/navigation.md).
+For a detailed explanation in navigation works in a V4 project, check out the [Angular navigation guide](../angular/navigation.mdx).
 
 ### Lazy Loading
 
@@ -242,7 +242,7 @@ export class HomePageModule {}
 export class AppModule {}
 ```
 
-For a detailed explanation of lazy loading in V4 project, check out the [Angular navigation guide](../angular/navigation.md#lazy-loading-routes).
+For a detailed explanation of lazy loading in V4 project, check out the [Angular navigation guide](../angular/navigation.mdx#lazy-loading-routes).
 
 ### Markup Changes
 
@@ -261,7 +261,7 @@ One upside is that for the most part, the Ionic UI components you know and love
 Here are some considerations to review before beginning the upgrade:
 
 - **App complexity**: Naturally, the larger and more complex the app is, the longer it will take to migrate.
-- **Framework support**: In 2019, Ionic will release full support for React. You can also use Ionic Framework components [without a framework](../intro/cdn.md). Since these are not production-ready yet, we recommend sticking with Angular or waiting until the other framework support is available.
+- **Framework support**: In 2019, Ionic will release full support for React. You can also use Ionic Framework components [without a framework](../intro/cdn.mdx). Since these are not production-ready yet, we recommend sticking with Angular or waiting until the other framework support is available.
 - **Budget and team makeup**: The length of a migration project will vary based on the size of your team, the complexity of the app, and the amount of time allotted to make the transition.
 
 ### Suggested Strategy
@@ -278,7 +278,7 @@ Please reference official [Angular upgrade guide](https://angular.io/guide/upgra
 
 ### Ionic Changes
 
-Our Ionic 3 to Ionic 4 migration sections above may prove to be a useful reference. Generate a new Ionic 4 project using the blank starter (see [Starting an App](../developing/starting.md)). Spend time getting familiar with Ionic 4 components. Happy building!
+Our Ionic 3 to Ionic 4 migration sections above may prove to be a useful reference. Generate a new Ionic 4 project using the blank starter (see [Starting an App](../developing/starting.mdx)). Spend time getting familiar with Ionic 4 components. Happy building!
 
 ### Need Assistance?
 
diff --git a/versioned_docs/version-v7/updating/5-0.md b/versioned_docs/version-v7/updating/5-0.mdx
similarity index 100%
rename from versioned_docs/version-v7/updating/5-0.md
rename to versioned_docs/version-v7/updating/5-0.mdx
diff --git a/versioned_docs/version-v7/updating/6-0.md b/versioned_docs/version-v7/updating/6-0.mdx
similarity index 100%
rename from versioned_docs/version-v7/updating/6-0.md
rename to versioned_docs/version-v7/updating/6-0.mdx
diff --git a/versioned_docs/version-v7/updating/7-0.md b/versioned_docs/version-v7/updating/7-0.mdx
similarity index 100%
rename from versioned_docs/version-v7/updating/7-0.md
rename to versioned_docs/version-v7/updating/7-0.mdx
diff --git a/versioned_docs/version-v7/utilities/animations.md b/versioned_docs/version-v7/utilities/animations.mdx
similarity index 99%
rename from versioned_docs/version-v7/utilities/animations.md
rename to versioned_docs/version-v7/utilities/animations.mdx
index 27558786ff7..e174015fe61 100644
--- a/versioned_docs/version-v7/utilities/animations.md
+++ b/versioned_docs/version-v7/utilities/animations.mdx
@@ -162,7 +162,7 @@ In the example below, an animation that changes the opacity on the `ion-card` el
 
 By default, all Ionic Animations are paused until the `play` method is called.
 
-import Basic from '@site/static/usage/v7/animations/basic/index.md';
+import Basic from '@site/static/usage/v7/animations/basic/index.mdx';
 
 <Basic />
 
@@ -172,7 +172,7 @@ Ionic Animations allows you to control the intermediate steps in an animation us
 
 Hyphenated CSS properties should be written using camel case when writing keyframes. For example, `border-radius` should be written as `borderRadius`. This also applies to the `fromTo()`, `from(),` and `to()` methods.
 
-import Keyframes from '@site/static/usage/v7/animations/keyframes/index.md';
+import Keyframes from '@site/static/usage/v7/animations/keyframes/index.mdx';
 
 <Keyframes />
 
@@ -186,7 +186,7 @@ Multiple elements can be animated at the same time and controlled via a single p
 
 This example shows 3 child animations controlled by a single parent animation. Animations `cardA` and `cardB` inherit the parent animation's duration of 2000ms, but animation `cardC` has a duration of 5000ms since it was explicitly set.
 
-import Group from '@site/static/usage/v7/animations/group/index.md';
+import Group from '@site/static/usage/v7/animations/group/index.mdx';
 
 <Group />
 
@@ -198,7 +198,7 @@ This example sets an inline filter which inverts the background color of the car
 
 See [Methods](#methods) for a complete list of hooks.
 
-import BeforeAndAfterHooks from '@site/static/usage/v7/animations/before-and-after-hooks/index.md';
+import BeforeAndAfterHooks from '@site/static/usage/v7/animations/before-and-after-hooks/index.mdx';
 
 <BeforeAndAfterHooks />
 
@@ -206,17 +206,17 @@ import BeforeAndAfterHooks from '@site/static/usage/v7/animations/before-and-aft
 
 Animations can be chained to run one after the other. The `play` method returns a Promise that resolves when the animation has completed.
 
-import Chain from '@site/static/usage/v7/animations/chain/index.md';
+import Chain from '@site/static/usage/v7/animations/chain/index.mdx';
 
 <Chain />
 
 ## Gesture Animations
 
-Ionic Animations gives developers the ability to create powerful gesture-based animations by integrating seamlessly with [Ionic Gestures](gestures.md).
+Ionic Animations gives developers the ability to create powerful gesture-based animations by integrating seamlessly with [Ionic Gestures](gestures.mdx).
 
 In the following example we are creating a track along which we can drag the card element. Our `animation` object will take care of moving the card element either left or right, and our `gesture` object will instruct the `animation` object which direction to move in.
 
-import Gesture from '@site/static/usage/v7/animations/gesture/index.md';
+import Gesture from '@site/static/usage/v7/animations/gesture/index.mdx';
 
 <Gesture />
 
@@ -228,7 +228,7 @@ This method works in all supported browsers when creating animations for the fir
 
 Safari does not currently support dynamically updating keyframe animations. For developers who need this kind of support in Safari, they can use [MediaQueryList.addListener()](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener).
 
-import PreferenceBased from '@site/static/usage/v7/animations/preference-based/index.md';
+import PreferenceBased from '@site/static/usage/v7/animations/preference-based/index.mdx';
 
 <PreferenceBased />
 
@@ -238,7 +238,7 @@ Certain Ionic components allow developers to provide custom animations. All anim
 
 ### Modals
 
-import ModalOverride from '@site/static/usage/v7/animations/modal-override/index.md';
+import ModalOverride from '@site/static/usage/v7/animations/modal-override/index.mdx';
 
 <ModalOverride />
 
diff --git a/versioned_docs/version-v7/utilities/gestures.md b/versioned_docs/version-v7/utilities/gestures.mdx
similarity index 99%
rename from versioned_docs/version-v7/utilities/gestures.md
rename to versioned_docs/version-v7/utilities/gestures.mdx
index 2324da88ca6..6c07076c638 100644
--- a/versioned_docs/version-v7/utilities/gestures.md
+++ b/versioned_docs/version-v7/utilities/gestures.mdx
@@ -162,7 +162,7 @@ const gesture = createGesture({
 
 ## Basic Gestures
 
-import Basic from '@site/static/usage/v7/gestures/basic/index.md';
+import Basic from '@site/static/usage/v7/gestures/basic/index.mdx';
 
 In this example, our app listens for gestures on the `ion-content` element. When a gesture movement has started, the `onStart` function is called and a class is added to our `ion-card` to add a colored box shadow. When a gesture movement was detected, the `onMove` function is called and our app prints the current gesture information within the `ion-card`. Finally, when a gesture movement has ended, the `onEnd` function is called and the custom class is removed from our `ion-card`.
 
@@ -170,7 +170,7 @@ In this example, our app listens for gestures on the `ion-content` element. When
 
 ## Double Click Gesture
 
-import DoubleClick from '@site/static/usage/v7/gestures/double-click/index.md';
+import DoubleClick from '@site/static/usage/v7/gestures/double-click/index.mdx';
 
 In the example below, we want to be able to detect double clicks on an element. By setting our `threshold` to `0`, we can ensure our gesture object can detect clicks. Additionally, we define a click threshold so that only 2 clicks that occur in quick succession count as a double click.
 
@@ -178,7 +178,7 @@ In the example below, we want to be able to detect double clicks on an element.
 
 ## Gesture Animations
 
-See our guide on implementing gesture animations: [Gesture Animations with Ionic Animations](animations.md#gesture-animations)
+See our guide on implementing gesture animations: [Gesture Animations with Ionic Animations](animations.mdx#gesture-animations)
 
 ## Types
 
diff --git a/versioned_docs/version-v7/vue/build-options.md b/versioned_docs/version-v7/vue/build-options.mdx
similarity index 100%
rename from versioned_docs/version-v7/vue/build-options.md
rename to versioned_docs/version-v7/vue/build-options.mdx
diff --git a/versioned_docs/version-v7/vue/lifecycle.md b/versioned_docs/version-v7/vue/lifecycle.mdx
similarity index 100%
rename from versioned_docs/version-v7/vue/lifecycle.md
rename to versioned_docs/version-v7/vue/lifecycle.mdx
diff --git a/versioned_docs/version-v7/vue/navigation.md b/versioned_docs/version-v7/vue/navigation.mdx
similarity index 100%
rename from versioned_docs/version-v7/vue/navigation.md
rename to versioned_docs/version-v7/vue/navigation.mdx
diff --git a/versioned_docs/version-v7/vue/overview.md b/versioned_docs/version-v7/vue/overview.mdx
similarity index 92%
rename from versioned_docs/version-v7/vue/overview.md
rename to versioned_docs/version-v7/vue/overview.mdx
index 3ac9ad1ceca..e752c1103d9 100644
--- a/versioned_docs/version-v7/vue/overview.md
+++ b/versioned_docs/version-v7/vue/overview.mdx
@@ -28,7 +28,7 @@ Ionic Vue projects use the same tooling as standard Vue CLI projects, so you can
 
 [Capacitor](https://capacitorjs.com) is the official cross-platform runtime for Ionic Vue, enabling your apps to run natively on iOS, Android, and the web with a single codebase.
 
-While you can use many [Cordova](https://cordova.apache.org/) plugins with Ionic Vue, Capacitor is the recommended and fully supported solution. The [Ionic CLI](../cli.md) does not provide official Cordova integration for Ionic Vue projects. For more information on using Cordova plugins with Capacitor, see the [Capacitor documentation](https://capacitorjs.com/docs/cordova).
+While you can use many [Cordova](https://cordova.apache.org/) plugins with Ionic Vue, Capacitor is the recommended and fully supported solution. The [Ionic CLI](../cli.mdx) does not provide official Cordova integration for Ionic Vue projects. For more information on using Cordova plugins with Capacitor, see the [Capacitor documentation](https://capacitorjs.com/docs/cordova).
 
 ## Installation
 
diff --git a/versioned_docs/version-v7/vue/performance.md b/versioned_docs/version-v7/vue/performance.mdx
similarity index 100%
rename from versioned_docs/version-v7/vue/performance.md
rename to versioned_docs/version-v7/vue/performance.mdx
diff --git a/versioned_docs/version-v7/vue/platform.md b/versioned_docs/version-v7/vue/platform.mdx
similarity index 100%
rename from versioned_docs/version-v7/vue/platform.md
rename to versioned_docs/version-v7/vue/platform.mdx
diff --git a/versioned_docs/version-v7/vue/pwa.md b/versioned_docs/version-v7/vue/pwa.mdx
similarity index 100%
rename from versioned_docs/version-v7/vue/pwa.md
rename to versioned_docs/version-v7/vue/pwa.mdx
diff --git a/versioned_docs/version-v7/vue/quickstart.md b/versioned_docs/version-v7/vue/quickstart.mdx
similarity index 93%
rename from versioned_docs/version-v7/vue/quickstart.md
rename to versioned_docs/version-v7/vue/quickstart.mdx
index 70a1e3d5fa6..f6f87a69b5c 100644
--- a/versioned_docs/version-v7/vue/quickstart.md
+++ b/versioned_docs/version-v7/vue/quickstart.mdx
@@ -160,15 +160,15 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue
 <!-- ...styles... -->
 ```
 
-This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
+This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.mdx#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
 :::tip[Learn More]
-For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
+For detailed information about Ionic layout components, see the [Header](/docs/api/header.mdx), [Toolbar](/docs/api/toolbar.mdx), [Title](/docs/api/title.mdx), and [Content](/docs/api/content.mdx) documentation.
 :::
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.md) at the end of the `ion-content`:
+You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.mdx) at the end of the `ion-content`:
 
 ```vue title="src/views/HomePage.vue"
 <ion-content>
@@ -217,7 +217,7 @@ import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, Io
 </script>
 ```
 
-This creates a page with a [Back Button](/docs/api/back-button.md) in the [Toolbar](/docs/api/toolbar.md). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
+This creates a page with a [Back Button](/docs/api/back-button.mdx) in the [Toolbar](/docs/api/toolbar.mdx). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
 
 :::warning
 When creating your own pages, always use `ion-page` as the root component. This is essential for proper transitions between pages, base CSS styling that Ionic components depend on, and consistent layout behavior across your app.
@@ -259,7 +259,7 @@ Once that is done, update the button in `HomePage.vue`:
 ```
 
 :::info
-Navigating can also be performed programmatically using Vue Router, and routes can be lazy loaded for better performance. See the [Vue Navigation documentation](/docs/vue/navigation.md) for more information.
+Navigating can also be performed programmatically using Vue Router, and routes can be lazy loaded for better performance. See the [Vue Navigation documentation](/docs/vue/navigation.mdx) for more information.
 :::
 
 ## Add Icons to the New Page
@@ -284,7 +284,7 @@ Then, include them inside of the `ion-content`:
 
 Note that we are passing the imported SVG reference, **not** the icon name as a string.
 
-For more information, see the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
+For more information, see the [Icon documentation](/docs/api/icon.mdx) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
 ## Call Component Methods
 
@@ -339,7 +339,7 @@ To call methods on Ionic components:
 
 This pattern is necessary because Ionic components are built as Web Components. The `$el` property gives you access to the actual Web Component instance where the methods are defined.
 
-You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation.
+You can find available methods for each component in the [Methods](/docs/api/content.mdx#methods) section of their API documentation.
 
 ## Run on a Device
 
diff --git a/versioned_docs/version-v7/vue/slides.md b/versioned_docs/version-v7/vue/slides.mdx
similarity index 100%
rename from versioned_docs/version-v7/vue/slides.md
rename to versioned_docs/version-v7/vue/slides.mdx
diff --git a/versioned_docs/version-v7/vue/storage.md b/versioned_docs/version-v7/vue/storage.mdx
similarity index 100%
rename from versioned_docs/version-v7/vue/storage.md
rename to versioned_docs/version-v7/vue/storage.mdx
diff --git a/versioned_docs/version-v7/vue/troubleshooting.md b/versioned_docs/version-v7/vue/troubleshooting.mdx
similarity index 91%
rename from versioned_docs/version-v7/vue/troubleshooting.md
rename to versioned_docs/version-v7/vue/troubleshooting.mdx
index 6f728e01a4a..dea452fca45 100644
--- a/versioned_docs/version-v7/vue/troubleshooting.md
+++ b/versioned_docs/version-v7/vue/troubleshooting.mdx
@@ -36,7 +36,7 @@ import { IonButton } from '@ionic/vue';
 </script>
 ```
 
-Prefer to register your components globally once? We have you covered. Our [Optimizing Your Build Guide](quickstart.md#optimizing-your-build) shows you how to register Ionic Vue components globally as well as the potential downsides to be aware of when using this approach.
+Prefer to register your components globally once? We have you covered. Our [Optimizing Your Build Guide](quickstart.mdx#optimizing-your-build) shows you how to register Ionic Vue components globally as well as the potential downsides to be aware of when using this approach.
 
 ## Slot attributes are deprecated
 
@@ -74,7 +74,7 @@ ionContentRef.value.scrollToBottom();
 
 In other framework integrations such as Ionic React, this is not needed as any `ref` you provide is automatically forwarded to the underlying Web Component instance. We are unable to do the same thing here due to limitations in how Vue manages refs.
 
-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
 
@@ -97,7 +97,7 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue
 </script>
 ```
 
-See the [IonPage documentation](navigation.md#ionpage) for more information.
+See the [IonPage documentation](navigation.mdx#ionpage) for more information.
 
 ## Ionic events bound in JavaScript are not firing
 
diff --git a/versioned_docs/version-v7/vue/utility-functions.md b/versioned_docs/version-v7/vue/utility-functions.mdx
similarity index 100%
rename from versioned_docs/version-v7/vue/utility-functions.md
rename to versioned_docs/version-v7/vue/utility-functions.mdx
diff --git a/versioned_docs/version-v7/vue/virtual-scroll.md b/versioned_docs/version-v7/vue/virtual-scroll.mdx
similarity index 100%
rename from versioned_docs/version-v7/vue/virtual-scroll.md
rename to versioned_docs/version-v7/vue/virtual-scroll.mdx
diff --git a/versioned_docs/version-v7/vue/your-first-app.md b/versioned_docs/version-v7/vue/your-first-app.mdx
similarity index 93%
rename from versioned_docs/version-v7/vue/your-first-app.md
rename to versioned_docs/version-v7/vue/your-first-app.mdx
index 57dffab02d5..e6c46d1d63b 100644
--- a/versioned_docs/version-v7/vue/your-first-app.md
+++ b/versioned_docs/version-v7/vue/your-first-app.mdx
@@ -30,9 +30,9 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
 
 Highlights include:
 
-- One Vue-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.md).
+- One Vue-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.mdx).
 - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
-- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs.
+- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.mdx), [Filesystem](../native/filesystem.mdx), and [Preferences](../native/preferences.mdx) APIs.
 
 Find the [complete app code](https://github.com/ionic-team/tutorial-photo-gallery-vue) referenced in this guide on GitHub.
 
@@ -61,7 +61,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
@@ -88,7 +88,7 @@ npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
 
 ### PWA Elements
 
-Some Capacitor plugins, including the [Camera API](../native/camera.md), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements).
+Some Capacitor plugins, including the [Camera API](../native/camera.mdx), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements).
 
 It's a separate dependency, so install it next:
 
@@ -168,7 +168,7 @@ import ExploreContainer from '@/components/ExploreContainer.vue';
 </script>
 ```
 
-`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.md#collapsible-large-titles) support). Rename both `ion-title` elements to:
+`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.mdx#collapsible-large-titles) support). Rename both `ion-title` elements to:
 
 ```vue
 <template>
@@ -193,7 +193,7 @@ import ExploreContainer from '@/components/ExploreContainer.vue';
 </template>
 ```
 
-We put the visual aspects of our app into `<ion-content>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.md) (FAB) to the bottom of the page and set the camera image as the icon.
+We put the visual aspects of our app into `<ion-content>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.mdx) (FAB) to the bottom of the page and set the camera image as the icon.
 
 ```vue
 <template>
diff --git a/versioned_docs/version-v7/vue/your-first-app/2-taking-photos.md b/versioned_docs/version-v7/vue/your-first-app/2-taking-photos.mdx
similarity index 94%
rename from versioned_docs/version-v7/vue/your-first-app/2-taking-photos.md
rename to versioned_docs/version-v7/vue/your-first-app/2-taking-photos.mdx
index debca94e80b..484931fa966 100644
--- a/versioned_docs/version-v7/vue/your-first-app/2-taking-photos.md
+++ b/versioned_docs/version-v7/vue/your-first-app/2-taking-photos.mdx
@@ -11,7 +11,7 @@ sidebar_label: Taking Photos
   />
 </head>
 
-Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.md). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android).
+Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.mdx). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android).
 
 ## Photo Gallery Composable
 
@@ -192,7 +192,7 @@ export interface UserPhoto {
 }
 ```
 
-Next, switch to `Tab2Page.vue` to display the images. We'll add a [Grid component](../../api/grid.md) to ensure the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `UserPhoto`'s `photos` array. For each item, add an [Image component](../../api/img.md) and set its `src` property to the photo's path.
+Next, switch to `Tab2Page.vue` to display the images. We'll add a [Grid component](../../api/grid.mdx) to ensure the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `UserPhoto`'s `photos` array. For each item, add an [Image component](../../api/img.mdx) and set its `src` property to the photo's path.
 
 ```vue
 <template>
diff --git a/versioned_docs/version-v7/vue/your-first-app/3-saving-photos.md b/versioned_docs/version-v7/vue/your-first-app/3-saving-photos.mdx
similarity index 99%
rename from versioned_docs/version-v7/vue/your-first-app/3-saving-photos.md
rename to versioned_docs/version-v7/vue/your-first-app/3-saving-photos.mdx
index 2fd905d6d66..bd7c36b4eef 100644
--- a/versioned_docs/version-v7/vue/your-first-app/3-saving-photos.md
+++ b/versioned_docs/version-v7/vue/your-first-app/3-saving-photos.mdx
@@ -92,7 +92,7 @@ export interface UserPhoto {
 }
 ```
 
-We'll use the Capacitor [Filesystem API](../../native/filesystem.md) to save the photo. First, convert the photo to base64 format.
+We'll use the Capacitor [Filesystem API](../../native/filesystem.mdx) to save the photo. First, convert the photo to base64 format.
 
 Then, pass the data to the Filesystem's `writeFile` method. Recall that we display photos by setting the image's source path (`src`) to the `webviewPath` property. So, set the `webviewPath` and return the new `Photo` object.
 
diff --git a/versioned_docs/version-v7/vue/your-first-app/4-loading-photos.md b/versioned_docs/version-v7/vue/your-first-app/4-loading-photos.mdx
similarity index 99%
rename from versioned_docs/version-v7/vue/your-first-app/4-loading-photos.md
rename to versioned_docs/version-v7/vue/your-first-app/4-loading-photos.mdx
index 55fd7317f5a..6b020e17df1 100644
--- a/versioned_docs/version-v7/vue/your-first-app/4-loading-photos.md
+++ b/versioned_docs/version-v7/vue/your-first-app/4-loading-photos.mdx
@@ -13,7 +13,7 @@ sidebar_label: Loading Photos
 
 We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery.
 
-Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](../../native/preferences.md) to store our array of Photos in a key-value store.
+Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](../../native/preferences.mdx) to store our array of Photos in a key-value store.
 
 ## Preferences API
 
diff --git a/versioned_docs/version-v7/vue/your-first-app/5-adding-mobile.md b/versioned_docs/version-v7/vue/your-first-app/5-adding-mobile.mdx
similarity index 95%
rename from versioned_docs/version-v7/vue/your-first-app/5-adding-mobile.md
rename to versioned_docs/version-v7/vue/your-first-app/5-adding-mobile.mdx
index 8401eedcbcf..9190b978030 100644
--- a/versioned_docs/version-v7/vue/your-first-app/5-adding-mobile.md
+++ b/versioned_docs/version-v7/vue/your-first-app/5-adding-mobile.mdx
@@ -17,7 +17,7 @@ Our photo gallery app won’t be complete until it runs on iOS, Android, and the
 
 Let’s start with making some small code changes - then our app will “just work” when we deploy it to a device.
 
-Import the Ionic [Platform API](../platform.md) into `usePhotoGallery.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile).
+Import the Ionic [Platform API](../platform.mdx) into `usePhotoGallery.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile).
 
 Add `Platform` to the imports at the top of the file to use the `isPlatform` method.
 
@@ -73,7 +73,7 @@ const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> =
 };
 ```
 
-When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details on the File Protocol](../../core-concepts/webview.md#file-protocol)). To use this method, we'll need to import Capacitor into `usePhotoGallery.ts`.
+When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details on the File Protocol](../../core-concepts/webview.mdx#file-protocol)). To use this method, we'll need to import Capacitor into `usePhotoGallery.ts`.
 
 ```ts
 import { ref, watch, onMounted } from 'vue';
diff --git a/versioned_docs/version-v7/vue/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v7/vue/your-first-app/6-deploying-mobile.mdx
similarity index 100%
rename from versioned_docs/version-v7/vue/your-first-app/6-deploying-mobile.md
rename to versioned_docs/version-v7/vue/your-first-app/6-deploying-mobile.mdx
diff --git a/versioned_docs/version-v7/vue/your-first-app/7-live-reload.md b/versioned_docs/version-v7/vue/your-first-app/7-live-reload.mdx
similarity index 95%
rename from versioned_docs/version-v7/vue/your-first-app/7-live-reload.md
rename to versioned_docs/version-v7/vue/your-first-app/7-live-reload.mdx
index 3f98b6e5d1c..e5c684abb34 100644
--- a/versioned_docs/version-v7/vue/your-first-app/7-live-reload.md
+++ b/versioned_docs/version-v7/vue/your-first-app/7-live-reload.mdx
@@ -13,7 +13,7 @@ sidebar_label: Live Reload
 
 So far, we’ve seen how easy it is to develop a cross-platform app that works everywhere. The development experience is pretty quick, but what if I told you there was a way to go faster?
 
-We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.md) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
+We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.mdx) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
 
 ## Live Reload
 
@@ -135,7 +135,7 @@ const showActionSheet = async (photo: UserPhoto) => {
 </script>
 ```
 
-Add a click handler to the `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](../../api/action-sheet.md) dialog with the option to either delete the selected photo or cancel (close) the dialog.
+Add a click handler to the `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](../../api/action-sheet.mdx) dialog with the option to either delete the selected photo or cancel (close) the dialog.
 
 ```vue
 <template>
diff --git a/versioned_docs/version-v7/vue/your-first-app/8-distribute.md b/versioned_docs/version-v7/vue/your-first-app/8-distribute.mdx
similarity index 97%
rename from versioned_docs/version-v7/vue/your-first-app/8-distribute.md
rename to versioned_docs/version-v7/vue/your-first-app/8-distribute.mdx
index 9a6d7d1b71b..c0b903e1491 100644
--- a/versioned_docs/version-v7/vue/your-first-app/8-distribute.md
+++ b/versioned_docs/version-v7/vue/your-first-app/8-distribute.mdx
@@ -102,6 +102,6 @@ For access to the ability to create a Native Configuration, you will need to be
 
 Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to your users' devices!
 
-There are many paths to follow from here. Try adding another [Ionic UI component](../../components.md) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
+There are many paths to follow from here. Try adding another [Ionic UI component](../../components.mdx) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
 
 Happy app building! 💙