From 7f896442750b8675af5b5d0dcd18245d83835cff Mon Sep 17 00:00:00 2001
From: Sofiya Pavlenko <sofiushko@gmail.com>
Date: Thu, 19 Dec 2024 22:42:21 +0300
Subject: [PATCH 1/2] feat(tabs): move tabs to deprecated

---
 package.json                                              | 5 +++++
 src/components/{ => lab}/Tabs/README.md                   | 4 ++--
 src/components/{ => lab}/Tabs/Tabs.scss                   | 4 ++--
 src/components/{ => lab}/Tabs/Tabs.tsx                    | 4 ++--
 src/components/{ => lab}/Tabs/TabsContext.ts              | 0
 src/components/{ => lab}/Tabs/TabsItem.tsx                | 6 +++---
 src/components/{ => lab}/Tabs/__stories__/Docs.mdx        | 0
 .../{ => lab}/Tabs/__stories__/Tabs.stories.tsx           | 2 +-
 src/components/{ => lab}/Tabs/__stories__/getTabsMock.tsx | 0
 src/components/{ => lab}/Tabs/__stories__/types.ts        | 0
 src/components/{ => lab}/Tabs/__tests__/Tabs.test.tsx     | 2 +-
 src/components/{ => lab}/Tabs/__tests__/TabsItem.test.tsx | 2 +-
 src/components/{ => lab}/Tabs/index.ts                    | 0
 src/deprecated.ts                                         | 8 ++++++++
 14 files changed, 25 insertions(+), 12 deletions(-)
 rename src/components/{ => lab}/Tabs/README.md (98%)
 rename src/components/{ => lab}/Tabs/Tabs.scss (98%)
 rename src/components/{ => lab}/Tabs/Tabs.tsx (97%)
 rename src/components/{ => lab}/Tabs/TabsContext.ts (100%)
 rename src/components/{ => lab}/Tabs/TabsItem.tsx (95%)
 rename src/components/{ => lab}/Tabs/__stories__/Docs.mdx (100%)
 rename src/components/{ => lab}/Tabs/__stories__/Tabs.stories.tsx (98%)
 rename src/components/{ => lab}/Tabs/__stories__/getTabsMock.tsx (100%)
 rename src/components/{ => lab}/Tabs/__stories__/types.ts (100%)
 rename src/components/{ => lab}/Tabs/__tests__/Tabs.test.tsx (98%)
 rename src/components/{ => lab}/Tabs/__tests__/TabsItem.test.tsx (98%)
 rename src/components/{ => lab}/Tabs/index.ts (100%)
 create mode 100644 src/deprecated.ts

diff --git a/package.json b/package.json
index 3cbe219647..9532cb0a7a 100644
--- a/package.json
+++ b/package.json
@@ -79,6 +79,11 @@
                 "default": "./build/cjs/unstable.js"
             }
         },
