From e27b3ecc8fb88fce00cc747cebe3556f9e25dc5d Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Thu, 3 Sep 2026 09:47:06 -0700
Subject: [PATCH] chore(v6): rename archived v6 pages and usage partials to
 .mdx

---
 .../animations/{index.md => index.mdx}        |  0
 .../accordion/basic/{index.md => index.mdx}   |  0
 .../{index.md => index.mdx}                   |  0
 .../expansion-styles/{index.md => index.mdx}  |  0
 .../icons/{index.md => index.mdx}             |  0
 .../theming/{index.md => index.mdx}           |  0
 .../disable-group/{index.md => index.mdx}     |  0
 .../disable/group/{index.md => index.mdx}     |  0
 .../individual/{index.md => index.mdx}        |  0
 .../listen-changes/{index.md => index.mdx}    |  0
 .../multiple/{index.md => index.mdx}          |  0
 .../readonly/group/{index.md => index.mdx}    |  0
 .../individual/{index.md => index.mdx}        |  0
 .../accordion/toggle/{index.md => index.mdx}  |  0
 .../basic/{index.md => index.mdx}             |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../theming/styling/{index.md => index.mdx}   |  0
 .../v6/alert/buttons/{index.md => index.mdx}  |  0
 .../customization/{index.md => index.mdx}     |  0
 .../inputs/radios/{index.md => index.mdx}     |  0
 .../text-inputs/{index.md => index.mdx}       |  0
 .../controller/{index.md => index.mdx}        |  0
 .../v6/avatar/basic/{index.md => index.mdx}   |  0
 .../v6/avatar/chip/{index.md => index.mdx}    |  0
 .../v6/avatar/item/{index.md => index.mdx}    |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../back-button/basic/{index.md => index.mdx} |  0
 .../custom/{index.md => index.mdx}            |  0
 .../v6/backdrop/basic/{index.md => index.mdx} |  0
 .../backdrop/styling/{index.md => index.mdx}  |  0
 .../v6/badge/basic/{index.md => index.mdx}    |  0
 .../theming/colors/{index.md => index.mdx}    |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../breadcrumbs/basic/{index.md => index.mdx} |  0
 .../expand-on-click/{index.md => index.mdx}   |  0
 .../{index.md => index.mdx}                   |  0
 .../max-items/{index.md => index.mdx}         |  0
 .../popover-on-click/{index.md => index.mdx}  |  0
 .../custom-separators/{index.md => index.mdx} |  0
 .../icons-on-items/{index.md => index.mdx}    |  0
 .../theming/colors/{index.md => index.mdx}    |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../v6/button/basic/{index.md => index.mdx}   |  0
 .../v6/button/expand/{index.md => index.mdx}  |  0
 .../v6/button/fill/{index.md => index.mdx}    |  0
 .../v6/button/icons/{index.md => index.mdx}   |  0
 .../v6/button/shape/{index.md => index.mdx}   |  0
 .../v6/button/size/{index.md => index.mdx}    |  0
 .../theming/colors/{index.md => index.mdx}    |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../v6/buttons/basic/{index.md => index.mdx}  |  0
 .../buttons/placement/{index.md => index.mdx} |  0
 .../v6/buttons/types/{index.md => index.mdx}  |  0
 .../v6/card/basic/{index.md => index.mdx}     |  0
 .../v6/card/buttons/{index.md => index.mdx}   |  0
 .../v6/card/list/{index.md => index.mdx}      |  0
 .../v6/card/media/{index.md => index.mdx}     |  0
 .../theming/colors/{index.md => index.mdx}    |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../v6/checkbox/basic/{index.md => index.mdx} |  0
 .../indeterminate/{index.md => index.mdx}     |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../v6/chip/basic/{index.md => index.mdx}     |  0
 .../v6/chip/slots/{index.md => index.mdx}     |  0
 .../theming/colors/{index.md => index.mdx}    |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../v6/content/basic/{index.md => index.mdx}  |  0
 .../v6/content/fixed/{index.md => index.mdx}  |  0
 .../fullscreen/{index.md => index.mdx}        |  0
 .../header-footer/{index.md => index.mdx}     |  0
 .../scroll-events/{index.md => index.mdx}     |  0
 .../scroll-methods/{index.md => index.mdx}    |  0
 .../theming/colors/{index.md => index.mdx}    |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../css-shadow-parts/{index.md => index.mdx}  |  0
 .../basic/{index.md => index.mdx}             |  0
 .../v6/datetime/basic/{index.md => index.mdx} |  0
 .../{index.md => index.mdx}                   |  0
 .../{index.md => index.mdx}                   |  0
 .../{index.md => index.mdx}                   |  0
 .../advanced/{index.md => index.mdx}          |  0
 .../max-min/{index.md => index.mdx}           |  0
 .../values/{index.md => index.mdx}            |  0
 .../array/{index.md => index.mdx}             |  0
 .../callback/{index.md => index.mdx}          |  0
 .../custom-locale/{index.md => index.mdx}     |  0
 .../first-day-of-week/{index.md => index.mdx} |  0
 .../hour-cycle/{index.md => index.mdx}        |  0
 .../{index.md => index.mdx}                   |  0
 .../time-label/{index.md => index.mdx}        |  0
 .../datetime/multiple/{index.md => index.mdx} |  0
 .../presentation/date/{index.md => index.mdx} |  0
 .../month-and-year/{index.md => index.mdx}    |  0
 .../presentation/time/{index.md => index.mdx} |  0
 .../wheel/{index.md => index.mdx}             |  0
 .../datetime/theming/{index.md => index.mdx}  |  0
 .../customizing-title/{index.md => index.mdx} |  0
 .../{index.md => index.mdx}                   |  0
 .../v6/fab/basic/{index.md => index.mdx}      |  0
 .../fab/button-sizing/{index.md => index.mdx} |  0
 .../v6/fab/list-side/{index.md => index.mdx}  |  0
 .../fab/positioning/{index.md => index.mdx}   |  0
 .../theming/colors/{index.md => index.mdx}    |  0
 .../{index.md => index.mdx}                   |  0
 .../css-shadow-parts/{index.md => index.mdx}  |  0
 .../v6/footer/basic/{index.md => index.mdx}   |  0
 .../{index.md => index.mdx}                   |  0
 .../v6/footer/fade/{index.md => index.mdx}    |  0
 .../footer/no-border/{index.md => index.mdx}  |  0
 .../translucent/{index.md => index.mdx}       |  0
 .../v6/grid/basic/{index.md => index.mdx}     |  0
 .../column-number/{index.md => index.mdx}     |  0
 .../padding/{index.md => index.mdx}           |  0
 .../customizing/width/{index.md => index.mdx} |  0
 .../v6/grid/fixed/{index.md => index.mdx}     |  0
 .../{index.md => index.mdx}                   |  0
 .../offset-responsive/{index.md => index.mdx} |  0
 .../v6/grid/offset/{index.md => index.mdx}    |  0
 .../{index.md => index.mdx}                   |  0
 .../v6/grid/push-pull/{index.md => index.mdx} |  0
 .../v6/grid/size-auto/{index.md => index.mdx} |  0
 .../size-responsive/{index.md => index.mdx}   |  0
 .../v6/grid/size/{index.md => index.mdx}      |  0
 .../{index.md => index.mdx}                   |  0
 .../v6/header/basic/{index.md => index.mdx}   |  0
 .../header/condense/{index.md => index.mdx}   |  0
 .../{index.md => index.mdx}                   |  0
 .../v6/header/fade/{index.md => index.mdx}    |  0
 .../header/no-border/{index.md => index.mdx}  |  0
 .../translucent/{index.md => index.mdx}       |  0
 .../v6/icon/basic/{index.md => index.mdx}     |  0
 .../v6/img/basic/{index.md => index.mdx}      |  0
 .../basic/{index.md => index.mdx}             |  0
 .../{index.md => index.mdx}                   |  0
 .../{index.md => index.mdx}                   |  0
 .../v6/input/basic/{index.md => index.mdx}    |  0
 .../v6/input/clear/{index.md => index.mdx}    |  0
 .../v6/input/fill/{index.md => index.mdx}     |  0
 .../input/filtering/{index.md => index.mdx}   |  0
 .../v6/input/labels/{index.md => index.mdx}   |  0
 .../theming/colors/{index.md => index.mdx}    |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../v6/input/types/{index.md => index.mdx}    |  0
 .../basic/{index.md => index.mdx}             |  0
 .../theming/colors/{index.md => index.mdx}    |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../item-group/basic/{index.md => index.mdx}  |  0
 .../sliding-items/{index.md => index.mdx}     |  0
 .../basic/{index.md => index.mdx}             |  0
 .../expandable/{index.md => index.mdx}        |  0
 .../icons/{index.md => index.mdx}             |  0
 .../v6/item/basic/{index.md => index.mdx}     |  0
 .../v6/item/buttons/{index.md => index.mdx}   |  0
 .../v6/item/clickable/{index.md => index.mdx} |  0
 .../v6/item/counter/{index.md => index.mdx}   |  0
 .../detail-arrows/{index.md => index.mdx}     |  0
 .../item/helper-error/{index.md => index.mdx} |  0
 .../v6/item/icons/{index.md => index.mdx}     |  0
 .../v6/item/inputs/{index.md => index.mdx}    |  0
 .../v6/item/lines/{index.md => index.mdx}     |  0
 .../v6/item/media/{index.md => index.mdx}     |  0
 .../theming/colors/{index.md => index.mdx}    |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../css-shadow-parts/{index.md => index.mdx}  |  0
 .../input-highlight/{index.md => index.mdx}   |  0
 .../v6/label/basic/{index.md => index.mdx}    |  0
 .../v6/label/input/{index.md => index.mdx}    |  0
 .../v6/label/item/{index.md => index.mdx}     |  0
 .../theming/colors/{index.md => index.mdx}    |  0
 .../list-header/basic/{index.md => index.mdx} |  0
 .../buttons/{index.md => index.mdx}           |  0
 .../list-header/lines/{index.md => index.mdx} |  0
 .../theming/colors/{index.md => index.mdx}    |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../v6/list/basic/{index.md => index.mdx}     |  0
 .../v6/list/inset/{index.md => index.mdx}     |  0
 .../v6/list/lines/{index.md => index.mdx}     |  0
 .../controller/{index.md => index.mdx}        |  0
 .../loading/spinners/{index.md => index.mdx}  |  0
 .../loading/theming/{index.md => index.mdx}   |  0
 .../v6/menu/basic/{index.md => index.mdx}     |  0
 .../v6/menu/theming/{index.md => index.mdx}   |  0
 .../v6/menu/toggle/{index.md => index.mdx}    |  0
 .../v6/menu/type/{index.md => index.mdx}      |  0
 .../boolean/{index.md => index.mdx}           |  0
 .../function/{index.md => index.mdx}          |  0
 .../{index.md => index.mdx}                   |  0
 .../modal/card/basic/{index.md => index.mdx}  |  0
 .../modal/controller/{index.md => index.mdx}  |  0
 .../custom-dialogs/{index.md => index.mdx}    |  0
 .../inline/basic/{index.md => index.mdx}      |  0
 .../inline/is-open/{index.md => index.mdx}    |  0
 .../performance/mount/{index.md => index.mdx} |  0
 .../{index.md => index.mdx}                   |  0
 .../modal/sheet/basic/{index.md => index.mdx} |  0
 .../handle-behavior/{index.md => index.mdx}   |  0
 .../animations/{index.md => index.mdx}        |  0
 .../styling/theming/{index.md => index.mdx}   |  0
 .../modal-navigation/{index.md => index.mdx}  |  0
 .../v6/nav/nav-link/{index.md => index.mdx}   |  0
 .../v6/note/basic/{index.md => index.mdx}     |  0
 .../v6/note/item/{index.md => index.mdx}      |  0
 .../theming/colors/{index.md => index.mdx}    |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../multiple-column/{index.md => index.mdx}   |  0
 .../single-column/{index.md => index.mdx}     |  0
 .../positioning/{index.md => index.mdx}       |  0
 .../sizing/{index.md => index.mdx}            |  0
 .../styling/{index.md => index.mdx}           |  0
 .../v6/popover/nested/{index.md => index.mdx} |  0
 .../performance/mount/{index.md => index.mdx} |  0
 .../controller/{index.md => index.mdx}        |  0
 .../inline-isopen/{index.md => index.mdx}     |  0
 .../inline-trigger/{index.md => index.mdx}    |  0
 .../buffer/{index.md => index.mdx}            |  0
 .../determinate/{index.md => index.mdx}       |  0
 .../indeterminate/{index.md => index.mdx}     |  0
 .../theming/colors/{index.md => index.mdx}    |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../css-shadow-parts/{index.md => index.mdx}  |  0
 .../v6/radio/basic/{index.md => index.mdx}    |  0
 .../empty-selection/{index.md => index.mdx}   |  0
 .../theming/colors/{index.md => index.mdx}    |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../css-shadow-parts/{index.md => index.mdx}  |  0
 .../v6/range/basic/{index.md => index.mdx}    |  0
 .../range/dual-knobs/{index.md => index.mdx}  |  0
 .../ion-change-event/{index.md => index.mdx}  |  0
 .../{index.md => index.mdx}                   |  0
 .../v6/range/pins/{index.md => index.mdx}     |  0
 .../v6/range/slots/{index.md => index.mdx}    |  0
 .../snapping-ticks/{index.md => index.mdx}    |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../css-shadow-parts/{index.md => index.mdx}  |  0
 .../advanced/{index.md => index.mdx}          |  0
 .../refresher/basic/{index.md => index.mdx}   |  0
 .../custom-content/{index.md => index.mdx}    |  0
 .../{index.md => index.mdx}                   |  0
 .../pull-properties/{index.md => index.mdx}   |  0
 .../v6/reorder/basic/{index.md => index.mdx}  |  0
 .../custom-icon/{index.md => index.mdx}       |  0
 .../{index.md => index.mdx}                   |  0
 .../toggling-disabled/{index.md => index.mdx} |  0
 .../updating-data/{index.md => index.mdx}     |  0
 .../reorder/wrapper/{index.md => index.mdx}   |  0
 .../basic/{index.md => index.mdx}             |  0
 .../customizing/{index.md => index.mdx}       |  0
 .../type/{index.md => index.mdx}              |  0
 .../v6/router/basic/{index.md => index.mdx}   |  0
 .../searchbar/basic/{index.md => index.mdx}   |  0
 .../cancel-button/{index.md => index.mdx}     |  0
 .../clear-button/{index.md => index.mdx}      |  0
 .../debounce/{index.md => index.mdx}          |  0
 .../search-icon/{index.md => index.mdx}       |  0
 .../theming/colors/{index.md => index.mdx}    |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../basic/{index.md => index.mdx}             |  0
 .../layout/{index.md => index.mdx}            |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../css-shadow-parts/{index.md => index.mdx}  |  0
 .../v6/segment/basic/{index.md => index.mdx}  |  0
 .../scrollable/{index.md => index.mdx}        |  0
 .../theming/colors/{index.md => index.mdx}    |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../{index.md => index.mdx}                   |  0
 .../{index.md => index.mdx}                   |  0
 .../single-selection/{index.md => index.mdx}  |  0
 .../button-text/{index.md => index.mdx}       |  0
 .../interface-options/{index.md => index.mdx} |  0
 .../styling-select/{index.md => index.mdx}    |  0
 .../action-sheet/{index.md => index.mdx}      |  0
 .../popover/{index.md => index.mdx}           |  0
 .../{index.md => index.mdx}                   |  0
 .../using-comparewith/{index.md => index.mdx} |  0
 .../select/typeahead/{index.md => index.mdx}  |  0
 .../basic/{index.md => index.mdx}             |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../v6/spinner/basic/{index.md => index.mdx}  |  0
 .../theming/colors/{index.md => index.mdx}    |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../split-pane/basic/{index.md => index.mdx}  |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../v6/tabs/router/{index.md => index.mdx}    |  0
 .../v6/text/basic/{index.md => index.mdx}     |  0
 .../textarea/autogrow/{index.md => index.mdx} |  0
 .../v6/textarea/basic/{index.md => index.mdx} |  0
 .../clear-on-edit/{index.md => index.mdx}     |  0
 .../textarea/theming/{index.md => index.mdx}  |  0
 .../thumbnail/basic/{index.md => index.mdx}   |  0
 .../v6/thumbnail/item/{index.md => index.mdx} |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../v6/title/basic/{index.md => index.mdx}    |  0
 .../basic/{index.md => index.mdx}             |  0
 .../buttons/{index.md => index.mdx}           |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../v6/toast/buttons/{index.md => index.mdx}  |  0
 .../v6/toast/icon/{index.md => index.mdx}     |  0
 .../v6/toast/layout/{index.md => index.mdx}   |  0
 .../controller/{index.md => index.mdx}        |  0
 .../v6/toast/theming/{index.md => index.mdx}  |  0
 .../v6/toggle/basic/{index.md => index.mdx}   |  0
 .../v6/toggle/on-off/{index.md => index.mdx}  |  0
 .../theming/colors/{index.md => index.mdx}    |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../css-shadow-parts/{index.md => index.mdx}  |  0
 .../v6/toolbar/basic/{index.md => index.mdx}  |  0
 .../toolbar/buttons/{index.md => index.mdx}   |  0
 .../progress-bars/{index.md => index.mdx}     |  0
 .../searchbars/{index.md => index.mdx}        |  0
 .../toolbar/segments/{index.md => index.mdx}  |  0
 .../theming/colors/{index.md => index.mdx}    |  0
 .../css-properties/{index.md => index.mdx}    |  0
 .../angular/{lifecycle.md => lifecycle.mdx}   |  0
 .../angular/{navigation.md => navigation.mdx} |  0
 .../angular/{overview.md => overview.mdx}     |  0
 .../{performance.md => performance.mdx}       |  0
 .../angular/{platform.md => platform.mdx}     |  0
 .../version-v6/angular/{pwa.md => pwa.mdx}    |  0
 .../angular/{slides.md => slides.mdx}         |  0
 .../angular/{storage.md => storage.mdx}       |  0
 .../angular/{testing.md => testing.mdx}       |  0
 .../{virtual-scroll.md => virtual-scroll.mdx} |  0
 .../{your-first-app.md => your-first-app.mdx} |  4 +-
 ...2-taking-photos.md => 2-taking-photos.mdx} |  0
 ...3-saving-photos.md => 3-saving-photos.mdx} |  0
 ...loading-photos.md => 4-loading-photos.mdx} |  0
 ...5-adding-mobile.md => 5-adding-mobile.mdx} |  0
 ...oying-mobile.md => 6-deploying-mobile.mdx} |  0
 .../{7-live-reload.md => 7-live-reload.mdx}   |  0
 .../{8-distribute.md => 8-distribute.mdx}     |  0
 versioned_docs/version-v6/{api.md => api.mdx} |  0
 ...accordion-group.md => accordion-group.mdx} | 10 ++--
 .../api/{accordion.md => accordion.mdx}       | 36 ++++++-------
 .../api/{action-sheet.md => action-sheet.mdx} | 16 +++---
 .../version-v6/api/{alert.md => alert.mdx}    | 20 +++----
 .../version-v6/api/{app.md => app.mdx}        | 10 ++--
 .../version-v6/api/{avatar.md => avatar.mdx}  | 18 +++----
 .../api/{back-button.md => back-button.mdx}   | 14 ++---
 .../api/{backdrop.md => backdrop.mdx}         | 14 ++---
 .../version-v6/api/{badge.md => badge.mdx}    | 16 +++---
 .../api/{breadcrumb.md => breadcrumb.mdx}     | 10 ++--
 .../api/{breadcrumbs.md => breadcrumbs.mdx}   | 28 +++++-----
 .../version-v6/api/{button.md => button.mdx}  | 26 ++++-----
 .../api/{buttons.md => buttons.mdx}           | 18 +++----
 .../api/{card-content.md => card-content.mdx} | 10 ++--
 .../api/{card-header.md => card-header.mdx}   | 10 ++--
 .../{card-subtitle.md => card-subtitle.mdx}   | 10 ++--
 .../api/{card-title.md => card-title.mdx}     | 10 ++--
 .../version-v6/api/{card.md => card.mdx}      | 22 ++++----
 .../api/{checkbox.md => checkbox.mdx}         | 16 +++---
 .../version-v6/api/{chip.md => chip.mdx}      | 18 +++----
 .../version-v6/api/{col.md => col.mdx}        | 10 ++--
 .../api/{content.md => content.mdx}           | 28 +++++-----
 ...datetime-button.md => datetime-button.mdx} | 12 ++---
 .../api/{datetime.md => datetime.mdx}         | 54 +++++++++----------
 .../api/{fab-button.md => fab-button.mdx}     | 10 ++--
 .../api/{fab-list.md => fab-list.mdx}         | 10 ++--
 .../version-v6/api/{fab.md => fab.mdx}        | 24 ++++-----
 .../version-v6/api/{footer.md => footer.mdx}  | 20 +++----
 .../version-v6/api/{grid.md => grid.mdx}      | 42 +++++++--------
 .../version-v6/api/{header.md => header.mdx}  | 22 ++++----
 .../version-v6/api/{icon.md => icon.mdx}      |  2 +-
 .../version-v6/api/{img.md => img.mdx}        | 12 ++---
 ...content.md => infinite-scroll-content.mdx} | 12 ++---
 ...infinite-scroll.md => infinite-scroll.mdx} | 16 +++---
 .../version-v6/api/{input.md => input.mdx}    | 30 +++++------
 .../api/{item-divider.md => item-divider.mdx} | 16 +++---
 .../api/{item-group.md => item-group.mdx}     | 14 ++---
 .../api/{item-option.md => item-option.mdx}   | 10 ++--
 .../api/{item-options.md => item-options.mdx} | 10 ++--
 .../api/{item-sliding.md => item-sliding.mdx} | 16 +++---
 .../version-v6/api/{item.md => item.mdx}      | 38 ++++++-------
 .../version-v6/api/{label.md => label.mdx}    | 18 +++----
 .../api/{list-header.md => list-header.mdx}   | 20 +++----
 .../version-v6/api/{list.md => list.mdx}      | 16 +++---
 .../api/{loading.md => loading.mdx}           | 16 +++---
 .../api/{menu-button.md => menu-button.mdx}   | 10 ++--
 .../api/{menu-toggle.md => menu-toggle.mdx}   | 10 ++--
 .../version-v6/api/{menu.md => menu.mdx}      | 18 +++----
 .../version-v6/api/{modal.md => modal.mdx}    | 38 ++++++-------
 .../api/{nav-link.md => nav-link.mdx}         | 10 ++--
 .../version-v6/api/{nav.md => nav.mdx}        | 14 ++---
 .../version-v6/api/{note.md => note.mdx}      | 18 +++----
 .../version-v6/api/{picker.md => picker.mdx}  | 14 ++---
 .../api/{popover.md => popover.mdx}           | 26 ++++-----
 .../api/{progress-bar.md => progress-bar.mdx} | 24 ++++-----
 .../api/{radio-group.md => radio-group.mdx}   | 10 ++--
 .../version-v6/api/{radio.md => radio.mdx}    | 20 +++----
 .../version-v6/api/{range.md => range.mdx}    | 28 +++++-----
 ...esher-content.md => refresher-content.mdx} | 10 ++--
 .../api/{refresher.md => refresher.mdx}       | 20 +++----
 .../{reorder-group.md => reorder-group.mdx}   | 10 ++--
 .../api/{reorder.md => reorder.mdx}           | 22 ++++----
 .../{ripple-effect.md => ripple-effect.mdx}   | 16 +++---
 .../{route-redirect.md => route-redirect.mdx} | 12 ++---
 .../version-v6/api/{route.md => route.mdx}    | 12 ++---
 .../api/{router-link.md => router-link.mdx}   | 10 ++--
 .../{router-outlet.md => router-outlet.mdx}   | 10 ++--
 .../version-v6/api/{router.md => router.mdx}  | 12 ++---
 .../version-v6/api/{row.md => row.mdx}        | 10 ++--
 .../api/{searchbar.md => searchbar.mdx}       | 26 ++++-----
 .../{segment-button.md => segment-button.mdx} | 20 +++----
 .../api/{segment.md => segment.mdx}           | 20 +++----
 .../{select-option.md => select-option.mdx}   | 10 ++--
 .../version-v6/api/{select.md => select.mdx}  | 44 +++++++--------
 .../{skeleton-text.md => skeleton-text.mdx}   | 14 ++---
 .../version-v6/api/{slide.md => slide.mdx}    | 10 ++--
 .../version-v6/api/{slides.md => slides.mdx}  | 12 ++---
 .../api/{spinner.md => spinner.mdx}           | 16 +++---
 .../api/{split-pane.md => split-pane.mdx}     | 14 ++---
 .../api/{tab-bar.md => tab-bar.mdx}           | 12 ++---
 .../api/{tab-button.md => tab-button.mdx}     | 14 ++---
 .../version-v6/api/{tab.md => tab.mdx}        | 14 ++---
 .../version-v6/api/{tabs.md => tabs.mdx}      | 14 ++---
 .../version-v6/api/{text.md => text.mdx}      | 12 ++---
 .../api/{textarea.md => textarea.mdx}         | 18 +++----
 .../api/{thumbnail.md => thumbnail.mdx}       | 16 +++---
 .../version-v6/api/{title.md => title.mdx}    | 20 +++----
 .../version-v6/api/{toast.md => toast.mdx}    | 22 ++++----
 .../version-v6/api/{toggle.md => toggle.mdx}  | 20 +++----
 .../api/{toolbar.md => toolbar.mdx}           | 24 ++++-----
 .../{virtual-scroll.md => virtual-scroll.mdx} | 20 +++----
 versioned_docs/version-v6/{cli.md => cli.mdx} |  0
 .../{configuration.md => configuration.mdx}   |  6 +--
 .../cli/{livereload.md => livereload.mdx}     |  4 +-
 .../{using-a-proxy.md => using-a-proxy.mdx}   |  0
 .../{components.md => components.mdx}         |  2 +-
 .../contributing/{coc.md => coc.mdx}          |  0
 ...to-contribute.md => how-to-contribute.mdx} |  2 +-
 .../{cross-platform.md => cross-platform.mdx} |  6 +--
 .../{fundamentals.md => fundamentals.mdx}     | 10 ++--
 .../core-concepts/{webview.md => webview.mdx} |  8 +--
 ...s.md => what-are-progressive-web-apps.mdx} |  0
 .../{app-store.md => app-store.mdx}           |  0
 .../{desktop-app.md => desktop-app.mdx}       |  0
 ...ive-web-app.md => progressive-web-app.mdx} |  2 +-
 .../{books.md => books.mdx}                   |  0
 .../{courses.md => courses.mdx}               |  0
 .../{guides.md => guides.mdx}                 |  4 +-
 ...creating-photo-gallery-device-storage.mdx} |  0
 .../first-app-v3/{intro.md => intro.mdx}      |  0
 ...droid-camera.md => ios-android-camera.mdx} |  0
 ...y.md => realtime-updates-ionic-deploy.mdx} |  6 +--
 .../first-app-v3/{theming.md => theming.mdx}  |  0
 ...ing.md => track-bugs-ionic-monitoring.mdx} |  0
 ...creating-photo-gallery-device-storage.mdx} |  0
 .../first-app-v4/{intro.md => intro.mdx}      |  2 +-
 ...droid-camera.md => ios-android-camera.mdx} |  2 +-
 .../first-app-v4/{theming.md => theming.mdx}  |  2 +-
 .../{posts.md => posts.mdx}                   |  0
 .../{tools.md => tools.mdx}                   |  2 +-
 .../{videos.md => videos.mdx}                 |  0
 .../developing/{android.md => android.mdx}    | 10 ++--
 .../developing/{config.md => config.mdx}      |  0
 .../config/global/{index.md => index.mdx}     |  0
 .../per-component/{index.md => index.mdx}     |  0
 .../{index.md => index.mdx}                   |  0
 .../{index.md => index.mdx}                   |  0
 .../per-platform/{index.md => index.mdx}      |  0
 ...ack-button.md => hardware-back-button.mdx} |  0
 .../version-v6/developing/{ios.md => ios.mdx} | 10 ++--
 .../developing/{keyboard.md => keyboard.mdx}  |  0
 .../{previewing.md => previewing.mdx}         | 10 ++--
 .../{scaffolding.md => scaffolding.mdx}       |  4 +-
 .../developing/{starting.md => starting.mdx}  |  0
 .../developing/{tips.md => tips.mdx}          |  2 +-
 .../version-v6/{index.md => index.mdx}        | 12 ++---
 .../version-v6/intro/{cdn.md => cdn.mdx}      |  4 +-
 .../version-v6/intro/{cli.md => cli.mdx}      | 10 ++--
 .../intro/{environment.md => environment.mdx} |  8 +--
 .../intro/{first-app.md => first-app.mdx}     |  0
 .../version-v6/intro/{next.md => next.mdx}    |  0
 ...to-ionic-6.md => upgrading-to-ionic-6.mdx} |  0
 ...code-extension.md => vscode-extension.mdx} |  0
 .../{css-utilities.md => css-utilities.mdx}   |  6 +--
 ...-stylesheets.md => global-stylesheets.mdx} | 14 ++---
 .../layout/{structure.md => structure.mdx}    | 10 ++--
 .../{native-faq.md => native-faq.mdx}         |  0
 .../{native-setup.md => native-setup.mdx}     |  2 +-
 .../version-v6/{native.md => native.mdx}      |  0
 .../react/{lifecycle.md => lifecycle.mdx}     |  0
 .../react/{navigation.md => navigation.mdx}   |  0
 .../react/{overlays.md => overlays.mdx}       |  0
 .../react/{overview.md => overview.mdx}       |  0
 .../react/{performance.md => performance.mdx} |  0
 .../react/{platform.md => platform.mdx}       |  0
 .../version-v6/react/{pwa.md => pwa.mdx}      |  0
 .../react/{quickstart.md => quickstart.mdx}   | 14 ++---
 .../react/{slides.md => slides.mdx}           |  0
 .../react/{storage.md => storage.mdx}         |  0
 .../react/{testing.md => testing.mdx}         |  0
 .../{virtual-scroll.md => virtual-scroll.mdx} |  0
 .../{your-first-app.md => your-first-app.mdx} |  2 +-
 ...2-taking-photos.md => 2-taking-photos.mdx} |  0
 ...3-saving-photos.md => 3-saving-photos.mdx} |  0
 ...loading-photos.md => 4-loading-photos.mdx} |  0
 ...5-adding-mobile.md => 5-adding-mobile.mdx} |  0
 ...oying-mobile.md => 6-deploying-mobile.mdx} |  0
 .../{7-live-reload.md => 7-live-reload.mdx}   |  0
 .../{8-distribute.md => 8-distribute.mdx}     |  0
 ...browser-support.md => browser-support.mdx} |  4 +-
 .../reference/{glossary.md => glossary.mdx}   |  0
 .../reference/{migration.md => migration.mdx} |  0
 .../{release-notes.md => release-notes.mdx}   |  0
 .../reference/{support.md => support.mdx}     |  4 +-
 .../{versioning.md => versioning.mdx}         |  0
 .../techniques/{security.md => security.mdx}  |  0
 versioned_docs/version-v6/test/page1.md       |  3 --
 versioned_docs/version-v6/test/page1.mdx      |  3 ++
 versioned_docs/version-v6/test/page2.md       |  3 --
 versioned_docs/version-v6/test/page2.mdx      |  3 ++
 .../theming/{advanced.md => advanced.mdx}     |  8 +--
 .../theming/{basics.md => basics.mdx}         | 10 ++--
 ...color-generator.md => color-generator.mdx} |  0
 .../theming/{colors.md => colors.mdx}         |  8 +--
 ...s-shadow-parts.md => css-shadow-parts.mdx} | 10 ++--
 .../{css-variables.md => css-variables.mdx}   |  4 +-
 .../theming/{dark-mode.md => dark-mode.mdx}   |  8 +--
 ...platform-styles.md => platform-styles.mdx} |  6 +--
 .../theming/{themes.md => themes.mdx}         |  2 +-
 .../troubleshooting/{build.md => build.mdx}   |  0
 .../troubleshooting/{cors.md => cors.mdx}     |  0
 .../{debugging.md => debugging.mdx}           |  2 +-
 .../troubleshooting/{native.md => native.mdx} |  4 +-
 .../{runtime.md => runtime.mdx}               |  0
 .../{animations.md => animations.mdx}         |  2 +-
 .../utilities/{gestures.md => gestures.mdx}   |  2 +-
 .../{build-options.md => build-options.mdx}   |  0
 .../vue/{lifecycle.md => lifecycle.mdx}       |  0
 .../vue/{navigation.md => navigation.mdx}     |  0
 .../vue/{overview.md => overview.mdx}         |  2 +-
 .../vue/{performance.md => performance.mdx}   |  0
 .../vue/{platform.md => platform.mdx}         |  0
 .../version-v6/vue/{pwa.md => pwa.mdx}        |  0
 .../vue/{quickstart.md => quickstart.mdx}     | 14 ++---
 .../version-v6/vue/{slides.md => slides.mdx}  |  0
 .../vue/{storage.md => storage.mdx}           |  0
 .../vue/{testing.md => testing.mdx}           |  0
 ...troubleshooting.md => troubleshooting.mdx} |  6 +--
 ...ity-functions.md => utility-functions.mdx} |  0
 .../{virtual-scroll.md => virtual-scroll.mdx} |  0
 .../{your-first-app.md => your-first-app.mdx} |  2 +-
 ...2-taking-photos.md => 2-taking-photos.mdx} |  0
 ...3-saving-photos.md => 3-saving-photos.mdx} |  0
 ...loading-photos.md => 4-loading-photos.mdx} |  0
 ...5-adding-mobile.md => 5-adding-mobile.mdx} |  0
 ...oying-mobile.md => 6-deploying-mobile.mdx} |  0
 .../{7-live-reload.md => 7-live-reload.mdx}   |  0
 .../{8-distribute.md => 8-distribute.mdx}     |  0
 549 files changed, 938 insertions(+), 938 deletions(-)
 rename static/usage/v6/accordion/accessibility/animations/{index.md => index.mdx} (100%)
 rename static/usage/v6/accordion/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/accordion/customization/advanced-expansion-styles/{index.md => index.mdx} (100%)
 rename static/usage/v6/accordion/customization/expansion-styles/{index.md => index.mdx} (100%)
 rename static/usage/v6/accordion/customization/icons/{index.md => index.mdx} (100%)
 rename static/usage/v6/accordion/customization/theming/{index.md => index.mdx} (100%)
 rename static/usage/v6/accordion/disable-group/{index.md => index.mdx} (100%)
 rename static/usage/v6/accordion/disable/group/{index.md => index.mdx} (100%)
 rename static/usage/v6/accordion/disable/individual/{index.md => index.mdx} (100%)
 rename static/usage/v6/accordion/listen-changes/{index.md => index.mdx} (100%)
 rename static/usage/v6/accordion/multiple/{index.md => index.mdx} (100%)
 rename static/usage/v6/accordion/readonly/group/{index.md => index.mdx} (100%)
 rename static/usage/v6/accordion/readonly/individual/{index.md => index.mdx} (100%)
 rename static/usage/v6/accordion/toggle/{index.md => index.mdx} (100%)
 rename static/usage/v6/action-sheet/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/action-sheet/theming/css-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/action-sheet/theming/styling/{index.md => index.mdx} (100%)
 rename static/usage/v6/alert/buttons/{index.md => index.mdx} (100%)
 rename static/usage/v6/alert/customization/{index.md => index.mdx} (100%)
 rename static/usage/v6/alert/inputs/radios/{index.md => index.mdx} (100%)
 rename static/usage/v6/alert/inputs/text-inputs/{index.md => index.mdx} (100%)
 rename static/usage/v6/alert/presenting/controller/{index.md => index.mdx} (100%)
 rename static/usage/v6/avatar/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/avatar/chip/{index.md => index.mdx} (100%)
 rename static/usage/v6/avatar/item/{index.md => index.mdx} (100%)
 rename static/usage/v6/avatar/theming/css-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/back-button/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/back-button/custom/{index.md => index.mdx} (100%)
 rename static/usage/v6/backdrop/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/backdrop/styling/{index.md => index.mdx} (100%)
 rename static/usage/v6/badge/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/badge/theming/colors/{index.md => index.mdx} (100%)
 rename static/usage/v6/badge/theming/css-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/breadcrumbs/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/{index.md => index.mdx} (100%)
 rename static/usage/v6/breadcrumbs/collapsing-items/items-before-after/{index.md => index.mdx} (100%)
 rename static/usage/v6/breadcrumbs/collapsing-items/max-items/{index.md => index.mdx} (100%)
 rename static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/{index.md => index.mdx} (100%)
 rename static/usage/v6/breadcrumbs/icons/custom-separators/{index.md => index.mdx} (100%)
 rename static/usage/v6/breadcrumbs/icons/icons-on-items/{index.md => index.mdx} (100%)
 rename static/usage/v6/breadcrumbs/theming/colors/{index.md => index.mdx} (100%)
 rename static/usage/v6/breadcrumbs/theming/css-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/button/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/button/expand/{index.md => index.mdx} (100%)
 rename static/usage/v6/button/fill/{index.md => index.mdx} (100%)
 rename static/usage/v6/button/icons/{index.md => index.mdx} (100%)
 rename static/usage/v6/button/shape/{index.md => index.mdx} (100%)
 rename static/usage/v6/button/size/{index.md => index.mdx} (100%)
 rename static/usage/v6/button/theming/colors/{index.md => index.mdx} (100%)
 rename static/usage/v6/button/theming/css-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/buttons/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/buttons/placement/{index.md => index.mdx} (100%)
 rename static/usage/v6/buttons/types/{index.md => index.mdx} (100%)
 rename static/usage/v6/card/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/card/buttons/{index.md => index.mdx} (100%)
 rename static/usage/v6/card/list/{index.md => index.mdx} (100%)
 rename static/usage/v6/card/media/{index.md => index.mdx} (100%)
 rename static/usage/v6/card/theming/colors/{index.md => index.mdx} (100%)
 rename static/usage/v6/card/theming/css-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/checkbox/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/checkbox/indeterminate/{index.md => index.mdx} (100%)
 rename static/usage/v6/checkbox/theming/css-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/chip/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/chip/slots/{index.md => index.mdx} (100%)
 rename static/usage/v6/chip/theming/colors/{index.md => index.mdx} (100%)
 rename static/usage/v6/chip/theming/css-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/content/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/content/fixed/{index.md => index.mdx} (100%)
 rename static/usage/v6/content/fullscreen/{index.md => index.mdx} (100%)
 rename static/usage/v6/content/header-footer/{index.md => index.mdx} (100%)
 rename static/usage/v6/content/scroll-events/{index.md => index.mdx} (100%)
 rename static/usage/v6/content/scroll-methods/{index.md => index.mdx} (100%)
 rename static/usage/v6/content/theming/colors/{index.md => index.mdx} (100%)
 rename static/usage/v6/content/theming/css-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/content/theming/css-shadow-parts/{index.md => index.mdx} (100%)
 rename static/usage/v6/datetime-button/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/datetime/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/datetime/buttons/customizing-button-texts/{index.md => index.mdx} (100%)
 rename static/usage/v6/datetime/buttons/customizing-buttons/{index.md => index.mdx} (100%)
 rename static/usage/v6/datetime/buttons/showing-confirmation-buttons/{index.md => index.mdx} (100%)
 rename static/usage/v6/datetime/date-constraints/advanced/{index.md => index.mdx} (100%)
 rename static/usage/v6/datetime/date-constraints/max-min/{index.md => index.mdx} (100%)
 rename static/usage/v6/datetime/date-constraints/values/{index.md => index.mdx} (100%)
 rename static/usage/v6/datetime/highlightedDates/array/{index.md => index.mdx} (100%)
 rename static/usage/v6/datetime/highlightedDates/callback/{index.md => index.mdx} (100%)
 rename static/usage/v6/datetime/localization/custom-locale/{index.md => index.mdx} (100%)
 rename static/usage/v6/datetime/localization/first-day-of-week/{index.md => index.mdx} (100%)
 rename static/usage/v6/datetime/localization/hour-cycle/{index.md => index.mdx} (100%)
 rename static/usage/v6/datetime/localization/locale-extension-tags/{index.md => index.mdx} (100%)
 rename static/usage/v6/datetime/localization/time-label/{index.md => index.mdx} (100%)
 rename static/usage/v6/datetime/multiple/{index.md => index.mdx} (100%)
 rename static/usage/v6/datetime/presentation/date/{index.md => index.mdx} (100%)
 rename static/usage/v6/datetime/presentation/month-and-year/{index.md => index.mdx} (100%)
 rename static/usage/v6/datetime/presentation/time/{index.md => index.mdx} (100%)
 rename static/usage/v6/datetime/presentation/wheel/{index.md => index.mdx} (100%)
 rename static/usage/v6/datetime/theming/{index.md => index.mdx} (100%)
 rename static/usage/v6/datetime/title/customizing-title/{index.md => index.mdx} (100%)
 rename static/usage/v6/datetime/title/showing-default-title/{index.md => index.mdx} (100%)
 rename static/usage/v6/fab/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/fab/button-sizing/{index.md => index.mdx} (100%)
 rename static/usage/v6/fab/list-side/{index.md => index.mdx} (100%)
 rename static/usage/v6/fab/positioning/{index.md => index.mdx} (100%)
 rename static/usage/v6/fab/theming/colors/{index.md => index.mdx} (100%)
 rename static/usage/v6/fab/theming/css-custom-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/fab/theming/css-shadow-parts/{index.md => index.mdx} (100%)
 rename static/usage/v6/footer/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/footer/custom-scroll-target/{index.md => index.mdx} (100%)
 rename static/usage/v6/footer/fade/{index.md => index.mdx} (100%)
 rename static/usage/v6/footer/no-border/{index.md => index.mdx} (100%)
 rename static/usage/v6/footer/translucent/{index.md => index.mdx} (100%)
 rename static/usage/v6/grid/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/grid/customizing/column-number/{index.md => index.mdx} (100%)
 rename static/usage/v6/grid/customizing/padding/{index.md => index.mdx} (100%)
 rename static/usage/v6/grid/customizing/width/{index.md => index.mdx} (100%)
 rename static/usage/v6/grid/fixed/{index.md => index.mdx} (100%)
 rename static/usage/v6/grid/horizontal-alignment/{index.md => index.mdx} (100%)
 rename static/usage/v6/grid/offset-responsive/{index.md => index.mdx} (100%)
 rename static/usage/v6/grid/offset/{index.md => index.mdx} (100%)
 rename static/usage/v6/grid/push-pull-responsive/{index.md => index.mdx} (100%)
 rename static/usage/v6/grid/push-pull/{index.md => index.mdx} (100%)
 rename static/usage/v6/grid/size-auto/{index.md => index.mdx} (100%)
 rename static/usage/v6/grid/size-responsive/{index.md => index.mdx} (100%)
 rename static/usage/v6/grid/size/{index.md => index.mdx} (100%)
 rename static/usage/v6/grid/vertical-alignment/{index.md => index.mdx} (100%)
 rename static/usage/v6/header/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/header/condense/{index.md => index.mdx} (100%)
 rename static/usage/v6/header/custom-scroll-target/{index.md => index.mdx} (100%)
 rename static/usage/v6/header/fade/{index.md => index.mdx} (100%)
 rename static/usage/v6/header/no-border/{index.md => index.mdx} (100%)
 rename static/usage/v6/header/translucent/{index.md => index.mdx} (100%)
 rename static/usage/v6/icon/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/img/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/infinite-scroll/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/infinite-scroll/custom-infinite-scroll-content/{index.md => index.mdx} (100%)
 rename static/usage/v6/infinite-scroll/infinite-scroll-content/{index.md => index.mdx} (100%)
 rename static/usage/v6/input/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/input/clear/{index.md => index.mdx} (100%)
 rename static/usage/v6/input/fill/{index.md => index.mdx} (100%)
 rename static/usage/v6/input/filtering/{index.md => index.mdx} (100%)
 rename static/usage/v6/input/labels/{index.md => index.mdx} (100%)
 rename static/usage/v6/input/theming/colors/{index.md => index.mdx} (100%)
 rename static/usage/v6/input/theming/css-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/input/types/{index.md => index.mdx} (100%)
 rename static/usage/v6/item-divider/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/item-divider/theming/colors/{index.md => index.mdx} (100%)
 rename static/usage/v6/item-divider/theming/css-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/item-group/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/item-group/sliding-items/{index.md => index.mdx} (100%)
 rename static/usage/v6/item-sliding/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/item-sliding/expandable/{index.md => index.mdx} (100%)
 rename static/usage/v6/item-sliding/icons/{index.md => index.mdx} (100%)
 rename static/usage/v6/item/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/item/buttons/{index.md => index.mdx} (100%)
 rename static/usage/v6/item/clickable/{index.md => index.mdx} (100%)
 rename static/usage/v6/item/counter/{index.md => index.mdx} (100%)
 rename static/usage/v6/item/detail-arrows/{index.md => index.mdx} (100%)
 rename static/usage/v6/item/helper-error/{index.md => index.mdx} (100%)
 rename static/usage/v6/item/icons/{index.md => index.mdx} (100%)
 rename static/usage/v6/item/inputs/{index.md => index.mdx} (100%)
 rename static/usage/v6/item/lines/{index.md => index.mdx} (100%)
 rename static/usage/v6/item/media/{index.md => index.mdx} (100%)
 rename static/usage/v6/item/theming/colors/{index.md => index.mdx} (100%)
 rename static/usage/v6/item/theming/css-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/item/theming/css-shadow-parts/{index.md => index.mdx} (100%)
 rename static/usage/v6/item/theming/input-highlight/{index.md => index.mdx} (100%)
 rename static/usage/v6/label/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/label/input/{index.md => index.mdx} (100%)
 rename static/usage/v6/label/item/{index.md => index.mdx} (100%)
 rename static/usage/v6/label/theming/colors/{index.md => index.mdx} (100%)
 rename static/usage/v6/list-header/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/list-header/buttons/{index.md => index.mdx} (100%)
 rename static/usage/v6/list-header/lines/{index.md => index.mdx} (100%)
 rename static/usage/v6/list-header/theming/colors/{index.md => index.mdx} (100%)
 rename static/usage/v6/list-header/theming/css-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/list/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/list/inset/{index.md => index.mdx} (100%)
 rename static/usage/v6/list/lines/{index.md => index.mdx} (100%)
 rename static/usage/v6/loading/controller/{index.md => index.mdx} (100%)
 rename static/usage/v6/loading/spinners/{index.md => index.mdx} (100%)
 rename static/usage/v6/loading/theming/{index.md => index.mdx} (100%)
 rename static/usage/v6/menu/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/menu/theming/{index.md => index.mdx} (100%)
 rename static/usage/v6/menu/toggle/{index.md => index.mdx} (100%)
 rename static/usage/v6/menu/type/{index.md => index.mdx} (100%)
 rename static/usage/v6/modal/can-dismiss/boolean/{index.md => index.mdx} (100%)
 rename static/usage/v6/modal/can-dismiss/function/{index.md => index.mdx} (100%)
 rename static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/{index.md => index.mdx} (100%)
 rename static/usage/v6/modal/card/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/modal/controller/{index.md => index.mdx} (100%)
 rename static/usage/v6/modal/custom-dialogs/{index.md => index.mdx} (100%)
 rename static/usage/v6/modal/inline/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/modal/inline/is-open/{index.md => index.mdx} (100%)
 rename static/usage/v6/modal/performance/mount/{index.md => index.mdx} (100%)
 rename static/usage/v6/modal/sheet/background-content/{index.md => index.mdx} (100%)
 rename static/usage/v6/modal/sheet/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/modal/sheet/handle-behavior/{index.md => index.mdx} (100%)
 rename static/usage/v6/modal/styling/animations/{index.md => index.mdx} (100%)
 rename static/usage/v6/modal/styling/theming/{index.md => index.mdx} (100%)
 rename static/usage/v6/nav/modal-navigation/{index.md => index.mdx} (100%)
 rename static/usage/v6/nav/nav-link/{index.md => index.mdx} (100%)
 rename static/usage/v6/note/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/note/item/{index.md => index.mdx} (100%)
 rename static/usage/v6/note/theming/colors/{index.md => index.mdx} (100%)
 rename static/usage/v6/note/theming/css-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/picker/multiple-column/{index.md => index.mdx} (100%)
 rename static/usage/v6/picker/single-column/{index.md => index.mdx} (100%)
 rename static/usage/v6/popover/customization/positioning/{index.md => index.mdx} (100%)
 rename static/usage/v6/popover/customization/sizing/{index.md => index.mdx} (100%)
 rename static/usage/v6/popover/customization/styling/{index.md => index.mdx} (100%)
 rename static/usage/v6/popover/nested/{index.md => index.mdx} (100%)
 rename static/usage/v6/popover/performance/mount/{index.md => index.mdx} (100%)
 rename static/usage/v6/popover/presenting/controller/{index.md => index.mdx} (100%)
 rename static/usage/v6/popover/presenting/inline-isopen/{index.md => index.mdx} (100%)
 rename static/usage/v6/popover/presenting/inline-trigger/{index.md => index.mdx} (100%)
 rename static/usage/v6/progress-bar/buffer/{index.md => index.mdx} (100%)
 rename static/usage/v6/progress-bar/determinate/{index.md => index.mdx} (100%)
 rename static/usage/v6/progress-bar/indeterminate/{index.md => index.mdx} (100%)
 rename static/usage/v6/progress-bar/theming/colors/{index.md => index.mdx} (100%)
 rename static/usage/v6/progress-bar/theming/css-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/progress-bar/theming/css-shadow-parts/{index.md => index.mdx} (100%)
 rename static/usage/v6/radio/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/radio/empty-selection/{index.md => index.mdx} (100%)
 rename static/usage/v6/radio/theming/colors/{index.md => index.mdx} (100%)
 rename static/usage/v6/radio/theming/css-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/radio/theming/css-shadow-parts/{index.md => index.mdx} (100%)
 rename static/usage/v6/range/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/range/dual-knobs/{index.md => index.mdx} (100%)
 rename static/usage/v6/range/ion-change-event/{index.md => index.mdx} (100%)
 rename static/usage/v6/range/ion-knob-move-event/{index.md => index.mdx} (100%)
 rename static/usage/v6/range/pins/{index.md => index.mdx} (100%)
 rename static/usage/v6/range/slots/{index.md => index.mdx} (100%)
 rename static/usage/v6/range/snapping-ticks/{index.md => index.mdx} (100%)
 rename static/usage/v6/range/theming/css-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/range/theming/css-shadow-parts/{index.md => index.mdx} (100%)
 rename static/usage/v6/refresher/advanced/{index.md => index.mdx} (100%)
 rename static/usage/v6/refresher/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/refresher/custom-content/{index.md => index.mdx} (100%)
 rename static/usage/v6/refresher/custom-scroll-target/{index.md => index.mdx} (100%)
 rename static/usage/v6/refresher/pull-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/reorder/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/reorder/custom-icon/{index.md => index.mdx} (100%)
 rename static/usage/v6/reorder/custom-scroll-target/{index.md => index.mdx} (100%)
 rename static/usage/v6/reorder/toggling-disabled/{index.md => index.mdx} (100%)
 rename static/usage/v6/reorder/updating-data/{index.md => index.mdx} (100%)
 rename static/usage/v6/reorder/wrapper/{index.md => index.mdx} (100%)
 rename static/usage/v6/ripple-effect/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/ripple-effect/customizing/{index.md => index.mdx} (100%)
 rename static/usage/v6/ripple-effect/type/{index.md => index.mdx} (100%)
 rename static/usage/v6/router/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/searchbar/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/searchbar/cancel-button/{index.md => index.mdx} (100%)
 rename static/usage/v6/searchbar/clear-button/{index.md => index.mdx} (100%)
 rename static/usage/v6/searchbar/debounce/{index.md => index.mdx} (100%)
 rename static/usage/v6/searchbar/search-icon/{index.md => index.mdx} (100%)
 rename static/usage/v6/searchbar/theming/colors/{index.md => index.mdx} (100%)
 rename static/usage/v6/searchbar/theming/css-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/segment-button/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/segment-button/layout/{index.md => index.mdx} (100%)
 rename static/usage/v6/segment-button/theming/css-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/segment-button/theming/css-shadow-parts/{index.md => index.mdx} (100%)
 rename static/usage/v6/segment/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/segment/scrollable/{index.md => index.mdx} (100%)
 rename static/usage/v6/segment/theming/colors/{index.md => index.mdx} (100%)
 rename static/usage/v6/segment/theming/css-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/select/basic/multiple-selection/{index.md => index.mdx} (100%)
 rename static/usage/v6/select/basic/responding-to-interaction/{index.md => index.mdx} (100%)
 rename static/usage/v6/select/basic/single-selection/{index.md => index.mdx} (100%)
 rename static/usage/v6/select/customization/button-text/{index.md => index.mdx} (100%)
 rename static/usage/v6/select/customization/interface-options/{index.md => index.mdx} (100%)
 rename static/usage/v6/select/customization/styling-select/{index.md => index.mdx} (100%)
 rename static/usage/v6/select/interfaces/action-sheet/{index.md => index.mdx} (100%)
 rename static/usage/v6/select/interfaces/popover/{index.md => index.mdx} (100%)
 rename static/usage/v6/select/objects-as-values/multiple-selection/{index.md => index.mdx} (100%)
 rename static/usage/v6/select/objects-as-values/using-comparewith/{index.md => index.mdx} (100%)
 rename static/usage/v6/select/typeahead/{index.md => index.mdx} (100%)
 rename static/usage/v6/skeleton-text/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/skeleton-text/theming/css-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/spinner/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/spinner/theming/colors/{index.md => index.mdx} (100%)
 rename static/usage/v6/spinner/theming/css-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/split-pane/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/split-pane/theming/css-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/tabs/router/{index.md => index.mdx} (100%)
 rename static/usage/v6/text/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/textarea/autogrow/{index.md => index.mdx} (100%)
 rename static/usage/v6/textarea/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/textarea/clear-on-edit/{index.md => index.mdx} (100%)
 rename static/usage/v6/textarea/theming/{index.md => index.mdx} (100%)
 rename static/usage/v6/thumbnail/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/thumbnail/item/{index.md => index.mdx} (100%)
 rename static/usage/v6/thumbnail/theming/css-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/title/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/title/collapsible-large-title/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/title/collapsible-large-title/buttons/{index.md => index.mdx} (100%)
 rename static/usage/v6/title/theming/css-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/toast/buttons/{index.md => index.mdx} (100%)
 rename static/usage/v6/toast/icon/{index.md => index.mdx} (100%)
 rename static/usage/v6/toast/layout/{index.md => index.mdx} (100%)
 rename static/usage/v6/toast/presenting/controller/{index.md => index.mdx} (100%)
 rename static/usage/v6/toast/theming/{index.md => index.mdx} (100%)
 rename static/usage/v6/toggle/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/toggle/on-off/{index.md => index.mdx} (100%)
 rename static/usage/v6/toggle/theming/colors/{index.md => index.mdx} (100%)
 rename static/usage/v6/toggle/theming/css-properties/{index.md => index.mdx} (100%)
 rename static/usage/v6/toggle/theming/css-shadow-parts/{index.md => index.mdx} (100%)
 rename static/usage/v6/toolbar/basic/{index.md => index.mdx} (100%)
 rename static/usage/v6/toolbar/buttons/{index.md => index.mdx} (100%)
 rename static/usage/v6/toolbar/progress-bars/{index.md => index.mdx} (100%)
 rename static/usage/v6/toolbar/searchbars/{index.md => index.mdx} (100%)
 rename static/usage/v6/toolbar/segments/{index.md => index.mdx} (100%)
 rename static/usage/v6/toolbar/theming/colors/{index.md => index.mdx} (100%)
 rename static/usage/v6/toolbar/theming/css-properties/{index.md => index.mdx} (100%)
 rename versioned_docs/version-v6/angular/{lifecycle.md => lifecycle.mdx} (100%)
 rename versioned_docs/version-v6/angular/{navigation.md => navigation.mdx} (100%)
 rename versioned_docs/version-v6/angular/{overview.md => overview.mdx} (100%)
 rename versioned_docs/version-v6/angular/{performance.md => performance.mdx} (100%)
 rename versioned_docs/version-v6/angular/{platform.md => platform.mdx} (100%)
 rename versioned_docs/version-v6/angular/{pwa.md => pwa.mdx} (100%)
 rename versioned_docs/version-v6/angular/{slides.md => slides.mdx} (100%)
 rename versioned_docs/version-v6/angular/{storage.md => storage.mdx} (100%)
 rename versioned_docs/version-v6/angular/{testing.md => testing.mdx} (100%)
 rename versioned_docs/version-v6/angular/{virtual-scroll.md => virtual-scroll.mdx} (100%)
 rename versioned_docs/version-v6/angular/{your-first-app.md => your-first-app.mdx} (98%)
 rename versioned_docs/version-v6/angular/your-first-app/{2-taking-photos.md => 2-taking-photos.mdx} (100%)
 rename versioned_docs/version-v6/angular/your-first-app/{3-saving-photos.md => 3-saving-photos.mdx} (100%)
 rename versioned_docs/version-v6/angular/your-first-app/{4-loading-photos.md => 4-loading-photos.mdx} (100%)
 rename versioned_docs/version-v6/angular/your-first-app/{5-adding-mobile.md => 5-adding-mobile.mdx} (100%)
 rename versioned_docs/version-v6/angular/your-first-app/{6-deploying-mobile.md => 6-deploying-mobile.mdx} (100%)
 rename versioned_docs/version-v6/angular/your-first-app/{7-live-reload.md => 7-live-reload.mdx} (100%)
 rename versioned_docs/version-v6/angular/your-first-app/{8-distribute.md => 8-distribute.mdx} (100%)
 rename versioned_docs/version-v6/{api.md => api.mdx} (100%)
 rename versioned_docs/version-v6/api/{accordion-group.md => accordion-group.mdx} (94%)
 rename versioned_docs/version-v6/api/{accordion.md => accordion.mdx} (96%)
 rename versioned_docs/version-v6/api/{action-sheet.md => action-sheet.mdx} (97%)
 rename versioned_docs/version-v6/api/{alert.md => alert.mdx} (98%)
 rename versioned_docs/version-v6/api/{app.md => app.mdx} (98%)
 rename versioned_docs/version-v6/api/{avatar.md => avatar.mdx} (86%)
 rename versioned_docs/version-v6/api/{back-button.md => back-button.mdx} (96%)
 rename versioned_docs/version-v6/api/{backdrop.md => backdrop.mdx} (95%)
 rename versioned_docs/version-v6/api/{badge.md => badge.mdx} (92%)
 rename versioned_docs/version-v6/api/{breadcrumb.md => breadcrumb.mdx} (96%)
 rename versioned_docs/version-v6/api/{breadcrumbs.md => breadcrumbs.mdx} (88%)
 rename versioned_docs/version-v6/api/{button.md => button.mdx} (85%)
 rename versioned_docs/version-v6/api/{buttons.md => buttons.mdx} (92%)
 rename versioned_docs/version-v6/api/{card-content.md => card-content.mdx} (92%)
 rename versioned_docs/version-v6/api/{card-header.md => card-header.mdx} (93%)
 rename versioned_docs/version-v6/api/{card-subtitle.md => card-subtitle.mdx} (92%)
 rename versioned_docs/version-v6/api/{card-title.md => card-title.mdx} (95%)
 rename versioned_docs/version-v6/api/{card.md => card.mdx} (87%)
 rename versioned_docs/version-v6/api/{checkbox.md => checkbox.mdx} (95%)
 rename versioned_docs/version-v6/api/{chip.md => chip.mdx} (92%)
 rename versioned_docs/version-v6/api/{col.md => col.mdx} (98%)
 rename versioned_docs/version-v6/api/{content.md => content.mdx} (93%)
 rename versioned_docs/version-v6/api/{datetime-button.md => datetime-button.mdx} (96%)
 rename versioned_docs/version-v6/api/{datetime.md => datetime.mdx} (96%)
 rename versioned_docs/version-v6/api/{fab-button.md => fab-button.mdx} (96%)
 rename versioned_docs/version-v6/api/{fab-list.md => fab-list.mdx} (95%)
 rename versioned_docs/version-v6/api/{fab.md => fab.mdx} (95%)
 rename versioned_docs/version-v6/api/{footer.md => footer.mdx} (92%)
 rename versioned_docs/version-v6/api/{grid.md => grid.mdx} (92%)
 rename versioned_docs/version-v6/api/{header.md => header.mdx} (93%)
 rename versioned_docs/version-v6/api/{icon.md => icon.mdx} (92%)
 rename versioned_docs/version-v6/api/{img.md => img.mdx} (94%)
 rename versioned_docs/version-v6/api/{infinite-scroll-content.md => infinite-scroll-content.mdx} (85%)
 rename versioned_docs/version-v6/api/{infinite-scroll.md => infinite-scroll.mdx} (95%)
 rename versioned_docs/version-v6/api/{input.md => input.mdx} (92%)
 rename versioned_docs/version-v6/api/{item-divider.md => item-divider.mdx} (92%)
 rename versioned_docs/version-v6/api/{item-group.md => item-group.mdx} (94%)
 rename versioned_docs/version-v6/api/{item-option.md => item-option.mdx} (95%)
 rename versioned_docs/version-v6/api/{item-options.md => item-options.mdx} (96%)
 rename versioned_docs/version-v6/api/{item-sliding.md => item-sliding.mdx} (96%)
 rename versioned_docs/version-v6/api/{item.md => item.mdx} (92%)
 rename versioned_docs/version-v6/api/{label.md => label.mdx} (85%)
 rename versioned_docs/version-v6/api/{list-header.md => list-header.mdx} (92%)
 rename versioned_docs/version-v6/api/{list.md => list.mdx} (89%)
 rename versioned_docs/version-v6/api/{loading.md => loading.mdx} (98%)
 rename versioned_docs/version-v6/api/{menu-button.md => menu-button.mdx} (94%)
 rename versioned_docs/version-v6/api/{menu-toggle.md => menu-toggle.mdx} (95%)
 rename versioned_docs/version-v6/api/{menu.md => menu.mdx} (95%)
 rename versioned_docs/version-v6/api/{modal.md => modal.mdx} (97%)
 rename versioned_docs/version-v6/api/{nav-link.md => nav-link.mdx} (96%)
 rename versioned_docs/version-v6/api/{nav.md => nav.mdx} (97%)
 rename versioned_docs/version-v6/api/{note.md => note.mdx} (88%)
 rename versioned_docs/version-v6/api/{picker.md => picker.mdx} (97%)
 rename versioned_docs/version-v6/api/{popover.md => popover.mdx} (98%)
 rename versioned_docs/version-v6/api/{progress-bar.md => progress-bar.mdx} (92%)
 rename versioned_docs/version-v6/api/{radio-group.md => radio-group.mdx} (96%)
 rename versioned_docs/version-v6/api/{radio.md => radio.mdx} (92%)
 rename versioned_docs/version-v6/api/{range.md => range.mdx} (94%)
 rename versioned_docs/version-v6/api/{refresher-content.md => refresher-content.mdx} (91%)
 rename versioned_docs/version-v6/api/{refresher.md => refresher.mdx} (97%)
 rename versioned_docs/version-v6/api/{reorder-group.md => reorder-group.mdx} (96%)
 rename versioned_docs/version-v6/api/{reorder.md => reorder.mdx} (94%)
 rename versioned_docs/version-v6/api/{ripple-effect.md => ripple-effect.mdx} (95%)
 rename versioned_docs/version-v6/api/{route-redirect.md => route-redirect.mdx} (96%)
 rename versioned_docs/version-v6/api/{route.md => route.mdx} (98%)
 rename versioned_docs/version-v6/api/{router-link.md => router-link.mdx} (95%)
 rename versioned_docs/version-v6/api/{router-outlet.md => router-outlet.mdx} (96%)
 rename versioned_docs/version-v6/api/{router.md => router.mdx} (98%)
 rename versioned_docs/version-v6/api/{row.md => row.mdx} (98%)
 rename versioned_docs/version-v6/api/{searchbar.md => searchbar.mdx} (96%)
 rename versioned_docs/version-v6/api/{segment-button.md => segment-button.mdx} (83%)
 rename versioned_docs/version-v6/api/{segment.md => segment.mdx} (96%)
 rename versioned_docs/version-v6/api/{select-option.md => select-option.mdx} (94%)
 rename versioned_docs/version-v6/api/{select.md => select.mdx} (84%)
 rename versioned_docs/version-v6/api/{skeleton-text.md => skeleton-text.mdx} (92%)
 rename versioned_docs/version-v6/api/{slide.md => slide.mdx} (97%)
 rename versioned_docs/version-v6/api/{slides.md => slides.mdx} (99%)
 rename versioned_docs/version-v6/api/{spinner.md => spinner.mdx} (91%)
 rename versioned_docs/version-v6/api/{split-pane.md => split-pane.mdx} (97%)
 rename versioned_docs/version-v6/api/{tab-bar.md => tab-bar.mdx} (96%)
 rename versioned_docs/version-v6/api/{tab-button.md => tab-button.mdx} (95%)
 rename versioned_docs/version-v6/api/{tab.md => tab.mdx} (79%)
 rename versioned_docs/version-v6/api/{tabs.md => tabs.mdx} (94%)
 rename versioned_docs/version-v6/api/{text.md => text.mdx} (93%)
 rename versioned_docs/version-v6/api/{textarea.md => textarea.mdx} (95%)
 rename versioned_docs/version-v6/api/{thumbnail.md => thumbnail.mdx} (91%)
 rename versioned_docs/version-v6/api/{title.md => title.mdx} (87%)
 rename versioned_docs/version-v6/api/{toast.md => toast.mdx} (98%)
 rename versioned_docs/version-v6/api/{toggle.md => toggle.mdx} (92%)
 rename versioned_docs/version-v6/api/{toolbar.md => toolbar.mdx} (95%)
 rename versioned_docs/version-v6/api/{virtual-scroll.md => virtual-scroll.mdx} (96%)
 rename versioned_docs/version-v6/{cli.md => cli.mdx} (100%)
 rename versioned_docs/version-v6/cli/{configuration.md => configuration.mdx} (98%)
 rename versioned_docs/version-v6/cli/{livereload.md => livereload.mdx} (96%)
 rename versioned_docs/version-v6/cli/{using-a-proxy.md => using-a-proxy.mdx} (100%)
 rename versioned_docs/version-v6/{components.md => components.mdx} (98%)
 rename versioned_docs/version-v6/contributing/{coc.md => coc.mdx} (100%)
 rename versioned_docs/version-v6/contributing/{how-to-contribute.md => how-to-contribute.mdx} (99%)
 rename versioned_docs/version-v6/core-concepts/{cross-platform.md => cross-platform.mdx} (93%)
 rename versioned_docs/version-v6/core-concepts/{fundamentals.md => fundamentals.mdx} (85%)
 rename versioned_docs/version-v6/core-concepts/{webview.md => webview.mdx} (80%)
 rename versioned_docs/version-v6/core-concepts/{what-are-progressive-web-apps.md => what-are-progressive-web-apps.mdx} (100%)
 rename versioned_docs/version-v6/deployment/{app-store.md => app-store.mdx} (100%)
 rename versioned_docs/version-v6/deployment/{desktop-app.md => desktop-app.mdx} (100%)
 rename versioned_docs/version-v6/deployment/{progressive-web-app.md => progressive-web-app.mdx} (97%)
 rename versioned_docs/version-v6/developer-resources/{books.md => books.mdx} (100%)
 rename versioned_docs/version-v6/developer-resources/{courses.md => courses.mdx} (100%)
 rename versioned_docs/version-v6/developer-resources/{guides.md => guides.mdx} (76%)
 rename versioned_docs/version-v6/developer-resources/guides/first-app-v3/{creating-photo-gallery-device-storage.md => creating-photo-gallery-device-storage.mdx} (100%)
 rename versioned_docs/version-v6/developer-resources/guides/first-app-v3/{intro.md => intro.mdx} (100%)
 rename versioned_docs/version-v6/developer-resources/guides/first-app-v3/{ios-android-camera.md => ios-android-camera.mdx} (100%)
 rename versioned_docs/version-v6/developer-resources/guides/first-app-v3/{realtime-updates-ionic-deploy.md => realtime-updates-ionic-deploy.mdx} (94%)
 rename versioned_docs/version-v6/developer-resources/guides/first-app-v3/{theming.md => theming.mdx} (100%)
 rename versioned_docs/version-v6/developer-resources/guides/first-app-v3/{track-bugs-ionic-monitoring.md => track-bugs-ionic-monitoring.mdx} (100%)
 rename versioned_docs/version-v6/developer-resources/guides/first-app-v4/{creating-photo-gallery-device-storage.md => creating-photo-gallery-device-storage.mdx} (100%)
 rename versioned_docs/version-v6/developer-resources/guides/first-app-v4/{intro.md => intro.mdx} (98%)
 rename versioned_docs/version-v6/developer-resources/guides/first-app-v4/{ios-android-camera.md => ios-android-camera.mdx} (98%)
 rename versioned_docs/version-v6/developer-resources/guides/first-app-v4/{theming.md => theming.mdx} (92%)
 rename versioned_docs/version-v6/developer-resources/{posts.md => posts.mdx} (100%)
 rename versioned_docs/version-v6/developer-resources/{tools.md => tools.mdx} (92%)
 rename versioned_docs/version-v6/developer-resources/{videos.md => videos.mdx} (100%)
 rename versioned_docs/version-v6/developing/{android.md => android.mdx} (94%)
 rename versioned_docs/version-v6/developing/{config.md => config.mdx} (100%)
 rename versioned_docs/version-v6/developing/config/global/{index.md => index.mdx} (100%)
 rename versioned_docs/version-v6/developing/config/per-component/{index.md => index.mdx} (100%)
 rename versioned_docs/version-v6/developing/config/per-platform-fallback/{index.md => index.mdx} (100%)
 rename versioned_docs/version-v6/developing/config/per-platform-overrides/{index.md => index.mdx} (100%)
 rename versioned_docs/version-v6/developing/config/per-platform/{index.md => index.mdx} (100%)
 rename versioned_docs/version-v6/developing/{hardware-back-button.md => hardware-back-button.mdx} (100%)
 rename versioned_docs/version-v6/developing/{ios.md => ios.mdx} (94%)
 rename versioned_docs/version-v6/developing/{keyboard.md => keyboard.mdx} (100%)
 rename versioned_docs/version-v6/developing/{previewing.md => previewing.mdx} (94%)
 rename versioned_docs/version-v6/developing/{scaffolding.md => scaffolding.mdx} (91%)
 rename versioned_docs/version-v6/developing/{starting.md => starting.mdx} (100%)
 rename versioned_docs/version-v6/developing/{tips.md => tips.mdx} (98%)
 rename versioned_docs/version-v6/{index.md => index.mdx} (86%)
 rename versioned_docs/version-v6/intro/{cdn.md => cdn.mdx} (94%)
 rename versioned_docs/version-v6/intro/{cli.md => cli.mdx} (79%)
 rename versioned_docs/version-v6/intro/{environment.md => environment.mdx} (86%)
 rename versioned_docs/version-v6/intro/{first-app.md => first-app.mdx} (100%)
 rename versioned_docs/version-v6/intro/{next.md => next.mdx} (100%)
 rename versioned_docs/version-v6/intro/{upgrading-to-ionic-6.md => upgrading-to-ionic-6.mdx} (100%)
 rename versioned_docs/version-v6/intro/{vscode-extension.md => vscode-extension.mdx} (100%)
 rename versioned_docs/version-v6/layout/{css-utilities.md => css-utilities.mdx} (98%)
 rename versioned_docs/version-v6/layout/{global-stylesheets.md => global-stylesheets.mdx} (81%)
 rename versioned_docs/version-v6/layout/{structure.md => structure.mdx} (87%)
 rename versioned_docs/version-v6/{native-faq.md => native-faq.mdx} (100%)
 rename versioned_docs/version-v6/{native-setup.md => native-setup.mdx} (97%)
 rename versioned_docs/version-v6/{native.md => native.mdx} (100%)
 rename versioned_docs/version-v6/react/{lifecycle.md => lifecycle.mdx} (100%)
 rename versioned_docs/version-v6/react/{navigation.md => navigation.mdx} (100%)
 rename versioned_docs/version-v6/react/{overlays.md => overlays.mdx} (100%)
 rename versioned_docs/version-v6/react/{overview.md => overview.mdx} (100%)
 rename versioned_docs/version-v6/react/{performance.md => performance.mdx} (100%)
 rename versioned_docs/version-v6/react/{platform.md => platform.mdx} (100%)
 rename versioned_docs/version-v6/react/{pwa.md => pwa.mdx} (100%)
 rename versioned_docs/version-v6/react/{quickstart.md => quickstart.mdx} (93%)
 rename versioned_docs/version-v6/react/{slides.md => slides.mdx} (100%)
 rename versioned_docs/version-v6/react/{storage.md => storage.mdx} (100%)
 rename versioned_docs/version-v6/react/{testing.md => testing.mdx} (100%)
 rename versioned_docs/version-v6/react/{virtual-scroll.md => virtual-scroll.mdx} (100%)
 rename versioned_docs/version-v6/react/{your-first-app.md => your-first-app.mdx} (99%)
 rename versioned_docs/version-v6/react/your-first-app/{2-taking-photos.md => 2-taking-photos.mdx} (100%)
 rename versioned_docs/version-v6/react/your-first-app/{3-saving-photos.md => 3-saving-photos.mdx} (100%)
 rename versioned_docs/version-v6/react/your-first-app/{4-loading-photos.md => 4-loading-photos.mdx} (100%)
 rename versioned_docs/version-v6/react/your-first-app/{5-adding-mobile.md => 5-adding-mobile.mdx} (100%)
 rename versioned_docs/version-v6/react/your-first-app/{6-deploying-mobile.md => 6-deploying-mobile.mdx} (100%)
 rename versioned_docs/version-v6/react/your-first-app/{7-live-reload.md => 7-live-reload.mdx} (100%)
 rename versioned_docs/version-v6/react/your-first-app/{8-distribute.md => 8-distribute.mdx} (100%)
 rename versioned_docs/version-v6/reference/{browser-support.md => browser-support.mdx} (95%)
 rename versioned_docs/version-v6/reference/{glossary.md => glossary.mdx} (100%)
 rename versioned_docs/version-v6/reference/{migration.md => migration.mdx} (100%)
 rename versioned_docs/version-v6/reference/{release-notes.md => release-notes.mdx} (100%)
 rename versioned_docs/version-v6/reference/{support.md => support.mdx} (99%)
 rename versioned_docs/version-v6/reference/{versioning.md => versioning.mdx} (100%)
 rename versioned_docs/version-v6/techniques/{security.md => security.mdx} (100%)
 delete mode 100644 versioned_docs/version-v6/test/page1.md
 create mode 100644 versioned_docs/version-v6/test/page1.mdx
 delete mode 100644 versioned_docs/version-v6/test/page2.md
 create mode 100644 versioned_docs/version-v6/test/page2.mdx
 rename versioned_docs/version-v6/theming/{advanced.md => advanced.mdx} (96%)
 rename versioned_docs/version-v6/theming/{basics.md => basics.mdx} (90%)
 rename versioned_docs/version-v6/theming/{color-generator.md => color-generator.mdx} (100%)
 rename versioned_docs/version-v6/theming/{colors.md => colors.mdx} (88%)
 rename versioned_docs/version-v6/theming/{css-shadow-parts.md => css-shadow-parts.mdx} (93%)
 rename versioned_docs/version-v6/theming/{css-variables.md => css-variables.mdx} (94%)
 rename versioned_docs/version-v6/theming/{dark-mode.md => dark-mode.mdx} (97%)
 rename versioned_docs/version-v6/theming/{platform-styles.md => platform-styles.mdx} (89%)
 rename versioned_docs/version-v6/theming/{themes.md => themes.mdx} (97%)
 rename versioned_docs/version-v6/troubleshooting/{build.md => build.mdx} (100%)
 rename versioned_docs/version-v6/troubleshooting/{cors.md => cors.mdx} (100%)
 rename versioned_docs/version-v6/troubleshooting/{debugging.md => debugging.mdx} (99%)
 rename versioned_docs/version-v6/troubleshooting/{native.md => native.mdx} (97%)
 rename versioned_docs/version-v6/troubleshooting/{runtime.md => runtime.mdx} (100%)
 rename versioned_docs/version-v6/utilities/{animations.md => animations.mdx} (99%)
 rename versioned_docs/version-v6/utilities/{gestures.md => gestures.mdx} (99%)
 rename versioned_docs/version-v6/vue/{build-options.md => build-options.mdx} (100%)
 rename versioned_docs/version-v6/vue/{lifecycle.md => lifecycle.mdx} (100%)
 rename versioned_docs/version-v6/vue/{navigation.md => navigation.mdx} (100%)
 rename versioned_docs/version-v6/vue/{overview.md => overview.mdx} (92%)
 rename versioned_docs/version-v6/vue/{performance.md => performance.mdx} (100%)
 rename versioned_docs/version-v6/vue/{platform.md => platform.mdx} (100%)
 rename versioned_docs/version-v6/vue/{pwa.md => pwa.mdx} (100%)
 rename versioned_docs/version-v6/vue/{quickstart.md => quickstart.mdx} (93%)
 rename versioned_docs/version-v6/vue/{slides.md => slides.mdx} (100%)
 rename versioned_docs/version-v6/vue/{storage.md => storage.mdx} (100%)
 rename versioned_docs/version-v6/vue/{testing.md => testing.mdx} (100%)
 rename versioned_docs/version-v6/vue/{troubleshooting.md => troubleshooting.mdx} (92%)
 rename versioned_docs/version-v6/vue/{utility-functions.md => utility-functions.mdx} (100%)
 rename versioned_docs/version-v6/vue/{virtual-scroll.md => virtual-scroll.mdx} (100%)
 rename versioned_docs/version-v6/vue/{your-first-app.md => your-first-app.mdx} (99%)
 rename versioned_docs/version-v6/vue/your-first-app/{2-taking-photos.md => 2-taking-photos.mdx} (100%)
 rename versioned_docs/version-v6/vue/your-first-app/{3-saving-photos.md => 3-saving-photos.mdx} (100%)
 rename versioned_docs/version-v6/vue/your-first-app/{4-loading-photos.md => 4-loading-photos.mdx} (100%)
 rename versioned_docs/version-v6/vue/your-first-app/{5-adding-mobile.md => 5-adding-mobile.mdx} (100%)
 rename versioned_docs/version-v6/vue/your-first-app/{6-deploying-mobile.md => 6-deploying-mobile.mdx} (100%)
 rename versioned_docs/version-v6/vue/your-first-app/{7-live-reload.md => 7-live-reload.mdx} (100%)
 rename versioned_docs/version-v6/vue/your-first-app/{8-distribute.md => 8-distribute.mdx} (100%)

diff --git a/static/usage/v6/accordion/accessibility/animations/index.md b/static/usage/v6/accordion/accessibility/animations/index.mdx
similarity index 100%
rename from static/usage/v6/accordion/accessibility/animations/index.md
rename to static/usage/v6/accordion/accessibility/animations/index.mdx
diff --git a/static/usage/v6/accordion/basic/index.md b/static/usage/v6/accordion/basic/index.mdx
similarity index 100%
rename from static/usage/v6/accordion/basic/index.md
rename to static/usage/v6/accordion/basic/index.mdx
diff --git a/static/usage/v6/accordion/customization/advanced-expansion-styles/index.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/index.mdx
similarity index 100%
rename from static/usage/v6/accordion/customization/advanced-expansion-styles/index.md
rename to static/usage/v6/accordion/customization/advanced-expansion-styles/index.mdx
diff --git a/static/usage/v6/accordion/customization/expansion-styles/index.md b/static/usage/v6/accordion/customization/expansion-styles/index.mdx
similarity index 100%
rename from static/usage/v6/accordion/customization/expansion-styles/index.md
rename to static/usage/v6/accordion/customization/expansion-styles/index.mdx
diff --git a/static/usage/v6/accordion/customization/icons/index.md b/static/usage/v6/accordion/customization/icons/index.mdx
similarity index 100%
rename from static/usage/v6/accordion/customization/icons/index.md
rename to static/usage/v6/accordion/customization/icons/index.mdx
diff --git a/static/usage/v6/accordion/customization/theming/index.md b/static/usage/v6/accordion/customization/theming/index.mdx
similarity index 100%
rename from static/usage/v6/accordion/customization/theming/index.md
rename to static/usage/v6/accordion/customization/theming/index.mdx
diff --git a/static/usage/v6/accordion/disable-group/index.md b/static/usage/v6/accordion/disable-group/index.mdx
similarity index 100%
rename from static/usage/v6/accordion/disable-group/index.md
rename to static/usage/v6/accordion/disable-group/index.mdx
diff --git a/static/usage/v6/accordion/disable/group/index.md b/static/usage/v6/accordion/disable/group/index.mdx
similarity index 100%
rename from static/usage/v6/accordion/disable/group/index.md
rename to static/usage/v6/accordion/disable/group/index.mdx
diff --git a/static/usage/v6/accordion/disable/individual/index.md b/static/usage/v6/accordion/disable/individual/index.mdx
similarity index 100%
rename from static/usage/v6/accordion/disable/individual/index.md
rename to static/usage/v6/accordion/disable/individual/index.mdx
diff --git a/static/usage/v6/accordion/listen-changes/index.md b/static/usage/v6/accordion/listen-changes/index.mdx
similarity index 100%
rename from static/usage/v6/accordion/listen-changes/index.md
rename to static/usage/v6/accordion/listen-changes/index.mdx
diff --git a/static/usage/v6/accordion/multiple/index.md b/static/usage/v6/accordion/multiple/index.mdx
similarity index 100%
rename from static/usage/v6/accordion/multiple/index.md
rename to static/usage/v6/accordion/multiple/index.mdx
diff --git a/static/usage/v6/accordion/readonly/group/index.md b/static/usage/v6/accordion/readonly/group/index.mdx
similarity index 100%
rename from static/usage/v6/accordion/readonly/group/index.md
rename to static/usage/v6/accordion/readonly/group/index.mdx
diff --git a/static/usage/v6/accordion/readonly/individual/index.md b/static/usage/v6/accordion/readonly/individual/index.mdx
similarity index 100%
rename from static/usage/v6/accordion/readonly/individual/index.md
rename to static/usage/v6/accordion/readonly/individual/index.mdx
diff --git a/static/usage/v6/accordion/toggle/index.md b/static/usage/v6/accordion/toggle/index.mdx
similarity index 100%
rename from static/usage/v6/accordion/toggle/index.md
rename to static/usage/v6/accordion/toggle/index.mdx
diff --git a/static/usage/v6/action-sheet/basic/index.md b/static/usage/v6/action-sheet/basic/index.mdx
similarity index 100%
rename from static/usage/v6/action-sheet/basic/index.md
rename to static/usage/v6/action-sheet/basic/index.mdx
diff --git a/static/usage/v6/action-sheet/theming/css-properties/index.md b/static/usage/v6/action-sheet/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/action-sheet/theming/css-properties/index.md
rename to static/usage/v6/action-sheet/theming/css-properties/index.mdx
diff --git a/static/usage/v6/action-sheet/theming/styling/index.md b/static/usage/v6/action-sheet/theming/styling/index.mdx
similarity index 100%
rename from static/usage/v6/action-sheet/theming/styling/index.md
rename to static/usage/v6/action-sheet/theming/styling/index.mdx
diff --git a/static/usage/v6/alert/buttons/index.md b/static/usage/v6/alert/buttons/index.mdx
similarity index 100%
rename from static/usage/v6/alert/buttons/index.md
rename to static/usage/v6/alert/buttons/index.mdx
diff --git a/static/usage/v6/alert/customization/index.md b/static/usage/v6/alert/customization/index.mdx
similarity index 100%
rename from static/usage/v6/alert/customization/index.md
rename to static/usage/v6/alert/customization/index.mdx
diff --git a/static/usage/v6/alert/inputs/radios/index.md b/static/usage/v6/alert/inputs/radios/index.mdx
similarity index 100%
rename from static/usage/v6/alert/inputs/radios/index.md
rename to static/usage/v6/alert/inputs/radios/index.mdx
diff --git a/static/usage/v6/alert/inputs/text-inputs/index.md b/static/usage/v6/alert/inputs/text-inputs/index.mdx
similarity index 100%
rename from static/usage/v6/alert/inputs/text-inputs/index.md
rename to static/usage/v6/alert/inputs/text-inputs/index.mdx
diff --git a/static/usage/v6/alert/presenting/controller/index.md b/static/usage/v6/alert/presenting/controller/index.mdx
similarity index 100%
rename from static/usage/v6/alert/presenting/controller/index.md
rename to static/usage/v6/alert/presenting/controller/index.mdx
diff --git a/static/usage/v6/avatar/basic/index.md b/static/usage/v6/avatar/basic/index.mdx
similarity index 100%
rename from static/usage/v6/avatar/basic/index.md
rename to static/usage/v6/avatar/basic/index.mdx
diff --git a/static/usage/v6/avatar/chip/index.md b/static/usage/v6/avatar/chip/index.mdx
similarity index 100%
rename from static/usage/v6/avatar/chip/index.md
rename to static/usage/v6/avatar/chip/index.mdx
diff --git a/static/usage/v6/avatar/item/index.md b/static/usage/v6/avatar/item/index.mdx
similarity index 100%
rename from static/usage/v6/avatar/item/index.md
rename to static/usage/v6/avatar/item/index.mdx
diff --git a/static/usage/v6/avatar/theming/css-properties/index.md b/static/usage/v6/avatar/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/avatar/theming/css-properties/index.md
rename to static/usage/v6/avatar/theming/css-properties/index.mdx
diff --git a/static/usage/v6/back-button/basic/index.md b/static/usage/v6/back-button/basic/index.mdx
similarity index 100%
rename from static/usage/v6/back-button/basic/index.md
rename to static/usage/v6/back-button/basic/index.mdx
diff --git a/static/usage/v6/back-button/custom/index.md b/static/usage/v6/back-button/custom/index.mdx
similarity index 100%
rename from static/usage/v6/back-button/custom/index.md
rename to static/usage/v6/back-button/custom/index.mdx
diff --git a/static/usage/v6/backdrop/basic/index.md b/static/usage/v6/backdrop/basic/index.mdx
similarity index 100%
rename from static/usage/v6/backdrop/basic/index.md
rename to static/usage/v6/backdrop/basic/index.mdx
diff --git a/static/usage/v6/backdrop/styling/index.md b/static/usage/v6/backdrop/styling/index.mdx
similarity index 100%
rename from static/usage/v6/backdrop/styling/index.md
rename to static/usage/v6/backdrop/styling/index.mdx
diff --git a/static/usage/v6/badge/basic/index.md b/static/usage/v6/badge/basic/index.mdx
similarity index 100%
rename from static/usage/v6/badge/basic/index.md
rename to static/usage/v6/badge/basic/index.mdx
diff --git a/static/usage/v6/badge/theming/colors/index.md b/static/usage/v6/badge/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v6/badge/theming/colors/index.md
rename to static/usage/v6/badge/theming/colors/index.mdx
diff --git a/static/usage/v6/badge/theming/css-properties/index.md b/static/usage/v6/badge/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/badge/theming/css-properties/index.md
rename to static/usage/v6/badge/theming/css-properties/index.mdx
diff --git a/static/usage/v6/breadcrumbs/basic/index.md b/static/usage/v6/breadcrumbs/basic/index.mdx
similarity index 100%
rename from static/usage/v6/breadcrumbs/basic/index.md
rename to static/usage/v6/breadcrumbs/basic/index.mdx
diff --git a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/index.md b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/index.mdx
similarity index 100%
rename from static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/index.md
rename to static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/index.mdx
diff --git a/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/index.md b/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/index.mdx
similarity index 100%
rename from static/usage/v6/breadcrumbs/collapsing-items/items-before-after/index.md
rename to static/usage/v6/breadcrumbs/collapsing-items/items-before-after/index.mdx
diff --git a/static/usage/v6/breadcrumbs/collapsing-items/max-items/index.md b/static/usage/v6/breadcrumbs/collapsing-items/max-items/index.mdx
similarity index 100%
rename from static/usage/v6/breadcrumbs/collapsing-items/max-items/index.md
rename to static/usage/v6/breadcrumbs/collapsing-items/max-items/index.mdx
diff --git a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/index.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/index.mdx
similarity index 100%
rename from static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/index.md
rename to static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/index.mdx
diff --git a/static/usage/v6/breadcrumbs/icons/custom-separators/index.md b/static/usage/v6/breadcrumbs/icons/custom-separators/index.mdx
similarity index 100%
rename from static/usage/v6/breadcrumbs/icons/custom-separators/index.md
rename to static/usage/v6/breadcrumbs/icons/custom-separators/index.mdx
diff --git a/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md b/static/usage/v6/breadcrumbs/icons/icons-on-items/index.mdx
similarity index 100%
rename from static/usage/v6/breadcrumbs/icons/icons-on-items/index.md
rename to static/usage/v6/breadcrumbs/icons/icons-on-items/index.mdx
diff --git a/static/usage/v6/breadcrumbs/theming/colors/index.md b/static/usage/v6/breadcrumbs/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v6/breadcrumbs/theming/colors/index.md
rename to static/usage/v6/breadcrumbs/theming/colors/index.mdx
diff --git a/static/usage/v6/breadcrumbs/theming/css-properties/index.md b/static/usage/v6/breadcrumbs/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/breadcrumbs/theming/css-properties/index.md
rename to static/usage/v6/breadcrumbs/theming/css-properties/index.mdx
diff --git a/static/usage/v6/button/basic/index.md b/static/usage/v6/button/basic/index.mdx
similarity index 100%
rename from static/usage/v6/button/basic/index.md
rename to static/usage/v6/button/basic/index.mdx
diff --git a/static/usage/v6/button/expand/index.md b/static/usage/v6/button/expand/index.mdx
similarity index 100%
rename from static/usage/v6/button/expand/index.md
rename to static/usage/v6/button/expand/index.mdx
diff --git a/static/usage/v6/button/fill/index.md b/static/usage/v6/button/fill/index.mdx
similarity index 100%
rename from static/usage/v6/button/fill/index.md
rename to static/usage/v6/button/fill/index.mdx
diff --git a/static/usage/v6/button/icons/index.md b/static/usage/v6/button/icons/index.mdx
similarity index 100%
rename from static/usage/v6/button/icons/index.md
rename to static/usage/v6/button/icons/index.mdx
diff --git a/static/usage/v6/button/shape/index.md b/static/usage/v6/button/shape/index.mdx
similarity index 100%
rename from static/usage/v6/button/shape/index.md
rename to static/usage/v6/button/shape/index.mdx
diff --git a/static/usage/v6/button/size/index.md b/static/usage/v6/button/size/index.mdx
similarity index 100%
rename from static/usage/v6/button/size/index.md
rename to static/usage/v6/button/size/index.mdx
diff --git a/static/usage/v6/button/theming/colors/index.md b/static/usage/v6/button/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v6/button/theming/colors/index.md
rename to static/usage/v6/button/theming/colors/index.mdx
diff --git a/static/usage/v6/button/theming/css-properties/index.md b/static/usage/v6/button/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/button/theming/css-properties/index.md
rename to static/usage/v6/button/theming/css-properties/index.mdx
diff --git a/static/usage/v6/buttons/basic/index.md b/static/usage/v6/buttons/basic/index.mdx
similarity index 100%
rename from static/usage/v6/buttons/basic/index.md
rename to static/usage/v6/buttons/basic/index.mdx
diff --git a/static/usage/v6/buttons/placement/index.md b/static/usage/v6/buttons/placement/index.mdx
similarity index 100%
rename from static/usage/v6/buttons/placement/index.md
rename to static/usage/v6/buttons/placement/index.mdx
diff --git a/static/usage/v6/buttons/types/index.md b/static/usage/v6/buttons/types/index.mdx
similarity index 100%
rename from static/usage/v6/buttons/types/index.md
rename to static/usage/v6/buttons/types/index.mdx
diff --git a/static/usage/v6/card/basic/index.md b/static/usage/v6/card/basic/index.mdx
similarity index 100%
rename from static/usage/v6/card/basic/index.md
rename to static/usage/v6/card/basic/index.mdx
diff --git a/static/usage/v6/card/buttons/index.md b/static/usage/v6/card/buttons/index.mdx
similarity index 100%
rename from static/usage/v6/card/buttons/index.md
rename to static/usage/v6/card/buttons/index.mdx
diff --git a/static/usage/v6/card/list/index.md b/static/usage/v6/card/list/index.mdx
similarity index 100%
rename from static/usage/v6/card/list/index.md
rename to static/usage/v6/card/list/index.mdx
diff --git a/static/usage/v6/card/media/index.md b/static/usage/v6/card/media/index.mdx
similarity index 100%
rename from static/usage/v6/card/media/index.md
rename to static/usage/v6/card/media/index.mdx
diff --git a/static/usage/v6/card/theming/colors/index.md b/static/usage/v6/card/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v6/card/theming/colors/index.md
rename to static/usage/v6/card/theming/colors/index.mdx
diff --git a/static/usage/v6/card/theming/css-properties/index.md b/static/usage/v6/card/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/card/theming/css-properties/index.md
rename to static/usage/v6/card/theming/css-properties/index.mdx
diff --git a/static/usage/v6/checkbox/basic/index.md b/static/usage/v6/checkbox/basic/index.mdx
similarity index 100%
rename from static/usage/v6/checkbox/basic/index.md
rename to static/usage/v6/checkbox/basic/index.mdx
diff --git a/static/usage/v6/checkbox/indeterminate/index.md b/static/usage/v6/checkbox/indeterminate/index.mdx
similarity index 100%
rename from static/usage/v6/checkbox/indeterminate/index.md
rename to static/usage/v6/checkbox/indeterminate/index.mdx
diff --git a/static/usage/v6/checkbox/theming/css-properties/index.md b/static/usage/v6/checkbox/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/checkbox/theming/css-properties/index.md
rename to static/usage/v6/checkbox/theming/css-properties/index.mdx
diff --git a/static/usage/v6/chip/basic/index.md b/static/usage/v6/chip/basic/index.mdx
similarity index 100%
rename from static/usage/v6/chip/basic/index.md
rename to static/usage/v6/chip/basic/index.mdx
diff --git a/static/usage/v6/chip/slots/index.md b/static/usage/v6/chip/slots/index.mdx
similarity index 100%
rename from static/usage/v6/chip/slots/index.md
rename to static/usage/v6/chip/slots/index.mdx
diff --git a/static/usage/v6/chip/theming/colors/index.md b/static/usage/v6/chip/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v6/chip/theming/colors/index.md
rename to static/usage/v6/chip/theming/colors/index.mdx
diff --git a/static/usage/v6/chip/theming/css-properties/index.md b/static/usage/v6/chip/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/chip/theming/css-properties/index.md
rename to static/usage/v6/chip/theming/css-properties/index.mdx
diff --git a/static/usage/v6/content/basic/index.md b/static/usage/v6/content/basic/index.mdx
similarity index 100%
rename from static/usage/v6/content/basic/index.md
rename to static/usage/v6/content/basic/index.mdx
diff --git a/static/usage/v6/content/fixed/index.md b/static/usage/v6/content/fixed/index.mdx
similarity index 100%
rename from static/usage/v6/content/fixed/index.md
rename to static/usage/v6/content/fixed/index.mdx
diff --git a/static/usage/v6/content/fullscreen/index.md b/static/usage/v6/content/fullscreen/index.mdx
similarity index 100%
rename from static/usage/v6/content/fullscreen/index.md
rename to static/usage/v6/content/fullscreen/index.mdx
diff --git a/static/usage/v6/content/header-footer/index.md b/static/usage/v6/content/header-footer/index.mdx
similarity index 100%
rename from static/usage/v6/content/header-footer/index.md
rename to static/usage/v6/content/header-footer/index.mdx
diff --git a/static/usage/v6/content/scroll-events/index.md b/static/usage/v6/content/scroll-events/index.mdx
similarity index 100%
rename from static/usage/v6/content/scroll-events/index.md
rename to static/usage/v6/content/scroll-events/index.mdx
diff --git a/static/usage/v6/content/scroll-methods/index.md b/static/usage/v6/content/scroll-methods/index.mdx
similarity index 100%
rename from static/usage/v6/content/scroll-methods/index.md
rename to static/usage/v6/content/scroll-methods/index.mdx
diff --git a/static/usage/v6/content/theming/colors/index.md b/static/usage/v6/content/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v6/content/theming/colors/index.md
rename to static/usage/v6/content/theming/colors/index.mdx
diff --git a/static/usage/v6/content/theming/css-properties/index.md b/static/usage/v6/content/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/content/theming/css-properties/index.md
rename to static/usage/v6/content/theming/css-properties/index.mdx
diff --git a/static/usage/v6/content/theming/css-shadow-parts/index.md b/static/usage/v6/content/theming/css-shadow-parts/index.mdx
similarity index 100%
rename from static/usage/v6/content/theming/css-shadow-parts/index.md
rename to static/usage/v6/content/theming/css-shadow-parts/index.mdx
diff --git a/static/usage/v6/datetime-button/basic/index.md b/static/usage/v6/datetime-button/basic/index.mdx
similarity index 100%
rename from static/usage/v6/datetime-button/basic/index.md
rename to static/usage/v6/datetime-button/basic/index.mdx
diff --git a/static/usage/v6/datetime/basic/index.md b/static/usage/v6/datetime/basic/index.mdx
similarity index 100%
rename from static/usage/v6/datetime/basic/index.md
rename to static/usage/v6/datetime/basic/index.mdx
diff --git a/static/usage/v6/datetime/buttons/customizing-button-texts/index.md b/static/usage/v6/datetime/buttons/customizing-button-texts/index.mdx
similarity index 100%
rename from static/usage/v6/datetime/buttons/customizing-button-texts/index.md
rename to static/usage/v6/datetime/buttons/customizing-button-texts/index.mdx
diff --git a/static/usage/v6/datetime/buttons/customizing-buttons/index.md b/static/usage/v6/datetime/buttons/customizing-buttons/index.mdx
similarity index 100%
rename from static/usage/v6/datetime/buttons/customizing-buttons/index.md
rename to static/usage/v6/datetime/buttons/customizing-buttons/index.mdx
diff --git a/static/usage/v6/datetime/buttons/showing-confirmation-buttons/index.md b/static/usage/v6/datetime/buttons/showing-confirmation-buttons/index.mdx
similarity index 100%
rename from static/usage/v6/datetime/buttons/showing-confirmation-buttons/index.md
rename to static/usage/v6/datetime/buttons/showing-confirmation-buttons/index.mdx
diff --git a/static/usage/v6/datetime/date-constraints/advanced/index.md b/static/usage/v6/datetime/date-constraints/advanced/index.mdx
similarity index 100%
rename from static/usage/v6/datetime/date-constraints/advanced/index.md
rename to static/usage/v6/datetime/date-constraints/advanced/index.mdx
diff --git a/static/usage/v6/datetime/date-constraints/max-min/index.md b/static/usage/v6/datetime/date-constraints/max-min/index.mdx
similarity index 100%
rename from static/usage/v6/datetime/date-constraints/max-min/index.md
rename to static/usage/v6/datetime/date-constraints/max-min/index.mdx
diff --git a/static/usage/v6/datetime/date-constraints/values/index.md b/static/usage/v6/datetime/date-constraints/values/index.mdx
similarity index 100%
rename from static/usage/v6/datetime/date-constraints/values/index.md
rename to static/usage/v6/datetime/date-constraints/values/index.mdx
diff --git a/static/usage/v6/datetime/highlightedDates/array/index.md b/static/usage/v6/datetime/highlightedDates/array/index.mdx
similarity index 100%
rename from static/usage/v6/datetime/highlightedDates/array/index.md
rename to static/usage/v6/datetime/highlightedDates/array/index.mdx
diff --git a/static/usage/v6/datetime/highlightedDates/callback/index.md b/static/usage/v6/datetime/highlightedDates/callback/index.mdx
similarity index 100%
rename from static/usage/v6/datetime/highlightedDates/callback/index.md
rename to static/usage/v6/datetime/highlightedDates/callback/index.mdx
diff --git a/static/usage/v6/datetime/localization/custom-locale/index.md b/static/usage/v6/datetime/localization/custom-locale/index.mdx
similarity index 100%
rename from static/usage/v6/datetime/localization/custom-locale/index.md
rename to static/usage/v6/datetime/localization/custom-locale/index.mdx
diff --git a/static/usage/v6/datetime/localization/first-day-of-week/index.md b/static/usage/v6/datetime/localization/first-day-of-week/index.mdx
similarity index 100%
rename from static/usage/v6/datetime/localization/first-day-of-week/index.md
rename to static/usage/v6/datetime/localization/first-day-of-week/index.mdx
diff --git a/static/usage/v6/datetime/localization/hour-cycle/index.md b/static/usage/v6/datetime/localization/hour-cycle/index.mdx
similarity index 100%
rename from static/usage/v6/datetime/localization/hour-cycle/index.md
rename to static/usage/v6/datetime/localization/hour-cycle/index.mdx
diff --git a/static/usage/v6/datetime/localization/locale-extension-tags/index.md b/static/usage/v6/datetime/localization/locale-extension-tags/index.mdx
similarity index 100%
rename from static/usage/v6/datetime/localization/locale-extension-tags/index.md
rename to static/usage/v6/datetime/localization/locale-extension-tags/index.mdx
diff --git a/static/usage/v6/datetime/localization/time-label/index.md b/static/usage/v6/datetime/localization/time-label/index.mdx
similarity index 100%
rename from static/usage/v6/datetime/localization/time-label/index.md
rename to static/usage/v6/datetime/localization/time-label/index.mdx
diff --git a/static/usage/v6/datetime/multiple/index.md b/static/usage/v6/datetime/multiple/index.mdx
similarity index 100%
rename from static/usage/v6/datetime/multiple/index.md
rename to static/usage/v6/datetime/multiple/index.mdx
diff --git a/static/usage/v6/datetime/presentation/date/index.md b/static/usage/v6/datetime/presentation/date/index.mdx
similarity index 100%
rename from static/usage/v6/datetime/presentation/date/index.md
rename to static/usage/v6/datetime/presentation/date/index.mdx
diff --git a/static/usage/v6/datetime/presentation/month-and-year/index.md b/static/usage/v6/datetime/presentation/month-and-year/index.mdx
similarity index 100%
rename from static/usage/v6/datetime/presentation/month-and-year/index.md
rename to static/usage/v6/datetime/presentation/month-and-year/index.mdx
diff --git a/static/usage/v6/datetime/presentation/time/index.md b/static/usage/v6/datetime/presentation/time/index.mdx
similarity index 100%
rename from static/usage/v6/datetime/presentation/time/index.md
rename to static/usage/v6/datetime/presentation/time/index.mdx
diff --git a/static/usage/v6/datetime/presentation/wheel/index.md b/static/usage/v6/datetime/presentation/wheel/index.mdx
similarity index 100%
rename from static/usage/v6/datetime/presentation/wheel/index.md
rename to static/usage/v6/datetime/presentation/wheel/index.mdx
diff --git a/static/usage/v6/datetime/theming/index.md b/static/usage/v6/datetime/theming/index.mdx
similarity index 100%
rename from static/usage/v6/datetime/theming/index.md
rename to static/usage/v6/datetime/theming/index.mdx
diff --git a/static/usage/v6/datetime/title/customizing-title/index.md b/static/usage/v6/datetime/title/customizing-title/index.mdx
similarity index 100%
rename from static/usage/v6/datetime/title/customizing-title/index.md
rename to static/usage/v6/datetime/title/customizing-title/index.mdx
diff --git a/static/usage/v6/datetime/title/showing-default-title/index.md b/static/usage/v6/datetime/title/showing-default-title/index.mdx
similarity index 100%
rename from static/usage/v6/datetime/title/showing-default-title/index.md
rename to static/usage/v6/datetime/title/showing-default-title/index.mdx
diff --git a/static/usage/v6/fab/basic/index.md b/static/usage/v6/fab/basic/index.mdx
similarity index 100%
rename from static/usage/v6/fab/basic/index.md
rename to static/usage/v6/fab/basic/index.mdx
diff --git a/static/usage/v6/fab/button-sizing/index.md b/static/usage/v6/fab/button-sizing/index.mdx
similarity index 100%
rename from static/usage/v6/fab/button-sizing/index.md
rename to static/usage/v6/fab/button-sizing/index.mdx
diff --git a/static/usage/v6/fab/list-side/index.md b/static/usage/v6/fab/list-side/index.mdx
similarity index 100%
rename from static/usage/v6/fab/list-side/index.md
rename to static/usage/v6/fab/list-side/index.mdx
diff --git a/static/usage/v6/fab/positioning/index.md b/static/usage/v6/fab/positioning/index.mdx
similarity index 100%
rename from static/usage/v6/fab/positioning/index.md
rename to static/usage/v6/fab/positioning/index.mdx
diff --git a/static/usage/v6/fab/theming/colors/index.md b/static/usage/v6/fab/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v6/fab/theming/colors/index.md
rename to static/usage/v6/fab/theming/colors/index.mdx
diff --git a/static/usage/v6/fab/theming/css-custom-properties/index.md b/static/usage/v6/fab/theming/css-custom-properties/index.mdx
similarity index 100%
rename from static/usage/v6/fab/theming/css-custom-properties/index.md
rename to static/usage/v6/fab/theming/css-custom-properties/index.mdx
diff --git a/static/usage/v6/fab/theming/css-shadow-parts/index.md b/static/usage/v6/fab/theming/css-shadow-parts/index.mdx
similarity index 100%
rename from static/usage/v6/fab/theming/css-shadow-parts/index.md
rename to static/usage/v6/fab/theming/css-shadow-parts/index.mdx
diff --git a/static/usage/v6/footer/basic/index.md b/static/usage/v6/footer/basic/index.mdx
similarity index 100%
rename from static/usage/v6/footer/basic/index.md
rename to static/usage/v6/footer/basic/index.mdx
diff --git a/static/usage/v6/footer/custom-scroll-target/index.md b/static/usage/v6/footer/custom-scroll-target/index.mdx
similarity index 100%
rename from static/usage/v6/footer/custom-scroll-target/index.md
rename to static/usage/v6/footer/custom-scroll-target/index.mdx
diff --git a/static/usage/v6/footer/fade/index.md b/static/usage/v6/footer/fade/index.mdx
similarity index 100%
rename from static/usage/v6/footer/fade/index.md
rename to static/usage/v6/footer/fade/index.mdx
diff --git a/static/usage/v6/footer/no-border/index.md b/static/usage/v6/footer/no-border/index.mdx
similarity index 100%
rename from static/usage/v6/footer/no-border/index.md
rename to static/usage/v6/footer/no-border/index.mdx
diff --git a/static/usage/v6/footer/translucent/index.md b/static/usage/v6/footer/translucent/index.mdx
similarity index 100%
rename from static/usage/v6/footer/translucent/index.md
rename to static/usage/v6/footer/translucent/index.mdx
diff --git a/static/usage/v6/grid/basic/index.md b/static/usage/v6/grid/basic/index.mdx
similarity index 100%
rename from static/usage/v6/grid/basic/index.md
rename to static/usage/v6/grid/basic/index.mdx
diff --git a/static/usage/v6/grid/customizing/column-number/index.md b/static/usage/v6/grid/customizing/column-number/index.mdx
similarity index 100%
rename from static/usage/v6/grid/customizing/column-number/index.md
rename to static/usage/v6/grid/customizing/column-number/index.mdx
diff --git a/static/usage/v6/grid/customizing/padding/index.md b/static/usage/v6/grid/customizing/padding/index.mdx
similarity index 100%
rename from static/usage/v6/grid/customizing/padding/index.md
rename to static/usage/v6/grid/customizing/padding/index.mdx
diff --git a/static/usage/v6/grid/customizing/width/index.md b/static/usage/v6/grid/customizing/width/index.mdx
similarity index 100%
rename from static/usage/v6/grid/customizing/width/index.md
rename to static/usage/v6/grid/customizing/width/index.mdx
diff --git a/static/usage/v6/grid/fixed/index.md b/static/usage/v6/grid/fixed/index.mdx
similarity index 100%
rename from static/usage/v6/grid/fixed/index.md
rename to static/usage/v6/grid/fixed/index.mdx
diff --git a/static/usage/v6/grid/horizontal-alignment/index.md b/static/usage/v6/grid/horizontal-alignment/index.mdx
similarity index 100%
rename from static/usage/v6/grid/horizontal-alignment/index.md
rename to static/usage/v6/grid/horizontal-alignment/index.mdx
diff --git a/static/usage/v6/grid/offset-responsive/index.md b/static/usage/v6/grid/offset-responsive/index.mdx
similarity index 100%
rename from static/usage/v6/grid/offset-responsive/index.md
rename to static/usage/v6/grid/offset-responsive/index.mdx
diff --git a/static/usage/v6/grid/offset/index.md b/static/usage/v6/grid/offset/index.mdx
similarity index 100%
rename from static/usage/v6/grid/offset/index.md
rename to static/usage/v6/grid/offset/index.mdx
diff --git a/static/usage/v6/grid/push-pull-responsive/index.md b/static/usage/v6/grid/push-pull-responsive/index.mdx
similarity index 100%
rename from static/usage/v6/grid/push-pull-responsive/index.md
rename to static/usage/v6/grid/push-pull-responsive/index.mdx
diff --git a/static/usage/v6/grid/push-pull/index.md b/static/usage/v6/grid/push-pull/index.mdx
similarity index 100%
rename from static/usage/v6/grid/push-pull/index.md
rename to static/usage/v6/grid/push-pull/index.mdx
diff --git a/static/usage/v6/grid/size-auto/index.md b/static/usage/v6/grid/size-auto/index.mdx
similarity index 100%
rename from static/usage/v6/grid/size-auto/index.md
rename to static/usage/v6/grid/size-auto/index.mdx
diff --git a/static/usage/v6/grid/size-responsive/index.md b/static/usage/v6/grid/size-responsive/index.mdx
similarity index 100%
rename from static/usage/v6/grid/size-responsive/index.md
rename to static/usage/v6/grid/size-responsive/index.mdx
diff --git a/static/usage/v6/grid/size/index.md b/static/usage/v6/grid/size/index.mdx
similarity index 100%
rename from static/usage/v6/grid/size/index.md
rename to static/usage/v6/grid/size/index.mdx
diff --git a/static/usage/v6/grid/vertical-alignment/index.md b/static/usage/v6/grid/vertical-alignment/index.mdx
similarity index 100%
rename from static/usage/v6/grid/vertical-alignment/index.md
rename to static/usage/v6/grid/vertical-alignment/index.mdx
diff --git a/static/usage/v6/header/basic/index.md b/static/usage/v6/header/basic/index.mdx
similarity index 100%
rename from static/usage/v6/header/basic/index.md
rename to static/usage/v6/header/basic/index.mdx
diff --git a/static/usage/v6/header/condense/index.md b/static/usage/v6/header/condense/index.mdx
similarity index 100%
rename from static/usage/v6/header/condense/index.md
rename to static/usage/v6/header/condense/index.mdx
diff --git a/static/usage/v6/header/custom-scroll-target/index.md b/static/usage/v6/header/custom-scroll-target/index.mdx
similarity index 100%
rename from static/usage/v6/header/custom-scroll-target/index.md
rename to static/usage/v6/header/custom-scroll-target/index.mdx
diff --git a/static/usage/v6/header/fade/index.md b/static/usage/v6/header/fade/index.mdx
similarity index 100%
rename from static/usage/v6/header/fade/index.md
rename to static/usage/v6/header/fade/index.mdx
diff --git a/static/usage/v6/header/no-border/index.md b/static/usage/v6/header/no-border/index.mdx
similarity index 100%
rename from static/usage/v6/header/no-border/index.md
rename to static/usage/v6/header/no-border/index.mdx
diff --git a/static/usage/v6/header/translucent/index.md b/static/usage/v6/header/translucent/index.mdx
similarity index 100%
rename from static/usage/v6/header/translucent/index.md
rename to static/usage/v6/header/translucent/index.mdx
diff --git a/static/usage/v6/icon/basic/index.md b/static/usage/v6/icon/basic/index.mdx
similarity index 100%
rename from static/usage/v6/icon/basic/index.md
rename to static/usage/v6/icon/basic/index.mdx
diff --git a/static/usage/v6/img/basic/index.md b/static/usage/v6/img/basic/index.mdx
similarity index 100%
rename from static/usage/v6/img/basic/index.md
rename to static/usage/v6/img/basic/index.mdx
diff --git a/static/usage/v6/infinite-scroll/basic/index.md b/static/usage/v6/infinite-scroll/basic/index.mdx
similarity index 100%
rename from static/usage/v6/infinite-scroll/basic/index.md
rename to static/usage/v6/infinite-scroll/basic/index.mdx
diff --git a/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/index.md b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/index.mdx
similarity index 100%
rename from static/usage/v6/infinite-scroll/custom-infinite-scroll-content/index.md
rename to static/usage/v6/infinite-scroll/custom-infinite-scroll-content/index.mdx
diff --git a/static/usage/v6/infinite-scroll/infinite-scroll-content/index.md b/static/usage/v6/infinite-scroll/infinite-scroll-content/index.mdx
similarity index 100%
rename from static/usage/v6/infinite-scroll/infinite-scroll-content/index.md
rename to static/usage/v6/infinite-scroll/infinite-scroll-content/index.mdx
diff --git a/static/usage/v6/input/basic/index.md b/static/usage/v6/input/basic/index.mdx
similarity index 100%
rename from static/usage/v6/input/basic/index.md
rename to static/usage/v6/input/basic/index.mdx
diff --git a/static/usage/v6/input/clear/index.md b/static/usage/v6/input/clear/index.mdx
similarity index 100%
rename from static/usage/v6/input/clear/index.md
rename to static/usage/v6/input/clear/index.mdx
diff --git a/static/usage/v6/input/fill/index.md b/static/usage/v6/input/fill/index.mdx
similarity index 100%
rename from static/usage/v6/input/fill/index.md
rename to static/usage/v6/input/fill/index.mdx
diff --git a/static/usage/v6/input/filtering/index.md b/static/usage/v6/input/filtering/index.mdx
similarity index 100%
rename from static/usage/v6/input/filtering/index.md
rename to static/usage/v6/input/filtering/index.mdx
diff --git a/static/usage/v6/input/labels/index.md b/static/usage/v6/input/labels/index.mdx
similarity index 100%
rename from static/usage/v6/input/labels/index.md
rename to static/usage/v6/input/labels/index.mdx
diff --git a/static/usage/v6/input/theming/colors/index.md b/static/usage/v6/input/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v6/input/theming/colors/index.md
rename to static/usage/v6/input/theming/colors/index.mdx
diff --git a/static/usage/v6/input/theming/css-properties/index.md b/static/usage/v6/input/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/input/theming/css-properties/index.md
rename to static/usage/v6/input/theming/css-properties/index.mdx
diff --git a/static/usage/v6/input/types/index.md b/static/usage/v6/input/types/index.mdx
similarity index 100%
rename from static/usage/v6/input/types/index.md
rename to static/usage/v6/input/types/index.mdx
diff --git a/static/usage/v6/item-divider/basic/index.md b/static/usage/v6/item-divider/basic/index.mdx
similarity index 100%
rename from static/usage/v6/item-divider/basic/index.md
rename to static/usage/v6/item-divider/basic/index.mdx
diff --git a/static/usage/v6/item-divider/theming/colors/index.md b/static/usage/v6/item-divider/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v6/item-divider/theming/colors/index.md
rename to static/usage/v6/item-divider/theming/colors/index.mdx
diff --git a/static/usage/v6/item-divider/theming/css-properties/index.md b/static/usage/v6/item-divider/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/item-divider/theming/css-properties/index.md
rename to static/usage/v6/item-divider/theming/css-properties/index.mdx
diff --git a/static/usage/v6/item-group/basic/index.md b/static/usage/v6/item-group/basic/index.mdx
similarity index 100%
rename from static/usage/v6/item-group/basic/index.md
rename to static/usage/v6/item-group/basic/index.mdx
diff --git a/static/usage/v6/item-group/sliding-items/index.md b/static/usage/v6/item-group/sliding-items/index.mdx
similarity index 100%
rename from static/usage/v6/item-group/sliding-items/index.md
rename to static/usage/v6/item-group/sliding-items/index.mdx
diff --git a/static/usage/v6/item-sliding/basic/index.md b/static/usage/v6/item-sliding/basic/index.mdx
similarity index 100%
rename from static/usage/v6/item-sliding/basic/index.md
rename to static/usage/v6/item-sliding/basic/index.mdx
diff --git a/static/usage/v6/item-sliding/expandable/index.md b/static/usage/v6/item-sliding/expandable/index.mdx
similarity index 100%
rename from static/usage/v6/item-sliding/expandable/index.md
rename to static/usage/v6/item-sliding/expandable/index.mdx
diff --git a/static/usage/v6/item-sliding/icons/index.md b/static/usage/v6/item-sliding/icons/index.mdx
similarity index 100%
rename from static/usage/v6/item-sliding/icons/index.md
rename to static/usage/v6/item-sliding/icons/index.mdx
diff --git a/static/usage/v6/item/basic/index.md b/static/usage/v6/item/basic/index.mdx
similarity index 100%
rename from static/usage/v6/item/basic/index.md
rename to static/usage/v6/item/basic/index.mdx
diff --git a/static/usage/v6/item/buttons/index.md b/static/usage/v6/item/buttons/index.mdx
similarity index 100%
rename from static/usage/v6/item/buttons/index.md
rename to static/usage/v6/item/buttons/index.mdx
diff --git a/static/usage/v6/item/clickable/index.md b/static/usage/v6/item/clickable/index.mdx
similarity index 100%
rename from static/usage/v6/item/clickable/index.md
rename to static/usage/v6/item/clickable/index.mdx
diff --git a/static/usage/v6/item/counter/index.md b/static/usage/v6/item/counter/index.mdx
similarity index 100%
rename from static/usage/v6/item/counter/index.md
rename to static/usage/v6/item/counter/index.mdx
diff --git a/static/usage/v6/item/detail-arrows/index.md b/static/usage/v6/item/detail-arrows/index.mdx
similarity index 100%
rename from static/usage/v6/item/detail-arrows/index.md
rename to static/usage/v6/item/detail-arrows/index.mdx
diff --git a/static/usage/v6/item/helper-error/index.md b/static/usage/v6/item/helper-error/index.mdx
similarity index 100%
rename from static/usage/v6/item/helper-error/index.md
rename to static/usage/v6/item/helper-error/index.mdx
diff --git a/static/usage/v6/item/icons/index.md b/static/usage/v6/item/icons/index.mdx
similarity index 100%
rename from static/usage/v6/item/icons/index.md
rename to static/usage/v6/item/icons/index.mdx
diff --git a/static/usage/v6/item/inputs/index.md b/static/usage/v6/item/inputs/index.mdx
similarity index 100%
rename from static/usage/v6/item/inputs/index.md
rename to static/usage/v6/item/inputs/index.mdx
diff --git a/static/usage/v6/item/lines/index.md b/static/usage/v6/item/lines/index.mdx
similarity index 100%
rename from static/usage/v6/item/lines/index.md
rename to static/usage/v6/item/lines/index.mdx
diff --git a/static/usage/v6/item/media/index.md b/static/usage/v6/item/media/index.mdx
similarity index 100%
rename from static/usage/v6/item/media/index.md
rename to static/usage/v6/item/media/index.mdx
diff --git a/static/usage/v6/item/theming/colors/index.md b/static/usage/v6/item/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v6/item/theming/colors/index.md
rename to static/usage/v6/item/theming/colors/index.mdx
diff --git a/static/usage/v6/item/theming/css-properties/index.md b/static/usage/v6/item/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/item/theming/css-properties/index.md
rename to static/usage/v6/item/theming/css-properties/index.mdx
diff --git a/static/usage/v6/item/theming/css-shadow-parts/index.md b/static/usage/v6/item/theming/css-shadow-parts/index.mdx
similarity index 100%
rename from static/usage/v6/item/theming/css-shadow-parts/index.md
rename to static/usage/v6/item/theming/css-shadow-parts/index.mdx
diff --git a/static/usage/v6/item/theming/input-highlight/index.md b/static/usage/v6/item/theming/input-highlight/index.mdx
similarity index 100%
rename from static/usage/v6/item/theming/input-highlight/index.md
rename to static/usage/v6/item/theming/input-highlight/index.mdx
diff --git a/static/usage/v6/label/basic/index.md b/static/usage/v6/label/basic/index.mdx
similarity index 100%
rename from static/usage/v6/label/basic/index.md
rename to static/usage/v6/label/basic/index.mdx
diff --git a/static/usage/v6/label/input/index.md b/static/usage/v6/label/input/index.mdx
similarity index 100%
rename from static/usage/v6/label/input/index.md
rename to static/usage/v6/label/input/index.mdx
diff --git a/static/usage/v6/label/item/index.md b/static/usage/v6/label/item/index.mdx
similarity index 100%
rename from static/usage/v6/label/item/index.md
rename to static/usage/v6/label/item/index.mdx
diff --git a/static/usage/v6/label/theming/colors/index.md b/static/usage/v6/label/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v6/label/theming/colors/index.md
rename to static/usage/v6/label/theming/colors/index.mdx
diff --git a/static/usage/v6/list-header/basic/index.md b/static/usage/v6/list-header/basic/index.mdx
similarity index 100%
rename from static/usage/v6/list-header/basic/index.md
rename to static/usage/v6/list-header/basic/index.mdx
diff --git a/static/usage/v6/list-header/buttons/index.md b/static/usage/v6/list-header/buttons/index.mdx
similarity index 100%
rename from static/usage/v6/list-header/buttons/index.md
rename to static/usage/v6/list-header/buttons/index.mdx
diff --git a/static/usage/v6/list-header/lines/index.md b/static/usage/v6/list-header/lines/index.mdx
similarity index 100%
rename from static/usage/v6/list-header/lines/index.md
rename to static/usage/v6/list-header/lines/index.mdx
diff --git a/static/usage/v6/list-header/theming/colors/index.md b/static/usage/v6/list-header/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v6/list-header/theming/colors/index.md
rename to static/usage/v6/list-header/theming/colors/index.mdx
diff --git a/static/usage/v6/list-header/theming/css-properties/index.md b/static/usage/v6/list-header/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/list-header/theming/css-properties/index.md
rename to static/usage/v6/list-header/theming/css-properties/index.mdx
diff --git a/static/usage/v6/list/basic/index.md b/static/usage/v6/list/basic/index.mdx
similarity index 100%
rename from static/usage/v6/list/basic/index.md
rename to static/usage/v6/list/basic/index.mdx
diff --git a/static/usage/v6/list/inset/index.md b/static/usage/v6/list/inset/index.mdx
similarity index 100%
rename from static/usage/v6/list/inset/index.md
rename to static/usage/v6/list/inset/index.mdx
diff --git a/static/usage/v6/list/lines/index.md b/static/usage/v6/list/lines/index.mdx
similarity index 100%
rename from static/usage/v6/list/lines/index.md
rename to static/usage/v6/list/lines/index.mdx
diff --git a/static/usage/v6/loading/controller/index.md b/static/usage/v6/loading/controller/index.mdx
similarity index 100%
rename from static/usage/v6/loading/controller/index.md
rename to static/usage/v6/loading/controller/index.mdx
diff --git a/static/usage/v6/loading/spinners/index.md b/static/usage/v6/loading/spinners/index.mdx
similarity index 100%
rename from static/usage/v6/loading/spinners/index.md
rename to static/usage/v6/loading/spinners/index.mdx
diff --git a/static/usage/v6/loading/theming/index.md b/static/usage/v6/loading/theming/index.mdx
similarity index 100%
rename from static/usage/v6/loading/theming/index.md
rename to static/usage/v6/loading/theming/index.mdx
diff --git a/static/usage/v6/menu/basic/index.md b/static/usage/v6/menu/basic/index.mdx
similarity index 100%
rename from static/usage/v6/menu/basic/index.md
rename to static/usage/v6/menu/basic/index.mdx
diff --git a/static/usage/v6/menu/theming/index.md b/static/usage/v6/menu/theming/index.mdx
similarity index 100%
rename from static/usage/v6/menu/theming/index.md
rename to static/usage/v6/menu/theming/index.mdx
diff --git a/static/usage/v6/menu/toggle/index.md b/static/usage/v6/menu/toggle/index.mdx
similarity index 100%
rename from static/usage/v6/menu/toggle/index.md
rename to static/usage/v6/menu/toggle/index.mdx
diff --git a/static/usage/v6/menu/type/index.md b/static/usage/v6/menu/type/index.mdx
similarity index 100%
rename from static/usage/v6/menu/type/index.md
rename to static/usage/v6/menu/type/index.mdx
diff --git a/static/usage/v6/modal/can-dismiss/boolean/index.md b/static/usage/v6/modal/can-dismiss/boolean/index.mdx
similarity index 100%
rename from static/usage/v6/modal/can-dismiss/boolean/index.md
rename to static/usage/v6/modal/can-dismiss/boolean/index.mdx
diff --git a/static/usage/v6/modal/can-dismiss/function/index.md b/static/usage/v6/modal/can-dismiss/function/index.mdx
similarity index 100%
rename from static/usage/v6/modal/can-dismiss/function/index.md
rename to static/usage/v6/modal/can-dismiss/function/index.mdx
diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/index.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/index.mdx
similarity index 100%
rename from static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/index.md
rename to static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/index.mdx
diff --git a/static/usage/v6/modal/card/basic/index.md b/static/usage/v6/modal/card/basic/index.mdx
similarity index 100%
rename from static/usage/v6/modal/card/basic/index.md
rename to static/usage/v6/modal/card/basic/index.mdx
diff --git a/static/usage/v6/modal/controller/index.md b/static/usage/v6/modal/controller/index.mdx
similarity index 100%
rename from static/usage/v6/modal/controller/index.md
rename to static/usage/v6/modal/controller/index.mdx
diff --git a/static/usage/v6/modal/custom-dialogs/index.md b/static/usage/v6/modal/custom-dialogs/index.mdx
similarity index 100%
rename from static/usage/v6/modal/custom-dialogs/index.md
rename to static/usage/v6/modal/custom-dialogs/index.mdx
diff --git a/static/usage/v6/modal/inline/basic/index.md b/static/usage/v6/modal/inline/basic/index.mdx
similarity index 100%
rename from static/usage/v6/modal/inline/basic/index.md
rename to static/usage/v6/modal/inline/basic/index.mdx
diff --git a/static/usage/v6/modal/inline/is-open/index.md b/static/usage/v6/modal/inline/is-open/index.mdx
similarity index 100%
rename from static/usage/v6/modal/inline/is-open/index.md
rename to static/usage/v6/modal/inline/is-open/index.mdx
diff --git a/static/usage/v6/modal/performance/mount/index.md b/static/usage/v6/modal/performance/mount/index.mdx
similarity index 100%
rename from static/usage/v6/modal/performance/mount/index.md
rename to static/usage/v6/modal/performance/mount/index.mdx
diff --git a/static/usage/v6/modal/sheet/background-content/index.md b/static/usage/v6/modal/sheet/background-content/index.mdx
similarity index 100%
rename from static/usage/v6/modal/sheet/background-content/index.md
rename to static/usage/v6/modal/sheet/background-content/index.mdx
diff --git a/static/usage/v6/modal/sheet/basic/index.md b/static/usage/v6/modal/sheet/basic/index.mdx
similarity index 100%
rename from static/usage/v6/modal/sheet/basic/index.md
rename to static/usage/v6/modal/sheet/basic/index.mdx
diff --git a/static/usage/v6/modal/sheet/handle-behavior/index.md b/static/usage/v6/modal/sheet/handle-behavior/index.mdx
similarity index 100%
rename from static/usage/v6/modal/sheet/handle-behavior/index.md
rename to static/usage/v6/modal/sheet/handle-behavior/index.mdx
diff --git a/static/usage/v6/modal/styling/animations/index.md b/static/usage/v6/modal/styling/animations/index.mdx
similarity index 100%
rename from static/usage/v6/modal/styling/animations/index.md
rename to static/usage/v6/modal/styling/animations/index.mdx
diff --git a/static/usage/v6/modal/styling/theming/index.md b/static/usage/v6/modal/styling/theming/index.mdx
similarity index 100%
rename from static/usage/v6/modal/styling/theming/index.md
rename to static/usage/v6/modal/styling/theming/index.mdx
diff --git a/static/usage/v6/nav/modal-navigation/index.md b/static/usage/v6/nav/modal-navigation/index.mdx
similarity index 100%
rename from static/usage/v6/nav/modal-navigation/index.md
rename to static/usage/v6/nav/modal-navigation/index.mdx
diff --git a/static/usage/v6/nav/nav-link/index.md b/static/usage/v6/nav/nav-link/index.mdx
similarity index 100%
rename from static/usage/v6/nav/nav-link/index.md
rename to static/usage/v6/nav/nav-link/index.mdx
diff --git a/static/usage/v6/note/basic/index.md b/static/usage/v6/note/basic/index.mdx
similarity index 100%
rename from static/usage/v6/note/basic/index.md
rename to static/usage/v6/note/basic/index.mdx
diff --git a/static/usage/v6/note/item/index.md b/static/usage/v6/note/item/index.mdx
similarity index 100%
rename from static/usage/v6/note/item/index.md
rename to static/usage/v6/note/item/index.mdx
diff --git a/static/usage/v6/note/theming/colors/index.md b/static/usage/v6/note/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v6/note/theming/colors/index.md
rename to static/usage/v6/note/theming/colors/index.mdx
diff --git a/static/usage/v6/note/theming/css-properties/index.md b/static/usage/v6/note/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/note/theming/css-properties/index.md
rename to static/usage/v6/note/theming/css-properties/index.mdx
diff --git a/static/usage/v6/picker/multiple-column/index.md b/static/usage/v6/picker/multiple-column/index.mdx
similarity index 100%
rename from static/usage/v6/picker/multiple-column/index.md
rename to static/usage/v6/picker/multiple-column/index.mdx
diff --git a/static/usage/v6/picker/single-column/index.md b/static/usage/v6/picker/single-column/index.mdx
similarity index 100%
rename from static/usage/v6/picker/single-column/index.md
rename to static/usage/v6/picker/single-column/index.mdx
diff --git a/static/usage/v6/popover/customization/positioning/index.md b/static/usage/v6/popover/customization/positioning/index.mdx
similarity index 100%
rename from static/usage/v6/popover/customization/positioning/index.md
rename to static/usage/v6/popover/customization/positioning/index.mdx
diff --git a/static/usage/v6/popover/customization/sizing/index.md b/static/usage/v6/popover/customization/sizing/index.mdx
similarity index 100%
rename from static/usage/v6/popover/customization/sizing/index.md
rename to static/usage/v6/popover/customization/sizing/index.mdx
diff --git a/static/usage/v6/popover/customization/styling/index.md b/static/usage/v6/popover/customization/styling/index.mdx
similarity index 100%
rename from static/usage/v6/popover/customization/styling/index.md
rename to static/usage/v6/popover/customization/styling/index.mdx
diff --git a/static/usage/v6/popover/nested/index.md b/static/usage/v6/popover/nested/index.mdx
similarity index 100%
rename from static/usage/v6/popover/nested/index.md
rename to static/usage/v6/popover/nested/index.mdx
diff --git a/static/usage/v6/popover/performance/mount/index.md b/static/usage/v6/popover/performance/mount/index.mdx
similarity index 100%
rename from static/usage/v6/popover/performance/mount/index.md
rename to static/usage/v6/popover/performance/mount/index.mdx
diff --git a/static/usage/v6/popover/presenting/controller/index.md b/static/usage/v6/popover/presenting/controller/index.mdx
similarity index 100%
rename from static/usage/v6/popover/presenting/controller/index.md
rename to static/usage/v6/popover/presenting/controller/index.mdx
diff --git a/static/usage/v6/popover/presenting/inline-isopen/index.md b/static/usage/v6/popover/presenting/inline-isopen/index.mdx
similarity index 100%
rename from static/usage/v6/popover/presenting/inline-isopen/index.md
rename to static/usage/v6/popover/presenting/inline-isopen/index.mdx
diff --git a/static/usage/v6/popover/presenting/inline-trigger/index.md b/static/usage/v6/popover/presenting/inline-trigger/index.mdx
similarity index 100%
rename from static/usage/v6/popover/presenting/inline-trigger/index.md
rename to static/usage/v6/popover/presenting/inline-trigger/index.mdx
diff --git a/static/usage/v6/progress-bar/buffer/index.md b/static/usage/v6/progress-bar/buffer/index.mdx
similarity index 100%
rename from static/usage/v6/progress-bar/buffer/index.md
rename to static/usage/v6/progress-bar/buffer/index.mdx
diff --git a/static/usage/v6/progress-bar/determinate/index.md b/static/usage/v6/progress-bar/determinate/index.mdx
similarity index 100%
rename from static/usage/v6/progress-bar/determinate/index.md
rename to static/usage/v6/progress-bar/determinate/index.mdx
diff --git a/static/usage/v6/progress-bar/indeterminate/index.md b/static/usage/v6/progress-bar/indeterminate/index.mdx
similarity index 100%
rename from static/usage/v6/progress-bar/indeterminate/index.md
rename to static/usage/v6/progress-bar/indeterminate/index.mdx
diff --git a/static/usage/v6/progress-bar/theming/colors/index.md b/static/usage/v6/progress-bar/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v6/progress-bar/theming/colors/index.md
rename to static/usage/v6/progress-bar/theming/colors/index.mdx
diff --git a/static/usage/v6/progress-bar/theming/css-properties/index.md b/static/usage/v6/progress-bar/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/progress-bar/theming/css-properties/index.md
rename to static/usage/v6/progress-bar/theming/css-properties/index.mdx
diff --git a/static/usage/v6/progress-bar/theming/css-shadow-parts/index.md b/static/usage/v6/progress-bar/theming/css-shadow-parts/index.mdx
similarity index 100%
rename from static/usage/v6/progress-bar/theming/css-shadow-parts/index.md
rename to static/usage/v6/progress-bar/theming/css-shadow-parts/index.mdx
diff --git a/static/usage/v6/radio/basic/index.md b/static/usage/v6/radio/basic/index.mdx
similarity index 100%
rename from static/usage/v6/radio/basic/index.md
rename to static/usage/v6/radio/basic/index.mdx
diff --git a/static/usage/v6/radio/empty-selection/index.md b/static/usage/v6/radio/empty-selection/index.mdx
similarity index 100%
rename from static/usage/v6/radio/empty-selection/index.md
rename to static/usage/v6/radio/empty-selection/index.mdx
diff --git a/static/usage/v6/radio/theming/colors/index.md b/static/usage/v6/radio/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v6/radio/theming/colors/index.md
rename to static/usage/v6/radio/theming/colors/index.mdx
diff --git a/static/usage/v6/radio/theming/css-properties/index.md b/static/usage/v6/radio/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/radio/theming/css-properties/index.md
rename to static/usage/v6/radio/theming/css-properties/index.mdx
diff --git a/static/usage/v6/radio/theming/css-shadow-parts/index.md b/static/usage/v6/radio/theming/css-shadow-parts/index.mdx
similarity index 100%
rename from static/usage/v6/radio/theming/css-shadow-parts/index.md
rename to static/usage/v6/radio/theming/css-shadow-parts/index.mdx
diff --git a/static/usage/v6/range/basic/index.md b/static/usage/v6/range/basic/index.mdx
similarity index 100%
rename from static/usage/v6/range/basic/index.md
rename to static/usage/v6/range/basic/index.mdx
diff --git a/static/usage/v6/range/dual-knobs/index.md b/static/usage/v6/range/dual-knobs/index.mdx
similarity index 100%
rename from static/usage/v6/range/dual-knobs/index.md
rename to static/usage/v6/range/dual-knobs/index.mdx
diff --git a/static/usage/v6/range/ion-change-event/index.md b/static/usage/v6/range/ion-change-event/index.mdx
similarity index 100%
rename from static/usage/v6/range/ion-change-event/index.md
rename to static/usage/v6/range/ion-change-event/index.mdx
diff --git a/static/usage/v6/range/ion-knob-move-event/index.md b/static/usage/v6/range/ion-knob-move-event/index.mdx
similarity index 100%
rename from static/usage/v6/range/ion-knob-move-event/index.md
rename to static/usage/v6/range/ion-knob-move-event/index.mdx
diff --git a/static/usage/v6/range/pins/index.md b/static/usage/v6/range/pins/index.mdx
similarity index 100%
rename from static/usage/v6/range/pins/index.md
rename to static/usage/v6/range/pins/index.mdx
diff --git a/static/usage/v6/range/slots/index.md b/static/usage/v6/range/slots/index.mdx
similarity index 100%
rename from static/usage/v6/range/slots/index.md
rename to static/usage/v6/range/slots/index.mdx
diff --git a/static/usage/v6/range/snapping-ticks/index.md b/static/usage/v6/range/snapping-ticks/index.mdx
similarity index 100%
rename from static/usage/v6/range/snapping-ticks/index.md
rename to static/usage/v6/range/snapping-ticks/index.mdx
diff --git a/static/usage/v6/range/theming/css-properties/index.md b/static/usage/v6/range/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/range/theming/css-properties/index.md
rename to static/usage/v6/range/theming/css-properties/index.mdx
diff --git a/static/usage/v6/range/theming/css-shadow-parts/index.md b/static/usage/v6/range/theming/css-shadow-parts/index.mdx
similarity index 100%
rename from static/usage/v6/range/theming/css-shadow-parts/index.md
rename to static/usage/v6/range/theming/css-shadow-parts/index.mdx
diff --git a/static/usage/v6/refresher/advanced/index.md b/static/usage/v6/refresher/advanced/index.mdx
similarity index 100%
rename from static/usage/v6/refresher/advanced/index.md
rename to static/usage/v6/refresher/advanced/index.mdx
diff --git a/static/usage/v6/refresher/basic/index.md b/static/usage/v6/refresher/basic/index.mdx
similarity index 100%
rename from static/usage/v6/refresher/basic/index.md
rename to static/usage/v6/refresher/basic/index.mdx
diff --git a/static/usage/v6/refresher/custom-content/index.md b/static/usage/v6/refresher/custom-content/index.mdx
similarity index 100%
rename from static/usage/v6/refresher/custom-content/index.md
rename to static/usage/v6/refresher/custom-content/index.mdx
diff --git a/static/usage/v6/refresher/custom-scroll-target/index.md b/static/usage/v6/refresher/custom-scroll-target/index.mdx
similarity index 100%
rename from static/usage/v6/refresher/custom-scroll-target/index.md
rename to static/usage/v6/refresher/custom-scroll-target/index.mdx
diff --git a/static/usage/v6/refresher/pull-properties/index.md b/static/usage/v6/refresher/pull-properties/index.mdx
similarity index 100%
rename from static/usage/v6/refresher/pull-properties/index.md
rename to static/usage/v6/refresher/pull-properties/index.mdx
diff --git a/static/usage/v6/reorder/basic/index.md b/static/usage/v6/reorder/basic/index.mdx
similarity index 100%
rename from static/usage/v6/reorder/basic/index.md
rename to static/usage/v6/reorder/basic/index.mdx
diff --git a/static/usage/v6/reorder/custom-icon/index.md b/static/usage/v6/reorder/custom-icon/index.mdx
similarity index 100%
rename from static/usage/v6/reorder/custom-icon/index.md
rename to static/usage/v6/reorder/custom-icon/index.mdx
diff --git a/static/usage/v6/reorder/custom-scroll-target/index.md b/static/usage/v6/reorder/custom-scroll-target/index.mdx
similarity index 100%
rename from static/usage/v6/reorder/custom-scroll-target/index.md
rename to static/usage/v6/reorder/custom-scroll-target/index.mdx
diff --git a/static/usage/v6/reorder/toggling-disabled/index.md b/static/usage/v6/reorder/toggling-disabled/index.mdx
similarity index 100%
rename from static/usage/v6/reorder/toggling-disabled/index.md
rename to static/usage/v6/reorder/toggling-disabled/index.mdx
diff --git a/static/usage/v6/reorder/updating-data/index.md b/static/usage/v6/reorder/updating-data/index.mdx
similarity index 100%
rename from static/usage/v6/reorder/updating-data/index.md
rename to static/usage/v6/reorder/updating-data/index.mdx
diff --git a/static/usage/v6/reorder/wrapper/index.md b/static/usage/v6/reorder/wrapper/index.mdx
similarity index 100%
rename from static/usage/v6/reorder/wrapper/index.md
rename to static/usage/v6/reorder/wrapper/index.mdx
diff --git a/static/usage/v6/ripple-effect/basic/index.md b/static/usage/v6/ripple-effect/basic/index.mdx
similarity index 100%
rename from static/usage/v6/ripple-effect/basic/index.md
rename to static/usage/v6/ripple-effect/basic/index.mdx
diff --git a/static/usage/v6/ripple-effect/customizing/index.md b/static/usage/v6/ripple-effect/customizing/index.mdx
similarity index 100%
rename from static/usage/v6/ripple-effect/customizing/index.md
rename to static/usage/v6/ripple-effect/customizing/index.mdx
diff --git a/static/usage/v6/ripple-effect/type/index.md b/static/usage/v6/ripple-effect/type/index.mdx
similarity index 100%
rename from static/usage/v6/ripple-effect/type/index.md
rename to static/usage/v6/ripple-effect/type/index.mdx
diff --git a/static/usage/v6/router/basic/index.md b/static/usage/v6/router/basic/index.mdx
similarity index 100%
rename from static/usage/v6/router/basic/index.md
rename to static/usage/v6/router/basic/index.mdx
diff --git a/static/usage/v6/searchbar/basic/index.md b/static/usage/v6/searchbar/basic/index.mdx
similarity index 100%
rename from static/usage/v6/searchbar/basic/index.md
rename to static/usage/v6/searchbar/basic/index.mdx
diff --git a/static/usage/v6/searchbar/cancel-button/index.md b/static/usage/v6/searchbar/cancel-button/index.mdx
similarity index 100%
rename from static/usage/v6/searchbar/cancel-button/index.md
rename to static/usage/v6/searchbar/cancel-button/index.mdx
diff --git a/static/usage/v6/searchbar/clear-button/index.md b/static/usage/v6/searchbar/clear-button/index.mdx
similarity index 100%
rename from static/usage/v6/searchbar/clear-button/index.md
rename to static/usage/v6/searchbar/clear-button/index.mdx
diff --git a/static/usage/v6/searchbar/debounce/index.md b/static/usage/v6/searchbar/debounce/index.mdx
similarity index 100%
rename from static/usage/v6/searchbar/debounce/index.md
rename to static/usage/v6/searchbar/debounce/index.mdx
diff --git a/static/usage/v6/searchbar/search-icon/index.md b/static/usage/v6/searchbar/search-icon/index.mdx
similarity index 100%
rename from static/usage/v6/searchbar/search-icon/index.md
rename to static/usage/v6/searchbar/search-icon/index.mdx
diff --git a/static/usage/v6/searchbar/theming/colors/index.md b/static/usage/v6/searchbar/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v6/searchbar/theming/colors/index.md
rename to static/usage/v6/searchbar/theming/colors/index.mdx
diff --git a/static/usage/v6/searchbar/theming/css-properties/index.md b/static/usage/v6/searchbar/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/searchbar/theming/css-properties/index.md
rename to static/usage/v6/searchbar/theming/css-properties/index.mdx
diff --git a/static/usage/v6/segment-button/basic/index.md b/static/usage/v6/segment-button/basic/index.mdx
similarity index 100%
rename from static/usage/v6/segment-button/basic/index.md
rename to static/usage/v6/segment-button/basic/index.mdx
diff --git a/static/usage/v6/segment-button/layout/index.md b/static/usage/v6/segment-button/layout/index.mdx
similarity index 100%
rename from static/usage/v6/segment-button/layout/index.md
rename to static/usage/v6/segment-button/layout/index.mdx
diff --git a/static/usage/v6/segment-button/theming/css-properties/index.md b/static/usage/v6/segment-button/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/segment-button/theming/css-properties/index.md
rename to static/usage/v6/segment-button/theming/css-properties/index.mdx
diff --git a/static/usage/v6/segment-button/theming/css-shadow-parts/index.md b/static/usage/v6/segment-button/theming/css-shadow-parts/index.mdx
similarity index 100%
rename from static/usage/v6/segment-button/theming/css-shadow-parts/index.md
rename to static/usage/v6/segment-button/theming/css-shadow-parts/index.mdx
diff --git a/static/usage/v6/segment/basic/index.md b/static/usage/v6/segment/basic/index.mdx
similarity index 100%
rename from static/usage/v6/segment/basic/index.md
rename to static/usage/v6/segment/basic/index.mdx
diff --git a/static/usage/v6/segment/scrollable/index.md b/static/usage/v6/segment/scrollable/index.mdx
similarity index 100%
rename from static/usage/v6/segment/scrollable/index.md
rename to static/usage/v6/segment/scrollable/index.mdx
diff --git a/static/usage/v6/segment/theming/colors/index.md b/static/usage/v6/segment/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v6/segment/theming/colors/index.md
rename to static/usage/v6/segment/theming/colors/index.mdx
diff --git a/static/usage/v6/segment/theming/css-properties/index.md b/static/usage/v6/segment/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/segment/theming/css-properties/index.md
rename to static/usage/v6/segment/theming/css-properties/index.mdx
diff --git a/static/usage/v6/select/basic/multiple-selection/index.md b/static/usage/v6/select/basic/multiple-selection/index.mdx
similarity index 100%
rename from static/usage/v6/select/basic/multiple-selection/index.md
rename to static/usage/v6/select/basic/multiple-selection/index.mdx
diff --git a/static/usage/v6/select/basic/responding-to-interaction/index.md b/static/usage/v6/select/basic/responding-to-interaction/index.mdx
similarity index 100%
rename from static/usage/v6/select/basic/responding-to-interaction/index.md
rename to static/usage/v6/select/basic/responding-to-interaction/index.mdx
diff --git a/static/usage/v6/select/basic/single-selection/index.md b/static/usage/v6/select/basic/single-selection/index.mdx
similarity index 100%
rename from static/usage/v6/select/basic/single-selection/index.md
rename to static/usage/v6/select/basic/single-selection/index.mdx
diff --git a/static/usage/v6/select/customization/button-text/index.md b/static/usage/v6/select/customization/button-text/index.mdx
similarity index 100%
rename from static/usage/v6/select/customization/button-text/index.md
rename to static/usage/v6/select/customization/button-text/index.mdx
diff --git a/static/usage/v6/select/customization/interface-options/index.md b/static/usage/v6/select/customization/interface-options/index.mdx
similarity index 100%
rename from static/usage/v6/select/customization/interface-options/index.md
rename to static/usage/v6/select/customization/interface-options/index.mdx
diff --git a/static/usage/v6/select/customization/styling-select/index.md b/static/usage/v6/select/customization/styling-select/index.mdx
similarity index 100%
rename from static/usage/v6/select/customization/styling-select/index.md
rename to static/usage/v6/select/customization/styling-select/index.mdx
diff --git a/static/usage/v6/select/interfaces/action-sheet/index.md b/static/usage/v6/select/interfaces/action-sheet/index.mdx
similarity index 100%
rename from static/usage/v6/select/interfaces/action-sheet/index.md
rename to static/usage/v6/select/interfaces/action-sheet/index.mdx
diff --git a/static/usage/v6/select/interfaces/popover/index.md b/static/usage/v6/select/interfaces/popover/index.mdx
similarity index 100%
rename from static/usage/v6/select/interfaces/popover/index.md
rename to static/usage/v6/select/interfaces/popover/index.mdx
diff --git a/static/usage/v6/select/objects-as-values/multiple-selection/index.md b/static/usage/v6/select/objects-as-values/multiple-selection/index.mdx
similarity index 100%
rename from static/usage/v6/select/objects-as-values/multiple-selection/index.md
rename to static/usage/v6/select/objects-as-values/multiple-selection/index.mdx
diff --git a/static/usage/v6/select/objects-as-values/using-comparewith/index.md b/static/usage/v6/select/objects-as-values/using-comparewith/index.mdx
similarity index 100%
rename from static/usage/v6/select/objects-as-values/using-comparewith/index.md
rename to static/usage/v6/select/objects-as-values/using-comparewith/index.mdx
diff --git a/static/usage/v6/select/typeahead/index.md b/static/usage/v6/select/typeahead/index.mdx
similarity index 100%
rename from static/usage/v6/select/typeahead/index.md
rename to static/usage/v6/select/typeahead/index.mdx
diff --git a/static/usage/v6/skeleton-text/basic/index.md b/static/usage/v6/skeleton-text/basic/index.mdx
similarity index 100%
rename from static/usage/v6/skeleton-text/basic/index.md
rename to static/usage/v6/skeleton-text/basic/index.mdx
diff --git a/static/usage/v6/skeleton-text/theming/css-properties/index.md b/static/usage/v6/skeleton-text/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/skeleton-text/theming/css-properties/index.md
rename to static/usage/v6/skeleton-text/theming/css-properties/index.mdx
diff --git a/static/usage/v6/spinner/basic/index.md b/static/usage/v6/spinner/basic/index.mdx
similarity index 100%
rename from static/usage/v6/spinner/basic/index.md
rename to static/usage/v6/spinner/basic/index.mdx
diff --git a/static/usage/v6/spinner/theming/colors/index.md b/static/usage/v6/spinner/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v6/spinner/theming/colors/index.md
rename to static/usage/v6/spinner/theming/colors/index.mdx
diff --git a/static/usage/v6/spinner/theming/css-properties/index.md b/static/usage/v6/spinner/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/spinner/theming/css-properties/index.md
rename to static/usage/v6/spinner/theming/css-properties/index.mdx
diff --git a/static/usage/v6/split-pane/basic/index.md b/static/usage/v6/split-pane/basic/index.mdx
similarity index 100%
rename from static/usage/v6/split-pane/basic/index.md
rename to static/usage/v6/split-pane/basic/index.mdx
diff --git a/static/usage/v6/split-pane/theming/css-properties/index.md b/static/usage/v6/split-pane/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/split-pane/theming/css-properties/index.md
rename to static/usage/v6/split-pane/theming/css-properties/index.mdx
diff --git a/static/usage/v6/tabs/router/index.md b/static/usage/v6/tabs/router/index.mdx
similarity index 100%
rename from static/usage/v6/tabs/router/index.md
rename to static/usage/v6/tabs/router/index.mdx
diff --git a/static/usage/v6/text/basic/index.md b/static/usage/v6/text/basic/index.mdx
similarity index 100%
rename from static/usage/v6/text/basic/index.md
rename to static/usage/v6/text/basic/index.mdx
diff --git a/static/usage/v6/textarea/autogrow/index.md b/static/usage/v6/textarea/autogrow/index.mdx
similarity index 100%
rename from static/usage/v6/textarea/autogrow/index.md
rename to static/usage/v6/textarea/autogrow/index.mdx
diff --git a/static/usage/v6/textarea/basic/index.md b/static/usage/v6/textarea/basic/index.mdx
similarity index 100%
rename from static/usage/v6/textarea/basic/index.md
rename to static/usage/v6/textarea/basic/index.mdx
diff --git a/static/usage/v6/textarea/clear-on-edit/index.md b/static/usage/v6/textarea/clear-on-edit/index.mdx
similarity index 100%
rename from static/usage/v6/textarea/clear-on-edit/index.md
rename to static/usage/v6/textarea/clear-on-edit/index.mdx
diff --git a/static/usage/v6/textarea/theming/index.md b/static/usage/v6/textarea/theming/index.mdx
similarity index 100%
rename from static/usage/v6/textarea/theming/index.md
rename to static/usage/v6/textarea/theming/index.mdx
diff --git a/static/usage/v6/thumbnail/basic/index.md b/static/usage/v6/thumbnail/basic/index.mdx
similarity index 100%
rename from static/usage/v6/thumbnail/basic/index.md
rename to static/usage/v6/thumbnail/basic/index.mdx
diff --git a/static/usage/v6/thumbnail/item/index.md b/static/usage/v6/thumbnail/item/index.mdx
similarity index 100%
rename from static/usage/v6/thumbnail/item/index.md
rename to static/usage/v6/thumbnail/item/index.mdx
diff --git a/static/usage/v6/thumbnail/theming/css-properties/index.md b/static/usage/v6/thumbnail/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/thumbnail/theming/css-properties/index.md
rename to static/usage/v6/thumbnail/theming/css-properties/index.mdx
diff --git a/static/usage/v6/title/basic/index.md b/static/usage/v6/title/basic/index.mdx
similarity index 100%
rename from static/usage/v6/title/basic/index.md
rename to static/usage/v6/title/basic/index.mdx
diff --git a/static/usage/v6/title/collapsible-large-title/basic/index.md b/static/usage/v6/title/collapsible-large-title/basic/index.mdx
similarity index 100%
rename from static/usage/v6/title/collapsible-large-title/basic/index.md
rename to static/usage/v6/title/collapsible-large-title/basic/index.mdx
diff --git a/static/usage/v6/title/collapsible-large-title/buttons/index.md b/static/usage/v6/title/collapsible-large-title/buttons/index.mdx
similarity index 100%
rename from static/usage/v6/title/collapsible-large-title/buttons/index.md
rename to static/usage/v6/title/collapsible-large-title/buttons/index.mdx
diff --git a/static/usage/v6/title/theming/css-properties/index.md b/static/usage/v6/title/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/title/theming/css-properties/index.md
rename to static/usage/v6/title/theming/css-properties/index.mdx
diff --git a/static/usage/v6/toast/buttons/index.md b/static/usage/v6/toast/buttons/index.mdx
similarity index 100%
rename from static/usage/v6/toast/buttons/index.md
rename to static/usage/v6/toast/buttons/index.mdx
diff --git a/static/usage/v6/toast/icon/index.md b/static/usage/v6/toast/icon/index.mdx
similarity index 100%
rename from static/usage/v6/toast/icon/index.md
rename to static/usage/v6/toast/icon/index.mdx
diff --git a/static/usage/v6/toast/layout/index.md b/static/usage/v6/toast/layout/index.mdx
similarity index 100%
rename from static/usage/v6/toast/layout/index.md
rename to static/usage/v6/toast/layout/index.mdx
diff --git a/static/usage/v6/toast/presenting/controller/index.md b/static/usage/v6/toast/presenting/controller/index.mdx
similarity index 100%
rename from static/usage/v6/toast/presenting/controller/index.md
rename to static/usage/v6/toast/presenting/controller/index.mdx
diff --git a/static/usage/v6/toast/theming/index.md b/static/usage/v6/toast/theming/index.mdx
similarity index 100%
rename from static/usage/v6/toast/theming/index.md
rename to static/usage/v6/toast/theming/index.mdx
diff --git a/static/usage/v6/toggle/basic/index.md b/static/usage/v6/toggle/basic/index.mdx
similarity index 100%
rename from static/usage/v6/toggle/basic/index.md
rename to static/usage/v6/toggle/basic/index.mdx
diff --git a/static/usage/v6/toggle/on-off/index.md b/static/usage/v6/toggle/on-off/index.mdx
similarity index 100%
rename from static/usage/v6/toggle/on-off/index.md
rename to static/usage/v6/toggle/on-off/index.mdx
diff --git a/static/usage/v6/toggle/theming/colors/index.md b/static/usage/v6/toggle/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v6/toggle/theming/colors/index.md
rename to static/usage/v6/toggle/theming/colors/index.mdx
diff --git a/static/usage/v6/toggle/theming/css-properties/index.md b/static/usage/v6/toggle/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/toggle/theming/css-properties/index.md
rename to static/usage/v6/toggle/theming/css-properties/index.mdx
diff --git a/static/usage/v6/toggle/theming/css-shadow-parts/index.md b/static/usage/v6/toggle/theming/css-shadow-parts/index.mdx
similarity index 100%
rename from static/usage/v6/toggle/theming/css-shadow-parts/index.md
rename to static/usage/v6/toggle/theming/css-shadow-parts/index.mdx
diff --git a/static/usage/v6/toolbar/basic/index.md b/static/usage/v6/toolbar/basic/index.mdx
similarity index 100%
rename from static/usage/v6/toolbar/basic/index.md
rename to static/usage/v6/toolbar/basic/index.mdx
diff --git a/static/usage/v6/toolbar/buttons/index.md b/static/usage/v6/toolbar/buttons/index.mdx
similarity index 100%
rename from static/usage/v6/toolbar/buttons/index.md
rename to static/usage/v6/toolbar/buttons/index.mdx
diff --git a/static/usage/v6/toolbar/progress-bars/index.md b/static/usage/v6/toolbar/progress-bars/index.mdx
similarity index 100%
rename from static/usage/v6/toolbar/progress-bars/index.md
rename to static/usage/v6/toolbar/progress-bars/index.mdx
diff --git a/static/usage/v6/toolbar/searchbars/index.md b/static/usage/v6/toolbar/searchbars/index.mdx
similarity index 100%
rename from static/usage/v6/toolbar/searchbars/index.md
rename to static/usage/v6/toolbar/searchbars/index.mdx
diff --git a/static/usage/v6/toolbar/segments/index.md b/static/usage/v6/toolbar/segments/index.mdx
similarity index 100%
rename from static/usage/v6/toolbar/segments/index.md
rename to static/usage/v6/toolbar/segments/index.mdx
diff --git a/static/usage/v6/toolbar/theming/colors/index.md b/static/usage/v6/toolbar/theming/colors/index.mdx
similarity index 100%
rename from static/usage/v6/toolbar/theming/colors/index.md
rename to static/usage/v6/toolbar/theming/colors/index.mdx
diff --git a/static/usage/v6/toolbar/theming/css-properties/index.md b/static/usage/v6/toolbar/theming/css-properties/index.mdx
similarity index 100%
rename from static/usage/v6/toolbar/theming/css-properties/index.md
rename to static/usage/v6/toolbar/theming/css-properties/index.mdx
diff --git a/versioned_docs/version-v6/angular/lifecycle.md b/versioned_docs/version-v6/angular/lifecycle.mdx
similarity index 100%
rename from versioned_docs/version-v6/angular/lifecycle.md
rename to versioned_docs/version-v6/angular/lifecycle.mdx
diff --git a/versioned_docs/version-v6/angular/navigation.md b/versioned_docs/version-v6/angular/navigation.mdx
similarity index 100%
rename from versioned_docs/version-v6/angular/navigation.md
rename to versioned_docs/version-v6/angular/navigation.mdx
diff --git a/versioned_docs/version-v6/angular/overview.md b/versioned_docs/version-v6/angular/overview.mdx
similarity index 100%
rename from versioned_docs/version-v6/angular/overview.md
rename to versioned_docs/version-v6/angular/overview.mdx
diff --git a/versioned_docs/version-v6/angular/performance.md b/versioned_docs/version-v6/angular/performance.mdx
similarity index 100%
rename from versioned_docs/version-v6/angular/performance.md
rename to versioned_docs/version-v6/angular/performance.mdx
diff --git a/versioned_docs/version-v6/angular/platform.md b/versioned_docs/version-v6/angular/platform.mdx
similarity index 100%
rename from versioned_docs/version-v6/angular/platform.md
rename to versioned_docs/version-v6/angular/platform.mdx
diff --git a/versioned_docs/version-v6/angular/pwa.md b/versioned_docs/version-v6/angular/pwa.mdx
similarity index 100%
rename from versioned_docs/version-v6/angular/pwa.md
rename to versioned_docs/version-v6/angular/pwa.mdx
diff --git a/versioned_docs/version-v6/angular/slides.md b/versioned_docs/version-v6/angular/slides.mdx
similarity index 100%
rename from versioned_docs/version-v6/angular/slides.md
rename to versioned_docs/version-v6/angular/slides.mdx
diff --git a/versioned_docs/version-v6/angular/storage.md b/versioned_docs/version-v6/angular/storage.mdx
similarity index 100%
rename from versioned_docs/version-v6/angular/storage.md
rename to versioned_docs/version-v6/angular/storage.mdx
diff --git a/versioned_docs/version-v6/angular/testing.md b/versioned_docs/version-v6/angular/testing.mdx
similarity index 100%
rename from versioned_docs/version-v6/angular/testing.md
rename to versioned_docs/version-v6/angular/testing.mdx
diff --git a/versioned_docs/version-v6/angular/virtual-scroll.md b/versioned_docs/version-v6/angular/virtual-scroll.mdx
similarity index 100%
rename from versioned_docs/version-v6/angular/virtual-scroll.md
rename to versioned_docs/version-v6/angular/virtual-scroll.mdx
diff --git a/versioned_docs/version-v6/angular/your-first-app.md b/versioned_docs/version-v6/angular/your-first-app.mdx
similarity index 98%
rename from versioned_docs/version-v6/angular/your-first-app.md
rename to versioned_docs/version-v6/angular/your-first-app.mdx
index eab88969887..bbd710f7b51 100644
--- a/versioned_docs/version-v6/angular/your-first-app.md
+++ b/versioned_docs/version-v6/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
@@ -66,7 +66,7 @@ npm install -g @ionic/cli native-run cordova-res
 :::note
 The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
 
-Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information.
 :::
 
 ## Create an App
diff --git a/versioned_docs/version-v6/angular/your-first-app/2-taking-photos.md b/versioned_docs/version-v6/angular/your-first-app/2-taking-photos.mdx
similarity index 100%
rename from versioned_docs/version-v6/angular/your-first-app/2-taking-photos.md
rename to versioned_docs/version-v6/angular/your-first-app/2-taking-photos.mdx
diff --git a/versioned_docs/version-v6/angular/your-first-app/3-saving-photos.md b/versioned_docs/version-v6/angular/your-first-app/3-saving-photos.mdx
similarity index 100%
rename from versioned_docs/version-v6/angular/your-first-app/3-saving-photos.md
rename to versioned_docs/version-v6/angular/your-first-app/3-saving-photos.mdx
diff --git a/versioned_docs/version-v6/angular/your-first-app/4-loading-photos.md b/versioned_docs/version-v6/angular/your-first-app/4-loading-photos.mdx
similarity index 100%
rename from versioned_docs/version-v6/angular/your-first-app/4-loading-photos.md
rename to versioned_docs/version-v6/angular/your-first-app/4-loading-photos.mdx
diff --git a/versioned_docs/version-v6/angular/your-first-app/5-adding-mobile.md b/versioned_docs/version-v6/angular/your-first-app/5-adding-mobile.mdx
similarity index 100%
rename from versioned_docs/version-v6/angular/your-first-app/5-adding-mobile.md
rename to versioned_docs/version-v6/angular/your-first-app/5-adding-mobile.mdx
diff --git a/versioned_docs/version-v6/angular/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v6/angular/your-first-app/6-deploying-mobile.mdx
similarity index 100%
rename from versioned_docs/version-v6/angular/your-first-app/6-deploying-mobile.md
rename to versioned_docs/version-v6/angular/your-first-app/6-deploying-mobile.mdx
diff --git a/versioned_docs/version-v6/angular/your-first-app/7-live-reload.md b/versioned_docs/version-v6/angular/your-first-app/7-live-reload.mdx
similarity index 100%
rename from versioned_docs/version-v6/angular/your-first-app/7-live-reload.md
rename to versioned_docs/version-v6/angular/your-first-app/7-live-reload.mdx
diff --git a/versioned_docs/version-v6/angular/your-first-app/8-distribute.md b/versioned_docs/version-v6/angular/your-first-app/8-distribute.mdx
similarity index 100%
rename from versioned_docs/version-v6/angular/your-first-app/8-distribute.md
rename to versioned_docs/version-v6/angular/your-first-app/8-distribute.mdx
diff --git a/versioned_docs/version-v6/api.md b/versioned_docs/version-v6/api.mdx
similarity index 100%
rename from versioned_docs/version-v6/api.md
rename to versioned_docs/version-v6/api.mdx
diff --git a/versioned_docs/version-v6/api/accordion-group.md b/versioned_docs/version-v6/api/accordion-group.mdx
similarity index 94%
rename from versioned_docs/version-v6/api/accordion-group.md
rename to versioned_docs/version-v6/api/accordion-group.mdx
index cf041d37a1c..c7914eefa83 100644
--- a/versioned_docs/version-v6/api/accordion-group.md
+++ b/versioned_docs/version-v6/api/accordion-group.mdx
@@ -2,12 +2,12 @@
 title: 'ion-accordion-group'
 ---
 
-import Props from '@ionic-internal/component-api/v6/accordion-group/props.md';
-import Events from '@ionic-internal/component-api/v6/accordion-group/events.md';
-import Methods from '@ionic-internal/component-api/v6/accordion-group/methods.md';
-import Parts from '@ionic-internal/component-api/v6/accordion-group/parts.md';
+import Props from '@ionic-internal/component-api/v6/accordion-group/props.mdx';
+import Events from '@ionic-internal/component-api/v6/accordion-group/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/accordion-group/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/accordion-group/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/accordion-group/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/accordion-group/slots.md';
+import Slots from '@ionic-internal/component-api/v6/accordion-group/slots.mdx';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v6/api/accordion.md b/versioned_docs/version-v6/api/accordion.mdx
similarity index 96%
rename from versioned_docs/version-v6/api/accordion.md
rename to versioned_docs/version-v6/api/accordion.mdx
index 5017a5b64e3..4480262e5a8 100644
--- a/versioned_docs/version-v6/api/accordion.md
+++ b/versioned_docs/version-v6/api/accordion.mdx
@@ -2,12 +2,12 @@
 title: 'ion-accordion'
 ---
 
-import Props from '@ionic-internal/component-api/v6/accordion/props.md';
-import Events from '@ionic-internal/component-api/v6/accordion/events.md';
-import Methods from '@ionic-internal/component-api/v6/accordion/methods.md';
-import Parts from '@ionic-internal/component-api/v6/accordion/parts.md';
+import Props from '@ionic-internal/component-api/v6/accordion/props.mdx';
+import Events from '@ionic-internal/component-api/v6/accordion/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/accordion/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/accordion/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/accordion/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/accordion/slots.md';
+import Slots from '@ionic-internal/component-api/v6/accordion/slots.mdx';
 
 <head>
   <title>Ion-Accordion Components: How to Build & Examples | Ionic</title>
@@ -25,7 +25,7 @@ Accordions provide collapsible sections in your content to reduce vertical space
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v6/accordion/basic/index.md';
+import Basic from '@site/static/usage/v6/accordion/basic/index.mdx';
 
 <Basic />
 
@@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v6/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/v6/accordion/toggle/index.md';
+import Toggle from '@site/static/usage/v6/accordion/toggle/index.mdx';
 
 <Toggle />
 
@@ -41,7 +41,7 @@ import Toggle from '@site/static/usage/v6/accordion/toggle/index.md';
 
 Developers can listen for the `ionChange` event to be notified when accordions expand or collapse.
 
-import ListenChanges from '@site/static/usage/v6/accordion/listen-changes/index.md';
+import ListenChanges from '@site/static/usage/v6/accordion/listen-changes/index.mdx';
 
 <ListenChanges />
 
@@ -49,7 +49,7 @@ import ListenChanges from '@site/static/usage/v6/accordion/listen-changes/index.
 
 Developers can allow multiple accordions to be open at once with the `multiple` property.
 
-import Multiple from '@site/static/usage/v6/accordion/multiple/index.md';
+import Multiple from '@site/static/usage/v6/accordion/multiple/index.mdx';
 
 <Multiple />
 
@@ -59,7 +59,7 @@ import Multiple from '@site/static/usage/v6/accordion/multiple/index.md';
 
 Individual accordions can be disabled with the `disabled` property on `ion-accordion`.
 
-import DisableIndividual from '@site/static/usage/v6/accordion/disable/individual/index.md';
+import DisableIndividual from '@site/static/usage/v6/accordion/disable/individual/index.mdx';
 
 <DisableIndividual />
 
@@ -67,7 +67,7 @@ import DisableIndividual from '@site/static/usage/v6/accordion/disable/individua
 
 The accordion group can be disabled with the `disabled` property on `ion-accordion-group`.
 
-import DisableGroup from '@site/static/usage/v6/accordion/disable/group/index.md';
+import DisableGroup from '@site/static/usage/v6/accordion/disable/group/index.mdx';
 
 <DisableGroup />
 
@@ -77,7 +77,7 @@ import DisableGroup from '@site/static/usage/v6/accordion/disable/group/index.md
 
 Individual accordions can be disabled with the `readonly` property on `ion-accordion`.
 
-import ReadonlyIndividual from '@site/static/usage/v6/accordion/readonly/individual/index.md';
+import ReadonlyIndividual from '@site/static/usage/v6/accordion/readonly/individual/index.mdx';
 
 <ReadonlyIndividual />
 
@@ -85,7 +85,7 @@ import ReadonlyIndividual from '@site/static/usage/v6/accordion/readonly/individ
 
 The accordion group can be disabled with the `readonly` property on `ion-accordion-group`.
 
-import ReadonlyGroup from '@site/static/usage/v6/accordion/readonly/group/index.md';
+import ReadonlyGroup from '@site/static/usage/v6/accordion/readonly/group/index.mdx';
 
 <ReadonlyGroup />
 
@@ -109,7 +109,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/v6/accordion/customization/expansion-styles/index.md';
+import ExpansionStyles from '@site/static/usage/v6/accordion/customization/expansion-styles/index.mdx';
 
 <ExpansionStyles />
 
@@ -133,7 +133,7 @@ ion-accordion.accordion-expanded ion-item[slot='header'] {
 }
 ```
 
-import AdvancedExpansionStyles from '@site/static/usage/v6/accordion/customization/advanced-expansion-styles/index.md';
+import AdvancedExpansionStyles from '@site/static/usage/v6/accordion/customization/advanced-expansion-styles/index.mdx';
 
 <AdvancedExpansionStyles />
 
@@ -145,7 +145,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/v6/accordion/customization/icons/index.md';
+import Icons from '@site/static/usage/v6/accordion/customization/icons/index.mdx';
 
 <Icons />
 
@@ -153,7 +153,7 @@ import Icons from '@site/static/usage/v6/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/v6/accordion/customization/theming/index.md';
+import Theming from '@site/static/usage/v6/accordion/customization/theming/index.mdx';
 
 <Theming />
 
@@ -163,7 +163,7 @@ import Theming from '@site/static/usage/v6/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/v6/accordion/accessibility/animations/index.md';
+import AccessibilityAnimations from '@site/static/usage/v6/accordion/accessibility/animations/index.mdx';
 
 <AccessibilityAnimations />
 
diff --git a/versioned_docs/version-v6/api/action-sheet.md b/versioned_docs/version-v6/api/action-sheet.mdx
similarity index 97%
rename from versioned_docs/version-v6/api/action-sheet.md
rename to versioned_docs/version-v6/api/action-sheet.mdx
index 54877d4a3e5..ad1846bcda0 100644
--- a/versioned_docs/version-v6/api/action-sheet.md
+++ b/versioned_docs/version-v6/api/action-sheet.mdx
@@ -2,12 +2,12 @@
 title: 'ion-action-sheet'
 ---
 
-import Props from '@ionic-internal/component-api/v6/action-sheet/props.md';
-import Events from '@ionic-internal/component-api/v6/action-sheet/events.md';
-import Methods from '@ionic-internal/component-api/v6/action-sheet/methods.md';
-import Parts from '@ionic-internal/component-api/v6/action-sheet/parts.md';
+import Props from '@ionic-internal/component-api/v6/action-sheet/props.mdx';
+import Events from '@ionic-internal/component-api/v6/action-sheet/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/action-sheet/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/action-sheet/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/action-sheet/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/action-sheet/slots.md';
+import Slots from '@ionic-internal/component-api/v6/action-sheet/slots.mdx';
 
 <head>
   <title>ion-action-sheet | Action Sheet Dialog for iOS and Android Apps</title>
@@ -23,7 +23,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. Destructive options are made obvious in `ios` mode. There are multiple ways to dismiss the action sheet, including tapping the backdrop or hitting the escape key on desktop.
 
-import Basic from '@site/static/usage/v6/action-sheet/basic/index.md';
+import Basic from '@site/static/usage/v6/action-sheet/basic/index.mdx';
 
 <Basic />
 
@@ -53,7 +53,7 @@ We recommend passing a custom class to `cssClass` in the `create` method and usi
 }
 ```
 
-import Styling from '@site/static/usage/v6/action-sheet/theming/styling/index.md';
+import Styling from '@site/static/usage/v6/action-sheet/theming/styling/index.mdx';
 
 <Styling />
 
@@ -61,7 +61,7 @@ import Styling from '@site/static/usage/v6/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/v6/action-sheet/theming/css-properties/index.md';
+import CssCustomProperties from '@site/static/usage/v6/action-sheet/theming/css-properties/index.mdx';
 
 <CssCustomProperties />
 
diff --git a/versioned_docs/version-v6/api/alert.md b/versioned_docs/version-v6/api/alert.mdx
similarity index 98%
rename from versioned_docs/version-v6/api/alert.md
rename to versioned_docs/version-v6/api/alert.mdx
index c68e9588e14..44db1bcf1a6 100644
--- a/versioned_docs/version-v6/api/alert.md
+++ b/versioned_docs/version-v6/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/v6/alert/props.md';
-import Events from '@ionic-internal/component-api/v6/alert/events.md';
-import Methods from '@ionic-internal/component-api/v6/alert/methods.md';
-import Parts from '@ionic-internal/component-api/v6/alert/parts.md';
+import Props from '@ionic-internal/component-api/v6/alert/props.mdx';
+import Events from '@ionic-internal/component-api/v6/alert/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/alert/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/alert/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/alert/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/alert/slots.md';
+import Slots from '@ionic-internal/component-api/v6/alert/slots.mdx';
 
 <head>
   <title>ion-alert: Ionic API Alert Buttons with Custom Message Prompts</title>
@@ -30,7 +30,7 @@ An Alert is a dialog that presents users with information or collects informatio
 
 ### Controller
 
-import Controller from '@site/static/usage/v6/alert/presenting/controller/index.md';
+import Controller from '@site/static/usage/v6/alert/presenting/controller/index.mdx';
 
 <Controller />
 
@@ -107,7 +107,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/v6/alert/buttons/index.md';
+import Buttons from '@site/static/usage/v6/alert/buttons/index.mdx';
 
 <Buttons />
 
@@ -117,13 +117,13 @@ Alerts can also include several different inputs whose data can be passed back t
 
 ### Text Inputs Example
 
-import TextInputs from '@site/static/usage/v6/alert/inputs/text-inputs/index.md';
+import TextInputs from '@site/static/usage/v6/alert/inputs/text-inputs/index.mdx';
 
 <TextInputs />
 
 ### Radio Example
 
-import Radios from '@site/static/usage/v6/alert/inputs/radios/index.md';
+import Radios from '@site/static/usage/v6/alert/inputs/radios/index.mdx';
 
 <Radios />
 
@@ -153,7 +153,7 @@ Any of the defined [CSS Custom Properties](#css-custom-properties) can be used t
 }
 ```
 
-import Customization from '@site/static/usage/v6/alert/customization/index.md';
+import Customization from '@site/static/usage/v6/alert/customization/index.mdx';
 
 <Customization />
 
diff --git a/versioned_docs/version-v6/api/app.md b/versioned_docs/version-v6/api/app.mdx
similarity index 98%
rename from versioned_docs/version-v6/api/app.md
rename to versioned_docs/version-v6/api/app.mdx
index 564ee8fcb4c..8cba9c4ee48 100644
--- a/versioned_docs/version-v6/api/app.md
+++ b/versioned_docs/version-v6/api/app.mdx
@@ -2,12 +2,12 @@
 title: 'ion-app'
 ---
 
-import Props from '@ionic-internal/component-api/v6/app/props.md';
-import Events from '@ionic-internal/component-api/v6/app/events.md';
-import Methods from '@ionic-internal/component-api/v6/app/methods.md';
-import Parts from '@ionic-internal/component-api/v6/app/parts.md';
+import Props from '@ionic-internal/component-api/v6/app/props.mdx';
+import Events from '@ionic-internal/component-api/v6/app/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/app/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/app/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/app/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/app/slots.md';
+import Slots from '@ionic-internal/component-api/v6/app/slots.mdx';
 
 <head>
   <title>ion-app: Container Element for an Ionic Application</title>
diff --git a/versioned_docs/version-v6/api/avatar.md b/versioned_docs/version-v6/api/avatar.mdx
similarity index 86%
rename from versioned_docs/version-v6/api/avatar.md
rename to versioned_docs/version-v6/api/avatar.mdx
index ca1258e7e20..dc91f1870d0 100644
--- a/versioned_docs/version-v6/api/avatar.md
+++ b/versioned_docs/version-v6/api/avatar.mdx
@@ -2,12 +2,12 @@
 title: 'ion-avatar'
 ---
 
-import Props from '@ionic-internal/component-api/v6/avatar/props.md';
-import Events from '@ionic-internal/component-api/v6/avatar/events.md';
-import Methods from '@ionic-internal/component-api/v6/avatar/methods.md';
-import Parts from '@ionic-internal/component-api/v6/avatar/parts.md';
+import Props from '@ionic-internal/component-api/v6/avatar/props.mdx';
+import Events from '@ionic-internal/component-api/v6/avatar/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/avatar/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/avatar/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/avatar/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/avatar/slots.md';
+import Slots from '@ionic-internal/component-api/v6/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/v6/avatar/basic/index.md';
+import Basic from '@site/static/usage/v6/avatar/basic/index.mdx';
 
 <Basic />
 
 ## Chip Avatar
 
-import Chip from '@site/static/usage/v6/avatar/chip/index.md';
+import Chip from '@site/static/usage/v6/avatar/chip/index.mdx';
 
 <Chip />
 
 ## Item Avatar
 
-import Item from '@site/static/usage/v6/avatar/item/index.md';
+import Item from '@site/static/usage/v6/avatar/item/index.mdx';
 
 <Item />
 
@@ -47,7 +47,7 @@ import Item from '@site/static/usage/v6/avatar/item/index.md';
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v6/avatar/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v6/avatar/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v6/api/back-button.md b/versioned_docs/version-v6/api/back-button.mdx
similarity index 96%
rename from versioned_docs/version-v6/api/back-button.md
rename to versioned_docs/version-v6/api/back-button.mdx
index 3445c09e4a0..ae50e0ab328 100644
--- a/versioned_docs/version-v6/api/back-button.md
+++ b/versioned_docs/version-v6/api/back-button.mdx
@@ -2,12 +2,12 @@
 title: 'ion-back-button'
 ---
 
-import Props from '@ionic-internal/component-api/v6/back-button/props.md';
-import Events from '@ionic-internal/component-api/v6/back-button/events.md';
-import Methods from '@ionic-internal/component-api/v6/back-button/methods.md';
-import Parts from '@ionic-internal/component-api/v6/back-button/parts.md';
+import Props from '@ionic-internal/component-api/v6/back-button/props.mdx';
+import Events from '@ionic-internal/component-api/v6/back-button/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/back-button/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/back-button/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/back-button/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/back-button/slots.md';
+import Slots from '@ionic-internal/component-api/v6/back-button/slots.mdx';
 
 <head>
   <title>Back Button | ion-back-button: Custom Menu Icon 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/v6/back-button/basic/index.md';
+import Basic from '@site/static/usage/v6/back-button/basic/index.mdx';
 
 <Basic />
 
@@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v6/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/v6/back-button/custom/index.md';
+import Custom from '@site/static/usage/v6/back-button/custom/index.mdx';
 
 <Custom />
 
diff --git a/versioned_docs/version-v6/api/backdrop.md b/versioned_docs/version-v6/api/backdrop.mdx
similarity index 95%
rename from versioned_docs/version-v6/api/backdrop.md
rename to versioned_docs/version-v6/api/backdrop.mdx
index d2c27982dea..ce79dccbf7a 100644
--- a/versioned_docs/version-v6/api/backdrop.md
+++ b/versioned_docs/version-v6/api/backdrop.mdx
@@ -2,12 +2,12 @@
 title: 'ion-backdrop'
 ---
 
-import Props from '@ionic-internal/component-api/v6/backdrop/props.md';
-import Events from '@ionic-internal/component-api/v6/backdrop/events.md';
-import Methods from '@ionic-internal/component-api/v6/backdrop/methods.md';
-import Parts from '@ionic-internal/component-api/v6/backdrop/parts.md';
+import Props from '@ionic-internal/component-api/v6/backdrop/props.mdx';
+import Events from '@ionic-internal/component-api/v6/backdrop/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/backdrop/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/backdrop/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/backdrop/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/backdrop/slots.md';
+import Slots from '@ionic-internal/component-api/v6/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 is transparent by default. The backdrop will prevent clicking or tapping on the content behind it.
 
-import Basic from '@site/static/usage/v6/backdrop/basic/index.md';
+import Basic from '@site/static/usage/v6/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/v6/backdrop/styling/index.md';
+import Styling from '@site/static/usage/v6/backdrop/styling/index.mdx';
 
 <Styling />
 
diff --git a/versioned_docs/version-v6/api/badge.md b/versioned_docs/version-v6/api/badge.mdx
similarity index 92%
rename from versioned_docs/version-v6/api/badge.md
rename to versioned_docs/version-v6/api/badge.mdx
index 8065b14a362..eb04f6d580e 100644
--- a/versioned_docs/version-v6/api/badge.md
+++ b/versioned_docs/version-v6/api/badge.mdx
@@ -2,12 +2,12 @@
 title: 'ion-badge'
 ---
 
-import Props from '@ionic-internal/component-api/v6/badge/props.md';
-import Events from '@ionic-internal/component-api/v6/badge/events.md';
-import Methods from '@ionic-internal/component-api/v6/badge/methods.md';
-import Parts from '@ionic-internal/component-api/v6/badge/parts.md';
+import Props from '@ionic-internal/component-api/v6/badge/props.mdx';
+import Events from '@ionic-internal/component-api/v6/badge/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/badge/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/badge/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/badge/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/badge/slots.md';
+import Slots from '@ionic-internal/component-api/v6/badge/slots.mdx';
 
 <head>
   <title>Badges | 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/v6/badge/basic/index.md';
+import Basic from '@site/static/usage/v6/badge/basic/index.mdx';
 
 <Basic />
 
@@ -33,13 +33,13 @@ import Basic from '@site/static/usage/v6/badge/basic/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v6/badge/theming/colors/index.md';
+import Colors from '@site/static/usage/v6/badge/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Properties
 
-import CSSProps from '@site/static/usage/v6/badge/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v6/badge/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v6/api/breadcrumb.md b/versioned_docs/version-v6/api/breadcrumb.mdx
similarity index 96%
rename from versioned_docs/version-v6/api/breadcrumb.md
rename to versioned_docs/version-v6/api/breadcrumb.mdx
index 4c358b58536..c2a196f449c 100644
--- a/versioned_docs/version-v6/api/breadcrumb.md
+++ b/versioned_docs/version-v6/api/breadcrumb.mdx
@@ -2,12 +2,12 @@
 title: 'ion-breadcrumb'
 ---
 
-import Props from '@ionic-internal/component-api/v6/breadcrumb/props.md';
-import Events from '@ionic-internal/component-api/v6/breadcrumb/events.md';
-import Methods from '@ionic-internal/component-api/v6/breadcrumb/methods.md';
-import Parts from '@ionic-internal/component-api/v6/breadcrumb/parts.md';
+import Props from '@ionic-internal/component-api/v6/breadcrumb/props.mdx';
+import Events from '@ionic-internal/component-api/v6/breadcrumb/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/breadcrumb/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/breadcrumb/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/breadcrumb/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/breadcrumb/slots.md';
+import Slots from '@ionic-internal/component-api/v6/breadcrumb/slots.mdx';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v6/api/breadcrumbs.md b/versioned_docs/version-v6/api/breadcrumbs.mdx
similarity index 88%
rename from versioned_docs/version-v6/api/breadcrumbs.md
rename to versioned_docs/version-v6/api/breadcrumbs.mdx
index d78e45ff0a1..234ea35dec0 100644
--- a/versioned_docs/version-v6/api/breadcrumbs.md
+++ b/versioned_docs/version-v6/api/breadcrumbs.mdx
@@ -2,12 +2,12 @@
 title: 'ion-breadcrumbs'
 ---
 
-import Props from '@ionic-internal/component-api/v6/breadcrumbs/props.md';
-import Events from '@ionic-internal/component-api/v6/breadcrumbs/events.md';
-import Methods from '@ionic-internal/component-api/v6/breadcrumbs/methods.md';
-import Parts from '@ionic-internal/component-api/v6/breadcrumbs/parts.md';
+import Props from '@ionic-internal/component-api/v6/breadcrumbs/props.mdx';
+import Events from '@ionic-internal/component-api/v6/breadcrumbs/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/breadcrumbs/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/breadcrumbs/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/breadcrumbs/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/breadcrumbs/slots.md';
+import Slots from '@ionic-internal/component-api/v6/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/v6/breadcrumbs/basic/index.md';
+import Basic from '@site/static/usage/v6/breadcrumbs/basic/index.mdx';
 
 <Basic />
 
@@ -25,13 +25,13 @@ import Basic from '@site/static/usage/v6/breadcrumbs/basic/index.md';
 
 ### Icons on Items
 
-import IconsOnItems from '@site/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md';
+import IconsOnItems from '@site/static/usage/v6/breadcrumbs/icons/icons-on-items/index.mdx';
 
 <IconsOnItems />
 
 ### Custom Separators
 
-import CustomSeparators from '@site/static/usage/v6/breadcrumbs/icons/custom-separators/index.md';
+import CustomSeparators from '@site/static/usage/v6/breadcrumbs/icons/custom-separators/index.mdx';
 
 <CustomSeparators />
 
@@ -41,7 +41,7 @@ import CustomSeparators from '@site/static/usage/v6/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/v6/breadcrumbs/collapsing-items/max-items/index.md';
+import MaxItems from '@site/static/usage/v6/breadcrumbs/collapsing-items/max-items/index.mdx';
 
 <MaxItems />
 
@@ -49,7 +49,7 @@ import MaxItems from '@site/static/usage/v6/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/v6/breadcrumbs/collapsing-items/items-before-after/index.md';
+import ItemsBeforeAfter from '@site/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/index.mdx';
 
 <ItemsBeforeAfter />
 
@@ -57,7 +57,7 @@ import ItemsBeforeAfter from '@site/static/usage/v6/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/v6/breadcrumbs/collapsing-items/expand-on-click/index.md';
+import ExpandOnClick from '@site/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/index.mdx';
 
 <ExpandOnClick />
 
@@ -65,7 +65,7 @@ import ExpandOnClick from '@site/static/usage/v6/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/v6/breadcrumbs/collapsing-items/popover-on-click/index.md';
+import PopoverOnClick from '@site/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/index.mdx';
 
 <PopoverOnClick />
 
@@ -73,13 +73,13 @@ import PopoverOnClick from '@site/static/usage/v6/breadcrumbs/collapsing-items/p
 
 ### Colors
 
-import Colors from '@site/static/usage/v6/breadcrumbs/theming/colors/index.md';
+import Colors from '@site/static/usage/v6/breadcrumbs/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v6/breadcrumbs/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v6/breadcrumbs/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v6/api/button.md b/versioned_docs/version-v6/api/button.mdx
similarity index 85%
rename from versioned_docs/version-v6/api/button.md
rename to versioned_docs/version-v6/api/button.mdx
index 9aa411a1f87..75c30cf1c0a 100644
--- a/versioned_docs/version-v6/api/button.md
+++ b/versioned_docs/version-v6/api/button.mdx
@@ -2,12 +2,12 @@
 title: 'ion-button'
 ---
 
-import Props from '@ionic-internal/component-api/v6/button/props.md';
-import Events from '@ionic-internal/component-api/v6/button/events.md';
-import Methods from '@ionic-internal/component-api/v6/button/methods.md';
-import Parts from '@ionic-internal/component-api/v6/button/parts.md';
+import Props from '@ionic-internal/component-api/v6/button/props.mdx';
+import Events from '@ionic-internal/component-api/v6/button/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/button/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/button/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/button/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/button/slots.md';
+import Slots from '@ionic-internal/component-api/v6/button/slots.mdx';
 
 <head>
   <title>ion-button: Design and 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/v6/button/basic/index.md';
+import Basic from '@site/static/usage/v6/button/basic/index.mdx';
 
 <Basic />
 
@@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v6/button/basic/index.md';
 
 This property lets you specify how wide the button should be. By default, buttons are inline blocks, but setting this property will change the button to a full-width block element.
 
-import Expand from '@site/static/usage/v6/button/expand/index.md';
+import Expand from '@site/static/usage/v6/button/expand/index.mdx';
 
 <Expand />
 
@@ -41,7 +41,7 @@ import Expand from '@site/static/usage/v6/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/v6/button/shape/index.md';
+import Shape from '@site/static/usage/v6/button/shape/index.mdx';
 
 <Shape />
 
@@ -49,7 +49,7 @@ import Shape from '@site/static/usage/v6/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/v6/button/fill/index.md';
+import Fill from '@site/static/usage/v6/button/fill/index.mdx';
 
 <Fill />
 
@@ -57,13 +57,13 @@ import Fill from '@site/static/usage/v6/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/v6/button/size/index.md';
+import Size from '@site/static/usage/v6/button/size/index.mdx';
 
 <Size />
 
 ## Icons
 
-import Icons from '@site/static/usage/v6/button/icons/index.md';
+import Icons from '@site/static/usage/v6/button/icons/index.mdx';
 
 <Icons />
 
@@ -71,13 +71,13 @@ import Icons from '@site/static/usage/v6/button/icons/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v6/button/theming/colors/index.md';
+import Colors from '@site/static/usage/v6/button/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v6/button/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v6/button/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v6/api/buttons.md b/versioned_docs/version-v6/api/buttons.mdx
similarity index 92%
rename from versioned_docs/version-v6/api/buttons.md
rename to versioned_docs/version-v6/api/buttons.mdx
index fda9556be6e..70a3a5d99d4 100644
--- a/versioned_docs/version-v6/api/buttons.md
+++ b/versioned_docs/version-v6/api/buttons.mdx
@@ -2,12 +2,12 @@
 title: 'ion-buttons'
 ---
 
-import Props from '@ionic-internal/component-api/v6/buttons/props.md';
-import Events from '@ionic-internal/component-api/v6/buttons/events.md';
-import Methods from '@ionic-internal/component-api/v6/buttons/methods.md';
-import Parts from '@ionic-internal/component-api/v6/buttons/parts.md';
+import Props from '@ionic-internal/component-api/v6/buttons/props.mdx';
+import Events from '@ionic-internal/component-api/v6/buttons/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/buttons/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/buttons/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/buttons/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/buttons/slots.md';
+import Slots from '@ionic-internal/component-api/v6/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/v6/buttons/basic/index.md';
+import Basic from '@site/static/usage/v6/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/v6/buttons/placement/index.md';
+import Placement from '@site/static/usage/v6/buttons/placement/index.mdx';
 
 <Placement />
 
@@ -48,7 +48,7 @@ import Placement from '@site/static/usage/v6/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/v6/buttons/types/index.md';
+import Types from '@site/static/usage/v6/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/v6/title/collapsible-large-title/buttons/index.md';
+import CollapsibleLargeTitleButtons from '@site/static/usage/v6/title/collapsible-large-title/buttons/index.mdx';
 
 <CollapsibleLargeTitleButtons />
 
diff --git a/versioned_docs/version-v6/api/card-content.md b/versioned_docs/version-v6/api/card-content.mdx
similarity index 92%
rename from versioned_docs/version-v6/api/card-content.md
rename to versioned_docs/version-v6/api/card-content.mdx
index 9615532ace9..06ce242ded8 100644
--- a/versioned_docs/version-v6/api/card-content.md
+++ b/versioned_docs/version-v6/api/card-content.mdx
@@ -2,12 +2,12 @@
 title: 'ion-card-content'
 ---
 
-import Props from '@ionic-internal/component-api/v6/card-content/props.md';
-import Events from '@ionic-internal/component-api/v6/card-content/events.md';
-import Methods from '@ionic-internal/component-api/v6/card-content/methods.md';
-import Parts from '@ionic-internal/component-api/v6/card-content/parts.md';
+import Props from '@ionic-internal/component-api/v6/card-content/props.mdx';
+import Events from '@ionic-internal/component-api/v6/card-content/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/card-content/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/card-content/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/card-content/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/card-content/slots.md';
+import Slots from '@ionic-internal/component-api/v6/card-content/slots.mdx';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v6/api/card-header.md b/versioned_docs/version-v6/api/card-header.mdx
similarity index 93%
rename from versioned_docs/version-v6/api/card-header.md
rename to versioned_docs/version-v6/api/card-header.mdx
index 818265bf670..543c6ca5347 100644
--- a/versioned_docs/version-v6/api/card-header.md
+++ b/versioned_docs/version-v6/api/card-header.mdx
@@ -2,12 +2,12 @@
 title: 'ion-card-header'
 ---
 
-import Props from '@ionic-internal/component-api/v6/card-header/props.md';
-import Events from '@ionic-internal/component-api/v6/card-header/events.md';
-import Methods from '@ionic-internal/component-api/v6/card-header/methods.md';
-import Parts from '@ionic-internal/component-api/v6/card-header/parts.md';
+import Props from '@ionic-internal/component-api/v6/card-header/props.mdx';
+import Events from '@ionic-internal/component-api/v6/card-header/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/card-header/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/card-header/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/card-header/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/card-header/slots.md';
+import Slots from '@ionic-internal/component-api/v6/card-header/slots.mdx';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v6/api/card-subtitle.md b/versioned_docs/version-v6/api/card-subtitle.mdx
similarity index 92%
rename from versioned_docs/version-v6/api/card-subtitle.md
rename to versioned_docs/version-v6/api/card-subtitle.mdx
index 10cf0ad1930..3d0972b1b9c 100644
--- a/versioned_docs/version-v6/api/card-subtitle.md
+++ b/versioned_docs/version-v6/api/card-subtitle.mdx
@@ -2,12 +2,12 @@
 title: 'ion-card-subtitle'
 ---
 
-import Props from '@ionic-internal/component-api/v6/card-subtitle/props.md';
-import Events from '@ionic-internal/component-api/v6/card-subtitle/events.md';
-import Methods from '@ionic-internal/component-api/v6/card-subtitle/methods.md';
-import Parts from '@ionic-internal/component-api/v6/card-subtitle/parts.md';
+import Props from '@ionic-internal/component-api/v6/card-subtitle/props.mdx';
+import Events from '@ionic-internal/component-api/v6/card-subtitle/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/card-subtitle/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/card-subtitle/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/card-subtitle/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/card-subtitle/slots.md';
+import Slots from '@ionic-internal/component-api/v6/card-subtitle/slots.mdx';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v6/api/card-title.md b/versioned_docs/version-v6/api/card-title.mdx
similarity index 95%
rename from versioned_docs/version-v6/api/card-title.md
rename to versioned_docs/version-v6/api/card-title.mdx
index d7169c28bce..4d6b51cc193 100644
--- a/versioned_docs/version-v6/api/card-title.md
+++ b/versioned_docs/version-v6/api/card-title.mdx
@@ -2,12 +2,12 @@
 title: 'ion-card-title'
 ---
 
-import Props from '@ionic-internal/component-api/v6/card-title/props.md';
-import Events from '@ionic-internal/component-api/v6/card-title/events.md';
-import Methods from '@ionic-internal/component-api/v6/card-title/methods.md';
-import Parts from '@ionic-internal/component-api/v6/card-title/parts.md';
+import Props from '@ionic-internal/component-api/v6/card-title/props.mdx';
+import Events from '@ionic-internal/component-api/v6/card-title/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/card-title/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/card-title/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/card-title/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/card-title/slots.md';
+import Slots from '@ionic-internal/component-api/v6/card-title/slots.mdx';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v6/api/card.md b/versioned_docs/version-v6/api/card.mdx
similarity index 87%
rename from versioned_docs/version-v6/api/card.md
rename to versioned_docs/version-v6/api/card.mdx
index d9fe1b64e0f..41936d076d1 100644
--- a/versioned_docs/version-v6/api/card.md
+++ b/versioned_docs/version-v6/api/card.mdx
@@ -2,12 +2,12 @@
 title: 'ion-card'
 ---
 
-import Props from '@ionic-internal/component-api/v6/card/props.md';
-import Events from '@ionic-internal/component-api/v6/card/events.md';
-import Methods from '@ionic-internal/component-api/v6/card/methods.md';
-import Parts from '@ionic-internal/component-api/v6/card/parts.md';
+import Props from '@ionic-internal/component-api/v6/card/props.mdx';
+import Events from '@ionic-internal/component-api/v6/card/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/card/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/card/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/card/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/card/slots.md';
+import Slots from '@ionic-internal/component-api/v6/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/v6/card/basic/index.md';
+import Basic from '@site/static/usage/v6/card/basic/index.mdx';
 
 <Basic />
 
 ## Media Cards
 
-import Media from '@site/static/usage/v6/card/media/index.md';
+import Media from '@site/static/usage/v6/card/media/index.mdx';
 
 <Media />
 
 ## Card Buttons
 
-import Buttons from '@site/static/usage/v6/card/buttons/index.md';
+import Buttons from '@site/static/usage/v6/card/buttons/index.mdx';
 
 <Buttons />
 
 ## List Card
 
-import List from '@site/static/usage/v6/card/list/index.md';
+import List from '@site/static/usage/v6/card/list/index.mdx';
 
 <List />
 
@@ -55,13 +55,13 @@ import List from '@site/static/usage/v6/card/list/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v6/card/theming/colors/index.md';
+import Colors from '@site/static/usage/v6/card/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v6/card/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v6/card/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v6/api/checkbox.md b/versioned_docs/version-v6/api/checkbox.mdx
similarity index 95%
rename from versioned_docs/version-v6/api/checkbox.md
rename to versioned_docs/version-v6/api/checkbox.mdx
index 36b90512411..0ce62a68304 100644
--- a/versioned_docs/version-v6/api/checkbox.md
+++ b/versioned_docs/version-v6/api/checkbox.mdx
@@ -2,12 +2,12 @@
 title: 'ion-checkbox'
 ---
 
-import Props from '@ionic-internal/component-api/v6/checkbox/props.md';
-import Events from '@ionic-internal/component-api/v6/checkbox/events.md';
-import Methods from '@ionic-internal/component-api/v6/checkbox/methods.md';
-import Parts from '@ionic-internal/component-api/v6/checkbox/parts.md';
+import Props from '@ionic-internal/component-api/v6/checkbox/props.mdx';
+import Events from '@ionic-internal/component-api/v6/checkbox/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/checkbox/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/checkbox/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/checkbox/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/checkbox/slots.md';
+import Slots from '@ionic-internal/component-api/v6/checkbox/slots.mdx';
 
 <head>
   <title>ion-checkboxes: Ionic App Component to Select Multiple Options</title>
@@ -25,13 +25,13 @@ Checkboxes allow the selection of multiple options from a set of options. They a
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v6/checkbox/basic/index.md';
+import Basic from '@site/static/usage/v6/checkbox/basic/index.mdx';
 
 <Basic />
 
 ## Indeterminate Checkboxes
 
-import Indeterminate from '@site/static/usage/v6/checkbox/indeterminate/index.md';
+import Indeterminate from '@site/static/usage/v6/checkbox/indeterminate/index.mdx';
 
 <Indeterminate />
 
@@ -39,7 +39,7 @@ import Indeterminate from '@site/static/usage/v6/checkbox/indeterminate/index.md
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v6/checkbox/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v6/checkbox/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v6/api/chip.md b/versioned_docs/version-v6/api/chip.mdx
similarity index 92%
rename from versioned_docs/version-v6/api/chip.md
rename to versioned_docs/version-v6/api/chip.mdx
index 240c687527b..eef9c0c474b 100644
--- a/versioned_docs/version-v6/api/chip.md
+++ b/versioned_docs/version-v6/api/chip.mdx
@@ -2,12 +2,12 @@
 title: 'ion-chip'
 ---
 
-import Props from '@ionic-internal/component-api/v6/chip/props.md';
-import Events from '@ionic-internal/component-api/v6/chip/events.md';
-import Methods from '@ionic-internal/component-api/v6/chip/methods.md';
-import Parts from '@ionic-internal/component-api/v6/chip/parts.md';
+import Props from '@ionic-internal/component-api/v6/chip/props.mdx';
+import Events from '@ionic-internal/component-api/v6/chip/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/chip/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/chip/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/chip/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/chip/slots.md';
+import Slots from '@ionic-internal/component-api/v6/chip/slots.mdx';
 
 <head>
   <title>ion-chip: Name, 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/v6/chip/basic/index.md';
+import Basic from '@site/static/usage/v6/chip/basic/index.mdx';
 
 <Basic />
 
 ## Slotting Components and Icons
 
-import SlotExample from '@site/static/usage/v6/chip/slots/index.md';
+import SlotExample from '@site/static/usage/v6/chip/slots/index.mdx';
 
 <SlotExample />
 
@@ -39,13 +39,13 @@ import SlotExample from '@site/static/usage/v6/chip/slots/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v6/chip/theming/colors/index.md';
+import Colors from '@site/static/usage/v6/chip/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v6/chip/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v6/chip/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v6/api/col.md b/versioned_docs/version-v6/api/col.mdx
similarity index 98%
rename from versioned_docs/version-v6/api/col.md
rename to versioned_docs/version-v6/api/col.mdx
index 96ccc6396a8..7ddf8fc1c5e 100644
--- a/versioned_docs/version-v6/api/col.md
+++ b/versioned_docs/version-v6/api/col.mdx
@@ -2,12 +2,12 @@
 title: 'ion-col'
 ---
 
-import Props from '@ionic-internal/component-api/v6/col/props.md';
-import Events from '@ionic-internal/component-api/v6/col/events.md';
-import Methods from '@ionic-internal/component-api/v6/col/methods.md';
-import Parts from '@ionic-internal/component-api/v6/col/parts.md';
+import Props from '@ionic-internal/component-api/v6/col/props.mdx';
+import Events from '@ionic-internal/component-api/v6/col/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/col/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/col/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/col/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/col/slots.md';
+import Slots from '@ionic-internal/component-api/v6/col/slots.mdx';
 
 <head>
   <title>ion-col: Column Component Padding, Size and Other Properties</title>
diff --git a/versioned_docs/version-v6/api/content.md b/versioned_docs/version-v6/api/content.mdx
similarity index 93%
rename from versioned_docs/version-v6/api/content.md
rename to versioned_docs/version-v6/api/content.mdx
index 11558e3b358..8112d0c0c8d 100644
--- a/versioned_docs/version-v6/api/content.md
+++ b/versioned_docs/version-v6/api/content.mdx
@@ -2,12 +2,12 @@
 title: 'ion-content'
 ---
 
-import Props from '@ionic-internal/component-api/v6/content/props.md';
-import Events from '@ionic-internal/component-api/v6/content/events.md';
-import Methods from '@ionic-internal/component-api/v6/content/methods.md';
-import Parts from '@ionic-internal/component-api/v6/content/parts.md';
+import Props from '@ionic-internal/component-api/v6/content/props.mdx';
+import Events from '@ionic-internal/component-api/v6/content/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/content/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/content/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/content/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/content/slots.md';
+import Slots from '@ionic-internal/component-api/v6/content/slots.mdx';
 
 <head>
   <title>ion-content: Scrollable CSS Component for Ionic App Content Areas</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/v6/content/basic/index.md';
+import Basic from '@site/static/usage/v6/content/basic/index.mdx';
 
 <Basic />
 
@@ -37,7 +37,7 @@ import Basic from '@site/static/usage/v6/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/v6/content/header-footer/index.md';
+import HeaderFooter from '@site/static/usage/v6/content/header-footer/index.mdx';
 
 <HeaderFooter />
 
@@ -45,7 +45,7 @@ import HeaderFooter from '@site/static/usage/v6/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/v6/content/fullscreen/index.md';
+import Fullscreen from '@site/static/usage/v6/content/fullscreen/index.mdx';
 
 <Fullscreen />
 
@@ -53,7 +53,7 @@ import Fullscreen from '@site/static/usage/v6/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/v6/content/fixed/index.md';
+import Fixed from '@site/static/usage/v6/content/fixed/index.mdx';
 
 <Fixed />
 
@@ -61,7 +61,7 @@ import Fixed from '@site/static/usage/v6/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/v6/content/scroll-methods/index.md';
+import ScrollMethods from '@site/static/usage/v6/content/scroll-methods/index.mdx';
 
 <ScrollMethods />
 
@@ -69,7 +69,7 @@ import ScrollMethods from '@site/static/usage/v6/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/v6/content/scroll-events/index.md';
+import ScrollEvents from '@site/static/usage/v6/content/scroll-events/index.mdx';
 
 <ScrollEvents />
 
@@ -77,19 +77,19 @@ import ScrollEvents from '@site/static/usage/v6/content/scroll-events/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v6/content/theming/colors/index.md';
+import Colors from '@site/static/usage/v6/content/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Shadow Parts
 
-import CSSParts from '@site/static/usage/v6/content/theming/css-shadow-parts/index.md';
+import CSSParts from '@site/static/usage/v6/content/theming/css-shadow-parts/index.mdx';
 
 <CSSParts />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v6/content/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v6/content/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v6/api/datetime-button.md b/versioned_docs/version-v6/api/datetime-button.mdx
similarity index 96%
rename from versioned_docs/version-v6/api/datetime-button.md
rename to versioned_docs/version-v6/api/datetime-button.mdx
index 65949f2d88e..533af33315c 100644
--- a/versioned_docs/version-v6/api/datetime-button.md
+++ b/versioned_docs/version-v6/api/datetime-button.mdx
@@ -2,12 +2,12 @@
 title: 'ion-datetime-button'
 ---
 
-import Props from '@ionic-internal/component-api/v6/datetime-button/props.md';
-import Events from '@ionic-internal/component-api/v6/datetime-button/events.md';
-import Methods from '@ionic-internal/component-api/v6/datetime-button/methods.md';
-import Parts from '@ionic-internal/component-api/v6/datetime-button/parts.md';
+import Props from '@ionic-internal/component-api/v6/datetime-button/props.mdx';
+import Events from '@ionic-internal/component-api/v6/datetime-button/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/datetime-button/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/datetime-button/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/datetime-button/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/datetime-button/slots.md';
+import Slots from '@ionic-internal/component-api/v6/datetime-button/slots.mdx';
 
 <head>
   <title>ion-datetime-button: Ionic API Input for interacting with 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/v6/datetime-button/basic/index.md';
+import Basic from '@site/static/usage/v6/datetime-button/basic/index.mdx';
 
 <Basic />
 
diff --git a/versioned_docs/version-v6/api/datetime.md b/versioned_docs/version-v6/api/datetime.mdx
similarity index 96%
rename from versioned_docs/version-v6/api/datetime.md
rename to versioned_docs/version-v6/api/datetime.mdx
index 7770a8b0e25..d7293c89462 100644
--- a/versioned_docs/version-v6/api/datetime.md
+++ b/versioned_docs/version-v6/api/datetime.mdx
@@ -2,42 +2,42 @@
 title: 'ion-datetime'
 ---
 
-import Props from '@ionic-internal/component-api/v6/datetime/props.md';
-import Events from '@ionic-internal/component-api/v6/datetime/events.md';
-import Methods from '@ionic-internal/component-api/v6/datetime/methods.md';
-import Parts from '@ionic-internal/component-api/v6/datetime/parts.md';
+import Props from '@ionic-internal/component-api/v6/datetime/props.mdx';
+import Events from '@ionic-internal/component-api/v6/datetime/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/datetime/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/datetime/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/datetime/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/datetime/slots.md';
+import Slots from '@ionic-internal/component-api/v6/datetime/slots.mdx';
 
-import Basic from '@site/static/usage/v6/datetime/basic/index.md';
+import Basic from '@site/static/usage/v6/datetime/basic/index.mdx';
 
-import MaxMin from '@site/static/usage/v6/datetime/date-constraints/max-min/index.md';
-import Values from '@site/static/usage/v6/datetime/date-constraints/values/index.md';
-import Advanced from '@site/static/usage/v6/datetime/date-constraints/advanced/index.md';
+import MaxMin from '@site/static/usage/v6/datetime/date-constraints/max-min/index.mdx';
+import Values from '@site/static/usage/v6/datetime/date-constraints/values/index.mdx';
+import Advanced from '@site/static/usage/v6/datetime/date-constraints/advanced/index.mdx';
 
-import CustomLocale from '@site/static/usage/v6/datetime/localization/custom-locale/index.md';
-import HourCycle from '@site/static/usage/v6/datetime/localization/hour-cycle/index.md';
-import FirstDayOfWeek from '@site/static/usage/v6/datetime/localization/first-day-of-week/index.md';
-import LocaleExtensionTags from '@site/static/usage/v6/datetime/localization/locale-extension-tags/index.md';
-import TimeLabel from '@site/static/usage/v6/datetime/localization/time-label/index.md';
+import CustomLocale from '@site/static/usage/v6/datetime/localization/custom-locale/index.mdx';
+import HourCycle from '@site/static/usage/v6/datetime/localization/hour-cycle/index.mdx';
+import FirstDayOfWeek from '@site/static/usage/v6/datetime/localization/first-day-of-week/index.mdx';
+import LocaleExtensionTags from '@site/static/usage/v6/datetime/localization/locale-extension-tags/index.mdx';
+import TimeLabel from '@site/static/usage/v6/datetime/localization/time-label/index.mdx';
 
-import MonthAndYear from '@site/static/usage/v6/datetime/presentation/month-and-year/index.md';
-import Time from '@site/static/usage/v6/datetime/presentation/time/index.md';
-import Date from '@site/static/usage/v6/datetime/presentation/date/index.md';
+import MonthAndYear from '@site/static/usage/v6/datetime/presentation/month-and-year/index.mdx';
+import Time from '@site/static/usage/v6/datetime/presentation/time/index.mdx';
+import Date from '@site/static/usage/v6/datetime/presentation/date/index.mdx';
 
-import ShowingDefaultTitle from '@site/static/usage/v6/datetime/title/showing-default-title/index.md';
-import CustomizingTitle from '@site/static/usage/v6/datetime/title/customizing-title/index.md';
+import ShowingDefaultTitle from '@site/static/usage/v6/datetime/title/showing-default-title/index.mdx';
+import CustomizingTitle from '@site/static/usage/v6/datetime/title/customizing-title/index.mdx';
 
-import ShowingConfirmationButtons from '@site/static/usage/v6/datetime/buttons/showing-confirmation-buttons/index.md';
-import CustomizingButtons from '@site/static/usage/v6/datetime/buttons/customizing-buttons/index.md';
-import CustomizingButtonTexts from '@site/static/usage/v6/datetime/buttons/customizing-button-texts/index.md';
+import ShowingConfirmationButtons from '@site/static/usage/v6/datetime/buttons/showing-confirmation-buttons/index.mdx';
+import CustomizingButtons from '@site/static/usage/v6/datetime/buttons/customizing-buttons/index.mdx';
+import CustomizingButtonTexts from '@site/static/usage/v6/datetime/buttons/customizing-button-texts/index.mdx';
 
-import HighlightedDatesArray from '@site/static/usage/v6/datetime/highlightedDates/array/index.md';
-import HighlightedDatesCallback from '@site/static/usage/v6/datetime/highlightedDates/callback/index.md';
+import HighlightedDatesArray from '@site/static/usage/v6/datetime/highlightedDates/array/index.mdx';
+import HighlightedDatesCallback from '@site/static/usage/v6/datetime/highlightedDates/callback/index.mdx';
 
-import MultipleDateSelection from '@site/static/usage/v6/datetime/multiple/index.md';
+import MultipleDateSelection from '@site/static/usage/v6/datetime/multiple/index.mdx';
 
-import Theming from '@site/static/usage/v6/datetime/theming/index.md';
+import Theming from '@site/static/usage/v6/datetime/theming/index.mdx';
 
 <head>
   <title>ion-datetime: Ionic API Input for Datetime Format Picker</title>
@@ -239,7 +239,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/v6/datetime/presentation/wheel/index.md';
+import Wheel from '@site/static/usage/v6/datetime/presentation/wheel/index.mdx';
 
 <Wheel />
 
diff --git a/versioned_docs/version-v6/api/fab-button.md b/versioned_docs/version-v6/api/fab-button.mdx
similarity index 96%
rename from versioned_docs/version-v6/api/fab-button.md
rename to versioned_docs/version-v6/api/fab-button.mdx
index acb4e389e3a..78e4f6fa555 100644
--- a/versioned_docs/version-v6/api/fab-button.md
+++ b/versioned_docs/version-v6/api/fab-button.mdx
@@ -2,12 +2,12 @@
 title: 'ion-fab-button'
 ---
 
-import Props from '@ionic-internal/component-api/v6/fab-button/props.md';
-import Events from '@ionic-internal/component-api/v6/fab-button/events.md';
-import Methods from '@ionic-internal/component-api/v6/fab-button/methods.md';
-import Parts from '@ionic-internal/component-api/v6/fab-button/parts.md';
+import Props from '@ionic-internal/component-api/v6/fab-button/props.mdx';
+import Events from '@ionic-internal/component-api/v6/fab-button/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/fab-button/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/fab-button/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/fab-button/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/fab-button/slots.md';
+import Slots from '@ionic-internal/component-api/v6/fab-button/slots.mdx';
 
 <head>
   <title>Floating Action Button | Ionic FAB Button Icon for Primary Action</title>
diff --git a/versioned_docs/version-v6/api/fab-list.md b/versioned_docs/version-v6/api/fab-list.mdx
similarity index 95%
rename from versioned_docs/version-v6/api/fab-list.md
rename to versioned_docs/version-v6/api/fab-list.mdx
index 8cf550fff2a..ef6f4634e5c 100644
--- a/versioned_docs/version-v6/api/fab-list.md
+++ b/versioned_docs/version-v6/api/fab-list.mdx
@@ -2,12 +2,12 @@
 title: 'ion-fab-list'
 ---
 
-import Props from '@ionic-internal/component-api/v6/fab-list/props.md';
-import Events from '@ionic-internal/component-api/v6/fab-list/events.md';
-import Methods from '@ionic-internal/component-api/v6/fab-list/methods.md';
-import Parts from '@ionic-internal/component-api/v6/fab-list/parts.md';
+import Props from '@ionic-internal/component-api/v6/fab-list/props.mdx';
+import Events from '@ionic-internal/component-api/v6/fab-list/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/fab-list/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/fab-list/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/fab-list/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/fab-list/slots.md';
+import Slots from '@ionic-internal/component-api/v6/fab-list/slots.mdx';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v6/api/fab.md b/versioned_docs/version-v6/api/fab.mdx
similarity index 95%
rename from versioned_docs/version-v6/api/fab.md
rename to versioned_docs/version-v6/api/fab.mdx
index 060ac62dcee..ce135d46308 100644
--- a/versioned_docs/version-v6/api/fab.md
+++ b/versioned_docs/version-v6/api/fab.mdx
@@ -2,12 +2,12 @@
 title: 'ion-fab'
 ---
 
-import Props from '@ionic-internal/component-api/v6/fab/props.md';
-import Events from '@ionic-internal/component-api/v6/fab/events.md';
-import Methods from '@ionic-internal/component-api/v6/fab/methods.md';
-import Parts from '@ionic-internal/component-api/v6/fab/parts.md';
+import Props from '@ionic-internal/component-api/v6/fab/props.mdx';
+import Events from '@ionic-internal/component-api/v6/fab/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/fab/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/fab/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/fab/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/fab/slots.md';
+import Slots from '@ionic-internal/component-api/v6/fab/slots.mdx';
 
 <head>
   <title>ion-fab: Floating Action Button for Android and iOS Ionic Apps</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/v6/fab/basic/index.md';
+import BasicUsage from '@site/static/usage/v6/fab/basic/index.mdx';
 
 <BasicUsage />
 
@@ -33,7 +33,7 @@ import BasicUsage from '@site/static/usage/v6/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/v6/fab/list-side/index.md';
+import ListSide from '@site/static/usage/v6/fab/list-side/index.mdx';
 
 <ListSide />
 
@@ -41,7 +41,7 @@ import ListSide from '@site/static/usage/v6/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/v6/fab/positioning/index.md';
+import Positioning from '@site/static/usage/v6/fab/positioning/index.mdx';
 
 <Positioning />
 
@@ -49,7 +49,7 @@ import Positioning from '@site/static/usage/v6/fab/positioning/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/v6/fab/button-sizing/index.md';
+import ButtonSizing from '@site/static/usage/v6/fab/button-sizing/index.mdx';
 
 <ButtonSizing />
 
@@ -57,19 +57,19 @@ import ButtonSizing from '@site/static/usage/v6/fab/button-sizing/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v6/fab/theming/colors/index.md';
+import Colors from '@site/static/usage/v6/fab/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSCustomProperties from '@site/static/usage/v6/fab/theming/css-custom-properties/index.md';
+import CSSCustomProperties from '@site/static/usage/v6/fab/theming/css-custom-properties/index.mdx';
 
 <CSSCustomProperties />
 
 ### CSS Shadow Parts
 
-import CSSShadowParts from '@site/static/usage/v6/fab/theming/css-shadow-parts/index.md';
+import CSSShadowParts from '@site/static/usage/v6/fab/theming/css-shadow-parts/index.mdx';
 
 <CSSShadowParts />
 
diff --git a/versioned_docs/version-v6/api/footer.md b/versioned_docs/version-v6/api/footer.mdx
similarity index 92%
rename from versioned_docs/version-v6/api/footer.md
rename to versioned_docs/version-v6/api/footer.mdx
index e36ef4f4b4c..75486f34955 100644
--- a/versioned_docs/version-v6/api/footer.md
+++ b/versioned_docs/version-v6/api/footer.mdx
@@ -2,12 +2,12 @@
 title: 'ion-footer'
 ---
 
-import Props from '@ionic-internal/component-api/v6/footer/props.md';
-import Events from '@ionic-internal/component-api/v6/footer/events.md';
-import Methods from '@ionic-internal/component-api/v6/footer/methods.md';
-import Parts from '@ionic-internal/component-api/v6/footer/parts.md';
+import Props from '@ionic-internal/component-api/v6/footer/props.mdx';
+import Events from '@ionic-internal/component-api/v6/footer/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/footer/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/footer/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/footer/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/footer/slots.md';
+import Slots from '@ionic-internal/component-api/v6/footer/slots.mdx';
 
 <head>
   <title>Page Footer | Ionic App Footer: Wrapper Root Page 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/v6/footer/basic/index.md';
+import Basic from '@site/static/usage/v6/footer/basic/index.mdx';
 
 <Basic />
 
@@ -31,7 +31,7 @@ import Basic from '@site/static/usage/v6/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/v6/footer/translucent/index.md';
+import Translucent from '@site/static/usage/v6/footer/translucent/index.mdx';
 
 <Translucent />
 
@@ -39,7 +39,7 @@ import Translucent from '@site/static/usage/v6/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/v6/footer/fade/index.md';
+import Fade from '@site/static/usage/v6/footer/fade/index.mdx';
 
 <Fade />
 
@@ -47,7 +47,7 @@ import Fade from '@site/static/usage/v6/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/v6/footer/custom-scroll-target/index.md';
+import CustomScrollTarget from '@site/static/usage/v6/footer/custom-scroll-target/index.mdx';
 
 <CustomScrollTarget />
 
@@ -55,7 +55,7 @@ import CustomScrollTarget from '@site/static/usage/v6/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/v6/footer/no-border/index.md';
+import NoBorder from '@site/static/usage/v6/footer/no-border/index.mdx';
 
 <NoBorder />
 
diff --git a/versioned_docs/version-v6/api/grid.md b/versioned_docs/version-v6/api/grid.mdx
similarity index 92%
rename from versioned_docs/version-v6/api/grid.md
rename to versioned_docs/version-v6/api/grid.mdx
index 5d0e7ccaab9..acfcddffed7 100644
--- a/versioned_docs/version-v6/api/grid.md
+++ b/versioned_docs/version-v6/api/grid.mdx
@@ -2,12 +2,12 @@
 title: 'ion-grid'
 ---
 
-import Props from '@ionic-internal/component-api/v6/grid/props.md';
-import Events from '@ionic-internal/component-api/v6/grid/events.md';
-import Methods from '@ionic-internal/component-api/v6/grid/methods.md';
-import Parts from '@ionic-internal/component-api/v6/grid/parts.md';
+import Props from '@ionic-internal/component-api/v6/grid/props.mdx';
+import Events from '@ionic-internal/component-api/v6/grid/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/grid/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/grid/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/grid/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/grid/slots.md';
+import Slots from '@ionic-internal/component-api/v6/grid/slots.mdx';
 
 <head>
   <title>Ion-Grid: Display Grids to Build 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/v6/grid/basic/index.md';
+import Basic from '@site/static/usage/v6/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/v6/grid/fixed/index.md';
+import Fixed from '@site/static/usage/v6/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/v6/grid/size-auto/index.md';
+import SizeAuto from '@site/static/usage/v6/grid/size-auto/index.mdx';
 
 <SizeAuto />
 
@@ -92,7 +92,7 @@ import SizeAuto from '@site/static/usage/v6/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/v6/grid/size/index.md';
+import Size from '@site/static/usage/v6/grid/size/index.mdx';
 
 <Size />
 
@@ -100,7 +100,7 @@ import Size from '@site/static/usage/v6/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/v6/grid/size-responsive/index.md';
+import SizeResponsive from '@site/static/usage/v6/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/v6/grid/offset/index.md';
+import Offset from '@site/static/usage/v6/grid/offset/index.mdx';
 
 <Offset />
 
@@ -120,7 +120,7 @@ import Offset from '@site/static/usage/v6/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/v6/grid/offset-responsive/index.md';
+import OffsetResponsive from '@site/static/usage/v6/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/v6/grid/push-pull/index.md';
+import PushPull from '@site/static/usage/v6/grid/push-pull/index.mdx';
 
 <PushPull />
 
@@ -140,7 +140,7 @@ import PushPull from '@site/static/usage/v6/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/v6/grid/push-pull-responsive/index.md';
+import PushPullResponsive from '@site/static/usage/v6/grid/push-pull-responsive/index.mdx';
 
 <PushPullResponsive />
 
@@ -150,15 +150,15 @@ import PushPullResponsive from '@site/static/usage/v6/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/v6/grid/vertical-alignment/index.md';
+import VerticalAlignment from '@site/static/usage/v6/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/v6/grid/horizontal-alignment/index.md';
+import HorizontalAlignment from '@site/static/usage/v6/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/v6/grid/customizing/width/index.md';
+import Width from '@site/static/usage/v6/grid/customizing/width/index.mdx';
 
 <Width />
 
@@ -178,7 +178,7 @@ import Width from '@site/static/usage/v6/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/v6/grid/customizing/column-number/index.md';
+import ColumnNumber from '@site/static/usage/v6/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/v6/grid/customizing/padding/index.md';
+import Padding from '@site/static/usage/v6/grid/customizing/padding/index.mdx';
 
 <Padding />
 
diff --git a/versioned_docs/version-v6/api/header.md b/versioned_docs/version-v6/api/header.mdx
similarity index 93%
rename from versioned_docs/version-v6/api/header.md
rename to versioned_docs/version-v6/api/header.mdx
index 45d26bb94f9..b59ca5b4b28 100644
--- a/versioned_docs/version-v6/api/header.md
+++ b/versioned_docs/version-v6/api/header.mdx
@@ -2,12 +2,12 @@
 title: 'ion-header'
 ---
 
-import Props from '@ionic-internal/component-api/v6/header/props.md';
-import Events from '@ionic-internal/component-api/v6/header/events.md';
-import Methods from '@ionic-internal/component-api/v6/header/methods.md';
-import Parts from '@ionic-internal/component-api/v6/header/parts.md';
+import Props from '@ionic-internal/component-api/v6/header/props.mdx';
+import Events from '@ionic-internal/component-api/v6/header/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/header/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/header/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/header/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/header/slots.md';
+import Slots from '@ionic-internal/component-api/v6/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/v6/header/basic/index.md';
+import Basic from '@site/static/usage/v6/header/basic/index.mdx';
 
 <Basic />
 
@@ -31,7 +31,7 @@ import Basic from '@site/static/usage/v6/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/v6/header/translucent/index.md';
+import Translucent from '@site/static/usage/v6/header/translucent/index.mdx';
 
 <Translucent />
 
@@ -39,7 +39,7 @@ import Translucent from '@site/static/usage/v6/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/v6/header/condense/index.md';
+import Condense from '@site/static/usage/v6/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/v6/header/fade/index.md';
+import Fade from '@site/static/usage/v6/header/fade/index.mdx';
 
 <Fade />
 
@@ -57,7 +57,7 @@ import Fade from '@site/static/usage/v6/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/v6/header/custom-scroll-target/index.md';
+import CustomScrollTarget from '@site/static/usage/v6/header/custom-scroll-target/index.mdx';
 
 <CustomScrollTarget />
 
@@ -65,7 +65,7 @@ import CustomScrollTarget from '@site/static/usage/v6/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/v6/header/no-border/index.md';
+import NoBorder from '@site/static/usage/v6/header/no-border/index.mdx';
 
 <NoBorder />
 
diff --git a/versioned_docs/version-v6/api/icon.md b/versioned_docs/version-v6/api/icon.mdx
similarity index 92%
rename from versioned_docs/version-v6/api/icon.md
rename to versioned_docs/version-v6/api/icon.mdx
index 9e13144694c..5074eea613e 100644
--- a/versioned_docs/version-v6/api/icon.md
+++ b/versioned_docs/version-v6/api/icon.mdx
@@ -16,6 +16,6 @@ For a list of all available icons, see <a href="https://ionic.io/ionicons">ionic
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v6/icon/basic/index.md';
+import Basic from '@site/static/usage/v6/icon/basic/index.mdx';
 
 <Basic />
diff --git a/versioned_docs/version-v6/api/img.md b/versioned_docs/version-v6/api/img.mdx
similarity index 94%
rename from versioned_docs/version-v6/api/img.md
rename to versioned_docs/version-v6/api/img.mdx
index 1bbf45803df..45dce915618 100644
--- a/versioned_docs/version-v6/api/img.md
+++ b/versioned_docs/version-v6/api/img.mdx
@@ -2,12 +2,12 @@
 title: 'ion-img'
 ---
 
-import Props from '@ionic-internal/component-api/v6/img/props.md';
-import Events from '@ionic-internal/component-api/v6/img/events.md';
-import Methods from '@ionic-internal/component-api/v6/img/methods.md';
-import Parts from '@ionic-internal/component-api/v6/img/parts.md';
+import Props from '@ionic-internal/component-api/v6/img/props.mdx';
+import Events from '@ionic-internal/component-api/v6/img/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/img/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/img/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/img/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/img/slots.md';
+import Slots from '@ionic-internal/component-api/v6/img/slots.mdx';
 
 <head>
   <title>Img Tag to Lazy Load Images in Viewport | ion-img Tag</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/v6/img/basic/index.md';
+import Basic from '@site/static/usage/v6/img/basic/index.mdx';
 
 <Basic />
 
diff --git a/versioned_docs/version-v6/api/infinite-scroll-content.md b/versioned_docs/version-v6/api/infinite-scroll-content.mdx
similarity index 85%
rename from versioned_docs/version-v6/api/infinite-scroll-content.md
rename to versioned_docs/version-v6/api/infinite-scroll-content.mdx
index d6d505ce7c2..c6318535f5e 100644
--- a/versioned_docs/version-v6/api/infinite-scroll-content.md
+++ b/versioned_docs/version-v6/api/infinite-scroll-content.mdx
@@ -2,18 +2,18 @@
 title: 'ion-infinite-scroll-content'
 ---
 
-import Props from '@ionic-internal/component-api/v6/infinite-scroll-content/props.md';
-import Events from '@ionic-internal/component-api/v6/infinite-scroll-content/events.md';
-import Methods from '@ionic-internal/component-api/v6/infinite-scroll-content/methods.md';
-import Parts from '@ionic-internal/component-api/v6/infinite-scroll-content/parts.md';
+import Props from '@ionic-internal/component-api/v6/infinite-scroll-content/props.mdx';
+import Events from '@ionic-internal/component-api/v6/infinite-scroll-content/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/infinite-scroll-content/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/infinite-scroll-content/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/infinite-scroll-content/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/infinite-scroll-content/slots.md';
+import Slots from '@ionic-internal/component-api/v6/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-v6/api/infinite-scroll.md b/versioned_docs/version-v6/api/infinite-scroll.mdx
similarity index 95%
rename from versioned_docs/version-v6/api/infinite-scroll.md
rename to versioned_docs/version-v6/api/infinite-scroll.mdx
index 0a7eb560acd..a8817c7e33d 100644
--- a/versioned_docs/version-v6/api/infinite-scroll.md
+++ b/versioned_docs/version-v6/api/infinite-scroll.mdx
@@ -2,12 +2,12 @@
 title: 'ion-infinite-scroll'
 ---
 
-import Props from '@ionic-internal/component-api/v6/infinite-scroll/props.md';
-import Events from '@ionic-internal/component-api/v6/infinite-scroll/events.md';
-import Methods from '@ionic-internal/component-api/v6/infinite-scroll/methods.md';
-import Parts from '@ionic-internal/component-api/v6/infinite-scroll/parts.md';
+import Props from '@ionic-internal/component-api/v6/infinite-scroll/props.mdx';
+import Events from '@ionic-internal/component-api/v6/infinite-scroll/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/infinite-scroll/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/infinite-scroll/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/infinite-scroll/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/infinite-scroll/slots.md';
+import Slots from '@ionic-internal/component-api/v6/infinite-scroll/slots.mdx';
 
 <head>
   <title>Infinite Scroller | ion-infinite-scroll Action Component</title>
@@ -23,7 +23,7 @@ The Infinite Scroll component calls an action to be performed when the user scro
 
 The expression assigned to the `ionInfinite` event is called when the user reaches that defined distance. When this expression has finished any and all tasks, it should call the `complete()` method on the infinite scroll instance.
 
-import Basic from '@site/static/usage/v6/infinite-scroll/basic/index.md';
+import Basic from '@site/static/usage/v6/infinite-scroll/basic/index.mdx';
 
 <Basic />
 
@@ -31,7 +31,7 @@ import Basic from '@site/static/usage/v6/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/v6/infinite-scroll/infinite-scroll-content/index.md';
+import InfiniteScrollContent from '@site/static/usage/v6/infinite-scroll/infinite-scroll-content/index.mdx';
 
 <InfiniteScrollContent />
 
@@ -39,7 +39,7 @@ import InfiniteScrollContent from '@site/static/usage/v6/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/v6/infinite-scroll/custom-infinite-scroll-content/index.md';
+import CustomContent from '@site/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/index.mdx';
 
 <CustomContent />
 
diff --git a/versioned_docs/version-v6/api/input.md b/versioned_docs/version-v6/api/input.mdx
similarity index 92%
rename from versioned_docs/version-v6/api/input.md
rename to versioned_docs/version-v6/api/input.mdx
index 4105ba29f7f..e5b7d003a80 100644
--- a/versioned_docs/version-v6/api/input.md
+++ b/versioned_docs/version-v6/api/input.mdx
@@ -2,12 +2,12 @@
 title: 'ion-input'
 ---
 
-import Props from '@ionic-internal/component-api/v6/input/props.md';
-import Events from '@ionic-internal/component-api/v6/input/events.md';
-import Methods from '@ionic-internal/component-api/v6/input/methods.md';
-import Parts from '@ionic-internal/component-api/v6/input/parts.md';
+import Props from '@ionic-internal/component-api/v6/input/props.mdx';
+import Events from '@ionic-internal/component-api/v6/input/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/input/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/input/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/input/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/input/slots.md';
+import Slots from '@ionic-internal/component-api/v6/input/slots.mdx';
 
 <head>
   <title>ion-input: Custom Input Value Type 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/v6/input/basic/index.md';
+import Basic from '@site/static/usage/v6/input/basic/index.mdx';
 
 <Basic />
 
@@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v6/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/v6/input/types/index.md';
+import Types from '@site/static/usage/v6/input/types/index.mdx';
 
 <Types />
 
@@ -41,7 +41,7 @@ import Types from '@site/static/usage/v6/input/types/index.md';
 
 Labels will take up the width of their content by default. This positioning can be changed to be a fixed width, stacked, or floating label.
 
-import Labels from '@site/static/usage/v6/input/labels/index.md';
+import Labels from '@site/static/usage/v6/input/labels/index.mdx';
 
 <Labels />
 
@@ -49,7 +49,7 @@ import Labels from '@site/static/usage/v6/input/labels/index.md';
 
 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/v6/input/clear/index.md';
+import Clear from '@site/static/usage/v6/input/clear/index.mdx';
 
 <Clear />
 
@@ -57,7 +57,7 @@ import Clear from '@site/static/usage/v6/input/clear/index.md';
 
 Material Design offers filled styles for an input when it is inside of an item. The `fill` property on the item can be set to either `"solid"` or `"outline"`.
 
-import Fill from '@site/static/usage/v6/input/fill/index.md';
+import Fill from '@site/static/usage/v6/input/fill/index.mdx';
 
 <Fill />
 
@@ -67,7 +67,7 @@ Helper & error text can be used inside of an item with an input by slotting a no
 
 <!-- Reuse the playground from the Item directory -->
 
-import HelperError from '@site/static/usage/v6/item/helper-error/index.md';
+import HelperError from '@site/static/usage/v6/item/helper-error/index.mdx';
 
 <HelperError />
 
@@ -77,7 +77,7 @@ The item counter is helper text that displays under an input to notify the user
 
 <!-- Reuse the playground from the Item directory -->
 
-import Counter from '@site/static/usage/v6/item/counter/index.md';
+import Counter from '@site/static/usage/v6/item/counter/index.mdx';
 
 <Counter />
 
@@ -87,7 +87,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/v6/input/filtering/index.md';
+import FilteringData from '@site/static/usage/v6/input/filtering/index.mdx';
 
 <FilteringData />
 
@@ -95,7 +95,7 @@ import FilteringData from '@site/static/usage/v6/input/filtering/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v6/input/theming/colors/index.md';
+import Colors from '@site/static/usage/v6/input/theming/colors/index.mdx';
 
 <Colors />
 
@@ -103,7 +103,7 @@ import Colors from '@site/static/usage/v6/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/v6/input/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v6/input/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v6/api/item-divider.md b/versioned_docs/version-v6/api/item-divider.mdx
similarity index 92%
rename from versioned_docs/version-v6/api/item-divider.md
rename to versioned_docs/version-v6/api/item-divider.mdx
index a67a17842b9..a70d7595041 100644
--- a/versioned_docs/version-v6/api/item-divider.md
+++ b/versioned_docs/version-v6/api/item-divider.mdx
@@ -2,12 +2,12 @@
 title: 'ion-item-divider'
 ---
 
-import Props from '@ionic-internal/component-api/v6/item-divider/props.md';
-import Events from '@ionic-internal/component-api/v6/item-divider/events.md';
-import Methods from '@ionic-internal/component-api/v6/item-divider/methods.md';
-import Parts from '@ionic-internal/component-api/v6/item-divider/parts.md';
+import Props from '@ionic-internal/component-api/v6/item-divider/props.mdx';
+import Events from '@ionic-internal/component-api/v6/item-divider/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/item-divider/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/item-divider/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/item-divider/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/item-divider/slots.md';
+import Slots from '@ionic-internal/component-api/v6/item-divider/slots.mdx';
 
 <head>
   <title>Item Divider | List 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/v6/item-divider/basic/index.md';
+import Basic from '@site/static/usage/v6/item-divider/basic/index.mdx';
 
 <Basic />
 
@@ -33,13 +33,13 @@ import Basic from '@site/static/usage/v6/item-divider/basic/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v6/item-divider/theming/colors/index.md';
+import Colors from '@site/static/usage/v6/item-divider/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v6/item-divider/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v6/item-divider/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v6/api/item-group.md b/versioned_docs/version-v6/api/item-group.mdx
similarity index 94%
rename from versioned_docs/version-v6/api/item-group.md
rename to versioned_docs/version-v6/api/item-group.mdx
index 310f86e6623..aa7aa2e0069 100644
--- a/versioned_docs/version-v6/api/item-group.md
+++ b/versioned_docs/version-v6/api/item-group.mdx
@@ -2,12 +2,12 @@
 title: 'ion-item-group'
 ---
 
-import Props from '@ionic-internal/component-api/v6/item-group/props.md';
-import Events from '@ionic-internal/component-api/v6/item-group/events.md';
-import Methods from '@ionic-internal/component-api/v6/item-group/methods.md';
-import Parts from '@ionic-internal/component-api/v6/item-group/parts.md';
+import Props from '@ionic-internal/component-api/v6/item-group/props.mdx';
+import Events from '@ionic-internal/component-api/v6/item-group/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/item-group/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/item-group/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/item-group/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/item-group/slots.md';
+import Slots from '@ionic-internal/component-api/v6/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/v6/item-group/basic/index.md';
+import Basic from '@site/static/usage/v6/item-group/basic/index.mdx';
 
 <Basic />
 
 ## Sliding Items
 
-import SlidingItems from '@site/static/usage/v6/item-group/sliding-items/index.md';
+import SlidingItems from '@site/static/usage/v6/item-group/sliding-items/index.mdx';
 
 <SlidingItems />
 
diff --git a/versioned_docs/version-v6/api/item-option.md b/versioned_docs/version-v6/api/item-option.mdx
similarity index 95%
rename from versioned_docs/version-v6/api/item-option.md
rename to versioned_docs/version-v6/api/item-option.mdx
index 6d94da9aeee..b448488e183 100644
--- a/versioned_docs/version-v6/api/item-option.md
+++ b/versioned_docs/version-v6/api/item-option.mdx
@@ -2,12 +2,12 @@
 title: 'ion-item-option'
 ---
 
-import Props from '@ionic-internal/component-api/v6/item-option/props.md';
-import Events from '@ionic-internal/component-api/v6/item-option/events.md';
-import Methods from '@ionic-internal/component-api/v6/item-option/methods.md';
-import Parts from '@ionic-internal/component-api/v6/item-option/parts.md';
+import Props from '@ionic-internal/component-api/v6/item-option/props.mdx';
+import Events from '@ionic-internal/component-api/v6/item-option/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/item-option/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/item-option/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/item-option/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/item-option/slots.md';
+import Slots from '@ionic-internal/component-api/v6/item-option/slots.mdx';
 
 <head>
   <title>ion-item-options: Option Button Components for Ionic Apps</title>
diff --git a/versioned_docs/version-v6/api/item-options.md b/versioned_docs/version-v6/api/item-options.mdx
similarity index 96%
rename from versioned_docs/version-v6/api/item-options.md
rename to versioned_docs/version-v6/api/item-options.mdx
index 5cd1f1c1850..0c64b1eaa49 100644
--- a/versioned_docs/version-v6/api/item-options.md
+++ b/versioned_docs/version-v6/api/item-options.mdx
@@ -2,12 +2,12 @@
 title: 'ion-item-options'
 ---
 
-import Props from '@ionic-internal/component-api/v6/item-options/props.md';
-import Events from '@ionic-internal/component-api/v6/item-options/events.md';
-import Methods from '@ionic-internal/component-api/v6/item-options/methods.md';
-import Parts from '@ionic-internal/component-api/v6/item-options/parts.md';
+import Props from '@ionic-internal/component-api/v6/item-options/props.mdx';
+import Events from '@ionic-internal/component-api/v6/item-options/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/item-options/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/item-options/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/item-options/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/item-options/slots.md';
+import Slots from '@ionic-internal/component-api/v6/item-options/slots.mdx';
 
 <head>
   <title>ion-item-options: Option Button Components for Ionic Apps</title>
diff --git a/versioned_docs/version-v6/api/item-sliding.md b/versioned_docs/version-v6/api/item-sliding.mdx
similarity index 96%
rename from versioned_docs/version-v6/api/item-sliding.md
rename to versioned_docs/version-v6/api/item-sliding.mdx
index e39285bfd0a..c4fddbc02f4 100644
--- a/versioned_docs/version-v6/api/item-sliding.md
+++ b/versioned_docs/version-v6/api/item-sliding.mdx
@@ -2,12 +2,12 @@
 title: 'ion-item-sliding'
 ---
 
-import Props from '@ionic-internal/component-api/v6/item-sliding/props.md';
-import Events from '@ionic-internal/component-api/v6/item-sliding/events.md';
-import Methods from '@ionic-internal/component-api/v6/item-sliding/methods.md';
-import Parts from '@ionic-internal/component-api/v6/item-sliding/parts.md';
+import Props from '@ionic-internal/component-api/v6/item-sliding/props.mdx';
+import Events from '@ionic-internal/component-api/v6/item-sliding/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/item-sliding/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/item-sliding/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/item-sliding/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/item-sliding/slots.md';
+import Slots from '@ionic-internal/component-api/v6/item-sliding/slots.mdx';
 
 <head>
   <title>Slide Buttons | Slide Right to Left with ion-item-sliding</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/v6/item-sliding/basic/index.md';
+import Basic from '@site/static/usage/v6/item-sliding/basic/index.mdx';
 
 <Basic />
 
@@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v6/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/v6/item-sliding/icons/index.md';
+import Icons from '@site/static/usage/v6/item-sliding/icons/index.mdx';
 
 <Icons />
 
@@ -41,7 +41,7 @@ import Icons from '@site/static/usage/v6/item-sliding/icons/index.md';
 
 Options can be expanded to take up the full width of the 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/v6/item-sliding/expandable/index.md';
+import Expandable from '@site/static/usage/v6/item-sliding/expandable/index.mdx';
 
 <Expandable />
 
diff --git a/versioned_docs/version-v6/api/item.md b/versioned_docs/version-v6/api/item.mdx
similarity index 92%
rename from versioned_docs/version-v6/api/item.md
rename to versioned_docs/version-v6/api/item.mdx
index 520e91e1d02..16b19490904 100644
--- a/versioned_docs/version-v6/api/item.md
+++ b/versioned_docs/version-v6/api/item.mdx
@@ -2,12 +2,12 @@
 title: 'ion-item'
 ---
 
-import Props from '@ionic-internal/component-api/v6/item/props.md';
-import Events from '@ionic-internal/component-api/v6/item/events.md';
-import Methods from '@ionic-internal/component-api/v6/item/methods.md';
-import Parts from '@ionic-internal/component-api/v6/item/parts.md';
+import Props from '@ionic-internal/component-api/v6/item/props.mdx';
+import Events from '@ionic-internal/component-api/v6/item/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/item/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/item/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/item/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/item/slots.md';
+import Slots from '@ionic-internal/component-api/v6/item/slots.mdx';
 
 <head>
   <title>ion-item: Input, Edit, or Delete iOS and Android Item Elements</title>
@@ -27,7 +27,7 @@ Items are elements that can contain text, icons, avatars, images, inputs, and an
 
 Items left align text and add an ellipsis 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-wrap` 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/v6/item/basic/index.md';
+import Basic from '@site/static/usage/v6/item/basic/index.mdx';
 
 <Basic />
 
@@ -35,7 +35,7 @@ import Basic from '@site/static/usage/v6/item/basic/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/v6/item/clickable/index.md';
+import Clickable from '@site/static/usage/v6/item/clickable/index.mdx';
 
 <Clickable />
 
@@ -43,7 +43,7 @@ import Clickable from '@site/static/usage/v6/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/v6/item/detail-arrows/index.md';
+import DetailArrows from '@site/static/usage/v6/item/detail-arrows/index.mdx';
 
 <DetailArrows />
 
@@ -65,7 +65,7 @@ See the [theming documentation](/docs/theming/css-variables) for more informatio
 
 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/v6/item/lines/index.md';
+import Lines from '@site/static/usage/v6/item/lines/index.mdx';
 
 <Lines />
 
@@ -73,7 +73,7 @@ import Lines from '@site/static/usage/v6/item/lines/index.md';
 
 [Avatars](./avatar) and [Thumbnails](./thumbnail) can be slotted inside of an item. This is useful when making lists of images and text.
 
-import Media from '@site/static/usage/v6/item/media/index.md';
+import Media from '@site/static/usage/v6/item/media/index.mdx';
 
 <Media />
 
@@ -81,19 +81,19 @@ import Media from '@site/static/usage/v6/item/media/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/v6/item/buttons/index.md';
+import Buttons from '@site/static/usage/v6/item/buttons/index.mdx';
 
 <Buttons />
 
 ## Icons in Items
 
-import Icons from '@site/static/usage/v6/item/icons/index.md';
+import Icons from '@site/static/usage/v6/item/icons/index.mdx';
 
 <Icons />
 
 ## Item Inputs
 
-import Inputs from '@site/static/usage/v6/item/inputs/index.md';
+import Inputs from '@site/static/usage/v6/item/inputs/index.mdx';
 
 <Inputs />
 
@@ -101,7 +101,7 @@ import Inputs from '@site/static/usage/v6/item/inputs/index.md';
 
 Helper & error text can be used inside of an item with an input by slotting a note in the `"helper"` and `"error"` slots. The error slot will not be displayed unless the `ion-invalid` class is added to the `ion-item`. 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/v6/item/helper-error/index.md';
+import HelperError from '@site/static/usage/v6/item/helper-error/index.mdx';
 
 <HelperError />
 
@@ -109,7 +109,7 @@ import HelperError from '@site/static/usage/v6/item/helper-error/index.md';
 
 The item counter is helper text that displays under an input to notify the user of how many characters have been entered out of the total that the input 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/v6/item/counter/index.md';
+import Counter from '@site/static/usage/v6/item/counter/index.mdx';
 
 <Counter />
 
@@ -117,19 +117,19 @@ import Counter from '@site/static/usage/v6/item/counter/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v6/item/theming/colors/index.md';
+import Colors from '@site/static/usage/v6/item/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Shadow Parts
 
-import CSSParts from '@site/static/usage/v6/item/theming/css-shadow-parts/index.md';
+import CSSParts from '@site/static/usage/v6/item/theming/css-shadow-parts/index.mdx';
 
 <CSSParts />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v6/item/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v6/item/theming/css-properties/index.mdx';
 
 <CSSProps />
 
@@ -139,7 +139,7 @@ Items containing an input will highlight the bottom border of the input with a d
 
 The highlight color changes based on the item state, but all of the states use Ionic colors by default. When focused, the input highlight will use the `primary` color. If the input is valid it will use the `success` color, and invalid inputs will use the `danger` color. This can be customized using the provided CSS properties.
 
-import InputHighlight from '@site/static/usage/v6/item/theming/input-highlight/index.md';
+import InputHighlight from '@site/static/usage/v6/item/theming/input-highlight/index.mdx';
 
 <InputHighlight />
 
diff --git a/versioned_docs/version-v6/api/label.md b/versioned_docs/version-v6/api/label.mdx
similarity index 85%
rename from versioned_docs/version-v6/api/label.md
rename to versioned_docs/version-v6/api/label.mdx
index ec5a6d2a5a4..8d861c06fd8 100644
--- a/versioned_docs/version-v6/api/label.md
+++ b/versioned_docs/version-v6/api/label.mdx
@@ -2,12 +2,12 @@
 title: 'ion-label'
 ---
 
-import Props from '@ionic-internal/component-api/v6/label/props.md';
-import Events from '@ionic-internal/component-api/v6/label/events.md';
-import Methods from '@ionic-internal/component-api/v6/label/methods.md';
-import Parts from '@ionic-internal/component-api/v6/label/parts.md';
+import Props from '@ionic-internal/component-api/v6/label/props.mdx';
+import Events from '@ionic-internal/component-api/v6/label/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/label/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/label/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/label/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/label/slots.md';
+import Slots from '@ionic-internal/component-api/v6/label/slots.mdx';
 
 <head>
   <title>Item Label Color and Properties for Applications | ion-label</title>
@@ -25,19 +25,19 @@ Label is a wrapper element that can be used in combination with `ion-item`, `ion
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v6/label/basic/index.md';
+import Basic from '@site/static/usage/v6/label/basic/index.mdx';
 
 <Basic />
 
 ## Item Labels
 
-import Item from '@site/static/usage/v6/label/item/index.md';
+import Item from '@site/static/usage/v6/label/item/index.mdx';
 
 <Item />
 
 ## Input Labels
 
-import Input from '@site/static/usage/v6/label/input/index.md';
+import Input from '@site/static/usage/v6/label/input/index.mdx';
 
 <Input />
 
@@ -45,7 +45,7 @@ import Input from '@site/static/usage/v6/label/input/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v6/label/theming/colors/index.md';
+import Colors from '@site/static/usage/v6/label/theming/colors/index.mdx';
 
 <Colors />
 
diff --git a/versioned_docs/version-v6/api/list-header.md b/versioned_docs/version-v6/api/list-header.mdx
similarity index 92%
rename from versioned_docs/version-v6/api/list-header.md
rename to versioned_docs/version-v6/api/list-header.mdx
index 918d3964fb6..a8823694ab1 100644
--- a/versioned_docs/version-v6/api/list-header.md
+++ b/versioned_docs/version-v6/api/list-header.mdx
@@ -2,12 +2,12 @@
 title: 'ion-list-header'
 ---
 
-import Props from '@ionic-internal/component-api/v6/list-header/props.md';
-import Events from '@ionic-internal/component-api/v6/list-header/events.md';
-import Methods from '@ionic-internal/component-api/v6/list-header/methods.md';
-import Parts from '@ionic-internal/component-api/v6/list-header/parts.md';
+import Props from '@ionic-internal/component-api/v6/list-header/props.mdx';
+import Events from '@ionic-internal/component-api/v6/list-header/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/list-header/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/list-header/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/list-header/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/list-header/slots.md';
+import Slots from '@ionic-internal/component-api/v6/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/v6/list-header/basic/index.md';
+import Basic from '@site/static/usage/v6/list-header/basic/index.mdx';
 
 <Basic />
 
@@ -25,7 +25,7 @@ import Basic from '@site/static/usage/v6/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/v6/list-header/buttons/index.md';
+import Buttons from '@site/static/usage/v6/list-header/buttons/index.mdx';
 
 <Buttons />
 
@@ -33,7 +33,7 @@ import Buttons from '@site/static/usage/v6/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/v6/list-header/lines/index.md';
+import Lines from '@site/static/usage/v6/list-header/lines/index.mdx';
 
 <Lines />
 
@@ -41,13 +41,13 @@ import Lines from '@site/static/usage/v6/list-header/lines/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v6/list-header/theming/colors/index.md';
+import Colors from '@site/static/usage/v6/list-header/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v6/list-header/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v6/list-header/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v6/api/list.md b/versioned_docs/version-v6/api/list.mdx
similarity index 89%
rename from versioned_docs/version-v6/api/list.md
rename to versioned_docs/version-v6/api/list.mdx
index 0703088c110..c535c5845f1 100644
--- a/versioned_docs/version-v6/api/list.md
+++ b/versioned_docs/version-v6/api/list.mdx
@@ -2,12 +2,12 @@
 title: 'ion-list'
 ---
 
-import Props from '@ionic-internal/component-api/v6/list/props.md';
-import Events from '@ionic-internal/component-api/v6/list/events.md';
-import Methods from '@ionic-internal/component-api/v6/list/methods.md';
-import Parts from '@ionic-internal/component-api/v6/list/parts.md';
+import Props from '@ionic-internal/component-api/v6/list/props.mdx';
+import Events from '@ionic-internal/component-api/v6/list/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/list/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/list/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/list/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/list/slots.md';
+import Slots from '@ionic-internal/component-api/v6/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/v6/list/basic/index.md';
+import Basic from '@site/static/usage/v6/list/basic/index.mdx';
 
 <Basic />
 
@@ -34,7 +34,7 @@ import Basic from '@site/static/usage/v6/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/v6/list/inset/index.md';
+import Inset from '@site/static/usage/v6/list/inset/index.mdx';
 
 <Inset />
 
@@ -42,7 +42,7 @@ import Inset from '@site/static/usage/v6/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/v6/list/lines/index.md';
+import Lines from '@site/static/usage/v6/list/lines/index.mdx';
 
 <Lines />
 
diff --git a/versioned_docs/version-v6/api/loading.md b/versioned_docs/version-v6/api/loading.mdx
similarity index 98%
rename from versioned_docs/version-v6/api/loading.md
rename to versioned_docs/version-v6/api/loading.mdx
index e2dfcf89977..925f1a0742b 100644
--- a/versioned_docs/version-v6/api/loading.md
+++ b/versioned_docs/version-v6/api/loading.mdx
@@ -5,12 +5,12 @@ title: 'ion-loading'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v6/loading/props.md';
-import Events from '@ionic-internal/component-api/v6/loading/events.md';
-import Methods from '@ionic-internal/component-api/v6/loading/methods.md';
-import Parts from '@ionic-internal/component-api/v6/loading/parts.md';
+import Props from '@ionic-internal/component-api/v6/loading/props.mdx';
+import Events from '@ionic-internal/component-api/v6/loading/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/loading/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/loading/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/loading/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/loading/slots.md';
+import Slots from '@ionic-internal/component-api/v6/loading/slots.mdx';
 
 <head>
   <title>Loading | Application Loading Indicator Overlay | ion-loading</title>
@@ -34,7 +34,7 @@ Alternatively, developers can configure the loading indicator to dismiss automat
 
 ### Controller
 
-import Controller from '@site/static/usage/v6/loading/controller/index.md';
+import Controller from '@site/static/usage/v6/loading/controller/index.mdx';
 
 <Controller />
 
@@ -112,7 +112,7 @@ export const LoadingExample: React.FC = () => {
 
 The spinner that is used can be customized using the `spinner` property. See the [spinner property documentation](#spinner) for a full list of options.
 
-import Spinners from '@site/static/usage/v6/loading/spinners/index.md';
+import Spinners from '@site/static/usage/v6/loading/spinners/index.mdx';
 
 <Spinners />
 
@@ -122,7 +122,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/v6/loading/theming/index.md';
+import Theming from '@site/static/usage/v6/loading/theming/index.mdx';
 
 <Theming />
 
diff --git a/versioned_docs/version-v6/api/menu-button.md b/versioned_docs/version-v6/api/menu-button.mdx
similarity index 94%
rename from versioned_docs/version-v6/api/menu-button.md
rename to versioned_docs/version-v6/api/menu-button.mdx
index 4f112bd3282..721120e863f 100644
--- a/versioned_docs/version-v6/api/menu-button.md
+++ b/versioned_docs/version-v6/api/menu-button.mdx
@@ -2,12 +2,12 @@
 title: 'ion-menu-button'
 ---
 
-import Props from '@ionic-internal/component-api/v6/menu-button/props.md';
-import Events from '@ionic-internal/component-api/v6/menu-button/events.md';
-import Methods from '@ionic-internal/component-api/v6/menu-button/methods.md';
-import Parts from '@ionic-internal/component-api/v6/menu-button/parts.md';
+import Props from '@ionic-internal/component-api/v6/menu-button/props.mdx';
+import Events from '@ionic-internal/component-api/v6/menu-button/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/menu-button/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/menu-button/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/menu-button/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/menu-button/slots.md';
+import Slots from '@ionic-internal/component-api/v6/menu-button/slots.mdx';
 
 <head>
   <title>Menu Button | ion-menu-button to Open an App Menu on A Page</title>
diff --git a/versioned_docs/version-v6/api/menu-toggle.md b/versioned_docs/version-v6/api/menu-toggle.mdx
similarity index 95%
rename from versioned_docs/version-v6/api/menu-toggle.md
rename to versioned_docs/version-v6/api/menu-toggle.mdx
index 679be9b8040..350cc9ef584 100644
--- a/versioned_docs/version-v6/api/menu-toggle.md
+++ b/versioned_docs/version-v6/api/menu-toggle.mdx
@@ -2,12 +2,12 @@
 title: 'ion-menu-toggle'
 ---
 
-import Props from '@ionic-internal/component-api/v6/menu-toggle/props.md';
-import Events from '@ionic-internal/component-api/v6/menu-toggle/events.md';
-import Methods from '@ionic-internal/component-api/v6/menu-toggle/methods.md';
-import Parts from '@ionic-internal/component-api/v6/menu-toggle/parts.md';
+import Props from '@ionic-internal/component-api/v6/menu-toggle/props.mdx';
+import Events from '@ionic-internal/component-api/v6/menu-toggle/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/menu-toggle/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/menu-toggle/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/menu-toggle/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/menu-toggle/slots.md';
+import Slots from '@ionic-internal/component-api/v6/menu-toggle/slots.mdx';
 
 <head>
   <title>ion-menu-toggle | MenuToggle Component to Open/Close Active Menus</title>
diff --git a/versioned_docs/version-v6/api/menu.md b/versioned_docs/version-v6/api/menu.mdx
similarity index 95%
rename from versioned_docs/version-v6/api/menu.md
rename to versioned_docs/version-v6/api/menu.mdx
index f6ec9ec0db3..6bfb4a7ceb7 100644
--- a/versioned_docs/version-v6/api/menu.md
+++ b/versioned_docs/version-v6/api/menu.mdx
@@ -2,12 +2,12 @@
 title: 'ion-menu'
 ---
 
-import Props from '@ionic-internal/component-api/v6/menu/props.md';
-import Events from '@ionic-internal/component-api/v6/menu/events.md';
-import Methods from '@ionic-internal/component-api/v6/menu/methods.md';
-import Parts from '@ionic-internal/component-api/v6/menu/parts.md';
+import Props from '@ionic-internal/component-api/v6/menu/props.mdx';
+import Events from '@ionic-internal/component-api/v6/menu/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/menu/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/menu/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/menu/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/menu/slots.md';
+import Slots from '@ionic-internal/component-api/v6/menu/slots.mdx';
 
 <head>
   <title>ion-menu: API Framework Docs for Types of Menu Components</title>
@@ -30,7 +30,7 @@ These can be controlled from the templates, or programmatically using the MenuCo
 
 ## Basic Usage
 
-import BasicUsage from '@site/static/usage/v6/menu/basic/index.md';
+import BasicUsage from '@site/static/usage/v6/menu/basic/index.mdx';
 
 <BasicUsage />
 
@@ -38,7 +38,7 @@ import BasicUsage from '@site/static/usage/v6/menu/basic/index.md';
 
 The [ion-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/v6/menu/toggle/index.md';
+import MenuToggle from '@site/static/usage/v6/menu/toggle/index.mdx';
 
 <MenuToggle />
 
@@ -46,7 +46,7 @@ import MenuToggle from '@site/static/usage/v6/menu/toggle/index.md';
 
 The `type` property can be used to customize how menus display in your application.
 
-import MenuType from '@site/static/usage/v6/menu/type/index.md';
+import MenuType from '@site/static/usage/v6/menu/type/index.mdx';
 
 <MenuType />
 
@@ -54,7 +54,7 @@ import MenuType from '@site/static/usage/v6/menu/type/index.md';
 
 ### CSS Shadow Parts
 
-import Theming from '@site/static/usage/v6/menu/theming/index.md';
+import Theming from '@site/static/usage/v6/menu/theming/index.mdx';
 
 <Theming />
 
diff --git a/versioned_docs/version-v6/api/modal.md b/versioned_docs/version-v6/api/modal.mdx
similarity index 97%
rename from versioned_docs/version-v6/api/modal.md
rename to versioned_docs/version-v6/api/modal.mdx
index f7fb937e656..e9f562d368e 100644
--- a/versioned_docs/version-v6/api/modal.md
+++ b/versioned_docs/version-v6/api/modal.mdx
@@ -2,12 +2,12 @@
 title: 'ion-modal'
 ---
 
-import Props from '@ionic-internal/component-api/v6/modal/props.md';
-import Events from '@ionic-internal/component-api/v6/modal/events.md';
-import Methods from '@ionic-internal/component-api/v6/modal/methods.md';
-import Parts from '@ionic-internal/component-api/v6/modal/parts.md';
+import Props from '@ionic-internal/component-api/v6/modal/props.mdx';
+import Events from '@ionic-internal/component-api/v6/modal/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/modal/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/modal/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/modal/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/modal/slots.md';
+import Slots from '@ionic-internal/component-api/v6/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/v6/modal/inline/basic/index.md';
+import InlineModalTriggerExample from '@site/static/usage/v6/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/v6/modal/inline/is-open/index.md';
+import InlineModalIsOpenExample from '@site/static/usage/v6/modal/inline/is-open/index.mdx';
 
 <InlineModalIsOpenExample />
 
@@ -47,7 +47,7 @@ import InlineModalIsOpenExample from '@site/static/usage/v6/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/v6/modal/controller/index.md';
+import ControllerExample from '@site/static/usage/v6/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/v6/modal/can-dismiss/boolean/index.md';
+import CanDismissBooleanExample from '@site/static/usage/v6/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/v6/modal/can-dismiss/function/index.md';
+import CanDismissFunctionExample from '@site/static/usage/v6/modal/can-dismiss/function/index.mdx';
 
 <CanDismissFunctionExample />
 
@@ -87,7 +87,7 @@ import CanDismissFunctionExample from '@site/static/usage/v6/modal/can-dismiss/f
 
 Developers may want to prevent users from swiping to close a 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/v6/modal/can-dismiss/prevent-swipe-to-close/index.md';
+import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/index.mdx';
 
 <CanDismissPreventSwipeToCloseExample />
 
@@ -105,7 +105,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/v6/modal/card/basic/index.md';
+import CardExample from '@site/static/usage/v6/modal/card/basic/index.mdx';
 
 <CardExample />
 
@@ -119,13 +119,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/v6/modal/sheet/basic/index.md';
+import SheetExample from '@site/static/usage/v6/modal/sheet/basic/index.mdx';
 
 <SheetExample />
 
 #### Interacting with background content
 
-import SheetBackgroundContentExample from '@site/static/usage/v6/modal/sheet/background-content/index.md';
+import SheetBackgroundContentExample from '@site/static/usage/v6/modal/sheet/background-content/index.mdx';
 
 <SheetBackgroundContentExample />
 
@@ -133,7 +133,7 @@ import SheetBackgroundContentExample from '@site/static/usage/v6/modal/sheet/bac
 
 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/v6/modal/sheet/handle-behavior/index.md';
+import SheetHandleBehaviorExample from '@site/static/usage/v6/modal/sheet/handle-behavior/index.mdx';
 
 <SheetHandleBehaviorExample />
 
@@ -156,7 +156,7 @@ ion-modal.stack-modal {
 }
 ```
 
-import ThemeExample from '@site/static/usage/v6/modal/styling/theming/index.md';
+import ThemeExample from '@site/static/usage/v6/modal/styling/theming/index.mdx';
 
 <ThemeExample />
 
@@ -164,7 +164,7 @@ import ThemeExample from '@site/static/usage/v6/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/v6/modal/styling/animations/index.md';
+import AnimationsExample from '@site/static/usage/v6/modal/styling/animations/index.mdx';
 
 <AnimationsExample />
 
@@ -172,7 +172,7 @@ import AnimationsExample from '@site/static/usage/v6/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/v6/modal/custom-dialogs/index.md';
+import CustomDialogs from '@site/static/usage/v6/modal/custom-dialogs/index.mdx';
 
 <CustomDialogs />
 
@@ -261,7 +261,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/v6/modal/performance/mount/index.md';
+import Mount from '@site/static/usage/v6/modal/performance/mount/index.mdx';
 
 <Mount />
 
diff --git a/versioned_docs/version-v6/api/nav-link.md b/versioned_docs/version-v6/api/nav-link.mdx
similarity index 96%
rename from versioned_docs/version-v6/api/nav-link.md
rename to versioned_docs/version-v6/api/nav-link.mdx
index 9e41b264068..6d54a1fa06e 100644
--- a/versioned_docs/version-v6/api/nav-link.md
+++ b/versioned_docs/version-v6/api/nav-link.mdx
@@ -2,12 +2,12 @@
 title: 'ion-nav-link'
 ---
 
-import Props from '@ionic-internal/component-api/v6/nav-link/props.md';
-import Events from '@ionic-internal/component-api/v6/nav-link/events.md';
-import Methods from '@ionic-internal/component-api/v6/nav-link/methods.md';
-import Parts from '@ionic-internal/component-api/v6/nav-link/parts.md';
+import Props from '@ionic-internal/component-api/v6/nav-link/props.mdx';
+import Events from '@ionic-internal/component-api/v6/nav-link/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/nav-link/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/nav-link/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/nav-link/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/nav-link/slots.md';
+import Slots from '@ionic-internal/component-api/v6/nav-link/slots.mdx';
 
 <head>
   <title>ion-nav-link: The Element for Navigation to a Specified Component</title>
diff --git a/versioned_docs/version-v6/api/nav.md b/versioned_docs/version-v6/api/nav.mdx
similarity index 97%
rename from versioned_docs/version-v6/api/nav.md
rename to versioned_docs/version-v6/api/nav.mdx
index 80c3226e93e..bc50b1c45d4 100644
--- a/versioned_docs/version-v6/api/nav.md
+++ b/versioned_docs/version-v6/api/nav.mdx
@@ -2,12 +2,12 @@
 title: 'ion-nav'
 ---
 
-import Props from '@ionic-internal/component-api/v6/nav/props.md';
-import Events from '@ionic-internal/component-api/v6/nav/events.md';
-import Methods from '@ionic-internal/component-api/v6/nav/methods.md';
-import Parts from '@ionic-internal/component-api/v6/nav/parts.md';
+import Props from '@ionic-internal/component-api/v6/nav/props.mdx';
+import Events from '@ionic-internal/component-api/v6/nav/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/nav/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/nav/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/nav/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/nav/slots.md';
+import Slots from '@ionic-internal/component-api/v6/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/v6/nav/nav-link/index.md';
+import NavLinkExample from '@site/static/usage/v6/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/v6/nav/modal-navigation/index.md';
+import ModalNavigationExample from '@site/static/usage/v6/nav/modal-navigation/index.mdx';
 
 <ModalNavigationExample />
 
diff --git a/versioned_docs/version-v6/api/note.md b/versioned_docs/version-v6/api/note.mdx
similarity index 88%
rename from versioned_docs/version-v6/api/note.md
rename to versioned_docs/version-v6/api/note.mdx
index 1c096d86091..394121ee48c 100644
--- a/versioned_docs/version-v6/api/note.md
+++ b/versioned_docs/version-v6/api/note.mdx
@@ -2,12 +2,12 @@
 title: 'ion-note'
 ---
 
-import Props from '@ionic-internal/component-api/v6/note/props.md';
-import Events from '@ionic-internal/component-api/v6/note/events.md';
-import Methods from '@ionic-internal/component-api/v6/note/methods.md';
-import Parts from '@ionic-internal/component-api/v6/note/parts.md';
+import Props from '@ionic-internal/component-api/v6/note/props.mdx';
+import Events from '@ionic-internal/component-api/v6/note/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/note/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/note/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/note/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/note/slots.md';
+import Slots from '@ionic-internal/component-api/v6/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/v6/note/basic/index.md';
+import Basic from '@site/static/usage/v6/note/basic/index.mdx';
 
 <Basic />
 
 ## Item Notes
 
-import Item from '@site/static/usage/v6/note/item/index.md';
+import Item from '@site/static/usage/v6/note/item/index.mdx';
 
 <Item />
 
@@ -39,13 +39,13 @@ import Item from '@site/static/usage/v6/note/item/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v6/note/theming/colors/index.md';
+import Colors from '@site/static/usage/v6/note/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v6/note/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v6/note/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v6/api/picker.md b/versioned_docs/version-v6/api/picker.mdx
similarity index 97%
rename from versioned_docs/version-v6/api/picker.md
rename to versioned_docs/version-v6/api/picker.mdx
index 7799faf2683..9dc990e37f4 100644
--- a/versioned_docs/version-v6/api/picker.md
+++ b/versioned_docs/version-v6/api/picker.mdx
@@ -2,12 +2,12 @@
 title: 'ion-picker'
 ---
 
-import Props from '@ionic-internal/component-api/v6/picker/props.md';
-import Events from '@ionic-internal/component-api/v6/picker/events.md';
-import Methods from '@ionic-internal/component-api/v6/picker/methods.md';
-import Parts from '@ionic-internal/component-api/v6/picker/parts.md';
+import Props from '@ionic-internal/component-api/v6/picker/props.mdx';
+import Events from '@ionic-internal/component-api/v6/picker/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/picker/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/picker/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/picker/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/picker/slots.md';
+import Slots from '@ionic-internal/component-api/v6/picker/slots.mdx';
 
 <head>
   <title>Picker | Display Buttons and Columns for ion-picker on Ionic Apps</title>
@@ -27,7 +27,7 @@ A Picker is a dialog that displays a row of buttons and columns underneath. It a
 
 Display a list of options in a single, scrollable column.
 
-import SingleColumn from '@site/static/usage/v6/picker/single-column/index.md';
+import SingleColumn from '@site/static/usage/v6/picker/single-column/index.mdx';
 
 <SingleColumn />
 
@@ -35,7 +35,7 @@ import SingleColumn from '@site/static/usage/v6/picker/single-column/index.md';
 
 Display multiple columns of different options.
 
-import MultipleColumn from '@site/static/usage/v6/picker/multiple-column/index.md';
+import MultipleColumn from '@site/static/usage/v6/picker/multiple-column/index.mdx';
 
 <MultipleColumn />
 
diff --git a/versioned_docs/version-v6/api/popover.md b/versioned_docs/version-v6/api/popover.mdx
similarity index 98%
rename from versioned_docs/version-v6/api/popover.md
rename to versioned_docs/version-v6/api/popover.mdx
index 3678c58a46a..ec8b2a06cf4 100644
--- a/versioned_docs/version-v6/api/popover.md
+++ b/versioned_docs/version-v6/api/popover.mdx
@@ -2,12 +2,12 @@
 title: 'ion-popover'
 ---
 
-import Props from '@ionic-internal/component-api/v6/popover/props.md';
-import Events from '@ionic-internal/component-api/v6/popover/events.md';
-import Methods from '@ionic-internal/component-api/v6/popover/methods.md';
-import Parts from '@ionic-internal/component-api/v6/popover/parts.md';
+import Props from '@ionic-internal/component-api/v6/popover/props.mdx';
+import Events from '@ionic-internal/component-api/v6/popover/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/popover/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/popover/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/popover/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/popover/slots.md';
+import Slots from '@ionic-internal/component-api/v6/popover/slots.mdx';
 
 <head>
   <title>ion-popover: iOS / Android Popover UI Component & CSS Properties</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/v6/popover/presenting/inline-trigger/index.md';
+import InlineTrigger from '@site/static/usage/v6/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/v6/popover/presenting/inline-isopen/index.md';
+import IsOpenTrigger from '@site/static/usage/v6/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/v6/popover/presenting/controller/index.md';
+import ControllerExample from '@site/static/usage/v6/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/v6/popover/customization/styling/index.md';
+import Styling from '@site/static/usage/v6/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/v6/popover/customization/positioning/index.md';
+import Positioning from '@site/static/usage/v6/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/v6/popover/customization/sizing/index.md';
+import Sizing from '@site/static/usage/v6/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/v6/popover/nested/index.md';
+import NestedPopover from '@site/static/usage/v6/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/v6/popover/performance/mount/index.md';
+import Mount from '@site/static/usage/v6/popover/performance/mount/index.mdx';
 
 <Mount />
 
diff --git a/versioned_docs/version-v6/api/progress-bar.md b/versioned_docs/version-v6/api/progress-bar.mdx
similarity index 92%
rename from versioned_docs/version-v6/api/progress-bar.md
rename to versioned_docs/version-v6/api/progress-bar.mdx
index f972c48d8f2..6ac455e9146 100644
--- a/versioned_docs/version-v6/api/progress-bar.md
+++ b/versioned_docs/version-v6/api/progress-bar.mdx
@@ -2,12 +2,12 @@
 title: 'ion-progress-bar'
 ---
 
-import Props from '@ionic-internal/component-api/v6/progress-bar/props.md';
-import Events from '@ionic-internal/component-api/v6/progress-bar/events.md';
-import Methods from '@ionic-internal/component-api/v6/progress-bar/methods.md';
-import Parts from '@ionic-internal/component-api/v6/progress-bar/parts.md';
+import Props from '@ionic-internal/component-api/v6/progress-bar/props.mdx';
+import Events from '@ionic-internal/component-api/v6/progress-bar/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/progress-bar/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/progress-bar/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/progress-bar/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/progress-bar/slots.md';
+import Slots from '@ionic-internal/component-api/v6/progress-bar/slots.mdx';
 
 <head>
   <title>Progress Bar | Horizontal 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/v6/progress-bar/determinate/index.md';
+import Determinate from '@site/static/usage/v6/progress-bar/determinate/index.mdx';
 
 <Determinate />
 
@@ -35,7 +35,7 @@ import Determinate from '@site/static/usage/v6/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/v6/progress-bar/buffer/index.md';
+import Buffer from '@site/static/usage/v6/progress-bar/buffer/index.mdx';
 
 <Buffer />
 
@@ -43,7 +43,7 @@ import Buffer from '@site/static/usage/v6/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/v6/progress-bar/indeterminate/index.md';
+import Indeterminate from '@site/static/usage/v6/progress-bar/indeterminate/index.mdx';
 
 <Indeterminate />
 
@@ -51,7 +51,7 @@ import Indeterminate from '@site/static/usage/v6/progress-bar/indeterminate/inde
 
 <!-- Reuse the playground from the Toolbar directory -->
 
-import Toolbar from '@site/static/usage/v6/toolbar/progress-bars/index.md';
+import Toolbar from '@site/static/usage/v6/toolbar/progress-bars/index.mdx';
 
 <Toolbar />
 
@@ -59,19 +59,19 @@ import Toolbar from '@site/static/usage/v6/toolbar/progress-bars/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v6/progress-bar/theming/colors/index.md';
+import Colors from '@site/static/usage/v6/progress-bar/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v6/progress-bar/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v6/progress-bar/theming/css-properties/index.mdx';
 
 <CSSProps />
 
 ### CSS Shadow Parts
 
-import CSSParts from '@site/static/usage/v6/progress-bar/theming/css-shadow-parts/index.md';
+import CSSParts from '@site/static/usage/v6/progress-bar/theming/css-shadow-parts/index.mdx';
 
 <CSSParts />
 
diff --git a/versioned_docs/version-v6/api/radio-group.md b/versioned_docs/version-v6/api/radio-group.mdx
similarity index 96%
rename from versioned_docs/version-v6/api/radio-group.md
rename to versioned_docs/version-v6/api/radio-group.mdx
index da290b0b2a7..ec4ab0623e5 100644
--- a/versioned_docs/version-v6/api/radio-group.md
+++ b/versioned_docs/version-v6/api/radio-group.mdx
@@ -2,12 +2,12 @@
 title: 'ion-radio-group'
 ---
 
-import Props from '@ionic-internal/component-api/v6/radio-group/props.md';
-import Events from '@ionic-internal/component-api/v6/radio-group/events.md';
-import Methods from '@ionic-internal/component-api/v6/radio-group/methods.md';
-import Parts from '@ionic-internal/component-api/v6/radio-group/parts.md';
+import Props from '@ionic-internal/component-api/v6/radio-group/props.mdx';
+import Events from '@ionic-internal/component-api/v6/radio-group/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/radio-group/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/radio-group/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/radio-group/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/radio-group/slots.md';
+import Slots from '@ionic-internal/component-api/v6/radio-group/slots.mdx';
 
 <head>
   <title>ion-radio-group | Radio Button Group Usage for Ionic Apps</title>
diff --git a/versioned_docs/version-v6/api/radio.md b/versioned_docs/version-v6/api/radio.mdx
similarity index 92%
rename from versioned_docs/version-v6/api/radio.md
rename to versioned_docs/version-v6/api/radio.mdx
index f3083ee9a4a..7dd372ea675 100644
--- a/versioned_docs/version-v6/api/radio.md
+++ b/versioned_docs/version-v6/api/radio.mdx
@@ -2,12 +2,12 @@
 title: 'ion-radio'
 ---
 
-import Props from '@ionic-internal/component-api/v6/radio/props.md';
-import Events from '@ionic-internal/component-api/v6/radio/events.md';
-import Methods from '@ionic-internal/component-api/v6/radio/methods.md';
-import Parts from '@ionic-internal/component-api/v6/radio/parts.md';
+import Props from '@ionic-internal/component-api/v6/radio/props.mdx';
+import Events from '@ionic-internal/component-api/v6/radio/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/radio/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/radio/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/radio/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/radio/slots.md';
+import Slots from '@ionic-internal/component-api/v6/radio/slots.mdx';
 
 <head>
   <title>ion-radio Component: Radio Property 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/v6/radio/basic/index.md';
+import Basic from '@site/static/usage/v6/radio/basic/index.mdx';
 
 <Basic />
 
@@ -35,7 +35,7 @@ import Basic from '@site/static/usage/v6/radio/basic/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/v6/radio/empty-selection/index.md';
+import EmptySelection from '@site/static/usage/v6/radio/empty-selection/index.mdx';
 
 <EmptySelection />
 
@@ -43,19 +43,19 @@ import EmptySelection from '@site/static/usage/v6/radio/empty-selection/index.md
 
 ### Colors
 
-import Colors from '@site/static/usage/v6/radio/theming/colors/index.md';
+import Colors from '@site/static/usage/v6/radio/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v6/radio/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v6/radio/theming/css-properties/index.mdx';
 
 <CSSProps />
 
 ### CSS Shadow Parts
 
-import CSSParts from '@site/static/usage/v6/radio/theming/css-shadow-parts/index.md';
+import CSSParts from '@site/static/usage/v6/radio/theming/css-shadow-parts/index.mdx';
 
 <CSSParts />
 
diff --git a/versioned_docs/version-v6/api/range.md b/versioned_docs/version-v6/api/range.mdx
similarity index 94%
rename from versioned_docs/version-v6/api/range.md
rename to versioned_docs/version-v6/api/range.mdx
index ee753a0a5d3..912f77aca75 100644
--- a/versioned_docs/version-v6/api/range.md
+++ b/versioned_docs/version-v6/api/range.mdx
@@ -2,12 +2,12 @@
 title: 'ion-range'
 ---
 
-import Props from '@ionic-internal/component-api/v6/range/props.md';
-import Events from '@ionic-internal/component-api/v6/range/events.md';
-import Methods from '@ionic-internal/component-api/v6/range/methods.md';
-import Parts from '@ionic-internal/component-api/v6/range/parts.md';
+import Props from '@ionic-internal/component-api/v6/range/props.mdx';
+import Events from '@ionic-internal/component-api/v6/range/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/range/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/range/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/range/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/range/slots.md';
+import Slots from '@ionic-internal/component-api/v6/range/slots.mdx';
 
 <head>
   <title>Range Slider | ion-range: Slider Knob Controls with Labels</title>
@@ -27,7 +27,7 @@ By default the Range slider has a minimum value of `0` and a maximum value of `1
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v6/range/basic/index.md';
+import Basic from '@site/static/usage/v6/range/basic/index.mdx';
 
 <Basic />
 
@@ -35,7 +35,7 @@ import Basic from '@site/static/usage/v6/range/basic/index.md';
 
 Labels and custom UI elements can be slotted on either side of the range by adding `slot="start"` or `slot="end"` to the element. The element can be any element, such as an `ion-label`, `ion-icon` or a `div`. 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 SlotsPlayground from '@site/static/usage/v6/range/slots/index.md';
+import SlotsPlayground from '@site/static/usage/v6/range/slots/index.mdx';
 
 <SlotsPlayground />
 
@@ -43,7 +43,7 @@ import SlotsPlayground from '@site/static/usage/v6/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/v6/range/dual-knobs/index.md';
+import DualKnobs from '@site/static/usage/v6/range/dual-knobs/index.mdx';
 
 <DualKnobs />
 
@@ -53,7 +53,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/v6/range/pins/index.md';
+import Pins from '@site/static/usage/v6/range/pins/index.mdx';
 
 <Pins />
 
@@ -63,7 +63,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/v6/range/snapping-ticks/index.md';
+import SnappingTicks from '@site/static/usage/v6/range/snapping-ticks/index.mdx';
 
 <SnappingTicks />
 
@@ -73,7 +73,7 @@ import SnappingTicks from '@site/static/usage/v6/range/snapping-ticks/index.md';
 
 The `ionChange` event emits as the Range knob value changes.
 
-import IonChangeEvent from '@site/static/usage/v6/range/ion-change-event/index.md';
+import IonChangeEvent from '@site/static/usage/v6/range/ion-change-event/index.mdx';
 
 <IonChangeEvent />
 
@@ -81,7 +81,7 @@ import IonChangeEvent from '@site/static/usage/v6/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/v6/range/ion-knob-move-event/index.md';
+import IonKnobMoveEvent from '@site/static/usage/v6/range/ion-knob-move-event/index.mdx';
 
 <IonKnobMoveEvent />
 
@@ -91,7 +91,7 @@ import IonKnobMoveEvent from '@site/static/usage/v6/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/v6/range/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v6/range/theming/css-properties/index.mdx';
 
 <CSSProps />
 
@@ -99,7 +99,7 @@ import CSSProps from '@site/static/usage/v6/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/v6/range/theming/css-shadow-parts/index.md';
+import CSSParts from '@site/static/usage/v6/range/theming/css-shadow-parts/index.mdx';
 
 <CSSParts />
 
diff --git a/versioned_docs/version-v6/api/refresher-content.md b/versioned_docs/version-v6/api/refresher-content.mdx
similarity index 91%
rename from versioned_docs/version-v6/api/refresher-content.md
rename to versioned_docs/version-v6/api/refresher-content.mdx
index 27fd03e9a86..3031a3c62f9 100644
--- a/versioned_docs/version-v6/api/refresher-content.md
+++ b/versioned_docs/version-v6/api/refresher-content.mdx
@@ -2,12 +2,12 @@
 title: 'ion-refresher-content'
 ---
 
-import Props from '@ionic-internal/component-api/v6/refresher-content/props.md';
-import Events from '@ionic-internal/component-api/v6/refresher-content/events.md';
-import Methods from '@ionic-internal/component-api/v6/refresher-content/methods.md';
-import Parts from '@ionic-internal/component-api/v6/refresher-content/parts.md';
+import Props from '@ionic-internal/component-api/v6/refresher-content/props.mdx';
+import Events from '@ionic-internal/component-api/v6/refresher-content/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/refresher-content/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/refresher-content/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/refresher-content/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/refresher-content/slots.md';
+import Slots from '@ionic-internal/component-api/v6/refresher-content/slots.mdx';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v6/api/refresher.md b/versioned_docs/version-v6/api/refresher.mdx
similarity index 97%
rename from versioned_docs/version-v6/api/refresher.md
rename to versioned_docs/version-v6/api/refresher.mdx
index 10d0658d8b1..dd4768b601d 100644
--- a/versioned_docs/version-v6/api/refresher.md
+++ b/versioned_docs/version-v6/api/refresher.mdx
@@ -2,12 +2,12 @@
 title: 'ion-refresher'
 ---
 
-import Props from '@ionic-internal/component-api/v6/refresher/props.md';
-import Events from '@ionic-internal/component-api/v6/refresher/events.md';
-import Methods from '@ionic-internal/component-api/v6/refresher/methods.md';
-import Parts from '@ionic-internal/component-api/v6/refresher/parts.md';
+import Props from '@ionic-internal/component-api/v6/refresher/props.mdx';
+import Events from '@ionic-internal/component-api/v6/refresher/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/refresher/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/refresher/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/refresher/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/refresher/slots.md';
+import Slots from '@ionic-internal/component-api/v6/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/v6/refresher/basic/index.md';
+import Basic from '@site/static/usage/v6/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/v6/refresher/pull-properties/index.md';
+import PullProperties from '@site/static/usage/v6/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/v6/refresher/custom-content/index.md';
+import CustomContent from '@site/static/usage/v6/refresher/custom-content/index.mdx';
 
 <CustomContent />
 
@@ -65,7 +65,7 @@ The native refreshers can be disabled by setting the `pullingIcon` on the [refre
 
 Refresher requires a scroll container to function. When using a virtual scrolling solution, you will need to disable scrolling on the `ion-content` and indicate which element container is responsible for the scroll container with the `.ion-content-scroll-host` class target.
 
-import CustomScrollTarget from '@site/static/usage/v6/refresher/custom-scroll-target/index.md';
+import CustomScrollTarget from '@site/static/usage/v6/refresher/custom-scroll-target/index.mdx';
 
 <CustomScrollTarget />
 
@@ -73,7 +73,7 @@ import CustomScrollTarget from '@site/static/usage/v6/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/v6/refresher/advanced/index.md';
+import Advanced from '@site/static/usage/v6/refresher/advanced/index.mdx';
 
 <Advanced />
 
diff --git a/versioned_docs/version-v6/api/reorder-group.md b/versioned_docs/version-v6/api/reorder-group.mdx
similarity index 96%
rename from versioned_docs/version-v6/api/reorder-group.md
rename to versioned_docs/version-v6/api/reorder-group.mdx
index d7f8a48e019..e0c2f84f7c6 100644
--- a/versioned_docs/version-v6/api/reorder-group.md
+++ b/versioned_docs/version-v6/api/reorder-group.mdx
@@ -2,12 +2,12 @@
 title: 'ion-reorder-group'
 ---
 
-import Props from '@ionic-internal/component-api/v6/reorder-group/props.md';
-import Events from '@ionic-internal/component-api/v6/reorder-group/events.md';
-import Methods from '@ionic-internal/component-api/v6/reorder-group/methods.md';
-import Parts from '@ionic-internal/component-api/v6/reorder-group/parts.md';
+import Props from '@ionic-internal/component-api/v6/reorder-group/props.mdx';
+import Events from '@ionic-internal/component-api/v6/reorder-group/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/reorder-group/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/reorder-group/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/reorder-group/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/reorder-group/slots.md';
+import Slots from '@ionic-internal/component-api/v6/reorder-group/slots.mdx';
 
 <head>
   <title>ion-reorder-group: Wrapper Component for Ionic Framework Apps</title>
diff --git a/versioned_docs/version-v6/api/reorder.md b/versioned_docs/version-v6/api/reorder.mdx
similarity index 94%
rename from versioned_docs/version-v6/api/reorder.md
rename to versioned_docs/version-v6/api/reorder.mdx
index de8b978719d..2fb5e966d7c 100644
--- a/versioned_docs/version-v6/api/reorder.md
+++ b/versioned_docs/version-v6/api/reorder.mdx
@@ -2,12 +2,12 @@
 title: 'ion-reorder'
 ---
 
-import Props from '@ionic-internal/component-api/v6/reorder/props.md';
-import Events from '@ionic-internal/component-api/v6/reorder/events.md';
-import Methods from '@ionic-internal/component-api/v6/reorder/methods.md';
-import Parts from '@ionic-internal/component-api/v6/reorder/parts.md';
+import Props from '@ionic-internal/component-api/v6/reorder/props.mdx';
+import Events from '@ionic-internal/component-api/v6/reorder/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/reorder/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/reorder/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/reorder/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/reorder/slots.md';
+import Slots from '@ionic-internal/component-api/v6/reorder/slots.mdx';
 
 <head>
   <title>Reorder | 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/v6/reorder/basic/index.md';
+import Basic from '@site/static/usage/v6/reorder/basic/index.mdx';
 
 <Basic />
 
@@ -37,7 +37,7 @@ import Basic from '@site/static/usage/v6/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/v6/reorder/toggling-disabled/index.md';
+import TogglingDisabled from '@site/static/usage/v6/reorder/toggling-disabled/index.mdx';
 
 <TogglingDisabled />
 
@@ -45,7 +45,7 @@ import TogglingDisabled from '@site/static/usage/v6/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/v6/reorder/custom-icon/index.md';
+import CustomIcon from '@site/static/usage/v6/reorder/custom-icon/index.mdx';
 
 <CustomIcon />
 
@@ -53,7 +53,7 @@ import CustomIcon from '@site/static/usage/v6/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/v6/reorder/wrapper/index.md';
+import Wrapper from '@site/static/usage/v6/reorder/wrapper/index.mdx';
 
 <Wrapper />
 
@@ -63,7 +63,7 @@ When the `complete` method is called on the reorder group with no parameters, th
 
 In some cases, it may be necessary for an app to reorder both the array and the DOM nodes on its own. If this is required, `false` should be passed as a parameter to the `complete` method. This will prevent Ionic from reordering any DOM nodes inside of the reorder group.
 
-import UpdatingData from '@site/static/usage/v6/reorder/updating-data/index.md';
+import UpdatingData from '@site/static/usage/v6/reorder/updating-data/index.mdx';
 
 <UpdatingData />
 
@@ -71,7 +71,7 @@ import UpdatingData from '@site/static/usage/v6/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/v6/reorder/custom-scroll-target/index.md';
+import CustomScrollTarget from '@site/static/usage/v6/reorder/custom-scroll-target/index.mdx';
 
 <CustomScrollTarget />
 
diff --git a/versioned_docs/version-v6/api/ripple-effect.md b/versioned_docs/version-v6/api/ripple-effect.mdx
similarity index 95%
rename from versioned_docs/version-v6/api/ripple-effect.md
rename to versioned_docs/version-v6/api/ripple-effect.mdx
index 428d9d7e3c2..14db31a3391 100644
--- a/versioned_docs/version-v6/api/ripple-effect.md
+++ b/versioned_docs/version-v6/api/ripple-effect.mdx
@@ -2,12 +2,12 @@
 title: 'ion-ripple-effect'
 ---
 
-import Props from '@ionic-internal/component-api/v6/ripple-effect/props.md';
-import Events from '@ionic-internal/component-api/v6/ripple-effect/events.md';
-import Methods from '@ionic-internal/component-api/v6/ripple-effect/methods.md';
-import Parts from '@ionic-internal/component-api/v6/ripple-effect/parts.md';
+import Props from '@ionic-internal/component-api/v6/ripple-effect/props.mdx';
+import Events from '@ionic-internal/component-api/v6/ripple-effect/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/ripple-effect/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/ripple-effect/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/ripple-effect/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/ripple-effect/slots.md';
+import Slots from '@ionic-internal/component-api/v6/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/v6/ripple-effect/basic/index.md';
+import Basic from '@site/static/usage/v6/ripple-effect/basic/index.mdx';
 
 <Basic />
 
@@ -35,7 +35,7 @@ import Basic from '@site/static/usage/v6/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/v6/ripple-effect/type/index.md';
+import Type from '@site/static/usage/v6/ripple-effect/type/index.mdx';
 
 <Type />
 
@@ -43,7 +43,7 @@ import Type from '@site/static/usage/v6/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/v6/ripple-effect/customizing/index.md';
+import Customizing from '@site/static/usage/v6/ripple-effect/customizing/index.mdx';
 
 <Customizing />
 
diff --git a/versioned_docs/version-v6/api/route-redirect.md b/versioned_docs/version-v6/api/route-redirect.mdx
similarity index 96%
rename from versioned_docs/version-v6/api/route-redirect.md
rename to versioned_docs/version-v6/api/route-redirect.mdx
index f6b8bbf54a7..51730b64f8a 100644
--- a/versioned_docs/version-v6/api/route-redirect.md
+++ b/versioned_docs/version-v6/api/route-redirect.mdx
@@ -2,12 +2,12 @@
 title: 'ion-route-redirect'
 ---
 
-import Props from '@ionic-internal/component-api/v6/route-redirect/props.md';
-import Events from '@ionic-internal/component-api/v6/route-redirect/events.md';
-import Methods from '@ionic-internal/component-api/v6/route-redirect/methods.md';
-import Parts from '@ionic-internal/component-api/v6/route-redirect/parts.md';
+import Props from '@ionic-internal/component-api/v6/route-redirect/props.mdx';
+import Events from '@ionic-internal/component-api/v6/route-redirect/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/route-redirect/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/route-redirect/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/route-redirect/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/route-redirect/slots.md';
+import Slots from '@ionic-internal/component-api/v6/route-redirect/slots.mdx';
 
 <head>
   <title>ion-route-redirect Plugin: 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-v6/api/route.md b/versioned_docs/version-v6/api/route.mdx
similarity index 98%
rename from versioned_docs/version-v6/api/route.md
rename to versioned_docs/version-v6/api/route.mdx
index c909b4e246f..f26e382837a 100644
--- a/versioned_docs/version-v6/api/route.md
+++ b/versioned_docs/version-v6/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/v6/route/props.md';
-import Events from '@ionic-internal/component-api/v6/route/events.md';
-import Methods from '@ionic-internal/component-api/v6/route/methods.md';
-import Parts from '@ionic-internal/component-api/v6/route/parts.md';
+import Props from '@ionic-internal/component-api/v6/route/props.mdx';
+import Events from '@ionic-internal/component-api/v6/route/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/route/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/route/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/route/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/route/slots.md';
+import Slots from '@ionic-internal/component-api/v6/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-v6/api/router-link.md b/versioned_docs/version-v6/api/router-link.mdx
similarity index 95%
rename from versioned_docs/version-v6/api/router-link.md
rename to versioned_docs/version-v6/api/router-link.mdx
index b787fbb1686..172e0506c6e 100644
--- a/versioned_docs/version-v6/api/router-link.md
+++ b/versioned_docs/version-v6/api/router-link.mdx
@@ -2,12 +2,12 @@
 title: 'ion-router-link'
 ---
 
-import Props from '@ionic-internal/component-api/v6/router-link/props.md';
-import Events from '@ionic-internal/component-api/v6/router-link/events.md';
-import Methods from '@ionic-internal/component-api/v6/router-link/methods.md';
-import Parts from '@ionic-internal/component-api/v6/router-link/parts.md';
+import Props from '@ionic-internal/component-api/v6/router-link/props.mdx';
+import Events from '@ionic-internal/component-api/v6/router-link/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/router-link/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/router-link/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/router-link/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/router-link/slots.md';
+import Slots from '@ionic-internal/component-api/v6/router-link/slots.mdx';
 
 <head>
   <title>Router Link | Navigating The ion-router-link Component</title>
diff --git a/versioned_docs/version-v6/api/router-outlet.md b/versioned_docs/version-v6/api/router-outlet.mdx
similarity index 96%
rename from versioned_docs/version-v6/api/router-outlet.md
rename to versioned_docs/version-v6/api/router-outlet.mdx
index b25f5673143..5fff7b3882b 100644
--- a/versioned_docs/version-v6/api/router-outlet.md
+++ b/versioned_docs/version-v6/api/router-outlet.mdx
@@ -2,12 +2,12 @@
 title: 'ion-router-outlet'
 ---
 
-import Props from '@ionic-internal/component-api/v6/router-outlet/props.md';
-import Events from '@ionic-internal/component-api/v6/router-outlet/events.md';
-import Methods from '@ionic-internal/component-api/v6/router-outlet/methods.md';
-import Parts from '@ionic-internal/component-api/v6/router-outlet/parts.md';
+import Props from '@ionic-internal/component-api/v6/router-outlet/props.mdx';
+import Events from '@ionic-internal/component-api/v6/router-outlet/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/router-outlet/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/router-outlet/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/router-outlet/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/router-outlet/slots.md';
+import Slots from '@ionic-internal/component-api/v6/router-outlet/slots.mdx';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v6/api/router.md b/versioned_docs/version-v6/api/router.mdx
similarity index 98%
rename from versioned_docs/version-v6/api/router.md
rename to versioned_docs/version-v6/api/router.mdx
index 38160fd00db..7aa7f55ef83 100644
--- a/versioned_docs/version-v6/api/router.md
+++ b/versioned_docs/version-v6/api/router.mdx
@@ -2,12 +2,12 @@
 title: 'ion-router'
 ---
 
-import Props from '@ionic-internal/component-api/v6/router/props.md';
-import Events from '@ionic-internal/component-api/v6/router/events.md';
-import Methods from '@ionic-internal/component-api/v6/router/methods.md';
-import Parts from '@ionic-internal/component-api/v6/router/parts.md';
+import Props from '@ionic-internal/component-api/v6/router/props.mdx';
+import Events from '@ionic-internal/component-api/v6/router/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/router/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/router/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/router/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/router/slots.md';
+import Slots from '@ionic-internal/component-api/v6/router/slots.mdx';
 
 <head>
   <title>ion-router: Router Component to Coordinate URL Navigation</title>
@@ -36,7 +36,7 @@ In order to configure this relationship between components (to load/select) and
 
 ## Basic Usage
 
-import BasicExample from '@site/static/usage/v6/router/basic/index.md';
+import BasicExample from '@site/static/usage/v6/router/basic/index.mdx';
 
 <BasicExample />
 
diff --git a/versioned_docs/version-v6/api/row.md b/versioned_docs/version-v6/api/row.mdx
similarity index 98%
rename from versioned_docs/version-v6/api/row.md
rename to versioned_docs/version-v6/api/row.mdx
index f7eaadc612f..1f0c285d1de 100644
--- a/versioned_docs/version-v6/api/row.md
+++ b/versioned_docs/version-v6/api/row.mdx
@@ -2,12 +2,12 @@
 title: 'ion-row'
 ---
 
-import Props from '@ionic-internal/component-api/v6/row/props.md';
-import Events from '@ionic-internal/component-api/v6/row/events.md';
-import Methods from '@ionic-internal/component-api/v6/row/methods.md';
-import Parts from '@ionic-internal/component-api/v6/row/parts.md';
+import Props from '@ionic-internal/component-api/v6/row/props.mdx';
+import Events from '@ionic-internal/component-api/v6/row/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/row/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/row/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/row/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/row/slots.md';
+import Slots from '@ionic-internal/component-api/v6/row/slots.mdx';
 
 <head>
   <title>ion-row: Horizontal Row Components and Alignment | Ionic API Docs</title>
diff --git a/versioned_docs/version-v6/api/searchbar.md b/versioned_docs/version-v6/api/searchbar.mdx
similarity index 96%
rename from versioned_docs/version-v6/api/searchbar.md
rename to versioned_docs/version-v6/api/searchbar.mdx
index ae794a75163..88d86ef77ad 100644
--- a/versioned_docs/version-v6/api/searchbar.md
+++ b/versioned_docs/version-v6/api/searchbar.mdx
@@ -2,12 +2,12 @@
 title: 'ion-searchbar'
 ---
 
-import Props from '@ionic-internal/component-api/v6/searchbar/props.md';
-import Events from '@ionic-internal/component-api/v6/searchbar/events.md';
-import Methods from '@ionic-internal/component-api/v6/searchbar/methods.md';
-import Parts from '@ionic-internal/component-api/v6/searchbar/parts.md';
+import Props from '@ionic-internal/component-api/v6/searchbar/props.mdx';
+import Events from '@ionic-internal/component-api/v6/searchbar/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/searchbar/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/searchbar/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/searchbar/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/searchbar/slots.md';
+import Slots from '@ionic-internal/component-api/v6/searchbar/slots.mdx';
 
 <head>
   <title>Search Bar Icon for Keyboard Text Display | Ion-Search Bar</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/v6/searchbar/basic/index.md';
+import Basic from '@site/static/usage/v6/searchbar/basic/index.mdx';
 
 <Basic />
 
@@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v6/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/v6/searchbar/search-icon/index.md';
+import SearchIcon from '@site/static/usage/v6/searchbar/search-icon/index.mdx';
 
 <SearchIcon />
 
@@ -41,7 +41,7 @@ import SearchIcon from '@site/static/usage/v6/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/v6/searchbar/clear-button/index.md';
+import ClearButton from '@site/static/usage/v6/searchbar/clear-button/index.mdx';
 
 <ClearButton />
 
@@ -49,7 +49,7 @@ import ClearButton from '@site/static/usage/v6/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/v6/searchbar/cancel-button/index.md';
+import CancelButton from '@site/static/usage/v6/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/v6/toolbar/searchbars/index.md';
+import Toolbar from '@site/static/usage/v6/toolbar/searchbars/index.mdx';
 
 <Toolbar />
 
@@ -67,7 +67,7 @@ import Toolbar from '@site/static/usage/v6/toolbar/searchbars/index.md';
 
 A debounce can be set on the searchbar in order to delay triggering the `ionChange` 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/v6/searchbar/debounce/index.md';
+import Debounce from '@site/static/usage/v6/searchbar/debounce/index.mdx';
 
 <Debounce />
 
@@ -75,7 +75,7 @@ import Debounce from '@site/static/usage/v6/searchbar/debounce/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v6/searchbar/theming/colors/index.md';
+import Colors from '@site/static/usage/v6/searchbar/theming/colors/index.mdx';
 
 <Colors />
 
@@ -83,7 +83,7 @@ import Colors from '@site/static/usage/v6/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/v6/searchbar/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v6/searchbar/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v6/api/segment-button.md b/versioned_docs/version-v6/api/segment-button.mdx
similarity index 83%
rename from versioned_docs/version-v6/api/segment-button.md
rename to versioned_docs/version-v6/api/segment-button.mdx
index 552ec236535..33f19ea6aa2 100644
--- a/versioned_docs/version-v6/api/segment-button.md
+++ b/versioned_docs/version-v6/api/segment-button.mdx
@@ -2,12 +2,12 @@
 title: 'ion-segment-button'
 ---
 
-import Props from '@ionic-internal/component-api/v6/segment-button/props.md';
-import Events from '@ionic-internal/component-api/v6/segment-button/events.md';
-import Methods from '@ionic-internal/component-api/v6/segment-button/methods.md';
-import Parts from '@ionic-internal/component-api/v6/segment-button/parts.md';
+import Props from '@ionic-internal/component-api/v6/segment-button/props.mdx';
+import Events from '@ionic-internal/component-api/v6/segment-button/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/segment-button/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/segment-button/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/segment-button/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/segment-button/slots.md';
+import Slots from '@ionic-internal/component-api/v6/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/v6/segment-button/basic/index.md';
+import Basic from '@site/static/usage/v6/segment-button/basic/index.mdx';
 
 <Basic />
 
@@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v6/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/v6/segment-button/layout/index.md';
+import Layout from '@site/static/usage/v6/segment-button/layout/index.mdx';
 
 <Layout />
 
@@ -41,13 +41,13 @@ import Layout from '@site/static/usage/v6/segment-button/layout/index.md';
 
 ### CSS Shadow Parts
 
-import CSSParts from '@site/static/usage/v6/segment-button/theming/css-shadow-parts/index.md';
+import CSSParts from '@site/static/usage/v6/segment-button/theming/css-shadow-parts/index.mdx';
 
 <CSSParts />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v6/segment-button/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v6/segment-button/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v6/api/segment.md b/versioned_docs/version-v6/api/segment.mdx
similarity index 96%
rename from versioned_docs/version-v6/api/segment.md
rename to versioned_docs/version-v6/api/segment.mdx
index 971b3b6a460..cf1dd30db2b 100644
--- a/versioned_docs/version-v6/api/segment.md
+++ b/versioned_docs/version-v6/api/segment.mdx
@@ -2,12 +2,12 @@
 title: 'ion-segment'
 ---
 
-import Props from '@ionic-internal/component-api/v6/segment/props.md';
-import Events from '@ionic-internal/component-api/v6/segment/events.md';
-import Methods from '@ionic-internal/component-api/v6/segment/methods.md';
-import Parts from '@ionic-internal/component-api/v6/segment/parts.md';
+import Props from '@ionic-internal/component-api/v6/segment/props.mdx';
+import Events from '@ionic-internal/component-api/v6/segment/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/segment/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/segment/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/segment/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/segment/slots.md';
+import Slots from '@ionic-internal/component-api/v6/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/v6/segment/basic/index.md';
+import Basic from '@site/static/usage/v6/segment/basic/index.mdx';
 
 <Basic />
 
@@ -37,7 +37,7 @@ import Basic from '@site/static/usage/v6/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/v6/segment/scrollable/index.md';
+import Scrollable from '@site/static/usage/v6/segment/scrollable/index.mdx';
 
 <Scrollable />
 
@@ -45,7 +45,7 @@ import Scrollable from '@site/static/usage/v6/segment/scrollable/index.md';
 
 <!-- Reuse the playground from the Toolbar directory -->
 
-import Toolbar from '@site/static/usage/v6/toolbar/segments/index.md';
+import Toolbar from '@site/static/usage/v6/toolbar/segments/index.mdx';
 
 <Toolbar />
 
@@ -53,13 +53,13 @@ import Toolbar from '@site/static/usage/v6/toolbar/segments/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v6/segment/theming/colors/index.md';
+import Colors from '@site/static/usage/v6/segment/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v6/segment/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v6/segment/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v6/api/select-option.md b/versioned_docs/version-v6/api/select-option.mdx
similarity index 94%
rename from versioned_docs/version-v6/api/select-option.md
rename to versioned_docs/version-v6/api/select-option.mdx
index 224f2e6df12..b54d867f695 100644
--- a/versioned_docs/version-v6/api/select-option.md
+++ b/versioned_docs/version-v6/api/select-option.mdx
@@ -2,12 +2,12 @@
 title: 'ion-select-option'
 ---
 
-import Props from '@ionic-internal/component-api/v6/select-option/props.md';
-import Events from '@ionic-internal/component-api/v6/select-option/events.md';
-import Methods from '@ionic-internal/component-api/v6/select-option/methods.md';
-import Parts from '@ionic-internal/component-api/v6/select-option/parts.md';
+import Props from '@ionic-internal/component-api/v6/select-option/props.mdx';
+import Events from '@ionic-internal/component-api/v6/select-option/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/select-option/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/select-option/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/select-option/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/select-option/slots.md';
+import Slots from '@ionic-internal/component-api/v6/select-option/slots.mdx';
 
 <head>
   <title>Select Option | What Is An Option Select on Ionic Framework Apps</title>
diff --git a/versioned_docs/version-v6/api/select.md b/versioned_docs/version-v6/api/select.mdx
similarity index 84%
rename from versioned_docs/version-v6/api/select.md
rename to versioned_docs/version-v6/api/select.mdx
index 997ae8dc8ef..8b36bc4c9db 100644
--- a/versioned_docs/version-v6/api/select.md
+++ b/versioned_docs/version-v6/api/select.mdx
@@ -2,12 +2,12 @@
 title: 'ion-select'
 ---
 
-import Props from '@ionic-internal/component-api/v6/select/props.md';
-import Events from '@ionic-internal/component-api/v6/select/events.md';
-import Methods from '@ionic-internal/component-api/v6/select/methods.md';
-import Parts from '@ionic-internal/component-api/v6/select/parts.md';
+import Props from '@ionic-internal/component-api/v6/select/props.mdx';
+import Events from '@ionic-internal/component-api/v6/select/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/select/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/select/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/select/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/select/slots.md';
+import Slots from '@ionic-internal/component-api/v6/select/slots.mdx';
 
 <head>
   <title>ion-select: Select One or Multiple Value Boxes or Placeholders</title>
@@ -31,23 +31,23 @@ If `value` is set on the `<ion-select>`, the selected option will be chosen base
 
 By default, the select allows the user to select only one option. The alert interface presents users with a radio button styled list of options. The select component's value receives the value of the selected option's value.
 
-import SingleSelectionExample from '@site/static/usage/v6/select/basic/single-selection/index.md';
+import SingleSelectionExample from '@site/static/usage/v6/select/basic/single-selection/index.mdx';
 
 <SingleSelectionExample />
 
 ## 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.
 
 ### Action Sheet
 
-import ActionSheetExample from '@site/static/usage/v6/select/interfaces/action-sheet/index.md';
+import ActionSheetExample from '@site/static/usage/v6/select/interfaces/action-sheet/index.mdx';
 
 <ActionSheetExample />
 
 ### Popover
 
-import PopoverExample from '@site/static/usage/v6/select/interfaces/popover/index.md';
+import PopoverExample from '@site/static/usage/v6/select/interfaces/popover/index.mdx';
 
 <PopoverExample />
 
@@ -57,7 +57,7 @@ By adding the `multiple` attribute to select, users are able to select multiple
 
 Note: the `action-sheet` and `popover` interfaces will not work with multiple selection.
 
-import MultipleSelectionExample from '@site/static/usage/v6/select/basic/multiple-selection/index.md';
+import MultipleSelectionExample from '@site/static/usage/v6/select/basic/multiple-selection/index.mdx';
 
 <MultipleSelectionExample />
 
@@ -65,7 +65,7 @@ import MultipleSelectionExample from '@site/static/usage/v6/select/basic/multipl
 
 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/v6/select/basic/responding-to-interaction/index.md';
+import RespondingToInteractionExample from '@site/static/usage/v6/select/basic/responding-to-interaction/index.mdx';
 
 <RespondingToInteractionExample />
 
@@ -77,13 +77,13 @@ By default, the select uses object equality (`===`) to determine if an option is
 
 ### Using compareWith
 
-import UsingCompareWithExample from '@site/static/usage/v6/select/objects-as-values/using-comparewith/index.md';
+import UsingCompareWithExample from '@site/static/usage/v6/select/objects-as-values/using-comparewith/index.mdx';
 
 <UsingCompareWithExample />
 
 ### Object Values and Multiple Selection
 
-import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v6/select/objects-as-values/multiple-selection/index.md';
+import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v6/select/objects-as-values/multiple-selection/index.mdx';
 
 <ObjectValuesAndMultipleSelectionExample />
 
@@ -93,7 +93,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/v6/select/customization/button-text/index.md';
+import ButtonTextExample from '@site/static/usage/v6/select/customization/button-text/index.mdx';
 
 <ButtonTextExample />
 
@@ -101,11 +101,11 @@ import ButtonTextExample from '@site/static/usage/v6/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/v6/select/customization/interface-options/index.md';
+import InterfaceOptionsExample from '@site/static/usage/v6/select/customization/interface-options/index.mdx';
 
 <InterfaceOptionsExample />
 
@@ -119,7 +119,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/v6/select/customization/styling-select/index.md';
+import StylingSelectExample from '@site/static/usage/v6/select/customization/styling-select/index.mdx';
 
 <StylingSelectExample />
 
@@ -127,17 +127,17 @@ import StylingSelectExample from '@site/static/usage/v6/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.
 
 ## Typeahead Component
 
 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/v6/select/typeahead/index.md';
+import TypeaheadExample from '@site/static/usage/v6/select/typeahead/index.mdx';
 
 <TypeaheadExample />
 
diff --git a/versioned_docs/version-v6/api/skeleton-text.md b/versioned_docs/version-v6/api/skeleton-text.mdx
similarity index 92%
rename from versioned_docs/version-v6/api/skeleton-text.md
rename to versioned_docs/version-v6/api/skeleton-text.mdx
index 408a327306a..7952c050d65 100644
--- a/versioned_docs/version-v6/api/skeleton-text.md
+++ b/versioned_docs/version-v6/api/skeleton-text.mdx
@@ -2,12 +2,12 @@
 title: 'ion-skeleton-text'
 ---
 
-import Props from '@ionic-internal/component-api/v6/skeleton-text/props.md';
-import Events from '@ionic-internal/component-api/v6/skeleton-text/events.md';
-import Methods from '@ionic-internal/component-api/v6/skeleton-text/methods.md';
-import Parts from '@ionic-internal/component-api/v6/skeleton-text/parts.md';
+import Props from '@ionic-internal/component-api/v6/skeleton-text/props.mdx';
+import Events from '@ionic-internal/component-api/v6/skeleton-text/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/skeleton-text/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/skeleton-text/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/skeleton-text/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/skeleton-text/slots.md';
+import Slots from '@ionic-internal/component-api/v6/skeleton-text/slots.mdx';
 
 <head>
   <title>Skeleton Text | Skeleton Loading Placeholder & Framework 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/v6/skeleton-text/basic/index.md';
+import Basic from '@site/static/usage/v6/skeleton-text/basic/index.mdx';
 
 <Basic />
 
@@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v6/skeleton-text/basic/index.md';
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v6/skeleton-text/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v6/skeleton-text/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v6/api/slide.md b/versioned_docs/version-v6/api/slide.mdx
similarity index 97%
rename from versioned_docs/version-v6/api/slide.md
rename to versioned_docs/version-v6/api/slide.mdx
index e7b6a3441ff..969220ca7a0 100644
--- a/versioned_docs/version-v6/api/slide.md
+++ b/versioned_docs/version-v6/api/slide.mdx
@@ -2,12 +2,12 @@
 title: 'ion-slide'
 ---
 
-import Props from '@ionic-internal/component-api/v6/slide/props.md';
-import Events from '@ionic-internal/component-api/v6/slide/events.md';
-import Methods from '@ionic-internal/component-api/v6/slide/methods.md';
-import Parts from '@ionic-internal/component-api/v6/slide/parts.md';
+import Props from '@ionic-internal/component-api/v6/slide/props.mdx';
+import Events from '@ionic-internal/component-api/v6/slide/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/slide/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/slide/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/slide/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/slide/slots.md';
+import Slots from '@ionic-internal/component-api/v6/slide/slots.mdx';
 
 <head>
   <title>ion-slide | Slide API Component for Ionic Framework Apps</title>
diff --git a/versioned_docs/version-v6/api/slides.md b/versioned_docs/version-v6/api/slides.mdx
similarity index 99%
rename from versioned_docs/version-v6/api/slides.md
rename to versioned_docs/version-v6/api/slides.mdx
index 94f9889a0af..0ca20ef96fc 100644
--- a/versioned_docs/version-v6/api/slides.md
+++ b/versioned_docs/version-v6/api/slides.mdx
@@ -9,12 +9,12 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import TOCInline from '@theme/TOCInline';
 
-import Props from '@ionic-internal/component-api/v6/slides/props.md';
-import Events from '@ionic-internal/component-api/v6/slides/events.md';
-import Methods from '@ionic-internal/component-api/v6/slides/methods.md';
-import Parts from '@ionic-internal/component-api/v6/slides/parts.md';
+import Props from '@ionic-internal/component-api/v6/slides/props.mdx';
+import Events from '@ionic-internal/component-api/v6/slides/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/slides/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/slides/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/slides/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/slides/slots.md';
+import Slots from '@ionic-internal/component-api/v6/slides/slots.mdx';
 
 <head>
   <title>Ion-Slides: Mobile Touch Slider with Built-In & Custom Animation</title>
@@ -35,7 +35,7 @@ This component has been deprecated in favor of using Swiper.js directly. Please
 :::
 
 The Slides component is a multi-section container. Each section can be swiped
-or dragged between. It contains any number of [Slide](slide.md) components.
+or dragged between. It contains any number of [Slide](slide.mdx) components.
 
 This guide will cover migration from the deprecated `ion-slides` component to the framework-specific solutions that Swiper.js provides as well as the existing `ion-slides` API for developers who are still using that component.
 
diff --git a/versioned_docs/version-v6/api/spinner.md b/versioned_docs/version-v6/api/spinner.mdx
similarity index 91%
rename from versioned_docs/version-v6/api/spinner.md
rename to versioned_docs/version-v6/api/spinner.mdx
index 888eda5ddc3..e2ddfcacba0 100644
--- a/versioned_docs/version-v6/api/spinner.md
+++ b/versioned_docs/version-v6/api/spinner.mdx
@@ -2,12 +2,12 @@
 title: 'ion-spinner'
 ---
 
-import Props from '@ionic-internal/component-api/v6/spinner/props.md';
-import Events from '@ionic-internal/component-api/v6/spinner/events.md';
-import Methods from '@ionic-internal/component-api/v6/spinner/methods.md';
-import Parts from '@ionic-internal/component-api/v6/spinner/parts.md';
+import Props from '@ionic-internal/component-api/v6/spinner/props.mdx';
+import Events from '@ionic-internal/component-api/v6/spinner/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/spinner/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/spinner/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/spinner/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/spinner/slots.md';
+import Slots from '@ionic-internal/component-api/v6/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/v6/spinner/basic/index.md';
+import Basic from '@site/static/usage/v6/spinner/basic/index.mdx';
 
 <Basic />
 
@@ -35,13 +35,13 @@ import Basic from '@site/static/usage/v6/spinner/basic/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v6/spinner/theming/colors/index.md';
+import Colors from '@site/static/usage/v6/spinner/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v6/spinner/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v6/spinner/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v6/api/split-pane.md b/versioned_docs/version-v6/api/split-pane.mdx
similarity index 97%
rename from versioned_docs/version-v6/api/split-pane.md
rename to versioned_docs/version-v6/api/split-pane.mdx
index d0380f4bfde..2bbc5622f68 100644
--- a/versioned_docs/version-v6/api/split-pane.md
+++ b/versioned_docs/version-v6/api/split-pane.mdx
@@ -2,12 +2,12 @@
 title: 'ion-split-pane'
 ---
 
-import Props from '@ionic-internal/component-api/v6/split-pane/props.md';
-import Events from '@ionic-internal/component-api/v6/split-pane/events.md';
-import Methods from '@ionic-internal/component-api/v6/split-pane/methods.md';
-import Parts from '@ionic-internal/component-api/v6/split-pane/parts.md';
+import Props from '@ionic-internal/component-api/v6/split-pane/props.mdx';
+import Events from '@ionic-internal/component-api/v6/split-pane/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/split-pane/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/split-pane/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/split-pane/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/split-pane/slots.md';
+import Slots from '@ionic-internal/component-api/v6/split-pane/slots.mdx';
 
 <head>
   <title>ion-split-pane: Split Plane View 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/v6/split-pane/basic/index.md';
+import Basic from '@site/static/usage/v6/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/v6/split-pane/theming/css-properties/index.md';
+import CSSProperties from '@site/static/usage/v6/split-pane/theming/css-properties/index.mdx';
 
 <CSSProperties />
 
diff --git a/versioned_docs/version-v6/api/tab-bar.md b/versioned_docs/version-v6/api/tab-bar.mdx
similarity index 96%
rename from versioned_docs/version-v6/api/tab-bar.md
rename to versioned_docs/version-v6/api/tab-bar.mdx
index 24e698e3be0..d7cc6e58037 100644
--- a/versioned_docs/version-v6/api/tab-bar.md
+++ b/versioned_docs/version-v6/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/v6/tab-bar/props.md';
-import Events from '@ionic-internal/component-api/v6/tab-bar/events.md';
-import Methods from '@ionic-internal/component-api/v6/tab-bar/methods.md';
-import Parts from '@ionic-internal/component-api/v6/tab-bar/parts.md';
+import Props from '@ionic-internal/component-api/v6/tab-bar/props.mdx';
+import Events from '@ionic-internal/component-api/v6/tab-bar/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/tab-bar/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/tab-bar/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/tab-bar/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/tab-bar/slots.md';
+import Slots from '@ionic-internal/component-api/v6/tab-bar/slots.mdx';
 
 <head>
   <title>ion-tab-bar with CSS Custom Properties for Tab Bar Components</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-v6/api/tab-button.md b/versioned_docs/version-v6/api/tab-button.mdx
similarity index 95%
rename from versioned_docs/version-v6/api/tab-button.md
rename to versioned_docs/version-v6/api/tab-button.mdx
index c1773fe0e27..f25956b8e3f 100644
--- a/versioned_docs/version-v6/api/tab-button.md
+++ b/versioned_docs/version-v6/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/v6/tab-button/props.md';
-import Events from '@ionic-internal/component-api/v6/tab-button/events.md';
-import Methods from '@ionic-internal/component-api/v6/tab-button/methods.md';
-import Parts from '@ionic-internal/component-api/v6/tab-button/parts.md';
+import Props from '@ionic-internal/component-api/v6/tab-button/props.mdx';
+import Events from '@ionic-internal/component-api/v6/tab-button/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/tab-button/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/tab-button/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/tab-button/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/tab-button/slots.md';
+import Slots from '@ionic-internal/component-api/v6/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-v6/api/tab.md b/versioned_docs/version-v6/api/tab.mdx
similarity index 79%
rename from versioned_docs/version-v6/api/tab.md
rename to versioned_docs/version-v6/api/tab.mdx
index 262662c23ea..649797b7770 100644
--- a/versioned_docs/version-v6/api/tab.md
+++ b/versioned_docs/version-v6/api/tab.mdx
@@ -2,12 +2,12 @@
 title: 'ion-tab'
 ---
 
-import Props from '@ionic-internal/component-api/v6/tab/props.md';
-import Events from '@ionic-internal/component-api/v6/tab/events.md';
-import Methods from '@ionic-internal/component-api/v6/tab/methods.md';
-import Parts from '@ionic-internal/component-api/v6/tab/parts.md';
+import Props from '@ionic-internal/component-api/v6/tab/props.mdx';
+import Events from '@ionic-internal/component-api/v6/tab/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/tab/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/tab/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/tab/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/tab/slots.md';
+import Slots from '@ionic-internal/component-api/v6/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-v6/api/tabs.md b/versioned_docs/version-v6/api/tabs.mdx
similarity index 94%
rename from versioned_docs/version-v6/api/tabs.md
rename to versioned_docs/version-v6/api/tabs.mdx
index ae6ac8dd1f5..314064be9aa 100644
--- a/versioned_docs/version-v6/api/tabs.md
+++ b/versioned_docs/version-v6/api/tabs.mdx
@@ -2,12 +2,12 @@
 title: 'ion-tabs'
 ---
 
-import Props from '@ionic-internal/component-api/v6/tabs/props.md';
-import Events from '@ionic-internal/component-api/v6/tabs/events.md';
-import Methods from '@ionic-internal/component-api/v6/tabs/methods.md';
-import Parts from '@ionic-internal/component-api/v6/tabs/parts.md';
+import Props from '@ionic-internal/component-api/v6/tabs/props.mdx';
+import Events from '@ionic-internal/component-api/v6/tabs/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/tabs/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/tabs/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/tabs/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/tabs/slots.md';
+import Slots from '@ionic-internal/component-api/v6/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/v6/tabs/router/index.md';
+import Router from '@site/static/usage/v6/tabs/router/index.mdx';
 
 <Router />
 
diff --git a/versioned_docs/version-v6/api/text.md b/versioned_docs/version-v6/api/text.mdx
similarity index 93%
rename from versioned_docs/version-v6/api/text.md
rename to versioned_docs/version-v6/api/text.mdx
index a6acd73aafa..c73ca6d5218 100644
--- a/versioned_docs/version-v6/api/text.md
+++ b/versioned_docs/version-v6/api/text.mdx
@@ -2,12 +2,12 @@
 title: 'ion-text'
 ---
 
-import Props from '@ionic-internal/component-api/v6/text/props.md';
-import Events from '@ionic-internal/component-api/v6/text/events.md';
-import Methods from '@ionic-internal/component-api/v6/text/methods.md';
-import Parts from '@ionic-internal/component-api/v6/text/parts.md';
+import Props from '@ionic-internal/component-api/v6/text/props.mdx';
+import Events from '@ionic-internal/component-api/v6/text/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/text/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/text/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/text/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/text/slots.md';
+import Slots from '@ionic-internal/component-api/v6/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/v6/text/basic/index.md';
+import Basic from '@site/static/usage/v6/text/basic/index.mdx';
 
 <Basic />
 
diff --git a/versioned_docs/version-v6/api/textarea.md b/versioned_docs/version-v6/api/textarea.mdx
similarity index 95%
rename from versioned_docs/version-v6/api/textarea.md
rename to versioned_docs/version-v6/api/textarea.mdx
index f07bd0f4bb8..8b56a3796a2 100644
--- a/versioned_docs/version-v6/api/textarea.md
+++ b/versioned_docs/version-v6/api/textarea.mdx
@@ -2,12 +2,12 @@
 title: 'ion-textarea'
 ---
 
-import Props from '@ionic-internal/component-api/v6/textarea/props.md';
-import Events from '@ionic-internal/component-api/v6/textarea/events.md';
-import Methods from '@ionic-internal/component-api/v6/textarea/methods.md';
-import Parts from '@ionic-internal/component-api/v6/textarea/parts.md';
+import Props from '@ionic-internal/component-api/v6/textarea/props.mdx';
+import Events from '@ionic-internal/component-api/v6/textarea/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/textarea/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/textarea/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/textarea/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/textarea/slots.md';
+import Slots from '@ionic-internal/component-api/v6/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/v6/textarea/basic/index.md';
+import BasicPlayground from '@site/static/usage/v6/textarea/basic/index.mdx';
 
 <BasicPlayground />
 
@@ -37,7 +37,7 @@ import BasicPlayground from '@site/static/usage/v6/textarea/basic/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/v6/textarea/autogrow/index.md';
+import AutogrowPlayground from '@site/static/usage/v6/textarea/autogrow/index.mdx';
 
 <AutogrowPlayground />
 
@@ -45,13 +45,13 @@ import AutogrowPlayground from '@site/static/usage/v6/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/v6/textarea/clear-on-edit/index.md';
+import ClearOnEditPlayground from '@site/static/usage/v6/textarea/clear-on-edit/index.mdx';
 
 <ClearOnEditPlayground />
 
 ## Theming
 
-import ThemingPlayground from '@site/static/usage/v6/textarea/theming/index.md';
+import ThemingPlayground from '@site/static/usage/v6/textarea/theming/index.mdx';
 
 <ThemingPlayground />
 
diff --git a/versioned_docs/version-v6/api/thumbnail.md b/versioned_docs/version-v6/api/thumbnail.mdx
similarity index 91%
rename from versioned_docs/version-v6/api/thumbnail.md
rename to versioned_docs/version-v6/api/thumbnail.mdx
index 1071082d625..1463ce0ed17 100644
--- a/versioned_docs/version-v6/api/thumbnail.md
+++ b/versioned_docs/version-v6/api/thumbnail.mdx
@@ -2,12 +2,12 @@
 title: 'ion-thumbnail'
 ---
 
-import Props from '@ionic-internal/component-api/v6/thumbnail/props.md';
-import Events from '@ionic-internal/component-api/v6/thumbnail/events.md';
-import Methods from '@ionic-internal/component-api/v6/thumbnail/methods.md';
-import Parts from '@ionic-internal/component-api/v6/thumbnail/parts.md';
+import Props from '@ionic-internal/component-api/v6/thumbnail/props.mdx';
+import Events from '@ionic-internal/component-api/v6/thumbnail/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/thumbnail/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/thumbnail/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/thumbnail/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/thumbnail/slots.md';
+import Slots from '@ionic-internal/component-api/v6/thumbnail/slots.mdx';
 
 <head>
   <title>ion-thumbnail | Thumbnail App Component to Wrap 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/v6/thumbnail/basic/index.md';
+import Basic from '@site/static/usage/v6/thumbnail/basic/index.mdx';
 
 <Basic />
 
 ## Item Thumbnails
 
-import Item from '@site/static/usage/v6/thumbnail/item/index.md';
+import Item from '@site/static/usage/v6/thumbnail/item/index.mdx';
 
 <Item />
 
@@ -41,7 +41,7 @@ import Item from '@site/static/usage/v6/thumbnail/item/index.md';
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v6/thumbnail/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v6/thumbnail/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v6/api/title.md b/versioned_docs/version-v6/api/title.mdx
similarity index 87%
rename from versioned_docs/version-v6/api/title.md
rename to versioned_docs/version-v6/api/title.mdx
index 1bedca9abeb..468114988da 100644
--- a/versioned_docs/version-v6/api/title.md
+++ b/versioned_docs/version-v6/api/title.mdx
@@ -2,12 +2,12 @@
 title: 'ion-title'
 ---
 
-import Props from '@ionic-internal/component-api/v6/title/props.md';
-import Events from '@ionic-internal/component-api/v6/title/events.md';
-import Methods from '@ionic-internal/component-api/v6/title/methods.md';
-import Parts from '@ionic-internal/component-api/v6/title/parts.md';
+import Props from '@ionic-internal/component-api/v6/title/props.mdx';
+import Events from '@ionic-internal/component-api/v6/title/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/title/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/title/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/title/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/title/slots.md';
+import Slots from '@ionic-internal/component-api/v6/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/v6/title/basic/index.md';
+import Basic from '@site/static/usage/v6/title/basic/index.mdx';
 
 <Basic />
 
@@ -39,15 +39,15 @@ This feature is only available for iOS.
 
 :::
 
-import CollapsibleLargeTitle from '@site/static/usage/v6/title/collapsible-large-title/basic/index.md';
+import CollapsibleLargeTitle from '@site/static/usage/v6/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/v6/title/collapsible-large-title/buttons/index.md';
+import CollapsibleLargeTitleButtons from '@site/static/usage/v6/title/collapsible-large-title/buttons/index.mdx';
 
 <CollapsibleLargeTitleButtons />
 
@@ -63,7 +63,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/v6/title/theming/css-properties/index.md';
+import CSSCustomProperties from '@site/static/usage/v6/title/theming/css-properties/index.mdx';
 
 <CSSCustomProperties />
 
diff --git a/versioned_docs/version-v6/api/toast.md b/versioned_docs/version-v6/api/toast.mdx
similarity index 98%
rename from versioned_docs/version-v6/api/toast.md
rename to versioned_docs/version-v6/api/toast.mdx
index ed60a5d960b..4b4b1f7ac5b 100644
--- a/versioned_docs/version-v6/api/toast.md
+++ b/versioned_docs/version-v6/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/v6/toast/props.md';
-import Events from '@ionic-internal/component-api/v6/toast/events.md';
-import Methods from '@ionic-internal/component-api/v6/toast/methods.md';
-import Parts from '@ionic-internal/component-api/v6/toast/parts.md';
+import Props from '@ionic-internal/component-api/v6/toast/props.mdx';
+import Events from '@ionic-internal/component-api/v6/toast/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/toast/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/toast/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/toast/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/toast/slots.md';
+import Slots from '@ionic-internal/component-api/v6/toast/slots.mdx';
 
 <head>
   <title>ion-toast Component: A Dismissible App Notification Alert</title>
@@ -34,7 +34,7 @@ Toasts can be positioned at the top, bottom or middle of the viewport. The posit
 
 ### Controller
 
-import ControllerExample from '@site/static/usage/v6/toast/presenting/controller/index.md';
+import ControllerExample from '@site/static/usage/v6/toast/presenting/controller/index.mdx';
 
 <ControllerExample />
 
@@ -99,7 +99,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/v6/toast/buttons/index.md';
+import ButtonsPlayground from '@site/static/usage/v6/toast/buttons/index.mdx';
 
 <ButtonsPlayground />
 
@@ -107,21 +107,21 @@ import ButtonsPlayground from '@site/static/usage/v6/toast/buttons/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/v6/toast/layout/index.md';
+import StackedPlayground from '@site/static/usage/v6/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/v6/toast/icon/index.md';
+import IconPlayground from '@site/static/usage/v6/toast/icon/index.mdx';
 
 <IconPlayground />
 
 ## Theming
 
-import ThemingPlayground from '@site/static/usage/v6/toast/theming/index.md';
+import ThemingPlayground from '@site/static/usage/v6/toast/theming/index.mdx';
 
 <ThemingPlayground />
 
diff --git a/versioned_docs/version-v6/api/toggle.md b/versioned_docs/version-v6/api/toggle.mdx
similarity index 92%
rename from versioned_docs/version-v6/api/toggle.md
rename to versioned_docs/version-v6/api/toggle.mdx
index 6ae28c54546..87748620f91 100644
--- a/versioned_docs/version-v6/api/toggle.md
+++ b/versioned_docs/version-v6/api/toggle.mdx
@@ -2,12 +2,12 @@
 title: 'ion-toggle'
 ---
 
-import Props from '@ionic-internal/component-api/v6/toggle/props.md';
-import Events from '@ionic-internal/component-api/v6/toggle/events.md';
-import Methods from '@ionic-internal/component-api/v6/toggle/methods.md';
-import Parts from '@ionic-internal/component-api/v6/toggle/parts.md';
+import Props from '@ionic-internal/component-api/v6/toggle/props.mdx';
+import Events from '@ionic-internal/component-api/v6/toggle/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/toggle/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/toggle/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/toggle/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/toggle/slots.md';
+import Slots from '@ionic-internal/component-api/v6/toggle/slots.mdx';
 
 <head>
   <title>Toggle | 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/v6/toggle/basic/index.md';
+import Basic from '@site/static/usage/v6/toggle/basic/index.mdx';
 
 <Basic />
 
@@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v6/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/v6/toggle/on-off/index.md';
+import OnOff from '@site/static/usage/v6/toggle/on-off/index.mdx';
 
 <OnOff />
 
@@ -41,7 +41,7 @@ import OnOff from '@site/static/usage/v6/toggle/on-off/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v6/toggle/theming/colors/index.md';
+import Colors from '@site/static/usage/v6/toggle/theming/colors/index.mdx';
 
 <Colors />
 
@@ -49,7 +49,7 @@ import Colors from '@site/static/usage/v6/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/v6/toggle/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v6/toggle/theming/css-properties/index.mdx';
 
 <CSSProps />
 
@@ -57,7 +57,7 @@ import CSSProps from '@site/static/usage/v6/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/v6/toggle/theming/css-shadow-parts/index.md';
+import CSSParts from '@site/static/usage/v6/toggle/theming/css-shadow-parts/index.mdx';
 
 <CSSParts />
 
diff --git a/versioned_docs/version-v6/api/toolbar.md b/versioned_docs/version-v6/api/toolbar.mdx
similarity index 95%
rename from versioned_docs/version-v6/api/toolbar.md
rename to versioned_docs/version-v6/api/toolbar.mdx
index 184faba935c..8a4ea66dfb1 100644
--- a/versioned_docs/version-v6/api/toolbar.md
+++ b/versioned_docs/version-v6/api/toolbar.mdx
@@ -2,12 +2,12 @@
 title: 'ion-toolbar'
 ---
 
-import Props from '@ionic-internal/component-api/v6/toolbar/props.md';
-import Events from '@ionic-internal/component-api/v6/toolbar/events.md';
-import Methods from '@ionic-internal/component-api/v6/toolbar/methods.md';
-import Parts from '@ionic-internal/component-api/v6/toolbar/parts.md';
+import Props from '@ionic-internal/component-api/v6/toolbar/props.mdx';
+import Events from '@ionic-internal/component-api/v6/toolbar/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/toolbar/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/toolbar/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/toolbar/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/toolbar/slots.md';
+import Slots from '@ionic-internal/component-api/v6/toolbar/slots.mdx';
 
 <head>
   <title>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/v6/toolbar/basic/index.md';
+import Basic from '@site/static/usage/v6/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/v6/toolbar/buttons/index.md';
+import Buttons from '@site/static/usage/v6/toolbar/buttons/index.mdx';
 
 <Buttons />
 
@@ -47,7 +47,7 @@ import Buttons from '@site/static/usage/v6/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/v6/toolbar/searchbars/index.md';
+import Searchbars from '@site/static/usage/v6/toolbar/searchbars/index.mdx';
 
 <Searchbars />
 
@@ -55,7 +55,7 @@ import Searchbars from '@site/static/usage/v6/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/v6/toolbar/segments/index.md';
+import Segments from '@site/static/usage/v6/toolbar/segments/index.mdx';
 
 <Segments />
 
@@ -63,7 +63,7 @@ import Segments from '@site/static/usage/v6/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/v6/toolbar/progress-bars/index.md';
+import ProgressBars from '@site/static/usage/v6/toolbar/progress-bars/index.mdx';
 
 <ProgressBars />
 
@@ -71,13 +71,13 @@ import ProgressBars from '@site/static/usage/v6/toolbar/progress-bars/index.md';
 
 ### Colors
 
-import Colors from '@site/static/usage/v6/toolbar/theming/colors/index.md';
+import Colors from '@site/static/usage/v6/toolbar/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/v6/toolbar/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v6/toolbar/theming/css-properties/index.mdx';
 
 <CSSProps />
 
diff --git a/versioned_docs/version-v6/api/virtual-scroll.md b/versioned_docs/version-v6/api/virtual-scroll.mdx
similarity index 96%
rename from versioned_docs/version-v6/api/virtual-scroll.md
rename to versioned_docs/version-v6/api/virtual-scroll.mdx
index ee4a3f8e3b5..96f85103465 100644
--- a/versioned_docs/version-v6/api/virtual-scroll.md
+++ b/versioned_docs/version-v6/api/virtual-scroll.mdx
@@ -2,12 +2,12 @@
 title: 'ion-virtual-scroll'
 ---
 
-import Props from '@ionic-internal/component-api/v6/virtual-scroll/props.md';
-import Events from '@ionic-internal/component-api/v6/virtual-scroll/events.md';
-import Methods from '@ionic-internal/component-api/v6/virtual-scroll/methods.md';
-import Parts from '@ionic-internal/component-api/v6/virtual-scroll/parts.md';
+import Props from '@ionic-internal/component-api/v6/virtual-scroll/props.mdx';
+import Events from '@ionic-internal/component-api/v6/virtual-scroll/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/virtual-scroll/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/virtual-scroll/parts.mdx';
 import CustomProps from '@ionic-internal/component-api/v6/virtual-scroll/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/virtual-scroll/slots.md';
+import Slots from '@ionic-internal/component-api/v6/virtual-scroll/slots.mdx';
 
 <head>
   <title>ion-virtual-scroll | Angular Virtual Scroll List for Ionic Apps</title>
@@ -34,15 +34,15 @@ This guide will go over the recommended virtual scrolling packages for each fram
 
 ## Angular
 
-For virtual scrolling options in Ionic Angular, please see [Angular Virtual Scroll Guide](../angular/virtual-scroll.md).
+For virtual scrolling options in Ionic Angular, please see [Angular Virtual Scroll Guide](../angular/virtual-scroll.mdx).
 
 ## React
 
-For virtual scrolling options in Ionic React, please see [React Virtual Scroll Guide](../react/virtual-scroll.md).
+For virtual scrolling options in Ionic React, please see [React Virtual Scroll Guide](../react/virtual-scroll.mdx).
 
 ## Vue
 
-For virtual scrolling options in Ionic Vue, please see [Vue Virtual Scroll Guide](../vue/virtual-scroll.md).
+For virtual scrolling options in Ionic Vue, please see [Vue Virtual Scroll Guide](../vue/virtual-scroll.mdx).
 
 ---
 
@@ -71,7 +71,7 @@ scrolling. In order to better control images, Ionic provides `<ion-img>`
 to manage HTTP requests and image rendering. While scrolling through items
 quickly, `<ion-img>` knows when and when not to make requests, when and
 when not to render images, and only loads the images that are viewable
-after scrolling. [Read more about `ion-img`.](img.md)
+after scrolling. [Read more about `ion-img`.](img.mdx)
 
 It's also important for app developers to ensure image sizes are locked in,
 and after images have fully loaded they do not change size and affect any
@@ -107,7 +107,7 @@ via CSS.
 ### Use `ion-img` for images
 
 When including images within Virtual Scroll, be sure to use
-[`ion-img`](img.md) rather than the standard `<img>` HTML element.
+[`ion-img`](img.mdx) rather than the standard `<img>` HTML element.
 With `ion-img`, images are lazy loaded so only the viewable ones are
 rendered, and HTTP requests are efficiently controlled while scrolling.
 
diff --git a/versioned_docs/version-v6/cli.md b/versioned_docs/version-v6/cli.mdx
similarity index 100%
rename from versioned_docs/version-v6/cli.md
rename to versioned_docs/version-v6/cli.mdx
diff --git a/versioned_docs/version-v6/cli/configuration.md b/versioned_docs/version-v6/cli/configuration.mdx
similarity index 98%
rename from versioned_docs/version-v6/cli/configuration.md
rename to versioned_docs/version-v6/cli/configuration.mdx
index 9b3d7d31a95..0b67e85a2ce 100644
--- a/versioned_docs/version-v6/cli/configuration.md
+++ b/versioned_docs/version-v6/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-v6/cli/livereload.md b/versioned_docs/version-v6/cli/livereload.mdx
similarity index 96%
rename from versioned_docs/version-v6/cli/livereload.md
rename to versioned_docs/version-v6/cli/livereload.mdx
index 67a571ef1cd..939031be705 100644
--- a/versioned_docs/version-v6/cli/livereload.md
+++ b/versioned_docs/version-v6/cli/livereload.mdx
@@ -1,6 +1,6 @@
 # Live Reload
 
-One option that can boost productivity when building Ionic apps is **Live Reload** (or **live-reload**). When active, Live Reload will reload the browser or [Web View](../core-concepts/webview.md) when changes in the app are detected. This is particularly useful for developing using hardware devices.
+One option that can boost productivity when building Ionic apps is **Live Reload** (or **live-reload**). When active, Live Reload will reload the browser or [Web View](../core-concepts/webview.mdx) when changes in the app are detected. This is particularly useful for developing using hardware devices.
 
 ## Terms
 
@@ -59,6 +59,6 @@ Remember, with the `--external` option, others on your Wi-Fi network will be abl
 
 ## Tips
 
-- With Cordova, use the `--device`, `--emulator`, and `--target` options to narrow down target devices. Use the `--list` option to list all targets. See usage in the [command docs](commands/cordova-run.md).
+- With Cordova, use the `--device`, `--emulator`, and `--target` options to narrow down target devices. Use the `--list` option to list all targets. See usage in the [command docs](commands/cordova-run.mdx).
 - You can separate the dev server process and the deploy process by using `ionic serve` and the `--livereload-url` option of `ionic cordova run` or `ionic capacitor run`.
 - For Android, it is possible to configure [adb](https://developer.android.com/studio/command-line/adb) to always forward ports while the adb server is running (see `adb reverse`). With port forwarding set up, an external address would no longer be required. You can also setup the adb bridge over TCP such that subsequent deploys no longer need a USB cable.
diff --git a/versioned_docs/version-v6/cli/using-a-proxy.md b/versioned_docs/version-v6/cli/using-a-proxy.mdx
similarity index 100%
rename from versioned_docs/version-v6/cli/using-a-proxy.md
rename to versioned_docs/version-v6/cli/using-a-proxy.mdx
diff --git a/versioned_docs/version-v6/components.md b/versioned_docs/version-v6/components.mdx
similarity index 98%
rename from versioned_docs/version-v6/components.md
rename to versioned_docs/version-v6/components.mdx
index b461ac5c028..17d61f0ebb8 100644
--- a/versioned_docs/version-v6/components.md
+++ b/versioned_docs/version-v6/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-v6/contributing/coc.md b/versioned_docs/version-v6/contributing/coc.mdx
similarity index 100%
rename from versioned_docs/version-v6/contributing/coc.md
rename to versioned_docs/version-v6/contributing/coc.mdx
diff --git a/versioned_docs/version-v6/contributing/how-to-contribute.md b/versioned_docs/version-v6/contributing/how-to-contribute.mdx
similarity index 99%
rename from versioned_docs/version-v6/contributing/how-to-contribute.md
rename to versioned_docs/version-v6/contributing/how-to-contribute.mdx
index df5f6efbd23..da368fb421f 100644
--- a/versioned_docs/version-v6/contributing/how-to-contribute.md
+++ b/versioned_docs/version-v6/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-v6/core-concepts/cross-platform.md b/versioned_docs/version-v6/core-concepts/cross-platform.mdx
similarity index 93%
rename from versioned_docs/version-v6/core-concepts/cross-platform.md
rename to versioned_docs/version-v6/core-concepts/cross-platform.mdx
index 3bb1bfc6c6b..20908327092 100644
--- a/versioned_docs/version-v6/core-concepts/cross-platform.md
+++ b/versioned_docs/version-v6/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-v6/core-concepts/fundamentals.md b/versioned_docs/version-v6/core-concepts/fundamentals.mdx
similarity index 85%
rename from versioned_docs/version-v6/core-concepts/fundamentals.md
rename to versioned_docs/version-v6/core-concepts/fundamentals.mdx
index 512824fc8fd..dd38a670819 100644
--- a/versioned_docs/version-v6/core-concepts/fundamentals.md
+++ b/versioned_docs/version-v6/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-v6/core-concepts/webview.md b/versioned_docs/version-v6/core-concepts/webview.mdx
similarity index 80%
rename from versioned_docs/version-v6/core-concepts/webview.md
rename to versioned_docs/version-v6/core-concepts/webview.mdx
index 7d1f6aaac1f..8b9bc23affa 100644
--- a/versioned_docs/version-v6/core-concepts/webview.md
+++ b/versioned_docs/version-v6/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-v6/core-concepts/what-are-progressive-web-apps.md b/versioned_docs/version-v6/core-concepts/what-are-progressive-web-apps.mdx
similarity index 100%
rename from versioned_docs/version-v6/core-concepts/what-are-progressive-web-apps.md
rename to versioned_docs/version-v6/core-concepts/what-are-progressive-web-apps.mdx
diff --git a/versioned_docs/version-v6/deployment/app-store.md b/versioned_docs/version-v6/deployment/app-store.mdx
similarity index 100%
rename from versioned_docs/version-v6/deployment/app-store.md
rename to versioned_docs/version-v6/deployment/app-store.mdx
diff --git a/versioned_docs/version-v6/deployment/desktop-app.md b/versioned_docs/version-v6/deployment/desktop-app.mdx
similarity index 100%
rename from versioned_docs/version-v6/deployment/desktop-app.md
rename to versioned_docs/version-v6/deployment/desktop-app.mdx
diff --git a/versioned_docs/version-v6/deployment/progressive-web-app.md b/versioned_docs/version-v6/deployment/progressive-web-app.mdx
similarity index 97%
rename from versioned_docs/version-v6/deployment/progressive-web-app.md
rename to versioned_docs/version-v6/deployment/progressive-web-app.mdx
index 351bd03a3f2..4da1e32f0a4 100644
--- a/versioned_docs/version-v6/deployment/progressive-web-app.md
+++ b/versioned_docs/version-v6/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 and React.
 
diff --git a/versioned_docs/version-v6/developer-resources/books.md b/versioned_docs/version-v6/developer-resources/books.mdx
similarity index 100%
rename from versioned_docs/version-v6/developer-resources/books.md
rename to versioned_docs/version-v6/developer-resources/books.mdx
diff --git a/versioned_docs/version-v6/developer-resources/courses.md b/versioned_docs/version-v6/developer-resources/courses.mdx
similarity index 100%
rename from versioned_docs/version-v6/developer-resources/courses.md
rename to versioned_docs/version-v6/developer-resources/courses.mdx
diff --git a/versioned_docs/version-v6/developer-resources/guides.md b/versioned_docs/version-v6/developer-resources/guides.mdx
similarity index 76%
rename from versioned_docs/version-v6/developer-resources/guides.md
rename to versioned_docs/version-v6/developer-resources/guides.mdx
index dbe6d9477b8..c0590b83684 100644
--- a/versioned_docs/version-v6/developer-resources/guides.md
+++ b/versioned_docs/version-v6/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-v6/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx
similarity index 100%
rename from versioned_docs/version-v6/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md
rename to versioned_docs/version-v6/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx
diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/intro.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/intro.mdx
similarity index 100%
rename from versioned_docs/version-v6/developer-resources/guides/first-app-v3/intro.md
rename to versioned_docs/version-v6/developer-resources/guides/first-app-v3/intro.mdx
diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/ios-android-camera.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/ios-android-camera.mdx
similarity index 100%
rename from versioned_docs/version-v6/developer-resources/guides/first-app-v3/ios-android-camera.md
rename to versioned_docs/version-v6/developer-resources/guides/first-app-v3/ios-android-camera.mdx
diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx
similarity index 94%
rename from versioned_docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
rename to versioned_docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx
index 61d4605e865..30049b7017e 100644
--- a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
+++ b/versioned_docs/version-v6/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-v6/developer-resources/guides/first-app-v3/theming.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/theming.mdx
similarity index 100%
rename from versioned_docs/version-v6/developer-resources/guides/first-app-v3/theming.md
rename to versioned_docs/version-v6/developer-resources/guides/first-app-v3/theming.mdx
diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx
similarity index 100%
rename from versioned_docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
rename to versioned_docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx
diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx
similarity index 100%
rename from versioned_docs/version-v6/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md
rename to versioned_docs/version-v6/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx
diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/intro.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/intro.mdx
similarity index 98%
rename from versioned_docs/version-v6/developer-resources/guides/first-app-v4/intro.md
rename to versioned_docs/version-v6/developer-resources/guides/first-app-v4/intro.mdx
index 88b596a707c..7916776c975 100644
--- a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/intro.md
+++ b/versioned_docs/version-v6/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-v6/developer-resources/guides/first-app-v4/ios-android-camera.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.mdx
similarity index 98%
rename from versioned_docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.md
rename to versioned_docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.mdx
index 8908090edec..d5c4dfcb129 100644
--- a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.md
+++ b/versioned_docs/version-v6/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-v6/developer-resources/guides/first-app-v4/theming.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/theming.mdx
similarity index 92%
rename from versioned_docs/version-v6/developer-resources/guides/first-app-v4/theming.md
rename to versioned_docs/version-v6/developer-resources/guides/first-app-v4/theming.mdx
index c185f6761c1..c55d591b308 100644
--- a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/theming.md
+++ b/versioned_docs/version-v6/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-v6/developer-resources/posts.md b/versioned_docs/version-v6/developer-resources/posts.mdx
similarity index 100%
rename from versioned_docs/version-v6/developer-resources/posts.md
rename to versioned_docs/version-v6/developer-resources/posts.mdx
diff --git a/versioned_docs/version-v6/developer-resources/tools.md b/versioned_docs/version-v6/developer-resources/tools.mdx
similarity index 92%
rename from versioned_docs/version-v6/developer-resources/tools.md
rename to versioned_docs/version-v6/developer-resources/tools.mdx
index 0cd5ac7d7f3..aa1a7301ba9 100644
--- a/versioned_docs/version-v6/developer-resources/tools.md
+++ b/versioned_docs/version-v6/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-v6/developer-resources/videos.md b/versioned_docs/version-v6/developer-resources/videos.mdx
similarity index 100%
rename from versioned_docs/version-v6/developer-resources/videos.md
rename to versioned_docs/version-v6/developer-resources/videos.mdx
diff --git a/versioned_docs/version-v6/developing/android.md b/versioned_docs/version-v6/developing/android.mdx
similarity index 94%
rename from versioned_docs/version-v6/developing/android.md
rename to versioned_docs/version-v6/developing/android.mdx
index 2a6618158eb..76416a833b4 100644
--- a/versioned_docs/version-v6/developing/android.md
+++ b/versioned_docs/version-v6/developing/android.mdx
@@ -11,13 +11,13 @@ sidebar_label: Developing for Android
   />
 </head>
 
-This guide covers how to run and debug Ionic apps on Android emulators and devices using [Capacitor](../reference/glossary.md#capacitor) or [Cordova](../reference/glossary.md#cordova). Android apps can be developed on Windows, macOS, and Linux.
+This guide covers how to run and debug Ionic apps on Android emulators and devices using [Capacitor](../reference/glossary.mdx#capacitor) or [Cordova](../reference/glossary.mdx#cordova). Android apps can be developed on Windows, macOS, and Linux.
 
 ## Android Studio
 
-[Android Studio](https://developer.android.com/studio/) is the IDE for creating native Android apps. It includes the [Android SDK](../reference/glossary.md#android-sdk), which will need to be configured for use in the command line.
+[Android Studio](https://developer.android.com/studio/) is the IDE for creating native Android apps. It includes the [Android SDK](../reference/glossary.mdx#android-sdk), which will need to be configured for use in the command line.
 
-Android Studio is also used to [create Android virtual devices](android.md#creating-an-android-virtual-device), which are required for the Android emulator. Ionic apps can also be [launched to a device](android.md#set-up-an-android-device).
+Android Studio is also used to [create Android virtual devices](android.mdx#creating-an-android-virtual-device), which are required for the Android emulator. Ionic apps can also be [launched to a device](android.mdx#set-up-an-android-device).
 
 :::note
 We don't recommend using Android Studio for _developing_ Ionic apps. Instead, it should only really be used to build and run your apps for the native Android platform and to manage the Android SDK and virtual devices.
@@ -133,7 +133,7 @@ Before apps can be deployed to Android simulators and devices, the native projec
    $ ionic cordova prepare android
    ```
 
-2. **Set the [Package ID](../reference/glossary.md#package-id).**
+2. **Set the [Package ID](../reference/glossary.mdx#package-id).**
 
    For Capacitor, open the `capacitor.config.json` file and modify the `appId` property.
 
@@ -167,7 +167,7 @@ When running on a device make sure the device and your development machine are c
 
 ## Running with Cordova
 
-The Ionic CLI can build, copy, and deploy Ionic apps to Android simulators and devices with a single command. It can also spin up a development server, like the one used in `ionic serve`, to provide [live-reload](../reference/glossary.md#livereload) functionality.
+The Ionic CLI can build, copy, and deploy Ionic apps to Android simulators and devices with a single command. It can also spin up a development server, like the one used in `ionic serve`, to provide [live-reload](../reference/glossary.mdx#livereload) functionality.
 
 Run the following to start a long-running CLI process that boots up a live-reload server:
 
diff --git a/versioned_docs/version-v6/developing/config.md b/versioned_docs/version-v6/developing/config.mdx
similarity index 100%
rename from versioned_docs/version-v6/developing/config.md
rename to versioned_docs/version-v6/developing/config.mdx
diff --git a/versioned_docs/version-v6/developing/config/global/index.md b/versioned_docs/version-v6/developing/config/global/index.mdx
similarity index 100%
rename from versioned_docs/version-v6/developing/config/global/index.md
rename to versioned_docs/version-v6/developing/config/global/index.mdx
diff --git a/versioned_docs/version-v6/developing/config/per-component/index.md b/versioned_docs/version-v6/developing/config/per-component/index.mdx
similarity index 100%
rename from versioned_docs/version-v6/developing/config/per-component/index.md
rename to versioned_docs/version-v6/developing/config/per-component/index.mdx
diff --git a/versioned_docs/version-v6/developing/config/per-platform-fallback/index.md b/versioned_docs/version-v6/developing/config/per-platform-fallback/index.mdx
similarity index 100%
rename from versioned_docs/version-v6/developing/config/per-platform-fallback/index.md
rename to versioned_docs/version-v6/developing/config/per-platform-fallback/index.mdx
diff --git a/versioned_docs/version-v6/developing/config/per-platform-overrides/index.md b/versioned_docs/version-v6/developing/config/per-platform-overrides/index.mdx
similarity index 100%
rename from versioned_docs/version-v6/developing/config/per-platform-overrides/index.md
rename to versioned_docs/version-v6/developing/config/per-platform-overrides/index.mdx
diff --git a/versioned_docs/version-v6/developing/config/per-platform/index.md b/versioned_docs/version-v6/developing/config/per-platform/index.mdx
similarity index 100%
rename from versioned_docs/version-v6/developing/config/per-platform/index.md
rename to versioned_docs/version-v6/developing/config/per-platform/index.mdx
diff --git a/versioned_docs/version-v6/developing/hardware-back-button.md b/versioned_docs/version-v6/developing/hardware-back-button.mdx
similarity index 100%
rename from versioned_docs/version-v6/developing/hardware-back-button.md
rename to versioned_docs/version-v6/developing/hardware-back-button.mdx
diff --git a/versioned_docs/version-v6/developing/ios.md b/versioned_docs/version-v6/developing/ios.mdx
similarity index 94%
rename from versioned_docs/version-v6/developing/ios.md
rename to versioned_docs/version-v6/developing/ios.mdx
index 8d084816e67..652e549a279 100644
--- a/versioned_docs/version-v6/developing/ios.md
+++ b/versioned_docs/version-v6/developing/ios.mdx
@@ -12,14 +12,14 @@ skipIntros: true
   />
 </head>
 
-This guide covers how to run and debug Ionic apps on iOS simulators and devices using [Capacitor](../reference/glossary.md#capacitor) or [Cordova](../reference/glossary.md#cordova). iOS apps can only be developed on macOS with Xcode installed.
+This guide covers how to run and debug Ionic apps on iOS simulators and devices using [Capacitor](../reference/glossary.mdx#capacitor) or [Cordova](../reference/glossary.mdx#cordova). iOS apps can only be developed on macOS with Xcode installed.
 
 There are two workflows for running Ionic apps on iOS:
 
 - [Running with Xcode](#running-with-xcode)
 - [Running with the Ionic CLI](#running-with-the-ionic-cli)
 
-The Xcode approach is generally more stable, but the Ionic CLI approach offers [live-reload](../reference/glossary.md#livereload) functionality.
+The Xcode approach is generally more stable, but the Ionic CLI approach offers [live-reload](../reference/glossary.mdx#livereload) functionality.
 
 ## Xcode Setup
 
@@ -53,7 +53,7 @@ Additional setup is required for Cordova to support programmatic builds. This se
 
 ### ios-sim & ios-deploy
 
-The [`ios-sim`](https://github.com/ios-control/ios-sim) and [`ios-deploy`](https://github.com/ios-control/ios-deploy) are utilities that deploy apps to the iOS simulator and iOS devices during development. They can be installed globally with [npm](../reference/glossary.md#npm).
+The [`ios-sim`](https://github.com/ios-control/ios-sim) and [`ios-deploy`](https://github.com/ios-control/ios-deploy) are utilities that deploy apps to the iOS simulator and iOS devices during development. They can be installed globally with [npm](../reference/glossary.mdx#npm).
 
 ```shell
 $ npm install -g ios-sim
@@ -78,7 +78,7 @@ Before apps can be deployed to iOS simulators and devices, the native project mu
    $ ionic cordova prepare ios
    ```
 
-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.
 
@@ -129,7 +129,7 @@ In this workflow, Xcode can automatically fix common compilation and signing iss
 
 ## Running with the Ionic CLI
 
-The Ionic CLI can build, copy, and deploy Ionic apps to iOS simulators and devices with a single command. It can also spin up a development server, like the one used in `ionic serve`, to provide [live-reload](../reference/glossary.md#livereload) functionality.
+The Ionic CLI can build, copy, and deploy Ionic apps to iOS simulators and devices with a single command. It can also spin up a development server, like the one used in `ionic serve`, to provide [live-reload](../reference/glossary.mdx#livereload) functionality.
 
 With live-reload, changes made to the app's source files trigger a rebuild of web assets and the changes are reflected on the simulator or device without having to deploy again.
 
diff --git a/versioned_docs/version-v6/developing/keyboard.md b/versioned_docs/version-v6/developing/keyboard.mdx
similarity index 100%
rename from versioned_docs/version-v6/developing/keyboard.md
rename to versioned_docs/version-v6/developing/keyboard.mdx
diff --git a/versioned_docs/version-v6/developing/previewing.md b/versioned_docs/version-v6/developing/previewing.mdx
similarity index 94%
rename from versioned_docs/version-v6/developing/previewing.md
rename to versioned_docs/version-v6/developing/previewing.mdx
index 6c558d2d5de..6883df0b176 100644
--- a/versioned_docs/version-v6/developing/previewing.md
+++ b/versioned_docs/version-v6/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
 
@@ -38,8 +38,8 @@ $ ionic serve
 
 With `ionic serve` running, continue developing your app. As you save changes, the app reloads with those changes applied.
 
-When implementing native functionality, use [Platform Detection](../core-concepts/cross-platform.md).
-When you're ready to test on a real device, see here for [iOS](ios.md) and [Android](android.md).
+When implementing native functionality, use [Platform Detection](../core-concepts/cross-platform.mdx).
+When you're ready to test on a real device, see here for [iOS](ios.mdx) and [Android](android.mdx).
 
 ## Simulating a Mobile Viewport
 
diff --git a/versioned_docs/version-v6/developing/scaffolding.md b/versioned_docs/version-v6/developing/scaffolding.mdx
similarity index 91%
rename from versioned_docs/version-v6/developing/scaffolding.md
rename to versioned_docs/version-v6/developing/scaffolding.mdx
index 5b51485a5a7..c3449a53779 100644
--- a/versioned_docs/version-v6/developing/scaffolding.md
+++ b/versioned_docs/version-v6/developing/scaffolding.mdx
@@ -44,7 +44,7 @@ The `src/app/` directory contains the root app component and module as well as a
 
 ## Generating New Features
 
-The Ionic CLI can generate new app features with the [`ionic generate`](../cli/commands/generate.md) command. By running `ionic generate` in the command line, a selection prompt is displayed which lists the available features that can be generated.
+The Ionic CLI can generate new app features with the [`ionic generate`](../cli/commands/generate.mdx) command. By running `ionic generate` in the command line, a selection prompt is displayed which lists the available features that can be generated.
 
 ```shell-session
 $ ionic generate
@@ -88,4 +88,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-v6/developing/starting.md b/versioned_docs/version-v6/developing/starting.mdx
similarity index 100%
rename from versioned_docs/version-v6/developing/starting.md
rename to versioned_docs/version-v6/developing/starting.mdx
diff --git a/versioned_docs/version-v6/developing/tips.md b/versioned_docs/version-v6/developing/tips.mdx
similarity index 98%
rename from versioned_docs/version-v6/developing/tips.md
rename to versioned_docs/version-v6/developing/tips.mdx
index 965665f9f00..de1bc8969e8 100644
--- a/versioned_docs/version-v6/developing/tips.md
+++ b/versioned_docs/version-v6/developing/tips.mdx
@@ -132,7 +132,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-v6/index.md b/versioned_docs/version-v6/index.mdx
similarity index 86%
rename from versioned_docs/version-v6/index.md
rename to versioned_docs/version-v6/index.mdx
index f572f5f7877..12e94f33c46 100644
--- a/versioned_docs/version-v6/index.md
+++ b/versioned_docs/version-v6/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-v6/intro/cdn.md b/versioned_docs/version-v6/intro/cdn.mdx
similarity index 94%
rename from versioned_docs/version-v6/intro/cdn.md
rename to versioned_docs/version-v6/intro/cdn.mdx
index a90c4a6b250..f45acec8d0f 100644
--- a/versioned_docs/version-v6/intro/cdn.md
+++ b/versioned_docs/version-v6/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-v6/intro/cli.md b/versioned_docs/version-v6/intro/cli.mdx
similarity index 79%
rename from versioned_docs/version-v6/intro/cli.md
rename to versioned_docs/version-v6/intro/cli.mdx
index 38a8a37e4b8..2e304c50a65 100644
--- a/versioned_docs/version-v6/intro/cli.md
+++ b/versioned_docs/version-v6/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-v6/intro/environment.md b/versioned_docs/version-v6/intro/environment.mdx
similarity index 86%
rename from versioned_docs/version-v6/intro/environment.md
rename to versioned_docs/version-v6/intro/environment.mdx
index 476dda2acf1..d1f118bc5a7 100644
--- a/versioned_docs/version-v6/intro/environment.md
+++ b/versioned_docs/version-v6/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-v6/intro/first-app.md b/versioned_docs/version-v6/intro/first-app.mdx
similarity index 100%
rename from versioned_docs/version-v6/intro/first-app.md
rename to versioned_docs/version-v6/intro/first-app.mdx
diff --git a/versioned_docs/version-v6/intro/next.md b/versioned_docs/version-v6/intro/next.mdx
similarity index 100%
rename from versioned_docs/version-v6/intro/next.md
rename to versioned_docs/version-v6/intro/next.mdx
diff --git a/versioned_docs/version-v6/intro/upgrading-to-ionic-6.md b/versioned_docs/version-v6/intro/upgrading-to-ionic-6.mdx
similarity index 100%
rename from versioned_docs/version-v6/intro/upgrading-to-ionic-6.md
rename to versioned_docs/version-v6/intro/upgrading-to-ionic-6.mdx
diff --git a/versioned_docs/version-v6/intro/vscode-extension.md b/versioned_docs/version-v6/intro/vscode-extension.mdx
similarity index 100%
rename from versioned_docs/version-v6/intro/vscode-extension.md
rename to versioned_docs/version-v6/intro/vscode-extension.mdx
diff --git a/versioned_docs/version-v6/layout/css-utilities.md b/versioned_docs/version-v6/layout/css-utilities.mdx
similarity index 98%
rename from versioned_docs/version-v6/layout/css-utilities.md
rename to versioned_docs/version-v6/layout/css-utilities.mdx
index 20e40f101cc..df003ad10fb 100644
--- a/versioned_docs/version-v6/layout/css-utilities.md
+++ b/versioned_docs/version-v6/layout/css-utilities.mdx
@@ -13,7 +13,7 @@ title: CSS Utilities
 Ionic Framework provides a set of CSS utility classes that can be used on any element in order to modify the text, element placement or adjust the padding and margin.
 
 :::important
-If your app was not started using an available Ionic Framework starter, the stylesheets listed in the [optional section of the global stylesheets](global-stylesheets.md#optional) will need to be included in order for these styles to work.
+If your app was not started using an available Ionic Framework starter, the stylesheets listed in the [optional section of the global stylesheets](global-stylesheets.mdx#optional) will need to be included in order for these styles to work.
 :::
 
 ## Text Modification
@@ -213,7 +213,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>
@@ -263,7 +263,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-v6/layout/global-stylesheets.md b/versioned_docs/version-v6/layout/global-stylesheets.mdx
similarity index 81%
rename from versioned_docs/version-v6/layout/global-stylesheets.md
rename to versioned_docs/version-v6/layout/global-stylesheets.mdx
index 14c3a0f7bf2..6235408e6b3 100644
--- a/versioned_docs/version-v6/layout/global-stylesheets.md
+++ b/versioned_docs/version-v6/layout/global-stylesheets.mdx
@@ -44,28 +44,28 @@ The following set of CSS files are optional and can safely be commented out or r
 
 #### padding.css
 
-Adds utility classes to modify the padding or margin on any element, 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-v6/layout/structure.md b/versioned_docs/version-v6/layout/structure.mdx
similarity index 87%
rename from versioned_docs/version-v6/layout/structure.md
rename to versioned_docs/version-v6/layout/structure.mdx
index f0784e16d0b..8ec5d24e141 100644
--- a/versioned_docs/version-v6/layout/structure.md
+++ b/versioned_docs/version-v6/layout/structure.mdx
@@ -25,7 +25,7 @@ Ionic Framework provides several different layouts that can be used to structure
   </DocsCard>
 </aside>
 
-The most simple layout available consists of a [header](../api/header.md) and [content](../api/content.md). Most pages in an app generally have both of these, but a header is not required in order to use content.
+The most simple layout available consists of a [header](../api/header.mdx) and [content](../api/content.mdx). Most pages in an app generally have both of these, but a header is not required in order to use content.
 
 ```html
 <ion-app>
@@ -95,7 +95,7 @@ You can view a live example of this setup in Angular [here](https://stackblitz.c
 
 ## Tabs Layout
 
-A layout consisting of horizontal [tabs](../api/tabs.md) can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using an `ion-router-outlet` or `ion-nav`.
+A layout consisting of horizontal [tabs](../api/tabs.mdx) can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using an `ion-router-outlet` or `ion-nav`.
 
 ```html
 <ion-app>
@@ -127,7 +127,7 @@ You can view a live example of this setup in Angular [here](https://stackblitz.c
 
 ## Menu Layout
 
-A standard layout among mobile apps includes the ability to toggle a side [menu](../api/menu.md) by clicking a button or swiping it open from the side. Side menus are generally used for navigation, but they can contain any content.
+A standard layout among mobile apps includes the ability to toggle a side [menu](../api/menu.mdx) by clicking a button or swiping it open from the side. Side menus are generally used for navigation, but they can contain any content.
 
 ```html
 <ion-app>
@@ -180,7 +180,7 @@ You can view a live example of this setup in Angular [here](https://stackblitz.c
 
 ## Split Pane Layout
 
-A [split pane](../api/split-pane.md) layout has a more complex structure because it can combine the previous layouts. It allows for multiple views to be displayed when the viewport is above a specified breakpoint. If the device's screen size is below a certain size, the split pane view will be hidden.
+A [split pane](../api/split-pane.mdx) layout has a more complex structure because it can combine the previous layouts. It allows for multiple views to be displayed when the viewport is above a specified breakpoint. If the device's screen size is below a certain size, the split pane view will be hidden.
 
 By default, the split pane view will show when the screen is larger than `768px`, or the `md` breakpoint, but this can be customized to use different breakpoints by setting the `when` property. Below is an example where the split pane contains a menu that is visible for `sm` screens and up, or when the viewport is larger than `576px`. By resizing the browser horizontally so that the app is smaller than this, the split pane view will disappear.
 
@@ -228,7 +228,7 @@ By default, the split pane view will show when the screen is larger than `768px`
 </ion-app>
 ```
 
-It's important to note that the element with the `id` matching the `content-id` specified by the split pane will be the main content that is always visible. This can be any element, including an [ion-nav](../api/nav.md), [ion-router-outlet](../api/router-outlet.md), or an [ion-tabs](../api/tabs.md).
+It's important to note that the element with the `id` matching the `content-id` specified by the split pane will be the main content that is always visible. This can be any element, including an [ion-nav](../api/nav.mdx), [ion-router-outlet](../api/router-outlet.mdx), or an [ion-tabs](../api/tabs.mdx).
 
 ### Live examples
 
diff --git a/versioned_docs/version-v6/native-faq.md b/versioned_docs/version-v6/native-faq.mdx
similarity index 100%
rename from versioned_docs/version-v6/native-faq.md
rename to versioned_docs/version-v6/native-faq.mdx
diff --git a/versioned_docs/version-v6/native-setup.md b/versioned_docs/version-v6/native-setup.mdx
similarity index 97%
rename from versioned_docs/version-v6/native-setup.md
rename to versioned_docs/version-v6/native-setup.mdx
index 9f673d37788..91d9c45dd40 100644
--- a/versioned_docs/version-v6/native-setup.md
+++ b/versioned_docs/version-v6/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-v6/native.md b/versioned_docs/version-v6/native.mdx
similarity index 100%
rename from versioned_docs/version-v6/native.md
rename to versioned_docs/version-v6/native.mdx
diff --git a/versioned_docs/version-v6/react/lifecycle.md b/versioned_docs/version-v6/react/lifecycle.mdx
similarity index 100%
rename from versioned_docs/version-v6/react/lifecycle.md
rename to versioned_docs/version-v6/react/lifecycle.mdx
diff --git a/versioned_docs/version-v6/react/navigation.md b/versioned_docs/version-v6/react/navigation.mdx
similarity index 100%
rename from versioned_docs/version-v6/react/navigation.md
rename to versioned_docs/version-v6/react/navigation.mdx
diff --git a/versioned_docs/version-v6/react/overlays.md b/versioned_docs/version-v6/react/overlays.mdx
similarity index 100%
rename from versioned_docs/version-v6/react/overlays.md
rename to versioned_docs/version-v6/react/overlays.mdx
diff --git a/versioned_docs/version-v6/react/overview.md b/versioned_docs/version-v6/react/overview.mdx
similarity index 100%
rename from versioned_docs/version-v6/react/overview.md
rename to versioned_docs/version-v6/react/overview.mdx
diff --git a/versioned_docs/version-v6/react/performance.md b/versioned_docs/version-v6/react/performance.mdx
similarity index 100%
rename from versioned_docs/version-v6/react/performance.md
rename to versioned_docs/version-v6/react/performance.mdx
diff --git a/versioned_docs/version-v6/react/platform.md b/versioned_docs/version-v6/react/platform.mdx
similarity index 100%
rename from versioned_docs/version-v6/react/platform.md
rename to versioned_docs/version-v6/react/platform.mdx
diff --git a/versioned_docs/version-v6/react/pwa.md b/versioned_docs/version-v6/react/pwa.mdx
similarity index 100%
rename from versioned_docs/version-v6/react/pwa.md
rename to versioned_docs/version-v6/react/pwa.mdx
diff --git a/versioned_docs/version-v6/react/quickstart.md b/versioned_docs/version-v6/react/quickstart.mdx
similarity index 93%
rename from versioned_docs/version-v6/react/quickstart.md
rename to versioned_docs/version-v6/react/quickstart.mdx
index 3b7a9fd079f..1b209bd0e15 100644
--- a/versioned_docs/version-v6/react/quickstart.md
+++ b/versioned_docs/version-v6/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-v6/react/slides.md b/versioned_docs/version-v6/react/slides.mdx
similarity index 100%
rename from versioned_docs/version-v6/react/slides.md
rename to versioned_docs/version-v6/react/slides.mdx
diff --git a/versioned_docs/version-v6/react/storage.md b/versioned_docs/version-v6/react/storage.mdx
similarity index 100%
rename from versioned_docs/version-v6/react/storage.md
rename to versioned_docs/version-v6/react/storage.mdx
diff --git a/versioned_docs/version-v6/react/testing.md b/versioned_docs/version-v6/react/testing.mdx
similarity index 100%
rename from versioned_docs/version-v6/react/testing.md
rename to versioned_docs/version-v6/react/testing.mdx
diff --git a/versioned_docs/version-v6/react/virtual-scroll.md b/versioned_docs/version-v6/react/virtual-scroll.mdx
similarity index 100%
rename from versioned_docs/version-v6/react/virtual-scroll.md
rename to versioned_docs/version-v6/react/virtual-scroll.mdx
diff --git a/versioned_docs/version-v6/react/your-first-app.md b/versioned_docs/version-v6/react/your-first-app.mdx
similarity index 99%
rename from versioned_docs/version-v6/react/your-first-app.md
rename to versioned_docs/version-v6/react/your-first-app.mdx
index 00eea523811..7ae44769617 100644
--- a/versioned_docs/version-v6/react/your-first-app.md
+++ b/versioned_docs/version-v6/react/your-first-app.mdx
@@ -62,7 +62,7 @@ npm install -g @ionic/cli native-run cordova-res
 :::note
 The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
 
-Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information.
 :::
 
 ## Create an App
diff --git a/versioned_docs/version-v6/react/your-first-app/2-taking-photos.md b/versioned_docs/version-v6/react/your-first-app/2-taking-photos.mdx
similarity index 100%
rename from versioned_docs/version-v6/react/your-first-app/2-taking-photos.md
rename to versioned_docs/version-v6/react/your-first-app/2-taking-photos.mdx
diff --git a/versioned_docs/version-v6/react/your-first-app/3-saving-photos.md b/versioned_docs/version-v6/react/your-first-app/3-saving-photos.mdx
similarity index 100%
rename from versioned_docs/version-v6/react/your-first-app/3-saving-photos.md
rename to versioned_docs/version-v6/react/your-first-app/3-saving-photos.mdx
diff --git a/versioned_docs/version-v6/react/your-first-app/4-loading-photos.md b/versioned_docs/version-v6/react/your-first-app/4-loading-photos.mdx
similarity index 100%
rename from versioned_docs/version-v6/react/your-first-app/4-loading-photos.md
rename to versioned_docs/version-v6/react/your-first-app/4-loading-photos.mdx
diff --git a/versioned_docs/version-v6/react/your-first-app/5-adding-mobile.md b/versioned_docs/version-v6/react/your-first-app/5-adding-mobile.mdx
similarity index 100%
rename from versioned_docs/version-v6/react/your-first-app/5-adding-mobile.md
rename to versioned_docs/version-v6/react/your-first-app/5-adding-mobile.mdx
diff --git a/versioned_docs/version-v6/react/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v6/react/your-first-app/6-deploying-mobile.mdx
similarity index 100%
rename from versioned_docs/version-v6/react/your-first-app/6-deploying-mobile.md
rename to versioned_docs/version-v6/react/your-first-app/6-deploying-mobile.mdx
diff --git a/versioned_docs/version-v6/react/your-first-app/7-live-reload.md b/versioned_docs/version-v6/react/your-first-app/7-live-reload.mdx
similarity index 100%
rename from versioned_docs/version-v6/react/your-first-app/7-live-reload.md
rename to versioned_docs/version-v6/react/your-first-app/7-live-reload.mdx
diff --git a/versioned_docs/version-v6/react/your-first-app/8-distribute.md b/versioned_docs/version-v6/react/your-first-app/8-distribute.mdx
similarity index 100%
rename from versioned_docs/version-v6/react/your-first-app/8-distribute.md
rename to versioned_docs/version-v6/react/your-first-app/8-distribute.mdx
diff --git a/versioned_docs/version-v6/reference/browser-support.md b/versioned_docs/version-v6/reference/browser-support.mdx
similarity index 95%
rename from versioned_docs/version-v6/reference/browser-support.md
rename to versioned_docs/version-v6/reference/browser-support.mdx
index 4d669d939e1..6fc727cbdee 100644
--- a/versioned_docs/version-v6/reference/browser-support.md
+++ b/versioned_docs/version-v6/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  |
 | :-------: | :--------------------: | :---: |
@@ -40,7 +40,7 @@ Angular's support policy for iOS is the two most recent major versions. At the t
 
 ## 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 v6 | Ionic v5 | Ionic v4 |
 | :---------: | :------: | :------: | :------: |
diff --git a/versioned_docs/version-v6/reference/glossary.md b/versioned_docs/version-v6/reference/glossary.mdx
similarity index 100%
rename from versioned_docs/version-v6/reference/glossary.md
rename to versioned_docs/version-v6/reference/glossary.mdx
diff --git a/versioned_docs/version-v6/reference/migration.md b/versioned_docs/version-v6/reference/migration.mdx
similarity index 100%
rename from versioned_docs/version-v6/reference/migration.md
rename to versioned_docs/version-v6/reference/migration.mdx
diff --git a/versioned_docs/version-v6/reference/release-notes.md b/versioned_docs/version-v6/reference/release-notes.mdx
similarity index 100%
rename from versioned_docs/version-v6/reference/release-notes.md
rename to versioned_docs/version-v6/reference/release-notes.mdx
diff --git a/versioned_docs/version-v6/reference/support.md b/versioned_docs/version-v6/reference/support.mdx
similarity index 99%
rename from versioned_docs/version-v6/reference/support.md
rename to versioned_docs/version-v6/reference/support.mdx
index d5d2297823c..9c7a24bb7c4 100644
--- a/versioned_docs/version-v6/reference/support.md
+++ b/versioned_docs/version-v6/reference/support.mdx
@@ -16,7 +16,7 @@ The Ionic Framework has been 100% open source (MIT) since the very beginning, an
 
 ## Framework Maintenance and Support Status
 
-Given the reality of time and resource constraints as well as the desire to keep innovating in the frontend development space, over time it becomes necessary for the Ionic team to shift focus to newer versions of the Framework. However, Ionic will do everything it can to make the transition to newer versions as smooth as possible. The Ionic team recommends updating to the newest version of the Ionic Framework for the latest features, improvements and stability updates. For more details, consult [the Migration page](migration.md).
+Given the reality of time and resource constraints as well as the desire to keep innovating in the frontend development space, over time it becomes necessary for the Ionic team to shift focus to newer versions of the Framework. However, Ionic will do everything it can to make the transition to newer versions as smooth as possible. The Ionic team recommends updating to the newest version of the Ionic Framework for the latest features, improvements and stability updates. For more details, consult [the Migration page](migration.mdx).
 
 The current status of each Ionic Framework version is:
 
@@ -102,4 +102,4 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo
 |      V3      | Not currently supported |   @awesome-cordova-plugins 4.X   |
 
 - Wrappers (and their associated plugins) are community maintained.
-- \*Cordova plugin support with Ionic Native and `@ionic/react` can be achieved using the [vanilla JavaScript implementation](../native.md#vanilla-javascript)
+- \*Cordova plugin support with Ionic Native and `@ionic/react` can be achieved using the [vanilla JavaScript implementation](../native.mdx#vanilla-javascript)
diff --git a/versioned_docs/version-v6/reference/versioning.md b/versioned_docs/version-v6/reference/versioning.mdx
similarity index 100%
rename from versioned_docs/version-v6/reference/versioning.md
rename to versioned_docs/version-v6/reference/versioning.mdx
diff --git a/versioned_docs/version-v6/techniques/security.md b/versioned_docs/version-v6/techniques/security.mdx
similarity index 100%
rename from versioned_docs/version-v6/techniques/security.md
rename to versioned_docs/version-v6/techniques/security.mdx
diff --git a/versioned_docs/version-v6/test/page1.md b/versioned_docs/version-v6/test/page1.md
deleted file mode 100644
index d965196cf5d..00000000000
--- a/versioned_docs/version-v6/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-v6/test/page1.mdx b/versioned_docs/version-v6/test/page1.mdx
new file mode 100644
index 00000000000..cd5b72410d0
--- /dev/null
+++ b/versioned_docs/version-v6/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-v6/test/page2.md b/versioned_docs/version-v6/test/page2.md
deleted file mode 100644
index 2d2d61adacf..00000000000
--- a/versioned_docs/version-v6/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-v6/test/page2.mdx b/versioned_docs/version-v6/test/page2.mdx
new file mode 100644
index 00000000000..5ebdef8dca0
--- /dev/null
+++ b/versioned_docs/version-v6/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-v6/theming/advanced.md b/versioned_docs/version-v6/theming/advanced.mdx
similarity index 96%
rename from versioned_docs/version-v6/theming/advanced.md
rename to versioned_docs/version-v6/theming/advanced.mdx
index 62dc40c6fef..fa77538d10c 100644
--- a/versioned_docs/version-v6/theming/advanced.md
+++ b/versioned_docs/version-v6/theming/advanced.mdx
@@ -62,8 +62,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
 
@@ -105,7 +105,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.
@@ -175,6 +175,6 @@ After running through the Sass compiler, the colors will have the following valu
 
 However, because CSS variables can be set at runtime and are more dynamic, it is not currently possible to manipulate them using a simple function.
 
-This is normally not a problem, but when an application needs to have dynamic theming it presents issues. In Ionic, this is the reason that there are [variations to each color](colors.md#layered-colors), and it is also why [stepped colors](themes.md#stepped-colors) are necessary for theming.
+This is normally not a problem, but when an application needs to have dynamic theming it presents issues. In Ionic, this is the reason that there are [variations to each color](colors.mdx#layered-colors), and it is also why [stepped colors](themes.mdx#stepped-colors) are necessary for theming.
 
 There are drafts and issues discussing [color modification proposals](https://github.com/w3c/csswg-drafts/issues/3187) that would make this possible.
diff --git a/versioned_docs/version-v6/theming/basics.md b/versioned_docs/version-v6/theming/basics.mdx
similarity index 90%
rename from versioned_docs/version-v6/theming/basics.md
rename to versioned_docs/version-v6/theming/basics.mdx
index d12f551ef1e..c8232fba559 100644
--- a/versioned_docs/version-v6/theming/basics.md
+++ b/versioned_docs/version-v6/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-v6/theming/color-generator.md b/versioned_docs/version-v6/theming/color-generator.mdx
similarity index 100%
rename from versioned_docs/version-v6/theming/color-generator.md
rename to versioned_docs/version-v6/theming/color-generator.mdx
diff --git a/versioned_docs/version-v6/theming/colors.md b/versioned_docs/version-v6/theming/colors.mdx
similarity index 88%
rename from versioned_docs/version-v6/theming/colors.md
rename to versioned_docs/version-v6/theming/colors.mdx
index 666389851a0..9692c33fd00 100644
--- a/versioned_docs/version-v6/theming/colors.md
+++ b/versioned_docs/version-v6/theming/colors.mdx
@@ -33,7 +33,7 @@ A color can be applied to an Ionic component in order to change the default colo
 
 ## Layered Colors
 
-Each color consists of the following properties: a `base`, `contrast`, `shade`, and `tint`. The `base` and `contrast` colors also require a `rgb` property which is the same color, just in <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 />
 
@@ -55,10 +55,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
 
@@ -105,7 +105,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-v6/theming/css-shadow-parts.md b/versioned_docs/version-v6/theming/css-shadow-parts.mdx
similarity index 93%
rename from versioned_docs/version-v6/theming/css-shadow-parts.md
rename to versioned_docs/version-v6/theming/css-shadow-parts.mdx
index 1c644fb1001..19b6a7b6e0b 100644
--- a/versioned_docs/version-v6/theming/css-shadow-parts.md
+++ b/versioned_docs/version-v6/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-v6/theming/css-variables.md b/versioned_docs/version-v6/theming/css-variables.mdx
similarity index 94%
rename from versioned_docs/version-v6/theming/css-variables.md
rename to versioned_docs/version-v6/theming/css-variables.mdx
index 85b320b6392..f05098535ac 100644
--- a/versioned_docs/version-v6/theming/css-variables.md
+++ b/versioned_docs/version-v6/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-v6/theming/dark-mode.md b/versioned_docs/version-v6/theming/dark-mode.mdx
similarity index 97%
rename from versioned_docs/version-v6/theming/dark-mode.md
rename to versioned_docs/version-v6/theming/dark-mode.mdx
index 033d03c5127..cd24c6296c8 100644
--- a/versioned_docs/version-v6/theming/dark-mode.md
+++ b/versioned_docs/version-v6/theming/dark-mode.mdx
@@ -144,25 +144,25 @@ color-scheme: light dark;
 For more information regarding `color-scheme` please see https://web.dev/color-scheme/.
 
 :::note
-`color-scheme` does not apply to the keyboard. For details on how dark mode works with the keyboard, see [Keyboard Documentation](../developing/keyboard.md#dark-mode).
+`color-scheme` does not apply to the keyboard. For details on how dark mode works with the keyboard, see [Keyboard Documentation](../developing/keyboard.mdx#dark-mode).
 :::
 
 :::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.
 1. Setting variables for the dark theme on `ios` devices.
 1. Setting variables for the dark theme on `md` devices.
 
 The following code can be copied and pasted into an app to get Ionic's dark theme. We add the `dark` class to the document body using JavaScript as mentioned in the [combining with JavaScript](#combining-with-javascript) section. The dark mode will not be enabled until the `dark` class is added to the document body.
 
 :::note
-For more information on the variables that are being changed, including other variables that can be added to further customize, see [Themes](themes.md).
+For more information on the variables that are being changed, including other variables that can be added to further customize, see [Themes](themes.mdx).
 :::
 
 ```css
diff --git a/versioned_docs/version-v6/theming/platform-styles.md b/versioned_docs/version-v6/theming/platform-styles.mdx
similarity index 89%
rename from versioned_docs/version-v6/theming/platform-styles.md
rename to versioned_docs/version-v6/theming/platform-styles.mdx
index 77d0a5665fc..e58a1be4579 100644
--- a/versioned_docs/version-v6/theming/platform-styles.md
+++ b/versioned_docs/version-v6/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-v6/theming/themes.md b/versioned_docs/version-v6/theming/themes.mdx
similarity index 97%
rename from versioned_docs/version-v6/theming/themes.md
rename to versioned_docs/version-v6/theming/themes.mdx
index 79408c5fa96..9ef41c9c685 100644
--- a/versioned_docs/version-v6/theming/themes.md
+++ b/versioned_docs/version-v6/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-v6/troubleshooting/build.md b/versioned_docs/version-v6/troubleshooting/build.mdx
similarity index 100%
rename from versioned_docs/version-v6/troubleshooting/build.md
rename to versioned_docs/version-v6/troubleshooting/build.mdx
diff --git a/versioned_docs/version-v6/troubleshooting/cors.md b/versioned_docs/version-v6/troubleshooting/cors.mdx
similarity index 100%
rename from versioned_docs/version-v6/troubleshooting/cors.md
rename to versioned_docs/version-v6/troubleshooting/cors.mdx
diff --git a/versioned_docs/version-v6/troubleshooting/debugging.md b/versioned_docs/version-v6/troubleshooting/debugging.mdx
similarity index 99%
rename from versioned_docs/version-v6/troubleshooting/debugging.md
rename to versioned_docs/version-v6/troubleshooting/debugging.mdx
index 166df54308e..9089c26eb2e 100644
--- a/versioned_docs/version-v6/troubleshooting/debugging.md
+++ b/versioned_docs/version-v6/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-v6/troubleshooting/native.md b/versioned_docs/version-v6/troubleshooting/native.mdx
similarity index 97%
rename from versioned_docs/version-v6/troubleshooting/native.md
rename to versioned_docs/version-v6/troubleshooting/native.mdx
index 78d6a1f4ba3..f291f7626e1 100644
--- a/versioned_docs/version-v6/troubleshooting/native.md
+++ b/versioned_docs/version-v6/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. <strong>Set the [Package ID](../reference/glossary.md#package-id).</strong>
+1. <strong>Set the [Package ID](../reference/glossary.mdx#package-id).</strong>
 
    For Capacitor, open the `capacitor.config.json` file and modify the `appId` property.
 
@@ -52,7 +52,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-v6/troubleshooting/runtime.md b/versioned_docs/version-v6/troubleshooting/runtime.mdx
similarity index 100%
rename from versioned_docs/version-v6/troubleshooting/runtime.md
rename to versioned_docs/version-v6/troubleshooting/runtime.mdx
diff --git a/versioned_docs/version-v6/utilities/animations.md b/versioned_docs/version-v6/utilities/animations.mdx
similarity index 99%
rename from versioned_docs/version-v6/utilities/animations.md
rename to versioned_docs/version-v6/utilities/animations.mdx
index 8edaf9179db..ea0b128d6d6 100644
--- a/versioned_docs/version-v6/utilities/animations.md
+++ b/versioned_docs/version-v6/utilities/animations.mdx
@@ -854,7 +854,7 @@ await squareC.play();
 
 ## Gesture Animations
 
-Ionic Animations gives developers the ability to create powerful gesture-based animations by integrating seamlessly with [Ionic Gestures](gestures.md).
+Ionic Animations gives developers the ability to create powerful gesture-based animations by integrating seamlessly with [Ionic Gestures](gestures.mdx).
 
 ### Usage
 
diff --git a/versioned_docs/version-v6/utilities/gestures.md b/versioned_docs/version-v6/utilities/gestures.mdx
similarity index 99%
rename from versioned_docs/version-v6/utilities/gestures.md
rename to versioned_docs/version-v6/utilities/gestures.mdx
index ab65cfb8f7b..af39daadadc 100644
--- a/versioned_docs/version-v6/utilities/gestures.md
+++ b/versioned_docs/version-v6/utilities/gestures.mdx
@@ -446,7 +446,7 @@ In the example above, we want to be able to detect double clicks on an element.
 
 ## Gesture Animations
 
-See our guide on implementing gesture animations: [Gesture Animations with Ionic Animations](animations.md#gesture-animations)
+See our guide on implementing gesture animations: [Gesture Animations with Ionic Animations](animations.mdx#gesture-animations)
 
 ## Types
 
diff --git a/versioned_docs/version-v6/vue/build-options.md b/versioned_docs/version-v6/vue/build-options.mdx
similarity index 100%
rename from versioned_docs/version-v6/vue/build-options.md
rename to versioned_docs/version-v6/vue/build-options.mdx
diff --git a/versioned_docs/version-v6/vue/lifecycle.md b/versioned_docs/version-v6/vue/lifecycle.mdx
similarity index 100%
rename from versioned_docs/version-v6/vue/lifecycle.md
rename to versioned_docs/version-v6/vue/lifecycle.mdx
diff --git a/versioned_docs/version-v6/vue/navigation.md b/versioned_docs/version-v6/vue/navigation.mdx
similarity index 100%
rename from versioned_docs/version-v6/vue/navigation.md
rename to versioned_docs/version-v6/vue/navigation.mdx
diff --git a/versioned_docs/version-v6/vue/overview.md b/versioned_docs/version-v6/vue/overview.mdx
similarity index 92%
rename from versioned_docs/version-v6/vue/overview.md
rename to versioned_docs/version-v6/vue/overview.mdx
index 8386d22d379..6bf1e7b111f 100644
--- a/versioned_docs/version-v6/vue/overview.md
+++ b/versioned_docs/version-v6/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-v6/vue/performance.md b/versioned_docs/version-v6/vue/performance.mdx
similarity index 100%
rename from versioned_docs/version-v6/vue/performance.md
rename to versioned_docs/version-v6/vue/performance.mdx
diff --git a/versioned_docs/version-v6/vue/platform.md b/versioned_docs/version-v6/vue/platform.mdx
similarity index 100%
rename from versioned_docs/version-v6/vue/platform.md
rename to versioned_docs/version-v6/vue/platform.mdx
diff --git a/versioned_docs/version-v6/vue/pwa.md b/versioned_docs/version-v6/vue/pwa.mdx
similarity index 100%
rename from versioned_docs/version-v6/vue/pwa.md
rename to versioned_docs/version-v6/vue/pwa.mdx
diff --git a/versioned_docs/version-v6/vue/quickstart.md b/versioned_docs/version-v6/vue/quickstart.mdx
similarity index 93%
rename from versioned_docs/version-v6/vue/quickstart.md
rename to versioned_docs/version-v6/vue/quickstart.mdx
index 97080b04e19..597f527d88b 100644
--- a/versioned_docs/version-v6/vue/quickstart.md
+++ b/versioned_docs/version-v6/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-v6/vue/slides.md b/versioned_docs/version-v6/vue/slides.mdx
similarity index 100%
rename from versioned_docs/version-v6/vue/slides.md
rename to versioned_docs/version-v6/vue/slides.mdx
diff --git a/versioned_docs/version-v6/vue/storage.md b/versioned_docs/version-v6/vue/storage.mdx
similarity index 100%
rename from versioned_docs/version-v6/vue/storage.md
rename to versioned_docs/version-v6/vue/storage.mdx
diff --git a/versioned_docs/version-v6/vue/testing.md b/versioned_docs/version-v6/vue/testing.mdx
similarity index 100%
rename from versioned_docs/version-v6/vue/testing.md
rename to versioned_docs/version-v6/vue/testing.mdx
diff --git a/versioned_docs/version-v6/vue/troubleshooting.md b/versioned_docs/version-v6/vue/troubleshooting.mdx
similarity index 92%
rename from versioned_docs/version-v6/vue/troubleshooting.md
rename to versioned_docs/version-v6/vue/troubleshooting.mdx
index 1483bb9037b..b0f5d6486e3 100644
--- a/versioned_docs/version-v6/vue/troubleshooting.md
+++ b/versioned_docs/version-v6/vue/troubleshooting.mdx
@@ -41,7 +41,7 @@ To resolve this issue, you need to import the component from `@ionic/vue` and pr
 </script>
 ```
 
-Prefer to register your components globally once? We have you covered. Our [Optimizing Your Build Guide](quickstart.md#optimizing-your-build) shows you how to register Ionic Vue components globally as well as the potential downsides to be aware of when using this approach.
+Prefer to register your components globally once? We have you covered. Our [Optimizing Your Build Guide](quickstart.mdx#optimizing-your-build) shows you how to register Ionic Vue components globally as well as the potential downsides to be aware of when using this approach.
 
 ## Slot attributes are deprecated
 
@@ -79,7 +79,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
 
@@ -113,7 +113,7 @@ In order for page transitions to work correctly, each page must have an `ion-pag
 </script>
 ```
 
-See the [IonPage documentation](navigation.md#ionpage) for more information.
+See the [IonPage documentation](navigation.mdx#ionpage) for more information.
 
 ## Ionic events bound in JavaScript are not firing
 
diff --git a/versioned_docs/version-v6/vue/utility-functions.md b/versioned_docs/version-v6/vue/utility-functions.mdx
similarity index 100%
rename from versioned_docs/version-v6/vue/utility-functions.md
rename to versioned_docs/version-v6/vue/utility-functions.mdx
diff --git a/versioned_docs/version-v6/vue/virtual-scroll.md b/versioned_docs/version-v6/vue/virtual-scroll.mdx
similarity index 100%
rename from versioned_docs/version-v6/vue/virtual-scroll.md
rename to versioned_docs/version-v6/vue/virtual-scroll.mdx
diff --git a/versioned_docs/version-v6/vue/your-first-app.md b/versioned_docs/version-v6/vue/your-first-app.mdx
similarity index 99%
rename from versioned_docs/version-v6/vue/your-first-app.md
rename to versioned_docs/version-v6/vue/your-first-app.mdx
index 579c543d5f5..35521e9cd7f 100644
--- a/versioned_docs/version-v6/vue/your-first-app.md
+++ b/versioned_docs/version-v6/vue/your-first-app.mdx
@@ -62,7 +62,7 @@ npm install -g @ionic/cli@latest native-run cordova-res
 :::note
 The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
 
-Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information.
 :::
 
 ## Create an App
diff --git a/versioned_docs/version-v6/vue/your-first-app/2-taking-photos.md b/versioned_docs/version-v6/vue/your-first-app/2-taking-photos.mdx
similarity index 100%
rename from versioned_docs/version-v6/vue/your-first-app/2-taking-photos.md
rename to versioned_docs/version-v6/vue/your-first-app/2-taking-photos.mdx
diff --git a/versioned_docs/version-v6/vue/your-first-app/3-saving-photos.md b/versioned_docs/version-v6/vue/your-first-app/3-saving-photos.mdx
similarity index 100%
rename from versioned_docs/version-v6/vue/your-first-app/3-saving-photos.md
rename to versioned_docs/version-v6/vue/your-first-app/3-saving-photos.mdx
diff --git a/versioned_docs/version-v6/vue/your-first-app/4-loading-photos.md b/versioned_docs/version-v6/vue/your-first-app/4-loading-photos.mdx
similarity index 100%
rename from versioned_docs/version-v6/vue/your-first-app/4-loading-photos.md
rename to versioned_docs/version-v6/vue/your-first-app/4-loading-photos.mdx
diff --git a/versioned_docs/version-v6/vue/your-first-app/5-adding-mobile.md b/versioned_docs/version-v6/vue/your-first-app/5-adding-mobile.mdx
similarity index 100%
rename from versioned_docs/version-v6/vue/your-first-app/5-adding-mobile.md
rename to versioned_docs/version-v6/vue/your-first-app/5-adding-mobile.mdx
diff --git a/versioned_docs/version-v6/vue/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v6/vue/your-first-app/6-deploying-mobile.mdx
similarity index 100%
rename from versioned_docs/version-v6/vue/your-first-app/6-deploying-mobile.md
rename to versioned_docs/version-v6/vue/your-first-app/6-deploying-mobile.mdx
diff --git a/versioned_docs/version-v6/vue/your-first-app/7-live-reload.md b/versioned_docs/version-v6/vue/your-first-app/7-live-reload.mdx
similarity index 100%
rename from versioned_docs/version-v6/vue/your-first-app/7-live-reload.md
rename to versioned_docs/version-v6/vue/your-first-app/7-live-reload.mdx
diff --git a/versioned_docs/version-v6/vue/your-first-app/8-distribute.md b/versioned_docs/version-v6/vue/your-first-app/8-distribute.mdx
similarity index 100%
rename from versioned_docs/version-v6/vue/your-first-app/8-distribute.md
rename to versioned_docs/version-v6/vue/your-first-app/8-distribute.mdx