diff --git a/package-lock.json b/package-lock.json
index 397e76a..5385e96 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,11 +9,14 @@
       "version": "0.5.0",
       "license": "MIT",
       "dependencies": {
+        "@types/autosize": "^4.0.3",
+        "@types/react-highlight-words": "^0.20.0",
         "autosize": "^6.0.1",
         "classnames": "^2.5.1",
         "odometer": "^0.4.8",
         "radix-ui": "^1.1.3",
         "react-highlight-words": "^0.21.0",
+        "react-responsive-overflow-list": "^0.2.1",
         "sass": "^1.85.1",
         "ts-deepmerge": "^7.0.3"
       },
@@ -24,13 +27,12 @@
         "@release-it/conventional-changelog": "^10.0.1",
         "@rsbuild/plugin-sass": "^1.4.0",
         "@storybook/react": "^9.1.3",
-        "@types/autosize": "^4.0.3",
         "@types/chrome": "^0.1.12",
         "@types/jest": "^30.0.0",
+        "@types/lodash": "^4.17.20",
         "@types/node": "^22.13.10",
         "@types/react": "^19.0.10",
         "@types/react-dom": "^19.0.4",
-        "@types/react-highlight-words": "^0.20.0",
         "adnbn": "^0.4.2",
         "depcheck": "^1.4.7",
         "eslint": "^9.21.0",
@@ -7876,7 +7878,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/@types/autosize/-/autosize-4.0.3.tgz",
       "integrity": "sha512-o0ZyU3ePp3+KRbhHsY4ogjc+ZQWgVN5h6j8BHW5RII4cFKi6PEKK9QPAcphJVkD0dGpyFnD3VRR0WMvHVjCv9w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/babel__core": {
@@ -8192,6 +8193,13 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.20.tgz",
+      "integrity": "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/mdx": {
       "version": "2.0.13",
       "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.13.tgz",
@@ -8272,7 +8280,6 @@
       "version": "19.2.2",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.2"
@@ -8292,7 +8299,6 @@
       "version": "0.20.0",
       "resolved": "https://registry.npmjs.org/@types/react-highlight-words/-/react-highlight-words-0.20.0.tgz",
       "integrity": "sha512-Qm512TiOakvtNzHJ2+TNVHnLn5cJ2wLQV0+LrhuispVth6dRf5b8ydjq3Kc0thpZ7bz4s6RnG6meboAXHWRK+Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/react": "*"
@@ -11599,7 +11605,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/dargs": {
@@ -18704,6 +18709,16 @@
         }
       }
     },
+    "node_modules/react-responsive-overflow-list": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/react-responsive-overflow-list/-/react-responsive-overflow-list-0.2.1.tgz",
+      "integrity": "sha512-aA/0WLHrGeyVn0OzNaTsUc8/mFqvwkVwX3pfXhNhhVEGNZvqUKNlY3PnpHxWcWLEpzR2xzuesKVgQhFLZU4Uyw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
diff --git a/package.json b/package.json
index f4cecbf..a1073fc 100644
--- a/package.json
+++ b/package.json
@@ -83,18 +83,20 @@
     "odometer": "^0.4.8",
     "radix-ui": "^1.1.3",
     "react-highlight-words": "^0.21.0",
