From 79e459c77217077b75c992445e08edfc35ffdf85 Mon Sep 17 00:00:00 2001
From: ShaneK <shane@shanessite.net>
Date: Thu, 11 Dec 2025 14:27:02 -0800
Subject: [PATCH 1/2] docs(tabs): add IonPage wrapper to React router examples

---
 static/usage/v6/tabs/router/react/home_page_tsx.md    | 6 +++---
 static/usage/v6/tabs/router/react/library_page_tsx.md | 6 +++---
 static/usage/v6/tabs/router/react/radio_page_tsx.md   | 6 +++---
 static/usage/v6/tabs/router/react/search_page_tsx.md  | 6 +++---
 static/usage/v7/tabs/router/react/home_page_tsx.md    | 6 +++---
 static/usage/v7/tabs/router/react/library_page_tsx.md | 6 +++---
 static/usage/v7/tabs/router/react/radio_page_tsx.md   | 6 +++---
 static/usage/v7/tabs/router/react/search_page_tsx.md  | 6 +++---
 static/usage/v8/tabs/router/react/home_page_tsx.md    | 6 +++---
 static/usage/v8/tabs/router/react/library_page_tsx.md | 6 +++---
 static/usage/v8/tabs/router/react/radio_page_tsx.md   | 6 +++---
 static/usage/v8/tabs/router/react/search_page_tsx.md  | 6 +++---
 12 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/static/usage/v6/tabs/router/react/home_page_tsx.md b/static/usage/v6/tabs/router/react/home_page_tsx.md
