diff --git a/packages/embla-carousel-docs/src/components/Mdx/Styles/index.ts b/packages/embla-carousel-docs/src/components/Mdx/Styles/index.ts
index 450ff4d84..ed3d230b9 100644
--- a/packages/embla-carousel-docs/src/components/Mdx/Styles/index.ts
+++ b/packages/embla-carousel-docs/src/components/Mdx/Styles/index.ts
@@ -2,7 +2,8 @@ import styled from 'styled-components'
 import { COLORS } from 'consts/themes'
 import { SPACINGS } from 'consts/spacings'
 import { PRISM_HIGHLIGHT_CLASS_NAME } from 'consts/prismHighlight'
-import { TabsWrapper, TabPanel } from 'components/Tabs/Tabs'
+import { TabsWrapper } from 'components/Tabs/Tabs'
+import { TabsPanelWrapper } from 'components/Tabs/TabsPanel'
 import { AdmonitionWrapper, AdmonitionContent } from '../Components/Admonition'
 import { headingStyles } from './heading'
 import { blockquoteStyles } from './blockquote'
@@ -19,7 +20,7 @@ export const MdxStyles = styled.div`
 
   color: ${COLORS.TEXT_BODY};
 
-  ${TabPanel} >,
+  ${TabsPanelWrapper} >,
   ${AdmonitionContent} >,
   > {
     ${listStyles};
@@ -53,13 +54,13 @@ export const MdxStyles = styled.div`
     }
   }
 
-  ${TabPanel} > *:first-child,
+  ${TabsPanelWrapper} > *:first-child,
   ${AdmonitionContent} > *:first-child,
   > *:first-child {
     margin-top: 0;
   }
 
