diff --git a/docs/api/tab.md b/docs/api/tab.md
index 6910a6bb43a..a669d9193d5 100644
--- a/docs/api/tab.md
+++ b/docs/api/tab.md
@@ -22,7 +22,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
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.
:::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.
+Angular, React, and Vue can only use this component when the `ion-tabs` component is configured for [basic usage](./tabs.md#basic-usage). When setting up tabs with routing, the `ion-tab` component cannot be used.
+
+In JavaScript, this component can be used with the `ion-tabs` component configured for either [basic usage](./tabs.md#basic-usage) or [usage with router](./tabs.md#usage-with-router).
:::
diff --git a/docs/api/tabs.md b/docs/api/tabs.md
index 5393bc96aa0..da6a3fb7e99 100644
--- a/docs/api/tabs.md
+++ b/docs/api/tabs.md
@@ -26,15 +26,17 @@ Both `ion-tabs` and `ion-tab-bar` can be used as standalone elements. They don
The `ion-tab-bar` needs a slot defined in order to be projected to the right place in an `ion-tabs` component.
-:::note Framework Support
+## Basic Usage
-Using `ion-tabs` within Angular, React or Vue requires the use of the `ion-router-outlet` or `ion-nav` components.
+Tabs can be used to display different content without the need to change the URL. This is useful when the tabs are not used for navigation, but rather to display different content.
-:::
+import Basic from '@site/static/usage/v8/tabs/basic/index.md';
+
+
## Usage with Router
-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.
+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/v8/tabs/router/index.md';
diff --git a/static/usage/v8/tabs/basic/angular/example_component_css.md b/static/usage/v8/tabs/basic/angular/example_component_css.md
new file mode 100644
index 00000000000..b177722f8cc
--- /dev/null
+++ b/static/usage/v8/tabs/basic/angular/example_component_css.md
@@ -0,0 +1,10 @@
+```css
+/* This style is for demonstration purposes only. */
+/* It's not required for the tabs to function. */
+.example-content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+}
+```
diff --git a/static/usage/v8/tabs/basic/angular/example_component_html.md b/static/usage/v8/tabs/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..9fa546d2bd3
--- /dev/null
+++ b/static/usage/v8/tabs/basic/angular/example_component_html.md
@@ -0,0 +1,71 @@
+```html
+
+
+
+
+
+ Listen now
+
+
+
+
Listen now content
+
+
+
+
+
+
+
+ Radio
+
+
+
+
Radio content
+
+
+
+
+
+
+
+ Library
+
+
+
+
Library content
+
+
+
+
+
+
+
+ Search
+
+
+
+
Search content
+
+
+
+
+
+
+
+ Listen Now
+
+
+
+ Radio
+
+
+
+ Library
+
+
+
+ Search
+
+
+
+```
diff --git a/static/usage/v8/tabs/basic/angular/example_component_ts.md b/static/usage/v8/tabs/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..7762322ce9d
--- /dev/null
+++ b/static/usage/v8/tabs/basic/angular/example_component_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+
+import { addIcons } from 'ionicons';
+import { library, playCircle, radio, search } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ library, playCircle, radio, search });
+ }
+}
+```
diff --git a/static/usage/v8/tabs/basic/demo.html b/static/usage/v8/tabs/basic/demo.html
new file mode 100644
index 00000000000..5a303b66cbb
--- /dev/null
+++ b/static/usage/v8/tabs/basic/demo.html
@@ -0,0 +1,94 @@
+
+
+
+
+
+ Tabs
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Listen now
+
+
+
+
Listen now content
+
+
+
+
+
+
+
+ Radio
+
+
+
+
Radio content
+
+
+
+
+
+
+
+ Library
+
+
+
+
Library content
+
+
+
+
+
+
+
+ Search
+
+
+
+
Search content
+
+
+
+
+
+
+
+ Listen Now
+
+
+
+ Radio
+
+
+
+ Library
+
+
+
+ Search
+
+
+
+
+
+
diff --git a/static/usage/v8/tabs/basic/index.md b/static/usage/v8/tabs/basic/index.md
new file mode 100644
index 00000000000..588431eb980
--- /dev/null
+++ b/static/usage/v8/tabs/basic/index.md
@@ -0,0 +1,42 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/tabs/basic/javascript/index_html.md b/static/usage/v8/tabs/basic/javascript/index_html.md
new file mode 100644
index 00000000000..fa93db84956
--- /dev/null
+++ b/static/usage/v8/tabs/basic/javascript/index_html.md
@@ -0,0 +1,82 @@
+```html
+
+
+
+
+
+ Listen now
+
+
+
+
Listen now content
+
+
+
+
+
+
+
+ Radio
+
+
+
+
Radio content
+
+
+
+
+
+
+
+ Library
+
+
+
+
Library content
+
+
+
+
+
+
+
+ Search
+
+
+
+
Search content
+
+
+
+
+
+
+
+ Listen Now
+
+
+
+ Radio
+
+
+
+ Library
+
+
+
+ Search
+
+
+
+
+
+```
diff --git a/static/usage/v8/tabs/basic/javascript/index_ts.md b/static/usage/v8/tabs/basic/javascript/index_ts.md
new file mode 100644
index 00000000000..2952676d830
--- /dev/null
+++ b/static/usage/v8/tabs/basic/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { library, playCircle, radio, search } from 'ionicons/icons';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'library': library, 'play-circle': playCircle, 'radio': radio, 'search': search });
+ */
+addIcons({ library, playCircle, radio, search });
+
+defineCustomElements();
+```
diff --git a/static/usage/v8/tabs/basic/react/main_css.md b/static/usage/v8/tabs/basic/react/main_css.md
new file mode 100644
index 00000000000..b177722f8cc
--- /dev/null
+++ b/static/usage/v8/tabs/basic/react/main_css.md
@@ -0,0 +1,10 @@
+```css
+/* This style is for demonstration purposes only. */
+/* It's not required for the tabs to function. */
+.example-content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+}
+```
diff --git a/static/usage/v8/tabs/basic/react/main_tsx.md b/static/usage/v8/tabs/basic/react/main_tsx.md
new file mode 100644
index 00000000000..84e01103947
--- /dev/null
+++ b/static/usage/v8/tabs/basic/react/main_tsx.md
@@ -0,0 +1,93 @@
+```tsx
+import React from 'react';
+import {
+ IonTabs,
+ IonTab,
+ IonToolbar,
+ IonTabBar,
+ IonTabButton,
+ IonHeader,
+ IonTitle,
+ IonContent,
+ IonIcon,
+} from '@ionic/react';
+
+import { playCircle, radio, library, search } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+