index f24b05e18b5..f30578f2c86 100644
--- a/static/usage/v6/tabs/router/react/home_page_tsx.md
+++ b/static/usage/v6/tabs/router/react/home_page_tsx.md
@@ -1,9 +1,9 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 const HomePage = () => (
-  <>
+  <IonPage>
     <IonHeader>
       <IonToolbar>
         <IonTitle>Listen now</IonTitle>
@@ -21,7 +21,7 @@ const HomePage = () => (
         Listen now content
       </div>
     </IonContent>
-  </>
+  </IonPage>
 );
 
 export default HomePage;
diff --git a/static/usage/v6/tabs/router/react/library_page_tsx.md b/static/usage/v6/tabs/router/react/library_page_tsx.md
index 383b6f115de..b2ee1528d04 100644
--- a/static/usage/v6/tabs/router/react/library_page_tsx.md
+++ b/static/usage/v6/tabs/router/react/library_page_tsx.md
@@ -1,9 +1,9 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 const LibraryPage = () => (
-  <>
+  <IonPage>
     <IonHeader>
       <IonToolbar>
         <IonTitle>Library</IonTitle>
@@ -21,7 +21,7 @@ const LibraryPage = () => (
         Library content
       </div>
     </IonContent>
-  </>
+  </IonPage>
 );
 
 export default LibraryPage;
diff --git a/static/usage/v6/tabs/router/react/radio_page_tsx.md b/static/usage/v6/tabs/router/react/radio_page_tsx.md
index d0e432c3a58..83efaf77667 100644
--- a/static/usage/v6/tabs/router/react/radio_page_tsx.md
+++ b/static/usage/v6/tabs/router/react/radio_page_tsx.md
@@ -1,9 +1,9 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 const RadioPage = () => (
-  <>
+  <IonPage>
     <IonHeader>
       <IonToolbar>
         <IonTitle>Radio</IonTitle>
@@ -21,7 +21,7 @@ const RadioPage = () => (
         Radio content
       </div>
     </IonContent>
-  </>
+  </IonPage>
 );
 
 export default RadioPage;
diff --git a/static/usage/v6/tabs/router/react/search_page_tsx.md b/static/usage/v6/tabs/router/react/search_page_tsx.md
index 3d51b374830..2fedbcf962a 100644
--- a/static/usage/v6/tabs/router/react/search_page_tsx.md
+++ b/static/usage/v6/tabs/router/react/search_page_tsx.md
@@ -1,9 +1,9 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 const SearchPage = () => (
-  <>
+  <IonPage>
     <IonHeader>
       <IonToolbar>
         <IonTitle>Search</IonTitle>
@@ -21,7 +21,7 @@ const SearchPage = () => (
         Search content
       </div>
     </IonContent>
-  </>
+  </IonPage>
 );
 
 export default SearchPage;
diff --git a/static/usage/v7/tabs/router/react/home_page_tsx.md b/static/usage/v7/tabs/router/react/home_page_tsx.md
index f24b05e18b5..f30578f2c86 100644
--- a/static/usage/v7/tabs/router/react/home_page_tsx.md
+++ b/static/usage/v7/tabs/router/react/home_page_tsx.md
@@ -1,9 +1,9 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 const HomePage = () => (
-  <>
+  <IonPage>
     <IonHeader>
       <IonToolbar>
         <IonTitle>Listen now</IonTitle>
@@ -21,7 +21,7 @@ const HomePage = () => (
         Listen now content
       </div>
     </IonContent>
-  </>
+  </IonPage>
 );
 
 export default HomePage;
diff --git a/static/usage/v7/tabs/router/react/library_page_tsx.md b/static/usage/v7/tabs/router/react/library_page_tsx.md
index 383b6f115de..b2ee1528d04 100644
--- a/static/usage/v7/tabs/router/react/library_page_tsx.md
+++ b/static/usage/v7/tabs/router/react/library_page_tsx.md
@@ -1,9 +1,9 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 const LibraryPage = () => (
-  <>
+  <IonPage>
     <IonHeader>
       <IonToolbar>
         <IonTitle>Library</IonTitle>
@@ -21,7 +21,7 @@ const LibraryPage = () => (
         Library content
       </div>
     </IonContent>
-  </>
+  </IonPage>
 );
 
 export default LibraryPage;
diff --git a/static/usage/v7/tabs/router/react/radio_page_tsx.md b/static/usage/v7/tabs/router/react/radio_page_tsx.md
index d0e432c3a58..83efaf77667 100644
--- a/static/usage/v7/tabs/router/react/radio_page_tsx.md
+++ b/static/usage/v7/tabs/router/react/radio_page_tsx.md
@@ -1,9 +1,9 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 const RadioPage = () => (
-  <>
+  <IonPage>
     <IonHeader>
       <IonToolbar>
         <IonTitle>Radio</IonTitle>
@@ -21,7 +21,7 @@ const RadioPage = () => (
         Radio content
       </div>
     </IonContent>
-  </>
+  </IonPage>
 );
 
 export default RadioPage;
diff --git a/static/usage/v7/tabs/router/react/search_page_tsx.md b/static/usage/v7/tabs/router/react/search_page_tsx.md
index 3d51b374830..2fedbcf962a 100644
--- a/static/usage/v7/tabs/router/react/search_page_tsx.md
+++ b/static/usage/v7/tabs/router/react/search_page_tsx.md
@@ -1,9 +1,9 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 const SearchPage = () => (
-  <>
+  <IonPage>
     <IonHeader>
       <IonToolbar>
         <IonTitle>Search</IonTitle>
@@ -21,7 +21,7 @@ const SearchPage = () => (
         Search content
       </div>
     </IonContent>
-  </>
+  </IonPage>
 );
 
 export default SearchPage;
diff --git a/static/usage/v8/tabs/router/react/home_page_tsx.md b/static/usage/v8/tabs/router/react/home_page_tsx.md
index f24b05e18b5..f30578f2c86 100644
--- a/static/usage/v8/tabs/router/react/home_page_tsx.md
+++ b/static/usage/v8/tabs/router/react/home_page_tsx.md
@@ -1,9 +1,9 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 const HomePage = () => (
-  <>
+  <IonPage>
     <IonHeader>
       <IonToolbar>
         <IonTitle>Listen now</IonTitle>
@@ -21,7 +21,7 @@ const HomePage = () => (
         Listen now content
       </div>
     </IonContent>
-  </>
+  </IonPage>
 );
 
 export default HomePage;
diff --git a/static/usage/v8/tabs/router/react/library_page_tsx.md b/static/usage/v8/tabs/router/react/library_page_tsx.md
index 383b6f115de..b2ee1528d04 100644
--- a/static/usage/v8/tabs/router/react/library_page_tsx.md
+++ b/static/usage/v8/tabs/router/react/library_page_tsx.md
@@ -1,9 +1,9 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 const LibraryPage = () => (
-  <>
+  <IonPage>
     <IonHeader>
       <IonToolbar>
         <IonTitle>Library</IonTitle>
@@ -21,7 +21,7 @@ const LibraryPage = () => (
         Library content
       </div>
     </IonContent>
-  </>
+  </IonPage>
 );
 
 export default LibraryPage;
diff --git a/static/usage/v8/tabs/router/react/radio_page_tsx.md b/static/usage/v8/tabs/router/react/radio_page_tsx.md
index d0e432c3a58..83efaf77667 100644
--- a/static/usage/v8/tabs/router/react/radio_page_tsx.md
+++ b/static/usage/v8/tabs/router/react/radio_page_tsx.md
@@ -1,9 +1,9 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 const RadioPage = () => (
-  <>
+  <IonPage>
     <IonHeader>
       <IonToolbar>
         <IonTitle>Radio</IonTitle>
@@ -21,7 +21,7 @@ const RadioPage = () => (
         Radio content
       </div>
     </IonContent>
-  </>
+  </IonPage>
 );
 
 export default RadioPage;
diff --git a/static/usage/v8/tabs/router/react/search_page_tsx.md b/static/usage/v8/tabs/router/react/search_page_tsx.md
index 3d51b374830..2fedbcf962a 100644
--- a/static/usage/v8/tabs/router/react/search_page_tsx.md
+++ b/static/usage/v8/tabs/router/react/search_page_tsx.md
@@ -1,9 +1,9 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 const SearchPage = () => (
-  <>
+  <IonPage>
     <IonHeader>
       <IonToolbar>
         <IonTitle>Search</IonTitle>
@@ -21,7 +21,7 @@ const SearchPage = () => (
         Search content
       </div>
     </IonContent>
-  </>
+  </IonPage>
 );
 
 export default SearchPage;

From 6289d5350d75ea076dc71a15f6bc0c08292e30a2 Mon Sep 17 00:00:00 2001
From: ShaneK <shane@shanessite.net>
Date: Tue, 16 Dec 2025 09:12:38 -0800
Subject: [PATCH 2/2] docs(IonPage): note that IonPage is required for styling

---
 docs/react/navigation.md                      | 2 ++
 docs/vue/navigation.md                        | 2 ++
 versioned_docs/version-v6/react/navigation.md | 2 ++
 versioned_docs/version-v6/vue/navigation.md   | 2 ++
 versioned_docs/version-v7/react/navigation.md | 2 ++
 versioned_docs/version-v7/vue/navigation.md   | 2 ++
 6 files changed, 12 insertions(+)

diff --git a/docs/react/navigation.md b/docs/react/navigation.md
index 9b7129667e9..add9fcb1102 100644
--- a/docs/react/navigation.md
+++ b/docs/react/navigation.md
@@ -146,6 +146,8 @@ const DashboardPage: React.FC<RouteComponentProps> = ({ match }) => {
 
 The `IonPage` component wraps each view in an Ionic React app and allows page transitions and stack navigation to work properly. Each view that is navigated to using the router must include an `IonPage` component.
 
+`IonPage` is also required for proper styling. It provides a flex container that ensures page content, such as `IonContent`, is properly sized and does not overlap other UI elements like `IonTabBar`.
+
 ```tsx
 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import React from 'react';
diff --git a/docs/vue/navigation.md b/docs/vue/navigation.md
index b77a19ba7e1..6f6afa3575f 100644
--- a/docs/vue/navigation.md
+++ b/docs/vue/navigation.md
@@ -494,6 +494,8 @@ Nothing should be provided inside of `IonRouterOutlet` when setting it up in you
 
 The `IonPage` component wraps each view in an Ionic Vue app and allows page transitions and stack navigation to work properly. Each view that is navigated to using the router must include an `IonPage` component.
 
+`IonPage` is also required for proper styling. It provides a flex container that ensures page content, such as `IonContent`, is properly sized and does not overlap other UI elements like `IonTabBar`.
+
 ```vue
 <template>
   <ion-page>
diff --git a/versioned_docs/version-v6/react/navigation.md b/versioned_docs/version-v6/react/navigation.md
index 7542cb07e15..fe12dc6bdf3 100644
--- a/versioned_docs/version-v6/react/navigation.md
+++ b/versioned_docs/version-v6/react/navigation.md
@@ -146,6 +146,8 @@ const DashboardPage: React.FC<RouteComponentProps> = ({ match }) => {
 
 The `IonPage` component wraps each view in an Ionic React app and allows page transitions and stack navigation to work properly. Each view that is navigated to using the router must include an `IonPage` component.
 
+`IonPage` is also required for proper styling. It provides a flex container that ensures page content, such as `IonContent`, is properly sized and does not overlap other UI elements like `IonTabBar`.
+
 ```tsx
 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import React from 'react';
diff --git a/versioned_docs/version-v6/vue/navigation.md b/versioned_docs/version-v6/vue/navigation.md
index d264a062d0e..b7675d2829a 100644
--- a/versioned_docs/version-v6/vue/navigation.md
+++ b/versioned_docs/version-v6/vue/navigation.md
@@ -552,6 +552,8 @@ Nothing should be provided inside of `IonRouterOutlet` when setting it up in you
 
 The `IonPage` component wraps each view in an Ionic Vue app and allows page transitions and stack navigation to work properly. Each view that is navigated to using the router must include an `IonPage` component.
 
+`IonPage` is also required for proper styling. It provides a flex container that ensures page content, such as `IonContent`, is properly sized and does not overlap other UI elements like `IonTabBar`.
+
 ```html
 <template>
   <ion-page>
diff --git a/versioned_docs/version-v7/react/navigation.md b/versioned_docs/version-v7/react/navigation.md
index 9b7129667e9..add9fcb1102 100644
--- a/versioned_docs/version-v7/react/navigation.md
+++ b/versioned_docs/version-v7/react/navigation.md
@@ -146,6 +146,8 @@ const DashboardPage: React.FC<RouteComponentProps> = ({ match }) => {
 
 The `IonPage` component wraps each view in an Ionic React app and allows page transitions and stack navigation to work properly. Each view that is navigated to using the router must include an `IonPage` component.
 
+`IonPage` is also required for proper styling. It provides a flex container that ensures page content, such as `IonContent`, is properly sized and does not overlap other UI elements like `IonTabBar`.
+
 ```tsx
 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import React from 'react';
diff --git a/versioned_docs/version-v7/vue/navigation.md b/versioned_docs/version-v7/vue/navigation.md
index b77a19ba7e1..6f6afa3575f 100644
--- a/versioned_docs/version-v7/vue/navigation.md
+++ b/versioned_docs/version-v7/vue/navigation.md
@@ -494,6 +494,8 @@ Nothing should be provided inside of `IonRouterOutlet` when setting it up in you
 
 The `IonPage` component wraps each view in an Ionic Vue app and allows page transitions and stack navigation to work properly. Each view that is navigated to using the router must include an `IonPage` component.
 
+`IonPage` is also required for proper styling. It provides a flex container that ensures page content, such as `IonContent`, is properly sized and does not overlap other UI elements like `IonTabBar`.
+
 ```vue
 <template>
   <ion-page>