-  ${TabPanel} > *:last-child, 
+  ${TabsPanelWrapper} > *:last-child, 
   ${AdmonitionContent} > *:last-child, 
   > *:last-child {
     margin-bottom: 0;
diff --git a/packages/embla-carousel-docs/src/components/SiteNavigation/SiteNavigationMenuCompact.tsx b/packages/embla-carousel-docs/src/components/SiteNavigation/SiteNavigationMenuCompact.tsx
index a97fc0fd8..d29f6ad4c 100644
--- a/packages/embla-carousel-docs/src/components/SiteNavigation/SiteNavigationMenuCompact.tsx
+++ b/packages/embla-carousel-docs/src/components/SiteNavigation/SiteNavigationMenuCompact.tsx
@@ -7,10 +7,14 @@ import { HEADER_HEIGHT } from 'components/Header/Header'
 import { PAGE_FRAME_SPACING } from 'components/Page/PageFrame'
 import { LAYERS } from 'consts/layers'
 import { BORDER_RADIUSES, BORDER_SIZES } from 'consts/border'
+import { TABS_SITE_NAVIGATION } from 'consts/tabs'
 import { TableOfContents } from 'components/TableOfContents/TableOfContents'
 import { FooterLinks } from 'components/Footer/FooterLinks'
 import { TabsItem } from 'components/Tabs/TabsItem'
-import { Tab, TabList, TabPanel, Tabs } from 'components/Tabs/Tabs'
+import { Tabs } from 'components/Tabs/Tabs'
+import { TabsList } from 'components/Tabs/TabsList'
+import { TabsButtonWrapper } from 'components/Tabs/TabsButton'
+import { TabsPanelWrapper } from 'components/Tabs/TabsPanel'
 import { SiteNavigationSubMenus } from './SiteNavigationSubMenus'
 import { useKeyNavigating } from 'hooks/useKeyNavigating'
 import { useTheme } from 'hooks/useTheme'
@@ -49,7 +53,7 @@ const MenuTabs = styled(Tabs)<{
 }>`
   height: 100%;
 
-  ${TabList} {
+  ${TabsList} {
     height: ${HEADER_HEIGHT};
     z-index: ${LAYERS.STEP * 2};
     position: absolute;
@@ -65,7 +69,7 @@ const MenuTabs = styled(Tabs)<{
     justify-content: center;
   }
 
-  ${TabPanel} {
+  ${TabsPanelWrapper} {
     position: relative;
     height: 100%;
     outline-offset: -${BORDER_SIZES.OUTLINE};
@@ -95,7 +99,7 @@ const MenuTabs = styled(Tabs)<{
     }
   }
 
-  ${Tab} {
+  ${TabsButtonWrapper} {
     flex-grow: 1;
     justify-content: center;
     max-width: calc(${MAX_WIDTH_COMPACT} / 2);
@@ -164,7 +168,7 @@ export const SiteNavigationMenuCompact = () => {
   return (
     <SiteNavigationMenuCompactWrapper>
       <MenuTabs $isKeyNavigating={isKeyNavigating}>
-        <TabsItem label="Main menu" value="main-menu">
+        <TabsItem tab={TABS_SITE_NAVIGATION.TABS.MAIN_MENU}>
           <ScrollArea>
             <ul>
               <SiteNavigationSubMenus />
@@ -185,8 +189,7 @@ export const SiteNavigationMenuCompact = () => {
         </TabsItem>
 
         <TabsItem
-          label="On this page"
-          value="table-of-contents"
+          tab={TABS_SITE_NAVIGATION.TABS.ON_THIS_PAGE}
           disabled={!showTableOfContents}
         >
           <ScrollArea>
diff --git a/packages/embla-carousel-docs/src/components/SiteNavigation/SiteNavigationSubMenu.tsx b/packages/embla-carousel-docs/src/components/SiteNavigation/SiteNavigationSubMenu.tsx
index 3380c124c..1cda40766 100644
--- a/packages/embla-carousel-docs/src/components/SiteNavigation/SiteNavigationSubMenu.tsx
+++ b/packages/embla-carousel-docs/src/components/SiteNavigation/SiteNavigationSubMenu.tsx
@@ -33,7 +33,7 @@ const SiteNavigationSubMenuWrapper = styled.div`
 `
 
 const Toggle = styled(ButtonBare)<{ $isActive: boolean }>`
-  font-weight: ${FONT_WEIGHTS.BOLD};
+  font-weight: ${FONT_WEIGHTS.SEMI_BOLD};
   color: ${COLORS.TEXT_BODY};
   padding: ${ITEM_SPACING} 0 ${ITEM_SPACING}
     calc(${TOGGLE_SVG_SIZE} + ${SPACINGS.TWO});
diff --git a/packages/embla-carousel-docs/src/components/TableOfContents/TableOfContentsMenu.tsx b/packages/embla-carousel-docs/src/components/TableOfContents/TableOfContentsMenu.tsx
index d3fe75432..401cc41f4 100644
--- a/packages/embla-carousel-docs/src/components/TableOfContents/TableOfContentsMenu.tsx
+++ b/packages/embla-carousel-docs/src/components/TableOfContents/TableOfContentsMenu.tsx
@@ -39,7 +39,7 @@ const Heading = styled.div`
   color: ${COLORS.TEXT_BODY};
   padding-top: ${SPACINGS.ONE};
   padding-bottom: ${SPACINGS.TWO};
-  font-weight: ${FONT_WEIGHTS.BOLD};
+  font-weight: ${FONT_WEIGHTS.SEMI_BOLD};
   text-transform: uppercase;
 
   ${MEDIA.COMPACT} {
diff --git a/packages/embla-carousel-docs/src/components/Tabs/Tabs.tsx b/packages/embla-carousel-docs/src/components/Tabs/Tabs.tsx
index c5d737fb2..c7912e1b7 100644
--- a/packages/embla-carousel-docs/src/components/Tabs/Tabs.tsx
+++ b/packages/embla-carousel-docs/src/components/Tabs/Tabs.tsx
@@ -1,128 +1,56 @@
 import React, {
   PropsWithChildren,
   useCallback,
-  useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState
 } from 'react'
 import uniqueId from 'lodash/uniqueId'
-import styled, { css } from 'styled-components'
-import { isTabsItemProps, PropType as TabsItemPropType } from './TabsItem'
-import { BRAND_GRADIENT_BACKGROUND_STYLES } from 'consts/gradients'
-import { MAIN_CONTENT_ID } from 'components/KeyNavigating/KeyNavigatingSkipToContent'
-import { ButtonBare, ButtonBareText } from 'components/Button/ButtonBare'
-import { SPACINGS } from 'consts/spacings'
-import { BORDER_SIZES } from 'consts/border'
-import { COLORS } from 'consts/themes'
-import { KEY_NAVIGATING_STYLES } from 'consts/keyNavigatingStyles'
+import styled from 'styled-components'
 import { useTabs } from 'hooks/useTabs'
 import { useKeyNavigating } from 'hooks/useKeyNavigating'
+import { TabsPanel } from './TabsPanel'
+import { TabsButton } from './TabsButton'
+import { TabsList } from './TabsList'
+import { TabsItemType } from 'consts/tabs'
 import {
-  ActiveText as TabActiveText,
-  InactiveText as TabInactiveText
-} from 'components/Link/LinkNavigation'
-
-const mapChildrenToTabs = (children: React.ReactNode): TabsItemPropType[] => {
-  return React.Children.toArray(children)
-    .map((child) => (React.isValidElement(child) ? child.props : {}))
-    .filter(isTabsItemProps)
-}
-
-const pickDefaultTab = (
-  tabs: TabsItemPropType[],
-  storedTabSelection: string
-): TabsItemPropType => {
-  const storedTab = tabs.find((tab) => tab.value === storedTabSelection)
-  return storedTab || tabs.find((tab) => tab.default) || tabs[0]
-}
-
-const getActiveTabIndex = (
-  tabToFind: TabsItemPropType,
-  tabs: TabsItemPropType[]
-): number => {
-  return tabs.findIndex((tab) => tab.value === tabToFind.value)
-}
+  getDefaultTab,
+  getTabsPosition,
+  getTabsPositionDiff,
+  mapChildrenToTabs
+} from 'utils/tabs'
 
 export const TabsWrapper = styled.div``
 
-export const TabList = styled.div`
-  margin-bottom: ${SPACINGS.FOUR};
-  border-bottom: ${BORDER_SIZES.DETAIL} solid ${COLORS.DETAIL_LOW_CONTRAST};
-  display: flex;
-  overflow-x: auto;
-`
-
-export const TabPanel = styled.section`
-  ${KEY_NAVIGATING_STYLES};
-`
-
-export const Tab = styled(ButtonBare)<{ $selected: boolean }>`
-  padding: ${SPACINGS.TWO} ${SPACINGS.TWO};
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-
-  &:disabled > ${ButtonBareText} > ${TabInactiveText} {
-    color: ${COLORS.DETAIL_HIGH_CONTRAST};
-  }
-
-  ${({ $selected }) =>
-    $selected &&
-    css`
-      &:before {
-        ${BRAND_GRADIENT_BACKGROUND_STYLES};
-        content: '';
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        height: ${BORDER_SIZES.ACCENT_HORIZONTAL};
-        pointer-events: none;
-      }
-    `};
-`
-
 type PropType = PropsWithChildren<{
   groupId?: string
 }>
 
 export const Tabs = (props: PropType) => {
   const { groupId = '', children, ...restProps } = props
-  const { isKeyNavigating, setIsKeyNavigating } = useKeyNavigating()
+  const { setIsKeyNavigating } = useKeyNavigating()
   const { storedTabSelections, storeTabSelection } = useTabs()
-  const storedTabSelection = storedTabSelections[groupId]
+  const localStorageTab = storedTabSelections[groupId]
   const allTabs = useMemo(() => mapChildrenToTabs(children), [children])
-  const { tabs, tabsId, defaultTab } = useMemo(() => {
-    const enabledTabs = allTabs.filter((tab) => !tab.disabled)
-    return {
-      tabs: enabledTabs,
-      tabsId: uniqueId(),
-      defaultTab: pickDefaultTab(enabledTabs, storedTabSelection)
-    }
-  }, [allTabs, storedTabSelection])
-  const [activeTab, setActiveTab] = useState<TabsItemPropType>(defaultTab)
-  const focusedTab = useRef<HTMLButtonElement>()
+  const tabs = useMemo(() => allTabs.filter((tab) => !tab.disabled), [allTabs])
+  const defaultTab = useMemo(
+    () => getDefaultTab(tabs, localStorageTab),
+    [tabs, localStorageTab]
+  )
+  const [activeTab, setActiveTab] = useState<TabsItemType>(defaultTab)
+  const focusedTab = useRef<HTMLButtonElement | null>(null)
   const tabRefs = useRef(tabs.map(() => React.createRef<HTMLButtonElement>()))
-  const tabRefLoopIndex = useRef(0)
+  const tabsGroupId = useRef(uniqueId())
   const tabsWrapper = useRef<HTMLDivElement>(null)
-  const tabsWrapperRectTop = useRef(0)
-  const activeTabIndex = useRef(getActiveTabIndex(defaultTab, tabs))
-
-  const readTabsRectTop = useCallback(() => {
-    return tabsWrapper.current?.getBoundingClientRect().top || 0
-  }, [])
+  const tabsActiveIndex = useRef(activeTab.index)
+  const tabsPosition = useRef(getTabsPosition(tabsWrapper.current))
 
-  const setActiveTabAndStoreSelection = useCallback(
-    (tab: TabsItemPropType) => {
-      tabsWrapperRectTop.current = readTabsRectTop()
-      activeTabIndex.current = getActiveTabIndex(tab, tabs)
-      setActiveTab(tab)
-
-      if (groupId) storeTabSelection(groupId, tab.value)
+  const storeTabInLocalStorage = useCallback(
+    (tabValue: string) => {
+      if (groupId) storeTabSelection(groupId, tabValue)
     },
-    [tabs, groupId, readTabsRectTop, storeTabSelection]
+    [groupId, storeTabSelection]
   )
 
   const goToTab = useCallback(
@@ -131,19 +59,19 @@ export const Tabs = (props: PropType) => {
       const tabElement = tabRefs.current[index].current
 
       if (tab && tabElement) {
-        setActiveTabAndStoreSelection(tab)
-        setIsKeyNavigating(true)
         focusedTab.current = tabElement
+        setActiveTab(tab)
+        setIsKeyNavigating(true)
         tabElement.focus()
       }
     },
-    [tabs, setActiveTabAndStoreSelection, setIsKeyNavigating]
+    [tabs, setIsKeyNavigating]
   )
 
   const onKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLButtonElement>) => {
       const tabsCount = tabs.length
-      const activeIndex = activeTabIndex.current
+      const activeIndex = tabsActiveIndex.current
 
       const goToNextTab = (): void => {
         goToTab((activeIndex + 1) % tabsCount)
@@ -175,104 +103,67 @@ export const Tabs = (props: PropType) => {
     [tabs, goToTab]
   )
 
-  useEffect(() => {
+  const onClick = useCallback(
+    (tab: TabsItemType, element: EventTarget & HTMLButtonElement) => {
+      focusedTab.current = element
+      setActiveTab(tab)
+    },
+    []
+  )
+
+  useLayoutEffect(() => {
+    tabsActiveIndex.current = activeTab.index
     if (!groupId) return
 
-    const mainContentElement = document.getElementById(MAIN_CONTENT_ID)
-    let storedHeight = mainContentElement?.getBoundingClientRect().height
+    tabsPosition.current = getTabsPosition(tabsWrapper.current)
+    storeTabInLocalStorage(activeTab.value)
 
-    const resizeObserver = new ResizeObserver((entries) => {
-      const autoNavigated = !tabRefs.current.some(
-        (tabRef) => tabRef.current === focusedTab.current
-      )
+    queueMicrotask(() => {
+      const focusedTabId = focusedTab.current?.id || ''
+      const autoNavigated = !focusedTabId.endsWith(tabsGroupId.current)
+      focusedTab.current = null
 
       if (autoNavigated) return
 
-      for (const entry of entries) {
-        if (entry.contentRect.height === storedHeight) return
-        storedHeight = entry.contentRect.height
-        const rectTopDiff = readTabsRectTop() - tabsWrapperRectTop.current
-        if (rectTopDiff) window.scrollBy(0, rectTopDiff)
-      }
-    })
-
-    if (mainContentElement) resizeObserver.observe(mainContentElement)
-    return () => {
-      if (mainContentElement) resizeObserver.disconnect()
-    }
-  }, [groupId, readTabsRectTop])
-
-  useEffect(() => {
-    const tabToActivate = tabs.find((tab) => tab.value === storedTabSelection)
-    if (tabToActivate?.value === activeTab.value) return
-    if (tabToActivate) setActiveTabAndStoreSelection(tabToActivate)
-  }, [activeTab, storedTabSelection, setActiveTabAndStoreSelection])
+      const newTabsPosition = getTabsPosition(tabsWrapper.current)
+      const diff = getTabsPositionDiff(newTabsPosition, tabsPosition.current)
+      if (diff) window.scrollBy({ top: diff })
 
-  useEffect(() => {
-    const hasActiveTab = tabs.find((tab) => tab.value === activeTab.value)
-    if (hasActiveTab) return
+      tabsPosition.current = getTabsPosition(tabsWrapper.current)
+    })
+  }, [tabs, activeTab])
 
-    const newDefaultTab = pickDefaultTab(tabs, storedTabSelection)
-    setActiveTab(newDefaultTab)
-    activeTabIndex.current = getActiveTabIndex(newDefaultTab, tabs)
-  }, [tabs, activeTab, storedTabSelection])
+  useLayoutEffect(() => {
+    const tabToActivate = tabs.find((tab) => tab.value === localStorageTab)
+    if (!tabToActivate) return
+    if (tabToActivate.value === tabs[tabsActiveIndex.current].value) return
+    setActiveTab(tabToActivate)
+  }, [tabs, localStorageTab])
 
   return (
     <TabsWrapper ref={tabsWrapper} {...restProps}>
-      <TabList role="tablist" aria-orientation="horizontal">
-        {allTabs.map((tab) => {
-          const selected = activeTab.value === tab.value
-          const enabled = !tab.disabled
-          const tabRefIndex = tabRefLoopIndex.current
-          const tabElementRef = tabRefs.current[tabRefIndex]
-
-          if (enabled) {
-            const isLastTab = tabRefIndex === tabs.length - 1
-            tabRefLoopIndex.current = isLastTab ? 0 : tabRefIndex + 1
-          }
-
-          return (
-            <Tab
-              role="tab"
-              key={`tab-${tab.value}`}
-              id={`tab-id-${tab.value}-${tabsId}`}
-              tabIndex={selected ? 0 : -1}
-              ref={enabled ? tabElementRef : undefined}
-              aria-controls={`panel-id-${tab.value}-${tabsId}`}
-              aria-selected={selected}
-              onKeyDown={onKeyDown}
-              onClick={() => {
-                const tabElement = tabElementRef.current
-                if (tabElement) focusedTab.current = tabElement
-                setActiveTabAndStoreSelection(tab)
-              }}
-              $selected={selected}
-              disabled={!enabled}
-            >
-              <TabInactiveText $isActive={selected}>
-                {tab.label}
-              </TabInactiveText>
-              <TabActiveText $isActive={selected} aria-hidden="true">
-                {tab.label}
-              </TabActiveText>
-            </Tab>
-          )
-        })}
-      </TabList>
+      <TabsList role="tablist" aria-orientation="horizontal">
+        {allTabs.map((tab) => (
+          <TabsButton
+            key={`${tab.value}-${tabsGroupId.current}`}
+            groupId={tabsGroupId.current}
+            tab={tab}
+            ref={tabRefs.current[tab.index]}
+            activeTab={activeTab}
+            setActiveTab={onClick}
+            onKeyDown={onKeyDown}
+          />
+        ))}
+      </TabsList>
 
       {tabs.map((tab) => (
-        <TabPanel
-          role="tabpanel"
-          key={`tabpanel-${tab.value}`}
-          id={`panel-id-${tab.value}-${tabsId}`}
-          tabIndex={0}
-          aria-labelledby={`tab-id-${tab.value}-${tabsId}`}
-          hidden={activeTab.value !== tab.value}
-          onClick={() => setActiveTabAndStoreSelection(tab)}
-          $isKeyNavigating={isKeyNavigating}
-        >
-          {tab.children}
-        </TabPanel>
+        <TabsPanel
+          key={`${tab.value}-${tabsGroupId.current}`}
+          groupId={tabsGroupId.current}
+          tab={tab}
+          activeTab={activeTab}
+          setActiveTab={setActiveTab}
+        />
       ))}
     </TabsWrapper>
   )
diff --git a/packages/embla-carousel-docs/src/components/Tabs/TabsButton.tsx b/packages/embla-carousel-docs/src/components/Tabs/TabsButton.tsx
new file mode 100644
index 000000000..10245808c
--- /dev/null
+++ b/packages/embla-carousel-docs/src/components/Tabs/TabsButton.tsx
@@ -0,0 +1,87 @@
+import React, { useCallback } from 'react'
+import styled, { css } from 'styled-components'
+import { BRAND_GRADIENT_BACKGROUND_STYLES } from 'consts/gradients'
+import { SPACINGS } from 'consts/spacings'
+import { TabsItemWithIndexType } from 'consts/tabs'
+import { ButtonBare, ButtonBareText } from 'components/Button/ButtonBare'
+import { COLORS } from 'consts/themes'
+import { BORDER_SIZES } from 'consts/border'
+import { PropType as ButtonPropType } from 'components/Button/ButtonBare'
+import {
+  ActiveText as TabsButtonActiveText,
+  InactiveText as TabsButtonInactiveText
+} from 'components/Link/LinkNavigation'
+
+export const TabsButtonWrapper = styled(ButtonBare)<{ $selected: boolean }>`
+  padding: ${SPACINGS.TWO} ${SPACINGS.TWO};
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+
+  &:disabled > ${ButtonBareText} > ${TabsButtonInactiveText} {
+    color: ${COLORS.DETAIL_HIGH_CONTRAST};
+  }
+
+  ${({ $selected }) =>
+    $selected &&
+    css`
+      &:before {
+        ${BRAND_GRADIENT_BACKGROUND_STYLES};
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: ${BORDER_SIZES.ACCENT_HORIZONTAL};
+        pointer-events: none;
+      }
+    `};
+`
+
+type PropType = ButtonPropType & {
+  tab: TabsItemWithIndexType
+  activeTab: TabsItemWithIndexType
+  groupId: string
+  setActiveTab: (
+    tab: TabsItemWithIndexType,
+    element: EventTarget & HTMLButtonElement
+  ) => void
+}
+
+export const TabsButton = React.forwardRef(function TabsButton(
+  props: PropType,
+  ref: React.ForwardedRef<HTMLButtonElement>
+) {
+  const { tab, activeTab, groupId, setActiveTab, ...restProps } = props
+  const isActive = tab.value === activeTab.value
+
+  const setTab = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+      setActiveTab(tab, event.currentTarget)
+    },
+    [setActiveTab]
+  )
+
+  return (
+    <TabsButtonWrapper
+      role="tab"
+      id={`tab-id-${tab.value}-${groupId}`}
+      tabIndex={isActive ? 0 : -1}
+      aria-controls={`panel-id-${tab.value}-${groupId}`}
+      aria-selected={isActive}
+      $selected={isActive}
+      disabled={tab.disabled}
+      onClick={setTab}
+      ref={ref}
+      {...restProps}
+    >
+      <TabsButtonInactiveText $isActive={isActive}>
+        {tab.label}
+      </TabsButtonInactiveText>
+      <TabsButtonActiveText $isActive={isActive} aria-hidden="true">
+        {tab.label}
+      </TabsButtonActiveText>
+    </TabsButtonWrapper>
+  )
+})
diff --git a/packages/embla-carousel-docs/src/components/Tabs/TabsItem.tsx b/packages/embla-carousel-docs/src/components/Tabs/TabsItem.tsx
index 50b84160a..077663c54 100644
--- a/packages/embla-carousel-docs/src/components/Tabs/TabsItem.tsx
+++ b/packages/embla-carousel-docs/src/components/Tabs/TabsItem.tsx
@@ -1,14 +1,8 @@
+import { TabsGroupItemType } from 'consts/tabs'
 import React, { PropsWithChildren } from 'react'
 
-export const isTabsItemProps = (
-  props: PropType | PropsWithChildren<{}>
-): props is PropType => {
-  return 'value' in props && 'label' in props
-}
-
 export type PropType = PropsWithChildren<{
-  value: string
-  label: string
+  tab: TabsGroupItemType
   default?: boolean
   disabled?: boolean
 }>
diff --git a/packages/embla-carousel-docs/src/components/Tabs/TabsList.tsx b/packages/embla-carousel-docs/src/components/Tabs/TabsList.tsx
new file mode 100644
index 000000000..7e6ee748f
--- /dev/null
+++ b/packages/embla-carousel-docs/src/components/Tabs/TabsList.tsx
@@ -0,0 +1,11 @@
+import styled from 'styled-components'
+import { BORDER_SIZES } from 'consts/border'
+import { SPACINGS } from 'consts/spacings'
+import { COLORS } from 'consts/themes'
+
+export const TabsList = styled.div`
+  margin-bottom: ${SPACINGS.FOUR};
+  border-bottom: ${BORDER_SIZES.DETAIL} solid ${COLORS.DETAIL_LOW_CONTRAST};
+  display: flex;
+  overflow-x: auto;
+`
diff --git a/packages/embla-carousel-docs/src/components/Tabs/TabsPanel.tsx b/packages/embla-carousel-docs/src/components/Tabs/TabsPanel.tsx
new file mode 100644
index 000000000..1f2e984c9
--- /dev/null
+++ b/packages/embla-carousel-docs/src/components/Tabs/TabsPanel.tsx
@@ -0,0 +1,40 @@
+import React, { useCallback } from 'react'
+import styled from 'styled-components'
+import { KEY_NAVIGATING_STYLES } from 'consts/keyNavigatingStyles'
+import { TabsItemWithIndexType } from 'consts/tabs'
+import { useKeyNavigating } from 'hooks/useKeyNavigating'
+
+export const TabsPanelWrapper = styled.section`
+  ${KEY_NAVIGATING_STYLES};
+`
+
+type PropType = {
+  tab: TabsItemWithIndexType
+  activeTab: TabsItemWithIndexType
+  groupId: string
+  setActiveTab: (tab: TabsItemWithIndexType) => void
+}
+
+export const TabsPanel = (props: PropType) => {
+  const { tab, activeTab, groupId, setActiveTab } = props
+  const { isKeyNavigating } = useKeyNavigating()
+  const isHidden = tab.value !== activeTab.value
+
+  const setTab = useCallback(() => {
+    setActiveTab(tab)
+  }, [setActiveTab])
+
+  return (
+    <TabsPanelWrapper
+      role="tabpanel"
+      id={`panel-id-${tab.value}-${groupId}`}
+      tabIndex={0}
+      aria-labelledby={`tab-id-${tab.value}-${groupId}`}
+      hidden={isHidden}
+      $isKeyNavigating={isKeyNavigating}
+      onClick={setTab}
+    >
+      {tab.children}
+    </TabsPanelWrapper>
+  )
+}
diff --git a/packages/embla-carousel-docs/src/consts/tabs.ts b/packages/embla-carousel-docs/src/consts/tabs.ts
new file mode 100644
index 000000000..604a34e8e
--- /dev/null
+++ b/packages/embla-carousel-docs/src/consts/tabs.ts
@@ -0,0 +1,84 @@
+import { PropsWithChildren } from 'react'
+
+export type TabsGroupType = {
+  GROUP_ID: string
+  TABS: {
+    [key: string]: TabsGroupItemType
+  }
+}
+
+export type TabsGroupItemType = {
+  LABEL: string
+  VALUE: string
+}
+
+export type TabsItemType = PropsWithChildren<{
+  value: string
+  label: string
+  index: number
+  default?: boolean
+  disabled?: boolean
+}>
+
+export type TabsPositionType = {
+  offsetTop: number
+  rectTop: number
+}
+
+export const TABS_SITE_NAVIGATION: TabsGroupType = {
+  GROUP_ID: '',
+  TABS: {
+    MAIN_MENU: {
+      LABEL: 'Main menu',
+      VALUE: 'main-menu'
+    },
+    ON_THIS_PAGE: {
+      LABEL: 'On this page',
+      VALUE: 'table-of-contents'
+    }
+  }
+}
+
+export const TABS_PACKAGE_MANAGER: TabsGroupType = {
+  GROUP_ID: 'package-manager',
+  TABS: {
+    NPM: {
+      LABEL: 'npm',
+      VALUE: 'npm'
+    },
+    YARN: {
+      LABEL: 'yarn',
+      VALUE: 'yarn'
+    }
+  }
+}
+
+export const TABS_LIBRARY: TabsGroupType = {
+  GROUP_ID: 'library',
+  TABS: {
+    VANILLA: {
+      LABEL: 'Vanilla',
+      VALUE: 'vanilla'
+    },
+    REACT: {
+      LABEL: 'React',
+      VALUE: 'react'
+    },
+    VUE: {
+      LABEL: 'Vue',
+      VALUE: 'vue'
+    },
+    SVELTE: {
+      LABEL: 'Svelte',
+      VALUE: 'svelte'
+    },
+    SOLID: {
+      LABEL: 'Solid',
+      VALUE: 'solid'
+    },
+    ANGULAR: {
+      LABEL: 'Angular',
+      VALUE: 'angular'
+    }
+  }
+}
diff --git a/packages/embla-carousel-docs/src/content/pages/api/events.mdx b/packages/embla-carousel-docs/src/content/pages/api/events.mdx
index a2345eb28..75a20bd3f 100644
--- a/packages/embla-carousel-docs/src/content/pages/api/events.mdx
+++ b/packages/embla-carousel-docs/src/content/pages/api/events.mdx
@@ -7,6 +7,7 @@ date: 2021-02-21
 
 import { Tabs } from 'components/Tabs/Tabs'
 import { TabsItem } from 'components/Tabs/TabsItem'
+import { TABS_LIBRARY } from 'consts/tabs'
 
 # Events
 
@@ -22,8 +23,8 @@ You need an **initialized carousel** in order to **make use of events**. Events
 
 After initializing a carousel, we're going to **subscribe** to the [select](/api/events/#select) **event** in the following example:
 
-<Tabs groupId="library">
-  <TabsItem label="Vanilla" value="vanilla">
+<Tabs groupId={TABS_LIBRARY.GROUP_ID}>
+  <TabsItem tab={TABS_LIBRARY.TABS.VANILLA}>
 
     ```js highlight={9}
     import EmblaCarousel from 'embla-carousel'
@@ -38,7 +39,7 @@ After initializing a carousel, we're going to **subscribe** to the [select](/api
     ```
 
   </TabsItem>
-  <TabsItem label="React" value="react">
+  <TabsItem tab={TABS_LIBRARY.TABS.REACT}>
 
     ```jsx highlight={12}
     import { useCallback, useEffect } from 'react'
@@ -60,7 +61,7 @@ After initializing a carousel, we're going to **subscribe** to the [select](/api
     ```
 
   </TabsItem>
-  <TabsItem label="Vue" value="vue">
+  <TabsItem tab={TABS_LIBRARY.TABS.VUE}>
 
     ```html highlight={14}
     <script>
@@ -92,8 +93,8 @@ After initializing a carousel, we're going to **subscribe** to the [select](/api
 
 In order to remove an event listener, you'll have to call the [off](/api/methods/#off) method and make sure to pass the **same callback reference** you passed to the [on](/api/methods/#off) method:
 
-<Tabs groupId="library">
-  <TabsItem label="Vanilla" value="vanilla">
+<Tabs groupId={TABS_LIBRARY.GROUP_ID}>
+  <TabsItem tab={TABS_LIBRARY.TABS.VANILLA}>
 
     ```js highlight={9-11}
     import EmblaCarousel from 'embla-carousel'
@@ -112,7 +113,7 @@ In order to remove an event listener, you'll have to call the [off](/api/methods
     ```
 
   </TabsItem>
-  <TabsItem label="React" value="react">
+  <TabsItem tab={TABS_LIBRARY.TABS.REACT}>
 
     ```jsx highlight={11-13}
     import { useCallback, useEffect } from 'react'
@@ -138,7 +139,7 @@ In order to remove an event listener, you'll have to call the [off](/api/methods
     ```
 
   </TabsItem>
-  <TabsItem label="Vue" value="vue">
+  <TabsItem tab={TABS_LIBRARY.TABS.VUE}>
 
     ```html highlight={13-15}
     <script>
@@ -174,8 +175,8 @@ In order to remove an event listener, you'll have to call the [off](/api/methods
 
 The `EmblaEventType` is obtained directly from the **core package** `embla-carousel` and used like so:
 
-<Tabs groupId="library">
-  <TabsItem label="Vanilla" value="vanilla">
+<Tabs groupId={TABS_LIBRARY.GROUP_ID}>
+  <TabsItem tab={TABS_LIBRARY.TABS.VANILLA}>
 
     ```ts highlight={3,8}
     import EmblaCarousel, {
@@ -195,7 +196,7 @@ The `EmblaEventType` is obtained directly from the **core package** `embla-carou
     ```
 
   </TabsItem>
-  <TabsItem label="React" value="react">
+  <TabsItem tab={TABS_LIBRARY.TABS.REACT}>
 
     ```tsx highlight={2,9}
     import React, { useCallback } from 'react'
@@ -229,7 +230,7 @@ The `EmblaEventType` is obtained directly from the **core package** `embla-carou
     </Admonition>
 
   </TabsItem>
-  <TabsItem label="Vue" value="vue">
+  <TabsItem tab={TABS_LIBRARY.TABS.VUE}>
 
     ```html highlight={3,10}
     <script lang="ts">
diff --git a/packages/embla-carousel-docs/src/content/pages/api/methods.mdx b/packages/embla-carousel-docs/src/content/pages/api/methods.mdx
index c81f0204a..54cd2c584 100644
--- a/packages/embla-carousel-docs/src/content/pages/api/methods.mdx
+++ b/packages/embla-carousel-docs/src/content/pages/api/methods.mdx
@@ -7,6 +7,7 @@ date: 2021-02-21
 
 import { Tabs } from 'components/Tabs/Tabs'
 import { TabsItem } from 'components/Tabs/TabsItem'
+import { TABS_LIBRARY } from 'consts/tabs'
 
 # Methods
 
@@ -22,8 +23,8 @@ You need an **initialized carousel** in order to **make use of methods**. They c
 
 In the following example, the [slideNodes](/api/methods/#slidenodes) method is called and logged to the console as soon as the carousel has been initialized:
 
-<Tabs groupId="library">
-  <TabsItem label="Vanilla" value="vanilla">
+<Tabs groupId={TABS_LIBRARY.GROUP_ID}>
+  <TabsItem tab={TABS_LIBRARY.TABS.VANILLA}>
 
     ```js highlight={5}
     import EmblaCarousel from 'embla-carousel'
@@ -34,7 +35,7 @@ In the following example, the [slideNodes](/api/methods/#slidenodes) method is c
     ```
 
   </TabsItem>
-  <TabsItem label="React" value="react">
+  <TabsItem tab={TABS_LIBRARY.TABS.REACT}>
 
     ```jsx highlight={8}
     import { useEffect } from 'react'
@@ -52,7 +53,7 @@ In the following example, the [slideNodes](/api/methods/#slidenodes) method is c
     ```
 
   </TabsItem>
-  <TabsItem label="Vue" value="vue">
+  <TabsItem tab={TABS_LIBRARY.TABS.VUE}>
 
     ```html highlight={10}
     <script>
@@ -80,8 +81,8 @@ In the following example, the [slideNodes](/api/methods/#slidenodes) method is c
 
 The `EmblaCarouselType` is obtained directly from the **core package** `embla-carousel` and used like so:
 
-<Tabs groupId="library">
-  <TabsItem label="Vanilla" value="vanilla">
+<Tabs groupId={TABS_LIBRARY.GROUP_ID}>
+  <TabsItem tab={TABS_LIBRARY.TABS.VANILLA}>
 
     ```ts highlight={1,3}
     import EmblaCarousel, { EmblaCarouselType } from 'embla-carousel'
@@ -95,7 +96,7 @@ The `EmblaCarouselType` is obtained directly from the **core package** `embla-ca
     ```
 
   </TabsItem>
-  <TabsItem label="React" value="react">
+  <TabsItem tab={TABS_LIBRARY.TABS.REACT}>
 
     ```tsx highlight={2,8}
     import React, { useCallback } from 'react'
@@ -126,7 +127,7 @@ The `EmblaCarouselType` is obtained directly from the **core package** `embla-ca
     </Admonition>
 
   </TabsItem>
-  <TabsItem label="Vue" value="vue">
+  <TabsItem tab={TABS_LIBRARY.TABS.VUE}>
 
     ```html highlight={3,8}
     <script lang="ts" setup>
diff --git a/packages/embla-carousel-docs/src/content/pages/api/options.mdx b/packages/embla-carousel-docs/src/content/pages/api/options.mdx
index dfee563ec..5bd7aa49d 100644
--- a/packages/embla-carousel-docs/src/content/pages/api/options.mdx
+++ b/packages/embla-carousel-docs/src/content/pages/api/options.mdx
@@ -7,6 +7,7 @@ date: 2021-02-21
 
 import { Tabs } from 'components/Tabs/Tabs'
 import { TabsItem } from 'components/Tabs/TabsItem'
+import { TABS_LIBRARY } from 'consts/tabs'
 
 # Options
 
@@ -22,8 +23,8 @@ You can customize Embla with the [constructor options](/api/options/#constructor
 
 The constructor options is the default way of providing options to Embla Carousel. In the following example, the carousel [loop](/api/options/#loop) option is set to `true`:
 
-<Tabs groupId="library">
-  <TabsItem label="Vanilla" value="vanilla">
+<Tabs groupId={TABS_LIBRARY.GROUP_ID}>
+  <TabsItem tab={TABS_LIBRARY.TABS.VANILLA}>
 
     ```js highlight={3}
     import EmblaCarousel from 'embla-carousel'
@@ -32,7 +33,7 @@ The constructor options is the default way of providing options to Embla Carouse
     ```
 
   </TabsItem>
-  <TabsItem label="React" value="react">
+  <TabsItem tab={TABS_LIBRARY.TABS.REACT}>
 
     ```jsx highlight={4}
     import useEmblaCarousel from 'embla-carousel-react'
@@ -44,7 +45,7 @@ The constructor options is the default way of providing options to Embla Carouse
     ```
 
   </TabsItem>
-  <TabsItem label="Vue" value="vue">
+  <TabsItem tab={TABS_LIBRARY.TABS.VUE}>
 
     ```html highlight={4}
     <script setup>
@@ -68,8 +69,8 @@ The constructor options is the default way of providing options to Embla Carouse
 
 Setting **global options** will be applied to **all carousels** which will override the Embla default options with your own. In the following example [loop](/api/options/#loop) is set to `true`:
 
-<Tabs groupId="library">
-  <TabsItem label="Vanilla" value="vanilla">
+<Tabs groupId={TABS_LIBRARY.GROUP_ID}>
+  <TabsItem tab={TABS_LIBRARY.TABS.VANILLA}>
 
     ```js highlight={3}
     import EmblaCarousel from 'embla-carousel'
@@ -80,7 +81,7 @@ Setting **global options** will be applied to **all carousels** which will overr
     ```
 
   </TabsItem>
-  <TabsItem label="React" value="react">
+  <TabsItem tab={TABS_LIBRARY.TABS.REACT}>
 
     ```jsx highlight={3}
     import useEmblaCarousel from 'embla-carousel-react'
@@ -94,7 +95,7 @@ Setting **global options** will be applied to **all carousels** which will overr
     ```
 
   </TabsItem>
-  <TabsItem label="Vue" value="vue">
+  <TabsItem tab={TABS_LIBRARY.TABS.VUE}>
 
     ```html highlight={4}
     <script setup>
@@ -120,8 +121,8 @@ Setting **global options** will be applied to **all carousels** which will overr
 
 The `EmblaOptionsType` is obtained directly from the **core package** `embla-carousel` and used like so:
 
-<Tabs groupId="library">
-  <TabsItem label="Vanilla" value="vanilla">
+<Tabs groupId={TABS_LIBRARY.GROUP_ID}>
+  <TabsItem tab={TABS_LIBRARY.TABS.VANILLA}>
 
     ```ts highlight={1,3}
     import EmblaCarousel, { EmblaOptionsType } from 'embla-carousel'
@@ -131,7 +132,7 @@ The `EmblaOptionsType` is obtained directly from the **core package** `embla-car
     ```
 
   </TabsItem>
-  <TabsItem label="React" value="react">
+  <TabsItem tab={TABS_LIBRARY.TABS.REACT}>
 
     ```tsx highlight={2,6}
     import React from 'react'
@@ -155,7 +156,7 @@ The `EmblaOptionsType` is obtained directly from the **core package** `embla-car
     </Admonition>
 
   </TabsItem>
-  <TabsItem label="Vue" value="vue">
+  <TabsItem tab={TABS_LIBRARY.TABS.VUE}>
 
     ```html highlight={2,5}
     <script lang="ts" setup>
diff --git a/packages/embla-carousel-docs/src/content/pages/api/plugins.mdx b/packages/embla-carousel-docs/src/content/pages/api/plugins.mdx
index 14cff9e95..291efe0aa 100644
--- a/packages/embla-carousel-docs/src/content/pages/api/plugins.mdx
+++ b/packages/embla-carousel-docs/src/content/pages/api/plugins.mdx
@@ -7,6 +7,7 @@ date: 2021-11-06
 
 import { Tabs } from 'components/Tabs/Tabs'
 import { TabsItem } from 'components/Tabs/TabsItem'
+import { TABS_LIBRARY } from 'consts/tabs'
 
 # Plugins
 
@@ -22,8 +23,8 @@ The Embla Carousel **constructor** accepts an **array of plugins**. Each plugin
 
 The constructor plugin array is the default way of providing plugins to Embla Carousel. In the following example, the [Autoplay](/plugins/autoplay/) plugin is added to the carousel:
 
-<Tabs groupId="library">
-  <TabsItem label="Vanilla" value="vanilla">
+<Tabs groupId={TABS_LIBRARY.GROUP_ID}>
+  <TabsItem tab={TABS_LIBRARY.TABS.VANILLA}>
 
     ```js highlight={4}
     import EmblaCarousel from 'embla-carousel'
@@ -33,7 +34,7 @@ The constructor plugin array is the default way of providing plugins to Embla Ca
     ```
 
   </TabsItem>
-  <TabsItem label="React" value="react">
+  <TabsItem tab={TABS_LIBRARY.TABS.REACT}>
 
     ```jsx highlight={5}
     import useEmblaCarousel from 'embla-carousel-react'
@@ -46,7 +47,7 @@ The constructor plugin array is the default way of providing plugins to Embla Ca
     ```
 
   </TabsItem>
-  <TabsItem label="Vue" value="vue">
+  <TabsItem tab={TABS_LIBRARY.TABS.VUE}>
 
     ```html highlight={7}
     <script>
@@ -75,8 +76,8 @@ The constructor plugin array is the default way of providing plugins to Embla Ca
 
 Plugins have their own specific **options** which is the first argument of the plugin constructor. This allows for configuring the plugin to your liking:
 
-<Tabs groupId="library">
-  <TabsItem label="Vanilla" value="vanilla">
+<Tabs groupId={TABS_LIBRARY.GROUP_ID}>
+  <TabsItem tab={TABS_LIBRARY.TABS.VANILLA}>
 
     ```js highlight={5}
     import EmblaCarousel from 'embla-carousel'
@@ -88,7 +89,7 @@ Plugins have their own specific **options** which is the first argument of the p
     ```
 
   </TabsItem>
-  <TabsItem label="React" value="react">
+  <TabsItem tab={TABS_LIBRARY.TABS.REACT}>
 
     ```jsx highlight={6}
     import useEmblaCarousel from 'embla-carousel-react'
@@ -103,7 +104,7 @@ Plugins have their own specific **options** which is the first argument of the p
     ```
 
   </TabsItem>
-  <TabsItem label="Vue" value="vue">
+  <TabsItem tab={TABS_LIBRARY.TABS.VUE}>
 
     ```html highlight={8}
     <script>
@@ -128,8 +129,8 @@ Plugins have their own specific **options** which is the first argument of the p
 
 All [official plugins](/plugins/) allows you to set **global options** that will be applied to all instances. This allows for overriding the default plugin options with your own:
 
-<Tabs groupId="library">
-  <TabsItem label="Vanilla" value="vanilla">
+<Tabs groupId={TABS_LIBRARY.GROUP_ID}>
+  <TabsItem tab={TABS_LIBRARY.TABS.VANILLA}>
 
     ```js highlight={4}
     import EmblaCarousel from 'embla-carousel'
@@ -141,7 +142,7 @@ All [official plugins](/plugins/) allows you to set **global options** that will
     ```
 
   </TabsItem>
-  <TabsItem label="React" value="react">
+  <TabsItem tab={TABS_LIBRARY.TABS.REACT}>
 
     ```jsx highlight={4}
     import useEmblaCarousel from 'embla-carousel-react'
@@ -156,7 +157,7 @@ All [official plugins](/plugins/) allows you to set **global options** that will
     ```
 
   </TabsItem>
-  <TabsItem label="Vue" value="vue">
+  <TabsItem tab={TABS_LIBRARY.TABS.VUE}>
 
     ```html highlight={5}
     <script>
@@ -187,8 +188,8 @@ All [official plugins](/plugins/) allows you to set **global options** that will
 
 Additionally, some plugins expose their own **API methods**. You can access plugin methods by calling the [plugin](/api/methods/#plugins) method like demonstrated below:
 
-<Tabs groupId="library">
-  <TabsItem label="Vanilla" value="vanilla">
+<Tabs groupId={TABS_LIBRARY.GROUP_ID}>
+  <TabsItem tab={TABS_LIBRARY.TABS.VANILLA}>
 
     ```js highlight={6}
     import EmblaCarousel from 'embla-carousel'
@@ -200,7 +201,7 @@ Additionally, some plugins expose their own **API methods**. You can access plug
     ```
 
   </TabsItem>
-  <TabsItem label="React" value="react">
+  <TabsItem tab={TABS_LIBRARY.TABS.REACT}>
 
     ```jsx highlight={9}
     import { useEffect } from 'react'
@@ -219,7 +220,7 @@ Additionally, some plugins expose their own **API methods**. You can access plug
     ```
 
   </TabsItem>
-  <TabsItem label="Vue" value="vue">
+  <TabsItem tab={TABS_LIBRARY.TABS.VUE}>
 
     ```html highlight={13}
     <script>
@@ -250,8 +251,8 @@ Additionally, some plugins expose their own **API methods**. You can access plug
 
 Some plugins fire their own **events**. Plugin events are structured as follows `<plugin-name>:eventname`. [Adding](/api/events/#adding-event-listeners) and [removing](/api/events/#removing-event-listeners) plugin event listeners is done the same way as native Embla events. Here's an example where an event is added to the autoplay plugin:
 
-<Tabs groupId="library">
-  <TabsItem label="Vanilla" value="vanilla">
+<Tabs groupId={TABS_LIBRARY.GROUP_ID}>
+  <TabsItem tab={TABS_LIBRARY.TABS.VANILLA}>
 
     ```js highlight={10}
     import EmblaCarousel from 'embla-carousel'
@@ -267,7 +268,7 @@ Some plugins fire their own **events**. Plugin events are structured as follows
     ```
 
   </TabsItem>
-  <TabsItem label="React" value="react">
+  <TabsItem tab={TABS_LIBRARY.TABS.REACT}>
 
     ```jsx highlight={15}
     import { useEffect, useCallback } from 'react'
@@ -292,7 +293,7 @@ Some plugins fire their own **events**. Plugin events are structured as follows
     ```
 
   </TabsItem>
-  <TabsItem label="Vue" value="vue">
+  <TabsItem tab={TABS_LIBRARY.TABS.VUE}>
 
     ```html highlight={18}
     <script>
@@ -329,8 +330,8 @@ Some plugins fire their own **events**. Plugin events are structured as follows
 
 The `EmblaPluginType` is obtained directly from the **core package** `embla-carousel` and used like so:
 
-<Tabs groupId="library">
-  <TabsItem label="Vanilla" value="vanilla">
+<Tabs groupId={TABS_LIBRARY.GROUP_ID}>
+  <TabsItem tab={TABS_LIBRARY.TABS.VANILLA}>
 
     ```ts highlight={3,8}
     import EmblaCarousel, {
@@ -345,7 +346,7 @@ The `EmblaPluginType` is obtained directly from the **core package** `embla-caro
     ```
 
   </TabsItem>
-  <TabsItem label="React" value="react">
+  <TabsItem tab={TABS_LIBRARY.TABS.REACT}>
 
     ```tsx highlight={2,7}
     import React from 'react'
@@ -369,7 +370,7 @@ The `EmblaPluginType` is obtained directly from the **core package** `embla-caro
     </Admonition>
 
   </TabsItem>
-  <TabsItem label="Vue" value="vue">
+  <TabsItem tab={TABS_LIBRARY.TABS.VUE}>
 
     ```html highlight={2,7}
     <script lang="ts" setup>
diff --git a/packages/embla-carousel-docs/src/content/pages/get-started/module.mdx b/packages/embla-carousel-docs/src/content/pages/get-started/module.mdx
index b8e8dd84d..46689dbe6 100644
--- a/packages/embla-carousel-docs/src/content/pages/get-started/module.mdx
+++ b/packages/embla-carousel-docs/src/content/pages/get-started/module.mdx
@@ -7,20 +7,21 @@ date: 2021-02-21
 
 import { Tabs } from 'components/Tabs/Tabs'
 import { TabsItem } from 'components/Tabs/TabsItem'
+import { TABS_PACKAGE_MANAGER } from 'consts/tabs'
 
 # Module
 
 Start by installing the **npm package** and save it to your dependencies:
 
-<Tabs groupId="package-manager">
-  <TabsItem label="npm" value="npm">
+<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.NPM}>
 
     ```shell
     npm install embla-carousel --save
     ```
 
   </TabsItem>
-  <TabsItem label="yarn" value="yarn">
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.YARN}>
 
     ```shell
     yarn add embla-carousel
@@ -80,15 +81,15 @@ console.log(emblaApi.slideNodes()) // Access API
 
 Start by installing the plugin you want to use. In this example, we're going to install the [Autoplay](/plugins/autoplay/) plugin:
 
-<Tabs groupId="package-manager">
-  <TabsItem label="npm" value="npm">
+<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.NPM}>
 
     ```shell
     npm install embla-carousel-autoplay --save
     ```
 
   </TabsItem>
-  <TabsItem label="yarn" value="yarn">
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.YARN}>
 
     ```shell
     yarn add embla-carousel-autoplay
diff --git a/packages/embla-carousel-docs/src/content/pages/get-started/react.mdx b/packages/embla-carousel-docs/src/content/pages/get-started/react.mdx
index 4de3faa5e..c6f11e081 100644
--- a/packages/embla-carousel-docs/src/content/pages/get-started/react.mdx
+++ b/packages/embla-carousel-docs/src/content/pages/get-started/react.mdx
@@ -7,20 +7,21 @@ date: 2021-02-21
 
 import { Tabs } from 'components/Tabs/Tabs'
 import { TabsItem } from 'components/Tabs/TabsItem'
+import { TABS_PACKAGE_MANAGER } from 'consts/tabs'
 
 # React
 
 Start by installing the Embla Carousel **npm package** and add it to your dependencies.
 
-<Tabs groupId="package-manager">
-  <TabsItem label="npm" value="npm">
+<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.NPM}>
 
     ```shell
     npm install embla-carousel-react --save
     ```
 
   </TabsItem>
-  <TabsItem label="yarn" value="yarn">
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.YARN}>
 
     ```shell
     yarn add embla-carousel-react
@@ -104,15 +105,15 @@ export const EmblaCarousel = () => {
 
 Start by installing the plugin you want to use. In this example, we're going to install the [Autoplay](/plugins/autoplay/) plugin:
 
-<Tabs groupId="package-manager">
-  <TabsItem label="npm" value="npm">
+<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.NPM}>
 
     ```shell
     npm install embla-carousel-autoplay --save
     ```
 
   </TabsItem>
-  <TabsItem label="yarn" value="yarn">
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.YARN}>
 
     ```shell
     yarn add embla-carousel-autoplay
diff --git a/packages/embla-carousel-docs/src/content/pages/get-started/solid.mdx b/packages/embla-carousel-docs/src/content/pages/get-started/solid.mdx
index dcd3ff645..4aef8126a 100644
--- a/packages/embla-carousel-docs/src/content/pages/get-started/solid.mdx
+++ b/packages/embla-carousel-docs/src/content/pages/get-started/solid.mdx
@@ -7,20 +7,21 @@ date: 2023-12-31
 
 import { Tabs } from 'components/Tabs/Tabs'
 import { TabsItem } from 'components/Tabs/TabsItem'
+import { TABS_PACKAGE_MANAGER } from 'consts/tabs'
 
 # Solid
 
 Start by installing the Embla Carousel **npm package** and add it to your dependencies.
 
-<Tabs groupId="package-manager">
-  <TabsItem label="npm" value="npm">
+<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.NPM}>
 
     ```shell
     npm install embla-carousel-solid --save
     ```
 
   </TabsItem>
-  <TabsItem label="yarn" value="yarn">
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.YARN}>
 
     ```shell
     yarn add embla-carousel-solid
@@ -104,15 +105,15 @@ export const EmblaCarousel = () => {
 
 Start by installing the plugin you want to use. In this example, we're going to install the [Autoplay](/plugins/autoplay/) plugin:
 
-<Tabs groupId="package-manager">
-  <TabsItem label="npm" value="npm">
+<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.NPM}>
 
     ```shell
     npm install embla-carousel-autoplay --save
     ```
 
   </TabsItem>
-  <TabsItem label="yarn" value="yarn">
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.YARN}>
 
     ```shell
     yarn add embla-carousel-autoplay
diff --git a/packages/embla-carousel-docs/src/content/pages/get-started/svelte.mdx b/packages/embla-carousel-docs/src/content/pages/get-started/svelte.mdx
index 779af97bc..fa79aa844 100644
--- a/packages/embla-carousel-docs/src/content/pages/get-started/svelte.mdx
+++ b/packages/embla-carousel-docs/src/content/pages/get-started/svelte.mdx
@@ -7,20 +7,21 @@ date: 2021-02-21
 
 import { Tabs } from 'components/Tabs/Tabs'
 import { TabsItem } from 'components/Tabs/TabsItem'
+import { TABS_PACKAGE_MANAGER } from 'consts/tabs'
 
 # Svelte
 
 Start by installing the Embla Carousel **npm package** and add it to your dependencies.
 
-<Tabs groupId="package-manager">
-  <TabsItem label="npm" value="npm">
+<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.NPM}>
 
     ```shell
     npm install embla-carousel-svelte --save
     ```
 
   </TabsItem>
-  <TabsItem label="yarn" value="yarn">
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.YARN}>
 
     ```shell
     yarn add embla-carousel-svelte
@@ -102,15 +103,15 @@ The `emblaCarouselSvelte` action takes the Embla Carousel [options](/api/options
 
 Start by installing the plugin you want to use. In this example, we're going to install the [Autoplay](/plugins/autoplay/) plugin:
 
-<Tabs groupId="package-manager">
-  <TabsItem label="npm" value="npm">
+<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.NPM}>
 
     ```shell
     npm install embla-carousel-autoplay --save
     ```
 
   </TabsItem>
-  <TabsItem label="yarn" value="yarn">
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.YARN}>
 
     ```shell
     yarn add embla-carousel-autoplay
diff --git a/packages/embla-carousel-docs/src/content/pages/get-started/vue.mdx b/packages/embla-carousel-docs/src/content/pages/get-started/vue.mdx
index 0fb64b585..9904a378f 100644
--- a/packages/embla-carousel-docs/src/content/pages/get-started/vue.mdx
+++ b/packages/embla-carousel-docs/src/content/pages/get-started/vue.mdx
@@ -7,20 +7,21 @@ date: 2021-02-21
 
 import { Tabs } from 'components/Tabs/Tabs'
 import { TabsItem } from 'components/Tabs/TabsItem'
+import { TABS_PACKAGE_MANAGER } from 'consts/tabs'
 
 # Vue
 
 Start by installing the Embla Carousel **npm package** and add it to your dependencies.
 
-<Tabs groupId="package-manager">
-  <TabsItem label="npm" value="npm">
+<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.NPM}>
 
     ```shell
     npm install embla-carousel-vue --save
     ```
 
   </TabsItem>
-  <TabsItem label="yarn" value="yarn">
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.YARN}>
 
     ```shell
     yarn add embla-carousel-vue
@@ -116,15 +117,15 @@ The `emblaCarouselVue` function takes the Embla Carousel [options](/api/options/
 
 Start by installing the plugin you want to use. In this example, we're going to install the [Autoplay](/plugins/autoplay/) plugin:
 
-<Tabs groupId="package-manager">
-  <TabsItem label="npm" value="npm">
+<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.NPM}>
 
     ```shell
     npm install embla-carousel-autoplay --save
     ```
 
   </TabsItem>
-  <TabsItem label="yarn" value="yarn">
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.YARN}>
 
     ```shell
     yarn add embla-carousel-autoplay
diff --git a/packages/embla-carousel-docs/src/content/pages/plugins/auto-height.mdx b/packages/embla-carousel-docs/src/content/pages/plugins/auto-height.mdx
index c47800b98..40d347c1d 100644
--- a/packages/embla-carousel-docs/src/content/pages/plugins/auto-height.mdx
+++ b/packages/embla-carousel-docs/src/content/pages/plugins/auto-height.mdx
@@ -7,6 +7,7 @@ date: 2022-01-14
 
 import { Tabs } from 'components/Tabs/Tabs'
 import { TabsItem } from 'components/Tabs/TabsItem'
+import { TABS_PACKAGE_MANAGER } from 'consts/tabs'
 
 # Auto Height
 
@@ -22,15 +23,15 @@ This plugin is used to extend Embla Carousel with **auto height** functionality.
 
 First you need to install the **npm package** and save it to your dependencies:
 
-<Tabs groupId="package-manager">
-  <TabsItem label="npm" value="npm">
+<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.NPM}>
 
     ```shell
     npm install embla-carousel-auto-height --save
     ```
 
   </TabsItem>
-  <TabsItem label="yarn" value="yarn">
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.YARN}>
 
     ```shell
     yarn add embla-carousel-auto-height
diff --git a/packages/embla-carousel-docs/src/content/pages/plugins/autoplay.mdx b/packages/embla-carousel-docs/src/content/pages/plugins/autoplay.mdx
index de732ed64..645c97a05 100644
--- a/packages/embla-carousel-docs/src/content/pages/plugins/autoplay.mdx
+++ b/packages/embla-carousel-docs/src/content/pages/plugins/autoplay.mdx
@@ -7,6 +7,7 @@ date: 2021-03-13
 
 import { Tabs } from 'components/Tabs/Tabs'
 import { TabsItem } from 'components/Tabs/TabsItem'
+import { TABS_PACKAGE_MANAGER } from 'consts/tabs'
 
 # Autoplay
 
@@ -22,15 +23,15 @@ This plugin is used to extend Embla Carousel with **autoplay** functionality. It
 
 First you need to install the **npm package** and save it to your dependencies:
 
-<Tabs groupId="package-manager">
-  <TabsItem label="npm" value="npm">
+<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.NPM}>
 
     ```shell
     npm install embla-carousel-autoplay --save
     ```
 
   </TabsItem>
-  <TabsItem label="yarn" value="yarn">
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.YARN}>
 
     ```shell
     yarn add embla-carousel-autoplay
diff --git a/packages/embla-carousel-docs/src/content/pages/plugins/class-names.mdx b/packages/embla-carousel-docs/src/content/pages/plugins/class-names.mdx
index f645d8fad..44e07cea8 100644
--- a/packages/embla-carousel-docs/src/content/pages/plugins/class-names.mdx
+++ b/packages/embla-carousel-docs/src/content/pages/plugins/class-names.mdx
@@ -7,6 +7,7 @@ date: 2021-11-22
 
 import { Tabs } from 'components/Tabs/Tabs'
 import { TabsItem } from 'components/Tabs/TabsItem'
+import { TABS_PACKAGE_MANAGER } from 'consts/tabs'
 
 # Class Names
 
@@ -22,15 +23,15 @@ Class Names is a **class name toggle** utility plugin for Embla Carousel that en
 
 First you need to install the **npm package** and save it to your dependencies:
 
-<Tabs groupId="package-manager">
-  <TabsItem label="npm" value="npm">
+<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.NPM}>
 
     ```shell
     npm install embla-carousel-class-names --save
     ```
 
   </TabsItem>
-  <TabsItem label="yarn" value="yarn">
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.YARN}>
 
     ```shell
     yarn add embla-carousel-class-names
diff --git a/packages/embla-carousel-docs/src/content/pages/plugins/wheel-gestures.mdx b/packages/embla-carousel-docs/src/content/pages/plugins/wheel-gestures.mdx
index a9a57d1f5..208a97ed8 100644
--- a/packages/embla-carousel-docs/src/content/pages/plugins/wheel-gestures.mdx
+++ b/packages/embla-carousel-docs/src/content/pages/plugins/wheel-gestures.mdx
@@ -7,6 +7,7 @@ date: 2021-11-22
 
 import { Tabs } from 'components/Tabs/Tabs'
 import { TabsItem } from 'components/Tabs/TabsItem'
+import { TABS_PACKAGE_MANAGER } from 'consts/tabs'
 
 # Wheel Gestures
 
@@ -22,15 +23,15 @@ This plugin is used to extend Embla Carousel with the ability to use the mouse/t
 
 First you need to install the **npm package** and save it to your dependencies:
 
-<Tabs groupId="package-manager">
-  <TabsItem label="npm" value="npm">
+<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.NPM}>
 
     ```shell
     npm install embla-carousel-wheel-gestures --save
     ```
 
   </TabsItem>