+    "react-responsive-overflow-list": "^0.2.1",
     "sass": "^1.85.1",
     "ts-deepmerge": "^7.0.3"
   },
   "devDependencies": {
     "@commitlint/cli": "^20.0.0",
     "@commitlint/config-conventional": "^20.0.0",
-    "@release-it/conventional-changelog": "^10.0.1",
-    "@types/chrome": "^0.1.12",
-    "@types/jest": "^30.0.0",
     "@eslint/js": "^9.21.0",
+    "@release-it/conventional-changelog": "^10.0.1",
     "@rsbuild/plugin-sass": "^1.4.0",
     "@storybook/react": "^9.1.3",
+    "@types/chrome": "^0.1.12",
+    "@types/jest": "^30.0.0",
+    "@types/lodash": "^4.17.20",
     "@types/node": "^22.13.10",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
@@ -104,12 +106,12 @@
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^15.15.0",
-    "prettier": "^3.5.3",
     "husky": "^9.1.7",
     "jest": "^30.1.3",
-    "release-it": "^19.0.5",
+    "prettier": "^3.5.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "release-it": "^19.0.5",
     "rspack-plugin-virtual-module": "^1.0.0",
     "storybook": "^9.1.3",
     "storybook-react-rsbuild": "^2.1.0",
diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx
index d2cb5bf..85d41b7 100644
--- a/src/components/Avatar/Avatar.stories.tsx
+++ b/src/components/Avatar/Avatar.stories.tsx
@@ -7,7 +7,7 @@ import AvatarComponent from "./Avatar";
 import {AvatarRadius, AvatarSize} from "./types";
 
 const sizes: (AvatarSize | "default")[] = [AvatarSize.Small, "default", AvatarSize.Medium, AvatarSize.Large];
-const radius: (AvatarRadius | "default")[] = [AvatarRadius.Small, AvatarRadius.Medium, AvatarRadius.Large, "default"];
+const radius: (AvatarRadius | "default")[] = [AvatarRadius.None, AvatarRadius.Small, AvatarRadius.Medium, AvatarRadius.Large, "default"];
 
 const meta: Meta<typeof AvatarComponent> = {
     title: "Components/Avatar",
@@ -39,7 +39,7 @@ export const Avatar: StoryObj<typeof AvatarComponent> = {
 
 export const AvatarRadiusGrid = () => {
     return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(5, auto)"}}>
             {radius.map(radius => (
                 <div key={radius} className="item-card">
                     <span className="item-card__title">{capitalizeFirstLetter(radius)}</span>
@@ -103,7 +103,7 @@ export const SizeWithFallback = () => {
 
 export const SizeRadius = () => {
     return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(5, auto)"}}>
             {sizes.map(size =>
                 radius.map(radius => (
                     <div key={`${radius}-${size}`} className="item-card">
diff --git a/src/components/Avatar/avatar.module.scss b/src/components/Avatar/avatar.module.scss
index 67426be..d8564b3 100644
--- a/src/components/Avatar/avatar.module.scss
+++ b/src/components/Avatar/avatar.module.scss
@@ -42,6 +42,10 @@ $root: avatar;
   }
 
   // Radius
+  &--none-radius {
+    border-radius: 0;
+  }
+
   &--small-radius {
     border-radius: var(--avatar-border-radius-sm, 20%);
   }
diff --git a/src/components/Avatar/types.ts b/src/components/Avatar/types.ts
index 62ca0e2..4844e23 100644
--- a/src/components/Avatar/types.ts
+++ b/src/components/Avatar/types.ts
@@ -5,6 +5,7 @@ export enum AvatarSize {
 }
 
 export enum AvatarRadius {
+    None = "none",
     Small = "small",
     Medium = "medium",
     Large = "large",
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index 83760c3..9dc8cad 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -7,7 +7,7 @@ import ButtonComponent from "./Button";
 import {ButtonColor, ButtonRadius, ButtonSize, ButtonVariant} from "./types";
 
 const variants: ButtonVariant[] = [ButtonVariant.Contained, ButtonVariant.Outlined, ButtonVariant.Text];
-const colors: (ButtonColor | "default")[] = ["default", ButtonColor.Primary, ButtonColor.Secondary, ButtonColor.Accent];
+const colors: (ButtonColor | "default")[] = ["default", ButtonColor.Primary, ButtonColor.Secondary, ButtonColor.Accent, ButtonColor.Error, ButtonColor.Success];
 const sizes: (ButtonSize | "default")[] = [ButtonSize.Small, "default", ButtonSize.Medium, ButtonSize.Large];
 const radius: (ButtonRadius | "default")[] = [
     ButtonRadius.Small,
@@ -57,7 +57,7 @@ export const Button: StoryObj<typeof ButtonComponent> = {
 
 export const VariantColor = () => {
     return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(6, auto)"}}>
             {variants.map(variant =>
                 colors.map(color => (
                     <div key={`${variant}-${color}`}>
@@ -73,7 +73,7 @@ export const VariantColor = () => {
 
 export const VariantColorDisabled = () => {
     return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(6, auto)"}}>
             {variants.map(variant =>
                 colors.map(color => (
                     <div key={`${variant}-${color}`}>
diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
index 98249a1..10d2be5 100644
--- a/src/components/Button/button.module.scss
+++ b/src/components/Button/button.module.scss
@@ -5,7 +5,7 @@ $root: button;
   font-weight: var(--button-font-weight, 500);
   font-size: var(--button-font-size, var(--font-size, 14px));
   letter-spacing: var(--button-letter-spacing, 0.5px);
-  line-height: var(--button-line-height, var(--line-height, 1 rem));
+  line-height: var(--button-line-height, var(--line-height, 1rem));
   height: var(--button-height, 34px);
   border-radius: var(--button-border-radius, 10px);
   padding: var(--button-padding, 0 16px);
@@ -38,6 +38,16 @@ $root: button;
       color: #fff;
       background: var(--accent-color);
     }
+
+    &.#{$root}--error-color {
+      color: #fff;
+      background: var(--error-color);
+    }
+
+    &.#{$root}--success-color {
+      color: #fff;
+      background: var(--success-color);
+    }
   }
 
   &--outlined {
@@ -55,17 +65,27 @@ $root: button;
 
     &.#{$root}--primary-color {
       color: var(--primary-color);
-      border-color: var(--button-outlined-border-primary-color);
+      border-color: var(--button-outlined-border-primary-color, var(--primary-color));
     }
 
     &.#{$root}--secondary-color {
       color: var(--secondary-color);
-      border-color: var(--button-outlined-border-secondary-color);
+      border-color: var(--button-outlined-border-secondary-color, var(--secondary-color));
     }
 
     &.#{$root}--accent-color {
       color: var(--accent-color);
-      border-color: var(--button-outlined-border-accent-color);
+      border-color: var(--button-outlined-border-accent-color, var(--accent-color-color));
+    }
+
+    &.#{$root}--error-color {
+      color: var(--error-color);
+      border-color: var(--button-outlined-border-error-color, var(--error-color));
+    }
+
+    &.#{$root}--success-color {
+      color: var(--success-color);
+      border-color: var(--button-outlined-border-success-color, var(--success-color));
     }
   }
 
@@ -92,6 +112,14 @@ $root: button;
     &.#{$root}--accent-color {
       color: var(--accent-color);
     }
+
+    &.#{$root}--error-color {
+      color: var(--error-color);
+    }
+
+    &.#{$root}--success-color {
+      color: var(--success-color);
+    }
   }
 
   // Sizes
diff --git a/src/components/Button/types.ts b/src/components/Button/types.ts
index e3a3383..3641b16 100644
--- a/src/components/Button/types.ts
+++ b/src/components/Button/types.ts
@@ -8,6 +8,8 @@ export enum ButtonColor {
     Primary = "primary",
     Secondary = "secondary",
     Accent = "accent",
+    Error = "error",
+    Success = "success",
 }
 
 export enum ButtonSize {
diff --git a/src/components/List/list.module.scss b/src/components/List/list.module.scss
index 35c4877..d835ee8 100644
--- a/src/components/List/list.module.scss
+++ b/src/components/List/list.module.scss
@@ -1,7 +1,8 @@
 .list {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: var(--list-gap, 10px);
+  width: 100%;
   padding: 0;
   margin: 0;
   list-style: none;
diff --git a/src/components/ListItem/list-item.module.scss b/src/components/ListItem/list-item.module.scss
index 58b8f8e..3ff72c5 100644
--- a/src/components/ListItem/list-item.module.scss
+++ b/src/components/ListItem/list-item.module.scss
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 10px;
+  gap: var(--list-item-gap, 10px);
   flex-wrap: nowrap;
   box-sizing: border-box;
   line-height: var(--list-item-line-height, var(--line-height, 1 rem));
diff --git a/src/components/ScrollArea/ScrollArea.tsx b/src/components/ScrollArea/ScrollArea.tsx
index 5febea1..f196148 100644
--- a/src/components/ScrollArea/ScrollArea.tsx
+++ b/src/components/ScrollArea/ScrollArea.tsx
@@ -40,21 +40,8 @@ const ScrollArea: ForwardRefRenderFunction<HTMLDivElement, ScrollAreaProps> = (p
     const rootRef = React.useRef<HTMLDivElement | null>(null);
     const viewportRef = React.useRef<HTMLDivElement | null>(null);
 
-    useImperativeHandle(
-        ref,
-        () => ({
-            ...rootRef.current!,
-            scrollTo: ((optionsOrX?: ScrollToOptions | number, y?: number) => {
-                if (typeof optionsOrX === 'number') {
-                    viewportRef.current?.scrollTo(optionsOrX, y!);
-                } else {
-                    viewportRef.current?.scrollTo(optionsOrX);
-                }
-            }) as HTMLElement['scrollTo'],
+    useImperativeHandle(ref, () => viewportRef.current!, []);
 
-        }),
-        []
-    );
     return (
         <Root ref={rootRef} className={classnames(styles["scroll-area"], className)} {...other}>
             <Viewport
diff --git a/src/components/ScrollArea/scroll-area.module.scss b/src/components/ScrollArea/scroll-area.module.scss
index 5987def..14f0406 100644
--- a/src/components/ScrollArea/scroll-area.module.scss
+++ b/src/components/ScrollArea/scroll-area.module.scss
@@ -3,13 +3,21 @@ $root: scroll-area;
 .#{$root} {
   box-sizing: border-box;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 
   &__viewport {
     width: 100%;
     height: 100%;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
 
-    &--horizontal > div {
-      display: inherit !important;
+    & > div {
+      flex: 1;
+      display: flex !important;
+      flex-direction: column;
     }
   }
 
diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
new file mode 100644
index 0000000..6aed816
--- /dev/null
+++ b/src/components/Tabs/Tabs.stories.tsx
@@ -0,0 +1,129 @@
+import React, {PropsWithChildren} from "react";
+import {Meta, StoryObj} from "@storybook/react";
+
+import {Header} from "../Header";
+import {Footer} from "../Footer";
+import {ViewportProvider} from "../Viewport";
+
+import TabsComponent, {TabsProps} from "./Tabs";
+import TabsList, {TabsListProps} from "./TabsList";
+import TabsTrigger, {TabsTriggerProps} from "./TabsTrigger";
+import TabsContent from "./TabsContent";
+
+type Props = TabsProps & TabsListProps & TabsTriggerProps
+
+const triggers = ["Current", "Active", "History"];
+
+const meta: Meta<Props> = {
+    title: "Components/Tabs",
+    component: TabsComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        reverse: {
+            control: {type: 'boolean'},
+            description: 'Reverse list with content',
+            table: {
+                category: 'Tabs'
+            }
+        },
+
+        separator: {
+            control: {type: 'boolean'},
+            description: 'Show separator in TabsList',
+            table: {
+                category: 'Tabs List'
+            }
+        },
+
+        indicator: {
+            control: {type: 'boolean'},
+            description: 'Show indicator in TabsList',
+            table: {
+                category: 'Tabs List'
+            }
+        },
+
+        loop: {
+            control: {type: 'boolean'},
+            description: 'When true, keyboard navigation will loop from last tab to first, and vice versa.',
+            table: {
+                category: 'Tabs List'
+            }
+        },
+
+        roundedEdges: {
+            control: {type: 'boolean'},
+            description: 'When true, prevents the user from interacting with the tab.',
+            table: {
+                category: 'Tabs List'
+            }
+        },
+
+        disabled: {
+            control: {type: 'boolean'},
+            description: 'When true, prevents the user from interacting with the tab.',
+            table: {
+                category: 'Tabs Trigger'
+            }
+        },
+
+    },
+};
+
+export default meta;
+
+export const Tabs: StoryObj<Props> = {
+    args: {
+        defaultValue: 'Current',
+        separator: true,
+        indicator: true,
+        loop: true,
+        disabled: false,
+        roundedEdges: false
+    },
+
+    render: (args) => {
+        const {defaultValue, separator, indicator, loop, roundedEdges, reverse} = args;
+        return (
+            <ViewportProvider style={{border: '1px solid black', borderRadius: '10px'}}>
+                <Header title="Tabs Component" style={{paddingBottom: '10px'}}/>
+                <TabsComponent
+                    reverse={reverse}
+                    defaultValue={defaultValue}
+                    style={{flex: 1}}
+                >
+                    <TabsList
+                        separator={separator}
+                        indicator={indicator}
+                        loop={loop}
+                        roundedEdges={roundedEdges}
+                    >
+                        {triggers.map((trigger) => (
+                            <TabsTrigger value={trigger} disabled={args.disabled}>
+                                {trigger}
+                            </TabsTrigger>
+                        ))}
+                    </TabsList>
+                    {triggers.map((trigger) => (
+                        <TabsContent value={trigger}>
+                            <ContentWrapper>{`${trigger} tab`}</ContentWrapper>
+                        </TabsContent>
+                    ))}
+                </TabsComponent>
+                <Footer left={'❤️'} right={'⭐'} shadow={true} style={{paddingTop: '10px'}}/>
+            </ViewportProvider>
+        );
+    }
+
+};
+
+const ContentWrapper = ({children}: PropsWithChildren) => {
+    return (
+        <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100%',
+        }}>{children}</div>
+    );
+};
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
new file mode 100644
index 0000000..f0def24
--- /dev/null
+++ b/src/components/Tabs/Tabs.tsx
@@ -0,0 +1,33 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+import classnames from "classnames";
+
+import {Root, TabsProps as TabsRadixProps} from "@radix-ui/react-tabs";
+import {useComponentProps} from "../../providers";
+
+import styles from "./tabs.module.scss";
+
+export interface TabsProps extends Omit<TabsRadixProps, 'orientation'> {
+    reverse?: boolean
+}
+const Tabs: ForwardRefRenderFunction<HTMLDivElement, TabsProps> = (props, ref) => {
+    const {
+        reverse,
+        className,
+        children,
+        ...other
+    } = {...useComponentProps("tabs"), ...props};
+
+    return (
+        <Root
+            ref={ref}
+            className={classnames(styles["tabs"], {
+                [styles["tabs--reverse"]]: reverse,
+            },className)}
+            {...other}
+        >
+            {children}
+        </Root>
+    );
+};
+
+export default memo(forwardRef(Tabs));
diff --git a/src/components/Tabs/TabsContent.tsx b/src/components/Tabs/TabsContent.tsx
new file mode 100644
index 0000000..c3d633b
--- /dev/null
+++ b/src/components/Tabs/TabsContent.tsx
@@ -0,0 +1,25 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+import classnames from "classnames";
+
+import {Content, TabsContentProps as TabsContentRadixProps} from "@radix-ui/react-tabs";
+import {useComponentProps} from "../../providers";
+
+import styles from "./tabs.module.scss";
+
+export type TabsContentProps = TabsContentRadixProps
+
+const TabsList: ForwardRefRenderFunction<HTMLDivElement, TabsContentProps> = (props, ref) => {
+    const {
+        className,
+        children,
+        ...other
+    } = {...useComponentProps("tabsContent"), ...props};
+
+    return (
+        <Content ref={ref} className={classnames(styles["tabs__content"], className)} {...other}>
+            {children}
+        </Content>
+    );
+};
+
+export default memo(forwardRef(TabsList));
diff --git a/src/components/Tabs/TabsList.tsx b/src/components/Tabs/TabsList.tsx
new file mode 100644
index 0000000..4714ff9
--- /dev/null
+++ b/src/components/Tabs/TabsList.tsx
@@ -0,0 +1,122 @@
+import React, {
+    forwardRef,
+    ForwardRefRenderFunction,
+    memo,
+    useCallback,
+    useImperativeHandle,
+    useLayoutEffect,
+    useRef,
+    useState
+} from "react";
+import classnames from "classnames";
+import _debounce from "lodash/debounce";
+
+import {List, TabsListProps as TabsListRadixProps} from "@radix-ui/react-tabs";
+import {useComponentProps} from "../../providers";
+
+import styles from "./tabs.module.scss";
+
+export interface TabsListProps extends TabsListRadixProps {
+    separator?: boolean;
+    indicator?: boolean;
+    roundedEdges?: boolean;
+    indicatorClassname?: string;
+}
+
+const TabsList: ForwardRefRenderFunction<HTMLDivElement, TabsListProps> = (props, ref) => {
+    const {
+        separator = true,
+        indicator = true,
+        roundedEdges,
+        className,
+        indicatorClassname,
+        children,
+        ...other
+    } = {...useComponentProps("tabsList"), ...props};
+
+    const listRef = useRef<HTMLDivElement | null>(null);
+    const indicatorRef = useRef<HTMLSpanElement | null>(null);
+
+    const [mounted, setMounted] = useState(false);
+    const [modificators, setModificators] = useState<{ first?: boolean; last?: boolean }>({});
+
+    useImperativeHandle(ref, () => listRef.current!, []);
+
+    const updateIndicatorImmediate = useCallback(() => {
+        const list = listRef.current;
+        const indicator = indicatorRef.current;
+        const activeTrigger = list?.querySelector("[data-state='active']") as HTMLElement | null;
+
+        if (!list || !indicator || !activeTrigger) return;
+
+        const triggers = Array.from(list.querySelectorAll("[data-state]")) as HTMLElement[];
+        const first = triggers[0];
+        const last = triggers[triggers.length - 1];
+
+        const listRect = list.getBoundingClientRect();
+        const triggerRect = activeTrigger.getBoundingClientRect();
+        indicator.style.left = `${triggerRect.left - listRect.left + list.scrollLeft}px`;
+        indicator.style.width = `${triggerRect.width}px`;
+
+        setModificators({
+            first: activeTrigger === first,
+            last: activeTrigger === last,
+        });
+    }, []);
+
+    const updateIndicator = useCallback(
+        _debounce(updateIndicatorImmediate, 50),
+        [updateIndicatorImmediate]
+    );
+
+    useLayoutEffect(() => {
+        updateIndicatorImmediate();
+
+        setMounted(true);
+
+        const resizeObserver = new ResizeObserver(updateIndicator);
+        const mutationObserver = new MutationObserver(updateIndicator);
+
+        if (listRef.current) {
+            resizeObserver.observe(listRef.current)
+
+            mutationObserver.observe(listRef.current, {
+                attributes: true,
+                attributeFilter: ["data-state"],
+                subtree: true,
+                childList: true,
+            });
+        }
+
+        window.addEventListener("resize", updateIndicator);
+
+        return () => {
+            window.removeEventListener("resize", updateIndicator);
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+            updateIndicator.cancel();
+        };
+    }, []);
+
+    return (
+        <List ref={listRef} className={classnames(styles["tabs__list"], {
+            [styles["tabs__list--separator"]]: separator,
+        }, className)} {...other}>
+            {children}
+            {mounted && (
+                <span
+                    ref={indicatorRef}
+                    aria-hidden={!mounted || !indicator}
+                    className={classnames(styles["tabs__indicator"], {
+                        [styles["tabs__indicator--show"]]: indicator,
+                        [styles["tabs__indicator--rounded_edges"]]: roundedEdges,
+                        [styles["tabs__indicator--first"]]: modificators.first,
+                        [styles["tabs__indicator--last"]]: modificators.last,
+                    }, indicatorClassname)}
+                />
+            )}
+        </List>
+    );
+};
+
+export default memo(forwardRef<HTMLDivElement, TabsListProps>(TabsList));
diff --git a/src/components/Tabs/TabsTrigger.tsx b/src/components/Tabs/TabsTrigger.tsx
new file mode 100644
index 0000000..3a3c058
--- /dev/null
+++ b/src/components/Tabs/TabsTrigger.tsx
@@ -0,0 +1,43 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+import classnames from "classnames";
+
+import {TabsTriggerProps as TabsTriggerRadixProps, Trigger} from "@radix-ui/react-tabs";
+import {useComponentProps} from "../../providers";
+
+import styles from "./tabs.module.scss";
+
+export interface TabsTriggerProps extends TabsTriggerRadixProps {
+    before?: number | string;
+    after?: number | string;
+    afterClassname?: string;
+    beforeClassname?: string;
+}
+
+const TabsTrigger: ForwardRefRenderFunction<HTMLButtonElement, TabsTriggerProps> = (props, ref) => {
+    const {
+        after,
+        before,
+        className,
+        afterClassname,
+        beforeClassname,
+        children,
+        asChild = true,
+        ...other
+    } = {...useComponentProps("tabsTrigger"), ...props};
+
+    return (
+        <Trigger ref={ref} asChild={asChild} className={classnames(styles["tabs__trigger"], className)} {...other}>
+            <div className={classnames(styles["tabs__trigger-wrapper"])}>
+                {before &&
+                    <span className={classnames(styles["tabs__trigger__before"], beforeClassname)}>{before}</span>}
+
+                {typeof children === 'string' ? <span>{children}</span> : children}
+
+                {after &&
+                    <span className={classnames(styles["tabs__trigger__after"], afterClassname)}>{after}</span>}
+            </div>
+        </Trigger>
+    );
+};
+
+export default memo(forwardRef(TabsTrigger));
diff --git a/src/components/Tabs/index.ts b/src/components/Tabs/index.ts
new file mode 100644
index 0000000..6763b0e
--- /dev/null
+++ b/src/components/Tabs/index.ts
@@ -0,0 +1,5 @@
+export * from "./types";
+export {default as Tabs, type TabsProps} from "./Tabs";
+export {default as TabsList, type TabsListProps} from "./TabsList";
+export {default as TabsTrigger, type TabsTriggerProps} from "./TabsTrigger";
+export {default as TabsContent, type TabsContentProps} from "./TabsContent";
diff --git a/src/components/Tabs/tabs.module.scss b/src/components/Tabs/tabs.module.scss
new file mode 100644
index 0000000..58a0843
--- /dev/null
+++ b/src/components/Tabs/tabs.module.scss
@@ -0,0 +1,158 @@
+@use "../../styles/mixins" as theme;
+
+$root: tabs;
+$radius: var(--tabs-indicator-radius, 10px);
+$border-width: 1px;
+
+.#{$root} {
+  flex: 1;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  &--reverse {
+    flex-direction: column-reverse;
+  }
+
+  &__list {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    transition: border-bottom-color var(--transition-speed-sm);
+
+    @include theme.rtl() {
+      & {
+        flex-direction: row-reverse;
+      }
+    }
+
+    &--separator {
+      border-bottom: var(--tabs-list-border-width, #{$border-width}) solid var(--tabs-list-border-color, var(--separator-color));
+
+      .#{$root}--reverse & {
+        border-bottom: none;
+        border-top: var(--tabs-list-border-width, #{$border-width}) solid var(--tabs-list-border-color, var(--separator-color));
+      }
+    }
+  }
+
+  &__trigger {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    align-self: center;
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
+    padding: var(--tabs-trigger-padding, 10px) 0;
+    height: var(--tabs-trigger-height, 40px);
+    font-size: var(--tabs-trigger-font-size, 14px);
+    font-family: var(--tabs-trigger-font-family, var(--font-family)), sans-serif;
+    font-weight: var(--tabs-trigger-font-weight, 400);
+    color: var(--tabs-trigger-color, var(--text-primary-color));
+    transition: color var(--transition-speed-sm) ease, font-weight var(--transition-speed-sm) ease;
+
+    &[data-state="active"] {
+      font-weight: var(--tabs-trigger-font-weight-active, 600);
+    }
+
+    &[data-disabled] {
+      cursor: default;
+      opacity: var(--tabs-trigger-dissabled-opacity, 0.6);
+    }
+
+    &__before, &__after {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: var(--tabs-trigger-badge-min-width, 18px);
+      font-size: var(--tabs-trigger-badge-font-size, 12px);
+      font-weight: var(--tabs-trigger-badge-font-weight, 700);
+      padding: var(--tabs-trigger-badge-padding, 2px 4px);
+      border-radius: var(--tabs-trigger-badge-radius, 4px);
+      color: var(--tabs-trigger-badge-color, var(--text-secondary-color));
+      background-color: var(--tabs-trigger-badge-bg-color, var(--bg-secondary-color));
+      transition: background-color var(--transition-speed-sm) ease, color var(--transition-speed-sm) ease;
+
+      .#{$root}__trigger[data-state="active"] & {
+        color: var(--tabs-trigger-badge-active-color, white);
+        background-color: var(--tabs-trigger-badge-active-bg-color, var(--primary-color));
+      }
+    }
+
+    &-wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      gap: var(--tabs-trigger-gap, 4px);
+    }
+  }
+
+  &__indicator {
+    opacity: 0;
+    position: absolute;
+    bottom: calc(-1 * var(--tabs-list-border-width, #{$border-width}));
+    height: var(--tabs-indicator-size, 4px);
+    background-color: var(--tabs-indicator-color, var(--primary-color));
+    border-radius: #{$radius} #{$radius} 0 0;
+    will-change: opacity, left, width;
+    transition: opacity var(--transition-speed-sm) ease, left var(--transition-speed-sm) ease, width var(--transition-speed-sm) ease;
+
+    .#{$root}--reverse & {
+      bottom: auto;
+      top: calc(-1 * var(--tabs-list-border-width, #{$border-width}));
+      border-radius: 0 0 #{$radius} #{$radius};
+    }
+
+    &--show {
+      opacity: 1;
+    }
+
+    &--first {
+      @include theme.ltr() {
+        &:not(.#{$root}__indicator--rounded_edges) {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+      }
+
+      @include theme.rtl() {
+        &:not(.#{$root}__indicator--rounded_edges) {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+
+
+        }
+      }
+    }
+
+    &--last {
+      @include theme.ltr() {
+        &:not(.#{$root}__indicator--rounded_edges) {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      }
+
+      @include theme.rtl() {
+        &:not(.#{$root}__indicator--rounded_edges) {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+      }
+    }
+  }
+
+  &__content {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    &[data-state="active"] {
+      flex: 1;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/Tabs/types.ts b/src/components/Tabs/types.ts
new file mode 100644
index 0000000..ae0383d
--- /dev/null
+++ b/src/components/Tabs/types.ts
@@ -0,0 +1,5 @@
+export enum TabsColor {
+    Primary = "primary",
+    Secondary = "secondary",
+    Accent = "accent",
+}
\ No newline at end of file
diff --git a/src/components/Tag/tag.module.scss b/src/components/Tag/tag.module.scss
index 51e9294..bf5f0d6 100644
--- a/src/components/Tag/tag.module.scss
+++ b/src/components/Tag/tag.module.scss
@@ -49,21 +49,24 @@ $root: tag;
     color: var(--tag-outlined-color, var(--tag-color, var(--text-secondary-color)));
     border: var(--tag-border-width, 1px) solid
       var(--tag-outlined-border-color, var(--tag-outlined-color, var(--text-secondary-color)));
-    background: none;
+    background: var(--tag-outlined-bg-color, none);
 
     &.#{$root}--primary-color {
-      color: var(--primary-color);
-      border-color: var(--tag-outlined-border-primary-color, var(--primary-color));
+      color: var(--tag-outlined-color-primary-color, var(--primary-color));
+      border-color: var(--tag-outlined-border-color-primary-color, var(--primary-color));
+      background: var(--tag-outlined-bg-color-primary-color, none);
     }
 
     &.#{$root}--secondary-color {
-      color: var(--secondary-color);
-      border-color: var(--tag-outlined-border-secondary-color, var(--secondary-color));
+      color: var(--tag-outlined-color-secondary-color, var(--secondary-color));
+      border-color: var(--tag-outlined-border-color-secondary-color, var(--secondary-color));
+      background: var(--tag-outlined-bg-color-secondary-color, none);
     }
 
     &.#{$root}--accent-color {
-      color: var(--accent-color);
-      border-color: var(--tag-outlined-border-accent-color, var(--accent-color));
+      color: var(--tag-outlined-color-accent-color, var(--accent-color));
+      border-color: var(--tag-outlined-border-color-accent-color, var(--accent-color));
+      background: var(--tag-outlined-bg-color-accent-color, none);
     }
   }
 
diff --git a/src/components/TextField/text-field.module.scss b/src/components/TextField/text-field.module.scss
index 22a46a2..0214a0e 100644
--- a/src/components/TextField/text-field.module.scss
+++ b/src/components/TextField/text-field.module.scss
@@ -43,6 +43,10 @@ $root: text-field;
     &:disabled {
       cursor: not-allowed;
     }
+
+    &::placeholder {
+      color: var(--text-field-placeholder-color, var(--text-secondary-color));
+    }
   }
 
   &__before,
@@ -107,12 +111,12 @@ $root: text-field;
 
   &--medium-size {
     padding: var(--text-field-padding-md, 10px 14px);
-    font-size: var(--text-field-font-size-sm, 16px);
+    font-size: var(--text-field-font-size-md, 16px);
   }
 
   &--large-size {
     padding: var(--text-field-padding-lg, 12px 16px);
-    font-size: var(--text-field-font-size-sm, 18px);
+    font-size: var(--text-field-font-size-lg, 18px);
   }
 
   // Accents
diff --git a/src/components/Toast/Toast.stories.tsx b/src/components/Toast/Toast.stories.tsx
index 62d7b4f..57fb3e5 100644
--- a/src/components/Toast/Toast.stories.tsx
+++ b/src/components/Toast/Toast.stories.tsx
@@ -6,7 +6,7 @@ import {hideInTable} from "../../utils";
 import {Button, ButtonColor, ButtonVariant} from "../index";
 
 import ToastComponent, {ToastProps} from "./Toast";
-import {ToastColor, ToastRadius, ToastSide} from "./types";
+import {ToastColor, ToastRadius, ToastSide, ToastAnimation} from "./types";
 
 const sides: ToastSide[] = [
     ToastSide.TopLeft,
@@ -25,6 +25,8 @@ const radius: (ToastRadius | "default")[] = [
     ToastRadius.Large,
 ];
 
+const animations = [ToastAnimation.Slide, ToastAnimation.Opacity]
+
 const meta: Meta<typeof ToastComponent> = {
     title: "Components/Toast",
     component: ToastComponent,
@@ -54,6 +56,14 @@ const meta: Meta<typeof ToastComponent> = {
             options: colors,
             control: {type: "select"},
         },
+        animationIn: {
+            options: animations,
+            control: {type: "select"},
+        },
+        animationOut: {
+            options: animations,
+            control: {type: "select"},
+        },
 
         action: hideInTable,
         closeIcon: hideInTable,
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
index e73820b..f9fe22a 100644
--- a/src/components/Toast/Toast.tsx
+++ b/src/components/Toast/Toast.tsx
@@ -14,7 +14,7 @@ import {IconButton, IconButtonProps} from "../IconButton";
 import {cloneOrCreateElement} from "../../utils";
 import {useComponentProps} from "../../providers";
 
-import {ToastSide, ToastRadius, ToastColor} from "./types";
+import {ToastSide, ToastRadius, ToastColor, ToastAnimation} from "./types";
 
 import styles from "./toast.module.scss";
 
@@ -33,6 +33,8 @@ export interface ToastProps extends Omit<ToastRootProps, "title">, Omit<ToastPro
     radius?: ToastRadius;
     title?: ReactNode;
     action?: ReactNode;
+    animationIn?: ToastAnimation;
+    animationOut?: ToastAnimation;
     description?: ReactNode;
     closeIcon?: ReactElement;
     closeProps?: IconButtonProps;
@@ -54,6 +56,8 @@ const Toast: ForwardRefRenderFunction<HTMLLIElement, ToastProps> = (props, ref)
         radius,
         title,
         action,
+        animationIn = ToastAnimation.Slide,
+        animationOut = ToastAnimation.Slide,
         description,
         fullWidth,
         sticky,
@@ -87,6 +91,8 @@ const Toast: ForwardRefRenderFunction<HTMLLIElement, ToastProps> = (props, ref)
                         [styles[`toast--${side}`]]: side,
                         [styles[`toast--${color}-color`]]: color,
                         [styles[`toast--${radius}-radius`]]: radius,
+                        [styles[`toast--${animationIn}-animation-in`]]: animationIn,
+                        [styles[`toast--${animationOut}-animation-out`]]: animationOut,
                         [styles["toast--sticky"]]: sticky,
                         [styles["toast--full-width"]]: fullWidth,
                     },
diff --git a/src/components/Toast/toast.module.scss b/src/components/Toast/toast.module.scss
index 044d562..0eea510 100644
--- a/src/components/Toast/toast.module.scss
+++ b/src/components/Toast/toast.module.scss
@@ -15,27 +15,55 @@ $root: toast;
   padding: var(--toast-padding, var(--side-padding-xs));
 
   &[data-state="open"] {
-    &.#{$root}--top-left,
-    &.#{$root}--bottom-left {
-      animation: slideInLeft var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+    &.#{$root}--opacity-animation-in {
+      animation: show var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
     }
 
-    &.#{$root}--top-right,
-    &.#{$root}--bottom-right {
-      animation: slideInRight var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
-    }
+    &.#{$root}--slide-animation-in {
+      &.#{$root}--top-left,
+      &.#{$root}--bottom-left {
+        animation: slideInLeft var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+      }
 
-    &.#{$root}--top-center {
-      animation: slideInTop var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
-    }
+      &.#{$root}--top-right,
+      &.#{$root}--bottom-right {
+        animation: slideInRight var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+      }
 
-    &.#{$root}--bottom-center {
-      animation: slideInBottom var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+      &.#{$root}--top-center {
+        animation: slideInTop var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+      }
+
+      &.#{$root}--bottom-center {
+        animation: slideInBottom var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+      }
     }
   }
 
   &[data-state="closed"] {
-    animation: hide var(--toast-transition-speed, var(--transition-speed-md)) ease-in;
+    &.#{$root}--opacity-animation-out {
+      animation: hide var(--toast-transition-speed, var(--transition-speed-md)) ease-in;
+    }
+
+    &.#{$root}--slide-animation-out {
+      &.#{$root}--top-left,
+      &.#{$root}--bottom-left {
+        animation: swipeOutLeft var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+      }
+
+      &.#{$root}--top-right,
+      &.#{$root}--bottom-right {
+        animation: swipeOutRight var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+      }
+
+      &.#{$root}--top-center {
+        animation: swipeOutTop var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+      }
+
+      &.#{$root}--bottom-center {
+        animation: swipeOutBottom var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+      }
+    }
   }
 
   &[data-swipe="move"] {
@@ -52,6 +80,7 @@ $root: toast;
     &.#{$root}--bottom-left {
       animation: swipeOutLeft var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
     }
+
     &.#{$root}--top-right,
     &.#{$root}--bottom-right {
       animation: swipeOutRight var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
@@ -60,6 +89,7 @@ $root: toast;
     &.#{$root}--top-center {
       animation: swipeOutTop var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
     }
+
     &.#{$root}--bottom-center {
       animation: swipeOutBottom var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
     }
@@ -68,12 +98,15 @@ $root: toast;
   &--none-radius {
     border-radius: 0;
   }
+
   &--small-radius {
     border-radius: var(--toast-border-radius, 6px);
   }
+
   &--medium-radius {
     border-radius: var(--toast-border-radius, 15px);
   }
+
   &--large-radius {
     border-radius: var(--toast-border-radius, 20px);
   }
@@ -91,6 +124,7 @@ $root: toast;
     .#{$root}--error-color & {
       color: var(--toast-error-text-color, white);
     }
+
     .#{$root}--success-color & {
       color: var(--toast-success-text-color, white);
     }
@@ -194,6 +228,15 @@ $root: toast;
   }
 }
 
+@keyframes show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 @keyframes slideInRight {
   from {
     transform: translateX(100%);
diff --git a/src/components/Toast/types.ts b/src/components/Toast/types.ts
index df8c5db..0ee12d2 100644
--- a/src/components/Toast/types.ts
+++ b/src/components/Toast/types.ts
@@ -18,3 +18,8 @@ export enum ToastColor {
     Error = "error",
     Success = "success",
 }
+
+export enum ToastAnimation {
+    Slide = "slide",
+    Opacity = "opacity",
+}
diff --git a/src/components/Truncate/Truncate.stories.tsx b/src/components/Truncate/Truncate.stories.tsx
new file mode 100644
index 0000000..3d9e709
--- /dev/null
+++ b/src/components/Truncate/Truncate.stories.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+
+import {Meta, StoryObj} from "@storybook/react";
+
+import TruncateComponent, {TruncateProps} from "./Truncate";
+
+const meta: Meta<TruncateProps> = {
+    title: "Components/Truncate",
+    component: TruncateComponent,
+    tags: ["autodocs"],
+    argTypes: {},
+};
+
+export default meta;
+
+export const Truncate: StoryObj<TruncateProps> = {
+    args: {
+        text: 'https://www.figma.com/design/T7txseZ8nSmsnjglF5vTye/node-id=7719-343&p=f&t=6Tl4gAOTDaPxfsHE-0',
+        middle: false,
+        separator: '...',
+    },
+
+    render: (props) => {
+
+        return (
+            <div
+                style={{
+                    resize: 'horizontal',
+                    overflow: 'auto',
+                    border: '1px solid #ccc',
+                    padding: '15px 10px',
+                    minWidth: '0px',
+                    maxWidth: '800px',
+                }}
+            >
+                <TruncateComponent {...props} />
+            </div>
+        );
+
+    }
+};
+
diff --git a/src/components/Truncate/Truncate.tsx b/src/components/Truncate/Truncate.tsx
new file mode 100644
index 0000000..ff1d053
--- /dev/null
+++ b/src/components/Truncate/Truncate.tsx
@@ -0,0 +1,115 @@
+import React, {
+    ComponentProps,
+    forwardRef,
+    ForwardRefRenderFunction,
+    memo,
+    useImperativeHandle,
+    useLayoutEffect,
+    useRef,
+    useState,
+} from "react";
+import classnames from "classnames";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./truncate.module.scss";
+
+export interface TruncateProps extends ComponentProps<'span'> {
+    text?: string;
+    middle?: boolean;
+    separator?: string;
+}
+
+const trimMiddle = (el: HTMLElement, text: string, separator: string) => {
+    const measure = (txt: string) => {
+        el.textContent = txt;
+        return el.scrollWidth <= el.clientWidth;
+    };
+
+    if (measure(text)) return text;
+
+    let low = 0;
+    let high = text.length - 2;
+    let result = "";
+
+    while (low <= high) {
+        const size = Math.floor((low + high) / 2);
+        const left = text.slice(0, Math.ceil(size / 2));
+        const right = text.slice(text.length - Math.floor(size / 2));
+        const trimmed = left + separator + right;
+
+        if (measure(trimmed)) {
+            result = trimmed;
+            low = size + 1;
+        } else {
+            high = size - 1;
+        }
+    }
+
+    return result || text.charAt(0) + separator + text.charAt(text.length - 1);
+};
+
+
+const Truncate: ForwardRefRenderFunction<HTMLSpanElement, TruncateProps> = (props, ref) => {
+    const {
+        text = '',
+        middle,
+        separator = "...",
+        className,
+        ...other
+    } = {...useComponentProps("truncate"), ...props};
+
+    const innerRef = useRef<HTMLSpanElement | null>(null);
+    const [displayedText, setDisplayedText] = useState(text);
+
+    useImperativeHandle(ref, () => innerRef.current!, []);
+
+    useLayoutEffect(() => {
+        const el = innerRef.current;
+        if (!el || !middle) return;
+
+        let animationFrameId: number;
+        let observer: ResizeObserver | null = null;
+
+        const measureAndTrim = () => {
+            animationFrameId = requestAnimationFrame(() => {
+                const newText = trimMiddle(el, text, separator);
+                if (newText !== displayedText) {
+                    setDisplayedText(newText);
+                }
+            });
+        };
+
+        measureAndTrim();
+
+        if ("ResizeObserver" in window) {
+            observer = new ResizeObserver(() => {
+                cancelAnimationFrame(animationFrameId);
+                measureAndTrim();
+            });
+            observer.observe(el);
+        }
+
+        return () => {
+            observer?.disconnect();
+            cancelAnimationFrame(animationFrameId);
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [text, separator, middle]);
+
+    return (
+        <span
+            ref={innerRef}
+            className={classnames(styles["truncate"], {
+                [styles["truncate--middle"]]: middle
+            }, className)}
+            {...other}
+        >
+            {middle ? displayedText : text}
+        </span>
+    );
+};
+
+Truncate.displayName = "Truncate";
+
+export default memo(forwardRef(Truncate));
diff --git a/src/components/Truncate/index.ts b/src/components/Truncate/index.ts
new file mode 100644
index 0000000..b11d522
--- /dev/null
+++ b/src/components/Truncate/index.ts
@@ -0,0 +1 @@
+export {default as Truncate, type TruncateProps} from "./Truncate";
diff --git a/src/components/Truncate/truncate.module.scss b/src/components/Truncate/truncate.module.scss
new file mode 100644
index 0000000..f2d9587
--- /dev/null
+++ b/src/components/Truncate/truncate.module.scss
@@ -0,0 +1,21 @@
+@use "../../styles/mixins" as theme;
+
+.truncate {
+  display: block;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &--middle {
+    text-overflow: clip;
+
+    padding-right: var(--truncate-around-space, 8px);
+
+    @include theme.rtl() {
+      padding-right: 0;
+      padding-left: var(--truncate-around-space, 8px);
+
+    }
+  }
+}
diff --git a/src/components/TruncateList/TruncateList.stories.tsx b/src/components/TruncateList/TruncateList.stories.tsx
new file mode 100644
index 0000000..6bc407b
--- /dev/null
+++ b/src/components/TruncateList/TruncateList.stories.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+
+import {Meta, StoryObj} from "@storybook/react";
+
+import TruncateListComponent, {TruncateListProps} from "./TruncateList";
+import {Tag, TagColor, TagVariant} from "../Tag";
+
+const meta: Meta<TruncateListProps> = {
+    title: "Components/TruncateList",
+    component: TruncateListComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        flushImmediately: {
+            control: {type: 'boolean'},
+            description: 'test'
+        },
+    },
+};
+
+export default meta;
+
+export const TruncateList: StoryObj<TruncateListProps> = {
+    args: {
+        maxRows: 1,
+        maxVisibleItems: 10,
+        flushImmediately: true
+    },
+
+    render: ({...props}) => {
+        return (
+            <div style={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
+                <span>items + renderItem</span>
+                <div
+                    style={{
+                        resize: 'horizontal',
+                        overflow: 'auto',
+                        border: '1px solid #ccc',
+                        padding: '15px 10px',
+                        minWidth: '100px',
+                        maxWidth: '500px',
+                    }}
+                >
+                    <TruncateListComponent
+                        items={["One", "Two", "Three", "Four", "Five"]}
+                        renderItem={(item, index) => <Tag key={index}>{item}</Tag>}
+                        {...props}
+                    />
+                </div>
+                <br/>
+                <span>children</span>
+                <div
+                    style={{
+                        resize: 'horizontal',
+                        overflow: 'auto',
+                        border: '1px solid #ccc',
+                        padding: '15px 10px',
+                        minWidth: '100px',
+                        maxWidth: '500px',
+                    }}
+                >
+                    <TruncateListComponent
+                        {...props}
+                    >
+                        <Tag variant={TagVariant.Outlined}>One</Tag>
+                        <Tag color={TagColor.Accent}>Two</Tag>
+                        <Tag variant={TagVariant.Soft}>Three</Tag>
+                        <Tag color={TagColor.Primary}>Four</Tag>
+                        <Tag color={TagColor.Secondary}>Five</Tag>
+                    </TruncateListComponent>
+                </div>
+            </div>
+        );
+
+    }
+};
+
diff --git a/src/components/TruncateList/TruncateList.tsx b/src/components/TruncateList/TruncateList.tsx
new file mode 100644
index 0000000..af2979f
--- /dev/null
+++ b/src/components/TruncateList/TruncateList.tsx
@@ -0,0 +1,49 @@
+import React, {forwardRef, memo, useCallback} from "react";
+import classnames from "classnames";
+import {OverflowList, OverflowListProps} from "react-responsive-overflow-list";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./truncate-list.module.scss";
+import {Tag} from "../Tag";
+
+export type TruncateListProps<T = unknown> = OverflowListProps<T> & {
+    counterClassName?: string;
+};
+
+function TruncateListBase<T>(props: TruncateListProps<T>, ref: React.Ref<HTMLDivElement>) {
+    const {
+        renderOverflow,
+        className,
+        counterClassName,
+        ...other
+    } = {...useComponentProps("truncateList"), ...props};
+
+    const RenderOverflow = useCallback((hiddenItems: T[]) => {
+        if (renderOverflow) return renderOverflow(hiddenItems);
+
+        return (
+            <Tag className={classnames(styles["truncate-list__counter"], counterClassName)}>
+                {`+${hiddenItems.length}`}
+            </Tag>
+        );
+    }, [renderOverflow, counterClassName]);
+
+    return (
+        <OverflowList
+            ref={ref}
+            renderOverflow={RenderOverflow}
+            className={classnames(styles["truncate-list"], className)}
+            {...other as OverflowListProps<T>}
+        />
+    );
+}
+
+const TruncateList = memo(forwardRef(TruncateListBase)) as unknown as {
+    <T>(props: TruncateListProps<T> & { ref?: React.Ref<HTMLDivElement> }): React.ReactElement | null;
+    displayName?: string;
+};
+
+TruncateList.displayName = "TruncateList";
+
+export default TruncateList;
diff --git a/src/components/TruncateList/index.ts b/src/components/TruncateList/index.ts
new file mode 100644
index 0000000..42a8be9
--- /dev/null
+++ b/src/components/TruncateList/index.ts
@@ -0,0 +1 @@
+export {default as TruncateList, type TruncateListProps} from "./TruncateList";
diff --git a/src/components/TruncateList/truncate-list.module.scss b/src/components/TruncateList/truncate-list.module.scss
new file mode 100644
index 0000000..2fb749f
--- /dev/null
+++ b/src/components/TruncateList/truncate-list.module.scss
@@ -0,0 +1,20 @@
+@use "../../styles/mixins" as theme;
+
+.truncate-list {
+  gap: var(--truncate-list-gap, 8px);
+
+  @include theme.rtl() {
+    flex-direction: row-reverse;
+  }
+
+  &__counter {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--truncate-list-counter-br-radius, 9999px);
+    background: var(--truncate-list-counter-bg-color, var(--bg-secondary-color));
+    padding: var(--truncate-list-counter-padding, 0px 4px);
+    color: var(--truncate-list-counter-color, var(--text-secondary-color));
+    font-size: var(--truncate-list-counter-font-size, inherit);
+  }
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index e9936a7..79c192d 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -16,11 +16,14 @@ export * from "./Odometer";
 export * from "./ScrollArea";
 export * from "./SvgSprite";
 export * from "./Switch";
+export * from "./Tabs";
 export * from "./Tag";
 export * from "./TextArea";
 export * from "./TextField";
 export * from "./Toast";
 export * from "./Tooltip";
+export * from "./Truncate";
+export * from "./TruncateList";
 export * from "./View";
 export * from "./ViewDrawer";
 export * from "./ViewModal";
diff --git a/src/components/types.ts b/src/components/types.ts
index d4f1bbb..98b54a8 100644
--- a/src/components/types.ts
+++ b/src/components/types.ts
@@ -15,11 +15,17 @@ import type {
     OdometerProps,
     ScrollAreaProps,
     SwitchProps,
+    TabsProps,
+    TabsContentProps,
+    TabsListProps,
+    TabsTriggerProps,
     TagProps,
     TextAreaProps,
     TextFieldProps,
     ToastProps,
     TooltipProps,
+    TruncateProps,
+    TruncateListProps,
     ViewProps,
     ViewDrawerProps,
     ViewModalProps,
@@ -42,6 +48,10 @@ export interface ComponentsProps {
     odometer?: Pick<OdometerProps, "auto" | "format" | "duration">;
     scrollArea?: ScrollAreaProps;
     switch?: SwitchProps;
+    tabs?: TabsProps;
+    tabsContent?: TabsContentProps;
+    tabsList?: TabsListProps;
+    tabsTrigger?: TabsTriggerProps;
     tag?: Pick<TagProps, "variant" | "size" | "color" | "radius" | "clickable">;
     textArea?: TextAreaProps;
     textField?: TextFieldProps;
@@ -59,6 +69,8 @@ export interface ComponentsProps {
         | "color"
     >;
     tooltip?: Omit<TooltipProps, "content">;
+    truncate?: TruncateProps;
+    truncateList?: TruncateListProps;
     view?: ViewProps;
     viewDrawer?: ViewDrawerProps;
     viewModal?: ViewModalProps;