diff --git a/example/cypress/e2e/tabs.cy.ts b/example/cypress/e2e/tabs.cy.ts
new file mode 100644
index 00000000..5a0558f1
--- /dev/null
+++ b/example/cypress/e2e/tabs.cy.ts
@@ -0,0 +1,37 @@
+// https://docs.cypress.io/api/introduction/api.html
+
+describe('Tabs', () => {
+  beforeEach(() => {
+    cy.visit('/tabs');
+  });
+
+  it('check for rendered tabs', () => {
+    cy.contains('h2[data-cy=tabs]', 'Tabs');
+
+    cy.get('[data-cy=wrapper-0]').as('wrapper');
+
+    cy.get('@wrapper')
+      .find('[data-cy=tabs]')
+      .find('[role=tablist]')
+      .as('tablist');
+
+    cy.get('@tablist').children().should('have.length', 6);
+    cy.get('@tablist')
+      .find('button:first-child')
+      .should('have.class', 'active-tab');
+    cy.get('@tablist').find('button:nth-child(2)').should('be.disabled');
+
+    cy.get('@wrapper').find('[data-cy=tab-items]').as('tabcontent');
+
+    cy.get('@tabcontent').should('have.text', 'Tab 1 Content');
+
+    // Click third tab
+    cy.get('@tablist').find('button:nth-child(3)').click();
+    cy.get('@tabcontent').should('have.text', 'Tab 3 Content');
+
+    // Click last tab should redirect to stepper page
+    cy.get('@tablist').find('a:last-child').click();
+
+    cy.url().should('contain', '/steppers');
+  });
+});
diff --git a/example/src/App.vue b/example/src/App.vue
index 18f70c9f..3c934d8d 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -24,6 +24,7 @@ const navigation = ref([
       { to: { name: 'data-tables' }, title: 'Data Tables' },
       { to: { name: 'dialogs' }, title: 'Dialogs' },
       { to: { name: 'cards' }, title: 'Cards' },
+      { to: { name: 'tabs' }, title: 'Tabs' },
     ],
   },
 ]);
diff --git a/example/src/main.ts b/example/src/main.ts
index 7ca592aa..08d869d6 100644
--- a/example/src/main.ts
+++ b/example/src/main.ts
@@ -7,8 +7,12 @@ import { createPinia } from 'pinia';
 import {
   RiAddFill,
   RiAlertLine,
+  RiArrowDownSLine,
   RiArrowLeftLine,
+  RiArrowLeftSLine,
   RiArrowRightLine,
+  RiArrowRightSLine,
+  RiArrowUpSLine,
   RiCheckboxCircleLine,
   RiCloseFill,
   RiErrorWarningLine,
@@ -38,6 +42,10 @@ app.use(RuiPlugin, {
     RiCloseFill,
     RiInformationLine,
     RiErrorWarningLine,
+    RiArrowLeftSLine,
+    RiArrowRightSLine,
+    RiArrowUpSLine,
+    RiArrowDownSLine,
   ],
 });
 
diff --git a/example/src/router/index.ts b/example/src/router/index.ts
index 9ff6ea09..1c19dd54 100644
--- a/example/src/router/index.ts
+++ b/example/src/router/index.ts
@@ -86,6 +86,11 @@ const router = createRouter({
       name: 'cards',
       component: () => import('@/views/CardView.vue'),
     },
+    {
+      path: '/tabs',
+      name: 'tabs',
+      component: () => import('@/views/TabView.vue'),
+    },
   ],
 });
 
diff --git a/example/src/views/TabView.vue b/example/src/views/TabView.vue
new file mode 100644
index 00000000..c49f7d56
--- /dev/null
+++ b/example/src/views/TabView.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import {
+  RuiCard,
+  RuiIcon,
+  RuiTab,
+  RuiTabItem,
+  RuiTabItems,
+  RuiTabs,
+} from '@rotki/ui-library';
+import { ref } from 'vue';
+import { type DataType } from '@/types';
+
+type TabsData = DataType<typeof RuiTabs, string>;
+
+const tabs = ref<TabsData[]>([
+  {
+    color: 'primary',
+  },
+  {
+    color: 'secondary',
+  },
+  {
+    color: 'error',
+  },
+  {
+    color: 'warning',
+  },
+  {
+    color: 'info',
+  },
+  {
+    color: 'success',
+  },
+  {
+    color: 'primary',
+    vertical: true,
+  },
+  {
+    color: 'secondary',
+    vertical: true,
+  },
+  {
+    color: 'error',
+    vertical: true,
+  },
+  {
+    color: 'warning',
+    vertical: true,
+  },
+  {
+    color: 'info',
+    vertical: true,
+  },
+  {
+    color: 'success',
+    vertical: true,
+  },
+]);
+</script>
+
+<template>
+  <div>
+    <h2 class="text-h4 mb-6" data-cy="tabs">Tabs</h2>
+    <div
+      v-for="(data, i) in tabs"
+      :key="i"
+      class="flex mb-6 gap-x-6"
+      :class="data.vertical ? 'flex-row' : 'flex-col'"
+      :data-cy="`wrapper-${i}`"
+    >
+      <RuiTabs v-bind="data" v-model="data.modelValue" data-cy="tabs">
+        <RuiTab>
+          <template #prepend>
+            <RuiIcon name="add-fill" />
+          </template>
+          Tab 1
+        </RuiTab>
+        <RuiTab disabled>Tab 2</RuiTab>
+        <RuiTab>Tab 3</RuiTab>
+        <RuiTab>Tab 4</RuiTab>
+        <RuiTab>Tab 5</RuiTab>
+        <RuiTab link to="/steppers">Stepper View</RuiTab>
+      </RuiTabs>
+      <RuiTabItems v-model="data.modelValue" data-cy="tab-items">
+        <RuiTabItem>
+          <RuiCard>Tab 1 Content</RuiCard>
+        </RuiTabItem>
+        <RuiTabItem>
+          <RuiCard>Tab 2 Content</RuiCard>
+        </RuiTabItem>
+        <RuiTabItem>
+          <RuiCard>Tab 3 Content</RuiCard>
+        </RuiTabItem>
+        <RuiTabItem>
+          <RuiCard>Tab 4 Content</RuiCard>
+        </RuiTabItem>
+        <RuiTabItem>
+          <RuiCard>
+            Tab 5 Long Long Long Long Long Long Long Long Long Long Long Long
+            Long Long Long Long Long Long Long Long Long Long Long Long Long
+            Long Long Long Long Long Long Long Long Content
+          </RuiCard>
+        </RuiTabItem>
+      </RuiTabItems>
+    </div>
+  </div>
+</template>
diff --git a/package.json b/package.json
index 88347c4b..75922ecd 100644
--- a/package.json
+++ b/package.json
@@ -92,6 +92,9 @@
     "@vueuse/shared": ">10.0.0",
     "vue": ">=3.3.4"
   },