+        "./deprecated": {
+            "types": "./build/esm/deprecated.d.ts",
+            "require": "./build/cjs/deprecated.js",
+            "import": "./build/esm/deprecated.js"
+        },
         "./server": {
             "node": {
                 "types": "./build/cjs/server.d.ts",
diff --git a/src/components/Tabs/README.md b/src/components/lab/Tabs/README.md
similarity index 98%
rename from src/components/Tabs/README.md
rename to src/components/lab/Tabs/README.md
index d0d7afc319..5d6772d257 100644
--- a/src/components/Tabs/README.md
+++ b/src/components/lab/Tabs/README.md
@@ -5,7 +5,7 @@
 <!--/GITHUB_BLOCK-->
 
 ```tsx
-import {Tabs} from '@gravity-ui/uikit';
+import {deprecated_Tabs as Tabs} from '@gravity-ui/uikit/deprecated';
 ```
 
 Tabs is used to explore, organize content and switch between different views.
@@ -297,7 +297,7 @@ LANDING_BLOCK-->
 | meta     | Tab description                |          `string`          |         |
 | hint     | HTML title attribute           |          `string`          |         |
 | icon     | Icon displayed at the start    |     `React.ReactNode`      |         |
-| counter  | Number displayed at the end    |     `React.ReactNode`      |         |
+| counter  | Number displayed at the end    |     `number` `string`      |         |
 | label    | `<Label>` displayed at the end |     `React.ReactNode`      |         |
 | disabled | Inactive state                 |         `boolean`          |         |
 
diff --git a/src/components/Tabs/Tabs.scss b/src/components/lab/Tabs/Tabs.scss
similarity index 98%
rename from src/components/Tabs/Tabs.scss
rename to src/components/lab/Tabs/Tabs.scss
index f81579f5e3..d290374252 100644
--- a/src/components/Tabs/Tabs.scss
+++ b/src/components/lab/Tabs/Tabs.scss
@@ -1,5 +1,5 @@
-@use '../variables';
-@use '../../../styles/mixins';
+@use '../../variables';
+@use '../../../../styles/mixins';
 
 $block: '.#{variables.$ns}tabs';
 
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/lab/Tabs/Tabs.tsx
similarity index 97%
rename from src/components/Tabs/Tabs.tsx
rename to src/components/lab/Tabs/Tabs.tsx
index e0f1fd907a..e0507c4a3e 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/lab/Tabs/Tabs.tsx
@@ -2,8 +2,8 @@
 
 import React from 'react';
 
-import type {QAProps} from '../types';
-import {block} from '../utils/cn';
+import type {QAProps} from '../../types';
+import {block} from '../../utils/cn';
 
 import {TabsContext} from './TabsContext';
 import {TabsItem} from './TabsItem';
diff --git a/src/components/Tabs/TabsContext.ts b/src/components/lab/Tabs/TabsContext.ts
similarity index 100%
rename from src/components/Tabs/TabsContext.ts
rename to src/components/lab/Tabs/TabsContext.ts
diff --git a/src/components/Tabs/TabsItem.tsx b/src/components/lab/Tabs/TabsItem.tsx
similarity index 95%
rename from src/components/Tabs/TabsItem.tsx
rename to src/components/lab/Tabs/TabsItem.tsx
index 909bebc5fe..c740ea371d 100644
--- a/src/components/Tabs/TabsItem.tsx
+++ b/src/components/lab/Tabs/TabsItem.tsx
@@ -2,9 +2,9 @@
 
 import React from 'react';
 
-import {Label} from '../Label';
-import type {LabelProps} from '../Label';
-import {block} from '../utils/cn';
+import {Label} from '../../Label';
+import type {LabelProps} from '../../Label';
+import {block} from '../../utils/cn';
 
 import {TabsContext} from './TabsContext';
 
diff --git a/src/components/Tabs/__stories__/Docs.mdx b/src/components/lab/Tabs/__stories__/Docs.mdx
similarity index 100%
rename from src/components/Tabs/__stories__/Docs.mdx
rename to src/components/lab/Tabs/__stories__/Docs.mdx
diff --git a/src/components/Tabs/__stories__/Tabs.stories.tsx b/src/components/lab/Tabs/__stories__/Tabs.stories.tsx
similarity index 98%
rename from src/components/Tabs/__stories__/Tabs.stories.tsx
rename to src/components/lab/Tabs/__stories__/Tabs.stories.tsx
index 693e7974b7..8062f858a8 100644
--- a/src/components/Tabs/__stories__/Tabs.stories.tsx
+++ b/src/components/lab/Tabs/__stories__/Tabs.stories.tsx
@@ -10,7 +10,7 @@ import {getTabsMock} from './getTabsMock';
 import type {StoryParams} from './types';
 
 const meta: Meta<typeof Tabs> = {
-    title: 'Components/Navigation/Tabs',
+    title: 'Deprecated/Tabs',
     component: Tabs,
     args: {
         direction: TabsDirection.Horizontal,
diff --git a/src/components/Tabs/__stories__/getTabsMock.tsx b/src/components/lab/Tabs/__stories__/getTabsMock.tsx
similarity index 100%
rename from src/components/Tabs/__stories__/getTabsMock.tsx
rename to src/components/lab/Tabs/__stories__/getTabsMock.tsx
diff --git a/src/components/Tabs/__stories__/types.ts b/src/components/lab/Tabs/__stories__/types.ts
similarity index 100%
rename from src/components/Tabs/__stories__/types.ts
rename to src/components/lab/Tabs/__stories__/types.ts
diff --git a/src/components/Tabs/__tests__/Tabs.test.tsx b/src/components/lab/Tabs/__tests__/Tabs.test.tsx
similarity index 98%
rename from src/components/Tabs/__tests__/Tabs.test.tsx
rename to src/components/lab/Tabs/__tests__/Tabs.test.tsx
index 3cbdd91000..c4aa00051b 100644
--- a/src/components/Tabs/__tests__/Tabs.test.tsx
+++ b/src/components/lab/Tabs/__tests__/Tabs.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import userEvent from '@testing-library/user-event';
 
-import {render, screen} from '../../../../test-utils/utils';
+import {render, screen} from '../../../../../test-utils/utils';
 import {Tabs, TabsDirection} from '../Tabs';
 import type {TabsItemProps, TabsSize} from '../Tabs';
 
diff --git a/src/components/Tabs/__tests__/TabsItem.test.tsx b/src/components/lab/Tabs/__tests__/TabsItem.test.tsx
similarity index 98%
rename from src/components/Tabs/__tests__/TabsItem.test.tsx
rename to src/components/lab/Tabs/__tests__/TabsItem.test.tsx
index a70bb25a29..64dbd2a074 100644
--- a/src/components/Tabs/__tests__/TabsItem.test.tsx
+++ b/src/components/lab/Tabs/__tests__/TabsItem.test.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import {Flame} from '@gravity-ui/icons';
 import userEvent from '@testing-library/user-event';
 
-import {render, screen} from '../../../../test-utils/utils';
+import {render, screen} from '../../../../../test-utils/utils';
 import {TabsItem} from '../TabsItem';
 
 const tabId = 'tab-id';
diff --git a/src/components/Tabs/index.ts b/src/components/lab/Tabs/index.ts
similarity index 100%
rename from src/components/Tabs/index.ts
rename to src/components/lab/Tabs/index.ts
diff --git a/src/deprecated.ts b/src/deprecated.ts
new file mode 100644
index 0000000000..4b00da5878
--- /dev/null
+++ b/src/deprecated.ts
@@ -0,0 +1,8 @@
+/* eslint-disable camelcase */
+export {
+    Tabs as deprecated_Tabs,
+    TabsDirection as deprecated_TabsDirection,
+    type TabsSize as deprecated_TabsSize,
+    type TabsItemProps as deprecated_TabsItemProps,
+    type TabsProps as deprecated_TabsProps,
+} from './components/lab/Tabs';

From 13c921904531c1535c085b1d941fc2e04e76c41a Mon Sep 17 00:00:00 2001
From: Sofiya Pavlenko <sofiushko@gmail.com>
Date: Thu, 19 Dec 2024 23:00:29 +0300
Subject: [PATCH 2/2] feat(tabs): add new tabs component

---
 CODEOWNERS                                    |   2 +-
 src/components/index.ts                       |   2 +-
 src/components/tabs/README.md                 |   5 +
 src/components/tabs/Tab.tsx                   |  93 ++++++++++
 src/components/tabs/TabList.scss              | 142 +++++++++++++++
 src/components/tabs/TabList.tsx               |  46 +++++
 src/components/tabs/TabPanel.tsx              |  32 ++++
 src/components/tabs/TabProvider.tsx           |  14 ++
 src/components/tabs/__stories__/Docs.mdx      |   6 +
 .../tabs/__stories__/TabProvider.stories.tsx  |  82 +++++++++
 .../tabs/__stories__/getTabsMock.tsx          | 107 +++++++++++
 .../tabs/__stories__/tabs.stories.tsx         | 150 +++++++++++++++
 src/components/tabs/__tests__/Tab.test.tsx    | 148 +++++++++++++++
 .../tabs/__tests__/TabPanel.test.tsx          |  29 +++
 .../tabs/__tests__/TabProvider.test.tsx       |  72 ++++++++
 .../tabs/__tests__/TabsList.test.tsx          | 172 ++++++++++++++++++
 src/components/tabs/__tests__/constants.ts    |   5 +
 src/components/tabs/__tests__/utils.tsx       |  32 ++++
 src/components/tabs/constants.ts              |   5 +
 src/components/tabs/contexts/TabContext.tsx   |  10 +
 .../tabs/contexts/TabInnerContext.tsx         |  13 ++
 src/components/tabs/index.ts                  |   5 +
 src/components/tabs/types.ts                  |   2 +
 .../BrandingConfigurator.tsx                  |  15 +-
 24 files changed, 1178 insertions(+), 11 deletions(-)
 create mode 100644 src/components/tabs/README.md
 create mode 100644 src/components/tabs/Tab.tsx
 create mode 100644 src/components/tabs/TabList.scss
 create mode 100644 src/components/tabs/TabList.tsx
 create mode 100644 src/components/tabs/TabPanel.tsx
 create mode 100644 src/components/tabs/TabProvider.tsx
 create mode 100644 src/components/tabs/__stories__/Docs.mdx
 create mode 100644 src/components/tabs/__stories__/TabProvider.stories.tsx
 create mode 100644 src/components/tabs/__stories__/getTabsMock.tsx
 create mode 100644 src/components/tabs/__stories__/tabs.stories.tsx
 create mode 100644 src/components/tabs/__tests__/Tab.test.tsx
 create mode 100644 src/components/tabs/__tests__/TabPanel.test.tsx
 create mode 100644 src/components/tabs/__tests__/TabProvider.test.tsx
 create mode 100644 src/components/tabs/__tests__/TabsList.test.tsx
 create mode 100644 src/components/tabs/__tests__/constants.ts
 create mode 100644 src/components/tabs/__tests__/utils.tsx
 create mode 100644 src/components/tabs/constants.ts
 create mode 100644 src/components/tabs/contexts/TabContext.tsx
 create mode 100644 src/components/tabs/contexts/TabInnerContext.tsx
 create mode 100644 src/components/tabs/index.ts
 create mode 100644 src/components/tabs/types.ts

diff --git a/CODEOWNERS b/CODEOWNERS
index aa9079d933..da5f8d879a 100644
--- a/CODEOWNERS
+++ b/CODEOWNERS
@@ -50,7 +50,7 @@
 /src/components/Stories @DarkGenius
 /src/components/Switch @zamkovskaya
 /src/components/Table @Raubzeug
-/src/components/Tabs @sofiushko
+/src/components/tabs @sofiushko
 /src/components/Text @IsaevAlexandr
 /src/components/TreeList @IsaevAlexandr
 /src/components/TreeSelect @IsaevAlexandr
diff --git a/src/components/index.ts b/src/components/index.ts
index d1deaff651..a57ff4d473 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -51,7 +51,7 @@ export * from './Spin';
 export * from './Switch';
 export * from './Table';
 export * from './TableColumnSetup';
-export * from './Tabs';
+export * from './tabs';
 export * from './Text';
 export * from './Toaster';
 export * from './Toc';
diff --git a/src/components/tabs/README.md b/src/components/tabs/README.md
new file mode 100644
index 0000000000..c89d84caba
--- /dev/null
+++ b/src/components/tabs/README.md
@@ -0,0 +1,5 @@
+<!--GITHUB_BLOCK-->
+
+# tabs
+
+<!--/GITHUB_BLOCK-->
diff --git a/src/components/tabs/Tab.tsx b/src/components/tabs/Tab.tsx
new file mode 100644
index 0000000000..fa6efdce80
--- /dev/null
+++ b/src/components/tabs/Tab.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import React from 'react';
+
+import {KeyCode} from '../../constants';
+import {Label} from '../Label';
+import type {LabelProps} from '../Label';
+import type {AriaLabelingProps, DOMProps, QAProps} from '../types';
+import {filterDOMProps} from '../utils/filterDOMProps';
+
+import {bTabList} from './constants';
+import {TabInnerContext} from './contexts/TabInnerContext';
+import type {TabTriggerProps} from './types';
+
+export interface TabProps extends AriaLabelingProps, DOMProps, QAProps, TabTriggerProps {
+    value: string;
+    title?: string;
+    icon?: React.ReactNode;
+    counter?: number | string;
+    href?: string;
+    label?: {
+        content: React.ReactNode;
+        theme?: LabelProps['theme'];
+    };
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+
+export const Tab = React.forwardRef<HTMLAnchorElement | HTMLDivElement, TabProps>((props, ref) => {
+    const {value, className, icon, counter, label, disabled, href, style, children, title, qa} =
+        props;
+
+    const {activeTabId, onUpdate} = React.useContext(TabInnerContext);
+    const isActive = activeTabId === value;
+
+    const handleClick = (event: React.MouseEvent | React.KeyboardEvent) => {
+        if (disabled) {
+            event.preventDefault();
+            return;
+        }
+        onUpdate?.(value);
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+        if (event.key === KeyCode.SPACEBAR) {
+            onUpdate?.(value);
+        }
+    };
+
+    const tabProps = {
+        'aria-selected': isActive,
+        'aria-disabled': disabled === true,
+        'aria-controls': props['aria-controls'],
+        ...filterDOMProps(props, {labelable: true}),
+        role: 'tab',
+        style,
+        title,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        id: props.id,
+        'data-qa': qa,
+        className: bTabList('item', {active: isActive, disabled}, className),
+    };
+
+    const content = (
+        <div className={bTabList('item-content')}>
+            {icon && <div className={bTabList('item-icon')}>{icon}</div>}
+            <div className={bTabList('item-title')}>{children || value}</div>
+            {counter !== undefined && <div className={bTabList('item-counter')}>{counter}</div>}
+            {label && (
+                <Label className={bTabList('item-label')} theme={label.theme}>
+                    {label.content}
+                </Label>
+            )}
+        </div>
+    );
+
+    if (href) {
+        return (
+            <a {...tabProps} href={href} ref={ref as React.Ref<HTMLAnchorElement>}>
+                {content}
+            </a>
+        );
+    }
+
+    return (
+        <div {...tabProps} tabIndex={disabled ? -1 : 0} ref={ref as React.Ref<HTMLDivElement>}>
+            {content}
+        </div>
+    );
+});
+
+Tab.displayName = 'Tab';
diff --git a/src/components/tabs/TabList.scss b/src/components/tabs/TabList.scss
new file mode 100644
index 0000000000..b2e5710c9f
--- /dev/null
+++ b/src/components/tabs/TabList.scss
@@ -0,0 +1,142 @@
+@use '../variables';
+@use '../../../styles/mixins';
+
+$block: '.#{variables.$ns}tab-list';
+
+#{$block} {
+    --_--vertical-item-padding: var(--g-tabs-vertical-item-padding, 6px 20px);
+    --_--vertical-item-height: var(--g-tabs-vertical-item-height, 18px);
+
+    &_size {
+        &_m {
+            --_--item-height: 36px;
+            --_--item-gap: 24px;
+            --_--item-border-width: 2px;
+
+            #{$block}__item-title,
+            #{$block}__item-counter {
+                @include mixins.text-body-1();
+            }
+        }
+
+        &_l {
+            --_--item-height: 40px;
+            --_--item-gap: 28px;
+            --_--item-border-width: 2px;
+
+            #{$block}__item-title,
+            #{$block}__item-counter {
+                @include mixins.text-body-2();
+            }
+        }
+
+        &_xl {
+            --_--item-height: 44px;
+            --_--item-gap: 32px;
+            --_--item-border-width: 3px;
+
+            #{$block}__item-title,
+            #{$block}__item-counter {
+                @include mixins.text-subheader-3();
+            }
+        }
+    }
+
+    &__item {
+        cursor: pointer;
+        user-select: none;
+        outline: none;
+        color: inherit;
+        text-decoration: none;
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+        height: var(--g-tabs-item-height, var(--_--item-height));
+        border-block-end: var(--g-tabs-item-border-width, var(--_--item-border-width)) solid
+            transparent;
+        padding-block-start: var(--_--item-border-width);
+
+        &-content {
+            display: flex;
+            align-items: center;
+            border-radius: var(--g-focus-border-radius);
+            min-width: 0;
+            height: 100%;
+        }
+
+        &-icon {
+            margin-inline-end: 8px;
+        }
+
+        &-title {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        &-counter,
+        &-label {
+            margin-inline-start: 8px;
+        }
+
+        &-icon > svg {
+            display: block;
+        }
+
+        &:focus-visible {
+            #{$block}__item-content {
+                outline: 2px solid var(--g-color-line-focus);
+                outline-offset: -2px;
+            }
+        }
+
+        &-title {
+            color: var(--g-color-text-secondary);
+        }
+
+        &-icon,
+        &-counter {
+            color: var(--g-color-text-hint);
+        }
+
+        &_active,
+        &:hover,
+        &:focus-visible {
+            #{$block}__item-title {
+                color: var(--g-color-text-primary);
+            }
+
+            #{$block}__item-icon,
+            #{$block}__item-counter {
+                color: var(--g-color-text-secondary);
+            }
+        }
+
+        &_active,
+        &_active:hover,
+        &_active:focus-visible {
+            border-color: var(--g-color-line-brand);
+        }
+
+        &_disabled {
+            pointer-events: none;
+
+            #{$block}__item-title {
+                color: var(--g-color-text-hint);
+            }
+        }
+    }
+
+    &__tabs {
+        display: flex;
+        align-items: flex-end;
+        flex-wrap: wrap;
+        box-shadow: inset 0 calc(var(--g-tabs-border-width, 1px) * -1) 0 0
+            var(--g-color-line-generic);
+        overflow: hidden;
+
+        > :not(:last-child) {
+            margin-inline-end: var(--g-tabs-item-gap, var(--_--item-gap));
+        }
+    }
+}
diff --git a/src/components/tabs/TabList.tsx b/src/components/tabs/TabList.tsx
new file mode 100644
index 0000000000..ba07d9ce51
--- /dev/null
+++ b/src/components/tabs/TabList.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import React from 'react';
+
+import type {QAProps} from '../types';
+
+import {bTabList} from './constants';
+import {TabContext} from './contexts/TabContext';
+import {TabInnerContext} from './contexts/TabInnerContext';
+import type {TabSize} from './types';
+
+export interface TabListProps extends QAProps {
+    onUpdate?: (value: string) => void;
+    value?: string;
+    size?: TabSize;
+    contentOverflow?: 'wrap';
+    className?: string;
+    children?: React.ReactNode;
+}
+
+export const TabList = React.forwardRef<HTMLDivElement, TabListProps>(
+    ({size = 'm', value, children, className, onUpdate, qa}, ref) => {
+        const activeTabId = React.useContext(TabContext).activeTabId || value;
+
+        const tabInnerContextValue = React.useMemo(
+            () => ({onUpdate, activeTabId}),
+            [onUpdate, activeTabId],
+        );
+
+        return (
+            <div className={bTabList({size}, className)} data-qa={qa} ref={ref}>
+                <div
+                    role="tablist"
+                    className={bTabList('tabs', className)}
+                    aria-orientation="horizontal"
+                >
+                    <TabInnerContext.Provider value={tabInnerContextValue}>
+                        {children}
+                    </TabInnerContext.Provider>
+                </div>
+            </div>
+        );
+    },
+);
+
+TabList.displayName = 'TabList';
diff --git a/src/components/tabs/TabPanel.tsx b/src/components/tabs/TabPanel.tsx
new file mode 100644
index 0000000000..d1bb5c8453
--- /dev/null
+++ b/src/components/tabs/TabPanel.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import React from 'react';
+
+import type {AriaLabelingProps, QAProps} from '../types';
+import {filterDOMProps} from '../utils/filterDOMProps';
+
+import {bTabList} from './constants';
+import {TabContext} from './contexts/TabContext';
+
+export interface TabPanelProps extends QAProps, AriaLabelingProps {
+    id?: string;
+    value: string;
+    children: React.ReactNode;
+}
+
+export const TabPanel = (props: TabPanelProps) => {
+    const {children, value, qa, id} = props;
+    const {activeTabId} = React.useContext(TabContext);
+
+    return (
+        <div
+            {...filterDOMProps(props, {labelable: true})}
+            className={bTabList('panel', {active: activeTabId === value})}
+            role="tabpanel"
+            id={id}
+            data-qa={qa}
+        >
+            {activeTabId === value ? children : null}
+        </div>
+    );
+};
diff --git a/src/components/tabs/TabProvider.tsx b/src/components/tabs/TabProvider.tsx
new file mode 100644
index 0000000000..007c8d8b8b
--- /dev/null
+++ b/src/components/tabs/TabProvider.tsx
@@ -0,0 +1,14 @@
+'use client';
+
+import React from 'react';
+
+import {TabContext} from './contexts/TabContext';
+
+export type TabProviderProps = React.PropsWithChildren<{
+    value: string | undefined;
+}>;
+
+export const TabProvider = ({value: activeTabId, children}: TabProviderProps) => {
+    const value = React.useMemo(() => ({activeTabId}), [activeTabId]);
+    return <TabContext.Provider value={value}>{children}</TabContext.Provider>;
+};
diff --git a/src/components/tabs/__stories__/Docs.mdx b/src/components/tabs/__stories__/Docs.mdx
new file mode 100644
index 0000000000..193a5e4693
--- /dev/null
+++ b/src/components/tabs/__stories__/Docs.mdx
@@ -0,0 +1,6 @@
+import {Meta, Markdown} from '@storybook/addon-docs';
+import Readme from '../README.md?raw';
+
+<Meta title="Components/navigation/tabs" />
+
+<Markdown>{Readme}</Markdown>
diff --git a/src/components/tabs/__stories__/TabProvider.stories.tsx b/src/components/tabs/__stories__/TabProvider.stories.tsx
new file mode 100644
index 0000000000..44bcba6888
--- /dev/null
+++ b/src/components/tabs/__stories__/TabProvider.stories.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+
+import {useArgs} from '@storybook/preview-api';
+import type {Meta, StoryFn} from '@storybook/react';
+
+import {Tab} from '../Tab';
+import {TabList} from '../TabList';
+import type {TabListProps} from '../TabList';
+import {TabPanel} from '../TabPanel';
+import {TabProvider} from '../TabProvider';
+
+import {getTabsMock} from './getTabsMock';
+
+const meta: Meta<typeof TabList> = {
+    title: 'Components/Navigation/tabs/TabProvider',
+    component: TabList,
+    args: {
+        value: 'active',
+    },
+    argTypes: {
+        value: {
+            control: {type: 'select'},
+            options: getTabsMock({})?.map(({value}) => value),
+        },
+    },
+    parameters: {
+        a11y: {
+            element: '#storybook-root',
+            config: {
+                rules: [
+                    {
+                        id: 'aria-required-children',
+                        enabled: false,
+                        selector: '[id^="wrapped"]',
+                    },
+                    {
+                        id: 'aria-required-parent',
+                        enabled: false,
+                        selector: '[id^="wrapped"]',
+                    },
+                    {
+                        id: 'color-contrast',
+                        enabled: false,
+                    },
+                ],
+            },
+        },
+    },
+};
+
+export default meta;
+
+export const Default: StoryFn<TabListProps> = ({...args}) => {
+    const [, setStoryArgs] = useArgs();
+
+    const items = React.useMemo(
+        () =>
+            getTabsMock({})?.map((props, i) => (
+                <Tab key={i} {...props} aria-controls={`panel-${i}`} id={`tab-${i}`} />
+            )),
+        [],
+    );
+
+    const panels = React.useMemo(
+        () =>
+            getTabsMock({})?.map((tab, i) => (
+                <TabPanel key={i} value={tab.value} aria-labelledby={`tab-${i}`} id={`panel-${i}`}>
+                    {`Content of ${tab.value} tab panel`}
+                </TabPanel>
+            )),
+        [],
+    );
+
+    return (
+        <TabProvider value={args.value}>
+            <TabList {...args} onUpdate={(tabId) => setStoryArgs({value: tabId})}>
+                {items}
+            </TabList>
+            <div>{panels}</div>
+        </TabProvider>
+    );
+};
diff --git a/src/components/tabs/__stories__/getTabsMock.tsx b/src/components/tabs/__stories__/getTabsMock.tsx
new file mode 100644
index 0000000000..7288e7b995
--- /dev/null
+++ b/src/components/tabs/__stories__/getTabsMock.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+
+import {Flame, SquarePlus, SquareXmark} from '@gravity-ui/icons';
+
+import {Icon} from '../../Icon';
+import {Flex} from '../../layout';
+import type {TabProps} from '../Tab';
+
+type StoryParams = {
+    withIcon?: boolean;
+    withCounter?: boolean;
+    withLabel?: boolean;
+    withLink?: boolean;
+    withCustomChildren?: boolean;
+};
+
+const gearIcon = <Flame width={18} height={18} />;
+
+export function getTabsMock(args: StoryParams): TabProps[] {
+    return [
+        {
+            value: 'first',
+            title: 'First Tab',
+            children: args.withCustomChildren ? <RenderWithWrap title="First Tab" /> : 'First Tab',
+            icon: args.withIcon ? gearIcon : undefined,
+            counter: args.withCounter ? Math.floor(Math.random() * 5 + 1) : undefined,
+            label: args.withLabel ? {content: 'Normal', theme: 'normal'} : undefined,
+            href: args.withLink ? 'https://gravity-ui.com' : undefined,
+        },
+        {
+            value: 'active',
+            title: 'Active Tab',
+            children: args.withCustomChildren ? (
+                <RenderWithWrap title="Active Tab" />
+            ) : (
+                'Active Tab'
+            ),
+            icon: args.withIcon ? gearIcon : undefined,
+            counter: args.withCounter ? Math.floor(Math.random() * 5 + 1) : undefined,
+            label: args.withLabel ? {content: 'Warning', theme: 'warning'} : undefined,
+            href: args.withLink ? 'https://gravity-ui.com/components' : undefined,
+        },
+        {
+            value: 'disabled',
+            title: 'disabled',
+            children: args.withCustomChildren ? (
+                <RenderWithWrap title="Disabled Tab" />
+            ) : (
+                'Disabled Tab'
+            ),
+            icon: args.withIcon ? gearIcon : undefined,
+            counter: args.withCounter ? Math.floor(Math.random() * 5 + 1) : undefined,
+            label: args.withLabel ? {content: 'Danger', theme: 'danger'} : undefined,
+            disabled: true,
+            href: args.withLink ? 'https://gravity-ui.com/components/uikit/tabs' : undefined,
+        },
+        {
+            value: 'fourth',
+            title: 'Fourth Long Text To Show Tab',
+            children: args.withCustomChildren ? (
+                <RenderWithWrap title="Fourth Long Text To Show Tab" />
+            ) : (
+                'Fourth Long Text To Show Tab'
+            ),
+            icon: args.withIcon ? gearIcon : undefined,
+            counter: args.withCounter ? Math.floor(Math.random() * 5 + 1) : undefined,
+            label: args.withLabel ? {content: 'Warning', theme: 'warning'} : undefined,
+            href: args.withLink ? 'https://gravity-ui.com' : undefined,
+        },
+        {
+            value: 'fifth',
+            title: 'One More Long Text Tab To Show',
+            children: args.withCustomChildren ? (
+                <RenderWithWrap title="One More Long Text Tab To Show" />
+            ) : (
+                'One More Long Text Tab To Show'
+            ),
+            icon: args.withIcon ? gearIcon : undefined,
+            counter: args.withCounter ? Math.floor(Math.random() * 5 + 1) : undefined,
+            label: args.withLabel ? {content: 'Warning', theme: 'warning'} : undefined,
+            href: args.withLink ? 'https://gravity-ui.com' : undefined,
+        },
+    ];
+}
+
+const RenderWithWrap = (props: {title: string | React.ReactNode}) => {
+    const {title} = props;
+    return (
+        <Flex alignItems="center" gap={1}>
+            <Icon data={SquarePlus} size={16} />
+
+            <span
+                style={{
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    maxWidth: 'calc(100px - 20px - 20px)',
+                    display: 'inline-block',
+                    verticalAlign: 'bottom',
+                }}
+                title={typeof title === 'string' ? title : undefined}
+            >
+                {title}
+            </span>
+            <Icon data={SquareXmark} size={16} />
+        </Flex>
+    );
+};
diff --git a/src/components/tabs/__stories__/tabs.stories.tsx b/src/components/tabs/__stories__/tabs.stories.tsx
new file mode 100644
index 0000000000..a46dad2aa0
--- /dev/null
+++ b/src/components/tabs/__stories__/tabs.stories.tsx
@@ -0,0 +1,150 @@
+import React from 'react';
+
+import {useArgs} from '@storybook/preview-api';
+import type {Meta, StoryFn} from '@storybook/react';
+
+import {Tab} from '../Tab';
+import {TabList} from '../TabList';
+import type {TabListProps} from '../TabList';
+
+import {getTabsMock} from './getTabsMock';
+
+const meta: Meta<typeof TabList> = {
+    title: 'Components/Navigation/tabs',
+    component: TabList,
+    args: {
+        value: 'active',
+    },
+    argTypes: {
+        value: {
+            control: {type: 'select'},
+            options: getTabsMock({})?.map(({value}) => value),
+        },
+    },
+    parameters: {
+        a11y: {
+            element: '#storybook-root',
+            config: {
+                rules: [
+                    {
+                        id: 'aria-required-children',
+                        enabled: false,
+                        selector: '[id^="wrapped"]',
+                    },
+                    {
+                        id: 'aria-required-parent',
+                        enabled: false,
+                        selector: '[id^="wrapped"]',
+                    },
+                    {
+                        id: 'color-contrast',
+                        enabled: false,
+                    },
+                ],
+            },
+        },
+    },
+};
+
+export default meta;
+
+export const Default: StoryFn<TabListProps> = ({...props}) => {
+    const [, setStoryArgs] = useArgs();
+
+    const items = React.useMemo(
+        () => getTabsMock({})?.map((props, i) => <Tab key={i} {...props} />),
+        [],
+    );
+
+    return (
+        <TabList {...props} onUpdate={(tabId) => setStoryArgs({value: tabId})}>
+            {items}
+        </TabList>
+    );
+};
+
+export const WithIcons: StoryFn<TabListProps> = ({...props}) => {
+    const [, setStoryArgs] = useArgs();
+
+    const items = React.useMemo(
+        () => getTabsMock({withIcon: true})?.map((props, i) => <Tab key={i} {...props} />),
+        [],
+    );
+    return (
+        <TabList {...props} onUpdate={(tabId) => setStoryArgs({value: tabId})}>
+            {items}
+        </TabList>
+    );
+};
+
+export const WithCounter: StoryFn<TabListProps> = ({...props}) => {
+    const [, setStoryArgs] = useArgs();
+
+    const items = React.useMemo(
+        () => getTabsMock({withCounter: true})?.map((props, i) => <Tab key={i} {...props} />),
+        [],
+    );
+    return (
+        <TabList {...props} onUpdate={(tabId) => setStoryArgs({value: tabId})}>
+            {items}
+        </TabList>
+    );
+};
+
+export const WithLabel: StoryFn<TabListProps> = ({...props}) => {
+    const [, setStoryArgs] = useArgs();
+
+    const items = React.useMemo(
+        () => getTabsMock({withLabel: true})?.map((props, i) => <Tab key={i} {...props} />),
+        [],
+    );
+    return (
+        <TabList {...props} onUpdate={(tabId) => setStoryArgs({value: tabId})}>
+            {items}
+        </TabList>
+    );
+};
+
+export const WithCustomWidth: StoryFn<TabListProps> = ({...props}) => {
+    const [, setStoryArgs] = useArgs();
+
+    const items = React.useMemo(
+        () =>
+            getTabsMock({})?.map((props, i) => <Tab key={i} {...props} style={{width: '50px'}} />),
+        [],
+    );
+    return (
+        <TabList {...props} onUpdate={(tabId) => setStoryArgs({value: tabId})}>
+            {items}
+        </TabList>
+    );
+};
+
+export const WithLink: StoryFn<TabListProps> = ({...props}) => {
+    const [, setStoryArgs] = useArgs();
+
+    const items = React.useMemo(
+        () => getTabsMock({withLink: true})?.map((props, i) => <Tab key={i} {...props} />),
+        [],
+    );
+    return (
+        <TabList {...props} onUpdate={(tabId) => setStoryArgs({value: tabId})}>
+            {items}
+        </TabList>
+    );
+};
+
+export const CustomTab: StoryFn<TabListProps> = ({...props}) => {
+    const [, setStoryArgs] = useArgs();
+
+    const items = React.useMemo(
+        () =>
+            getTabsMock({withCustomChildren: true})?.map((props, i) => <Tab key={i} {...props} />),
+        [],
+    );
+    return (
+        <TabList {...props} onUpdate={(tabId) => setStoryArgs({value: tabId})}>
+            {items}
+        </TabList>
+    );
+};
diff --git a/src/components/tabs/__tests__/Tab.test.tsx b/src/components/tabs/__tests__/Tab.test.tsx
new file mode 100644
index 0000000000..c29637e2d0
--- /dev/null
+++ b/src/components/tabs/__tests__/Tab.test.tsx
@@ -0,0 +1,148 @@
+import React from 'react';
+
+import {Flame} from '@gravity-ui/icons';
+
+import {Tab} from '../';
+import {render, screen} from '../../../../test-utils/utils';
+
+import {tab1} from './constants';
+
+test('should render tab item by default', () => {
+    render(<Tab value={tab1.id}>{tab1.title}</Tab>);
+    const component = screen.getByRole('tab');
+
+    expect(component).toBeVisible();
+    expect(component).not.toHaveClass('g-tabs__item_active');
+    expect(component).toHaveAttribute('aria-selected', 'false');
+    expect(component).toHaveAttribute('aria-disabled', 'false');
+});
+
+test('should render disabled tab item', () => {
+    render(
+        <Tab value={tab1.id} disabled={true}>
+            {tab1.title}
+        </Tab>,
+    );
+    const component = screen.getByRole('tab');
+
+    expect(component).toBeVisible();
+    expect(component).toHaveAttribute('aria-disabled', 'true');
+    expect(component).toHaveAttribute('tabIndex', '-1');
+});
+
+test('should passed title', () => {
+    render(
+        <Tab value={tab1.id} title={tab1.title}>
+            {tab1.title}
+        </Tab>,
+    );
+    const component = screen.getByTitle(tab1.title);
+
+    expect(component).toBeVisible();
+});
+
+test('should passed aria-controls and id', () => {
+    const tabId = 'tab-id';
+    const ariaId = 'aria-id';
+    render(
+        <Tab value={tab1.id} title={tab1.title} aria-controls={ariaId} id={tabId}>
+            {tab1.title}
+        </Tab>,
+    );
+    const component = screen.getByTitle(tab1.title);
+
+    expect(component).toHaveAttribute('aria-controls', ariaId);
+    expect(component).toHaveAttribute('id', tabId);
+});
+
+test('should passed children', () => {
+    const titleQaId = 'title-qa-id';
+    render(
+        <Tab value={tab1.id}>
+            <span data-qa={titleQaId}>html title</span>
+        </Tab>,
+    );
+
+    const component = screen.getByRole('tab');
+    const titleComponent = screen.getByTestId(titleQaId);
+
+    expect(component).toContainElement(titleComponent);
+});
+
+test('should render value if children is empty', () => {
+    render(<Tab value={tab1.id} />);
+
+    const component = screen.getByRole('tab');
+    const titleComponent = screen.getByText(tab1.id);
+
+    expect(component).toContainElement(titleComponent);
+    expect(titleComponent).toHaveClass('g-tab-list__item-title');
+});
+
+test('should render counter', () => {
+    const counter = 3;
+
+    render(
+        <Tab value={tab1.id} counter={counter}>
+            {tab1.title}
+        </Tab>,
+    );
+
+    const component = screen.getByRole('tab');
+    const counterComponent = screen.getByText(counter);
+
+    expect(counterComponent).toBeVisible();
+    expect(counterComponent).toHaveClass('g-tab-list__item-counter');
+    expect(component).toContainElement(counterComponent);
+});
+
+test('should render label', () => {
+    const labelQaId = 'label-qa-id';
+
+    const label = {
+        theme: 'normal' as const,
+        content: <span data-qa={labelQaId}>label content</span>,
+    };
+
+    render(
+        <Tab value={tab1.id} label={label}>
+            {tab1.title}
+        </Tab>,
+    );
+
+    const component = screen.getByRole('tab');
+    const labelComponent = screen.getByTestId(labelQaId);
+
+    expect(labelComponent).toBeVisible();
+    expect(component).toContainElement(labelComponent);
+});
+
+test('should render icon', () => {
+    const iconQaId = 'icon-qa-id';
+
+    const icon = <Flame data-qa={iconQaId} width={18} height={18} />;
+
+    render(
+        <Tab value={tab1.id} title={tab1.title} icon={icon}>
+            {tab1.title}
+        </Tab>,
+    );
+
+    const component = screen.getByRole('tab');
+    const iconComponent = screen.getByTestId(iconQaId);
+
+    expect(iconComponent).toBeVisible();
+    expect(component).toContainElement(iconComponent);
+});
+
+test('should render link', async () => {
+    render(
+        <Tab value={tab1.id} title={tab1.title} href={'https://example.com/foo/bar'}>
+            {tab1.title}
+        </Tab>,
+    );
+
+    const component = screen.getByRole('tab');
+    expect(component.tagName).toBe('A');
+    expect(component).toHaveAttribute('href', 'https://example.com/foo/bar');
+});
diff --git a/src/components/tabs/__tests__/TabPanel.test.tsx b/src/components/tabs/__tests__/TabPanel.test.tsx
new file mode 100644
index 0000000000..ad6435eec7
--- /dev/null
+++ b/src/components/tabs/__tests__/TabPanel.test.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import {TabPanel} from '../';
+import {render, screen} from '../../../../test-utils/utils';
+
+import {tab1} from './constants';
+
+test('should render tab panel by default', () => {
+    render(<TabPanel value={tab1.id}>Panel Title</TabPanel>);
+    const component = screen.getByRole('tabpanel');
+
+    expect(component).toBeVisible();
+    expect(component).not.toHaveClass('g-tabs__panel_active');
+});
+
+test('should passed aria-labelledby and id', () => {
+    const panelId = 'panel-id';
+    const ariaId = 'aria-id';
+    render(
+        <TabPanel value={tab1.id} aria-labelledby={ariaId} id={panelId}>
+            Panel Title
+        </TabPanel>,
+    );
+
+    const component = screen.getByRole('tabpanel');
+
+    expect(component).toHaveAttribute('aria-labelledby', ariaId);
+    expect(component).toHaveAttribute('id', panelId);
+});
diff --git a/src/components/tabs/__tests__/TabProvider.test.tsx b/src/components/tabs/__tests__/TabProvider.test.tsx
new file mode 100644
index 0000000000..801380a9ef
--- /dev/null
+++ b/src/components/tabs/__tests__/TabProvider.test.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+
+import userEvent from '@testing-library/user-event';
+
+import {Tab, TabList, TabPanel, TabProvider} from '../';
+import {render, screen} from '../../../../test-utils/utils';
+
+import {panel1qa, panel2qa, tab1, tab2} from './constants';
+import {ControlledTabs} from './utils';
+
+test('should render active tab and panel', () => {
+    render(
+        <TabProvider value={tab2.id}>
+            <TabList>
+                <Tab value={tab1.id} qa={tab1.qa}>
+                    {tab1.title}
+                </Tab>
+                <Tab value={tab2.id} qa={tab2.qa}>
+                    {tab2.title}
+                </Tab>
+            </TabList>
+            <TabPanel value={tab1.id} qa={panel1qa}>
+                panel1
+            </TabPanel>
+            <TabPanel value={tab2.id} qa={panel2qa}>
+                panel2
+            </TabPanel>
+        </TabProvider>,
+    );
+
+    const tabComponent1 = screen.getByTestId(tab1.qa);
+    const tabComponent2 = screen.getByTestId(tab2.qa);
+
+    const panelComponent1 = screen.getByTestId(panel1qa);
+    const panelComponent2 = screen.getByTestId(panel2qa);
+
+    expect(tabComponent1).not.toHaveClass('g-tab-list__item_active');
+    expect(tabComponent1).toHaveAttribute('aria-selected', 'false');
+
+    expect(tabComponent2).toHaveClass('g-tab-list__item_active');
+    expect(tabComponent2).toHaveAttribute('aria-selected', 'true');
+
+    expect(panelComponent1).toBeEmptyDOMElement();
+    expect(panelComponent1).not.toHaveClass('g-tab-list__panel_active');
+
+    expect(panelComponent2).not.toBeEmptyDOMElement();
+    expect(panelComponent2).toHaveClass('g-tab-list__panel_active');
+});
+
+test('should chose tabpanel on value change', async () => {
+    render(<ControlledTabs value={tab1.id} />);
+
+    const user = userEvent.setup();
+    const panelComponent1 = screen.getByTestId(panel1qa);
+    const panelComponent2 = screen.getByTestId(panel2qa);
+
+    expect(panelComponent2).toBeEmptyDOMElement();
+    expect(panelComponent2).not.toHaveClass('g-tab-list__panel_active');
+
+    expect(panelComponent1).not.toBeEmptyDOMElement();
+    expect(panelComponent1).toHaveClass('g-tab-list__panel_active');
+
+    const tabComponent2 = screen.getByTestId(tab2.qa);
+
+    await user.click(tabComponent2);
+
+    expect(panelComponent1).toBeEmptyDOMElement();
+    expect(panelComponent1).not.toHaveClass('g-tab-list__panel_active');
+
+    expect(panelComponent2).not.toBeEmptyDOMElement();
+    expect(panelComponent2).toHaveClass('g-tab-list__panel_active');
+});
diff --git a/src/components/tabs/__tests__/TabsList.test.tsx b/src/components/tabs/__tests__/TabsList.test.tsx
new file mode 100644
index 0000000000..f248a3d054
--- /dev/null
+++ b/src/components/tabs/__tests__/TabsList.test.tsx
@@ -0,0 +1,172 @@
+import React from 'react';
+
+import userEvent from '@testing-library/user-event';
+
+import {Tab, TabList} from '../';
+import {render, screen} from '../../../../test-utils/utils';
+import type {TabSize} from '../types';
+
+const qaId = 'tabs-list';
+
+import {tab1, tab2} from './constants';
+
+test('should render tabs by default', () => {
+    render(<TabList qa={qaId} />);
+    const component = screen.getByTestId(qaId);
+
+    expect(component).toBeVisible();
+    expect(component).toHaveClass('g-tab-list_size_m');
+});
+
+test('should not render tabs if no items', () => {
+    render(<TabList />);
+    const component = screen.getByRole('tablist');
+    const tabsComponents = screen.queryAllByRole('tab');
+
+    expect(component).toBeEmptyDOMElement();
+    expect(tabsComponents).toHaveLength(0);
+});
+
+test.each(new Array<TabSize>('m', 'l', 'xl'))('should render with given "%s" size', (size) => {
+    render(<TabList size={size} qa={qaId} />);
+    const component = screen.getByTestId(qaId);
+
+    expect(component).toHaveClass(`g-tab-list_size_${size}`);
+});
+
+test('should passed className', () => {
+    const className = 'class-name';
+
+    render(<TabList className={className} qa={qaId} />);
+    const component = screen.getByTestId(qaId);
+
+    expect(component).toHaveClass(className);
+});
+
+test('should not select tab by default', () => {
+    render(
+        <TabList>
+            <Tab value={tab1.id} qa={tab1.qa}>
+                {tab1.title}
+            </Tab>
+            <Tab value={tab2.id} qa={tab2.qa}>
+                {tab2.title}
+            </Tab>
+        </TabList>,
+    );
+    const tabComponent1 = screen.getByTestId(tab1.qa);
+    const tabComponent2 = screen.getByTestId(tab2.qa);
+
+    expect(tabComponent1).not.toHaveClass('g-tab-list__item_active');
+    expect(tabComponent1).toHaveAttribute('aria-selected', 'false');
+
+    expect(tabComponent2).not.toHaveClass('g-tab-list__item_active');
+    expect(tabComponent2).toHaveAttribute('aria-selected', 'false');
+});
+
+test('should passed active tab', () => {
+    render(
+        <TabList value={tab2.id}>
+            <Tab value={tab1.id} qa={tab1.qa}>
+                {tab1.title}
+            </Tab>
+            <Tab value={tab2.id} qa={tab2.qa}>
+                {tab2.title}
+            </Tab>
+        </TabList>,
+    );
+    const tabComponent1 = screen.getByTestId(tab1.qa);
+    const tabComponent2 = screen.getByTestId(tab2.qa);
+
+    expect(tabComponent1).not.toHaveClass('g-tab-list__item_active');
+    expect(tabComponent1).toHaveAttribute('aria-selected', 'false');
+
+    expect(tabComponent2).toHaveClass('g-tab-list__item_active');
+    expect(tabComponent2).toHaveAttribute('aria-selected', 'true');
+});
+
+test('should call onUpdate on tab click', async () => {
+    const onUpdateFn = jest.fn();
+    const user = userEvent.setup();
+
+    render(
+        <TabList onUpdate={onUpdateFn}>
+            <Tab value={tab1.id} qa={tab1.qa}>
+                {tab1.title}
+            </Tab>
+            <Tab value={tab2.id} qa={tab2.qa}>
+                {tab2.title}
+            </Tab>
+        </TabList>,
+    );
+    const tabComponent1 = screen.getByTestId(tab1.qa);
+    const tabComponent2 = screen.getByTestId(tab2.qa);
+
+    await user.click(tabComponent2);
+    expect(onUpdateFn).toHaveBeenCalledWith(tab2.id);
+
+    await user.click(tabComponent1);
+    expect(onUpdateFn).toHaveBeenCalledWith(tab1.id);
+});
+
+test('should wrap tabs', () => {
+    const wrapQaId = 'wrap';
+
+    render(
+        <TabList>
+            <div data-qa={wrapQaId}>
+                <Tab value={tab1.id}>{tab1.title}</Tab>
+            </div>
+        </TabList>,
+    );
+
+    const wrapper = screen.getByTestId(wrapQaId);
+    const tabComponent = screen.getByText(tab1.title);
+
+    expect(wrapper).toContainElement(tabComponent);
+});
+
+test('should call onUpdate on "\' \'" key', async () => {
+    const onUpdateFn = jest.fn();
+    const user = userEvent.setup();
+    render(
+        <TabList onUpdate={onUpdateFn}>
+            <Tab value={tab1.id} qa={tab1.qa}>
+                {tab1.title}
+            </Tab>
+            <Tab value={tab2.id} qa={tab2.qa}>
+                {tab2.title}
+            </Tab>
+        </TabList>,
+    );
+
+    const tabComponent2 = screen.getByTestId(tab2.qa);
+    tabComponent2.focus();
+
+    await user.keyboard(' ');
+
+    expect(onUpdateFn).toHaveBeenCalledWith(tab2.id);
+});
+
+test('should not call onUpdate on "[Enter]" key', async () => {
+    const onUpdateFn = jest.fn();
+    const user = userEvent.setup();
+
+    render(
+        <TabList onUpdate={onUpdateFn}>
+            <Tab value={tab1.id} qa={tab1.qa}>
+                {tab1.title}
+            </Tab>
+            <Tab value={tab2.id} qa={tab2.qa}>
+                {tab2.title}
+            </Tab>
+        </TabList>,
+    );
+
+    const tabComponent2 = screen.getByTestId(tab2.qa);
+    tabComponent2.focus();
+
+    await user.keyboard('[Enter]');
+
+    expect(onUpdateFn).not.toHaveBeenCalled();
+});
diff --git a/src/components/tabs/__tests__/constants.ts b/src/components/tabs/__tests__/constants.ts
new file mode 100644
index 0000000000..e8d1d21219
--- /dev/null
+++ b/src/components/tabs/__tests__/constants.ts
@@ -0,0 +1,5 @@
+export const tabId = 'tab-id';
+export const tab1 = {id: 'Tab 1 title', title: 'tab1', qa: 'tab1qa'};
+export const tab2 = {id: 'Tab 2 title', title: 'tab2', qa: 'tab2qa'};
+export const panel1qa = 'panel1qa';
+export const panel2qa = 'panel2qa';
diff --git a/src/components/tabs/__tests__/utils.tsx b/src/components/tabs/__tests__/utils.tsx
new file mode 100644
index 0000000000..1c7ff0d3a6
--- /dev/null
+++ b/src/components/tabs/__tests__/utils.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {Tab, TabList, TabPanel, TabProvider} from '..';
+
+import {panel1qa, panel2qa, tab1, tab2} from './constants';
+
+export const ControlledTabs = ({value}: {value?: string}) => {
+    const [stateValue, setStateValue] = React.useState(value);
+
+    const handleUpdate = (nextValue: string) => {
+        setStateValue(nextValue);
+    };
+
+    return (
+        <TabProvider value={stateValue}>
+            <TabList onUpdate={handleUpdate}>
+                <Tab value={tab1.id} qa={tab1.qa}>
+                    {tab1.title}
+                </Tab>
+                <Tab value={tab2.id} qa={tab2.qa}>
+                    {tab2.title}
+                </Tab>
+            </TabList>
+            <TabPanel value={tab1.id} qa={panel1qa}>
+                panel1
+            </TabPanel>
+            <TabPanel value={tab2.id} qa={panel2qa}>
+                panel2
+            </TabPanel>
+        </TabProvider>
+    );
+};
diff --git a/src/components/tabs/constants.ts b/src/components/tabs/constants.ts
new file mode 100644
index 0000000000..d6e21fdf30
--- /dev/null
+++ b/src/components/tabs/constants.ts
@@ -0,0 +1,5 @@
+import {block} from '../utils/cn';
+
+import './TabList.scss';
+
+export const bTabList = block('tab-list');
diff --git a/src/components/tabs/contexts/TabContext.tsx b/src/components/tabs/contexts/TabContext.tsx
new file mode 100644
index 0000000000..708756a912
--- /dev/null
+++ b/src/components/tabs/contexts/TabContext.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export interface TabContextProps {
+    activeTabId: string | undefined;
+}
+export const TabContext = React.createContext<TabContextProps>({
+    activeTabId: undefined,
+});
+
+TabContext.displayName = 'TabsContext';
diff --git a/src/components/tabs/contexts/TabInnerContext.tsx b/src/components/tabs/contexts/TabInnerContext.tsx
new file mode 100644
index 0000000000..cb06715c7a
--- /dev/null
+++ b/src/components/tabs/contexts/TabInnerContext.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export interface TabInnerContextProps {
+    activeTabId: string | undefined;
+    onUpdate: ((value: string) => void) | undefined;
+}
+
+export const TabInnerContext = React.createContext<TabInnerContextProps>({
+    activeTabId: undefined,
+    onUpdate: undefined,
+});
+
+TabInnerContext.displayName = 'TabInnerContext';
diff --git a/src/components/tabs/index.ts b/src/components/tabs/index.ts
new file mode 100644
index 0000000000..7d13e26dd2
--- /dev/null
+++ b/src/components/tabs/index.ts
@@ -0,0 +1,5 @@
+export {TabList, type TabListProps} from './TabList';
+export {Tab, type TabProps} from './Tab';
+export {TabProvider, type TabProviderProps} from './TabProvider';
+export {TabPanel, type TabPanelProps} from './TabPanel';
+export type {TabSize} from './types';
diff --git a/src/components/tabs/types.ts b/src/components/tabs/types.ts
new file mode 100644
index 0000000000..7d04959e42
--- /dev/null
+++ b/src/components/tabs/types.ts
@@ -0,0 +1,2 @@
+export type TabSize = 'm' | 'l' | 'xl';
+export type TabTriggerProps = Pick<React.ButtonHTMLAttributes<HTMLElement>, 'id' | 'aria-controls'>;
diff --git a/src/stories/Branding/BrandingConfugurator/BrandingConfigurator.tsx b/src/stories/Branding/BrandingConfugurator/BrandingConfigurator.tsx
index 9c6ee96eb8..01e32edce9 100644
--- a/src/stories/Branding/BrandingConfugurator/BrandingConfigurator.tsx
+++ b/src/stories/Branding/BrandingConfugurator/BrandingConfigurator.tsx
@@ -14,8 +14,9 @@ import {
     Radio,
     Spin,
     Switch,
+    Tab,
+    TabList,
     Table,
-    Tabs,
     withTableSelection,
 } from '../../../components';
 import {cn} from '../../../components/utils/cn';
@@ -158,14 +159,10 @@ export function BrandingConfigurator({theme}: BrandingConfiguratorProps) {
                 </div>
                 <div className={b('components-title')}>Tabs</div>
                 <div className={b('components-content')}>
-                    <Tabs
-                        activeTab={activeTab}
-                        onSelectTab={setActiveTab}
-                        items={[
-                            {id: 'overview', title: 'Overview'},
-                            {id: 'settings', title: 'Settings'},
-                        ]}
-                    />
+                    <TabList value={activeTab} onUpdate={setActiveTab}>
+                        <Tab value="overview">Overview</Tab>
+                        <Tab value="settings">Settings</Tab>
+                    </TabList>
                 </div>
                 <div className={b('components-title')}>Table</div>
                 <div className={b('components-content')}>