diff --git a/package-lock.json b/package-lock.json
index 3615cde5..bd72fec4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "license": "MPL-2.0",
       "devDependencies": {
         "@asciidoctor/core": "~2.2",
+        "@asciidoctor/tabs": "1.0.0-beta.6",
         "@fontsource/material-icons-outlined": "~5.0",
         "@fontsource/roboto-flex": "~5.0",
         "@fontsource/roboto-mono": "~5.0",
@@ -91,6 +92,15 @@
         "yarn": ">=1.1.0"
       }
     },
+    "node_modules/@asciidoctor/tabs": {
+      "version": "1.0.0-beta.6",
+      "resolved": "https://registry.npmjs.org/@asciidoctor/tabs/-/tabs-1.0.0-beta.6.tgz",
+      "integrity": "sha512-gGZnW7UfRXnbiyKNd9PpGKtSuD8+DsqaaTSbQ1dHVkZ76NaolLhdQg8RW6/xqN3pX1vWZEcF4e81+Oe9rNRWxg==",
+      "dev": true,
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.21.4",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
@@ -17404,6 +17414,12 @@
         "unxhr": "1.0.1"
       }
     },
+    "@asciidoctor/tabs": {
+      "version": "1.0.0-beta.6",
+      "resolved": "https://registry.npmjs.org/@asciidoctor/tabs/-/tabs-1.0.0-beta.6.tgz",
+      "integrity": "sha512-gGZnW7UfRXnbiyKNd9PpGKtSuD8+DsqaaTSbQ1dHVkZ76NaolLhdQg8RW6/xqN3pX1vWZEcF4e81+Oe9rNRWxg==",
+      "dev": true
+    },
     "@babel/code-frame": {
       "version": "7.21.4",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
diff --git a/package.json b/package.json
index a1300b6b..982670ae 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@fontsource/material-icons-outlined": "~5.0",
     "@fontsource/roboto-flex": "~5.0",
     "@fontsource/roboto-mono": "~5.0",
+    "@asciidoctor/tabs": "1.0.0-beta.6",
     "autoprefixer": "~9.7",
     "browser-pack-flat": "~3.4",
     "browserify": "~16.5",
diff --git a/preview-src/index.adoc b/preview-src/index.adoc
index a26debc6..b4f8eac3 100644
--- a/preview-src/index.adoc
+++ b/preview-src/index.adoc
@@ -455,7 +455,24 @@ Contains more than one block.
 
 === Example: Overflow tabset
 
-[tabs]
+[tabs.overflow]
+======
+Tab Name:: Contents of Tab.
+
+Longer Tab Name::
++
+Contents of Longer Tab.
+
+An Even Longer Tab Name::
++
+Contents of Even Longer Tab.
+
+This Is The Longest Tab Name::
++
+Contents of The Longest Tab.
+======
+
+[tabs.wrapping]
 ======
 Tab Name:: Contents of Tab.
 
diff --git a/preview-src/tux.png b/preview-src/tux.png
new file mode 100644
index 00000000..d846bf2d
Binary files /dev/null and b/preview-src/tux.png differ
diff --git a/preview-src/ui-model.yml b/preview-src/ui-model.yml
index 9dce6d07..2db713ce 100644
--- a/preview-src/ui-model.yml
+++ b/preview-src/ui-model.yml
@@ -1,4 +1,7 @@
 antoraVersion: '1.0.0'
+asciidoc:
+  extensions:
+  - '@asciidoctor/tabs'
 site:
   url: http://localhost:5252
   title: Brand Docs
diff --git a/src/css/vendor/tabs.css b/src/css/vendor/tabs.css
new file mode 100644
index 00000000..7cd6430b
--- /dev/null
+++ b/src/css/vendor/tabs.css
@@ -0,0 +1,56 @@
+@import "@asciidoctor/tabs";
+
+/* Datastax styles */
+
+.tabpanel {
+  padding: var(--ds-space-2) 0;
+  border: none;
+  border-top: 1px solid var(--ds-divider);
+}
+
+.tablist > ul li {
+  background-color: transparent;
+  border: none;
+  font-weight: normal;
+  color: var(--ds-text-primary);
+  padding: var(--ds-space-1) var(--ds-space-1h);
+}
+
+.tablist.ulist > ul li + li {
+  margin: 0;
+}
+
+.tabs .tablist li::after {
+  height: calc(2 / var(--rem-base) * 1rem);
+}
+
+.tabs.is-loading .tablist li:not(:first-child),
+.tabs:not(.is-loading) .tablist li:not(.is-selected) {
+  color: var(--ds-text-tertiary);
+  background-color: transparent;
+}
+
+.tabs.is-loading .tablist li:first-child::after,
+.tabs:not(.is-loading) .tablist li.is-selected::after {
+  background-color: var(--ds-text-primary);
+}
+
+/* overflow tab title */
+.tabs.overflow .tablist > ul li p {
+  max-width: var(--ds-space-15);
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
+/* wrapping tab title */
+.tabs.wrapping .tablist > ul li p {
+  max-width: var(--ds-space-15);
+  display: flex;
+}
+
+.tabs.overflow .tablist > ul,
+.tabs.wrapping .tablist > ul {
+  flex-wrap: nowrap;
+}
diff --git a/src/js/vendor/tabs.bundle.js b/src/js/vendor/tabs.bundle.js
new file mode 100644
index 00000000..8d1016f8
--- /dev/null
+++ b/src/js/vendor/tabs.bundle.js
@@ -0,0 +1 @@
+require('@asciidoctor/tabs')
diff --git a/src/partials/footer-scripts.hbs b/src/partials/footer-scripts.hbs
index b21c0803..118aa726 100644
--- a/src/partials/footer-scripts.hbs
+++ b/src/partials/footer-scripts.hbs
@@ -1,4 +1,5 @@
 <script id="site-script" src="{{{uiRootPath}}}/js/site.js" data-ui-root-path="{{{uiRootPath}}}"></script>
+<script async src="{{{uiRootPath}}}/js/vendor/tabs.js"></script>
 <script async src="{{{uiRootPath}}}/js/vendor/highlight.js"></script>
 
 <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
diff --git a/src/partials/head-styles.hbs b/src/partials/head-styles.hbs
index d6839e54..7335a23e 100644
--- a/src/partials/head-styles.hbs
+++ b/src/partials/head-styles.hbs
@@ -1 +1,2 @@
     <link rel="stylesheet" href="{{{uiRootPath}}}/css/site.css">
+    <link rel="stylesheet" href="{{{uiRootPath}}}/css/vendor/tabs.css">