diff --git a/examples/router/routes.js b/examples/router/routes.js
index 6ebbc3c..7e8d7be 100644
--- a/examples/router/routes.js
+++ b/examples/router/routes.js
@@ -60,6 +60,12 @@ const _components = [
         meta: { title: 'NavBar 导航栏' },
         component: () => import('@/views/docs/component/nav-bar.md'),
       },
+      {
+        path: 'tab-bar',
+        name: 'tab-bar',
+        meta: { title: 'TabBar 标签栏' },
+        component: () => import('@/views/docs/component/tab-bar.md'),
+      },
     ]
   },
   {
diff --git a/examples/views/docs/component/tab-bar.md b/examples/views/docs/component/tab-bar.md
new file mode 100644
index 0000000..a6ae7d2
--- /dev/null
+++ b/examples/views/docs/component/tab-bar.md
@@ -0,0 +1,36 @@
+# TabBar 标签栏
+
+说明
+
+## 基础用法
+
+说明
+
+::: snippet 示例
+
+```html
+<template>
+  <div class="tab-bar-demo">
+    <zui-tab-bar :items="items"></zui-tab-bar>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      items: [{ name: 1, label: '标签1' }, { name: 2, label: '标签2' }]
+    }
+  } 
+}
+</script>
+
+<style>
+.tab-bar-demo {
+  background: #eee;
+  padding: 20px;
+}
+</style>
+```
+
+:::
\ No newline at end of file
diff --git a/examples/views/docs/component/tag.md b/examples/views/docs/component/tag.md
index 1ebc7c6..48ab0e6 100644
--- a/examples/views/docs/component/tag.md
+++ b/examples/views/docs/component/tag.md
@@ -22,8 +22,9 @@
       font-color="#fff"
     >续保3折起</zui-tag>
     <zui-tag size="small" shape="circle" sharp="bottom-left" type="fill" fill-color="rgba(231, 64, 33, 1)" font-color="#fff">
-            发布3条
-          </zui-tag>
+      发布3条
+    </zui-tag>
+    <zui-tag size="small" shape="square" font-color="#28AA91" type="ghost">可选</zui-tag>
   </div>
 </template>
 
diff --git a/packages/tabBar/index.css b/packages/tabBar/index.css
new file mode 100644
index 0000000..d6a9896
--- /dev/null
+++ b/packages/tabBar/index.css
@@ -0,0 +1,54 @@
+.zui-tab-bar {
+  position: relative;
+  padding-left: 16px;
+  padding-right: 16px;
+  background-color: #fff;
+}
+.zui-tab-bar-inner {
+  position: relative;
+  width: 100%;
+}
+.zui-tab-bar-list {
+  display: flex;
+  justify-content: space-between;
+  min-width: 100%;
+}
+.zui-tab-bar-item {
+  flex: auto;
+  flex-shrink: 0;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #aaa;
+  font-size: 14px;
+  font-weight: 600;
+  min-height: 50px;
+  padding: 0 16px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  -webkit-user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.zui-tab-bar-item::after {
+  position: absolute;
+  display: block;
+  content: '';
+  border-color: transparent;
+  border-width: 1px;
+  border-style: solid;
+  width: 100%;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.zui-tab-bar-item.is-active {
+  color: #FCD404;
+  font-weight: bold;
+}
+.is-active.zui-tab-bar-item::after {
+  border-color: #FCD404;
+}
+.zui-tab-bar-item.is-disabled {
+  color: #ccc;
+}
diff --git a/packages/tabBar/index.vue b/packages/tabBar/index.vue
new file mode 100644
index 0000000..e66f3eb
--- /dev/null
+++ b/packages/tabBar/index.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="zui-tab-bar">
+    <div class="zui-tab-bar-inner">
+      <div class="zui-tab-bar-list">
+        <div class="zui-tab-bar-item" :class="itemClassRender(item)" v-for="(item, index) in items" :key="item.name" @click="$_onClick(item, index)">
+          <slot name="item" :item="item" :items="items" :index="index" :currentName="currentName">{{ item.label }}</slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TabBar",
+  props: {
+    value: {
+      type: [String, Number],
+      default: ""
+    },
+    items: {
+      type: Array,
+      default: function() {
+        return [];
+      }
+    }
+  },
+  data: function() {
+    return {
+      currentName: ""
+    };
+  },
+  computed: {
+    currentIndex: function() {
+      for (var i = 0, len = this.items.length; i < len; i++) {
+        if (this.items[i].name == this.currentName) {
+          return i;
+        }
+      }
+    },
+    currentTab: function() {
+      if (this.currentIndex) {
+        return this.items[this.currentIndex];
+      }
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler: function(val) {
+        if (val != this.currentName) {
+          this.currentName = val;
+        }
+      }
+    }
+  },
+  created: function() {
+    if (this.currentName == "" && this.items.length) {
+      this.currentName = this.items[0].name;
+      this.$emit("change", this.items[0].name, this.items[0], 0, 0);
+    }
+  },
+  methods: {
+    $_onClick: function(item, index) {
+      if (item.disabled) {
+        return;
+      }
+      this.$emit("change", item.name, item, index, this.currentIndex);
+      this.currentName = item.name;
+      this.$emit("input", item.name);
+    },
+    itemClassRender: function(item) {
+      return {
+        "is-active": this.currentName == item.name,
+        "is-disabled": !!item.disabled
+      };
+    }
+  }
+};
+</script>
+
+<style>
+@import "./index.css";
+</style>
\ No newline at end of file
--
libgit2 0.21.0