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;