diff --git a/.changeset/css-no-scollbar.md b/.changeset/css-no-scollbar.md
new file mode 100644
index 000000000..b48452c49
--- /dev/null
+++ b/.changeset/css-no-scollbar.md
@@ -0,0 +1,5 @@
+---
+'@cypress-design/css': minor
+---
+
+add the no-scrollbar utillity class
diff --git a/.changeset/overflowing-tabs.md b/.changeset/overflowing-tabs.md
new file mode 100644
index 000000000..633e5d6b1
--- /dev/null
+++ b/.changeset/overflowing-tabs.md
@@ -0,0 +1,7 @@
+---
+'@cypress-design/constants-tabs': minor
+'@cypress-design/react-tabs': minor
+'@cypress-design/vue-tabs': minor
+---
+
+manage the overflowing of tabs
diff --git a/components/Tabs/assertions.ts b/components/Tabs/assertions.ts
index 9d4e369dc..e01e5a661 100644
--- a/components/Tabs/assertions.ts
+++ b/components/Tabs/assertions.ts
@@ -6,7 +6,29 @@ const tabs = [
   { id: 'ov', label: 'Overview' },
   { id: 'cl', label: 'Command Log' },
   { id: 'err', label: 'Errors' },
-  { id: 'reco', label: 'Recommendations' },
+  { id: 'reco', label: 'Recommend' },
+]
+
+const longTabs = [
+  { id: 'ov1', label: 'Overview' },
+  { id: 'cl1', label: 'Command Log' },
+  { id: 'err1', label: 'Errors' },
+  { id: 'o', label: 'o' },
+  { id: 'd', label: 'd' },
+  { id: 's', label: 's' },
+  { id: 'reco1', label: 'Recommendations' },
+  { id: 'ov2', label: 'Overview 1' },
+  { id: 'cl2', label: 'Command Log 1' },
+  { id: 'err2', label: 'Errors 1' },
+  { id: 'reco2', label: 'Recommendations 1' },
+  { id: 'ov3', label: 'Overview 2', active: true },
+  { id: 'cl3', label: 'Command Log 2' },
+  { id: 'err3', label: 'Errors 2' },
+  { id: 'reco3', label: 'Recommendations 2' },
+  { id: 'ov4', label: 'Overview 3' },
+  { id: 'cl4', label: 'Command Log 3' },
+  { id: 'err4', label: 'Errors 3' },
+  { id: 'reco4', label: 'Recommendations 3' },
 ]
 
 export default function assertions(
@@ -42,5 +64,47 @@ export default function assertions(
         })
       })
     })
+
+    describe('overflowing tabs', () => {
+      it(
+        'displays ellipsis when tabs are overflowing',
+        { viewportHeight: 500 },
+        () => {
+          mountStory({
+            tabs: longTabs,
+            // variant: 'underline-small',
+          })
+          cy.findByText('Show more tabs').should('exist')
+        }
+      )
+
+      it(
+        'displays ellipsis as active tab when tabs are overflowing',
+        { viewportHeight: 500 },
+        () => {
+          mountStory({
+            tabs: longTabs,
+            // variant: 'underline-small',
+          })
+          cy.contains('button', 'Show more tabs').should(
+            'have.attr',
+            'aria-selected'
+          )
+        }
+      )
+
+      it(
+        'displays active tab when tabs are overflowing',
+        { viewportHeight: 500 },
+        () => {
+          mountStory({
+            tabs: longTabs,
+            // variant: 'underline-small',
+          })
+          cy.findByText('Show more tabs').click({ force: true })
+          cy.findByText('Overview').click()
+        }
+      )
+    })
   })
 }
diff --git a/components/Tabs/constants/src/index.ts b/components/Tabs/constants/src/index.ts
index 52525ec32..cf789ecbb 100644
--- a/components/Tabs/constants/src/index.ts
+++ b/components/Tabs/constants/src/index.ts
@@ -35,6 +35,9 @@ export interface Tab {
   href?: string
 }
 
