diff --git a/assets/menu/menu.json b/assets/menu/menu.json
index 5437d765e..298e67de0 100644
--- a/assets/menu/menu.json
+++ b/assets/menu/menu.json
@@ -273,6 +273,10 @@
                             "name": "Stepper",
                             "to": "/stepper"
                         },
+                        {
+                            "name": "Tabs",
+                            "to": "/tabs"
+                        },
                         {
                             "name": "TabView",
                             "to": "/tabview"
diff --git a/components/lib/tab/BaseTab.vue b/components/lib/tab/BaseTab.vue
new file mode 100644
index 000000000..069e88e62
--- /dev/null
+++ b/components/lib/tab/BaseTab.vue
@@ -0,0 +1,33 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import TabStyle from 'primevue/tab/style';
+
+export default {
+    name: 'BaseTab',
+    extends: BaseComponent,
+    props: {
+        value: {
+            type: String,
+            default: undefined
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        as: {
+            type: String,
+            default: 'BUTTON'
+        },
+        asChild: {
+            type: Boolean,
+            default: false
+        }
+    },
+    style: TabStyle,
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>
diff --git a/components/lib/tab/Tab.d.ts b/components/lib/tab/Tab.d.ts
new file mode 100755
index 000000000..04a75c567
--- /dev/null
+++ b/components/lib/tab/Tab.d.ts
@@ -0,0 +1,148 @@
+/**
+ *
+ * Tab is a helper component for Tabs component.
+ *
+ * [Live Demo](https://www.primevue.org/tabs/)
+ *
+ * @module tab
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+
+export declare type TabPassThroughOptionType = TabPassThroughAttributes | ((options: TabPassThroughMethodOptions) => TabPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TabPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: TabProps;
+    /**
+     * Defines current options.
+     */
+    context: TabContext;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TabProps.pt}
+ */
+export interface TabPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: TabPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+export interface TabPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines valid properties in Tab component.
+ */
+export interface TabProps {
+    /**
+     * Value of tab.
+     */
+    value: string;
+    /**
+     * Whether the tab is disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Use to change the HTML tag of root element.
+     * @defaultValue BUTTON
+     */
+    as?: string | undefined;
+    /**
+     * When enabled, it changes the default rendered element for the one passed as a child element.
+     * @defaultValue false
+     */
+    asChild?: boolean | undefined;
+    /**
+     * It generates scoped CSS variables using design tokens for the component.
+     */
+    dt?: DesignToken<any>;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {TabPassThroughOptions}
+     */
+    pt?: PassThrough<TabPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+}
+
+/**
+ * Defines current options in Tab component.
+ */
+export interface TabContext {
+    /**
+     * Whether the tab is active.
+     */
+    active: boolean;
+}
+
+/**
+ * Defines valid slots in Tab slots.
+ */
+export interface TabSlots {
+    /**
+     * Custom content template.
+     */
+    default(): VNode[];
+}
+
+export interface TabEmits {}
+
+/**
+ * **PrimeVue - Tab**
+ *
+ * _Tab is a helper component for Tabs component._
+ *
+ * [Live Demo](https://www.primevue.org/tabs/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare class Tab extends ClassComponent<TabProps, TabSlots, TabEmits> {}
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        Tab: GlobalComponentConstructor<Tab>;
+    }
+}
+
+export default Tab;
diff --git a/components/lib/tab/Tab.vue b/components/lib/tab/Tab.vue
new file mode 100644
index 000000000..b6e23ca95
--- /dev/null
+++ b/components/lib/tab/Tab.vue
@@ -0,0 +1,166 @@
+<template>
+    <component v-if="!asChild" :is="as" v-ripple :class="cx('root')" @click="onClick" v-bind="attrs">
+        <slot></slot>
+    </component>
+    <slot v-else :class="cx('root')" :active="active" :a11yAttrs="a11yAttrs" :onClick="onClick"></slot>
+</template>
+
+<script>
+import Ripple from 'primevue/ripple';
+import { DomHandler, ObjectUtils } from 'primevue/utils';
+import { mergeProps } from 'vue';
+import BaseTab from './BaseTab.vue';
+
+export default {
+    name: 'Tab',
+    extends: BaseTab,
+    inheritAttrs: false,
+    inject: ['$pcTabs', '$pcTabList'],
+    methods: {
+        onFocus() {
+            this.$pcTabs.selectOnFocus && this.changeActiveValue();
+        },
+        onClick() {
+            this.changeActiveValue();
+        },
+        onKeydown(event) {
+            switch (event.code) {
+                case 'ArrowRight':
+                    this.onArrowRightKey(event);
+                    break;
+
+                case 'ArrowLeft':
+                    this.onArrowLeftKey(event);
+                    break;
+
+                case 'Home':
+                    this.onHomeKey(event);
+                    break;
+
+                case 'End':
+                    this.onEndKey(event);
+                    break;
+
+                case 'PageDown':
+                    this.onPageDownKey(event);
+                    break;
+
+                case 'PageUp':
+                    this.onPageUpKey(event);
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                case 'Space':
+                    this.onEnterKey(event);
+                    break;
+
+                default:
+                    break;
+            }
+        },
+        onArrowRightKey(event) {
+            const nextTab = this.findNextTab(event.currentTarget);
+
+            nextTab ? this.changeFocusedTab(event, nextTab) : this.onHomeKey(event);
+            event.preventDefault();
+        },
+        onArrowLeftKey(event) {
+            const prevTab = this.findPrevTab(event.currentTarget);
+
+            prevTab ? this.changeFocusedTab(event, prevTab) : this.onEndKey(event);
+            event.preventDefault();
+        },
+        onHomeKey(event) {
+            const firstTab = this.findFirstTab();
+
+            this.changeFocusedTab(event, firstTab);
+            event.preventDefault();
+        },
+        onEndKey(event) {
+            const lastTab = this.findLastTab();
+
+            this.changeFocusedTab(event, lastTab);
+            event.preventDefault();
+        },
+        onPageDownKey(event) {
+            this.scrollInView(this.findLastTab());
+            event.preventDefault();
+        },
+        onPageUpKey(event) {
+            this.scrollInView(this.findFirstTab());
+            event.preventDefault();
+        },
+        onEnterKey() {
+            this.changeActiveValue();
+        },
+        findNextTab(tabElement, selfCheck = false) {
+            const element = selfCheck ? tabElement : tabElement.nextElementSibling;
+
+            return element ? (DomHandler.getAttribute(element, 'data-p-disabled') || DomHandler.getAttribute(element, 'data-pc-section') === 'inkbar' ? this.findNextTab(element) : DomHandler.findSingle(element, '[data-pc-name="tab"]')) : null;
+        },
+        findPrevTab(tabElement, selfCheck = false) {
+            const element = selfCheck ? tabElement : tabElement.previousElementSibling;
+
+            return element ? (DomHandler.getAttribute(element, 'data-p-disabled') || DomHandler.getAttribute(element, 'data-pc-section') === 'inkbar' ? this.findPrevTab(element) : DomHandler.findSingle(element, '[data-pc-name="tab"]')) : null;
+        },
+        findFirstTab() {
+            return this.findNextTab(this.$pcTabList.$refs.content.firstElementChild, true);
+        },
+        findLastTab() {
+            return this.findPrevTab(this.$pcTabList.$refs.content.lastElementChild, true);
+        },
+        changeActiveValue() {
+            this.$pcTabs.updateValue(this.value);
+        },
+        changeFocusedTab(event, element) {
+            DomHandler.focus(element);
+            this.scrollInView(element);
+        },
+        scrollInView(element) {
+            element?.scrollIntoView?.({ block: 'nearest' });
+        }
+    },
+    computed: {
+        active() {
+            return ObjectUtils.equals(this.$pcTabs?.d_value, this.value);
+        },
+        id() {
+            return `${this.$pcTabs?.id}_tab_${this.value}`;
+        },
+        ariaControls() {
+            return `${this.$pcTabs?.id}_tabpanel_${this.value}`;
+        },
+        attrs() {
+            return mergeProps(this.asAttrs, this.a11yAttrs, this.ptmi('root', this.ptParams));
+        },
+        asAttrs() {
+            return this.as === 'BUTTON' ? { type: 'button', disabled: this.disabled } : undefined;
+        },
+        a11yAttrs() {
+            return {
+                id: this.id,
+                tabindex: this.active ? this.$pcTabs.tabindex : -1,
+                role: 'tab',
+                'aria-selected': this.active,
+                'aria-controls': this.ariaControls,
+                'data-pc-name': 'tab',
+                'data-p-disabled': this.disabled,
+                'data-p-active': this.active,
+                onFocus: this.onFocus,
+                onKeydown: this.onKeydown
+            };
+        },
+        ptParams() {
+            return {
+                context: {
+                    active: this.active
+                }
+            };
+        }
+    },
+    directives: {
+        ripple: Ripple
+    }
+};
+</script>
diff --git a/components/lib/tab/package.json b/components/lib/tab/package.json
new file mode 100644
index 000000000..6af6e5f60
--- /dev/null
+++ b/components/lib/tab/package.json
@@ -0,0 +1,9 @@
+{
+    "main": "./tab.cjs.js",
+    "module": "./tab.esm.js",
+    "unpkg": "./tab.min.js",
+    "types": "./Tab.d.ts",
+    "browser": {
+        "./sfc": "./Tab.vue"
+    }
+}
diff --git a/components/lib/tab/style/TabStyle.d.ts b/components/lib/tab/style/TabStyle.d.ts
new file mode 100644
index 000000000..8c45afb8a
--- /dev/null
+++ b/components/lib/tab/style/TabStyle.d.ts
@@ -0,0 +1,3 @@
+import { BaseStyle } from '../../base/style';
+
+export interface TabStyle extends BaseStyle {}
diff --git a/components/lib/tab/style/TabStyle.js b/components/lib/tab/style/TabStyle.js
new file mode 100644
index 000000000..4a670fa70
--- /dev/null
+++ b/components/lib/tab/style/TabStyle.js
@@ -0,0 +1,16 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-tab',
+        {
+            'p-active': instance.active,
+            'p-disabled': props.disabled
+        }
+    ]
+};
+
+export default BaseStyle.extend({
+    name: 'tab',
+    classes
+});
diff --git a/components/lib/tab/style/package.json b/components/lib/tab/style/package.json
new file mode 100644
index 000000000..96a488e6e
--- /dev/null
+++ b/components/lib/tab/style/package.json
@@ -0,0 +1,6 @@
+{
+    "main": "./tabstyle.cjs.js",
+    "module": "./tabstyle.esm.js",
+    "unpkg": "./tabstyle.min.js",
+    "types": "./TabStyle.d.ts"
+}
diff --git a/components/lib/tablist/BaseTabList.vue b/components/lib/tablist/BaseTabList.vue
new file mode 100644
index 000000000..5c8acd03a
--- /dev/null
+++ b/components/lib/tablist/BaseTabList.vue
@@ -0,0 +1,17 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import TabListStyle from 'primevue/tablist/style';
+
+export default {
+    name: 'BaseTabList',
+    extends: BaseComponent,
+    props: {},
+    style: TabListStyle,
+    provide() {
+        return {
+            $pcTabList: this,
+            $parentInstance: this
+        };
+    }
+};
+</script>
diff --git a/components/lib/tablist/TabList.d.ts b/components/lib/tablist/TabList.d.ts
new file mode 100755
index 000000000..8249b7e4f
--- /dev/null
+++ b/components/lib/tablist/TabList.d.ts
@@ -0,0 +1,142 @@
+/**
+ *
+ * TabList is a helper component for Tabs component.
+ *
+ * [Live Demo](https://www.primevue.org/tabs/)
+ *
+ * @module tablist
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+
+export declare type TabListPassThroughOptionType = TabListPassThroughAttributes | ((options: TabListPassThroughMethodOptions) => TabListPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TabListPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: TabListProps;
+    /**
+     * Defines current options.
+     */
+    context: TabListContext;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TabListProps.pt}
+ */
+export interface TabListPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: TabListPassThroughOptionType;
+    /**
+     * Used to pass attributes to the previous button component.
+     */
+    previousButton?: TabListPassThroughOptionType;
+    /**
+     * Used to pass attributes to the next button component.
+     */
+    nextButton?: TabListPassThroughOptionType;
+    /**
+     * Used to pass attributes to the list's DOM element.
+     */
+    content?: TabListPassThroughOptionType;
+    /**
+     * Used to pass attributes to the inkbar's DOM element.
+     */
+    inkbar?: TabListPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+export interface TabListPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines valid properties in TabList component.
+ */
+export interface TabListProps {
+    /**
+     * It generates scoped CSS variables using design tokens for the component.
+     */
+    dt?: DesignToken<any>;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {TabListPassThroughOptions}
+     */
+    pt?: PassThrough<TabListPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+}
+
+/**
+ * Defines current options in TabList component.
+ */
+export interface TabListContext {
+    [key: string]: any;
+}
+
+/**
+ * Defines valid slots in TabList slots.
+ */
+export interface TabListSlots {
+    /**
+     * Custom content template.
+     */
+    default(): VNode[];
+}
+
+export interface TabListEmits {}
+
+/**
+ * **PrimeVue - TabList**
+ *
+ * _TabList is a helper component for Tabs component._
+ *
+ * [Live Demo](https://www.primevue.org/tabs/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare class TabList extends ClassComponent<TabListProps, TabListSlots, TabListEmits> {}
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        TabList: GlobalComponentConstructor<TabList>;
+    }
+}
+
+export default TabList;
diff --git a/components/lib/tablist/TabList.vue b/components/lib/tablist/TabList.vue
new file mode 100644
index 000000000..5c842c6da
--- /dev/null
+++ b/components/lib/tablist/TabList.vue
@@ -0,0 +1,159 @@
+<template>
+    <div ref="list" :class="cx('root')" v-bind="ptmi('root')">
+        <Button
+            v-if="showNavigators && isPrevButtonEnabled"
+            ref="prevButton"
+            :class="cx('previousButton')"
+            :aria-label="prevButtonAriaLabel"
+            :unstyled="$pcTabs.unstyled"
+            :tabindex="$pcTabs.tabindex"
+            @click="onPrevButtonClick"
+            v-bind="$pcTabs.previousButtonProps"
+            :pt="ptm('previousButton')"
+            data-pc-group-section="navigator"
+        >
+            <template #icon="slotProps">
+                <component :is="templates.previousicon || 'ChevronLeftIcon'" aria-hidden="true" :class="slotProps.icon" v-bind="ptm('previousButton.icon')" />
+            </template>
+        </Button>
+        <div ref="content" :class="cx('content')" role="tablist" :aria-orientation="$pcTabs.orientation" @scroll="onScroll" v-bind="ptm('content')">
+            <slot></slot>
+            <span ref="inkbar" :class="cx('inkbar')" role="presentation" aria-hidden="true" v-bind="ptm('inkbar')"></span>
+        </div>
+        <Button
+            v-if="showNavigators && isNextButtonEnabled"
+            ref="nextButton"
+            :class="cx('nextButton')"
+            :aria-label="nextButtonAriaLabel"
+            :unstyled="$pcTabs.unstyled"
+            :tabindex="$pcTabs.tabindex"
+            @click="onNextButtonClick"
+            v-bind="$pcTabs.nextButtonProps"
+            :pt="ptm('nextButton')"
+            data-pc-group-section="navigator"
+        >
+            <template #icon="slotProps">
+                <component :is="templates.nexticon || 'ChevronRightIcon'" aria-hidden="true" :class="slotProps.icon" v-bind="ptm('nextButton.icon')" />
+            </template>
+        </Button>
+    </div>
+</template>
+
+<script>
+import Button from 'primevue/button';
+import ChevronLeftIcon from 'primevue/icons/chevronleft';
+import ChevronRightIcon from 'primevue/icons/chevronright';
+import { DomHandler } from 'primevue/utils';
+import BaseTabList from './BaseTabList.vue';
+
+export default {
+    name: 'TabList',
+    extends: BaseTabList,
+    inheritAttrs: false,
+    inject: ['$pcTabs'],
+    data() {
+        return {
+            isPrevButtonEnabled: false,
+            isNextButtonEnabled: true
+        };
+    },
+    resizeObserver: undefined,
+    watch: {
+        showNavigators(newValue) {
+            newValue ? this.bindResizeObserver() : this.unbindResizeObserver();
+        },
+        activeValue: {
+            flush: 'post',
+            handler() {
+                this.updateInkBar();
+            }
+        }
+    },
+    mounted() {
+        this.updateInkBar();
+
+        if (this.showNavigators) {
+            this.updateButtonState();
+            this.bindResizeObserver();
+        }
+    },
+    updated() {
+        this.showNavigators && this.updateButtonState();
+    },
+    beforeUnmount() {
+        this.unbindResizeObserver();
+    },
+    methods: {
+        onScroll(event) {
+            this.showNavigators && this.updateButtonState();
+
+            event.preventDefault();
+        },
+        onPrevButtonClick() {
+            const content = this.$refs.content;
+            const width = DomHandler.getWidth(content);
+            const pos = content.scrollLeft - width;
+
+            content.scrollLeft = pos <= 0 ? 0 : pos;
+        },
+        onNextButtonClick() {
+            const content = this.$refs.content;
+            const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();
+            const pos = content.scrollLeft + width;
+            const lastPos = content.scrollWidth - width;
+
+            content.scrollLeft = pos >= lastPos ? lastPos : pos;
+        },
+        bindResizeObserver() {
+            this.resizeObserver = new ResizeObserver(() => this.updateButtonState());
+            this.resizeObserver.observe(this.$refs.list);
+        },
+        unbindResizeObserver() {
+            this.resizeObserver?.unobserve(this.$refs.list);
+            this.resizeObserver = undefined;
+        },
+        updateInkBar() {
+            const { content, inkbar } = this.$refs;
+            const activeTab = DomHandler.findSingle(content, '[data-pc-name="tab"][data-p-active="true"]');
+
+            inkbar.style.width = DomHandler.getOuterWidth(activeTab) + 'px';
+            inkbar.style.left = DomHandler.getOffset(activeTab).left - DomHandler.getOffset(content).left + 'px';
+        },
+        updateButtonState() {
+            const { list, content } = this.$refs;
+            const { scrollLeft, scrollWidth, offsetWidth } = content;
+            const width = DomHandler.getWidth(content);
+
+            this.isPrevButtonEnabled = scrollLeft !== 0;
+            this.isNextButtonEnabled = list.offsetWidth >= offsetWidth && parseInt(scrollLeft) !== scrollWidth - width;
+        },
+        getVisibleButtonWidths() {
+            const { prevBtn, nextBtn } = this.$refs;
+
+            return [prevBtn, nextBtn].reduce((acc, el) => (el ? acc + DomHandler.getWidth(el) : acc), 0);
+        }
+    },
+    computed: {
+        templates() {
+            return this.$pcTabs.$slots;
+        },
+        activeValue() {
+            return this.$pcTabs.d_value;
+        },
+        showNavigators() {
+            return this.$pcTabs.scrollable && this.$pcTabs.showNavigators;
+        },
+        prevButtonAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.previous : undefined;
+        },
+        nextButtonAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.next : undefined;
+        }
+    },
+    components: {
+        Button,
+        ChevronLeftIcon,
+        ChevronRightIcon
+    }
+};
+</script>
diff --git a/components/lib/tablist/package.json b/components/lib/tablist/package.json
new file mode 100644
index 000000000..6af6e5f60
--- /dev/null
+++ b/components/lib/tablist/package.json
@@ -0,0 +1,9 @@
+{
+    "main": "./tab.cjs.js",
+    "module": "./tab.esm.js",
+    "unpkg": "./tab.min.js",
+    "types": "./Tab.d.ts",
+    "browser": {
+        "./sfc": "./Tab.vue"
+    }
+}
diff --git a/components/lib/tablist/style/TabListStyle.d.ts b/components/lib/tablist/style/TabListStyle.d.ts
new file mode 100644
index 000000000..bc782dda2
--- /dev/null
+++ b/components/lib/tablist/style/TabListStyle.d.ts
@@ -0,0 +1,3 @@
+import { BaseStyle } from '../../base/style';
+
+export interface TabListStyle extends BaseStyle {}
diff --git a/components/lib/tablist/style/TabListStyle.js b/components/lib/tablist/style/TabListStyle.js
new file mode 100644
index 000000000..e06ddd208
--- /dev/null
+++ b/components/lib/tablist/style/TabListStyle.js
@@ -0,0 +1,19 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: 'p-tablist',
+    content: ({ instance }) => [
+        'p-tablist-content',
+        {
+            'p-tablist-scroll-container': instance.$pcTabs.scrollable
+        }
+    ],
+    inkbar: 'p-tablist-ink-bar',
+    previousButton: 'p-tablist-prev-button p-tablist-navigator',
+    nextButton: 'p-tablist-next-button p-tablist-navigator'
+};
+
+export default BaseStyle.extend({
+    name: 'tablist',
+    classes
+});
diff --git a/components/lib/tablist/style/package.json b/components/lib/tablist/style/package.json
new file mode 100644
index 000000000..e9170a7df
--- /dev/null
+++ b/components/lib/tablist/style/package.json
@@ -0,0 +1,6 @@
+{
+    "main": "./tabliststyle.cjs.js",
+    "module": "./tabliststyle.esm.js",
+    "unpkg": "./tabliststyle.min.js",
+    "types": "./TabListStyle.d.ts"
+}
diff --git a/components/lib/tabpanel/BaseTabPanel.vue b/components/lib/tabpanel/BaseTabPanel.vue
index 8c428a3ce..ad35956ac 100644
--- a/components/lib/tabpanel/BaseTabPanel.vue
+++ b/components/lib/tabpanel/BaseTabPanel.vue
@@ -6,6 +6,20 @@ export default {
     name: 'BaseTabPanel',
     extends: BaseComponent,
     props: {
+        // in Tabs
+        value: {
+            type: String,
+            default: undefined
+        },
+        as: {
+            type: String,
+            default: 'DIV'
+        },
+        asChild: {
+            type: Boolean,
+            default: false
+        },
+        // in TabView
         header: null,
         headerStyle: null,
         headerClass: null,
diff --git a/components/lib/tabpanel/TabPanel.d.ts b/components/lib/tabpanel/TabPanel.d.ts
index c17411867..0c0875fb8 100755
--- a/components/lib/tabpanel/TabPanel.d.ts
+++ b/components/lib/tabpanel/TabPanel.d.ts
@@ -1,8 +1,8 @@
 /**
  *
- * TabPanel is a helper component for TabPanel component.
+ * TabPanel is a helper component for Tabs component.
  *
- * [Live Demo](https://www.primevue.org/tabview/)
+ * [Live Demo](https://www.primevue.org/tabs/)
  *
  * @module tabpanel
  *
@@ -55,18 +55,22 @@ export interface TabPanelPassThroughOptions {
     root?: TabPanelPassThroughOptionType;
     /**
      * Used to pass attributes to the header's DOM element.
+     * @deprecated since v4. Only supported by TabView.
      */
     header?: TabPanelPassThroughOptionType;
     /**
      * Used to pass attributes to the header action's DOM element.
+     * @deprecated since v4. Only supported by TabView.
      */
     headerAction?: TabPanelPassThroughOptionType;
     /**
      * Used to pass attributes to the title's DOM element.
+     * @deprecated since v4. Only supported by TabView.
      */
     headerTitle?: TabPanelPassThroughOptionType;
     /**
      * Used to pass attributes to the list's DOM element.
+     * @deprecated since v4. Only supported by TabView.
      */
     content?: TabPanelPassThroughOptionType;
     /**
@@ -84,44 +88,64 @@ export interface TabPanelPassThroughAttributes {
  * Defines valid properties in TabPanel component.
  */
 export interface TabPanelProps {
+    /**
+     * Value of tabpanel.
+     */
+    value: string;
+    /**
+     * Use to change the HTML tag of root element.
+     * @defaultValue DIV
+     */
+    as?: string | undefined;
+    /**
+     * When enabled, it changes the default rendered element for the one passed as a child element.
+     * @defaultValue false
+     */
+    asChild?: boolean | undefined;
     /**
      * Orientation of tab headers.
+     * @deprecated since v4. Only supported by TabView.
      */
     header?: string | undefined;
     /**
      * Inline style of the tab header.
+     * @deprecated since v4. Only supported by TabView.
      */
     headerStyle?: any;
     /**
      * Style class of the tab header.
+     * @deprecated since v4. Only supported by TabView.
      */
     headerClass?: any;
     /**
      * Used to pass all properties of the HTMLLiElement to the tab header.
-     * @deprecated since v3.26.0. Use 'pt' property instead.
+     * @deprecated since v4. Only supported by TabView.
      */
     headerProps?: LiHTMLAttributes | undefined;
     /**
      * Used to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.
-     * @deprecated since v3.26.0. Use 'pt' property instead.
+     * @deprecated since v4. Only supported by TabView.
      */
     headerActionProps?: AnchorHTMLAttributes | undefined;
     /**
      * Inline style of the tab content.
+     * @deprecated since v4. Only supported by TabView.
      */
     contentStyle?: any;
     /**
      * Style class of the tab content.
+     * @deprecated since v4. Only supported by TabView.
      */
     contentClass?: any;
     /**
      * Used to pass all properties of the HTMLDivElement to the tab content.
-     * @deprecated since v3.26.0. Use 'pt' property instead.
+     * @deprecated since v4. Only supported by TabView.
      */
     contentProps?: HTMLAttributes | undefined;
     /**
      * Whether the tab is disabled.
      * @defaultValue false
+     * @deprecated since v4. Only supported by TabView.
      */
     disabled?: boolean | undefined;
     /**
@@ -146,18 +170,22 @@ export interface TabPanelProps {
 export interface TabPanelContext {
     /**
      * Current index of the tab.
+     * @deprecated since v4. Only supported by TabView.
      */
     index: number;
     /**
      * Count of tabs
+     * @deprecated since v4. Only supported by TabView.
      */
     count: number;
     /**
      * Whether the tab is first.
+     * @deprecated since v4. Only supported by TabView.
      */
     first: boolean;
     /**
      * Whether the tab is last.
+     * @deprecated since v4. Only supported by TabView.
      */
     last: boolean;
     /**
@@ -176,6 +204,7 @@ export interface TabPanelSlots {
     default(): VNode[];
     /**
      * Custom header template.
+     * @deprecated since v4. Only supported by TabView.
      */
     header(): VNode[];
 }
@@ -185,9 +214,9 @@ export interface TabPanelEmits {}
 /**
  * **PrimeVue - TabPanel**
  *
- * _TabPanel is a helper component for TabView component._
+ * _TabPanel is a helper component for Tabs component._
  *
- * [Live Demo](https://www.primevue.org/tabview/)
+ * [Live Demo](https://www.primevue.org/tabs/)
  * --- ---
  * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
  *
diff --git a/components/lib/tabpanel/TabPanel.vue b/components/lib/tabpanel/TabPanel.vue
index 90790ba53..ba2cafc2b 100755
--- a/components/lib/tabpanel/TabPanel.vue
+++ b/components/lib/tabpanel/TabPanel.vue
@@ -1,12 +1,56 @@
 <template>
-    <slot></slot>
+    <slot v-if="!$pcTabs"></slot>
+    <template v-else>
+        <template v-if="!asChild">
+            <component v-if="$pcTabs?.lazy ? active : true" v-show="$pcTabs?.lazy ? true : active" :is="as" :class="cx('root')" v-bind="attrs">
+                <slot></slot>
+            </component>
+        </template>
+
+        <slot v-else :class="cx('root')" :active="active" :a11yAttrs="a11yAttrs"></slot>
+    </template>
 </template>
 
 <script>
+import { ObjectUtils } from 'primevue/utils';
+import { mergeProps } from 'vue';
 import BaseTabPanel from './BaseTabPanel.vue';
 
 export default {
     name: 'TabPanel',
-    extends: BaseTabPanel
+    extends: BaseTabPanel,
+    inheritAttrs: false,
+    inject: ['$pcTabs'],
+    computed: {
+        active() {
+            return ObjectUtils.equals(this.$pcTabs?.d_value, this.value);
+        },
+        id() {
+            return `${this.$pcTabs?.id}_tabpanel_${this.value}`;
+        },
+        ariaLabelledby() {
+            return `${this.$pcTabs?.id}_tab_${this.value}`;
+        },
+        attrs() {
+            return mergeProps(this.a11yAttrs, this.ptmi('root', this.ptParams));
+        },
+        a11yAttrs() {
+            return {
+                id: this.id,
+                tabindex: this.$pcTabs?.tabindex,
+                role: 'tabpanel',
+                'aria-labelledby': this.ariaLabelledby,
+                'data-pc-name': 'tabpanel',
+                'data-p-active': this.active
+            };
+        },
+        ptParams() {
+            return {
+                context: {
+                    active: this.active
+                }
+            };
+        }
+    }
 };
 </script>
diff --git a/components/lib/tabpanel/style/TabPanelStyle.js b/components/lib/tabpanel/style/TabPanelStyle.js
index 012759215..724ea4281 100644
--- a/components/lib/tabpanel/style/TabPanelStyle.js
+++ b/components/lib/tabpanel/style/TabPanelStyle.js
@@ -1,5 +1,15 @@
 import BaseStyle from 'primevue/base/style';
 
+const classes = {
+    root: ({ instance }) => [
+        'p-tabpanel',
+        {
+            'p-active': instance.active
+        }
+    ]
+};
+
 export default BaseStyle.extend({
-    name: 'tabpanel'
+    name: 'tabpanel',
+    classes
 });
diff --git a/components/lib/tabpanels/BaseTabPanels.vue b/components/lib/tabpanels/BaseTabPanels.vue
new file mode 100644
index 000000000..dd09b25bf
--- /dev/null
+++ b/components/lib/tabpanels/BaseTabPanels.vue
@@ -0,0 +1,16 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import TabPanelsStyle from 'primevue/tabpanels/style';
+
+export default {
+    name: 'BaseTabPanels',
+    extends: BaseComponent,
+    props: {},
+    style: TabPanelsStyle,
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>
diff --git a/components/lib/tabpanels/TabPanels.d.ts b/components/lib/tabpanels/TabPanels.d.ts
new file mode 100755
index 000000000..3288e1df2
--- /dev/null
+++ b/components/lib/tabpanels/TabPanels.d.ts
@@ -0,0 +1,126 @@
+/**
+ *
+ * TabPanels is a helper component for Tabs component.
+ *
+ * [Live Demo](https://www.primevue.org/tabview/)
+ *
+ * @module tabpanels
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+
+export declare type TabPanelsPassThroughOptionType = TabPanelsPassThroughAttributes | ((options: TabPanelsPassThroughMethodOptions) => TabPanelsPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TabPanelsPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: TabPanelsProps;
+    /**
+     * Defines current options.
+     */
+    context: TabPanelsContext;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TabPanelsProps.pt}
+ */
+export interface TabPanelsPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: TabPanelsPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+export interface TabPanelsPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines valid properties in TabPanels component.
+ */
+export interface TabPanelsProps {
+    /**
+     * It generates scoped CSS variables using design tokens for the component.
+     */
+    dt?: DesignToken<any>;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {TabPanelsPassThroughOptions}
+     */
+    pt?: PassThrough<TabPanelsPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+}
+
+/**
+ * Defines current options in TabPanels component.
+ */
+export interface TabPanelsContext {
+    [key: string]: any;
+}
+
+/**
+ * Defines valid slots in TabPanels slots.
+ */
+export interface TabPanelsSlots {
+    /**
+     * Custom content template.
+     */
+    default(): VNode[];
+}
+
+export interface TabPanelsEmits {}
+
+/**
+ * **PrimeVue - TabPanels**
+ *
+ * _TabPanels is a helper component for Tabs component._
+ *
+ * [Live Demo](https://www.primevue.org/tabs/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare class TabPanels extends ClassComponent<TabPanelsProps, TabPanelsSlots, TabPanelsEmits> {}
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        TabPanels: GlobalComponentConstructor<TabPanels>;
+    }
+}
+
+export default TabPanels;
diff --git a/components/lib/tabpanels/TabPanels.vue b/components/lib/tabpanels/TabPanels.vue
new file mode 100644
index 000000000..1eaf82091
--- /dev/null
+++ b/components/lib/tabpanels/TabPanels.vue
@@ -0,0 +1,15 @@
+<template>
+    <div :class="cx('root')" role="presentation" v-bind="ptmi('root')">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+import BaseTabPanels from './BaseTabPanels.vue';
+
+export default {
+    name: 'TabPanels',
+    extends: BaseTabPanels,
+    inheritAttrs: false
+};
+</script>
diff --git a/components/lib/tabpanels/package.json b/components/lib/tabpanels/package.json
new file mode 100644
index 000000000..96e599c0e
--- /dev/null
+++ b/components/lib/tabpanels/package.json
@@ -0,0 +1,9 @@
+{
+    "main": "./tabpanels.cjs.js",
+    "module": "./tabpanels.esm.js",
+    "unpkg": "./tabpanels.min.js",
+    "types": "./TabPanels.d.ts",
+    "browser": {
+        "./sfc": "./TabPanels.vue"
+    }
+}
diff --git a/components/lib/tabpanels/style/TabPanelsStyle.d.ts b/components/lib/tabpanels/style/TabPanelsStyle.d.ts
new file mode 100644
index 000000000..1145d89f0
--- /dev/null
+++ b/components/lib/tabpanels/style/TabPanelsStyle.d.ts
@@ -0,0 +1,3 @@
+import { BaseStyle } from '../../base/style';
+
+export interface TabPanelsStyle extends BaseStyle {}
diff --git a/components/lib/tabpanels/style/TabPanelsStyle.js b/components/lib/tabpanels/style/TabPanelsStyle.js
new file mode 100644
index 000000000..9a373a3d0
--- /dev/null
+++ b/components/lib/tabpanels/style/TabPanelsStyle.js
@@ -0,0 +1,10 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: 'p-tabpanels'
+};
+
+export default BaseStyle.extend({
+    name: 'tabpanels',
+    classes
+});
diff --git a/components/lib/tabpanels/style/package.json b/components/lib/tabpanels/style/package.json
new file mode 100644
index 000000000..a24af094b
--- /dev/null
+++ b/components/lib/tabpanels/style/package.json
@@ -0,0 +1,6 @@
+{
+    "main": "./tabpanelsstyle.cjs.js",
+    "module": "./tabpanelsstyle.esm.js",
+    "unpkg": "./tabpanelsstyle.min.js",
+    "types": "./TabPanelsStyle.d.ts"
+}
diff --git a/components/lib/tabs/BaseTabs.vue b/components/lib/tabs/BaseTabs.vue
new file mode 100644
index 000000000..a206c9d09
--- /dev/null
+++ b/components/lib/tabs/BaseTabs.vue
@@ -0,0 +1,58 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import TabsStyle from 'primevue/tabs/style';
+
+export default {
+    name: 'BaseTabs',
+    extends: BaseComponent,
+    props: {
+        value: {
+            type: String,
+            default: undefined
+        },
+        lazy: {
+            type: Boolean,
+            default: false
+        },
+        orientation: {
+            type: String,
+            default: 'horizontal'
+        },
+        scrollable: {
+            type: Boolean,
+            default: false
+        },
+        showNavigators: {
+            type: Boolean,
+            default: true
+        },
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        selectOnFocus: {
+            type: Boolean,
+            default: false
+        },
+        previousButtonProps: {
+            type: Object,
+            default: () => {
+                return { severity: 'secondary', text: true };
+            }
+        },
+        nextButtonProps: {
+            type: Object,
+            default: () => {
+                return { severity: 'secondary', text: true };
+            }
+        }
+    },
+    style: TabsStyle,
+    provide() {
+        return {
+            $pcTabs: this,
+            $parentInstance: this
+        };
+    }
+};
+</script>
diff --git a/components/lib/tabs/Tabs.d.ts b/components/lib/tabs/Tabs.d.ts
new file mode 100644
index 000000000..435850756
--- /dev/null
+++ b/components/lib/tabs/Tabs.d.ts
@@ -0,0 +1,202 @@
+/**
+ *
+ * Tabs facilitates seamless switching between different views.
+ *
+ * [Live Demo](https://www.primevue.org/tabs/)
+ *
+ * @module tabs
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { ButtonProps } from '../button';
+import { PassThroughOptions } from '../passthrough';
+import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+
+export declare type TabsPassThroughOptionType = TabsPassThroughAttributes | ((options: TabsPassThroughMethodOptions) => TabsPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TabsPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: TabsProps;
+    /**
+     * Defines current inline state.
+     */
+    state: TabsState;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TabsProps.pt}
+ */
+export interface TabsPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: TabsPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface TabsPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Tabs component.
+ */
+export interface TabsState {
+    /**
+     * Current active value state.
+     */
+    d_value: number;
+    /**
+     * Unique id for the Tabs component.
+     */
+    id: string;
+}
+
+/**
+ * Defines valid properties in Tabs component.
+ */
+export interface TabsProps {
+    /**
+     * Value of the active tab.
+     */
+    value: string;
+    /**
+     * When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.
+     * @defaultValue false
+     */
+    lazy?: boolean | undefined;
+    /**
+     * Specifies the layout of the component, valid values are 'horizontal' and 'vertical'.
+     * @defaultValue horizontal
+     */
+    orientation?: 'horizontal' | 'vertical' | undefined;
+    /**
+     * When specified, enables horizontal and/or vertical scrolling.
+     * @defaultValue false
+     */
+    scrollable?: boolean | undefined;
+    /**
+     * Whether to display navigation buttons in container when scrollable is enabled.
+     * @defaultValue true
+     */
+    showNavigators?: boolean | undefined;
+    /**
+     * Index of the element in tabbing order.
+     * @defaultValue 0
+     */
+    tabindex?: number | undefined;
+    /**
+     * When enabled, the focused tab is activated.
+     * @defaultValue false
+     */
+    selectOnFocus?: boolean | undefined;
+    /**
+     * Used to pass all properties of the HTMLButtonElement to the previous button.
+     */
+    previousButtonProps?: ButtonProps | undefined;
+    /**
+     * Used to pass all properties of the HTMLButtonElement to the next button.
+     */
+    nextButtonProps?: ButtonProps | undefined;
+    /**
+     * It generates scoped CSS variables using design tokens for the component.
+     */
+    dt?: DesignToken<any>;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {TabsPassThroughOptions}
+     */
+    pt?: PassThrough<TabsPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * Defines valid slots in Tabs slots.
+ */
+export interface TabsSlots {
+    /**
+     * Default slot to detect TabPanel components.
+     */
+    default(): VNode[];
+    /**
+     * Previous button icon template for the scrollable component.
+     */
+    previousicon(): VNode[];
+    /**
+     * Next button icon template for the scrollable component.
+     */
+    nexticon(): VNode[];
+}
+
+/**
+ * Defines valid emits in Tabs component.
+ */
+export interface TabsEmits {
+    /**
+     * Emitted when the value changes.
+     * @param {string} value - Current value.
+     */
+    'update:value'(value: number): void;
+}
+
+/**
+ *
+ * **PrimeVue - Tabs**
+ *
+ * _Tabs facilitates seamless switching between different views._
+ *
+ * [Live Demo](https://www.primevue.org/tabs/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare class Tabs extends ClassComponent<TabsProps, TabsSlots, TabsEmits> {}
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        Tabs: GlobalComponentConstructor<Tabs>;
+    }
+}
+
+export default Tabs;
diff --git a/components/lib/tabs/Tabs.vue b/components/lib/tabs/Tabs.vue
new file mode 100644
index 000000000..e1591e917
--- /dev/null
+++ b/components/lib/tabs/Tabs.vue
@@ -0,0 +1,42 @@
+<template>
+    <div :class="cx('root')" v-bind="ptmi('root')">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+import { UniqueComponentId } from 'primevue/utils';
+import BaseTabs from './BaseTabs.vue';
+
+export default {
+    name: 'Tabs',
+    extends: BaseTabs,
+    inheritAttrs: false,
+    emits: ['update:value'],
+    data() {
+        return {
+            id: this.$attrs.id,
+            d_value: this.value
+        };
+    },
+    watch: {
+        '$attrs.id'(newValue) {
+            this.id = newValue || UniqueComponentId();
+        },
+        value(newValue) {
+            this.d_value = newValue;
+        }
+    },
+    mounted() {
+        this.id = this.id || UniqueComponentId();
+    },
+    methods: {
+        updateValue(newValue) {
+            if (this.d_value !== newValue) {
+                this.d_value = newValue;
+                this.$emit('update:value', newValue);
+            }
+        }
+    }
+};
+</script>
diff --git a/components/lib/tabs/package.json b/components/lib/tabs/package.json
new file mode 100644
index 000000000..4247dedf6
--- /dev/null
+++ b/components/lib/tabs/package.json
@@ -0,0 +1,9 @@
+{
+    "main": "./tabs.cjs.js",
+    "module": "./tabs.esm.js",
+    "unpkg": "./tabs.min.js",
+    "types": "./Tabs.d.ts",
+    "browser": {
+        "./sfc": "./Tabs.vue"
+    }
+}
diff --git a/components/lib/tabs/style/TabsStyle.d.ts b/components/lib/tabs/style/TabsStyle.d.ts
new file mode 100644
index 000000000..a15edfce2
--- /dev/null
+++ b/components/lib/tabs/style/TabsStyle.d.ts
@@ -0,0 +1,3 @@
+import { BaseStyle } from '../../base/style';
+
+export interface TabsStyle extends BaseStyle {}
diff --git a/components/lib/tabs/style/TabsStyle.js b/components/lib/tabs/style/TabsStyle.js
new file mode 100644
index 000000000..0840c7a74
--- /dev/null
+++ b/components/lib/tabs/style/TabsStyle.js
@@ -0,0 +1,16 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: ({ props }) => [
+        'p-tabs p-component',
+        {
+            'p-tabs-scrollable': props.scrollable,
+            'p-tabs-vertical': props.orientation === 'vertical'
+        }
+    ]
+};
+
+export default BaseStyle.extend({
+    name: 'tabs',
+    classes
+});
diff --git a/components/lib/tabs/style/package.json b/components/lib/tabs/style/package.json
new file mode 100644
index 000000000..c1362299c
--- /dev/null
+++ b/components/lib/tabs/style/package.json
@@ -0,0 +1,6 @@
+{
+    "main": "./tabsstyle.cjs.js",
+    "module": "./tabsstyle.esm.js",
+    "unpkg": "./tabsstyle.min.js",
+    "types": "./TabsStyle.d.ts"
+}
diff --git a/components/lib/themes/primeone/base/index.js b/components/lib/themes/primeone/base/index.js
index e05855290..1d139c184 100644
--- a/components/lib/themes/primeone/base/index.js
+++ b/components/lib/themes/primeone/base/index.js
@@ -69,6 +69,7 @@ import splitter from 'primevue/themes/primeone/base/splitter';
 import stepper from 'primevue/themes/primeone/base/stepper';
 import steps from 'primevue/themes/primeone/base/steps';
 import tabmenu from 'primevue/themes/primeone/base/tabmenu';
+import tabs from 'primevue/themes/primeone/base/tabs';
 import tabview from 'primevue/themes/primeone/base/tabview';
 import tag from 'primevue/themes/primeone/base/tag';
 import terminal from 'primevue/themes/primeone/base/terminal';
@@ -158,6 +159,7 @@ export default {
         steps,
         stepper,
         tabmenu,
+        tabs,
         tabview,
         textarea,
         tieredmenu,
diff --git a/components/lib/themes/primeone/base/tabs/index.js b/components/lib/themes/primeone/base/tabs/index.js
new file mode 100644
index 000000000..235b5a5da
--- /dev/null
+++ b/components/lib/themes/primeone/base/tabs/index.js
@@ -0,0 +1,94 @@
+export default {
+    css: ({ dt }) => `
+.p-tabs {
+    display: flex;
+    flex-direction: column;
+}
+
+.p-tablist-scroll-container {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+}
+
+.p-tablist-scroll-container::-webkit-scrollbar {
+    display: none;
+}
+
+.p-tablist {
+    position: relative;
+    background: ${dt('tabs.nav.background')};
+}
+
+.p-tablist-content {
+    position: relative;
+    display: flex;
+    border: 1px solid ${dt('tabs.nav.border.color')};
+    border-width: 0 0 1px 0;
+}
+
+.p-tablist-navigator.p-button {
+    position: absolute;
+    z-index: 2;
+}
+
+.p-tablist-navigator.p-tablist-prev-button {
+    top: 0;
+    left: 0;
+}
+
+.p-tablist-navigator.p-tablist-next-button {
+    top: 0;
+    right: 0;
+}
+
+.p-tab {
+    cursor: pointer;
+    border-style: solid;
+    border-width: 0 0 1px 0;
+    border-color: transparent transparent ${dt('tabs.header.border.color')} transparent;
+    color: ${dt('tabs.header.color')};
+    background: ${dt('tabs.nav.background')};
+    padding: 1rem 1.125rem;
+    font-weight: 600;
+    border-top-right-radius: ${dt('rounded.base')};
+    border-top-left-radius: ${dt('rounded.base')};
+    transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    margin: 0 0 -1px 0;
+    outline-color: transparent;
+    line-height: 1;
+    white-space: nowrap;
+}
+
+.p-tab:not(.p-disabled):focus-visible {
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: -1px;
+}
+
+.p-tab:not(.p-active):not(.p-disabled):hover {
+    color: ${dt('tabs.header.hover.color')};
+}
+
+.p-tab.p-active {
+    color: ${dt('tabs.header.active.color')};
+}
+
+.p-tabpanels {
+    background: ${dt('tabs.navigator.content.background')};
+    color: ${dt('tabs.navigator.content.color')};
+    padding: 0.875rem 1.125rem 1.125rem 1.125rem;
+}
+
+.p-tablist-ink-bar {
+    z-index: 1;
+    display: block;
+    position: absolute;
+    bottom: -1px;
+    height: 1px;
+    background-color: ${dt('tabs.header.active.border.color')};
+    transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
+}
+`
+};
diff --git a/components/lib/themes/primeone/base/tabs/package.json b/components/lib/themes/primeone/base/tabs/package.json
new file mode 100644
index 000000000..f8e9d7ae0
--- /dev/null
+++ b/components/lib/themes/primeone/base/tabs/package.json
@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}
diff --git a/components/lib/themes/primeone/presets/aura/index.js b/components/lib/themes/primeone/presets/aura/index.js
index e5195b58c..a1c4d3625 100644
--- a/components/lib/themes/primeone/presets/aura/index.js
+++ b/components/lib/themes/primeone/presets/aura/index.js
@@ -68,6 +68,7 @@ import splitter from 'primevue/themes/primeone/presets/aura/splitter';
 import stepper from 'primevue/themes/primeone/presets/aura/stepper';
 import steps from 'primevue/themes/primeone/presets/aura/steps';
 import tabmenu from 'primevue/themes/primeone/presets/aura/tabmenu';
+import tabs from 'primevue/themes/primeone/presets/aura/tabs';
 import tabview from 'primevue/themes/primeone/presets/aura/tabview';
 import tag from 'primevue/themes/primeone/presets/aura/tag';
 import terminal from 'primevue/themes/primeone/presets/aura/terminal';
@@ -303,6 +304,7 @@ export default {
         stepper,
         steps,
         tabmenu,
+        tabs,
         tabview,
         textarea,
         tieredmenu,
diff --git a/components/lib/themes/primeone/presets/aura/tabs/index.js b/components/lib/themes/primeone/presets/aura/tabs/index.js
new file mode 100644
index 000000000..fd5331153
--- /dev/null
+++ b/components/lib/themes/primeone/presets/aura/tabs/index.js
@@ -0,0 +1,50 @@
+export default {
+    colorScheme: {
+        light: {
+            nav: {
+                background: '{surface.0}',
+                borderColor: '{surface.200}'
+            },
+            header: {
+                borderColor: '{surface.200}',
+                activeBorderColor: '{primary.color}',
+                color: '{surface.500}',
+                hoverColor: '{surface.700}',
+                activeColor: '{primary.color}'
+            },
+            navigatorIcon: {
+                background: '{surface.0}',
+                color: '{surface.500}',
+                hoverColor: '{surface.700}',
+                boxShadow: '0px 0px 10px 50px rgba(255, 255, 255, 0.6)'
+            },
+            content: {
+                background: '{surface.0}',
+                color: '{surface.700}'
+            }
+        },
+        dark: {
+            nav: {
+                background: '{surface.900}',
+                borderColor: '{surface.700}'
+            },
+            header: {
+                borderColor: '{surface.700}',
+                activeBorderColor: '{primary.color}',
+                color: '{surface.400}',
+                hoverColor: '{surface.0}',
+                activeColor: '{primary.color}'
+            },
+            navigatorIcon: {
+                background: '{surface.900}',
+                color: '{surface.400}',
+                hoverColor: '{surface.0}',
+                boxShadow: '0px 0px 10px 50px color-mix(in srgb, {surface.900}, transparent 50%)'
+            },
+            content: {
+                background: '{surface.900}',
+                color: '{surface.0}'
+            }
+        }
+    }
+};
diff --git a/components/lib/themes/primeone/presets/aura/tabs/package.json b/components/lib/themes/primeone/presets/aura/tabs/package.json
new file mode 100644
index 000000000..f8e9d7ae0
--- /dev/null
+++ b/components/lib/themes/primeone/presets/aura/tabs/package.json
@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}
diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 1fd2d82d1..f715a9551 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -5478,7 +5478,7 @@
                         }
                     ],
                     "methods": [],
-                    "extendedBy": "AccordionStyle,AccordionTabStyle,AnimateOnScrollStyle,AutoCompleteStyle,AvatarStyle,AvatarGroupStyle,BadgeStyle,BadgeDirectiveStyle,BaseComponentStyle,BaseIconStyle,BlockUIStyle,BreadcrumbStyle,ButtonStyle,ButtonGroupStyle,CardStyle,CarouselStyle,CascadeSelectStyle,ChartStyle,CheckboxStyle,ChipStyle,ColorPickerStyle,ColumnStyle,ColumnGroupStyle,ConfirmDialogStyle,ConfirmPopupStyle,ContextMenuStyle,DataTableStyle,DataViewStyle,DatePickerStyle,DeferredContentStyle,DialogStyle,DividerStyle,DockStyle,DrawerStyle,DynamicDialogStyle,EditorStyle,FieldsetStyle,FileUploadStyle,FloatLabelStyle,FocusTrapStyle,GalleriaStyle,IconFieldStyle,ImageStyle,InlineMessageStyle,InplaceStyle,InputChipsStyle,InputGroupStyle,InputGroupAddonStyle,InputIconStyle,InputMaskStyle,InputNumberStyle,InputOtpStyle,InputTextStyle,KnobStyle,ListboxStyle,MegaMenuStyle,MenuStyle,MenubarStyle,MessageStyle,MeterGroupStyle,MultiSelectStyle,OrderListStyle,OrganizationChartStyle,PaginatorStyle,PanelStyle,PanelMenuStyle,PasswordStyle,PickListStyle,PopoverStyle,PortalStyle,ProgressBarStyle,ProgressSpinnerStyle,RadioButtonStyle,RatingStyle,AccordionStyle,RowStyle,ScrollPanelStyle,ScrollTopStyle,SelectStyle,SelectButtonStyle,SkeletonStyle,SliderStyle,SpeedDialStyle,SplitButtonStyle,SplitterStyle,SplitterPanelStyle,StepperStyle,StepperPanelStyle,StepsStyle,StyleClassStyle,TabMenuStyle,TabPanelStyle,TabViewStyle,TagStyle,TerminalStyle,TextareaStyle,TieredMenuStyle,TimelineStyle,ToastStyle,ToggleButtonStyle,ToggleSwitchStyle,ToolbarStyle,TooltipStyle,TreeStyle,TreeSelectStyle,TreeTableStyle,VirtualScrollerStyle"
+                    "extendedBy": "AccordionStyle,AccordionTabStyle,AnimateOnScrollStyle,AutoCompleteStyle,AvatarStyle,AvatarGroupStyle,BadgeStyle,BadgeDirectiveStyle,BaseComponentStyle,BaseIconStyle,BlockUIStyle,BreadcrumbStyle,ButtonStyle,ButtonGroupStyle,CardStyle,CarouselStyle,CascadeSelectStyle,ChartStyle,CheckboxStyle,ChipStyle,ColorPickerStyle,ColumnStyle,ColumnGroupStyle,ConfirmDialogStyle,ConfirmPopupStyle,ContextMenuStyle,DataTableStyle,DataViewStyle,DatePickerStyle,DeferredContentStyle,DialogStyle,DividerStyle,DockStyle,DrawerStyle,DynamicDialogStyle,EditorStyle,FieldsetStyle,FileUploadStyle,FloatLabelStyle,FocusTrapStyle,GalleriaStyle,IconFieldStyle,ImageStyle,InlineMessageStyle,InplaceStyle,InputChipsStyle,InputGroupStyle,InputGroupAddonStyle,InputIconStyle,InputMaskStyle,InputNumberStyle,InputOtpStyle,InputTextStyle,KnobStyle,ListboxStyle,MegaMenuStyle,MenuStyle,MenubarStyle,MessageStyle,MeterGroupStyle,MultiSelectStyle,OrderListStyle,OrganizationChartStyle,PaginatorStyle,PanelStyle,PanelMenuStyle,PasswordStyle,PickListStyle,PopoverStyle,PortalStyle,ProgressBarStyle,ProgressSpinnerStyle,RadioButtonStyle,RatingStyle,AccordionStyle,RowStyle,ScrollPanelStyle,ScrollTopStyle,SelectStyle,SelectButtonStyle,SkeletonStyle,SliderStyle,SpeedDialStyle,SplitButtonStyle,SplitterStyle,SplitterPanelStyle,StepperStyle,StepperPanelStyle,StepsStyle,StyleClassStyle,TabStyle,TabListStyle,TabMenuStyle,TabPanelStyle,TabPanelsStyle,TabsStyle,TabViewStyle,TagStyle,TerminalStyle,TextareaStyle,TieredMenuStyle,TimelineStyle,ToastStyle,ToggleButtonStyle,ToggleSwitchStyle,ToolbarStyle,TooltipStyle,TreeStyle,TreeSelectStyle,TreeTableStyle,VirtualScrollerStyle"
                 }
             }
         }
@@ -56558,6 +56558,550 @@
         }
     },
     "styled/PrimeVueStyled": {},
+    "tab": {
+        "description": "Tab is a helper component for Tabs component.\n\n[Live Demo](https://www.primevue.org/tabs/)",
+        "components": {
+            "default": {
+                "description": "Tab is a helper component for Tabs component.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "TabPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "instance",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines instance."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TabProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TabContext",
+                            "default": "",
+                            "description": "Defines current options."
+                        },
+                        {
+                            "name": "attrs",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines valid attributes."
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines parent options."
+                        },
+                        {
+                            "name": "global",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | object",
+                            "default": "",
+                            "description": "Defines passthrough(pt) options in global config."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TabPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "TabProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "default": "",
+                            "description": "Used to manage all lifecycle hooks."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TabPassThroughAttributes": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "TabProps": {
+                    "description": "Defines valid properties in Tab component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Value of tab."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether the tab is disabled."
+                        },
+                        {
+                            "name": "as",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "BUTTON",
+                            "description": "Use to change the HTML tag of root element."
+                        },
+                        {
+                            "name": "asChild",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it changes the default rendered element for the one passed as a child element."
+                        },
+                        {
+                            "name": "dt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "It generates scoped CSS variables using design tokens for the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThrough<TabPassThroughOptions>",
+                            "default": "",
+                            "description": "Used to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TabContext": {
+                    "description": "Defines current options in Tab component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Whether the tab is active."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TabSlots": {
+                    "description": "Defines valid slots in Tab slots.",
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": [
+                        {
+                            "name": "default",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom content template."
+                        }
+                    ]
+                },
+                "TabEmits": {
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TabPassThroughOptionType": {
+                    "values": "TabPassThroughAttributes | (options: TabPassThroughMethodOptions) => undefined | string | null | undefined"
+                }
+            }
+        }
+    },
+    "tab/style/TabStyle": {
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "TabStyle": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "css",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "classes",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": ""
+                        },
+                        {
+                            "name": "inlineStyles",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": ""
+                        },
+                        {
+                            "name": "loadStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "getStyleSheet",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        }
+                    ],
+                    "methods": [],
+                    "extendedTypes": "BaseStyle"
+                }
+            }
+        }
+    },
+    "tablist": {
+        "description": "TabList is a helper component for Tabs component.\n\n[Live Demo](https://www.primevue.org/tabs/)",
+        "components": {
+            "default": {
+                "description": "TabList is a helper component for Tabs component.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "TabListPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "instance",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines instance."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TabListProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TabListContext",
+                            "default": "",
+                            "description": "Defines current options."
+                        },
+                        {
+                            "name": "attrs",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines valid attributes."
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines parent options."
+                        },
+                        {
+                            "name": "global",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | object",
+                            "default": "",
+                            "description": "Defines passthrough(pt) options in global config."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TabListPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "TabListProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabListPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "previousButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabListPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the previous button component."
+                        },
+                        {
+                            "name": "nextButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabListPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the next button component."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabListPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "inkbar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabListPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the inkbar's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "default": "",
+                            "description": "Used to manage all lifecycle hooks."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TabListPassThroughAttributes": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "TabListProps": {
+                    "description": "Defines valid properties in TabList component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "dt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "It generates scoped CSS variables using design tokens for the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThrough<TabListPassThroughOptions>",
+                            "default": "",
+                            "description": "Used to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TabListContext": {
+                    "description": "Defines current options in TabList component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "TabListSlots": {
+                    "description": "Defines valid slots in TabList slots.",
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": [
+                        {
+                            "name": "default",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom content template."
+                        }
+                    ]
+                },
+                "TabListEmits": {
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TabListPassThroughOptionType": {
+                    "values": "TabListPassThroughAttributes | (options: TabListPassThroughMethodOptions) => undefined | string | null | undefined"
+                }
+            }
+        }
+    },
+    "tablist/style/TabListStyle": {
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "TabListStyle": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "css",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "classes",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": ""
+                        },
+                        {
+                            "name": "inlineStyles",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": ""
+                        },
+                        {
+                            "name": "loadStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "getStyleSheet",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        }
+                    ],
+                    "methods": [],
+                    "extendedTypes": "BaseStyle"
+                }
+            }
+        }
+    },
     "tabmenu": {
         "description": "TabMenu is a navigation component that displays items as tab headers. Example below uses nested routes with TabMenu.\n\n[Live Demo](https://www.primevue.org/tabmenu/)",
         "components": {
@@ -57018,10 +57562,10 @@
         }
     },
     "tabpanel": {
-        "description": "TabPanel is a helper component for TabPanel component.\n\n[Live Demo](https://www.primevue.org/tabview/)",
+        "description": "TabPanel is a helper component for Tabs component.\n\n[Live Demo](https://www.primevue.org/tabs/)",
         "components": {
             "default": {
-                "description": "TabPanel is a helper component for TabView component.",
+                "description": "TabPanel is a helper component for Tabs component.",
                 "methods": {
                     "description": "Defines methods that can be accessed by the component's reference.",
                     "values": []
@@ -57107,7 +57651,8 @@
                             "readonly": false,
                             "type": "TabPanelPassThroughOptionType",
                             "default": "",
-                            "description": "Used to pass attributes to the header's DOM element."
+                            "description": "Used to pass attributes to the header's DOM element.",
+                            "deprecated": "since v4. Only supported by TabView."
                         },
                         {
                             "name": "headerAction",
@@ -57115,7 +57660,8 @@
                             "readonly": false,
                             "type": "TabPanelPassThroughOptionType",
                             "default": "",
-                            "description": "Used to pass attributes to the header action's DOM element."
+                            "description": "Used to pass attributes to the header action's DOM element.",
+                            "deprecated": "since v4. Only supported by TabView."
                         },
                         {
                             "name": "headerTitle",
@@ -57123,7 +57669,8 @@
                             "readonly": false,
                             "type": "TabPanelPassThroughOptionType",
                             "default": "",
-                            "description": "Used to pass attributes to the title's DOM element."
+                            "description": "Used to pass attributes to the title's DOM element.",
+                            "deprecated": "since v4. Only supported by TabView."
                         },
                         {
                             "name": "content",
@@ -57131,7 +57678,8 @@
                             "readonly": false,
                             "type": "TabPanelPassThroughOptionType",
                             "default": "",
-                            "description": "Used to pass attributes to the list's DOM element."
+                            "description": "Used to pass attributes to the list's DOM element.",
+                            "deprecated": "since v4. Only supported by TabView."
                         },
                         {
                             "name": "hooks",
@@ -57160,13 +57708,38 @@
                     "description": "Defines valid properties in TabPanel component.",
                     "relatedProp": "",
                     "props": [
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Value of tabpanel."
+                        },
+                        {
+                            "name": "as",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "DIV",
+                            "description": "Use to change the HTML tag of root element."
+                        },
+                        {
+                            "name": "asChild",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it changes the default rendered element for the one passed as a child element."
+                        },
                         {
                             "name": "header",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Orientation of tab headers."
+                            "description": "Orientation of tab headers.",
+                            "deprecated": "since v4. Only supported by TabView."
                         },
                         {
                             "name": "headerStyle",
@@ -57174,7 +57747,8 @@
                             "readonly": false,
                             "type": "any",
                             "default": "",
-                            "description": "Inline style of the tab header."
+                            "description": "Inline style of the tab header.",
+                            "deprecated": "since v4. Only supported by TabView."
                         },
                         {
                             "name": "headerClass",
@@ -57182,7 +57756,8 @@
                             "readonly": false,
                             "type": "any",
                             "default": "",
-                            "description": "Style class of the tab header."
+                            "description": "Style class of the tab header.",
+                            "deprecated": "since v4. Only supported by TabView."
                         },
                         {
                             "name": "headerProps",
@@ -57191,7 +57766,7 @@
                             "type": "LiHTMLAttributes",
                             "default": "",
                             "description": "Used to pass all properties of the HTMLLiElement to the tab header.",
-                            "deprecated": "since v3.26.0. Use 'pt' property instead."
+                            "deprecated": "since v4. Only supported by TabView."
                         },
                         {
                             "name": "headerActionProps",
@@ -57200,7 +57775,7 @@
                             "type": "AnchorHTMLAttributes",
                             "default": "",
                             "description": "Used to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.",
-                            "deprecated": "since v3.26.0. Use 'pt' property instead."
+                            "deprecated": "since v4. Only supported by TabView."
                         },
                         {
                             "name": "contentStyle",
@@ -57208,7 +57783,8 @@
                             "readonly": false,
                             "type": "any",
                             "default": "",
-                            "description": "Inline style of the tab content."
+                            "description": "Inline style of the tab content.",
+                            "deprecated": "since v4. Only supported by TabView."
                         },
                         {
                             "name": "contentClass",
@@ -57216,7 +57792,8 @@
                             "readonly": false,
                             "type": "any",
                             "default": "",
-                            "description": "Style class of the tab content."
+                            "description": "Style class of the tab content.",
+                            "deprecated": "since v4. Only supported by TabView."
                         },
                         {
                             "name": "contentProps",
@@ -57225,7 +57802,7 @@
                             "type": "HTMLAttributes",
                             "default": "",
                             "description": "Used to pass all properties of the HTMLDivElement to the tab content.",
-                            "deprecated": "since v3.26.0. Use 'pt' property instead."
+                            "deprecated": "since v4. Only supported by TabView."
                         },
                         {
                             "name": "disabled",
@@ -57233,7 +57810,8 @@
                             "readonly": false,
                             "type": "boolean",
                             "default": "false",
-                            "description": "Whether the tab is disabled."
+                            "description": "Whether the tab is disabled.",
+                            "deprecated": "since v4. Only supported by TabView."
                         },
                         {
                             "name": "dt",
@@ -57272,7 +57850,8 @@
                             "readonly": false,
                             "type": "number",
                             "default": "",
-                            "description": "Current index of the tab."
+                            "description": "Current index of the tab.",
+                            "deprecated": "since v4. Only supported by TabView."
                         },
                         {
                             "name": "count",
@@ -57280,7 +57859,8 @@
                             "readonly": false,
                             "type": "number",
                             "default": "",
-                            "description": "Count of tabs"
+                            "description": "Count of tabs",
+                            "deprecated": "since v4. Only supported by TabView."
                         },
                         {
                             "name": "first",
@@ -57288,7 +57868,8 @@
                             "readonly": false,
                             "type": "boolean",
                             "default": "",
-                            "description": "Whether the tab is first."
+                            "description": "Whether the tab is first.",
+                            "deprecated": "since v4. Only supported by TabView."
                         },
                         {
                             "name": "last",
@@ -57296,7 +57877,8 @@
                             "readonly": false,
                             "type": "boolean",
                             "default": "",
-                            "description": "Whether the tab is last."
+                            "description": "Whether the tab is last.",
+                            "deprecated": "since v4. Only supported by TabView."
                         },
                         {
                             "name": "active",
@@ -57324,7 +57906,8 @@
                             "name": "header",
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
-                            "description": "Custom header template."
+                            "description": "Custom header template.",
+                            "deprecated": "since v4. Only supported by TabView."
                         }
                     ]
                 },
@@ -57403,11 +57986,607 @@
             }
         }
     },
+    "tabpanels": {
+        "description": "TabPanels is a helper component for Tabs component.\n\n[Live Demo](https://www.primevue.org/tabview/)",
+        "components": {
+            "default": {
+                "description": "TabPanels is a helper component for Tabs component.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "TabPanelsPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "instance",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines instance."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TabPanelsProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TabPanelsContext",
+                            "default": "",
+                            "description": "Defines current options."
+                        },
+                        {
+                            "name": "attrs",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines valid attributes."
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines parent options."
+                        },
+                        {
+                            "name": "global",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | object",
+                            "default": "",
+                            "description": "Defines passthrough(pt) options in global config."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TabPanelsPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "TabPanelsProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabPanelsPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "default": "",
+                            "description": "Used to manage all lifecycle hooks."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TabPanelsPassThroughAttributes": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "TabPanelsProps": {
+                    "description": "Defines valid properties in TabPanels component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "dt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "It generates scoped CSS variables using design tokens for the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThrough<TabPanelsPassThroughOptions>",
+                            "default": "",
+                            "description": "Used to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TabPanelsContext": {
+                    "description": "Defines current options in TabPanels component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "TabPanelsSlots": {
+                    "description": "Defines valid slots in TabPanels slots.",
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": [
+                        {
+                            "name": "default",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom content template."
+                        }
+                    ]
+                },
+                "TabPanelsEmits": {
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TabPanelsPassThroughOptionType": {
+                    "values": "TabPanelsPassThroughAttributes | (options: TabPanelsPassThroughMethodOptions) => undefined | string | null | undefined"
+                }
+            }
+        }
+    },
+    "tabpanels/style/TabPanelsStyle": {
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "TabPanelsStyle": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "css",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "classes",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": ""
+                        },
+                        {
+                            "name": "inlineStyles",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": ""
+                        },
+                        {
+                            "name": "loadStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "getStyleSheet",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        }
+                    ],
+                    "methods": [],
+                    "extendedTypes": "BaseStyle"
+                }
+            }
+        }
+    },
+    "tabs": {
+        "description": "Tabs facilitates seamless switching between different views.\n\n[Live Demo](https://www.primevue.org/tabs/)",
+        "components": {
+            "default": {
+                "description": "Tabs facilitates seamless switching between different views.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "TabsPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "instance",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines instance."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TabsProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TabsState",
+                            "default": "",
+                            "description": "Defines current inline state."
+                        },
+                        {
+                            "name": "attrs",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines valid attributes."
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines parent options."
+                        },
+                        {
+                            "name": "global",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | object",
+                            "default": "",
+                            "description": "Defines passthrough(pt) options in global config."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TabsPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "TabsProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabsPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "default": "",
+                            "description": "Used to manage all lifecycle hooks."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TabsPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "TabsState": {
+                    "description": "Defines current inline state in Tabs component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "d_value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current active value state."
+                        },
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Unique id for the Tabs component."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TabsProps": {
+                    "description": "Defines valid properties in Tabs component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Value of the active tab."
+                        },
+                        {
+                            "name": "lazy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css."
+                        },
+                        {
+                            "name": "orientation",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"horizontal\" | \"vertical\"",
+                            "default": "horizontal",
+                            "description": "Specifies the layout of the component, valid values are 'horizontal' and 'vertical'."
+                        },
+                        {
+                            "name": "scrollable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When specified, enables horizontal and/or vertical scrolling."
+                        },
+                        {
+                            "name": "showNavigators",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to display navigation buttons in container when scrollable is enabled."
+                        },
+                        {
+                            "name": "tabindex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "selectOnFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, the focused tab is activated."
+                        },
+                        {
+                            "name": "previousButtonProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonProps",
+                            "default": "",
+                            "description": "Used to pass all properties of the HTMLButtonElement to the previous button."
+                        },
+                        {
+                            "name": "nextButtonProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonProps",
+                            "default": "",
+                            "description": "Used to pass all properties of the HTMLButtonElement to the next button."
+                        },
+                        {
+                            "name": "dt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "It generates scoped CSS variables using design tokens for the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThrough<TabsPassThroughOptions>",
+                            "default": "",
+                            "description": "Used to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TabsSlots": {
+                    "description": "Defines valid slots in Tabs slots.",
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": [
+                        {
+                            "name": "default",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Default slot to detect TabPanel components."
+                        },
+                        {
+                            "name": "previousicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Previous button icon template for the scrollable component."
+                        },
+                        {
+                            "name": "nexticon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Next button icon template for the scrollable component."
+                        }
+                    ]
+                },
+                "TabsEmits": {
+                    "description": "Defines valid emits in Tabs component.",
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": [
+                        {
+                            "name": "update:value",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "optional": false,
+                                    "type": "number",
+                                    "description": "Current value."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Emitted when the value changes."
+                        }
+                    ]
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TabsPassThroughOptionType": {
+                    "values": "TabsPassThroughAttributes | (options: TabsPassThroughMethodOptions) => undefined | string | null | undefined"
+                }
+            }
+        }
+    },
+    "tabs/style/TabsStyle": {
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "TabsStyle": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "css",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "classes",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": ""
+                        },
+                        {
+                            "name": "inlineStyles",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": ""
+                        },
+                        {
+                            "name": "loadStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "getStyleSheet",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        }
+                    ],
+                    "methods": [],
+                    "extendedTypes": "BaseStyle"
+                }
+            }
+        }
+    },
     "tabview": {
         "description": "TabView is a container component to group content with tabs.\n\n[Live Demo](https://www.primevue.org/tabview/)",
         "components": {
             "default": {
-                "description": "TabView is a container component to group content with tabs.",
+                "description": "",
                 "methods": {
                     "description": "Defines methods that can be accessed by the component's reference.",
                     "values": []
diff --git a/doc/tabs/AccessibilityDoc.vue b/doc/tabs/AccessibilityDoc.vue
new file mode 100644
index 000000000..f21c70e91
--- /dev/null
+++ b/doc/tabs/AccessibilityDoc.vue
@@ -0,0 +1,74 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            TabView container is defined with the <i>tablist</i> role, as any attribute is passed to the container element <i>aria-labelledby</i> can be optionally used to specify an element to describe the TabView. Each tab header has a
+            <i>tab</i> role along with <i>aria-selected</i> state attribute and <i>aria-controls</i> to refer to the corresponding tab content element. The content element of each tab has <i>tabpanel</i> role, an id to match the
+            <i>aria-controls</i> of the header and <i>aria-labelledby</i> reference to the header as the accessible name.
+        </p>
+
+        <h3>Tab Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus through the header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Activates the focused tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Activates the focused tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>Moves focus to the next header. If focus is on the last header, moves focus to the first header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>Moves focus to the previous header. If focus is on the first header, moves focus to the last header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the last header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the first header.</td>
+                    </tr>
+                    <tr>
+                        <td><i>pageUp</i></td>
+                        <td>Moves scroll position to first header.</td>
+                    </tr>
+                    <tr>
+                        <td><i>pageDown</i></td>
+                        <td>Moves scroll position to last header.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/doc/tabs/BasicDoc.vue b/doc/tabs/BasicDoc.vue
new file mode 100644
index 000000000..7eab68f6f
--- /dev/null
+++ b/doc/tabs/BasicDoc.vue
@@ -0,0 +1,149 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Tabs comprises a combination of <i>TabList</i>, <i>Tab</i>, <i>TabPanels</i> and <i>Tab</i> components. The <i>value</i> property is essential for associating Tab and TabPanel with each other.</p>
+    </DocSectionText>
+    <div class="card">
+        <Tabs value="0">
+            <TabList>
+                <Tab value="0">Header I</Tab>
+                <Tab value="1">Header II</Tab>
+                <Tab value="2">Header III</Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel value="0">
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel value="1">
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel value="2">
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Tabs value="0">
+    <TabList>
+        <Tab value="0">Header I</Tab>
+        <Tab value="1">Header II</Tab>
+        <Tab value="2">Header III</Tab>
+    </TabList>
+    <TabPanels>
+        <TabPanel value="0">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </TabPanel>
+        <TabPanel value="1">
+            <p class="m-0">
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+        </TabPanel>
+        <TabPanel value="2">
+            <p class="m-0">
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+        </TabPanel>
+    </TabPanels>
+</Tabs>
+
+`,
+                options: `
+<template>
+    <div class="card">
+        <Tabs value="0">
+            <TabList>
+                <Tab value="0">Header I</Tab>
+                <Tab value="1">Header II</Tab>
+                <Tab value="2">Header III</Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel value="0">
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel value="1">
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel value="2">
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+</template>
+
+<script>
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Tabs value="0">
+            <TabList>
+                <Tab value="0">Header I</Tab>
+                <Tab value="1">Header II</Tab>
+                <Tab value="2">Header III</Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel value="0">
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel value="1">
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel value="2">
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+    `
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tabs/ControlledDoc.vue b/doc/tabs/ControlledDoc.vue
new file mode 100644
index 000000000..7e93bab99
--- /dev/null
+++ b/doc/tabs/ControlledDoc.vue
@@ -0,0 +1,182 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Tabs can be controlled programmatically using <i>value</i> property.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex mb-2 gap-2 justify-content-end">
+            <Button @click="value = '0'" rounded label="1" class="w-2rem h-2rem p-0" :outlined="value !== '0'" />
+            <Button @click="value = '1'" rounded label="2" class="w-2rem h-2rem p-0" :outlined="value !== '1'" />
+            <Button @click="value = '2'" rounded label="3" class="w-2rem h-2rem p-0" :outlined="value !== '2'" />
+        </div>
+
+        <Tabs v-model:value="value">
+            <TabList>
+                <Tab value="0">Header I</Tab>
+                <Tab value="1">Header II</Tab>
+                <Tab value="2">Header III</Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel value="0">
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel value="1">
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel value="2">
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '0',
+            code: {
+                basic: `
+<div class="flex mb-2 gap-2 justify-content-end">
+    <Button @click="value = '0'" rounded label="1" class="w-2rem h-2rem p-0" :outlined="value !== '0'" />
+    <Button @click="value = '1'" rounded label="2" class="w-2rem h-2rem p-0" :outlined="value !== '1'" />
+    <Button @click="value = '2'" rounded label="3" class="w-2rem h-2rem p-0" :outlined="value !== '2'" />
+</div>
+
+<Tabs v-model:value="value">
+    <TabList>
+        <Tab value="0">Header I</Tab>
+        <Tab value="1">Header II</Tab>
+        <Tab value="2">Header III</Tab>
+    </TabList>
+    <TabPanels>
+        <TabPanel value="0">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </TabPanel>
+        <TabPanel value="1">
+            <p class="m-0">
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+        </TabPanel>
+        <TabPanel value="2">
+            <p class="m-0">
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+        </TabPanel>
+    </TabPanels>
+</Tabs>
+`,
+                options: `
+<template>
+    <div class="card">
+        <div class="flex mb-2 gap-2 justify-content-end">
+            <Button @click="value = '0'" rounded label="1" class="w-2rem h-2rem p-0" :outlined="value !== '0'" />
+            <Button @click="value = '1'" rounded label="2" class="w-2rem h-2rem p-0" :outlined="value !== '1'" />
+            <Button @click="value = '2'" rounded label="3" class="w-2rem h-2rem p-0" :outlined="value !== '2'" />
+        </div>
+
+        <Tabs v-model:value="value">
+            <TabList>
+                <Tab value="0">Header I</Tab>
+                <Tab value="1">Header II</Tab>
+                <Tab value="2">Header III</Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel value="0">
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel value="1">
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel value="2">
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '0'
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex mb-2 gap-2 justify-content-end">
+            <Button @click="value = '0'" rounded label="1" class="w-2rem h-2rem p-0" :outlined="value !== '0'" />
+            <Button @click="value = '1'" rounded label="2" class="w-2rem h-2rem p-0" :outlined="value !== '1'" />
+            <Button @click="value = '2'" rounded label="3" class="w-2rem h-2rem p-0" :outlined="value !== '2'" />
+        </div>
+
+        <Tabs v-model:value="value">
+            <TabList>
+                <Tab value="0">Header I</Tab>
+                <Tab value="1">Header II</Tab>
+                <Tab value="2">Header III</Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel value="0">
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel value="1">
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel value="2">
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('0');
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tabs/DisabledDoc.vue b/doc/tabs/DisabledDoc.vue
new file mode 100644
index 000000000..4fa332251
--- /dev/null
+++ b/doc/tabs/DisabledDoc.vue
@@ -0,0 +1,151 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Enabling <i>disabled</i> property of a Tab prevents user interaction.</p>
+    </DocSectionText>
+    <div class="card">
+        <Tabs value="0">
+            <TabList>
+                <Tab value="0">Header I</Tab>
+                <Tab value="1">Header II</Tab>
+                <Tab value="2">Header III</Tab>
+                <Tab disabled>Header IV</Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel value="0">
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel value="1">
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel value="2">
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Tabs value="0">
+    <TabList>
+        <Tab value="0">Header I</Tab>
+        <Tab value="1">Header II</Tab>
+        <Tab value="2">Header III</Tab>
+        <Tab disabled>Header IV</Tab>
+    </TabList>
+    <TabPanels>
+        <TabPanel value="0">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </TabPanel>
+        <TabPanel value="1">
+            <p class="m-0">
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+        </TabPanel>
+        <TabPanel value="2">
+            <p class="m-0">
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+        </TabPanel>
+    </TabPanels>
+</Tabs>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Tabs value="0">
+            <TabList>
+                <Tab value="0">Header I</Tab>
+                <Tab value="1">Header II</Tab>
+                <Tab value="2">Header III</Tab>
+                <Tab disabled>Header IV</Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel value="0">
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel value="1">
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel value="2">
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Tabs value="0">
+            <TabList>
+                <Tab value="0">Header I</Tab>
+                <Tab value="1">Header II</Tab>
+                <Tab value="2">Header III</Tab>
+                <Tab disabled>Header IV</Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel value="0">
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel value="1">
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel value="2">
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tabs/DynamicDoc.vue b/doc/tabs/DynamicDoc.vue
new file mode 100644
index 000000000..b8bd886f0
--- /dev/null
+++ b/doc/tabs/DynamicDoc.vue
@@ -0,0 +1,102 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Tabs can be generated dynamically using the standard <i>v-for</i> directive on Tab and TabPanel.</p>
+    </DocSectionText>
+    <div class="card">
+        <Tabs value="0">
+            <TabList>
+                <Tab v-for="tab in tabs" :key="tab.title" :value="tab.value">{{ tab.title }}</Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel v-for="tab in tabs" :key="tab.content" :value="tab.value">
+                    <p class="m-0">{{ tab.content }}</p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            tabs: [
+                { title: 'Tab 1', content: 'Tab 1 Content', value: '0' },
+                { title: 'Tab 2', content: 'Tab 2 Content', value: '1' },
+                { title: 'Tab 3', content: 'Tab 3 Content', value: '2' }
+            ],
+            code: {
+                basic: `
+<Tabs value="0">
+    <TabList>
+        <Tab v-for="tab in tabs" :key="tab.title" :value="tab.value">{{ tab.title }}</Tab>
+    </TabList>
+    <TabPanels>
+        <TabPanel v-for="tab in tabs" :key="tab.content" :value="tab.value">
+            <p class="m-0">{{ tab.content }}</p>
+        </TabPanel>
+    </TabPanels>
+</Tabs>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Tabs value="0">
+            <TabList>
+                <Tab v-for="tab in tabs" :key="tab.title" :value="tab.value">{{ tab.title }}</Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel v-for="tab in tabs" :key="tab.content" :value="tab.value">
+                    <p class="m-0">{{ tab.content }}</p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            tabs: [
+                { title: 'Tab 1', content: 'Tab 1 Content', value: '0' },
+                { title: 'Tab 2', content: 'Tab 2 Content', value: '1' },
+                { title: 'Tab 3', content: 'Tab 3 Content', value: '2' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Tabs value="0">
+            <TabList>
+                <Tab v-for="tab in tabs" :key="tab.title" :value="tab.value">{{ tab.title }}</Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel v-for="tab in tabs" :key="tab.content" :value="tab.value">
+                    <p class="m-0">{{ tab.content }}</p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const tabs = ref([
+    { title: 'Tab 1', content: 'Tab 1 Content', value: '0' },
+    { title: 'Tab 2', content: 'Tab 2 Content', value: '1' },
+    { title: 'Tab 3', content: 'Tab 3 Content', value: '2' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tabs/ImportDoc.vue b/doc/tabs/ImportDoc.vue
new file mode 100644
index 000000000..414f593b4
--- /dev/null
+++ b/doc/tabs/ImportDoc.vue
@@ -0,0 +1,22 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Tabs from 'primevue/tabs';
+import TabList from 'primevue/tablist';
+import Tab from 'primevue/tab';
+import TabPanels from 'primevue/tabpanels';
+import TabPanel from 'primevue/tabpanel';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tabs/ScrollableDoc.vue b/doc/tabs/ScrollableDoc.vue
new file mode 100644
index 000000000..56697026c
--- /dev/null
+++ b/doc/tabs/ScrollableDoc.vue
@@ -0,0 +1,98 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Adding <i>scrollable</i> property displays navigational buttons at each side to scroll between tabs.</p>
+    </DocSectionText>
+    <div class="card">
+        <Tabs value="0" scrollable>
+            <TabList>
+                <Tab v-for="tab in scrollableTabs" :key="tab.title" :value="tab.value">
+                    {{ tab.title }}
+                </Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel v-for="tab in scrollableTabs" :key="tab.content" :value="tab.value">
+                    <p class="m-0">{{ tab.content }}</p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            scrollableTabs: Array.from({ length: 50 }, (_, i) => ({ title: `Tab ${i + 1}`, content: `Tab ${i + 1} Content`, value: `${i}` })),
+            code: {
+                basic: `
+<Tabs value="0" scrollable>
+    <TabList>
+        <Tab v-for="tab in scrollableTabs" :key="tab.title" :value="tab.value">
+            {{ tab.title }}
+        </Tab>
+    </TabList>
+    <TabPanels>
+        <TabPanel v-for="tab in scrollableTabs" :key="tab.content" :value="tab.value">
+            <p class="m-0">{{ tab.content }}</p>
+        </TabPanel>
+    </TabPanels>
+</Tabs>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Tabs value="0" scrollable>
+            <TabList>
+                <Tab v-for="tab in scrollableTabs" :key="tab.title" :value="tab.value">
+                    {{ tab.title }}
+                </Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel v-for="tab in scrollableTabs" :key="tab.content" :value="tab.value">
+                    <p class="m-0">{{ tab.content }}</p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            scrollableTabs: Array.from({ length: 50 }, (_, i) => ({ title: \`Tab \${i + 1}\`, content: \`Tab \${i + 1} Content\`, value: \`\${i}\` }))
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Tabs value="0" scrollable>
+            <TabList>
+                <Tab v-for="tab in scrollableTabs" :key="tab.title" :value="tab.value">
+                    {{ tab.title }}
+                </Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel v-for="tab in scrollableTabs" :key="tab.content" :value="tab.value">
+                    <p class="m-0">{{ tab.content }}</p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const scrollableTabs = ref(Array.from({ length: 50 }, (_, i) => ({ title: \`Tab \${i + 1}\`, content: \`Tab \${i + 1} Content\`, value: \`\${i}\` })));
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tabs/TemplateDoc.vue b/doc/tabs/TemplateDoc.vue
new file mode 100644
index 000000000..13b5cdb61
--- /dev/null
+++ b/doc/tabs/TemplateDoc.vue
@@ -0,0 +1,195 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Custom content for a tab is defined using <i>as</i> or <i>asChild</i> properties.</p>
+    </DocSectionText>
+    <div class="card">
+        <Tabs value="0">
+            <TabList>
+                <Tab value="0" as="div" class="flex align-items-center gap-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                    <span class="font-bold white-space-nowrap">Amy Elsner</span>
+                </Tab>
+                <Tab v-slot="{ a11yAttrs, onClick }" value="1" asChild>
+                    <div class="flex align-items-center gap-2" @click="onClick" v-bind="a11yAttrs">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                        <span class="font-bold white-space-nowrap">Onyama Limba</span>
+                    </div>
+                </Tab>
+                <Tab v-slot="{ a11yAttrs, onClick }" value="2" asChild>
+                    <div class="flex align-items-center gap-2" @click="onClick" v-bind="a11yAttrs">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+                        <span class="font-bold white-space-nowrap">Ioni Bowcher</span>
+                        <Badge value="2" />
+                    </div>
+                </Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel value="0" as="p" class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </TabPanel>
+                <TabPanel value="1" as="p" class="m-0">
+                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                </TabPanel>
+                <TabPanel v-slot="slotProps" value="2" asChild>
+                    <div v-show="slotProps.active" :class="slotProps.class" v-bind="slotProps.a11yAttrs">
+                        <p class="m-0">
+                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                        </p>
+                    </div>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Tabs value="0">
+    <TabList>
+        <Tab value="0" as="div" class="flex align-items-center gap-2">
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <span class="font-bold white-space-nowrap">Amy Elsner</span>
+        </Tab>
+        <Tab v-slot="{ a11yAttrs, onClick }" value="1" asChild>
+            <div class="flex align-items-center gap-2" @click="onClick" v-bind="a11yAttrs">
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                <span class="font-bold white-space-nowrap">Onyama Limba</span>
+            </div>
+        </Tab>
+        <Tab v-slot="{ a11yAttrs, onClick }" value="2" asChild>
+            <div class="flex align-items-center gap-2" @click="onClick" v-bind="a11yAttrs">
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+                <span class="font-bold white-space-nowrap">Ioni Bowcher</span>
+                <Badge value="2" />
+            </div>
+        </Tab>
+    </TabList>
+    <TabPanels>
+        <TabPanel value="0" as="p" class="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </TabPanel>
+        <TabPanel value="1" as="p" class="m-0">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+            ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </TabPanel>
+        <TabPanel v-slot="slotProps" value="2" asChild>
+            <div v-show="slotProps.active" :class="slotProps.class" v-bind="slotProps.a11yAttrs">
+                <p class="m-0">
+                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                    culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                </p>
+            </div>
+        </TabPanel>
+    </TabPanels>
+</Tabs>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Tabs value="0">
+            <TabList>
+                <Tab value="0" as="div" class="flex align-items-center gap-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                    <span class="font-bold white-space-nowrap">Amy Elsner</span>
+                </Tab>
+                <Tab v-slot="{ a11yAttrs, onClick }" value="1" asChild>
+                    <div class="flex align-items-center gap-2" @click="onClick" v-bind="a11yAttrs">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                        <span class="font-bold white-space-nowrap">Onyama Limba</span>
+                    </div>
+                </Tab>
+                <Tab v-slot="{ a11yAttrs, onClick }" value="2" asChild>
+                    <div class="flex align-items-center gap-2" @click="onClick" v-bind="a11yAttrs">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+                        <span class="font-bold white-space-nowrap">Ioni Bowcher</span>
+                        <Badge value="2" />
+                    </div>
+                </Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel value="0" as="p" class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </TabPanel>
+                <TabPanel value="1" as="p" class="m-0">
+                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                </TabPanel>
+                <TabPanel v-slot="slotProps" value="2" asChild>
+                    <div v-show="slotProps.active" :class="slotProps.class" v-bind="slotProps.a11yAttrs">
+                        <p class="m-0">
+                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                        </p>
+                    </div>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Tabs value="0">
+            <TabList>
+                <Tab value="0" as="div" class="flex align-items-center gap-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                    <span class="font-bold white-space-nowrap">Amy Elsner</span>
+                </Tab>
+                <Tab v-slot="{ a11yAttrs, onClick }" value="1" asChild>
+                    <div class="flex align-items-center gap-2" @click="onClick" v-bind="a11yAttrs">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                        <span class="font-bold white-space-nowrap">Onyama Limba</span>
+                    </div>
+                </Tab>
+                <Tab v-slot="{ a11yAttrs, onClick }" value="2" asChild>
+                    <div class="flex align-items-center gap-2" @click="onClick" v-bind="a11yAttrs">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+                        <span class="font-bold white-space-nowrap">Ioni Bowcher</span>
+                        <Badge value="2" />
+                    </div>
+                </Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel value="0" as="p" class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </TabPanel>
+                <TabPanel value="1" as="p" class="m-0">
+                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                </TabPanel>
+                <TabPanel v-slot="slotProps" value="2" asChild>
+                    <div v-show="slotProps.active" :class="slotProps.class" v-bind="slotProps.a11yAttrs">
+                        <p class="m-0">
+                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                        </p>
+                    </div>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tabs/pt/PTImage.vue b/doc/tabs/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/tabs/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/tabs/pt/index.vue b/doc/tabs/pt/index.vue
new file mode 100644
index 000000000..ea02f0c6c
--- /dev/null
+++ b/doc/tabs/pt/index.vue
@@ -0,0 +1,59 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Tabs Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.tabs',
+                    label: 'Tabs PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Tabs')
+                },
+                {
+                    id: 'pt.doc.tablist',
+                    label: 'TabList PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('TabList')
+                },
+                {
+                    id: 'pt.doc.tab',
+                    label: 'Tab PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Tab')
+                },
+                {
+                    id: 'pt.doc.tabpanels',
+                    label: 'TabPanels PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('TabPanels')
+                },
+                {
+                    id: 'pt.doc.tabpanel',
+                    label: 'TabPanel PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('TabPanel')
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/tabs/theming/StyledDoc.vue b/doc/tabs/theming/StyledDoc.vue
new file mode 100644
index 000000000..cd99082ba
--- /dev/null
+++ b/doc/tabs/theming/StyledDoc.vue
@@ -0,0 +1,33 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
+    </DocSectionText>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Element</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>p-tabs</td>
+                    <td>Container element.</td>
+                </tr>
+                <tr>
+                    <td>p-tab</td>
+                    <td>Container of a tab.</td>
+                </tr>
+                <tr>
+                    <td>p-tabpanels</td>
+                    <td>Container panels.</td>
+                </tr>
+                <tr>
+                    <td>p-tabpanel</td>
+                    <td>Content of a tab panel.</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
diff --git a/doc/tabs/theming/TailwindDoc.vue b/doc/tabs/theming/TailwindDoc.vue
new file mode 100644
index 000000000..fe4aadc26
--- /dev/null
+++ b/doc/tabs/theming/TailwindDoc.vue
@@ -0,0 +1,6 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
+        Tailwind CSS.
+    </DocSectionText>
+</template>
diff --git a/doc/tabs/theming/index.vue b/doc/tabs/theming/index.vue
new file mode 100644
index 000000000..997547116
--- /dev/null
+++ b/doc/tabs/theming/index.vue
@@ -0,0 +1,40 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Tabs Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'theming.styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'theming.unstyled',
+                    label: 'Unstyled',
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'theming.tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/modules/nuxt-primevue/runtime/core/components/index.js b/modules/nuxt-primevue/runtime/core/components/index.js
index da87b0bab..00d4d6eca 100644
--- a/modules/nuxt-primevue/runtime/core/components/index.js
+++ b/modules/nuxt-primevue/runtime/core/components/index.js
@@ -38,7 +38,7 @@ const button = ['Button', 'ButtonGroup', 'SpeedDial', 'SplitButton'];
 
 const data = ['Column', 'Row', 'ColumnGroup', 'DataTable', 'DataView', 'OrderList', 'OrganizationChart', 'Paginator', 'PickList', 'Tree', 'TreeTable', 'Timeline', 'VirtualScroller'];
 
-const panel = ['Accordion', 'AccordionTab', 'Card', 'DeferredContent', 'Divider', 'Fieldset', 'Panel', 'ScrollPanel', 'Splitter', 'SplitterPanel', 'Stepper', 'StepperPanel', 'TabView', 'TabPanel', 'Toolbar'];
+const panel = ['Accordion', 'AccordionTab', 'Card', 'DeferredContent', 'Divider', 'Fieldset', 'Panel', 'ScrollPanel', 'Splitter', 'SplitterPanel', 'Stepper', 'StepperPanel', 'TabView', 'Tabs', 'TabList', 'Tab', 'TabPanels', 'TabPanel', 'Toolbar'];
 
 const overlay = [
     { name: 'ConfirmDialog', use: { as: 'ConfirmationService' } },
diff --git a/nuxt-vite.config.js b/nuxt-vite.config.js
index 4346d1e56..24e0c8055 100644
--- a/nuxt-vite.config.js
+++ b/nuxt-vite.config.js
@@ -101,6 +101,10 @@ const STYLE_ALIAS = {
     'primevue/stepperpanel/style': path.resolve(__dirname, './components/lib/stepperpanel/style/StepperPanelStyle.js'),
     'primevue/styleclass/style': path.resolve(__dirname, './components/lib/styleclass/style/StyleClassStyle.js'),
     'primevue/tabmenu/style': path.resolve(__dirname, './components/lib/tabmenu/style/TabMenuStyle.js'),
+    'primevue/tabs/style': path.resolve(__dirname, './components/lib/tabs/style/TabsStyle.js'),
+    'primevue/tablist/style': path.resolve(__dirname, './components/lib/tablist/style/TabListStyle.js'),
+    'primevue/tab/style': path.resolve(__dirname, './components/lib/tab/style/TabStyle.js'),
+    'primevue/tabpanels/style': path.resolve(__dirname, './components/lib/tabpanels/style/TabPanelsStyle.js'),
     'primevue/tabpanel/style': path.resolve(__dirname, './components/lib/tabpanel/style/TabPanelStyle.js'),
     'primevue/tabview/style': path.resolve(__dirname, './components/lib/tabview/style/TabViewStyle.js'),
     'primevue/tag/style': path.resolve(__dirname, './components/lib/tag/style/TagStyle.js'),
@@ -170,7 +174,7 @@ const ICON_ALIAS = {
 };
 
 // prettier-ignore
-const THEME_COMPONENTS = ['accordion','autocomplete','avatar','badge','blockui','breadcrumb','button','buttongroup','card','carousel','cascadeselect','checkbox','chip','colorpicker','confirmdialog','confirmpopup','contextmenu','datatable','dataview','datepicker','dialog','divider','dock','drawer','editor','fieldset','fileupload','floatlabel','galleria','iconfield','image','inlinemessage','inplace','inputchips','inputgroup','inputnumber','inputotp','inputtext','knob','listbox','megamenu','menu','menubar','message','metergroup','multiselect','orderlist','organizationchart','paginator','panel','panelmenu','password','picklist','popover','progressbar','progressspinner','radiobutton','rating','scrollpanel','scrolltop','select','selectbutton','skeleton','slider','speeddial','splitbutton','splitter','steps','stepper','tabmenu','tabview','tag','terminal','textarea','tieredmenu','timeline','toast','togglebutton','toggleswitch','toolbar','tooltip','tree','treeselect','treetable'];
+const THEME_COMPONENTS = ['accordion','autocomplete','avatar','badge','blockui','breadcrumb','button','buttongroup','card','carousel','cascadeselect','checkbox','chip','colorpicker','confirmdialog','confirmpopup','contextmenu','datatable','dataview','datepicker','dialog','divider','dock','drawer','editor','fieldset','fileupload','floatlabel','galleria','iconfield','image','inlinemessage','inplace','inputchips','inputgroup','inputnumber','inputotp','inputtext','knob','listbox','megamenu','menu','menubar','message','metergroup','multiselect','orderlist','organizationchart','paginator','panel','panelmenu','password','picklist','popover','progressbar','progressspinner','radiobutton','rating','scrollpanel','scrolltop','select','selectbutton','skeleton','slider','speeddial','splitbutton','splitter','steps','stepper','tabmenu','tabs','tabview','tag','terminal','textarea','tieredmenu','timeline','toast','togglebutton','toggleswitch','toolbar','tooltip','tree','treeselect','treetable'];
 
 const createThemeAlias = (design, presets) => {
     const baseAlias = THEME_COMPONENTS.reduce((acc, name) => {
diff --git a/pages/tabs/index.vue b/pages/tabs/index.vue
new file mode 100755
index 000000000..bd5ae18ae
--- /dev/null
+++ b/pages/tabs/index.vue
@@ -0,0 +1,75 @@
+<template>
+    <DocComponent
+        title="Vue Tabs Component"
+        header="Tabs"
+        description="Tabs facilitates seamless switching between different views."
+        :componentDocs="docs"
+        :apiDocs="['Tabs', 'TabList', 'Tab', 'TabPanels', 'TabPanel']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/tabs/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/tabs/BasicDoc.vue';
+import ControlledDoc from '@/doc/tabs/ControlledDoc.vue';
+import DisabledDoc from '@/doc/tabs/DisabledDoc.vue';
+import DynamicDoc from '@/doc/tabs/DynamicDoc.vue';
+import ImportDoc from '@/doc/tabs/ImportDoc.vue';
+import ScrollableDoc from '@/doc/tabs/ScrollableDoc.vue';
+import TemplateDoc from '@/doc/tabs/TemplateDoc.vue';
+import PTComponent from '@/doc/tabs/pt/index.vue';
+import ThemingDoc from '@/doc/tabs/theming/index.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'dynamic',
+                    label: 'Dynamic',
+                    component: DynamicDoc
+                },
+                {
+                    id: 'controlled',
+                    label: 'Controlled',
+                    component: ControlledDoc
+                },
+                {
+                    id: 'scrollable',
+                    label: 'Scrollable',
+                    component: ScrollableDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
+        };
+    }
+};
+</script>
diff --git a/rollup.config.js b/rollup.config.js
index e1adc9b2e..59a1bc99b 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -162,6 +162,10 @@ const CORE_STYLE_DEPENDENCIES = {
     'primevue/steps/style': 'primevue.steps.style',
     'primevue/styleclass/style': 'primevue.styleclass.style',
     'primevue/tabmenu/style': 'primevue.tabmenu.style',
+    'primevue/tabs/style': 'primevue.tabs.style',
+    'primevue/tablist/style': 'primevue.tablist.style',
+    'primevue/tab/style': 'primevue.tab.style',
+    'primevue/tabpanels/style': 'primevue.tabpanels.style',
     'primevue/tabpanel/style': 'primevue.tabpanel.style',
     'primevue/tabview/style': 'primevue.tabview.style',
     'primevue/tag/style': 'primevue.tag.style',
@@ -181,7 +185,7 @@ const CORE_STYLE_DEPENDENCIES = {
 };
 
 // prettier-ignore
-const THEME_COMPONENTS = ['accordion','autocomplete','avatar','badge','blockui','breadcrumb','button','buttongroup','card','carousel','cascadeselect','checkbox','chip','colorpicker','confirmdialog','confirmpopup','contextmenu','datatable','dataview','datepicker','dialog','divider','dock','drawer','editor','fieldset','fileupload','floatlabel','galleria','iconfield','image','inlinemessage','inplace','inputchips','inputgroup','inputnumber','inputotp','toggleswitch','inputtext','knob','listbox','megamenu','menu','menubar','message','metergroup','multiselect','orderlist','organizationchart','overlaypanel','paginator','panel','panelmenu','password','picklist','popover','progressbar','progressspinner','radiobutton','rating','scrollpanel','scrolltop','select','selectbutton','skeleton','slider','speeddial','splitbutton','splitter','steps','stepper','tabmenu','tabview','tag','terminal','textarea','tieredmenu','timeline','toast','togglebutton','toggleswitch','toolbar','tooltip','tree','treeselect','treetable'];
+const THEME_COMPONENTS = ['accordion','autocomplete','avatar','badge','blockui','breadcrumb','button','buttongroup','card','carousel','cascadeselect','checkbox','chip','colorpicker','confirmdialog','confirmpopup','contextmenu','datatable','dataview','datepicker','dialog','divider','dock','drawer','editor','fieldset','fileupload','floatlabel','galleria','iconfield','image','inlinemessage','inplace','inputchips','inputgroup','inputnumber','inputotp','toggleswitch','inputtext','knob','listbox','megamenu','menu','menubar','message','metergroup','multiselect','orderlist','organizationchart','overlaypanel','paginator','panel','panelmenu','password','picklist','popover','progressbar','progressspinner','radiobutton','rating','scrollpanel','scrolltop','select','selectbutton','skeleton','slider','speeddial','splitbutton','splitter','steps','stepper','tabmenu', 'tab', 'tabview','tag','terminal','textarea','tieredmenu','timeline','toast','togglebutton','toggleswitch','toolbar','tooltip','tree','treeselect','treetable'];
 
 const createThemeDependencies = (design, presets) => {
     const baseDeps = THEME_COMPONENTS.reduce((acc, name) => {