-  <TabsItem label="yarn" value="yarn">
+  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.YARN}>
 
     ```shell
     yarn add embla-carousel-wheel-gestures
diff --git a/packages/embla-carousel-docs/src/utils/tabs.ts b/packages/embla-carousel-docs/src/utils/tabs.ts
new file mode 100644
index 000000000..45abedee4
--- /dev/null
+++ b/packages/embla-carousel-docs/src/utils/tabs.ts
@@ -0,0 +1,60 @@
+import React, { PropsWithChildren } from 'react'
+import { TabsItemType, TabsPositionType } from 'consts/tabs'
+import { PropType as TabsItemPropType } from 'components/Tabs/TabsItem'
+
+export const mapChildrenToTabs = (
+  children: React.ReactNode
+): TabsItemType[] => {
+  let tabIndex = 0
+
+  return React.Children.toArray(children).reduce((tabs, child) => {
+    if (!React.isValidElement(child)) return tabs
+    if (!isTabsItemProps(child.props)) return tabs
+
+    const { props } = child
+    const clonedChild = React.cloneElement(
+      child as React.ReactElement<TabsItemType>,
+      {
+        index: props.disabled ? -1 : tabIndex,
+        label: props.tab.LABEL,
+        value: props.tab.VALUE,
+        ...props
+      }
+    )
+    if (!props.disabled) tabIndex += 1
+    return [...tabs, clonedChild.props]
+  }, [] as TabsItemType[])
+}
+
+export const isTabsItemProps = (
+  props: TabsItemPropType | PropsWithChildren<{}>
+): props is TabsItemPropType => {
+  return 'tab' in props
+}
+
+export const getDefaultTab = (
+  tabs: TabsItemType[],
+  storedTabSelection: string
+): TabsItemType => {
+  const storedTab = tabs.find((tab) => tab.value === storedTabSelection)
+  return storedTab || tabs.find((tab) => tab.default) || tabs[0]
+}
+
+export const getTabsPosition = <ElementType extends HTMLElement>(
+  element: ElementType | null
+): TabsPositionType => {
+  if (!element) return { offsetTop: 0, rectTop: 0 }
+  return {
+    offsetTop: element.offsetTop,
+    rectTop: element.getBoundingClientRect().top
+  }
+}
+
+export const getTabsPositionDiff = (
+  currentScroll: TabsPositionType,
+  previousScroll: TabsPositionType
+): number => {
+  const offsetDiff = currentScroll.offsetTop - previousScroll.offsetTop
+  const rectDiff = currentScroll.rectTop - previousScroll.rectTop
+  return Math.abs(offsetDiff - rectDiff) > 1 ? rectDiff : offsetDiff
+}