diff --git a/demo/documentation/components/tabs/enUS/card.md b/demo/documentation/components/tabs/enUS/card.md
index eb4ff0959..5d6459728 100644
--- a/demo/documentation/components/tabs/enUS/card.md
+++ b/demo/documentation/components/tabs/enUS/card.md
@@ -1,4 +1,5 @@
 # Card
+A example to use with card. (demo is the card)
 ```html
 <n-tabs
   v-model="name"
diff --git a/demo/documentation/components/tabs/enUS/index.md b/demo/documentation/components/tabs/enUS/index.md
index 1e472d1a9..d3ff6253b 100644
--- a/demo/documentation/components/tabs/enUS/index.md
+++ b/demo/documentation/components/tabs/enUS/index.md
@@ -1,6 +1,30 @@
 # Tabs
+Switch contents in same area.
+## Demos
 ```demo
 basic
-card
 flex-label
-```
\ No newline at end of file
+card
+```
+## V-model
+V-model is not exposed now.
+## Props
+### Tabs Props
+|Name|Type|Default|Description|
+|-|-|-|-|
+|type|`'line' \| 'card'`|`'line'`||
+|closable|`boolean`|`false`||
+|justify-content|`'space-between' \| 'space-around' \| 'space-evenly'`|`null`||
+
+### Tab Panel Props
+|Name|Type|Default|Description|
+|-|-|-|-|
+|label|`string`|`null`||
+|name|`string \| number`|`null`|**required**|
+|disabled|`boolean`|`false`||
+
+## Slots
+### Tabs, Tab Panel Slots
+|Name|Parameters|Description|
+|-|-|-|
+|default|`()`||
\ No newline at end of file
diff --git a/demo/documentation/components/tabs/zhCN/basic.md b/demo/documentation/components/tabs/zhCN/basic.md
new file mode 100644
index 000000000..7ce474cc8
--- /dev/null
+++ b/demo/documentation/components/tabs/zhCN/basic.md
@@ -0,0 +1,82 @@
+# 基础用法
+```html
+<n-card title="歌曲" style="margin-bottom: 16px;">
+  <n-tabs
+    v-model="name"
+  >
+    <n-tab-panel
+      name="oasis"
+      label="Oasis"
+    >
+      Wonderwall
+    </n-tab-panel>
+    <n-tab-panel
+      name="the beatles"
+      label="the Beatles"
+    >
+      Hey Jude
+    </n-tab-panel>
+    <n-tab-panel
+      name="jay chou"
+      label="周杰伦"
+    >
+      七里香
+    </n-tab-panel>
+  </n-tabs>
+</n-card>
+<n-card>
+  <n-tabs
+    v-model="func"
+    size="large"
+  >
+    <n-tab-panel
+      name="signin"
+      label="登陆"
+    >
+      <n-form>
+        <n-form-item-row label="用户名">
+          <n-input />
+        </n-form-item-row>
+        <n-form-item-row label="密码">
+          <n-input />
+        </n-form-item-row>
+      </n-form>
+      <n-button type="primary" block>登陆</n-button>
+    </n-tab-panel>
+    <n-tab-panel
+      name="signup"
+      label="注册"
+    >
+      <n-form>
+        <n-form-item-row label="用户名">
+          <n-input />
+        </n-form-item-row>
+        <n-form-item-row label="密码">
+          <n-input />
+        </n-form-item-row>
+        <n-form-item-row label="重复密码">
+          <n-input />
+        </n-form-item-row>
+      </n-form>
+      <n-button type="primary" block>注册</n-button>
+    </n-tab-panel>
+  </n-tabs>
+</n-card>
+```
+
+```js
+export default {
+  data () {
+    return {
+      name: 'oasis',
+      func: 'signin'
+    }
+  }
+}
+```
+
+```css
+.n-button {
+  margin-top: 12px;
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/tabs/zhCN/card.md b/demo/documentation/components/tabs/zhCN/card.md
new file mode 100644
index 000000000..7ede1b952
--- /dev/null
+++ b/demo/documentation/components/tabs/zhCN/card.md
@@ -0,0 +1,48 @@
+# 和卡片一起使用
+一个和卡片一起使用的例子（例子本身是卡片）。
+```html
+<n-tabs
+  v-model="name"
+  type="card"
+  closable
+  @close="handleClose"
+  @scrollable-change="handleScrollableChange"
+  :nav-style="{
+    borderTop: 'none',
+    margin: '0 -24px',
+    padding: `4px ${tabNavScrollable ? 0 : 24}px`
+  }"
+>
+  <n-tab-panel
+    v-for="panel in panels"
+    :key="panel"
+    :label="panel.toString()"
+    :name="panel.toString()"
+  >
+    {{ panel }}
+  </n-tab-panel>
+</n-tabs>
+```
+```js
+export default {
+  data () {
+    return {
+      panels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
+      name: '1',
+      tabNavScrollable: false
+    }
+  },
+  methods: {
+    handleScrollableChange (value) {
+      this.tabNavScrollable = value
+    },
+    handleClose (name) {
+      this.$NMessage.info('Close ' + name)
+      const index = this.panels.findIndex(v => name === v.toString())
+      if (~index) {
+        this.panels.splice(index, 1)
+      }
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/tabs/zhCN/flexLabel.md b/demo/documentation/components/tabs/zhCN/flexLabel.md
new file mode 100644
index 000000000..a8654d0c3
--- /dev/null
+++ b/demo/documentation/components/tabs/zhCN/flexLabel.md
@@ -0,0 +1,83 @@
+# Flex 布局的标签
+```html
+<n-card title="歌曲" style="margin-bottom: 16px;">
+  <n-tabs
+    v-model="name"
+    justify-content="space-evenly"
+  >
+    <n-tab-panel
+      name="oasis"
+      label="Oasis"
+    >
+      Wonderwall
+    </n-tab-panel>
+    <n-tab-panel
+      name="the beatles"
+      label="the Beatles"
+    >
+      Hey Jude
+    </n-tab-panel>
+    <n-tab-panel
+      name="jay chou"
+      label="周杰伦"
+    >
+      七里香
+    </n-tab-panel>
+  </n-tabs>
+</n-card>
+<n-card title="Too Simple">
+  <n-tabs
+    v-model="func"
+    size="large"
+  >
+    <n-tab-panel
+      name="signin"
+      label="登陆"
+    >
+      <n-form>
+        <n-form-item-row label="用户名">
+          <n-input />
+        </n-form-item-row>
+        <n-form-item-row label="密码">
+          <n-input />
+        </n-form-item-row>
+      </n-form>
+      <n-button type="primary" block>登陆</n-button>
+    </n-tab-panel>
+    <n-tab-panel
+      name="signup"
+      label="注册"
+    >
+      <n-form>
+        <n-form-item-row label="用户名">
+          <n-input />
+        </n-form-item-row>
+        <n-form-item-row label="密码">
+          <n-input />
+        </n-form-item-row>
+        <n-form-item-row label="重复密码">
+          <n-input />
+        </n-form-item-row>
+      </n-form>
+      <n-button type="primary" block>注册</n-button>
+    </n-tab-panel>
+  </n-tabs>
+</n-card>
+```
+
+```js
+export default {
+  data () {
+    return {
+      name: 'oasis',
+      func: 'signin'
+    }
+  }
+}
+```
+
+```css
+.n-button {
+  margin-top: 12px;
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/tabs/zhCN/index.md b/demo/documentation/components/tabs/zhCN/index.md
index e69de29bb..6f4d513ab 100644
--- a/demo/documentation/components/tabs/zhCN/index.md
+++ b/demo/documentation/components/tabs/zhCN/index.md
@@ -0,0 +1,31 @@
+# 标签页 Tabs
+在同一块区域切换内容。
+## 演示
+```demo
+basic
+flex-label
+card
+```
+## V-model
+V-model 暂时不对外暴露，名字没起好。
+
+## Props
+### Tabs Props
+|名称|类型|默认值|介绍|
+|-|-|-|-|
+|type|`'line' \| 'card'`|`'line'`||
+|closable|`boolean`|`false`||
+|justify-content|`'space-between' \| 'space-around' \| 'space-evenly'`|`null`||
+
+### Tab Panel Props
+|名称|类型|默认值|介绍|
+|-|-|-|-|
+|label|`string`|`null`||
+|name|`string \| number`|`null`|**required**|
+|disabled|`boolean`|`false`||
+
+## Slots
+### Tabs, Tab Panel Slots
+|名称|类型|介绍|
+|-|-|-|
+|default|`()`||
\ No newline at end of file
diff --git a/demo/header.vue b/demo/header.vue
index b0d76fa70..5e7f15266 100644
--- a/demo/header.vue
+++ b/demo/header.vue
@@ -2,11 +2,13 @@
 {
   "zh-CN": {
     "dark": "深色",
-    "light": "浅色"
+    "light": "浅色",
+    "searchPlaceholder": "搜索组件"
   },
   "en-US": {
     "dark": "Dark",
-    "light": "Light"
+    "light": "Light",
+    "searchPlaceholder": "Search Components"
   }
 }
 </i18n>
@@ -20,7 +22,7 @@
     <div style="width: 200px; margin-left: 48px;">
       <n-auto-complete
         v-model="searchInputValue"
-        placeholder="Search in Naive UI"
+        :placeholder="$t('searchPlaceholder')"
         :options="searchOptions"
         clear-after-select
         blur-after-select
diff --git a/packages/common/Tabs/src/TabPanel.vue b/packages/common/Tabs/src/TabPanel.vue
index 05be27573..dd2d82171 100644
--- a/packages/common/Tabs/src/TabPanel.vue
+++ b/packages/common/Tabs/src/TabPanel.vue
@@ -16,20 +16,12 @@ export default {
       default: undefined
     },
     name: {
-      type: String,
-      default: null
-    },
-    active: {
-      type: Boolean,
-      default: false
+      type: [String, Number],
+      required: true
     },
     disabled: {
       type: Boolean,
       default: false
-    },
-    closable: {
-      type: Boolean,
-      default: false
     }
   },
   data () {
@@ -40,26 +32,7 @@ export default {
     type () {
       return this.NTab.type
     }
-    // offset () {
-    //   return this.NTab.offset
-    // }
   },
-  watch: {
-    // offset: {
-    //   handler (n) {
-    //     this.setTransfer(n)
-    //     this.$forceUpdate()
-    //   },
-    //   immediate: true
-    // }
-  },
-  // created () {
-  //   this.NTab.updateLabels()
-  //   if (this._NaiveTabOrder === this.NTab.active) {
-  //     this.updateIsShow(true)
-  //   }
-  //   this.$on('display-none', this.setDisplayNone)
-  // },
   mounted () {
     if (this.NTab) {
       console.log(this.NTab.value)
@@ -71,15 +44,5 @@ export default {
       this.NTab.removePanel(this)
     }
   }
-  // methods: {
-  //   updateIsShow (flag) {
-  //     this.isShow = flag
-  //     this.$forceUpdate()
-  //   },
-  //   setTransfer (per) {
-  //     // 这里可以优化, 直接在上层div做整体移动, 不需要对子元素移动
-  //     this.style.transform = 'translateX(' + per + ')'
-  //   }
-  // }
 }
 </script>
diff --git a/packages/common/Tabs/src/Tabs.vue b/packages/common/Tabs/src/Tabs.vue
index 878babbc1..834a6a445 100644
--- a/packages/common/Tabs/src/Tabs.vue
+++ b/packages/common/Tabs/src/Tabs.vue
@@ -127,10 +127,6 @@ export default {
       },
       default: null
     },
-    bodered: {
-      type: Boolean,
-      default: false
-    },
     size: {
       type: String,
       default: 'medium'
diff --git a/think.md b/think.md
index 3288be930..2ee0891b8 100644
--- a/think.md
+++ b/think.md
@@ -126,6 +126,7 @@ anchor 还是有点问题 bound 不够的时候切换
 modal transform scale
 form async validation
 table filter
+tabs 尺寸变化
 
 // pref hollowout, cache next bg color
 // issue fix, add delay prop