diff --git a/CODEOWNERS b/CODEOWNERS
index b919e8a4cd..297d87abd7 100644
--- a/CODEOWNERS
+++ b/CODEOWNERS
@@ -51,7 +51,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 aff2a20ff4..91b3dc5a0a 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-ru.md b/src/components/legacy/Tabs/README-ru.md
similarity index 99%
rename from src/components/Tabs/README-ru.md
rename to src/components/legacy/Tabs/README-ru.md
index 7c19a9ba9e..cd23c133b3 100644
--- a/src/components/Tabs/README-ru.md
+++ b/src/components/legacy/Tabs/README-ru.md
@@ -5,7 +5,7 @@
 <!--/GITHUB_BLOCK-->
 
 ```tsx
-import {Tabs} from '@gravity-ui/uikit';
+import {Tabs} from '@gravity-ui/uikit/legacy';
 ```
 
 Компонент `Tabs` используется организации контента и навигации по нему, а также для переключения между различными представлениями.
diff --git a/src/components/Tabs/README.md b/src/components/legacy/Tabs/README.md
similarity index 99%
rename from src/components/Tabs/README.md
rename to src/components/legacy/Tabs/README.md
index 901c4b62c5..d16af41020 100644
--- a/src/components/Tabs/README.md
+++ b/src/components/legacy/Tabs/README.md
@@ -5,7 +5,7 @@
 <!--/GITHUB_BLOCK-->
 
 ```tsx
-import {Tabs} from '@gravity-ui/uikit';
+import {Tabs} from '@gravity-ui/uikit/legacy';
 ```
 
 The `Tabs` component is used to explore and organize content, as well as to switch across various views.
diff --git a/src/components/Tabs/Tabs.scss b/src/components/legacy/Tabs/Tabs.scss
similarity index 98%
rename from src/components/Tabs/Tabs.scss
rename to src/components/legacy/Tabs/Tabs.scss
index f81579f5e3..76e2f096bb 100644
--- a/src/components/Tabs/Tabs.scss
+++ b/src/components/legacy/Tabs/Tabs.scss
@@ -1,7 +1,7 @@
-@use '../variables';
-@use '../../../styles/mixins';
+@use '../../variables';
+@use '../../../../styles/mixins';
 
-$block: '.#{variables.$ns}tabs';
+$block: '.#{variables.$ns}tabs-legacy';
 
 #{$block} {
     --_--vertical-item-padding: var(--g-tabs-vertical-item-padding, 6px 20px);
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/legacy/Tabs/Tabs.tsx
similarity index 94%
rename from src/components/Tabs/Tabs.tsx
rename to src/components/legacy/Tabs/Tabs.tsx
index 375fcaaa1e..3591ef2694 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/legacy/Tabs/Tabs.tsx
@@ -2,9 +2,9 @@
 
 import * as React from 'react';
 
-import type {AriaLabelingProps, QAProps} from '../types';
-import {block} from '../utils/cn';
-import {filterDOMProps} from '../utils/filterDOMProps';
+import type {AriaLabelingProps, QAProps} from '../../types';
+import {block} from '../../utils/cn';
+import {filterDOMProps} from '../../utils/filterDOMProps';
 
 import {TabsContext} from './TabsContext';
 import {TabsItem} from './TabsItem';
@@ -12,7 +12,7 @@ import type {TabsItemProps as TabsItemInternalProps} from './TabsItem';
 
 import './Tabs.scss';
 