+  "optionalDependencies": {
+    "vue-router": ">=3.6.5"
+  },
   "devDependencies": {
     "@babel/core": "7.22.9",
     "@babel/types": "7.22.5",
@@ -145,6 +148,7 @@
     "vitest": "0.34.1",
     "vue": "3.3.4",
     "vue-loader": "17.2.2",
+    "vue-router": "4.2.4",
     "vue-tsc": "1.8.8"
   },
   "engines": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4e204448..6beec750 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,10 @@ settings:
 importers:
 
   .:
+    optionalDependencies:
+      vue-router:
+        specifier: '>=3.6.5'
+        version: 4.2.4(vue@3.3.4)
     devDependencies:
       '@babel/core':
         specifier: 7.22.9
@@ -4188,7 +4192,7 @@ packages:
       ts-dedent: 2.2.0
       type-fest: 2.19.0
       vue: 3.3.4
-      vue-component-type-helpers: 1.8.8
+      vue-component-type-helpers: 1.8.10
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -12745,12 +12749,12 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /vue-component-type-helpers@1.8.4:
-    resolution: {integrity: sha512-6bnLkn8O0JJyiFSIF0EfCogzeqNXpnjJ0vW/SZzNHfe6sPx30lTtTXlE5TFs2qhJlAtDFybStVNpL73cPe3OMQ==}
+  /vue-component-type-helpers@1.8.10:
+    resolution: {integrity: sha512-FJtmfw2Gn6eQ8kAVNEhw9nYIzWmVQJjdyQRtJXZ7tgXh/FoZhQnZ2KyxR+NuF9U4iZLBvSspeetIpnP9yxxyMw==}
     dev: true
 
-  /vue-component-type-helpers@1.8.8:
-    resolution: {integrity: sha512-Ohv9HQY92nSbpReC6WhY0X4YkOszHzwUHaaN/lev5tHQLM1AEw+LrLeB2bIGIyKGDU7ZVrncXcv/oBny4rjbYg==}
+  /vue-component-type-helpers@1.8.4:
+    resolution: {integrity: sha512-6bnLkn8O0JJyiFSIF0EfCogzeqNXpnjJ0vW/SZzNHfe6sPx30lTtTXlE5TFs2qhJlAtDFybStVNpL73cPe3OMQ==}
     dev: true
 
   /vue-demi@0.14.5(vue@3.3.4):
