diff --git a/src/_nav.js b/src/_nav.js
index 3433bdaf..4ac304af 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -100,6 +100,11 @@ export default [
         name: 'Tables',
         to: '/base/tables',
       },
+      {
+        component: 'CNavItem',
+        name: 'Tabs',
+        to: '/base/tabs',
+      },
       {
         component: 'CNavItem',
         name: 'Tooltips',
diff --git a/src/router/index.js b/src/router/index.js
index 948de201..add55d6f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -111,6 +111,11 @@ const routes = [
             name: 'Tables',
             component: () => import('@/views/base/Tables.vue'),
           },
+          {
+            path: '/base/tabs',
+            name: 'Tabs',
+            component: () => import('@/views/base/Tabs.vue'),
+          },
           {
             path: '/base/tooltips',
             name: 'Tooltips',
diff --git a/src/views/base/Tabs.vue b/src/views/base/Tabs.vue
new file mode 100644
index 00000000..0460be0f
--- /dev/null
+++ b/src/views/base/Tabs.vue
@@ -0,0 +1,162 @@
+<template>
+  <CRow>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Tabs</strong>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            The basic Vue tabs example uses the <code>variant=&#34;tabs&#34;</code> props to
+            generate a tabbed interface.
+          </p>
+          <DocsExample href="components/tabs.html#example">
+            <CTabs activeItemKey="profile">
+              <CTabList variant="tabs">
+                <CTab itemKey="home">Home</CTab>
+                <CTab itemKey="profile">Profile</CTab>
+                <CTab itemKey="contact">Contact</CTab>
+                <CTab disabled itemKey="disabled"> Disabled </CTab>
+              </CTabList>
+              <CTabContent>
+                <CTabPanel class="p-3" itemKey="home"> Home tab content </CTabPanel>
+                <CTabPanel class="p-3" itemKey="profile"> Profile tab content </CTabPanel>
+                <CTabPanel class="p-3" itemKey="contact"> Contact tab content </CTabPanel>
+                <CTabPanel class="p-3" itemKey="disabled"> Disabled tab content </CTabPanel>
+              </CTabContent>
+            </CTabs>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader> <strong>Vue Tabs</strong> <small>Unstyled</small> </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            If you don’t provide the <code>variant</code> prop, the component will default to a
+            basic style.
+          </p>
+          <DocsExample href="components/tabs.html#unstyled">
+            <CTabs activeItemKey="profile">
+              <CTabList>
+                <CTab itemKey="home">Home</CTab>
+                <CTab itemKey="profile">Profile</CTab>
+                <CTab itemKey="contact">Contact</CTab>
+                <CTab disabled itemKey="disabled"> Disabled </CTab>
+              </CTabList>
+              <CTabContent>
+                <CTabPanel class="p-3" itemKey="home"> Home tab content </CTabPanel>
+                <CTabPanel class="p-3" itemKey="profile"> Profile tab content </CTabPanel>
+                <CTabPanel class="p-3" itemKey="contact"> Contact tab content </CTabPanel>
+                <CTabPanel class="p-3" itemKey="disabled"> Disabled tab content </CTabPanel>
+              </CTabContent>
+            </CTabs>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader> <strong>Vue Tabs</strong> <small>Pills</small> </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            Take that same code, but use <code>variant=&#34;pills&#34;</code> instead:
+          </p>
+          <DocsExample href="components/tabs.html#unstyled">
+            <CTabs :activeItemKey="2">
+              <CTabList variant="pills">
+                <CTab aria-controls="home-tab-pane" :itemKey="1"> Home </CTab>
+                <CTab aria-controls="profile-tab-pane" :itemKey="2"> Profile </CTab>
+                <CTab aria-controls="contact-tab-pane" :itemKey="3"> Contact </CTab>
+                <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4"> Disabled </CTab>
+              </CTabList>
+              <CTabContent>
+                <CTabPanel class="p-3" aria-labelledby="home-tab-pane" :itemKey="1">
+                  Home tab content
+                </CTabPanel>
+                <CTabPanel class="p-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+                  Profile tab content
+                </CTabPanel>
+                <CTabPanel class="p-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+                  Contact tab content
+                </CTabPanel>
+                <CTabPanel class="p-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+                  Disabled tab content
+                </CTabPanel>
+              </CTabContent>
+            </CTabs>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader> <strong>Vue Tabs</strong> <small>Underline</small> </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            Take that same code, but use <code>variant=&#34;underline&#34;</code> instead:
+          </p>
+          <DocsExample href="components/tabs.html#unstyled">
+            <CTabs :activeItemKey="2">
+              <CTabList variant="underline">
+                <CTab aria-controls="home-tab-pane" :itemKey="1"> Home </CTab>
+                <CTab aria-controls="profile-tab-pane" :itemKey="2"> Profile </CTab>
+                <CTab aria-controls="contact-tab-pane" :itemKey="3"> Contact </CTab>
+                <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4"> Disabled </CTab>
+              </CTabList>
+              <CTabContent>
+                <CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+                  Home tab content
+                </CTabPanel>
+                <CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+                  Profile tab content
+                </CTabPanel>
+                <CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+                  Contact tab content
+                </CTabPanel>
+                <CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+                  Disabled tab content
+                </CTabPanel>
+              </CTabContent>
+            </CTabs>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader> <strong>Vue Tabs</strong> <small>Underline border</small> </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            Take that same code, but use <code>variant=&#34;underline-border&#34;</code> instead:
+          </p>
+          <DocsExample href="components/tabs.html#unstyled">
+            <CTabs :activeItemKey="2">
+              <CTabList variant="underline-border">
+                <CTab aria-controls="home-tab-pane" :itemKey="1"> Home </CTab>
+                <CTab aria-controls="profile-tab-pane" :itemKey="2"> Profile </CTab>
+                <CTab aria-controls="contact-tab-pane" :itemKey="3"> Contact </CTab>
+                <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4"> Disabled </CTab>
+              </CTabList>
+              <CTabContent>
+                <CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+                  Home tab content
+                </CTabPanel>
+                <CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+                  Profile tab content
+                </CTabPanel>
+                <CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+                  Contact tab content
+                </CTabPanel>
+                <CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+                  Disabled tab content
+                </CTabPanel>
+              </CTabContent>
+            </CTabs>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
+</template>