-const b = block('tabs');
+const b = block('tabs-legacy');
 
 export enum TabsDirection {
     Horizontal = 'horizontal',
@@ -66,6 +66,9 @@ const getActiveTabId = (
 
 const emptyTabsList: TabsItemProps[] = [];
 
+/**
+ * @deprecated
+ */
 const TabsComponent = React.forwardRef<HTMLDivElement, TabsProps>(
     (
         {
diff --git a/src/components/Tabs/TabsContext.ts b/src/components/legacy/Tabs/TabsContext.ts
similarity index 100%
rename from src/components/Tabs/TabsContext.ts
rename to src/components/legacy/Tabs/TabsContext.ts
diff --git a/src/components/Tabs/TabsItem.tsx b/src/components/legacy/Tabs/TabsItem.tsx
similarity index 93%
rename from src/components/Tabs/TabsItem.tsx
rename to src/components/legacy/Tabs/TabsItem.tsx
index 4fcb33bd3f..cf7f91ee8f 100644
--- a/src/components/Tabs/TabsItem.tsx
+++ b/src/components/legacy/Tabs/TabsItem.tsx
@@ -2,14 +2,14 @@
 
 import * as React from 'react';
 
-import {Label} from '../Label';
-import type {LabelProps} from '../Label';
-import type {QAProps} from '../types';
-import {block} from '../utils/cn';
+import {Label} from '../../Label';
+import type {LabelProps} from '../../Label';
+import type {QAProps} from '../../types';
+import {block} from '../../utils/cn';
 
 import {TabsContext} from './TabsContext';
 
-const b = block('tabs');
+const b = block('tabs-legacy');
 
 type ExtraProps = Omit<
     React.HTMLProps<HTMLDivElement>,
diff --git a/src/components/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-allow-not-selected-light-chromium-linux.png b/src/components/legacy/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-allow-not-selected-light-chromium-linux.png
similarity index 100%
rename from src/components/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-allow-not-selected-light-chromium-linux.png
rename to src/components/legacy/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-allow-not-selected-light-chromium-linux.png
diff --git a/src/components/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-light-chromium-linux.png b/src/components/legacy/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-light-chromium-linux.png
similarity index 100%
rename from src/components/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-light-chromium-linux.png
rename to src/components/legacy/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-light-chromium-linux.png
diff --git a/src/components/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-with-custom-tab-light-chromium-linux.png b/src/components/legacy/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-with-custom-tab-light-chromium-linux.png
similarity index 100%
rename from src/components/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-with-custom-tab-light-chromium-linux.png
rename to src/components/legacy/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-smoke-with-custom-tab-light-chromium-linux.png
diff --git a/src/components/Tabs/__stories__/Docs.mdx b/src/components/legacy/Tabs/__stories__/Docs.mdx
similarity index 100%
rename from src/components/Tabs/__stories__/Docs.mdx
rename to src/components/legacy/Tabs/__stories__/Docs.mdx
diff --git a/src/components/Tabs/__stories__/Tabs.stories.tsx b/src/components/legacy/Tabs/__stories__/Tabs.stories.tsx
similarity index 98%
rename from src/components/Tabs/__stories__/Tabs.stories.tsx
rename to src/components/legacy/Tabs/__stories__/Tabs.stories.tsx
index 6295e3ad7b..29758759e7 100644
--- a/src/components/Tabs/__stories__/Tabs.stories.tsx
+++ b/src/components/legacy/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: 'Legacy/Tabs',
     component: Tabs,
     args: {
         direction: TabsDirection.Horizontal,
diff --git a/src/components/Tabs/__stories__/getTabsMock.tsx b/src/components/legacy/Tabs/__stories__/getTabsMock.tsx
similarity index 100%
rename from src/components/Tabs/__stories__/getTabsMock.tsx
rename to src/components/legacy/Tabs/__stories__/getTabsMock.tsx
diff --git a/src/components/Tabs/__stories__/types.ts b/src/components/legacy/Tabs/__stories__/types.ts
similarity index 100%
rename from src/components/Tabs/__stories__/types.ts
rename to src/components/legacy/Tabs/__stories__/types.ts
diff --git a/src/components/Tabs/__tests__/Tabs.test.tsx b/src/components/legacy/Tabs/__tests__/Tabs.test.tsx
similarity index 82%
rename from src/components/Tabs/__tests__/Tabs.test.tsx
rename to src/components/legacy/Tabs/__tests__/Tabs.test.tsx
index 63c7c913c7..1c56e709b2 100644
--- a/src/components/Tabs/__tests__/Tabs.test.tsx
+++ b/src/components/legacy/Tabs/__tests__/Tabs.test.tsx
@@ -2,7 +2,7 @@ import type * as 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';
 
@@ -21,8 +21,8 @@ test('should render tabs by default', () => {
     const component = screen.getByRole('tablist');
 
     expect(component).toBeVisible();
-    expect(component).toHaveClass('g-tabs_size_m');
-    expect(component).toHaveClass('g-tabs_direction_horizontal');
+    expect(component).toHaveClass('g-tabs-legacy_size_m');
+    expect(component).toHaveClass('g-tabs-legacy_direction_horizontal');
 });
 
 test('should not render tabs if no items', () => {
@@ -38,7 +38,7 @@ test.each(new Array<TabsSize>('m', 'l', 'xl'))('should render with given "%s" si
     render(<Tabs items={[]} size={size} qa={qaId} />);
     const component = screen.getByTestId(qaId);
 
-    expect(component).toHaveClass(`g-tabs_size_${size}`);
+    expect(component).toHaveClass(`g-tabs-legacy_size_${size}`);
 });
 
 test.each(new Array<TabsDirection>(TabsDirection.Horizontal, TabsDirection.Vertical))(
@@ -47,7 +47,7 @@ test.each(new Array<TabsDirection>(TabsDirection.Horizontal, TabsDirection.Verti
         render(<Tabs items={[]} direction={direction} qa={qaId} />);
         const component = screen.getByTestId(qaId);
 
-        expect(component).toHaveClass(`g-tabs_direction_${direction}`);
+        expect(component).toHaveClass(`g-tabs-legacy_direction_${direction}`);
     },
 );
 
@@ -65,10 +65,10 @@ test('should not select tab if allow not selected', () => {
     const tabComponent1 = screen.getByTitle(tabTitle1);
     const tabComponent2 = screen.getByTitle(tabTitle2);
 
-    expect(tabComponent1).not.toHaveClass('g-tabs__item_active');
+    expect(tabComponent1).not.toHaveClass('g-tabs-legacy__item_active');
     expect(tabComponent1).toHaveAttribute('aria-selected', 'false');
 
-    expect(tabComponent2).not.toHaveClass('g-tabs__item_active');
+    expect(tabComponent2).not.toHaveClass('g-tabs-legacy__item_active');
     expect(tabComponent2).toHaveAttribute('aria-selected', 'false');
 });
 
@@ -77,10 +77,10 @@ test('should select first tab as active', () => {
     const tabComponent1 = screen.getByTitle(tabTitle1);
     const tabComponent2 = screen.getByTitle(tabTitle2);
 
-    expect(tabComponent1).toHaveClass('g-tabs__item_active');
+    expect(tabComponent1).toHaveClass('g-tabs-legacy__item_active');
     expect(tabComponent1).toHaveAttribute('aria-selected', 'true');
 
-    expect(tabComponent2).not.toHaveClass('g-tabs__item_active');
+    expect(tabComponent2).not.toHaveClass('g-tabs-legacy__item_active');
     expect(tabComponent2).toHaveAttribute('aria-selected', 'false');
 });
 
@@ -89,10 +89,10 @@ test('should passed active tab', () => {
     const tabComponent1 = screen.getByTitle(tabTitle1);
     const tabComponent2 = screen.getByTitle(tabTitle2);
 
-    expect(tabComponent1).not.toHaveClass('g-tabs__item_active');
+    expect(tabComponent1).not.toHaveClass('g-tabs-legacy__item_active');
     expect(tabComponent1).toHaveAttribute('aria-selected', 'false');
 
-    expect(tabComponent2).toHaveClass('g-tabs__item_active');
+    expect(tabComponent2).toHaveClass('g-tabs-legacy__item_active');
     expect(tabComponent2).toHaveAttribute('aria-selected', 'true');
 });
 
diff --git a/src/components/Tabs/__tests__/Tabs.visual.test.tsx b/src/components/legacy/Tabs/__tests__/Tabs.visual.test.tsx
similarity index 96%
rename from src/components/Tabs/__tests__/Tabs.visual.test.tsx
rename to src/components/legacy/Tabs/__tests__/Tabs.visual.test.tsx
index d4acb7dfd9..bd5a4c57fe 100644
--- a/src/components/Tabs/__tests__/Tabs.visual.test.tsx
+++ b/src/components/legacy/Tabs/__tests__/Tabs.visual.test.tsx
@@ -1,6 +1,6 @@
 import {smokeTest, test} from '~playwright/core';
 
-import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import {createSmokeScenarios} from '../../../../stories/tests-factory/create-smoke-scenarios';
 import type {TabsProps} from '../Tabs';
 
 import {directionCases, sizeCases} from './cases';
diff --git a/src/components/Tabs/__tests__/TabsItem.test.tsx b/src/components/legacy/Tabs/__tests__/TabsItem.test.tsx
similarity index 92%
rename from src/components/Tabs/__tests__/TabsItem.test.tsx
rename to src/components/legacy/Tabs/__tests__/TabsItem.test.tsx
index aa44254082..89a7888a63 100644
--- a/src/components/Tabs/__tests__/TabsItem.test.tsx
+++ b/src/components/legacy/Tabs/__tests__/TabsItem.test.tsx
@@ -1,7 +1,7 @@
 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';
@@ -12,7 +12,7 @@ test('should render tab item by default', () => {
     const component = screen.getByRole('tab');
 
     expect(component).toBeVisible();
-    expect(component).not.toHaveClass('g-tabs__item_active');
+    expect(component).not.toHaveClass('g-tabs-legacy__item_active');
     expect(component).toHaveAttribute('aria-selected', 'false');
     expect(component).toHaveAttribute('aria-disabled', 'false');
 });
@@ -22,7 +22,7 @@ test('should render active tab item', () => {
     const component = screen.getByRole('tab');
 
     expect(component).toBeVisible();
-    expect(component).toHaveClass('g-tabs__item_active');
+    expect(component).toHaveClass('g-tabs-legacy__item_active');
     expect(component).toHaveAttribute('aria-selected', 'true');
 });
 
@@ -70,7 +70,7 @@ test('should render id if title is empty', () => {
     const titleComponent = screen.getByText(tabId);
 
     expect(component).toContainElement(titleComponent);
-    expect(titleComponent).toHaveClass('g-tabs__item-title');
+    expect(titleComponent).toHaveClass('g-tabs-legacy__item-title');
 });
 
 test('should render counter', () => {
@@ -82,7 +82,7 @@ test('should render counter', () => {
     const counterComponent = screen.getByText(counter);
 
     expect(counterComponent).toBeVisible();
-    expect(counterComponent).toHaveClass('g-tabs__item-counter');
+    expect(counterComponent).toHaveClass('g-tabs-legacy__item-counter');
     expect(component).toContainElement(counterComponent);
 });
 
@@ -126,7 +126,7 @@ test('should render meta', () => {
     const metaComponent = screen.getByText(meta);
 
     expect(metaComponent).toBeVisible();
-    expect(metaComponent).toHaveClass('g-tabs__item-meta');
+    expect(metaComponent).toHaveClass('g-tabs-legacy__item-meta');
     expect(component).toContainElement(metaComponent);
 });
 
diff --git a/src/components/Tabs/__tests__/cases.tsx b/src/components/legacy/Tabs/__tests__/cases.tsx
similarity index 79%
rename from src/components/Tabs/__tests__/cases.tsx
rename to src/components/legacy/Tabs/__tests__/cases.tsx
index 5de47fd6b1..b31fd9f89e 100644
--- a/src/components/Tabs/__tests__/cases.tsx
+++ b/src/components/legacy/Tabs/__tests__/cases.tsx
@@ -1,4 +1,4 @@
-import type {Cases} from '../../../stories/tests-factory/models';
+import type {Cases} from '../../../../stories/tests-factory/models';
 import type {TabsProps} from '../Tabs';
 import {TabsDirection} from '../Tabs';
 
diff --git a/src/components/Tabs/__tests__/helpers.tsx b/src/components/legacy/Tabs/__tests__/helpers.tsx
similarity index 100%
rename from src/components/Tabs/__tests__/helpers.tsx
rename to src/components/legacy/Tabs/__tests__/helpers.tsx
diff --git a/src/components/Tabs/index.ts b/src/components/legacy/Tabs/index.ts
similarity index 100%
rename from src/components/Tabs/index.ts
rename to src/components/legacy/Tabs/index.ts
diff --git a/src/components/legacy/index.ts b/src/components/legacy/index.ts
index 8f473de4b9..5a82c4ebfd 100644
--- a/src/components/legacy/index.ts
+++ b/src/components/legacy/index.ts
@@ -1 +1,2 @@
 export * from './Popover';
+export * from './Tabs';
diff --git a/src/components/tabs/README.md b/src/components/tabs/README.md
new file mode 100644
index 0000000000..91530bfceb
--- /dev/null
+++ b/src/components/tabs/README.md
@@ -0,0 +1,360 @@
+<!--GITHUB_BLOCK-->
+
+# Tabs components
+
+<!--/GITHUB_BLOCK-->
+
+```tsx
+import {TabProvider, TabList, Tab, TabPanel} from '@gravity-ui/uikit';
+```
+
+Tabs components is used to explore, organize content and switch between different views.
+
+<!--LANDING_BLOCK
+
+<ExampleBlock
+    code={`
+<TabProvider value={activeTab}>
+    <TabList onUpdate={setActiveTab}>
+        <Tab value="first" aria-controls="panel-first" id="tab-first">First Tab</Tab>
+        <Tab value="second" aria-controls="panel-second" id="tab-second">Active Tab</Tab>
+        <Tab value="third" aria-controls="panel-third" id="tab-third" disabled>Disabled Tab</Tab>
+    </TabList>
+    <div>
+        <TabPanel value="first">First Panel</TabPanel>
+        <TabPanel value="second">Second Panel</TabPanel>
+        <TabPanel value="third">Third Panel</TabPanel>
+    </div>
+</TabProvider>
+`}
+>
+    <UIKit.TabProvider value="first">
+        <UIKit.TabList>
+            <UIKit.Tab value="first" aria-controls="panel-first" id="tab-first">First Tab</UIKit.Tab>
+            <UIKit.Tab value="second" aria-controls="panel-second" id="tab-second">Active Tab</UIKit.Tab>
+            <UIKit.Tab value="third" aria-controls="panel-third" id="tab-third" disabled>Disabled Tab</UIKit.Tab>
+        </UIKit.TabList>
+        <div>
+            <UIKit.TabPanel value="first">First Panel</UIKit.TabPanel>
+            <UIKit.TabPanel value="second">Second Panel</UIKit.TabPanel>
+            <UIKit.TabPanel value="third">Third Panel</UIKit.TabPanel>
+        </div>
+    </UIKit.TabProvider>
+</ExampleBlock>
+
+LANDING_BLOCK-->
+
+<!--GITHUB_BLOCK-->
+
+```tsx
+const [activeTab, setActiveTab] = React.useState('second');
+
+return (
+  <TabProvider value={activeTab}>
+    <TabList onUpdate={setActiveTab}>
+      <Tab value="first" aria-controls="panel-first" id="tab-first">
+        First Tab
+      </Tab>
+      <Tab value="second" aria-controls="panel-second" id="tab-second">
+        Active Tab
+      </Tab>
+      <Tab value="third" aria-controls="panel-third" id="tab-third" disabled>
+        Disabled Tab
+      </Tab>
+    </TabList>
+    <div>
+      <TabPanel value="first">First Panel</TabPanel>
+      <TabPanel value="second">Second Panel</TabPanel>
+      <TabPanel value="third">Third Panel</TabPanel>
+    </div>
+  </TabProvider>
+);
+```
+
+<!--/GITHUB_BLOCK-->
+
+### Components
+
+- [TabProvider](#tabprovider)
+- [TabList](#tablist)
+- [Tab](#tab)
+- [TabPanel](#tabpanel)
+
+## TabProvider
+
+A component that provides the tab selection functionality
+
+### Properties
+
+| Name     | Description                                              |         Type          | Default |
+| :------- | :------------------------------------------------------- | :-------------------: | :-----: |
+| children | List of tabs and tab panels, probably with some wrappers |   `React.ReactNode`   |         |
+| value    | Active tab value                                         | `string \| undefined` |         |
+
+## TabList
+
+Component that serves as the container for a set of `tabs`
+
+### Size
+
+To control the size of the `tabs` use the `size` property. Default size is `m`.
+
+<!--LANDING_BLOCK
+
+<ExampleBlock
+    code={`
+<TabList value="second" size="m">
+    <Tab value="first">M Size first</Tab>
+    <Tab value="second">M Size second</Tab>
+</TabList>
+
+<TabList value="second" size="l">
+    <Tab value="first">L Size first</Tab>
+    <Tab value="second">L Size second</Tab>
+</TabList>
+
+<TabList value="second" size="xl">
+    <Tab value="first">XL Size first</Tab>
+    <Tab value="second">v Size second</Tab>
+</TabList>
+`}
+>
+    <UIKit.TabList value="second" size="m">
+        <UIKit.Tab value="first">M Size first</UIKit.Tab>
+        <UIKit.Tab value="second">M Size second</UIKit.Tab>
+    </UIKit.TabList>
+
+    <UIKit.TabList value="second" size="l">
+        <UIKit.Tab value="first">L Size first</UIKit.Tab>
+        <UIKit.Tab value="second">L Size second</UIKit.Tab>
+    </UIKit.TabList>
+
+    <UIKit.TabList value="second" size="xl">
+        <UIKit.Tab value="first">XL Size first</UIKit.Tab>
+        <UIKit.Tab value="second">v Size second</UIKit.Tab>
+    </UIKit.TabList>
+</ExampleBlock>
+
+LANDING_BLOCK-->
+
+<!--GITHUB_BLOCK-->
+
+```tsx
+<TabList value="second" size="m">
+    <Tab value="first">M Size first</Tab>
+    <Tab value="second">M Size second</Tab>
+</TabList>
+<TabList value="second" size="l">
+    <Tab value="first">L Size first</Tab>
+    <Tab value="second">L Size second</Tab>
+</TabList>
+<TabList value="second" size="xl">
+    <Tab value="first">XL Size first</Tab>
+    <Tab value="second">v Size second</Tab>
+</TabList>
+```
+
+<!--/GITHUB_BLOCK-->
+
+### Properties
+
+|      Name       | Description                               |               Type               | Default  |
+| :-------------: | :---------------------------------------- | :------------------------------: | :------: |
+|      value      | Active tab value                          |      `string \| undefined`       |          |
+|    children     | List of tabs, probably with some wrappers |        `React.ReactNode`         |          |
+|    onUpdate     | Update tab handler                        | `onUpdate?(value: string): void` |          |
+|    className    | CSS-class of element                      |      `string \| undefined`       |          |
+|      size       | Element size                              |       `'m' \| 'l' \| 'xl'`       |  `'m'`   |
+| contentOverflow | Controls component overflow behavior      |             `'wrap'`             | `'wrap'` |
+|       qa        | HTML `data-qa` attribute, used in tests   |             `string`             |          |
+
+## Tab
+
+This component is used to render tab items.
+
+### Icon
+
+Used if you need to display an icon for a tab item.
+
+<!--LANDING_BLOCK
+<ExampleBlock
+    code={`
+<TabList value="first">
+    <Tab value="first" icon={<Icon size={16} data={GearIcon} />}>Tab with icon</Tab>
+    <Tab value="second">Tab without icon</Tab>
+</TabList>
+`}
+>
+    <UIKit.TabList value="first">
+        <UIKit.Tab
+            icon={
+                <UIKit.Icon data={() => (
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fillRule="evenodd" d="M7.199 2H8.8a.2.2 0 0 1 .2.2c0 1.808 1.958 2.939 3.524 2.034a.199.199 0 0 1 .271.073l.802 1.388a.199.199 0 0 1-.073.272c-1.566.904-1.566 3.164 0 4.069a.199.199 0 0 1 .073.271l-.802 1.388a.199.199 0 0 1-.271.073C10.958 10.863 9 11.993 9 13.8a.2.2 0 0 1-.199.2H7.2a.199.199 0 0 1-.2-.2c0-1.808-1.958-2.938-3.524-2.034a.199.199 0 0 1-.272-.073l-.8-1.388a.199.199 0 0 1 .072-.271c1.566-.905 1.566-3.165 0-4.07a.199.199 0 0 1-.073-.271l.801-1.388a.199.199 0 0 1 .272-.073C5.042 5.138 7 4.007 7 2.2c0-.11.089-.199.199-.199ZM5.5 2.2c0-.94.76-1.7 1.699-1.7H8.8c.94 0 1.7.76 1.7 1.7a.85.85 0 0 0 1.274.735 1.699 1.699 0 0 1 2.32.622l.802 1.388c.469.813.19 1.851-.622 2.32a.85.85 0 0 0 0 1.472 1.7 1.7 0 0 1 .622 2.32l-.802 1.388a1.699 1.699 0 0 1-2.32.622.85.85 0 0 0-1.274.735c0 .939-.76 1.7-1.699 1.7H7.2a1.7 1.7 0 0 1-1.699-1.7.85.85 0 0 0-1.274-.735 1.698 1.698 0 0 1-2.32-.622l-.802-1.388a1.699 1.699 0 0 1 .622-2.32.85.85 0 0 0 0-1.471 1.699 1.699 0 0 1-.622-2.321l.801-1.388a1.699 1.699 0 0 1 2.32-.622A.85.85 0 0 0 5.5 2.2Zm4 5.8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" clipRule="evenodd"></path></svg>
+                )} size={16} />
+            }
+            value="first"
+        >
+            Tab with icon
+        </UIKit.Tab>
+        <UIKit.Tab value="second">Tab without icon</UIKit.Tab>
+    </UIKit.TabList>
+</ExampleBlock>
+LANDING_BLOCK-->
+
+<!--GITHUB_BLOCK-->
+
+```tsx
+<TabList value="first">
+  <Tab value="first" icon={<Icon size={16} data={GearIcon} />}>
+    Tab with icon
+  </Tab>
+  <Tab value="second">Tab without icon</Tab>
+</TabList>
+```
+
+<!--/GITHUB_BLOCK-->
+
+### States
+
+Tab item has disabled flag.
+
+<!--LANDING_BLOCK
+<ExampleBlock
+    code={`
+<TabList value="first">
+    <Tab value="first" >First Tab</Tab>
+    <Tab value="second" disabled>Disabled Tab</Tab>
+</TabList>
+`}
+>
+    <UIKit.TabList value="first">
+        <UIKit.Tab value="first">First Tab</UIKit.Tab>
+        <UIKit.Tab disabled value="second">Disabled Tab</UIKit.Tab>
+    </UIKit.TabList>
+</ExampleBlock>
+LANDING_BLOCK-->
+
+<!--GITHUB_BLOCK-->
+
+```tsx
+<TabList value="first">
+  <Tab value="first">First Tab</Tab>
+  <Tab value="second" disabled>
+    Disabled Tab
+  </Tab>
+</TabList>
+```
+
+<!--/GITHUB_BLOCK-->
+
+### Counter
+
+Used if you need to display a number for a tabs item.
+
+<!--LANDING_BLOCK
+<ExampleBlock
+    code={`
+<TabList value="first">
+    <Tab value="first" counter={13}>First Tab</Tab>
+    <Tab value="second" counter={3}>Second Tab</Tab>
+</TabList>
+`}
+>
+    <UIKit.TabList value="first">
+        <UIKit.Tab value="first" counter={13}>First Tab</UIKit.Tab>
+        <UIKit.Tab value="second" counter={3}>Second Tab</UIKit.Tab>
+    </UIKit.TabList>
+</ExampleBlock>
+LANDING_BLOCK-->
+
+<!--GITHUB_BLOCK-->
+
+```tsx
+<TabList value="first">
+  <Tab value="first" counter={13}>
+    First Tab
+  </Tab>
+  <Tab value="second" counter={3}>
+    Second Tab
+  </Tab>
+</TabList>
+```
+
+<!--/GITHUB_BLOCK-->
+
+### Label
+
+Used if you need to display a label for a tabs item.
+
+<!--LANDING_BLOCK
+<ExampleBlock
+    code={`
+<TabList value="first">
+    <Tab value="first" label={{content: 'Label 1'}}>First Tab</Tab>
+    <Tab value="second" label={{content: 'Label 2'}}>Second Tab</Tab>
+</TabList>
+`}
+>
+    <UIKit.TabList value="first">
+        <UIKit.Tab value="first" label={{content: 'Label 1'}}>First Tab</UIKit.Tab>
+        <UIKit.Tab value="second" label={{content: 'Label 2'}}>Second Tab</UIKit.Tab>
+    </UIKit.TabList>
+</ExampleBlock>
+LANDING_BLOCK-->
+
+<!--GITHUB_BLOCK-->
+
+```tsx
+<TabList value="first">
+  <Tab value="first" label={{content: 'Label 1'}}>
+    First Tab
+  </Tab>
+  <Tab value="second" label={{content: 'Label 2'}}>
+    Second Tab
+  </Tab>
+</TabList>
+```
+
+<!--/GITHUB_BLOCK-->
+
+### Properties
+
+| Name          | Description                                                      |         Type          | Default |
+| :------------ | ---------------------------------------------------------------- | :-------------------: | :-----: |
+| value         | Tab value                                                        |       `string`        |         |
+| title         | Tab title                                                        | `string \| undefined` |         |
+| icon          | Icon displayed at the start                                      |   `React.ReactNode`   |         |
+| counter       | Content displayed at the end                                     |  `number \| string`   |         |
+| href          | A URL to link to.                                                | `string \| undefined` |         |
+| label         | `<Label>` displayed at the end                                   |   `React.ReactNode`   |         |
+| disabled      | Inactive state                                                   | `boolean\| undefined` |         |
+| children      | Tab's content                                                    |   `React.ReactNode`   |         |
+| id            | This prop is used to help implement the accessibility logic      | `string\| undefined`  |         |
+| aria-controls | Indicates that tab controls the interaction with another element | `string\| undefined`  |         |
+| aria-label    | An accessibility label for this item                             |       `string`        |         |
+| qa            | HTML `data-qa` attribute, used in tests                          |       `string`        |         |
+
+## TabPanel
+
+Is a container element for content associated with a tab
+
+### Properties
+
+| Name            | Description                                                           |         Type          | Default |
+| :-------------- | :-------------------------------------------------------------------- | :-------------------: | :-----: |
+| children        | Content of panel                                                      |   `React.ReactNode`   |         |
+| value           | Active tab value                                                      | `string \| undefined` |         |
+| id              | This prop is used to help implement the accessibility logic           | `string\| undefined`  |         |
+| aria-labelledby | Identifies the element (or elements) that labels the current element. |       `string`        |         |
+| qa              | HTML `data-qa` attribute, used in tests                               |       `string`        |         |
+
+## CSS API
+
+| Name                             | Description                |
+| :------------------------------- | :------------------------- |
+| `--g-tabs-border-width`          | Tabs border width          |
+| `--g-tabs-item-height`           | Tabs item height           |
+| `--g-tabs-item-border-width`     | Tabs item border width     |
+| `--g-tabs-item-gap`              | Distance between tabs      |
+| `--g-tabs-vertical-item-height`  | Tabs vertical item height  |
+| `--g-tabs-vertical-item-padding` | Tabs vertical item padding |
diff --git a/src/components/tabs/Tab.tsx b/src/components/tabs/Tab.tsx
new file mode 100644
index 0000000000..e5965625cf
--- /dev/null
+++ b/src/components/tabs/Tab.tsx
@@ -0,0 +1,134 @@
+'use client';
+
+import * as 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;
+    index?: number;
+    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,
+        index,
+    } = props;
+
+    const {activeTabId, onUpdate, focusedIndex, setFocusedIndex} =
+        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 || event.key === KeyCode.ENTER) {
+            onUpdate?.(value);
+        }
+    };
+
+    const tabIndex = React.useMemo(() => {
+        if (disabled) {
+            return -1;
+        }
+
+        if (focusedIndex === -1 && activeTabId) {
+            return activeTabId === value ? 0 : -1;
+        } else if (focusedIndex === -1 && !activeTabId) {
+            return index === 0 ? 0 : -1;
+        } else {
+            return focusedIndex === index ? 0 : -1;
+        }
+    }, [disabled, focusedIndex, index, value, activeTabId]);
+
+    const handleFocus = React.useCallback(() => {
+        if (index !== undefined) {
+            setFocusedIndex?.(index);
+        }
+    }, [index, setFocusedIndex]);
+
+    const handleBlur = React.useCallback(() => {
+        setFocusedIndex?.(-1);
+    }, [setFocusedIndex]);
+
+    const tabProps = {
+        'aria-selected': isActive,
+        'aria-disabled': disabled === true,
+        'aria-controls': props['aria-controls'],
+        ...filterDOMProps(props, {labelable: true}),
+        role: 'tab',
+        style,
+        title,
+        onClick: handleClick,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        tabIndex,
+        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} 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..f4da67bd42
--- /dev/null
+++ b/src/components/tabs/TabList.tsx
@@ -0,0 +1,198 @@
+'use client';
+
+import * as React from 'react';
+
+import {KeyCode} from '../../constants';
+import type {QAProps} from '../types';
+import {isOfType} from '../utils/isOfType';
+
+import {Tab} from './Tab';
+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 isTab = isOfType(Tab);
+
+const prepareChildren = (
+    children: React.ReactNode,
+    prepareTab: (item: React.ReactElement) => React.ReactElement,
+): Array<React.ReactElement | null> => {
+    const items = React.Children.toArray(children);
+
+    return React.Children.map(items, (child) => {
+        if (!React.isValidElement(child)) {
+            return null;
+        }
+
+        if (isTab(child)) {
+            return prepareTab(child);
+        }
+
+        if (child.props.children) {
+            return React.cloneElement(
+                child,
+                child.props,
+                ...prepareChildren(child.props.children, prepareTab),
+            );
+        }
+
+        return child;
+    });
+};
+
+const isTabDisabled = (node: HTMLElement | null) => {
+    return node?.getAttribute('aria-disabled') === 'true';
+};
+
+export const TabList = React.forwardRef<HTMLDivElement, TabListProps>(
+    ({size = 'm', value, children, className, onUpdate, qa}, ref) => {
+        const activeTabId = React.useContext(TabContext).activeTabId || value;
+
+        const [focusedIndex, setFocusedIndex] = React.useState<number>(-1);
+
+        const tabInnerContextValue = React.useMemo(
+            () => ({onUpdate, activeTabId, setFocusedIndex, focusedIndex}),
+            [onUpdate, activeTabId, setFocusedIndex, focusedIndex],
+        );
+
+        const refs = React.useRef<Record<number, HTMLElement | null>>({});
+
+        React.useEffect(() => {
+            refs.current[focusedIndex]?.focus();
+        }, [focusedIndex]);
+
+        const handleRef = (index: number, elemRef: HTMLElement | null) => {
+            refs.current[index] = elemRef;
+        };
+
+        const {items, enabledTabIndex} = React.useMemo(() => {
+            let index = -1;
+
+            const items = prepareChildren(children, (item) => {
+                const currentIndex = ++index;
+
+                const tabElement = React.cloneElement(item, {
+                    ref: handleRef.bind(null, currentIndex),
+                    index: currentIndex,
+                });
+
+                return tabElement;
+            });
+
+            return {
+                items,
+                enabledTabIndex: index,
+            };
+        }, [children]);
+
+        const handleKeyDown = React.useCallback(
+            (event: React.KeyboardEvent<HTMLElement>) => {
+                switch (event.code) {
+                    case KeyCode.ARROW_LEFT:
+                        event.preventDefault();
+
+                        setFocusedIndex((prev) => {
+                            let i = prev;
+
+                            while (i--) {
+                                if (!isTabDisabled(refs.current[i])) {
+                                    return i;
+                                }
+                            }
+
+                            let index = enabledTabIndex + 1;
+
+                            while (index-- > prev) {
+                                if (!isTabDisabled(refs.current[index])) {
+                                    return index;
+                                }
+                            }
+
+                            return prev;
+                        });
+
+                        break;
+                    case KeyCode.ARROW_RIGHT:
+                        event.preventDefault();
+
+                        setFocusedIndex((prev) => {
+                            for (let i = prev + 1; i <= enabledTabIndex; i++) {
+                                if (!isTabDisabled(refs.current[i])) {
+                                    return i;
+                                }
+                            }
+
+                            for (let i = 0; i < prev; i++) {
+                                if (!isTabDisabled(refs.current[i])) {
+                                    return i;
+                                }
+                            }
+
+                            return prev;
+                        });
+
+                        break;
+                    case KeyCode.HOME:
+                        event.preventDefault();
+
+                        setFocusedIndex((prev) => {
+                            for (let i = 0; i <= enabledTabIndex; i++) {
+                                if (!isTabDisabled(refs.current[i])) {
+                                    return i;
+                                }
+                            }
+
+                            return prev;
+                        });
+
+                        break;
+                    case KeyCode.END:
+                        event.preventDefault();
+
+                        setFocusedIndex((prev) => {
+                            let i = enabledTabIndex + 1;
+
+                            while (i--) {
+                                if (!isTabDisabled(refs.current[i])) {
+                                    return i;
+                                }
+                            }
+
+                            return prev;
+                        });
+
+                        break;
+                }
+            },
+            [enabledTabIndex],
+        );
+
+        return (
+            <div className={bTabList({size}, className)} data-qa={qa} ref={ref}>
+                <div
+                    role="tablist"
+                    className={bTabList('tabs', className)}
+                    aria-orientation="horizontal"
+                    tabIndex={-1}
+                    onKeyDown={handleKeyDown}
+                >
+                    <TabInnerContext.Provider value={tabInnerContextValue}>
+                        {items}
+                    </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..8641c060db
--- /dev/null
+++ b/src/components/tabs/TabPanel.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import * as 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..af63f4cea3
--- /dev/null
+++ b/src/components/tabs/TabProvider.tsx
@@ -0,0 +1,14 @@
+'use client';
+
+import * as React from 'react';
+
+import {TabContext} from './contexts/TabContext';
+
+export type TabProviderProps = React.PropsWithChildren<{
+    value?: string;
+}>;
+
+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/__snapshots__/TabList.visual.test.tsx-snapshots/TabList-smoke-light-chromium-linux.png b/src/components/tabs/__snapshots__/TabList.visual.test.tsx-snapshots/TabList-smoke-light-chromium-linux.png
new file mode 100644
index 0000000000..68d0573b44
Binary files /dev/null and b/src/components/tabs/__snapshots__/TabList.visual.test.tsx-snapshots/TabList-smoke-light-chromium-linux.png differ
diff --git a/src/components/tabs/__snapshots__/TabList.visual.test.tsx-snapshots/TabList-smoke-with-custom-tab-light-chromium-linux.png b/src/components/tabs/__snapshots__/TabList.visual.test.tsx-snapshots/TabList-smoke-with-custom-tab-light-chromium-linux.png
new file mode 100644
index 0000000000..ef5ba0b843
Binary files /dev/null and b/src/components/tabs/__snapshots__/TabList.visual.test.tsx-snapshots/TabList-smoke-with-custom-tab-light-chromium-linux.png differ
diff --git a/src/components/tabs/__snapshots__/TabList.visual.test.tsx-snapshots/TabList-smoke-without-value-light-chromium-linux.png b/src/components/tabs/__snapshots__/TabList.visual.test.tsx-snapshots/TabList-smoke-without-value-light-chromium-linux.png
new file mode 100644
index 0000000000..bc730f8066
Binary files /dev/null and b/src/components/tabs/__snapshots__/TabList.visual.test.tsx-snapshots/TabList-smoke-without-value-light-chromium-linux.png differ
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..fb4749a99b
--- /dev/null
+++ b/src/components/tabs/__stories__/TabProvider.stories.tsx
@@ -0,0 +1,85 @@
+import * as React from 'react';
+
+import {useArgs} from '@storybook/preview-api';
+import type {Meta, StoryFn} from '@storybook/react';
+
+import {Button} from '../../Button';
+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}`}>
+                    <Button
+                        style={{marginTop: '10px'}}
+                    >{`Content of ${tab.value} tab panel`}</Button>
+                </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..5cf0e84f32
--- /dev/null
+++ b/src/components/tabs/__stories__/getTabsMock.tsx
@@ -0,0 +1,109 @@
+import type * as 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;
+    withTitle?: boolean;
+};
+
+const gearIcon = <Flame width={18} height={18} />;
+
+export function getTabsMock(args: StoryParams): TabProps[] {
+    const {withTitle = true} = args;
+    return [
+        {
+            value: 'first',
+            title: withTitle ? 'First Tab' : undefined,
+            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: withTitle ? 'Active Tab' : undefined,
+            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: withTitle ? 'disabled' : undefined,
+            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: withTitle ? 'Fourth Long Text To Show Tab' : undefined,
+            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: withTitle ? 'One More Long Text Tab To Show' : undefined,
+            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..253ffd81d1
--- /dev/null
+++ b/src/components/tabs/__stories__/tabs.stories.tsx
@@ -0,0 +1,172 @@
+import * as React from 'react';
+
+import {useArgs} from '@storybook/preview-api';
+import type {Meta, StoryFn} from '@storybook/react';
+
+import {Tooltip} from '../../Tooltip';
+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>
+    );
+};
+
+export const WrapTab: StoryFn<TabListProps> = ({...props}) => {
+    const [, setStoryArgs] = useArgs();
+
+    const items = React.useMemo(
+        () =>
+            getTabsMock({withTitle: false})?.map(({value, ...props}, i) => (
+                <Tooltip key={i} content={`I'm a tooltip for ${value}!`}>
+                    <Tab value={value} {...props} />
+                </Tooltip>
+            )),
+        [],
+    );
+    return (
+        <React.Fragment>
+            <TabList {...props} onUpdate={(tabId) => setStoryArgs({value: tabId})}>
+                {items}
+            </TabList>
+        </React.Fragment>
+    );
+};
diff --git a/src/components/tabs/__tests__/Tab.test.tsx b/src/components/tabs/__tests__/Tab.test.tsx
new file mode 100644
index 0000000000..363767ab4b
--- /dev/null
+++ b/src/components/tabs/__tests__/Tab.test.tsx
@@ -0,0 +1,146 @@
+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__/TabList.test.tsx b/src/components/tabs/__tests__/TabList.test.tsx
new file mode 100644
index 0000000000..2a07993268
--- /dev/null
+++ b/src/components/tabs/__tests__/TabList.test.tsx
@@ -0,0 +1,170 @@
+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 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).toHaveBeenCalledWith(tab2.id);
+});
diff --git a/src/components/tabs/__tests__/TabList.visual.test.tsx b/src/components/tabs/__tests__/TabList.visual.test.tsx
new file mode 100644
index 0000000000..a2a8ab878e
--- /dev/null
+++ b/src/components/tabs/__tests__/TabList.visual.test.tsx
@@ -0,0 +1,86 @@
+import {smokeTest, test} from '~playwright/core';
+
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import type {TabListProps} from '../TabList';
+
+import {sizeCases} from './cases';
+import {TestTabList, TestTabListWithCustomTabs} from './helpers';
+
+test.describe('TabList', {tag: '@TabList'}, () => {
+    smokeTest('', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<TabListProps>(
+            {
+                value: 'active',
+            },
+            {
+                size: sizeCases,
+            },
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TestTabList {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('without value', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<TabListProps>({}, {});
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TestTabList {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('with custom tab', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<TabListProps>(
+            {
+                value: 'active',
+            },
+            {
+                size: sizeCases,
+            },
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TestTabListWithCustomTabs {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+});
diff --git a/src/components/tabs/__tests__/TabPanel.test.tsx b/src/components/tabs/__tests__/TabPanel.test.tsx
new file mode 100644
index 0000000000..c7a6fc97eb
--- /dev/null
+++ b/src/components/tabs/__tests__/TabPanel.test.tsx
@@ -0,0 +1,27 @@
+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..9f26cc98b9
--- /dev/null
+++ b/src/components/tabs/__tests__/TabProvider.test.tsx
@@ -0,0 +1,70 @@
+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 './helpers';
+
+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__/cases.tsx b/src/components/tabs/__tests__/cases.tsx
new file mode 100644
index 0000000000..3f45eff11c
--- /dev/null
+++ b/src/components/tabs/__tests__/cases.tsx
@@ -0,0 +1,4 @@
+import type {Cases} from '../../../stories/tests-factory/models';
+import type {TabListProps} from '../TabList';
+
+export const sizeCases: Cases<TabListProps['size']> = ['m', 'l', 'xl'];
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__/helpers.tsx b/src/components/tabs/__tests__/helpers.tsx
new file mode 100644
index 0000000000..1f51db5bf2
--- /dev/null
+++ b/src/components/tabs/__tests__/helpers.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+
+import {Tab, TabList, TabPanel, TabProvider} from '..';
+import type {TabListProps} from '../TabList';
+import {getTabsMock} from '../__stories__/getTabsMock';
+
+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>
+    );
+};
+
+export const TestTabList = (props: Partial<TabListProps>) => {
+    const items = React.useMemo(
+        () =>
+            getTabsMock({})?.map((props, i) => (
+                <Tab key={i} {...props} aria-controls={`panel-${i}`} id={`tab-${i}`} />
+            )),
+        [],
+    );
+
+    return <TabList {...props}>{items}</TabList>;
+};
+
+export const TestTabListWithCustomTabs = (props: Partial<TabListProps>) => {
+    const items = React.useMemo(
+        () =>
+            getTabsMock({withCustomChildren: true})?.map((props, i) => (
+                <Tab key={i} {...props} aria-controls={`panel-${i}`} id={`tab-${i}`} />
+            )),
+        [],
+    );
+
+    return <TabList {...props}>{items}</TabList>;
+};
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..d7341c3804
--- /dev/null
+++ b/src/components/tabs/contexts/TabContext.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+export interface TabContextProps {
+    activeTabId?: string;
+}
+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..0131c19967
--- /dev/null
+++ b/src/components/tabs/contexts/TabInnerContext.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export interface TabInnerContextProps {
+    activeTabId?: string;
+    onUpdate?: (value: string) => void;
+    focusedIndex: number;
+    setFocusedIndex?: (value: number) => void;
+}
+
+export const TabInnerContext = React.createContext<TabInnerContextProps>({
+    activeTabId: undefined,
+    onUpdate: undefined,
+    focusedIndex: -1,
+    setFocusedIndex: 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/deprecated.ts b/src/deprecated.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/stories/Branding/BrandingConfugurator/BrandingConfigurator.tsx b/src/stories/Branding/BrandingConfugurator/BrandingConfigurator.tsx
index fb16b5330b..550b0ab841 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';
@@ -156,14 +157,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')}>