diff --git a/packages/docs/tab.md b/packages/docs/tab.md
new file mode 100644
index 0000000000000000000000000000000000000000..5e0ff3b418a87df31f416c84f5718ca169820f12
--- /dev/null
+++ b/packages/docs/tab.md
@@ -0,0 +1,48 @@
+# Tab 页签
+
+## props
+
+### OTabs
+
+| name       | type                        | 默认值 | 说明                           |
+| :--------- | :-------------------------- | :----- | ------------------------------ |
+| modelValue | string \| number（v-model） | ''     | 开关状态                       |
+| lazy       | boolean                     | false  | 是否在首次激活标签时再挂载内容 |
+| addable    | boolean                     | false  | 是否可以添加页签               |
+
+### OTabPane
+
+| name          | type             | 默认值          | 说明                           |
+| :------------ | :--------------- | :-------------- | ------------------------------ |
+| value         | string \| number | uid             | tab id                         |
+| label         | string           | undefined       | 页签文本                       |
+| transition    | string           | o-fade-up-enter | 页签切换时过渡动画             |
+| lazy          | boolean          | false           | 是否在首次激活标签时再挂载内容 |
+| unmountOnHide | boolean          | false           | 是否在未激活时卸载页签内容     |
+| disabled      | boolean          | false           | 是否禁用选中                   |
+| closable      | boolean          | false           | 是否可以删除                   |
+
+## event
+
+### OTabs
+
+| name   | 参数                                                | 说明           |
+| :----- | :-------------------------------------------------- | :------------- |
+| change | value: string \| number, oldValue: string \| number | 页签切换后触发 |
+| delete | value: string \| number                             | 页签删除后触发 |
+
+## expose
+
+## slot
+
+### OTabs
+
+| name | 说明                 |
+| :--- | :------------------- |
+| act  | 页签右侧额外内容插槽 |
+
+### OTabPane
+
+| name | 说明     |
+| :--- | :------- |
+| nav  | 页签插槽 |
diff --git a/packages/opendesign/src/components/_shared/icons.ts b/packages/opendesign/src/components/_shared/icons.ts
index 27320a3ab9b3c2a25158422c09227d97e40b1ef9..f350b18c6ad2752d210d06ad9b12b8ce86bc18fd 100644
--- a/packages/opendesign/src/components/_shared/icons.ts
+++ b/packages/opendesign/src/components/_shared/icons.ts
@@ -5,7 +5,9 @@ import { Component, shallowRef } from 'vue';
 import {
   IconLoading as _IconLoading,
   IconLink as IconLink,
-  IconArrowRight
+  IconArrowRight,
+  IconX,
+  IconAdd as _IconAdd,
 } from '../icons';
 
 /**
@@ -30,4 +32,18 @@ export function initLinkPrefixIcon(icon: Component) {
 export const IconLinkArrow = shallowRef<Component>(IconArrowRight);
 export function initLinkArrowIcon(icon: Component) {
   IconLinkArrow.value = icon;
+}
+/**
+ * close图标
+ */
+export const IconClose = shallowRef<Component>(IconX);
+export function initCloseIcon(icon: Component) {
+  IconClose.value = icon;
+}
+/**
+ * add图标
+ */
+export const IconAdd = shallowRef<Component>(_IconAdd);
+export function initAddIcon(icon: Component) {
+  IconAdd.value = icon;
 }