+export const overflowContainerClass =
+  'overflow-x-auto overflow-y-hidden no-scrollbar px-[1px] pb-[4px]'
+
 export const variants = {
   default: {
     classes: {
@@ -110,7 +113,7 @@ export const variants = {
   'underline-small': {
     classes: {
       wrapper:
-        'py-[4px] flex gap-[8px] border-b border-gray-100 text-gray-700 dark:text-white relative',
+        'py-[4px] inline-flex gap-[8px] border-b border-gray-100 text-gray-700 dark:text-white relative',
       button:
         'flex items-center px-[12px] h-[24px] leading-[20px] text-[14px] rounded font-medium whitespace-nowrap relative',
       active: 'text-gray-900 dark:text-gray-400 z-20',
@@ -134,7 +137,7 @@ export const variants = {
   'underline-large': {
     classes: {
       wrapper:
-        'py-[4px] flex gap-[8px] border-b border-gray-100 text-gray-700 dark:text-white relative',
+        'py-[4px] inline-flex gap-[8px] border-b border-gray-100 text-gray-700 dark:text-white relative',
       button:
         'flex items-center px-[12px] h-[32px] leading-[24px] text-[16px] rounded font-medium whitespace-nowrap relative',
       active: 'text-gray-900 dark:text-gray-400 z-20',
diff --git a/components/Tabs/react/Tabs.tsx b/components/Tabs/react/Tabs.tsx
index 3741ad20e..80ee8e26d 100644
--- a/components/Tabs/react/Tabs.tsx
+++ b/components/Tabs/react/Tabs.tsx
@@ -1,6 +1,10 @@
 import * as React from 'react'
 import clsx from 'clsx'
-import { Tab, variants } from '@cypress-design/constants-tabs'
+import {
+  Tab,
+  overflowContainerClass,
+  variants,
+} from '@cypress-design/constants-tabs'
 
 export interface TabsProps {
   /**
@@ -41,6 +45,7 @@ export const Tabs: React.FC<TabsProps & React.HTMLProps<HTMLDivElement>> = ({
   }, [activeIdProp])
 
   const $tab = React.useRef<(HTMLButtonElement | HTMLAnchorElement)[]>([])
+  const $overflowContainer = React.useRef<HTMLDivElement>(null)
 
   const [activeMarkerStyle, setActiveMarkerStyle] = React.useState<{
     left?: string
@@ -48,21 +53,44 @@ export const Tabs: React.FC<TabsProps & React.HTMLProps<HTMLDivElement>> = ({
     transitionProperty?: string
   }>({})
 
-  React.useEffect(() => {
+  function getActiveTabEl() {
     const activeTab = tabs.findIndex((tab) => tab.id === activeId)
     if (activeTab > -1) {
       const activeTabEl = $tab.current?.[activeTab]
       if (activeTabEl) {
-        setActiveMarkerStyle({
-          left: `${activeTabEl.offsetLeft}px`,
-          width: `${activeTabEl.offsetWidth}px`,
-          transitionProperty: 'left, width',
-        })
+        return activeTabEl
       }
     }
+    return null
+  }
+
+  React.useEffect(() => {
+    const activeTabEl = getActiveTabEl()
+    if (activeTabEl) {
+      setActiveMarkerStyle({
+        left: `${activeTabEl.offsetLeft}px`,
+        width: `${activeTabEl.offsetWidth}px`,
+        transitionProperty: 'left, width',
+      })
+    }
     setMounted(true)
   }, [activeId])
 
+  React.useEffect(() => {
+    const activeTabEl = getActiveTabEl()
+    if ($overflowContainer.current && activeTabEl) {
+      // Scroll to active tab if it is not visible
+      const leftBoundary =
+        $overflowContainer.current.offsetWidth / 2 - activeTabEl.offsetWidth / 2
+
+      if (activeTabEl.offsetLeft > leftBoundary) {
+        $overflowContainer.current.scrollTo({
+          left: activeTabEl.offsetLeft - leftBoundary,
+        })
+      }
+    }
+  }, [])
+
   function navigate(shift: number) {
     const shiftedIndex = tabs.findIndex((tab) => tab.id === activeId) + shift
     const nextIndex =
@@ -83,69 +111,71 @@ export const Tabs: React.FC<TabsProps & React.HTMLProps<HTMLDivElement>> = ({
     variant in variants ? variants[variant].icon : variants.default.icon
 
   return (
-    <div role="tablist" className={classes.wrapper} {...rest}>
-      {tabs.map((tab, index) => {
-        const ButtonTag = tab.href ? 'a' : 'button'
-        return (
-          <ButtonTag
-            key={tab.id}
-            role="tab"
-            href={tab.href}
-            className={clsx([
-              classes.button,
-              {
-                [classes.activeStatic]: tab.id === activeId && !mounted,
-                [classes.active]: tab.id === activeId,
-                [classes.inActive]: tab.id !== activeId,
-              },
-            ])}
-            // @ts-expect-error React is incapable of typing this kind of ref so we do not add a type
-            ref={(el) => (el ? ($tab.current[index] = el) : null)}
-            tabIndex={tab.id === activeId ? undefined : -1}
-            aria-selected={tab.id === activeId ? true : undefined}
-            onClick={(e) => {
-              if (e.ctrlKey || e.metaKey) return
-              e.preventDefault()
-              setActiveId(tab.id)
-              onSwitch?.(tab)
-            }}
-            onKeyUp={(e) => {
-              if (e.key === 'ArrowRight') {
-                navigate(1)
-              } else if (e.key === 'ArrowLeft') {
-                navigate(-1)
-              }
-            }}
-          >
-            <>
-              {(() => {
-                const IconBefore = tab.iconBefore ?? tab.icon
-                return IconBefore ? (
-                  <IconBefore {...iconProps} className="mr-[8px]" />
-                ) : null
-              })()}
-              {tab.label}
-              {tab.tag ? <div className={classes.tag}>{tab.tag}</div> : null}
-              {tab.iconAfter ? (
-                <tab.iconAfter {...iconProps} className="ml-[8px]" />
+    <div ref={$overflowContainer} className={overflowContainerClass}>
+      <div role="tablist" className={classes.wrapper} {...rest}>
+        {tabs.map((tab, index) => {
+          const ButtonTag = tab.href ? 'a' : 'button'
+          return (
+            <ButtonTag
+              key={tab.id}
+              role="tab"
+              href={tab.href}
+              className={clsx([
+                classes.button,
+                {
+                  [classes.activeStatic]: tab.id === activeId && !mounted,
+                  [classes.active]: tab.id === activeId,
+                  [classes.inActive]: tab.id !== activeId,
+                },
+              ])}
+              // @ts-expect-error React is incapable of typing this kind of ref so we do not add a type
+              ref={(el) => (el ? ($tab.current[index] = el) : null)}
+              tabIndex={tab.id === activeId ? undefined : -1}
+              aria-selected={tab.id === activeId ? true : undefined}
+              onClick={(e) => {
+                if (e.ctrlKey || e.metaKey) return
+                e.preventDefault()
+                setActiveId(tab.id)
+                onSwitch?.(tab)
+              }}
+              onKeyUp={(e) => {
+                if (e.key === 'ArrowRight') {
+                  navigate(1)
+                } else if (e.key === 'ArrowLeft') {
+                  navigate(-1)
+                }
+              }}
+            >
+              <>
+                {(() => {
+                  const IconBefore = tab.iconBefore ?? tab.icon
+                  return IconBefore ? (
+                    <IconBefore {...iconProps} className="mr-[8px]" />
+                  ) : null
+                })()}
+                {tab.label}
+                {tab.tag ? <div className={classes.tag}>{tab.tag}</div> : null}
+                {tab.iconAfter ? (
+                  <tab.iconAfter {...iconProps} className="ml-[8px]" />
+                ) : null}
+              </>
+              {tab.id === activeId && !activeMarkerStyle.left ? (
+                <div className={classes.activeMarkerStatic} />
               ) : null}
-            </>
-            {tab.id === activeId && !activeMarkerStyle.left ? (
-              <div className={classes.activeMarkerStatic} />
-            ) : null}
-          </ButtonTag>
-        )
-      })}
-      <div
-        key="active-marker"
-        className={clsx(classes.activeMarker, classes.activeMarkerColor)}
-        style={activeMarkerStyle}
-      />
-      <div
-        key="active-marker-blend"
-        className={clsx(classes.activeMarker, classes.activeMarkerBlender)}
-        style={activeMarkerStyle}
-      />
+            </ButtonTag>
+          )
+        })}
+        <div
+          key="active-marker"
+          className={clsx(classes.activeMarker, classes.activeMarkerColor)}
+          style={activeMarkerStyle}
+        />
+        <div
+          key="active-marker-blend"
+          className={clsx(classes.activeMarker, classes.activeMarkerBlender)}
+          style={activeMarkerStyle}
+        />
+      </div>
     </div>
   )
 }
diff --git a/components/Tabs/vue/Tabs.vue b/components/Tabs/vue/Tabs.vue
index 5741cfc5e..89b114d6d 100644
--- a/components/Tabs/vue/Tabs.vue
+++ b/components/Tabs/vue/Tabs.vue
@@ -1,13 +1,29 @@
 <script lang="ts" setup>
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
-import { Tab, variants } from '@cypress-design/constants-tabs'
+import {
+  computed,
+  nextTick,
+  onBeforeMount,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+} from 'vue'
+import {
+  Tab as TabConfig,
+  variants,
+  overflowContainerClass,
+} from '@cypress-design/constants-tabs'
+import useTooltips from '@cypress-design/place-floating-vue'
+import { IconMenuDotsVertical } from '@cypress-design/vue-icon'
+import { onClickOutside } from '@vueuse/core'
+import Tab from './_Tab.vue'
 
 const props = withDefaults(
   defineProps<{
     /**
      * The tabs to display
      */
-    tabs: Tab[]
+    tabs: TabConfig[]
     /**
      * The active tab
      */
@@ -22,14 +38,18 @@ const props = withDefaults(
   }
 )
 
-const $tab = ref<HTMLButtonElement[]>()
+const $tab = ref<(typeof Tab)[]>()
+const $overflowContainer = ref<HTMLDivElement | null>(null)
+const $overflowButton = ref<HTMLButtonElement | null>(null)
+const $overflowMenu = ref<HTMLDivElement | null>(null)
+const $arrowRef = ref<HTMLElement | null>(null)
 
 const emit = defineEmits<{
   /**
    * A tab is changed
    * @param tab new tab selected
    */
-  (event: 'switch', tab: Tab): void
+  (event: 'switch', tab: TabConfig): void
   (event: 'update:activeId', tab: string): void
 }>()
 
@@ -43,17 +63,78 @@ watch(
 )
 
 const activeMarkerStyle = ref<
-  { left?: string; width?: string; transitionProperty?: string } | undefined
+  | {
+      left?: string
+      width?: string
+      transitionProperty?: string
+    }
+  | undefined
 >()
 
+const activeTab = computed(() => {
+  const activeIndex = props.tabs.findIndex((tab) => tab.id === activeId.value)
+  if (activeIndex > -1) {
+    const activeTab = $tab.value?.[activeIndex]?.$el as HTMLElement
+    return activeTab
+  }
+})
+
+const activeIndex = computed(() =>
+  props.tabs.findIndex((tab) => tab.id === activeId.value)
+)
+
+const firstVisibleIndex = ref(10000)
+
+function calcFirstVisibleTabIndex() {
+  if ($tab.value) {
+    // find the index of the first element
+    // visible in the overflow container
+    const containerRect = $overflowContainer.value?.getBoundingClientRect()
+    const cloneTabReversed = [...$tab.value].reverse()
+    const reverseIndex = cloneTabReversed.findIndex((tab) => {
+      return tab.$el.getBoundingClientRect().right < (containerRect?.right ?? 0)
+    })
+    firstVisibleIndex.value = props.tabs.length - reverseIndex
+  }
+}
+
+onUnmounted(() => {
+  window.removeEventListener('resize', calcFirstVisibleTabIndex)
+})
+
 onMounted(() => {
+  calcFirstVisibleTabIndex()
+
+  window.addEventListener('resize', calcFirstVisibleTabIndex)
+
+  watch(
+    () => props.tabs,
+    () => {
+      calcFirstVisibleTabIndex()
+    },
+    { deep: true }
+  )
+
   watch(
-    activeId,
-    (id) => {
-      const activeIndex = props.tabs.findIndex((tab) => tab.id === id)
-      if (activeIndex > -1) {
-        const activeTab = $tab.value?.[activeIndex]
-        if (activeTab) {
+    activeTab,
+    (activeTab) => {
+      if (activeTab) {
+        // get active tab index
+
+        if (activeIndex.value >= firstVisibleIndex.value) {
+          // we need to wait for the button to appear
+          // before knowing its position
+          nextTick(() => {
+            const activeButton = $overflowButton.value
+            if (activeButton) {
+              activeMarkerStyle.value = {
+                ...activeMarkerStyle.value,
+                left: `${activeButton.offsetLeft}px`,
+                width: `${activeButton.offsetWidth}px`,
+              }
+            }
+          })
+        } else {
           activeMarkerStyle.value = {
             ...activeMarkerStyle.value,
             left: `${activeTab.offsetLeft}px`,
@@ -74,6 +155,28 @@ onMounted(() => {
   })
 })
 
+const {
+  placeTooltip,
+  show: showOverflowMenu,
+  arrowStyle,
+  tooltipStyle,
+  positionComputed,
+} = useTooltips({
+  reference: $overflowButton,
+  tooltip: $overflowMenu,
+  arrowRef: $arrowRef,
+  props: {
+    placement: 'bottom-end',
+  },
+})
+
+const boxStyle = computed(() => {
+  return showOverflowMenu.value ? tooltipStyle.value : { top: '-9999px' }
+})
+
+const visibleTabs = computed(() => props.tabs.slice(0, firstVisibleIndex.value))
+const dropdownTabs = computed(() => props.tabs.slice(firstVisibleIndex.value))
+
 function navigate(shift: number) {
   const shiftedIndex =
     props.tabs.findIndex((tab) => tab.id === activeId.value) + shift
@@ -84,7 +187,7 @@ function navigate(shift: number) {
       ? 0
       : shiftedIndex
   activeId.value = props.tabs[nextIndex].id
-  $tab.value?.[nextIndex]?.focus()
+  $tab.value?.[nextIndex]?.$el.focus()
   emit('update:activeId', props.tabs[nextIndex].id)
   emit('switch', props.tabs[nextIndex])
 }
@@ -102,66 +205,136 @@ const iconProps = computed(() => {
   }
   return variants.default.icon
 })
+
+onBeforeMount(async () => {
+  await getTarget()
+})
+
+async function getTarget() {
+  let portalTargetLocal = document.getElementById('portal-target')
+  if (!portalTargetLocal) {
+    portalTargetLocal = document.createElement('div')
+    portalTargetLocal.id = 'portal-target'
+    portalTargetLocal.style.position = 'absolute'
+    portalTargetLocal.style.top = '0'
+    portalTargetLocal.style.left = '0'
+    portalTargetLocal.style.zIndex = '10000'
+    document.body.appendChild(portalTargetLocal)
+  }
+}
+
+// on click outside of overflow menu, close it
+onClickOutside($overflowMenu, () => {
+  showOverflowMenu.value = false
+})
 </script>
 
 <template>
-  <div role="tablist" :class="classes.wrapper">
-    <component
-      v-for="tab in tabs"
-      :key="tab.id"
-      :is="tab.href ? 'a' : 'button'"
-      :href="tab.href"
-      ref="$tab"
-      role="tab"
-      :tabindex="tab.id === activeId ? undefined : -1"
-      :aria-selected="tab.id === activeId ? true : undefined"
-      :class="[
-        classes.button,
-        {
-          [classes.activeStatic]: tab.id === activeId && !activeMarkerStyle,
-          [classes.active]: tab.id === activeId,
-          [classes.inActive]: tab.id !== activeId,
-        },
-      ]"
-      @click="
+  <div ref="$overflowContainer" :class="overflowContainerClass">
+    <div role="tablist" :class="classes.wrapper">
+      <Tab
+        v-for="tab in visibleTabs"
+        :key="tab.id"
+        ref="$tab"
+        :iconProps="iconProps"
+        :activeMarkerStyle="!!activeMarkerStyle"
+        :classes="classes"
+        :tab="tab"
+        :activeId="activeId"
+        @back="navigate(-1)"
+        @forward="navigate(1)"
+        @click="
         (e: MouseEvent) => {
           if(e.ctrlKey || e.metaKey) return
           e.preventDefault()
           activeId = tab.id
           emit('switch', tab)
-        }
-      "
-      @keyup.left="navigate(-1)"
-      @keyup.right="navigate(1)"
-    >
-      <component
-        v-if="tab.iconBefore ?? tab.icon"
-        :is="tab.iconBefore ?? tab.icon"
-        v-bind="iconProps"
-        class="mr-[8px]"
-      />
-      {{ tab.label }}
-      <div v-if="tab.tag" :class="classes.tag">{{ tab.tag }}</div>
-      <component
-        v-if="tab.iconAfter"
-        :is="tab.iconAfter"
-        v-bind="iconProps"
-        class="ml-[8px]"
-      />
-      <div
-        v-if="tab.id === activeId && !activeMarkerStyle"
-        :class="classes.activeMarkerStatic"
-      />
-    </component>
-    <template v-if="activeMarkerStyle">
-      <div
-        :class="[classes.activeMarker, classes.activeMarkerColor]"
-        :style="activeMarkerStyle"
+        }"
       />
+      <button
+        v-if="firstVisibleIndex < tabs.length - 1"
+        ref="$overflowButton"
+        :class="[
+          'w-[24px] h-[24px] flex items-center justify-center rounded',
+          {
+            [classes.inActive]: activeIndex <= firstVisibleIndex,
+            [classes.active]: activeIndex > firstVisibleIndex,
+          },
+        ]"
+        :aria-selected="activeIndex > firstVisibleIndex"
+        @click="placeTooltip()"
+      >
+        <IconMenuDotsVertical />
+        <span class="sr-only">Show more tabs</span>
+      </button>
+
+      <template v-if="activeMarkerStyle">
+        <div
+          :class="[classes.activeMarker, classes.activeMarkerColor]"
+          :style="activeMarkerStyle"
+        />
+        <div
+          :class="[classes.activeMarker, classes.activeMarkerBlender]"
+          :style="activeMarkerStyle"
+        />
+      </template>
+    </div>
+    <teleport v-if="firstVisibleIndex < tabs.length - 1" to="#portal-target">
       <div
-        :class="[classes.activeMarker, classes.activeMarkerBlender]"
-        :style="activeMarkerStyle"
-      />
-    </template>
+        ref="$overflowMenu"
+        class="min-w-[250px] absolute"
+        :class="{
+          '-top-[10000px] invisible': !showOverflowMenu,
+          'top-0 visible': showOverflowMenu,
+        }"
+        :style="boxStyle"
+      >
+        <svg
+          ref="$arrowRef"
+          viewBox="0 0 48 24"
+          width="24"
+          height="12"
+          class="absolute z-10 stroke-gray-100 fill-white"
+          :style="arrowStyle"
+          fill="none"
+        >
+          <rect
+            x="0"
+            y="-4"
+            width="48"
+            height="8"
+            stroke-width="0"
+            stroke-color="red"
+          />
+          <path
+            d="M 0 3 C 12 3 18 18 24 18 C 30 18 36 3 48 3"
+            stroke-width="2"
+          />
+        </svg>
+        <div class="border border-gray-100 rounded bg-white shadow-lg">
+          <button
+            v-for="tab in dropdownTabs"
+            class="block px-[16px] py-[8px] relative"
+            @click="
+            (e: MouseEvent) => {
+              // if user wants to open tab in new window, 
+              // avoid switching tabs on the current page
+              if(e.ctrlKey || e.metaKey) return
+              // else switch tabs and avoid page reload
+              e.preventDefault()
+              activeId = tab.id
+              emit('switch', tab)
+            }"
+          >
+            {{ tab.label }}
+
+            <div
+              v-if="tab.id === activeId"
+              :class="classes.activeMarkerStatic"
+            />
+          </button>
+        </div>
+      </div>
+    </teleport>
   </div>
 </template>
diff --git a/components/Tabs/vue/_Tab.vue b/components/Tabs/vue/_Tab.vue
new file mode 100644
index 000000000..457adfe21
--- /dev/null
+++ b/components/Tabs/vue/_Tab.vue
@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import { Tab, variants } from '@cypress-design/constants-tabs'
+
+type ValueOf<T> = T[keyof T]
+
+defineProps<{
+  tab: Tab
+  activeId: string | undefined
+  classes: ValueOf<typeof variants>['classes']
+  iconProps: ValueOf<typeof variants>['icon']
+  activeMarkerStyle: boolean
+}>()
+
+const emit = defineEmits<{
+  (event: 'back'): void
+  (event: 'forward'): void
+  (event: 'click', e: MouseEvent): void
+}>()
+</script>
+
+<template>
+  <component
+    :key="tab.id"
+    :is="tab.href ? 'a' : 'button'"
+    :href="tab.href"
+    ref="$tab"
+    role="tab"
+    :tabindex="tab.id === activeId ? undefined : -1"
+    :aria-selected="tab.id === activeId ? true : undefined"
+    :class="[
+      classes.button,
+      {
+        [classes.activeStatic]: tab.id === activeId && !activeMarkerStyle,
+        [classes.active]: tab.id === activeId,
+        [classes.inActive]: tab.id !== activeId,
+      },
+    ]"
+    @click="(e: MouseEvent) => emit('click', e)"
+    @keyup.left="emit('back')"
+    @keyup.right="emit('forward')"
+  >
+    <component
+      v-if="tab.iconBefore ?? tab.icon"
+      :is="tab.iconBefore ?? tab.icon"
+      v-bind="iconProps"
+      class="mr-[8px]"
+    />
+    {{ tab.label }}
+    <div v-if="tab.tag" :class="classes.tag">{{ tab.tag }}</div>
+    <component
+      v-if="tab.iconAfter"
+      :is="tab.iconAfter"
+      v-bind="iconProps"
+      class="ml-[8px]"
+    />
+    <div
+      v-if="tab.id === activeId && !activeMarkerStyle"
+      :class="classes.activeMarkerStatic"
+    />
+  </component>
+</template>
diff --git a/components/Tabs/vue/package.json b/components/Tabs/vue/package.json
index 51496641a..d2e6e9f59 100644
--- a/components/Tabs/vue/package.json
+++ b/components/Tabs/vue/package.json
@@ -20,10 +20,12 @@
     "build:types": "yarn vue-tsc --project ./tsconfig.build.json"
   },
   "dependencies": {
-    "@cypress-design/constants-tabs": "*"
+    "@cypress-design/constants-tabs": "*",
+    "@cypress-design/place-floating-vue": "*"
   },
   "devDependencies": {
-    "@cypress-design/rollup-plugin-tailwind-keep": "*"
+    "@cypress-design/rollup-plugin-tailwind-keep": "*",
+    "@vueuse/core": "*"
   },
   "license": "MIT"
 }
\ No newline at end of file
diff --git a/components/Tag/react/Tag.cy.tsx b/components/Tag/react/Tag.cy.tsx
deleted file mode 100644
index eb9c591c2..000000000
--- a/components/Tag/react/Tag.cy.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-/// <reference types="cypress" />
-
-import * as React from 'react'
-import { mount } from 'cypress/react18'
-import TagStory from './Tag.rootstory'
-import assertions from '../assertions'
-
-describe('Tag', () => {
-  function mountStory() {
-    mount(<TagStory />)
-  }
-  assertions(mountStory)
-})
diff --git a/components/Tag/react/Tag.rootstory.tsx b/components/Tag/react/TagReact.cy.tsx
similarity index 73%
rename from components/Tag/react/Tag.rootstory.tsx
rename to components/Tag/react/TagReact.cy.tsx
index 4b8fc9a06..9b3c44d8b 100644
--- a/components/Tag/react/Tag.rootstory.tsx
+++ b/components/Tag/react/TagReact.cy.tsx
@@ -1,18 +1,15 @@
-import clsx from 'clsx'
-import Tag from './Tag'
+/// <reference types="cypress" />
+
 import * as React from 'react'
-import { SizeClasses, ColorClasses } from '../constants'
+import { mount } from 'cypress/react18'
+import assertions from '../assertions'
 
-export default () => (
+const TagStory = () => (
   <div className="flex flex-row flex-wrap items-start justify-center bg-gray-700 gap-6">
     {(Object.keys(SizeClasses) as Array<keyof typeof SizeClasses>).map(
       (size) => {
         return (
-          <div
-            className={clsx(
-              'flex flex-col items-center gap-3 justify-center my-4 p-4 bg-white rounded-lg'
-            )}
-          >
+          <div className="flex flex-col items-center gap-3 justify-center my-4 p-4 bg-white rounded-lg">
             <h3 className="text-right">{size}</h3>
             {(
               Object.keys(ColorClasses) as Array<keyof typeof ColorClasses>
@@ -38,3 +35,10 @@ export default () => (
     )}
   </div>
 )
+
+describe('Tag', () => {
+  function mountStory() {
+    mount(<TagStory />)
+  }
+  assertions(mountStory)
+})
diff --git a/components/Tag/vue/Tag.cy.tsx b/components/Tag/vue/Tag.cy.tsx
deleted file mode 100644
index cd3ee4825..000000000
--- a/components/Tag/vue/Tag.cy.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-/// <reference types="cypress" />
-import { mount } from 'cypress/vue'
-import assertions from '../assertions'
-import TagStory from './Tag.rootstory'
-
-describe('<Tag/>', () => {
-  function mountStory() {
-    mount(() => <TagStory />)
-  }
-  assertions(mountStory)
-})
diff --git a/components/Tag/vue/Tag.rootstory.tsx b/components/Tag/vue/TagVue.cy.tsx
similarity index 69%
rename from components/Tag/vue/Tag.rootstory.tsx
rename to components/Tag/vue/TagVue.cy.tsx
index 7d5201bd8..5434e07df 100644
--- a/components/Tag/vue/Tag.rootstory.tsx
+++ b/components/Tag/vue/TagVue.cy.tsx
@@ -1,17 +1,15 @@
-import clsx from 'clsx'
+/// <reference types="cypress" />
+import { mount } from 'cypress/vue'
+import { ColorClasses, SizeClasses } from '@cypress-design/constants-tag'
+import assertions from '../assertions'
 import Tag from './Tag.vue'
-import { SizeClasses, ColorClasses } from '../constants'
 
-export default () => (
+const TagStory = () => (
   <div class="flex flex-row flex-wrap items-start justify-center bg-gray-700 gap-6">
     {(Object.keys(SizeClasses) as Array<keyof typeof SizeClasses>).map(
       (size) => {
         return (
-          <div
-            class={clsx(
-              'flex flex-col items-center gap-3 justify-center my-4 p-4 bg-white rounded-lg'
-            )}
-          >
+          <div class="flex flex-col items-center gap-3 justify-center my-4 p-4 bg-white rounded-lg">
             <h3 class="text-right">{size}</h3>
             {(Object.keys(ColorClasses) as Array<keyof typeof ColorClasses>)
               .reverse()
@@ -37,3 +35,10 @@ export default () => (
     )}
   </div>
 )
+
+describe('<Tag/>', () => {
+  function mountStory() {
+    mount(() => <TagStory />)
+  }
+  assertions(mountStory)
+})
diff --git a/components/Tooltip/vue/Tooltip.vue b/components/Tooltip/vue/Tooltip.vue
index ec4f6f4b5..70f3f6021 100644
--- a/components/Tooltip/vue/Tooltip.vue
+++ b/components/Tooltip/vue/Tooltip.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Placement, Side } from '@floating-ui/dom'
-import { computePosition, flip, offset, arrow, shift } from '@floating-ui/dom'
+import type { Placement } from '@floating-ui/dom'
+import useTooltips from '@cypress-design/place-floating-vue'
 import type { Ref } from 'vue'
 import { watch, computed, ref, onBeforeMount, onMounted } from 'vue'
 
@@ -42,25 +42,15 @@ const portalTarget: Ref<HTMLElement | null> = ref(null)
 const reference: Ref<HTMLElement | null> = ref(null)
 const tooltip: Ref<HTMLElement | null> = ref(null)
 const arrowRef: Ref<HTMLElement | null> = ref(null)
-const left = ref(0)
-const top = ref(0)
-const arrowLeft = ref(0)
-const arrowTop = ref(0)
-const arrowRotate = ref(0)
-const arrowXRule: Ref<'left' | 'right'> = ref('left')
-const arrowYRule: Ref<'top' | 'bottom'> = ref('top')
-const positionComputed = ref(false)
-const dropShadowFilter: Ref<string | undefined> = ref(undefined)
-const placementSideFinal = ref(props.placement)
-const show = ref(false)
 const tooltipHovered = ref(false)
 
-const ROTATE_MAP = {
-  bottom: 180,
-  left: 270,
-  top: 0,
-  right: 90,
-} as const
+const { placeTooltip, positionComputed, show, arrowStyle, tooltipStyle } =
+  useTooltips({
+    reference,
+    tooltip,
+    arrowRef,
+    props,
+  })
 
 onBeforeMount(async () => {
   await getTarget()
@@ -102,67 +92,12 @@ const colors = computed(() => {
 watch(
   () => props.interactive,
   () => {
-    if (show.value) {
+    if (show.value && !props.disabled) {
       placeTooltip()
     }
   }
 )
 
-async function placeTooltip() {
-  if (props.disabled || !reference.value || !tooltip.value || !arrowRef.value)
-    return
-
-  const {
-    x,
-    y,
-    placement,
-    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
-  } = await computePosition(reference.value, tooltip.value, {
-    placement: props.placement,
-    middleware: [
-      props.forcePlacement
-        ? {
-            name: 'no-flip',
-            fn: (obj) => obj,
-          }
-        : flip(),
-      offset(props.interactive ? 0 : 16),
-      arrow({ element: arrowRef.value, padding: 24 }),
-      shift({ padding: 16 }),
-    ],
-  })
-  const placementSide = placement.split('-')[0] as Side
-  left.value = x
-  top.value = y
-  arrowRotate.value = ROTATE_MAP[placementSide]
-
-  dropShadowFilter.value =
-    placementSide === 'bottom' || props.color === 'dark'
-      ? 'drop-shadow(0 1px 1px rgba(225, 227, 237, .3))'
-      : 'drop-shadow(0 1px 1px rgba(225, 227, 237, .8))'
-
-  if (arrowX && arrowY) {
-    arrowLeft.value = arrowX
-    arrowTop.value = arrowY
-    arrowXRule.value = 'left'
-    arrowYRule.value = 'top'
-  } else if (arrowX) {
-    arrowLeft.value = arrowX
-    arrowTop.value = props.interactive ? 6 : -10
-    arrowXRule.value = 'left'
-    arrowYRule.value = placementSide === 'top' ? 'bottom' : 'top'
-  } else if (arrowY) {
-    arrowTop.value = arrowY + 4
-    arrowLeft.value = props.interactive ? 0 : -16
-    arrowXRule.value = placementSide === 'left' ? 'right' : 'left'
-    arrowYRule.value = 'top'
-  }
-  positionComputed.value = true
-  placementSideFinal.value = placementSide
-
-  show.value = true
-}
-
 onMounted(() => {
   watch(
     () => props.forceOpen,
@@ -180,8 +115,8 @@ onMounted(() => {
   <div
     v-bind="$attrs"
     ref="reference"
-    @mouseover="placeTooltip"
-    @focus="placeTooltip"
+    @mouseover="props.disabled ? null : placeTooltip()"
+    @focus="props.disabled ? null : placeTooltip()"
     @blur="show = false"
     @mouseout="show = false"
   >
@@ -193,11 +128,7 @@ onMounted(() => {
         @mouseout="tooltipHovered = false"
         role="tooltip"
         ref="tooltip"
-        :style="
-          positionComputed
-            ? `top:${top}px!important;left:${left}px!important;`
-            : undefined
-        "
+        :style="tooltipStyle"
         class="absolute"
         :class="[
           {
@@ -222,11 +153,7 @@ onMounted(() => {
             height="12"
             class="absolute z-10"
             :class="colors.svg"
-            :style="`
-              transform: rotate(${arrowRotate}deg); 
-              filter: ${dropShadowFilter};
-              ${arrowYRule}:${arrowTop}px!important;
-              ${arrowXRule}:${arrowLeft}px!important;`"
+            :style="arrowStyle"
             fill="none"
           >
             <rect
diff --git a/components/Tooltip/vue/package.json b/components/Tooltip/vue/package.json
index 2d1b9f2e5..d901fabbc 100644
--- a/components/Tooltip/vue/package.json
+++ b/components/Tooltip/vue/package.json
@@ -20,7 +20,7 @@
     "build:types": "yarn vue-tsc --project ./tsconfig.build.json"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.4.2"
+    "@cypress-design/place-floating-vue": "*"
   },
   "devDependencies": {
     "@cypress-design/rollup-plugin-tailwind-keep": "*"
diff --git a/css/src/tailwind.config.ts b/css/src/tailwind.config.ts
index e801b7ecd..f7d0855aa 100644
--- a/css/src/tailwind.config.ts
+++ b/css/src/tailwind.config.ts
@@ -45,6 +45,20 @@ export default (fileGlobs: string[] = []) => {
           ':merge(.group):hover &',
         ])
       }),
+      plugin(({ addUtilities }) => {
+        addUtilities({
+          /* Hide scrollbar for Chrome, Safari and Opera */
+          '.no-scrollbar::-webkit-scrollbar': {
+            display: 'none',
+          },
+
+          /* Hide scrollbar for IE, Edge and Firefox */
+          '.no-scrollbar': {
+            '-ms-overflow-style': 'none' /* IE and Edge */,
+            'scrollbar-width': 'none' /* Firefox */,
+          },
+        })
+      }),
     ],
   })
 }
diff --git a/package.json b/package.json
index 37db70491..6c67ed288 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "@cypress-design/vue-icon": "*",
     "@cypress-design/vue-tooltip": "*",
     "@cypress/vite-dev-server": "^5.0.5",
-    "@percy/cli": "1.26.0",
+    "@percy/cli": "1.26.1",
     "@percy/cypress": "3.1.2",
     "@rollup/plugin-commonjs": "^25.0.2",
     "@rollup/plugin-node-resolve": "^15.1.0",
@@ -70,7 +70,7 @@
     "cypress-real-events": "^1.8.1",
     "dedent": "^0.7.0",
     "es-module-lexer": "^1.3.0",
-    "esbuild": "^0.18.6",
+    "esbuild": "^0.18.9",
     "eslint": "^8.43.0",
     "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-no-only-tests": "^3.1.0",
@@ -87,10 +87,10 @@
     "react-dom": "18",
     "react-live-runner": "^1.0.5",
     "rimraf": "^5.0.1",
-    "rollup": "^3.25.1",
+    "rollup": "^3.25.2",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-sourcemaps": "^0.6.3",
-    "turbo": "^1.10.4",
+    "turbo": "^1.10.6",
     "typescript": "5.1.3",
     "universal-cookie": "^4.0.4",
     "vite": "4.3.9",
diff --git a/packages/place-floating-vue/ReadMe.md b/packages/place-floating-vue/ReadMe.md
new file mode 100644
index 000000000..357985fa8
--- /dev/null
+++ b/packages/place-floating-vue/ReadMe.md
@@ -0,0 +1,17 @@
+# place-floating-vue
+
+## Summary
+
+Place a tooltip relative to a reference element.
+
+## Usage
+
+```js
+const { placeTooltip, positionComputed, show, arrowStyle, tooltipStyle } =
+  useTooltips({
+    reference,
+    tooltip,
+    arrowRef,
+    props,
+  })
+```
diff --git a/packages/place-floating-vue/index.ts b/packages/place-floating-vue/index.ts
new file mode 100644
index 000000000..e92ca9f51
--- /dev/null
+++ b/packages/place-floating-vue/index.ts
@@ -0,0 +1,107 @@
+import { Ref, computed, ref } from 'vue'
+import type { Placement, Side } from '@floating-ui/dom'
+import { computePosition, flip, offset, arrow } from '@floating-ui/dom'
+
+const ROTATE_MAP = {
+  bottom: 180,
+  left: 270,
+  top: 0,
+  right: 90,
+} as const
+
+export default function useTooltips({
+  reference,
+  tooltip,
+  arrowRef,
+  props,
+}: {
+  reference: Ref<HTMLElement | null>
+  tooltip: Ref<HTMLElement | null>
+  arrowRef: Ref<HTMLElement | null>
+  props: {
+    placement?: Placement
+    forcePlacement?: boolean
+    interactive?: boolean
+    color?: string
+  }
+}) {
+  const left = ref(0)
+  const top = ref(0)
+  const arrowLeft = ref(0)
+  const arrowTop = ref(0)
+  const arrowRotate = ref(0)
+  const arrowXRule: Ref<'left' | 'right'> = ref('left')
+  const arrowYRule: Ref<'top' | 'bottom'> = ref('top')
+  const dropShadowFilter: Ref<string | undefined> = ref(undefined)
+  const placementSideFinal = ref(props.placement)
+  const positionComputed = ref(false)
+  const show = ref(false)
+
+  async function placeTooltip() {
+    if (!reference.value || !tooltip.value || !arrowRef.value) return
+    const {
+      x,
+      y,
+      placement,
+      middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
+    } = await computePosition(reference.value, tooltip.value, {
+      placement: props.placement,
+      middleware: [
+        props.forcePlacement
+          ? {
+              name: 'no-flip',
+              fn: (obj) => obj,
+            }
+          : flip(),
+        offset(props.interactive ? 0 : 16),
+        arrow({ element: arrowRef.value, padding: 24 }),
+      ],
+    })
+    const placementSide = placement.split('-')[0] as Side
+    left.value = x
+    top.value = y
+    arrowRotate.value = ROTATE_MAP[placementSide]
+
+    dropShadowFilter.value =
+      placementSide === 'bottom' || props.color === 'dark'
+        ? 'drop-shadow(0 1px 1px rgba(225, 227, 237, .3))'
+        : 'drop-shadow(0 1px 1px rgba(225, 227, 237, .8))'
+
+    if (arrowX && arrowY) {
+      arrowLeft.value = arrowX
+      arrowTop.value = arrowY
+      arrowXRule.value = 'left'
+      arrowYRule.value = 'top'
+    } else if (arrowX) {
+      arrowLeft.value = arrowX
+      arrowTop.value = props.interactive ? 6 : -10
+      arrowXRule.value = 'left'
+      arrowYRule.value = placementSide === 'top' ? 'bottom' : 'top'
+    } else if (arrowY) {
+      arrowTop.value = arrowY + 4
+      arrowLeft.value = props.interactive ? 0 : -16
+      arrowXRule.value = placementSide === 'left' ? 'right' : 'left'
+      arrowYRule.value = 'top'
+    }
+    positionComputed.value = true
+    placementSideFinal.value = placementSide
+
+    show.value = true
+  }
+
+  const arrowStyle = computed(
+    () =>
+      `transform: rotate(${arrowRotate.value}deg); 
+       filter: ${dropShadowFilter.value};
+       ${arrowYRule.value}:${arrowTop.value}px!important;
+       ${arrowXRule.value}:${arrowLeft.value}px!important;`
+  )
+
+  const tooltipStyle = computed(() =>
+    positionComputed.value
+      ? { top: `${top.value}px!important`, left: `${left.value}px!important;` }
+      : undefined
+  )
+
+  return { placeTooltip, arrowStyle, tooltipStyle, positionComputed, show }
+}
diff --git a/packages/place-floating-vue/package.json b/packages/place-floating-vue/package.json
new file mode 100644
index 000000000..81921aea6
--- /dev/null
+++ b/packages/place-floating-vue/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@cypress-design/place-floating-vue",
+  "version": "0.1.0",
+  "files": [
+    "*"
+  ],
+  "typings": "./dist/index.d.ts",
+  "module": "./dist/index.es.mjs",
+  "main": "./dist/index.umd.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.mjs",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "scripts": {
+    "build": "yarn build:module && yarn build:types",
+    "build:module": "rollup -c ./rollup.config.mjs",
+    "build:types": "tsc --project ./tsconfig.json"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@floating-ui/dom": "^1.2.9",
+    "vue": "3"
+  }
+}
\ No newline at end of file
diff --git a/packages/place-floating-vue/rollup.config.mjs b/packages/place-floating-vue/rollup.config.mjs
new file mode 100644
index 000000000..16521c157
--- /dev/null
+++ b/packages/place-floating-vue/rollup.config.mjs
@@ -0,0 +1,31 @@
+import commonjs from '@rollup/plugin-commonjs'
+import resolve from '@rollup/plugin-node-resolve'
+import typescript from '@rollup/plugin-typescript'
+
+export default {
+  input: './index.ts',
+  output: [
+    {
+      file: './dist/index.umd.js',
+      format: 'cjs',
+      exports: 'auto',
+      sourcemap: true,
+    },
+    {
+      file: './dist/index.es.mjs',
+      format: 'esm',
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    resolve(),
+    commonjs(),
+    typescript({
+      tsconfig: './tsconfig.json',
+      declaration: false,
+      declarationMap: false,
+      sourceMap: true,
+    }),
+  ],
+  external: ['@floating-ui/dom', 'vue'],
+}
diff --git a/packages/place-floating-vue/tsconfig.json b/packages/place-floating-vue/tsconfig.json
new file mode 100644
index 000000000..510d0f7cd
--- /dev/null
+++ b/packages/place-floating-vue/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "lib": ["es2017", "dom"],
+    "strict": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "outDir": "./dist/"
+  },
+  "include": ["./*.ts"]
+}
diff --git a/yarn.lock b/yarn.lock
index 5cec2a7b6..984b1ae56 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -995,10 +995,10 @@
   dependencies:
     "@floating-ui/core" "^0.7.3"
 
-"@floating-ui/dom@^1.4.2":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.4.2.tgz#eb3a37f7506c4f95ef735967dc3496b5012e11cb"
-  integrity sha512-VKmvHVatWnewmGGy+7Mdy4cTJX71Pli6v/Wjb5RQBuq5wjUYx+Ef+kRThi8qggZqDgD8CogCpqhRoVp3+yQk+g==
+"@floating-ui/dom@^1.2.9":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.4.1.tgz#3dff8b1b429e60d36ce03281a1cc3cd923a8e7fa"
+  integrity sha512-loCXUOLzIC3jp50RFOKXZ/kQjjz26ryr/23M+FWG9jrmAv8lRf3DUfC2AiVZ3+K316GOhB08CR+Povwz8e9mDw==
   dependencies:
     "@floating-ui/core" "^1.3.1"
 
@@ -1951,6 +1951,16 @@
     "@volar/typescript" "1.7.8"
     "@vue/language-core" "1.8.1"
 
+"@vueuse/core@*", "@vueuse/core@10.2.0":
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.2.0.tgz#65cf5222bf0178ff5ddec20a113d7ca6c30481e1"
+  integrity sha512-aHBnoCteIS3hFu7ZZkVB93SanVDY6t4TIb7XDLxJT/HQdAZz+2RdIEJ8rj5LUoEJr7Damb5+sJmtpCwGez5ozQ==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.17"
+    "@vueuse/metadata" "10.2.0"
+    "@vueuse/shared" "10.2.0"
+    vue-demi ">=0.14.5"
+
 "@vueuse/core@10.1.2", "@vueuse/core@^10.1.2":
   version "10.1.2"
   resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.1.2.tgz#2499eadec36c5d7109338e3a2b73725040ae8011"
@@ -1961,16 +1971,6 @@
     "@vueuse/shared" "10.1.2"
     vue-demi ">=0.14.0"
 
-"@vueuse/core@10.2.0":
-  version "10.2.0"
-  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.2.0.tgz#65cf5222bf0178ff5ddec20a113d7ca6c30481e1"
-  integrity sha512-aHBnoCteIS3hFu7ZZkVB93SanVDY6t4TIb7XDLxJT/HQdAZz+2RdIEJ8rj5LUoEJr7Damb5+sJmtpCwGez5ozQ==
-  dependencies:
-    "@types/web-bluetooth" "^0.0.17"
-    "@vueuse/metadata" "10.2.0"
-    "@vueuse/shared" "10.2.0"
-    vue-demi ">=0.14.5"
-
 "@vueuse/integrations@^10.1.2":
   version "10.1.2"
   resolved "https://registry.yarnpkg.com/@vueuse/integrations/-/integrations-10.1.2.tgz#e318ed2cec87711b2a110dceca2150d7fe1452d0"
@@ -8349,7 +8349,7 @@ vue-tsc@^1.8.1:
     "@vue/typescript" "1.8.1"
     semver "^7.3.8"
 
-vue@3.3.4, vue@^3.3.4:
+vue@3, vue@3.3.4, vue@^3.3.4:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.4.tgz#8ed945d3873667df1d0fcf3b2463ada028f88bd6"
   integrity sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==