diff --git a/src/components/buttons/button/Button.vue b/src/components/buttons/button/Button.vue
index 62e539f5..7daff4ce 100644
--- a/src/components/buttons/button/Button.vue
+++ b/src/components/buttons/button/Button.vue
@@ -11,6 +11,7 @@ export interface Props {
   variant?: 'default' | 'outlined' | 'text' | 'fab';
   icon?: boolean;
   size?: 'sm' | 'lg';
+  tag?: 'button' | 'a';
 }
 
 defineOptions({
@@ -26,6 +27,7 @@ const props = withDefaults(defineProps<Props>(), {
   variant: 'default',
   icon: false,
   size: undefined,
+  tag: 'button',
 });
 
 const { disabled, elevation, variant, size } = toRefs(props);
@@ -63,7 +65,8 @@ const spinnerSize: ComputedRef<number> = computed(() => {
 </script>
 
 <template>
-  <button
+  <Component
+    :is="tag"
     :class="[
       css.btn,
       css[color ?? 'grey'],
@@ -89,7 +92,7 @@ const spinnerSize: ComputedRef<number> = computed(() => {
       variant="indeterminate"
       :size="spinnerSize"
     />
-  </button>
+  </Component>
 </template>
 
 <style lang="scss" module>
diff --git a/src/components/index.ts b/src/components/index.ts
index 82caa0f3..4ed28cba 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,3 +1,4 @@
+/* eslint-disable max-lines,import/max-dependencies */
 import { default as RuiAlert } from '@/components/alerts/Alert.vue';
 import {
   type Props as AutoCompleteProps,
@@ -45,6 +46,10 @@ import {
   type Props as CardProps,
   default as RuiCard,
 } from '@/components/cards/Card.vue';
+import { default as RuiTabs } from '@/components/tabs/tabs/Tabs.vue';
+import { default as RuiTab } from '@/components/tabs/tab/Tab.vue';
+import { default as RuiTabItems } from '@/components/tabs/tab-items/TabItems.vue';
+import { default as RuiTabItem } from '@/components/tabs/tab-item/TabItem.vue';
 
 export {
   RuiAlert,
@@ -67,6 +72,10 @@ export {
   RuiSimpleSelect,
   RuiDialog,
   RuiCard,
+  RuiTabs,
+  RuiTab,
+  RuiTabItems,
+  RuiTabItem,
   AutoCompleteProps,
   ChipProps,
   TooltipProps,
diff --git a/src/components/steppers/StepperCustomIcon.vue b/src/components/steppers/StepperCustomIcon.vue
index 82587754..c9548774 100644
--- a/src/components/steppers/StepperCustomIcon.vue
+++ b/src/components/steppers/StepperCustomIcon.vue
@@ -39,7 +39,7 @@ const css = useCssModule();
 
 <style lang="scss" module>
 .indicator {
-  @apply inline-flex items-center justify-center rounded-full h-10 w-10 border text-white bg-rui-primary border-rui-primary;
+  @apply inline-flex items-center justify-center rounded-full h-10 w-10 shrink-0 border text-white bg-rui-primary border-rui-primary;
 
   &.inactive {
     @apply text-xs bg-white;
diff --git a/src/components/tabs/tab-item/TabItem.spec.ts b/src/components/tabs/tab-item/TabItem.spec.ts
new file mode 100644
index 00000000..59aeb91d
--- /dev/null
+++ b/src/components/tabs/tab-item/TabItem.spec.ts
@@ -0,0 +1,55 @@
+import { type ComponentMountingOptions, mount } from '@vue/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+import TabItem from '@/components/tabs/tab-item/TabItem.vue';
+
+vi.mock('@headlessui/vue', () => ({
+  TransitionRoot: {
+    template: `
+      <div v-if='show'><slot /></div>
+    `,
+    props: {
+      show: { type: Boolean },
+    },
+  },
+}));
+
+const createWrapper = (options?: ComponentMountingOptions<typeof TabItem>) =>
+  mount(TabItem, {
+    ...options,
+    props: {
+      value: 'value',
+      ...options?.props,
+    },
+  });
+
+describe('Tabs/TabItem', () => {
+  it('do not render if not active', () => {
+    const wrapper = createWrapper();
+
+    expect(wrapper.find('div').find('div').exists()).toBeFalsy();
+  });
+
+  it("render if it's active", async () => {
+    const wrapper = createWrapper({
+      props: {
+        active: true,
+      },
+    });
+
+    expect(wrapper.find('div').find('div').exists()).toBeTruthy();
+    expect(wrapper.find('div').find('div').classes()).not.toMatch(/hidden/);
+
+    await wrapper.setProps({
+      eager: true,
+    });
+    expect(wrapper.find('div').find('div').exists()).toBeTruthy();
+    expect(wrapper.find('div').find('div').classes()).not.toMatch(/hidden/);
+
+    await wrapper.setProps({
+      active: false,
+    });
+
+    expect(wrapper.find('div').find('div').exists()).toBeTruthy();
+    expect(wrapper.find('div').find('div').classes()).toMatch(/hidden/);
+  });
+});
diff --git a/src/components/tabs/tab-item/TabItem.vue b/src/components/tabs/tab-item/TabItem.vue
new file mode 100644
index 00000000..161fdbe5
--- /dev/null
+++ b/src/components/tabs/tab-item/TabItem.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { TransitionRoot } from '@headlessui/vue';
+
+export interface Props {
+  active?: boolean;
+  value: number | string;
+  eager?: boolean;
+  reverse?: boolean;
+}
+
+defineOptions({
+  name: 'RuiTabItem',
+});
+
+withDefaults(defineProps<Props>(), {
+  eager: false,
+  active: false,
+  reverse: false,
+});
+
+const css = useCssModule();
+</script>
+
+<template>
+  <div :class="[css.tab, { 'active-tab-item': active }]">
+    <TransitionRoot
+      :key="reverse.toString()"
+      :show="active"
+      class="w-full transform duration-300 transition"
+      :enter-from="`opacity-0 ${reverse ? '-translate-x-8' : 'translate-x-8'}`"
+      enter-to="opacity-100 translate-x-0"
+      leave-from="opacity-100 translate-x-0 !h-0 overflow-hidden"
+      :leave-to="`opacity-0 !h-0 overflow-hidden ${
+        reverse ? 'translate-x-8' : '-translate-x-8'
+      }`"
+    >
+      <slot />
+    </TransitionRoot>
+    <div v-if="eager && !active" class="hidden">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.tab {
+  @apply w-full;
+}
+</style>
diff --git a/src/components/tabs/tab-items/TabItems.spec.ts b/src/components/tabs/tab-items/TabItems.spec.ts
new file mode 100644
index 00000000..34979d31
--- /dev/null
+++ b/src/components/tabs/tab-items/TabItems.spec.ts
@@ -0,0 +1,48 @@
+import { type ComponentMountingOptions, mount } from '@vue/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+import TabItems from '@/components/tabs/tab-items/TabItems.vue';
+import TabItem from '@/components/tabs/tab-item/TabItem.vue';
+
+vi.mock('@headlessui/vue', () => ({
+  TransitionRoot: {
+    template: `
+      <div v-if='show'><slot /></div>
+    `,
+    props: {
+      show: { type: Boolean },
+    },
+  },
+}));
+const createWrapper = (options?: ComponentMountingOptions<typeof TabItems>) =>
+  mount(TabItems, {
+    ...options,
+    slots: {
+      default: [
+        h(TabItem, [h('div', 'Tab Content 1')]),
+        h(TabItem, [h('div', 'Tab Content 2')]),
+        h(TabItem, [h('div', 'Tab Content 3')]),
+        h(TabItem, [h('div', 'Tab Content 4')]),
+      ],
+    },
+  });
+
+describe('Tabs/TabItems', () => {
+  it('renders properly', async () => {
+    const modelValue = ref(0);
+    const wrapper = createWrapper({
+      props: {
+        modelValue,
+      },
+    });
+
+    await nextTick();
+    await nextTick();
+    expect(wrapper.text()).toBe('Tab Content 1');
+
+    set(modelValue, 1);
+    await nextTick();
+    await nextTick();
+    await nextTick();
+    expect(wrapper.text()).toBe('Tab Content 2');
+  });
+});
diff --git a/src/components/tabs/tab-items/TabItems.vue b/src/components/tabs/tab-items/TabItems.vue
new file mode 100644
index 00000000..9d3e0c19
--- /dev/null
+++ b/src/components/tabs/tab-items/TabItems.vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+export interface Props {
+  modelValue?: number | string;
+}
+
+defineOptions({
+  name: 'RuiTabItems',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: undefined,
+});
+
+const { modelValue } = toRefs(props);
+
+const slots = useSlots();
+const reverse: Ref<boolean> = ref(false);
+const currIndex: Ref<number> = ref(-1);
+const activeIndex: Ref<number> = ref(-1);
+
+watch(currIndex, (index) => {
+  nextTick(() => {
+    set(activeIndex, index);
+  });
+});
+
+const children = computed(() => {
+  const tabs = slots.default?.() ?? [];
+  let anyActive = false;
+  const children = tabs.map((tab, index) => {
+    const value = tab.props?.value ?? index;
+    const active = get(modelValue) === value;
+    if (active) {
+      anyActive = true;
+      set(reverse, index < get(currIndex));
+      set(currIndex, index);
+    }
+
+    return {
+      ...tab,
+      props: {
+        value,
+        ...tab.props,
+      },
+    };
+  });
+
+  if (!anyActive) {
+    set(currIndex, -1);
+  }
+
+  return children;
+});
+
+const wrapper = ref<HTMLDivElement>();
+const inner = ref<HTMLDivElement>();
+
+const { height: innerHeight } = useElementSize(inner);
+const css = useCssModule();
+</script>
+
+<template>
+  <div ref="wrapper" :class="css.tabs">
+    <div ref="inner">
+      <Component
+        :is="child"
+        v-for="(child, i) in children"
+        :key="i"
+        :reverse="reverse"
+        :active="i === activeIndex"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.tabs {
+  @apply grow transition-all;
+  height: calc(v-bind(innerHeight) * 1px);
+}
+</style>
diff --git a/src/components/tabs/tab/Tab.spec.ts b/src/components/tabs/tab/Tab.spec.ts
new file mode 100644
index 00000000..fc006fd5
--- /dev/null
+++ b/src/components/tabs/tab/Tab.spec.ts
@@ -0,0 +1,107 @@
+import { type ComponentMountingOptions, mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { RouterLinkStub } from '@vue/test-utils';
+import Tab from '@/components/tabs/tab/Tab.vue';
+const createWrapper = (options?: ComponentMountingOptions<typeof Tab>) =>
+  mount(Tab, {
+    ...options,
+    props: { tabValue: 'tab-1', ...options?.props },
+    global: {
+      stubs: {
+        RouterLink: RouterLinkStub,
+      },
+    },
+  });
+
+describe('Tabs/Tab', () => {
+  it('renders properly', () => {
+    const label = 'Tab 1';
+    const wrapper = createWrapper({
+      slots: {
+        prepend: 'prepend',
+        default: () => label,
+      },
+    });
+    const elem = wrapper.find('button');
+    expect(elem.classes()).toMatch(/_text_/);
+    expect(elem.text()).toContain('prepend');
+    expect(elem.find('span').text()).toContain(label);
+  });
+
+  it('passes disabled props', async () => {
+    const wrapper = createWrapper();
+    expect(wrapper.find('button').attributes('disabled')).toBeUndefined();
+    await wrapper.setProps({ disabled: true });
+    expect(wrapper.find('button').attributes('disabled')).toBeDefined();
+    await wrapper.setProps({ link: true });
+    expect(wrapper.find('button').attributes('disabled')).toBeDefined();
+    await wrapper.setProps({ disabled: false, link: false });
+    expect(wrapper.find('button').attributes('disabled')).toBeUndefined();
+  });
+
+  it('passes color props', async () => {
+    const wrapper = createWrapper({
+      props: {
+        color: 'primary',
+      },
+    });
+    expect(wrapper.find('button').classes()).toMatch(/_grey_/);
+
+    await wrapper.setProps({ active: true });
+    expect(wrapper.find('button').classes()).toMatch(/_primary_/);
+
+    await wrapper.setProps({ color: 'secondary' });
+    expect(wrapper.find('button').classes()).toMatch(/_secondary_/);
+
+    await wrapper.setProps({ color: 'error' });
+    expect(wrapper.find('button').classes()).toMatch(/_error_/);
+
+    await wrapper.setProps({ color: 'success' });
+    expect(wrapper.find('button').classes()).toMatch(/_success_/);
+  });
+
+  it('passes grow props', async () => {
+    const wrapper = createWrapper({});
+
+    expect(wrapper.find('button').classes()).not.toMatch(/--grow_/);
+
+    await wrapper.setProps({ grow: true });
+    expect(wrapper.find('button').classes()).toMatch(/--grow_/);
+  });
+
+  it('passes align props', async () => {
+    const wrapper = createWrapper({});
+
+    expect(wrapper.find('button').classes()).toMatch(/_tab--center_/);
+
+    await wrapper.setProps({ align: 'start' });
+    expect(wrapper.find('button').classes()).toMatch(/_tab--start_/);
+
+    await wrapper.setProps({ align: 'end' });
+    expect(wrapper.find('button').classes()).toMatch(/_tab--end_/);
+  });
+
+  it('tab as link', async () => {
+    const wrapper = createWrapper({
+      props: {
+        link: true,
+        to: '/tabs',
+        exact: true,
+        exactPath: true,
+      },
+    });
+
+    let elem = wrapper.find('a');
+    expect(elem.classes()).toMatch(/_tab_/);
+    expect(elem.attributes().target).toMatch('_self');
+    expect(elem.attributes().href).toBeUndefined();
+
+    await wrapper.setProps({
+      target: '_blank',
+    });
+
+    elem = wrapper.find('a');
+    expect(elem.attributes().target).toMatch('_blank');
+    expect(elem.attributes().href).toBeDefined();
+  });
+});
diff --git a/src/components/tabs/tab/Tab.vue b/src/components/tabs/tab/Tab.vue
new file mode 100644
index 00000000..a5fb1f30
--- /dev/null
+++ b/src/components/tabs/tab/Tab.vue
@@ -0,0 +1,172 @@
+<script lang="ts" setup>
+import { type ContextColorsType } from '@/consts/colors';
+import Button from '@/components/buttons/button/Button.vue';
+
+export interface Props {
+  color?: ContextColorsType;
+  disabled?: boolean;
+  grow?: boolean;
+  tabValue: number | string;
+  active?: boolean;
+  link?: boolean;
+  target?: string;
+  to?: string;
+  exact?: boolean;
+  exactPath?: boolean;
+  vertical?: boolean;
+  align?: 'start' | 'center' | 'end';
+}
+
+defineOptions({
+  name: 'RuiTab',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  color: undefined,
+  disabled: false,
+  grow: false,
+  active: false,
+  link: false,
+  to: '',
+  target: '_self',
+  exact: false,
+  exactPath: false,
+  vertical: false,
+  align: 'center',
+});
+
+const emit = defineEmits<{
+  (e: 'click', tabValue: string | number): void;
+}>();
+
+const { target, grow, active, disabled, vertical, align, tabValue } =
+  toRefs(props);
+
+const css = useCssModule();
+
+const isSelf = computed(() => get(target) === '_self');
+
+const tabClass = computed(() => [
+  css.tab,
+  css[`tab--${get(align)}`],
+  {
+    [css['tab--grow']]: get(grow),
+    [`${css['tab--active']} active-tab`]: get(active),
+    [css['tab--disabled']]: get(disabled),
+    [css['tab--vertical']]: get(vertical),
+  },
+]);
+
+const slots = useSlots();
+const attrs = useAttrs();
+
+const click = () => {
+  emit('click', get(tabValue));
+};
+</script>
+
+<template>
+  <Button
+    v-if="disabled"
+    variant="text"
+    disabled
+    :class="tabClass"
+    role="tab"
+    v-bind="attrs"
+  >
+    <template v-for="(_, name) in slots" #[name]="slotData">
+      <slot :name="name" v-bind="slotData" />
+    </template>
+  </Button>
+  <Button
+    v-else-if="!link"
+    v-bind="attrs"
+    role="tab"
+    :class="tabClass"
+    variant="text"
+    :color="active ? color : undefined"
+    @click="click()"
+  >
+    <template v-for="(_, name) in slots" #[name]="slotData">
+      <slot :name="name" v-bind="slotData" />
+    </template>
+  </Button>
+  <RouterLink
+    v-else
+    #default="{ href, navigate, isActive, isExactActive }"
+    :to="to"
+    :exact="exact"
+    :exact-path="exactPath"
+    custom
+  >
+    <Button
+      role="tab"
+      v-bind="attrs"
+      :class="[
+        ...tabClass,
+        {
+          [`${css['tab--active']} active-tab-link`]: exact
+            ? isExactActive
+            : isActive,
+        },
+      ]"
+      tag="a"
+      :target="target"
+      :href="isSelf ? undefined : href"
+      variant="text"
+      :color="active || (exact ? isExactActive : isActive) ? color : undefined"
+      @click="
+        click();
+        isSelf ? navigate($event) : undefined;
+      "
+    >
+      <template v-for="(_, name) in slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </Button>
+  </RouterLink>
+</template>
+
+<style lang="scss" module>
+.tab {
+  @apply h-full min-w-[90px] max-w-[360px] flex items-center rounded-none cursor-pointer relative whitespace-nowrap shrink-0;
+  @apply px-4 #{!important};
+
+  &--vertical {
+    @apply h-[2.625rem] w-full max-w-none;
+  }
+
+  &--grow {
+    @apply grow max-w-none;
+  }
+
+  &--active {
+    &:after {
+      content: '';
+      @apply absolute h-0 w-full bottom-0 left-0 border-b-2 border-current;
+    }
+
+    &.tab--vertical {
+      &:after {
+        @apply h-full w-0 right-0 left-auto border-b-0 border-r-2;
+      }
+    }
+  }
+
+  &--disabled {
+    @apply cursor-not-allowed;
+  }
+
+  &--start {
+    @apply justify-start text-left rtl:justify-end rtl:text-right;
+  }
+
+  &--center {
+    @apply justify-center text-center;
+  }
+
+  &--end {
+    @apply justify-end text-right rtl:justify-start rtl:text-left;
+  }
+}
+</style>
diff --git a/src/components/tabs/tabs/Tabs.spec.ts b/src/components/tabs/tabs/Tabs.spec.ts
new file mode 100644
index 00000000..fd0a3efd
--- /dev/null
+++ b/src/components/tabs/tabs/Tabs.spec.ts
@@ -0,0 +1,133 @@
+import {
+  type ComponentMountingOptions,
+  RouterLinkStub,
+  mount,
+} from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import Tabs from '@/components/tabs/tabs/Tabs.vue';
+import Tab from '@/components/tabs/tab/Tab.vue';
+
+const createWrapper = (options?: ComponentMountingOptions<typeof Tabs>) =>
+  mount(Tabs, {
+    ...options,
+    global: {
+      stubs: {
+        RouterLink: RouterLinkStub,
+      },
+    },
+    slots: {
+      default: [
+        h(Tab, [h('div', 'Tab 1')]),
+        h(Tab, [h('div', 'Tab 2')]),
+        h(Tab, [h('div', 'Tab 3')]),
+        h(Tab, [h('div', 'Tab 4')]),
+      ],
+    },
+  });
+
+describe('Tabs/Tabs', () => {
+  it('renders properly', async () => {
+    const modelValue = ref();
+    const wrapper = createWrapper({
+      props: {
+        modelValue,
+        'onUpdate:modelValue': (e: any) => set(modelValue, e),
+      },
+    });
+
+    await nextTick();
+
+    const buttons = wrapper.findAll('div[class*=_tabs-wrapper] > button');
+
+    expect(buttons).toHaveLength(4);
+    expect(buttons[0].classes()).toMatch(/active-tab/);
+  });
+
+  it('pass vertical props', async () => {
+    const wrapper = createWrapper({});
+
+    expect(wrapper.classes()).not.toMatch(/_tabs--vertical_/);
+
+    await wrapper.setProps({
+      vertical: true,
+    });
+    expect(wrapper.classes()).toMatch(/_tabs--vertical_/);
+
+    expect(
+      wrapper.find('div[class*=_tabs-wrapper] > button').classes(),
+    ).toMatch(/_tab--vertical_/);
+  });
+
+  it('pass grow props', async () => {
+    const wrapper = createWrapper({});
+
+    expect(wrapper.find('div[class*=tabs-bar]').classes()).not.toMatch(
+      /_tabs-bar--grow/,
+    );
+
+    await wrapper.setProps({
+      grow: true,
+    });
+    expect(wrapper.find('div[class*=tabs-bar]').classes()).toMatch(
+      /_tabs-bar--grow/,
+    );
+
+    expect(
+      wrapper.find('div[class*=_tabs-wrapper] > button').classes(),
+    ).toMatch(/_tab--grow/);
+  });
+
+  it('pass disabled props', async () => {
+    const wrapper = createWrapper({});
+
+    expect(wrapper.find('button').attributes('disabled')).toBeUndefined();
+
+    await wrapper.setProps({
+      disabled: true,
+    });
+
+    expect(wrapper.find('button').attributes('disabled')).toBeDefined();
+  });
+
+  it('pass align props', async () => {
+    const wrapper = createWrapper({});
+
+    expect(wrapper.find('button').classes()).toMatch(/_tab--center_/);
+
+    await wrapper.setProps({ align: 'start' });
+    expect(wrapper.find('button').classes()).toMatch(/_tab--start_/);
+
+    await wrapper.setProps({ align: 'end' });
+    expect(wrapper.find('button').classes()).toMatch(/_tab--end_/);
+  });
+
+  it('click tab change the modelValue', async () => {
+    const modelValue = ref();
+    const wrapper = createWrapper({
+      props: {
+        modelValue,
+        'onUpdate:modelValue': (e: any) => set(modelValue, e),
+      },
+    });
+
+    await nextTick();
+    let buttons = wrapper.findAll('div[class*=_tabs-wrapper] > button');
+
+    expect(buttons).toHaveLength(4);
+    expect(buttons[0].classes()).toMatch(/active-tab/);
+
+    await buttons[1].trigger('click');
+    await nextTick();
+    expect(get(modelValue)).toBe(1);
+
+    buttons = wrapper.findAll('div[class*=_tabs-wrapper] > button');
+    await buttons[2].trigger('click');
+    await nextTick();
+    expect(get(modelValue)).toBe(2);
+
+    buttons = wrapper.findAll('div[class*=_tabs-wrapper] > button');
+    await buttons[3].trigger('click');
+    await nextTick();
+    expect(get(modelValue)).toBe(3);
+  });
+});
diff --git a/src/components/tabs/tabs/Tabs.stories.ts b/src/components/tabs/tabs/Tabs.stories.ts
new file mode 100644
index 00000000..ce2a6ff2
--- /dev/null
+++ b/src/components/tabs/tabs/Tabs.stories.ts
@@ -0,0 +1,131 @@
+import { type Meta, type StoryFn, type StoryObj } from '@storybook/vue3';
+import { contextColors } from '@/consts/colors';
+import Icon from '@/components/icons/Icon.vue';
+import Card from '@/components/cards/Card.vue';
+import Tab from '@/components/tabs/tab/Tab.vue';
+import TabItems from '@/components/tabs/tab-items/TabItems.vue';
+import TabItem from '@/components/tabs/tab-item/TabItem.vue';
+import Tabs, { type Props } from './Tabs.vue';
+
+const render: StoryFn<Props> = (args) => ({
+  components: { Tabs, Tab, TabItems, TabItem, Card, Icon },
+  setup() {
+    const modelValue = computed({
+      get() {
+        return args.modelValue;
+      },
+      set(val) {
+        args.modelValue = val;
+      },
+    });
+
+    return { args, modelValue };
+  },
+  template: `
+    <div class="flex" :class="args.vertical ? 'flex-row' : 'flex-col'">
+      <Tabs v-bind="args" v-model='modelValue'>
+        <Tab>
+          <template #prepend>
+            <Icon name='add-line' />
+          </template>
+          Tab 1
+        </Tab>
+        <Tab disabled>Tab 2</Tab>
+        <Tab>Tab 3</Tab>
+        <Tab>Tab 4</Tab>
+        <Tab>Tab 5</Tab>
+        <Tab>Tab 6</Tab>
+        <Tab>Tab 7</Tab>
+        <Tab>Tab 8</Tab>
+        <Tab>
+          Tab 9
+          <template #append>
+            <Icon name='add-line' />
+          </template>
+        </Tab>
+      </Tabs>
+      <TabItems v-model="modelValue">
+        <TabItem><Card>Tab 1 Content</Card></TabItem>
+        <TabItem><Card>Tab 2 Content</Card></TabItem>
+        <TabItem eager><Card>Tab 3 Content</Card></TabItem>
+        <TabItem><Card>Tab 4 Content</Card></TabItem>
+        <TabItem><Card>Tab 5 Content</Card></TabItem>
+        <TabItem><Card>Tab 6 Content</Card></TabItem>
+        <TabItem><Card>Tab 7 Content</Card></TabItem>
+        <TabItem>
+          <Card>
+            Tab 8 Long Long Long Long Long Long Long Long Long Long Long Long
+            Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Content
+          </Card>
+        </TabItem>
+        <TabItem eager><Card>Tab 9 Content</Card></TabItem>
+      </TabItems>
+    </div>
+  `,
+});
+
+const meta: Meta<Props> = {
+  title: 'Components/Tabs',
+  component: Tabs,
+  tags: ['autodocs'],
+  render,
+  argTypes: {
+    modelValue: { control: 'text' },
+    align: { control: 'select', options: ['start', 'center', 'end'] },
+    grow: { control: 'boolean', table: { category: 'State' } },
+    vertical: { control: 'boolean', table: { category: 'State' } },
+    disabled: { control: 'boolean', table: { category: 'State' } },
+    color: {
+      control: 'select',
+      options: contextColors,
+      table: { category: 'State' },
+    },
+    class: { control: 'string' },
+  },
+};
+
+type Story = StoryObj<Props>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Primary: Story = {
+  args: {
+    color: 'primary',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const Grow: Story = {
+  args: {
+    grow: true,
+  },
+};
+
+export const Vertical: Story = {
+  args: {
+    class: 'w-[200px]',
+    vertical: true,
+  },
+};
+
+export const DefaultWithArrow: Story = {
+  args: {
+    class: 'w-[500px]',
+  },
+};
+
+export const VerticalWithArrow: Story = {
+  args: {
+    vertical: true,
+    className: 'w-[200px] h-[300px]',
+  },
+};
+
+export default meta;
diff --git a/src/components/tabs/tabs/Tabs.vue b/src/components/tabs/tabs/Tabs.vue
new file mode 100644
index 00000000..720ee396
--- /dev/null
+++ b/src/components/tabs/tabs/Tabs.vue
@@ -0,0 +1,316 @@
+<script lang="ts" setup>
+import { useRoute } from 'vue-router';
+import { type ContextColorsType } from '@/consts/colors';
+import Button from '@/components/buttons/button/Button.vue';
+import Icon from '@/components/icons/Icon.vue';
+import { type Props as TabProps } from '@/components/tabs/tab/Tab.vue';
+
+export interface Props {
+  color?: ContextColorsType;
+  vertical?: boolean;
+  disabled?: boolean;
+  grow?: boolean;
+  modelValue?: number | string;
+  align?: 'start' | 'center' | 'end';
+}
+
+defineOptions({
+  name: 'RuiTabs',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  color: undefined,
+  vertical: false,
+  disabled: false,
+  grow: false,
+  modelValue: undefined,
+  align: 'center',
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', modelValue: number | string): void;
+}>();
+
+const { color, grow, modelValue, disabled, vertical, align } = toRefs(props);
+
+const internalModelValue = ref();
+
+const slots = useSlots();
+const children = computed(() => {
+  const tabs = slots.default?.() ?? [];
+  const currentModelValue = get(internalModelValue);
+  const inheritedProps = {
+    color: get(color),
+    grow: get(grow),
+    disabled: get(disabled),
+    vertical: get(vertical),
+    align: get(align),
+  };
+  return tabs.map((tab, index) => {
+    let tabValue = index;
+    if (tab.props?.link !== false && tab.props?.to) {
+      tabValue = tab.props.to;
+    }
+    const active = currentModelValue === tabValue;
+    return {
+      ...tab,
+      props: {
+        tabValue,
+        active,
+        ...inheritedProps,
+        ...tab.props,
+      },
+    };
+  });
+});
+
+const updateModelValue = (newModelValue: string | number) => {
+  emit('update:modelValue', newModelValue);
+  set(internalModelValue, newModelValue);
+};
+
+const isPathMatch = (
+  path: string,
+  { exactPath, exact }: { exactPath?: boolean; exact?: boolean },
+) => {
+  const route = useRoute();
+  const currentRoute = route.fullPath;
+
+  if (exactPath) {
+    return currentRoute === path;
+  }
+  const routeWithoutQueryParams = new URL(path, window.location.origin)
+    .pathname;
+
+  if (exact) {
+    return currentRoute === routeWithoutQueryParams;
+  }
+  return currentRoute.startsWith(routeWithoutQueryParams);
+};
+
+onMounted(() => {
+  if (get(modelValue) !== undefined) {
+    return;
+  }
+  const enabledChildren = get(children).filter(
+    (child) => !child.props.disabled,
+  );
+  if (enabledChildren.length > 0) {
+    let newModelValue: string | number = enabledChildren[0].props.tabValue;
+    enabledChildren.forEach((child) => {
+      const props = child.props as TabProps;
+      if (props.link !== false && props.to && isPathMatch(props.to, props)) {
+        newModelValue = props.to;
+      }
+    });
+    updateModelValue(newModelValue);
+  }
+  keepActiveTabVisible();
+});
+
+const css = useCssModule();
+
+const bar = ref<HTMLDivElement>();
+const wrapper = ref<HTMLDivElement>();
+
+const { width, height } = useElementSize(bar);
+const { width: wrapperWidth, height: wrapperHeight } = useElementSize(wrapper);
+const { arrivedState, x, y } = useScroll(bar, { behavior: 'smooth' });
+
+const { top, bottom, left, right } = toRefs(arrivedState);
+
+const showArrows = computed(() => {
+  if (!get(vertical)) {
+    return get(wrapperWidth) > get(width);
+  }
+
+  return get(wrapperHeight) > get(height);
+});
+
+const prevArrowDisabled = computed(() => {
+  if (!get(vertical)) {
+    return get(left);
+  }
+
+  return get(top);
+});
+
+const nextArrowDisabled = computed(() => {
+  if (!get(vertical)) {
+    return get(right);
+  }
+
+  return get(bottom);
+});
+
+const onPrevSliderClick = () => {
+  if (!get(vertical)) {
+    set(x, get(x) - get(width));
+  } else {
+    set(y, get(y) - get(height));
+  }
+};
+
+const onNextSliderClick = () => {
+  if (!get(vertical)) {
+    set(x, get(x) + get(width));
+  } else {
+    set(y, get(y) + get(height));
+  }
+};
+
+const keepActiveTabVisible = () => {
+  nextTick(() => {
+    if (!get(showArrows)) {
+      return;
+    }
+
+    const elem = get(wrapper);
+    const barElem = get(bar);
+    if (elem) {
+      const activeTab = (elem.querySelector('.active-tab') ??
+        elem.querySelector('.active-tab-link')) as HTMLElement;
+
+      if (!activeTab || !barElem) {
+        return;
+      }
+
+      const childLeft = activeTab.offsetLeft - elem.offsetLeft;
+      const childTop = activeTab.offsetTop - elem.offsetTop;
+      const childWidth = activeTab.offsetWidth;
+      const childHeight = activeTab.offsetHeight;
+      const parentScrollLeft = barElem.scrollLeft;
+      const parentScrollTop = barElem.scrollTop;
+      const parentWidth = barElem.offsetWidth;
+      const parentHeight = barElem.offsetHeight;
+
+      const scrollLeft = Math.max(
+        Math.min(parentScrollLeft, childLeft),
+        childLeft + childWidth - parentWidth,
+      );
+
+      const scrollTop = Math.max(
+        Math.min(parentScrollTop, childTop),
+        childTop + childHeight - parentHeight,
+      );
+
+      barElem.scrollTo({
+        left: scrollLeft,
+        top: scrollTop,
+        behavior: 'smooth',
+      });
+    }
+  });
+};
+
+useResizeObserver(bar, () => {
+  keepActiveTabVisible();
+});
+
+watchImmediate(modelValue, (modelValue) => {
+  set(internalModelValue, modelValue);
+});
+
+watch(internalModelValue, () => {
+  keepActiveTabVisible();
+});
+</script>
+
+<template>
+  <div :class="[css.tabs, { [css['tabs--vertical']]: vertical }]">
+    <div
+      v-if="showArrows"
+      :class="[css.arrow, { [css['arrow--vertical']]: vertical }]"
+    >
+      <Button
+        class="w-full h-full !rounded-none"
+        variant="text"
+        :color="color"
+        :disabled="prevArrowDisabled"
+        @click="onPrevSliderClick()"
+      >
+        <Icon :name="vertical ? 'arrow-up-s-line' : 'arrow-left-s-line'" />
+      </Button>
+    </div>
+    <div
+      ref="bar"
+      class="no-scrollbar"
+      :class="[
+        css['tabs-bar'],
+        { [css['tabs-bar--vertical']]: vertical },
+        { [css['tabs-bar--grow']]: grow },
+      ]"
+    >
+      <div
+        ref="wrapper"
+        role="tablist"
+        :class="[
+          css['tabs-wrapper'],
+          { [css['tabs-wrapper--vertical']]: vertical },
+          { [css['tabs-wrapper--grow']]: grow },
+        ]"
+      >
+        <Component
+          :is="child"
+          v-for="(child, i) in children"
+          :key="i"
+          @click="updateModelValue($event)"
+        />
+      </div>
+    </div>
+    <div
+      v-if="showArrows"
+      :class="[css.arrow, { [css['arrow--vertical']]: vertical }]"
+    >
+      <Button
+        class="w-full h-full !rounded-none"
+        variant="text"
+        :color="color"
+        :disabled="nextArrowDisabled"
+        @click="onNextSliderClick()"
+      >
+        <Icon :name="vertical ? 'arrow-down-s-line' : 'arrow-right-s-line'" />
+      </Button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.tabs {
+  @apply flex h-[2.625rem];
+
+  &--vertical {
+    @apply h-auto max-h-full flex-col;
+  }
+
+  &-bar {
+    @apply max-h-full overflow-auto;
+
+    &--vertical,
+    &--grow {
+      @apply w-full;
+    }
+  }
+
+  &-wrapper {
+    @apply h-full inline-flex max-w-none;
+
+    &--vertical {
+      @apply flex-col h-auto;
+    }
+
+    &--vertical,
+    &--grow {
+      @apply min-w-full;
+    }
+  }
+}
+
+.arrow {
+  @apply h-full w-10;
+
+  &--vertical {
+    @apply min-h-[2.625rem] w-full h-auto;
+  }
+}
+</style>
diff --git a/vite.config.ts b/vite.config.ts
index 6f02bfef..1c180f42 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -49,7 +49,13 @@ export default defineConfig({
       formats: ['es'],
     },
     rollupOptions: {
-      external: ['vue', 'tailwindcss/plugin', '@vueuse/core', '@vueuse/shared'],
+      external: [
+        'vue',
+        'vue-router',
+        'tailwindcss/plugin',
+        '@vueuse/core',
+        '@vueuse/shared',
+      ],
       output: {
         globals: {
           vue: 'vue',