\ No newline at end of file
diff --git a/packages/opendesign/src/components/_shared/vue-utils.ts b/packages/opendesign/src/components/_shared/vue-utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8a5dbc944e15c4b07030c6697891d35d0aa4389f
--- /dev/null
+++ b/packages/opendesign/src/components/_shared/vue-utils.ts
@@ -0,0 +1,60 @@
+import { Component, onMounted, Slots, VNode, VNodeTypes } from 'vue';
+
+// 来着vuejs/core
+// https://github.com/vuejs/core/blob/main/packages/shared/src/shapeFlags.ts
+export const enum ShapeFlags {
+  ELEMENT = 1,
+  FUNCTIONAL_COMPONENT = 1 << 1,
+  STATEFUL_COMPONENT = 1 << 2,
+  TEXT_CHILDREN = 1 << 3,
+  ARRAY_CHILDREN = 1 << 4,
+  SLOTS_CHILDREN = 1 << 5,
+  TELEPORT = 1 << 6,
+  SUSPENSE = 1 << 7,
+  COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8,
+  COMPONENT_KEPT_ALIVE = 1 << 9,
+  COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT
+}
+/**
+ * 判断vnode是不是element
+ */
+export const isElement = (vnode: VNode) => {
+  return Boolean(vnode && vnode.shapeFlag & ShapeFlags.ELEMENT);
+};
+
+/**
+ * 判断vnode是不是vue组件
+ * @param vnode vnode节点
+ * @param type 组件信息
+ */
+export function isComponent(vnode: VNode, type?: VNodeTypes): type is Component {
+  return Boolean(vnode && vnode.shapeFlag & ShapeFlags.COMPONENT);
+}
+/**
+ * 判断vnode是不是vue组件
+ */
+export const isSlotsChildren = (vnode: VNode, children: VNode['children']): children is Slots => {
+  return Boolean(vnode && vnode.shapeFlag & ShapeFlags.SLOTS_CHILDREN);
+};
+
+// TODO
+export function useSlotElement(componentName?: string) {
+  let children: VNode[] | null = null;
+  const components = [];
+  // const
+  onMounted(() => {
+    children?.forEach(child => {
+      console.log(child, isComponent(child));
+      if (isComponent(child, child.type)) {
+        if (componentName && child.type.name === componentName) {
+          components.push(child);
+        }
+      }
+    });
+  });
+  return {
+    setSlotChildren(nodes: VNode[]) {
+      children = nodes;
+    }
+  };
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/components/popover/OPopover.vue b/packages/opendesign/src/components/popover/OPopover.vue
index dd13980a4640fba19d0127417ed50c921ed92c36..174d39936566f5a4bc07e1af7e4fbfe0726beaf3 100644
--- a/packages/opendesign/src/components/popover/OPopover.vue
+++ b/packages/opendesign/src/components/popover/OPopover.vue
@@ -43,7 +43,7 @@ const props = defineProps({
   /**
    * 是否在隐藏时卸载
    */
-  unmountOnClose: {
+  unmountOnHide: {
     type: Boolean,
     default: true,
   },
@@ -71,7 +71,7 @@ const updateVisible = (val: boolean) => {
     :target="props.target"
     :wrapper="props.wrapper"
     anchor-class="o-popover-anchor"
-    :unmount-on-close="props.unmountOnClose"
+    :unmount-on-hide="props.unmountOnHide"
     @update:visible="updateVisible"
   >
     <div class="o-popover-wrap">
diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index 8f4c04d83c4a35eab21223b4615563fa477c77f2..7ef18ecc0d433cd93165591f1cde1cbbb77d2fc8 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -85,7 +85,7 @@ const props = defineProps({
   /**
    * 是否在popup隐藏时unmout
    */
-  unmountOnClose: {
+  unmountOnHide: {
     type: Boolean,
     default: true,
   },
@@ -117,6 +117,13 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  /**
+   * 过渡名称
+   */
+  transition: {
+    type: String,
+    default: 'o-zoom-fade',
+  },
 });
 
 const emits = defineEmits<{ (e: 'update:visible', val: boolean): void; (e: 'change', val: boolean): void }>();
@@ -307,7 +314,7 @@ const handleTransitionStart = () => {
 };
 const handleTransitionEnd = () => {
   isAnimating.value = false;
-  if (!visible.value && props.unmountOnClose) {
+  if (!visible.value && props.unmountOnHide) {
     toMount.value = false;
   }
 };
@@ -424,7 +431,7 @@ onUnmounted(() => {
 </script>
 <template>
   <teleport v-if="wrapperEl" :to="props.wrapper">
-    <ResizeObserver v-if="toMount || visible || !props.unmountOnClose" @resize="onPopupResize">
+    <ResizeObserver v-if="toMount || visible || !props.unmountOnHide" @resize="onPopupResize">
       <div
         ref="popupRef"
         class="o-popup"
@@ -435,7 +442,7 @@ onUnmounted(() => {
         @mouseleave="onPopupHoverOut"
       >
         <Transition
-          name="o-zoom-fade"
+          :name="props.transition"
           :appear="true"
           @before-enter="handleTransitionStart"
           @after-enter="handleTransitionEnd"
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
index 52f68bd88af4691ba1c5e60dd9ec270f8614b811..666274aae6b14b8902bd7f91201340c03f342378 100644
--- a/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
+++ b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
@@ -36,7 +36,7 @@ setTimeout(() => {
       <OButton ref="btn8" class="btn8">BL btn8 </OButton>
       <OButton ref="btn9" class="btn9">LT btn9 </OButton>
 
-      <OPopup position="tl" :target="btn1" wrapper="#wrap" trigger="click" :unmount-on-close="false">
+      <OPopup position="tl" :target="btn1" wrapper="#wrap" trigger="click" :unmount-on-hide="false">
         <div class="popup-box">
           <div>{{ content }}</div>
           <div>{{ content }}</div>
diff --git a/packages/opendesign/src/components/select/OSelect.vue b/packages/opendesign/src/components/select/OSelect.vue
index d707d32e482f65bbea0220c1a74fc393933b7bc6..7896254e94a26934c39ee8df5ffad0750c1251b0 100644
--- a/packages/opendesign/src/components/select/OSelect.vue
+++ b/packages/opendesign/src/components/select/OSelect.vue
@@ -50,12 +50,16 @@ interface SelectPropT {
    * 是否在结束选择时，卸载下拉选项
    * v-model
    */
-  unmountOnClose?: boolean;
+  unmountOnHide?: boolean;
   /**
    * 默认初始值对应的label显示，不传则使用modelValue
    * 当unmountOnClose为true时，存在初始值对应label无法获取问题，可使用该属性指定初始值
    */
   defaultLabel?: string;
+  /**
+   * 过渡名称
+   */
+  transition?: string;
 }
 const props = withDefaults(defineProps<SelectPropT>(), {
   modelValue: '',
@@ -67,7 +71,8 @@ const props = withDefaults(defineProps<SelectPropT>(), {
   optionWidthMode: 'min-width',
   optionWrapClass: '',
   defaultLabel: '',
-  unmountOnClose: true,
+  unmountOnHide: true,
+  transition: undefined,
 });
 
 const activeLabel = ref(props.defaultLabel || props.modelValue);
@@ -115,7 +120,8 @@ provide(selectOptionInjectKey, {
 
     <OPopup
       v-model:visible="showOption"
-      :unmount-on-close="props.unmountOnClose"
+      :transition="props.transition"
+      :unmount-on-hide="props.unmountOnHide"
       :position="props.optionPosition"
       :target="selectRef"
       :trigger="props.trigger"
diff --git a/packages/opendesign/src/components/style/animation.scss b/packages/opendesign/src/components/style/animation.scss
index cc14a6cfdb6327e6996354994a4a0458fa411626..bf302ba8e367baff722746e2394ac89c7f58cc43 100644
--- a/packages/opendesign/src/components/style/animation.scss
+++ b/packages/opendesign/src/components/style/animation.scss
@@ -24,8 +24,46 @@
 }
 
 .o-zoom-fade-enter-active {
-  animation: o-zoom-fade-in var(--o-transition-duration-2);
+  animation: o-zoom-fade-in var(--o-transition-duration-long);
 }
 .o-zoom-fade-leave-active {
   animation: o-zoom-fade-in var(--o-transition-duration-1) reverse;
 }
+
+@keyframes o-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes o-fade-up {
+  0% {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0px);
+    opacity: 1;
+  }
+}
+
+.o-fade-up-enter-enter-active {
+  animation: o-fade-up var(--o-transition-duration-6);
+}
+.o-fade-in-enter-enter-active {
+  animation: o-fade-in var(--o-transition-duration-6);
+}
+
+.o-fade-up-enter-active,
+.o-fade-up-leave-active {
+  transition: all var(--o-transition-duration-6) var(--o-transition-function-ease-out);
+}
+
+.o-fade-up-enter-from,
+.o-fade-up-leave-to {
+  opacity: 0;
+  transform: translateY(10px);
+}
diff --git a/packages/opendesign/src/components/style/index.scss b/packages/opendesign/src/components/style/index.scss
index 07b57ffe49c7b08cff00d9cb6f610b0ab3a5e246..9546225a203a2a7516f9bd424c29b43c163ca2f5 100644
--- a/packages/opendesign/src/components/style/index.scss
+++ b/packages/opendesign/src/components/style/index.scss
@@ -12,11 +12,13 @@
   --o-transition-duration-1: 0.1s;
   --o-transition-duration-2: 0.2s;
   --o-transition-duration-3: 0.3s;
+  --o-transition-duration-4: 0.4s;
+  --o-transition-duration-6: 0.6s;
   --o-transition-duration-long: 1.5s;
 
   --o-transition-function-linear: linear;
   --o-transition-function-ease-in: ease-in;
-  --o-transition-function-ease-out: ease-out;
+  --o-transition-function-ease-out: cubic-bezier(0, 0, 0.25, 1);
 }
 
 // icons
diff --git a/packages/opendesign/src/components/tabs/OTabPane.vue b/packages/opendesign/src/components/tabs/OTabPane.vue
new file mode 100644
index 0000000000000000000000000000000000000000..39f5faca24f42a94dd741ab4cbe109111437ef54
--- /dev/null
+++ b/packages/opendesign/src/components/tabs/OTabPane.vue
@@ -0,0 +1,84 @@
+<script lang="ts">
+import { defineComponent, getCurrentInstance, inject, reactive } from 'vue';
+import { tabsInjectKey } from './provide';
+
+export default defineComponent({
+  name: 'OTabs',
+  props: {
+    /**
+     * 页签项的key
+     */
+    value: {
+      type: [String, Number],
+      default: undefined,
+    },
+    /**
+     * 页签项的文本，如果不传，使用nav插槽或者value
+     */
+    label: {
+      type: String,
+      default: undefined,
+    },
+    /**
+     * 是否在隐藏时卸载页签内容
+     */
+    unmountOnHide: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 页签切换时过渡动画
+     */
+    transition: {
+      type: String,
+      default: 'o-fade-in-enter',
+    },
+    /**
+     * 是否禁用选中该页签
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 是否可以删除该页签
+     */
+    closable: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 是否页签首次激活时再加载页签内容
+     */
+    lazy: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { slots, attrs }) {
+    const tabsInjection = inject(tabsInjectKey);
+
+    const instance = getCurrentInstance();
+
+    if (instance?.uid) {
+      const id = props.value || instance?.uid;
+
+      tabsInjection?.addTabItem(
+        id,
+        reactive({
+          value: id,
+          label: props.label,
+          lazy: tabsInjection.lazy || props.lazy,
+          disabled: props.disabled,
+          closable: props.closable,
+          transition: props.transition,
+          unmountOnHide: props.unmountOnHide,
+          attrs: attrs,
+          slots: slots,
+        })
+      );
+    }
+    return () => {};
+  },
+});
+</script>
diff --git a/packages/opendesign/src/components/tabs/OTabs.vue b/packages/opendesign/src/components/tabs/OTabs.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a36e2d162d65b82adc0e3fce8166f367caebcd0d
--- /dev/null
+++ b/packages/opendesign/src/components/tabs/OTabs.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { computed, provide, reactive, ref } from 'vue';
+import { tabsInjectKey, TabNavData } from './provide';
+import TabNav from './TabNav.vue';
+import TabContent from './TabContent.vue';
+import { IconAdd } from '../_shared/icons';
+
+interface SelectPropT {
+  /**
+   * tab选中的nav值
+   * v-model
+   */
+  modelValue?: string | number;
+  /**
+   * 是否激活时再加载
+   */
+  lazy?: boolean;
+  /**
+   * 是否可以添加页签
+   */
+  addable?: boolean;
+}
+
+const props = withDefaults(defineProps<SelectPropT>(), {
+  modelValue: '',
+  lazy: false,
+});
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', value: string | number): void;
+  (e: 'change', value: string | number, oldValue: string | number): void;
+  (e: 'delete', value: string | number): void;
+  (e: 'add', evt: MouseEvent): void;
+}>();
+
+const activeKey = ref(props.modelValue);
+
+const tabsMap = reactive(new Map<string | number, TabNavData>());
+const addTabItem = (tabKey: string | number, tabData: TabNavData) => {
+  tabsMap.set(tabKey, tabData);
+};
+const removeTabItem = (tabKey: string | number) => {
+  tabsMap.delete(tabKey);
+};
+// nav构造数据
+const navList = computed(() => {
+  const rlt: TabNavData[] = [];
+  tabsMap.forEach((val) => {
+    rlt.push(val);
+  });
+
+  return rlt;
+});
+
+const navKeys = computed(() => {
+  const keys = navList.value.map((item) => item.value);
+
+  return keys;
+});
+
+const activeValue = computed(() => {
+  if (!navKeys.value.includes(activeKey.value)) {
+    emits('update:modelValue', navKeys.value[0]);
+
+    return navKeys.value[0];
+  }
+  return activeKey.value;
+});
+
+provide(tabsInjectKey, {
+  value: activeValue,
+  lazy: props.lazy,
+  addTabItem,
+  removeTabItem,
+});
+
+// nav选择
+const onSelectNav = (value: string | number) => {
+  emits('change', value, activeValue.value);
+  activeKey.value = value;
+  emits('update:modelValue', value);
+};
+
+// 删除页签
+const onDeleteNav = (value: string | number) => {
+  removeTabItem(value);
+  emits('delete', value);
+};
+// 添加页签
+const onAddNav = (e: MouseEvent) => {
+  emits('add', e);
+};
+</script>
+<template>
+  <div class="o-tabs">
+    <slot></slot>
+    <div class="o-tabs-head" :class="{ 'with-act': !!$slots.act }">
+      <div class="o-tabs-navs">
+        <TabNav
+          v-for="item in navList"
+          :key="item.value"
+          class="o-tabs-nav"
+          :active-value="activeValue"
+          v-bind="item"
+          @select="onSelectNav"
+          @delete="onDeleteNav"
+        />
+        <div v-if="props.addable" class="o-tab-nav-add" @click="onAddNav">
+          <IconAdd />
+        </div>
+      </div>
+      <div v-if="$slots.act" class="o-tabs-act">
+        <slot name="act"></slot>
+      </div>
+    </div>
+    <div class="o-tabs-body">
+      <TabContent v-for="item in navList" :key="item.value" class="o-tab-pane" :active-value="activeValue" v-bind="item" />
+    </div>
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/tabs/TabContent.vue b/packages/opendesign/src/components/tabs/TabContent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d9681cc3cdd78179dd5657d86a55bd46386bda4d
--- /dev/null
+++ b/packages/opendesign/src/components/tabs/TabContent.vue
@@ -0,0 +1,83 @@
+<script lang="ts">
+import { computed, defineComponent, h, mergeProps, PropType, Transition, vShow, withDirectives, SetupContext, Slots, ref } from 'vue';
+
+export default defineComponent({
+  name: 'TabContent',
+  inheritAttrs: false,
+  props: {
+    /**
+     * tabs选中的key
+     */
+    value: {
+      type: [String, Number],
+      default: undefined,
+    },
+    /**
+     * tabs选中的key
+     */
+    activeValue: {
+      type: [String, Number],
+      default: undefined,
+    },
+    /**
+     * 是否在隐藏时卸载
+     */
+    unmountOnHide: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 过渡动画
+     */
+    transition: {
+      type: String,
+      default: '',
+    },
+    /**
+     * nav插槽
+     */
+    slots: {
+      type: Object as PropType<Slots>,
+      default: undefined,
+    },
+    /**
+     * 过渡动画
+     */
+    attrs: {
+      type: Object as PropType<SetupContext['attrs']>,
+      default: () => {},
+    },
+    lazy: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const active = computed(() => props.activeValue === props.value);
+    const toMount = computed(() => (props.lazy ? active.value : true));
+
+    // pane只渲染default 插槽的内容
+    return () => {
+      const p = mergeProps(
+        {
+          class: ['o-tab-pane', { active: active.value }],
+        },
+        props.attrs
+      );
+
+      const child = h('div', p, props.slots?.default?.());
+
+      return h(Transition, { name: props.transition }, () => {
+        if (!toMount.value) {
+          return null;
+        }
+        if (props.unmountOnHide) {
+          return active.value ? child : null;
+        } else {
+          return withDirectives(child, [[vShow, active.value]]);
+        }
+      });
+    };
+  },
+});
+</script>
diff --git a/packages/opendesign/src/components/tabs/TabNav.vue b/packages/opendesign/src/components/tabs/TabNav.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ed4dcf8f22b8538b0617b549dfba6449c55c5cc0
--- /dev/null
+++ b/packages/opendesign/src/components/tabs/TabNav.vue
@@ -0,0 +1,96 @@
+<script lang="ts">
+import { computed, defineComponent, h, PropType, Slots } from 'vue';
+import { IconClose } from '../_shared/icons';
+
+export default defineComponent({
+  name: 'OTabNav',
+  inheritAttrs: false,
+  props: {
+    /**
+     * 该页签key
+     */
+    value: {
+      type: [String, Number],
+      default: undefined,
+    },
+    /**
+     * 页签文本
+     */
+    label: {
+      type: String,
+      default: undefined,
+    },
+    /**
+     * tabs选中页签的key
+     */
+    activeValue: {
+      type: [String, Number],
+      default: undefined,
+    },
+    /**
+     * nav插槽
+     */
+    slots: {
+      type: Object as PropType<Slots>,
+      default: undefined,
+    },
+    /**
+     * 是否禁用选中
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 是否可以删除
+     */
+    closable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['select', 'delete'],
+  setup(props, { emit }) {
+    const defaultLabel = props.label || props.value;
+
+    const active = computed(() => props.activeValue === props.value);
+
+    const navClick = (e: MouseEvent) => {
+      if (props.disabled || active.value) {
+        return;
+      }
+      emit('select', props.value, e);
+    };
+
+    const navCloseClick = (e: MouseEvent) => {
+      e.stopImmediatePropagation();
+      emit('delete', props.value, e);
+    };
+
+    // pane只渲染default 插槽的内容
+    return () => {
+      const children = props.slots?.nav?.();
+
+      const titleNode = h('div', { class: 'o-tab-nav-title' }, children || defaultLabel);
+
+      const closeNode = h('div', { class: 'o-tab-nav-close', onClick: navCloseClick }, h(IconClose.value));
+
+      return h(
+        'div',
+        {
+          class: [
+            'o-tab-nav',
+            {
+              active: active.value,
+              'is-disabled': props.disabled,
+              'is-closable': props.closable,
+            },
+          ],
+          onClick: navClick,
+        },
+        props.closable ? [titleNode, closeNode] : titleNode
+      );
+    };
+  },
+});
+</script>
diff --git a/packages/opendesign/src/components/tabs/__demo__/IndexTabs.vue b/packages/opendesign/src/components/tabs/__demo__/IndexTabs.vue
new file mode 100644
index 0000000000000000000000000000000000000000..35e857c75985324b0493f0fdbb90993886279e02
--- /dev/null
+++ b/packages/opendesign/src/components/tabs/__demo__/IndexTabs.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import '../style';
+
+import TabsDefault from './TabsDefault.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <TabsDefault />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/tabs/__demo__/TabsDefault.vue b/packages/opendesign/src/components/tabs/__demo__/TabsDefault.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b3a71059b6b1089a534f9fde31820a08279567f5
--- /dev/null
+++ b/packages/opendesign/src/components/tabs/__demo__/TabsDefault.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+import { OTabs, OTabPane } from '../index';
+import { IconSearch } from '../../icons';
+const activeTab = ref('Tab A');
+const tabChange = (val: string | number, oldVal: string | number) => {
+  console.log(`active: ${val}, old: ${oldVal}`);
+};
+function getPanelItem(key: string) {
+  return {
+    id: key,
+    label: `Nav ${key}`,
+    content: `Panel Content: ${key}`,
+  };
+}
+const tabList = reactive(
+  new Array(4).fill(1).map((k, idx) => {
+    return getPanelItem(`${idx + 1}`);
+  })
+);
+const tabAdd = () => {
+  console.log('add tab');
+  tabList.push(getPanelItem(`${tabList.length + 1}`));
+};
+
+const tabDelete = (v: string | number) => {
+  console.log(v);
+};
+</script>
+<template>
+  <h4>Default</h4>
+  <div class="sec">
+    <OTabs>
+      <OTabPane class="pane" label="Tab 1">pane 1</OTabPane>
+      <OTabPane class="pane" label="Tab 2" closable lazy><div style="height: 50px">pane 2</div></OTabPane>
+      <OTabPane class="pane" label="Tab 3" lazy>pane 3</OTabPane>
+      <OTabPane class="pane" label="Tab 4" disabled closable>pane 4</OTabPane>
+    </OTabs>
+  </div>
+  <h4>Slot & change</h4>
+  <div class="sec">
+    <OTabs v-model="activeTab" lazy @change="tabChange">
+      <template #act>action</template>
+      <OTabPane value="Tab A" class="pane"><template #nav>Nav 1</template>pane 1 </OTabPane>
+      <OTabPane value="Tab B" class="pane">pane 2</OTabPane>
+      <OTabPane value="Tab C" class="pane">
+        <template #nav><IconSearch /> Nav 3</template>pane 3
+      </OTabPane>
+      <OTabPane value="Tab D" class="pane">pane 4</OTabPane>
+    </OTabs>
+  </div>
+  <h4>Add & Delete</h4>
+  <div class="sec">
+    <OTabs v-model="activeTab" lazy addable @change="tabChange" @add="tabAdd" @delete="tabDelete">
+      <OTabPane v-for="(item, idx) in tabList" :key="item.id" :value="item.id" class="pane" :label="item.label" :closable="idx > 1">
+        {{ item.content }}
+      </OTabPane>
+    </OTabs>
+  </div>
+</template>
+<style lang="scss">
+.sec {
+  border: 1px solid #eee;
+  padding: 24px;
+  margin-bottom: 24px;
+}
+.pane {
+  padding: 36px;
+  background-color: bisque;
+}
+</style>
diff --git a/packages/opendesign/src/components/tabs/index.ts b/packages/opendesign/src/components/tabs/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4290a713146cdba7fb964b5d9a086f642d986902
--- /dev/null
+++ b/packages/opendesign/src/components/tabs/index.ts
@@ -0,0 +1,12 @@
+import _OTabs from './OTabs.vue';
+import OTabPane from './OTabPane.vue';
+import type { App } from 'vue';
+
+const OTabs = Object.assign(_OTabs, {
+  OTabPane,
+  install(app: App) {
+    app.component(_OTabs.name, _OTabs);
+  },
+});
+
+export { OTabs, OTabPane };
diff --git a/packages/opendesign/src/components/tabs/provide.ts b/packages/opendesign/src/components/tabs/provide.ts
new file mode 100644
index 0000000000000000000000000000000000000000..946bfc0703a2a0b5ad8ec5c7fbdd29dd71d0cedb
--- /dev/null
+++ b/packages/opendesign/src/components/tabs/provide.ts
@@ -0,0 +1,22 @@
+import { InjectionKey, Ref, Slots, SetupContext } from 'vue';
+
+export interface TabNavData {
+  value: string | number;
+  label?: string;
+  transition?: string,
+  unmountOnHide?: boolean,
+  disabled?: boolean;
+  closable?: boolean;
+  lazy?: boolean;
+  slots?: Slots;
+  attrs?: SetupContext['attrs'],
+}
+
+
+export const tabsInjectKey: InjectionKey<{
+  value: Ref<string | number>,
+  lazy: boolean,
+  addTabItem: (key: string | number, data: TabNavData) => void,
+  removeTabItem: (tabKey: string | number) => void,
+}> = Symbol('provide-tabs');
+
diff --git a/packages/opendesign/src/components/tabs/style/index.scss b/packages/opendesign/src/components/tabs/style/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a2e41a6a871265803c4962243faa1bf3c89c29ff
--- /dev/null
+++ b/packages/opendesign/src/components/tabs/style/index.scss
@@ -0,0 +1,93 @@
+@import './var.scss';
+
+.o-tabs-navs {
+  display: flex;
+  align-items: center;
+}
+.o-tabs-head {
+  font-size: var(--tabs-nav-text-size);
+  line-height: var(--tabs-nav-text-height);
+  color: var(--tabs-nav-color);
+
+  &.with-act {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+.o-tab-nav {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 16px;
+  cursor: pointer;
+
+  background-color: var(--tabs-nav-bg);
+
+  + .o-tab-nav {
+    margin-left: 8px;
+  }
+
+  &:hover {
+    color: var(--tabs-nav-color_active);
+    background-color: var(--tabs-nav-bg_hover);
+  }
+
+  &.active {
+    color: var(--tabs-nav-color_active);
+  }
+
+  &.is-closable {
+    padding-right: 24px;
+    position: relative;
+  }
+
+  &.is-disabled {
+    color: var(--tabs-nav-color_disabled);
+    background-color: var(--tabs-nav-bg_disabled);
+  }
+}
+.o-tab-nav-close {
+  position: absolute;
+  right: 0;
+  top: 0;
+  font-size: 14px;
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--tabs-icon-color);
+  &:hover {
+    color: var(--tabs-icon-color_hover);
+  }
+}
+
+.o-tab-nav-add {
+  margin-left: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  color: var(--tabs-icon-color);
+  font-size: 14px;
+  border-radius: 50%;
+  &:hover {
+    color: var(--tabs-icon-color_hover);
+    background-color: var(--tabs-nav-bg_hover);
+  }
+}
+
+.o-tabs-body {
+  display: flex;
+}
+
+.o-tab-pane {
+  flex-shrink: 0;
+  width: 100%;
+  display: none;
+  &.active {
+    display: block;
+  }
+}
diff --git a/packages/opendesign/src/components/tabs/style/index.ts b/packages/opendesign/src/components/tabs/style/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..67aac616fc2524b146b7b078fd3b67c1bd3b4a6e
--- /dev/null
+++ b/packages/opendesign/src/components/tabs/style/index.ts
@@ -0,0 +1 @@
+import './index.scss';
diff --git a/packages/opendesign/src/components/tabs/style/var.scss b/packages/opendesign/src/components/tabs/style/var.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7fbc1a50f8a67e23f809af75704b4452440c5ab6
--- /dev/null
+++ b/packages/opendesign/src/components/tabs/style/var.scss
@@ -0,0 +1,17 @@
+.o-tabs {
+  --tabs-nav-text-size: var(--o-font_size-text);
+  --tabs-nav-text-height: var(--o-line_height-text);
+
+  --tabs-nav-color: var(--o-color-text2);
+  --tabs-nav-color_active: var(--o-color-text1);
+  --tabs-nav-color_disabled: var(--o-color-text4);
+  --tabs-nav-bg: var(--o-color-bg1);
+  --tabs-nav-bg_hover: var(--o-color-bg3);
+  --tabs-nav-bg_disabled: var(--o-color-bg4);
+
+  --tabs-nav-radius: 2px;
+
+  --tabs-icon-color: var(--o-color-text2);
+  --tabs-icon-color_hover: var(--o-color-primary1);
+  --tabs-icon-bg_hover: var(--o-color-bg2);
+}
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index ce56d602f56dc6ad45e1bcdb8387b8a986448da7..d7fea0093013830e8d26ca092f34abb08bddbc12 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -69,6 +69,12 @@ export const routes = [
     label: '多选',
     component: () => import('@demo/checkbox/__demo__/IndexCheckbox.vue'),
   },
+  {
+    path: '/tabs',
+    name: 'Tabs',
+    label: '标签页',
+    component: () => import('@demo/tabs/__demo__/IndexTabs.vue'),
+  },
 ];
 
 export const router = createRouter({