diff --git a/README.md b/README.md
index 146094052..1f7abe7cd 100644
--- a/README.md
+++ b/README.md
@@ -1,156 +1,9 @@
-# naive-ui
-TuSimple Vue-Based Frontend Component Library
+<p align="center">
+  <img width="144px" src="https://naiveui.oss-cn-hongkong.aliyuncs.com/Naive%20UI%20-%20LOGO.svg" />
+</p>
+
+<h1 align="center">Naive UI</h1>
+<p align="center">A style first Vue-based component library.</p>
+
 ## Documentation
-[http://***REMOVED***/#/start](http://***REMOVED***/#/start)
-## Repository
-[https://***REMOVED***/naive-ui/tree/develop](https://***REMOVED***/naive-ui/tree/develop)
-## Develop Guidelines
-### Git Commit Message Style
-You **MUST** follow [Angular Commit Format](https://gist.github.com/brianclements/841ea7bffdb01346392c).
-
-If you want see some example, see [Angular Commits on Github](https://github.com/angular/angular/commits/master).
-### Code Styles
-#### Javascript Style
-You **MUST** follow [Standard JS](https://standardjs.com/).
-#### SCSS Style
-Run `npm run lint-style` to check styles.
-#### Check Both
-Run `npm run lint`
-You **MUST** fix all lint warnings and errors before you push your branch.
-### Unit test
-If you create a component, you **MUST** add unit test for it.
-
-Run `npm run test` to test all components.
-Run `npm run test-cov` to test all components and see detailed test coverage report.
-
-## Want to see how component works
-1. Run `npm run dev`
-2. Open `http://localhost:8086/` in browser.
-
-## Want to add your own component
-There is no guideline for now. If you want to know how to do it, you can explore by yourself or ask `lecong.zhang@tusimple.ai`.
-
-## Publish a new version
-1. You **MUST** change your version according to [semver](https://semver.org/)
-2. `npm run release`
-3. You **MAY** publish documentation by running `npm run release-doc`
-
-## Installation & Usage
-First install it.
-
-```bash
-npm install --save-dev naive-ui
-```
-Then add the following lines in you entry point js file.
-```js
-import naiveUi from 'naive-ui'
-import 'naive-ui/dist/lib/index.css'
-
-Vue.use(naiveUi)
-```
-## Component Develop Status
-|Component|Develop status|Unit Test|Note|
-|--|:--:|:--:|--|
-|Alert|😍|❌||
-|Button|😍|🆗||
-|Checkbox|😍|🆗||
-|DatePicker|😍|❌||
-|TimePicker|😍|❌||
-|GradientText|😍|🆗||
-|Icon|😍|🆗||
-|Input|😍|🆗||
-|Message|😍|❌|Code clean in need|
-|Modal|😍|❌|Code clean in need|
-|Notification|😍|❌|Code clean in need|
-|Pagination|😍|🆗|Unit test is not enough|
-|Select|😍|🆗|Multiple search is not done|
-|Switch|😍|❌||
-|Tooltip|😍|❌||
-|Popover|😍|❌||
-|InputNumber|😍|❌||
-|Radio|😍|||
-|Tab|😍|||
-|Badge|😍|||
-|Steps|😍|||
-|Tag|😍|||
-|Divider|😍|||
-|Popconfirm|😍|||
-|BackTop|😍|||
-|Progress|😍||Multiple Value|
-|Timeline|😍|||
-|Collapse|😍|||
-|Cascader|😍|||
-|Dropdown|😍|||
-|Transfer|😍|||
-|Spin|😍|||
-|Drawer|🤔|||
-|FormItem|🤔|❌||
-|Form|🤔|❌||
-|Table|🤔|❌|Function is not fulfilled|
-|Slider|🤔|||
-|LoadingBar|😍|||
-|AutoComplete|🚧|||
-|Tree|🤔|||
-|TreeSelect|🚧|||
-|Upload|🚧|||
-|Time|🚧|||
-|Anchor|🚧|||
-|Statistic|🚧|||
-|Breadcrumb|🚧|||
-|Card|🚧|||
-|Empty|🚧|||
-|Grid|🚧|||
-|Layout|🚧|||
-|Affix|🚧|||
-|Rating|🚧|||
-|Avator|🚧|||
-|Result|🚧|||
-|Menu|✋||Not Planned|
-|Typography|✋||Not Planned|
-|Mentions|✋||Not Planned|
-|Calendar|✋||Not Planned|
-|Carousel|✋||Not Planned|
-
-1. Z-index management on `Select` & `Tooltip` & `Modal`(Low Priority)
-2. Full featured table component(Medium Priority)
-3. Form component(Medium Priority)
-4. FormItem component(High Priority)
-5. Complete unit test for all existing components(High Priority)
-6. Create a Markdown webpack loader to convert documentation(Low Priority)
-7. Refactor documentation page(for code clairity)
-8. Code refactor for some 😢  messy code(which is my bad...)
-9. Refactor CSS use mixins(which means I should learn SCSS hard...)
-
-## RoadMap
-v0.3 cascader
-
-v0.4 refactor popover
-
-v0.5 finish all planned components
-
-v0.6 add keyboard event on planned components
-
-v0.7 refactor form component
-
-v0.8 refactor table component
-
-v0.9 fulfill props for all components
-
-v0.10 split icons for components
-
-v0.11 refactor css
-
-v0.12 import on demand
-
-v0.13 i18n
-
-v0.14 unit test
-
-v0.15 light theme
-
-v0.16 refactor using proper html tags
-
-v0.17 document formation
-
-v0.18 refactor document page
-
+[www.naiveui.com](www.naiveui.com)
diff --git a/build/webpack.dev.js b/build/webpack.dev.js
index f3287f973..778b2c0b8 100644
--- a/build/webpack.dev.js
+++ b/build/webpack.dev.js
@@ -41,7 +41,7 @@ const webpackConfig = {
     new webpack.HotModuleReplacementPlugin(),
     new HtmlWebpackPlugin({
       template: './demo/index.tpl',
-      filename: './index.html'
+      favicon: './demo/assets/images/naivelogo.png'
     }),
     new VueLoaderPlugin(),
     new webpack.LoaderOptionsPlugin({
diff --git a/build/webpack.doc.js b/build/webpack.doc.js
index e6ba7fbfa..2f294ec0a 100644
--- a/build/webpack.doc.js
+++ b/build/webpack.doc.js
@@ -34,7 +34,7 @@ const webpackConfig = {
   plugins: [
     new HtmlWebpackPlugin({
       template: './demo/index.tpl',
-      filename: './index.html'
+      favicon: './demo/assets/images/naivelogo.png'
     }),
     new VueLoaderPlugin(),
     new webpack.LoaderOptionsPlugin({
diff --git a/build/webpack.private-doc.js b/build/webpack.private-doc.js
index c21ae1f05..320278335 100644
--- a/build/webpack.private-doc.js
+++ b/build/webpack.private-doc.js
@@ -7,9 +7,10 @@ const config = require('./config')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
 const webpackConfig = {
-  mode: 'development',
+  mode: 'production',
   entry: './demo/privateIndex.js',
   output: {
     path: path.resolve(__dirname, '..', 'doc', 'dist'),
@@ -34,7 +35,7 @@ const webpackConfig = {
   plugins: [
     new HtmlWebpackPlugin({
       template: './demo/index.tpl',
-      filename: './index.html'
+      favicon: './demo/assets/images/naivelogo.png'
     }),
     new VueLoaderPlugin(),
     new webpack.LoaderOptionsPlugin({
@@ -44,7 +45,8 @@ const webpackConfig = {
         }
       }
     }),
-    new ExtractTextPlugin('[name].[hash:7].css')
+    new ExtractTextPlugin('[name].[hash:7].css'),
+    new BundleAnalyzerPlugin()
   ]
 }
 
diff --git a/build/webpack.release.js b/build/webpack.release.js
index 24638048f..6875227a8 100644
--- a/build/webpack.release.js
+++ b/build/webpack.release.js
@@ -63,10 +63,9 @@ const webpackConfig = {
     ]
   },
   plugins: [
-    new webpack.HotModuleReplacementPlugin(),
     new HtmlWebpackPlugin({
       template: './demo/index.tpl',
-      filename: './index.html'
+      favicon: './demo/assets/images/naivelogo.png'
     }),
     new VueLoaderPlugin(),
     new webpack.LoaderOptionsPlugin({
diff --git a/demo/SourceBlock.vue b/demo/SourceBlock.vue
index 75207405a..8183098ee 100644
--- a/demo/SourceBlock.vue
+++ b/demo/SourceBlock.vue
@@ -1,14 +1,13 @@
 <template>
   <div style="overflow: hidden;">
-    <div
+    <!-- <div
       style="width: 100%; box-sizing: border-box; border-radius: 8px; border: 2px solid #5c657eff; height: 39px; background-color: black; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer;"
       @click="collapse = !collapse"
     >
       <span v-if="collapse">Click to Expand</span>
       <span v-else>Click to Collapse</span>
-    </div>
+    </div> -->
     <div
-      v-if="!collapse"
       ref="source"
       class="n-doc-section__source"
     >
@@ -18,7 +17,6 @@
 </template>
 
 <script>
-import CodeMirror from 'codemirror'
 
 export default {
   name: 'NDocSourceBlock',
@@ -27,18 +25,14 @@ export default {
       collapse: true
     }
   },
-  watch: {
-    collapse (newValue) {
-      if (!newValue) {
-        this.$nextTick().then(() => {
-          CodeMirror.fromTextArea(this.$refs.source.querySelector('textarea'), {
-            lineNumbers: false,
-            mode: 'htmlmixed',
-            theme: 'vibrant-ink'
-          })
-        })
-      }
-    }
+  mounted () {
+    this.$nextTick().then(() => {
+      Array.from(this.$refs.source.querySelector('textarea')).forEach(ta => {
+        console.log('ta', ta)
+        const rows = ta.value.split('\n').length
+        ta.setAttribute('rows', rows)
+      })
+    })
   }
 }
 </script>
diff --git a/demo/assets/images/naivelogo.png b/demo/assets/images/naivelogo.png
new file mode 100644
index 000000000..735ecfcc4
Binary files /dev/null and b/demo/assets/images/naivelogo.png differ
diff --git a/demo/demo.vue b/demo/demo.vue
index bcf8b4166..cff7b81e0 100644
--- a/demo/demo.vue
+++ b/demo/demo.vue
@@ -233,10 +233,6 @@ export default {
               name: 'Tabs',
               path: `/${this.lang}/${this.theme}` + '/n-tabs'
             },
-            {
-              name: 'Table',
-              path: `/${this.lang}/${this.theme}` + '/n-table'
-            },
             {
               name: 'Tag',
               path: `/${this.lang}/${this.theme}` + '/n-tag'
@@ -371,18 +367,6 @@ body {
   -webkit-text-size-adjust: 100%;
 }
 
-.CodeMirror {
-  border: 2px solid #5c657eff;
-  height: auto !important;
-  z-index: 0;
-  border-radius: 8px;
-  padding: 8px;
-  margin-bottom: 18px;
-}
-.CodeMirror-scroll {
-  overflow-y: hidden !important;
-  overflow-x: auto !important;
-}
 .n-doc {
   width: 720px;
   margin: 0 auto;
diff --git a/demo/documentation/components/datePicker/enUS/datetime.md b/demo/documentation/components/datePicker/enUS/datetime.md
index 2e53de563..fc9f814a5 100644
--- a/demo/documentation/components/datePicker/enUS/datetime.md
+++ b/demo/documentation/components/datePicker/enUS/datetime.md
@@ -1,4 +1,4 @@
-# Date
+# Datetime
 ```html
 <n-date-picker
   v-model="timestamp"
diff --git a/demo/documentation/components/docCodeEditorMixin.js b/demo/documentation/components/docCodeEditorMixin.js
index 6b7f8afda..1f5942319 100644
--- a/demo/documentation/components/docCodeEditorMixin.js
+++ b/demo/documentation/components/docCodeEditorMixin.js
@@ -1,7 +1,3 @@
-import CodeMirror from 'codemirror'
-import 'codemirror/mode/htmlmixed/htmlmixed'
-import 'codemirror/theme/vibrant-ink.css'
-
 export default {
   mounted () {
     const textAreaNotToRender = new Set(this.$refs.doc.querySelectorAll('.not-code textarea'))
@@ -9,11 +5,9 @@ export default {
       if (textAreaNotToRender.has(ta)) {
         return
       }
-      CodeMirror.fromTextArea(ta, {
-        lineNumbers: false,
-        mode: 'htmlmixed',
-        theme: 'vibrant-ink'
-      })
+      const rows = ta.value.split('\n').length
+      ta.style.width = '100%'
+      ta.setAttribute('rows', rows)
     })
   }
 }
diff --git a/demo/documentation/components/drawer/enUS/basic.md b/demo/documentation/components/drawer/enUS/basic.md
new file mode 100644
index 000000000..38d460706
--- /dev/null
+++ b/demo/documentation/components/drawer/enUS/basic.md
@@ -0,0 +1,18 @@
+# Basic
+```html
+<n-button @click="active = !active">
+  active
+</n-button>
+<n-drawer v-model="active">
+  777
+</n-drawer>
+```
+```js
+export default {
+  data () {
+    return {
+      active: false
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/drawer/enUS/index.md b/demo/documentation/components/drawer/enUS/index.md
new file mode 100644
index 000000000..e716ae1f2
--- /dev/null
+++ b/demo/documentation/components/drawer/enUS/index.md
@@ -0,0 +1,4 @@
+# Drawer
+```demo
+basic
+```
\ No newline at end of file
diff --git a/demo/documentation/components/drawer/index.entry b/demo/documentation/components/drawer/index.entry
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/drawer/zhCN/index.md b/demo/documentation/components/drawer/zhCN/index.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/drawerDemo/index.vue b/demo/documentation/components/drawerDemo/index.vue
deleted file mode 100644
index aeb426a9f..000000000
--- a/demo/documentation/components/drawerDemo/index.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div
-    ref="doc"
-    class="n-doc"
-  >
-    <div class="n-doc-header">
-      <n-gradient-text :font-size="20">
-        Drawer
-      </n-gradient-text>
-    </div>
-    <div class="n-doc-body">
-      <scaffold />
-    </div>
-  </div>
-</template>
-
-<script>
-import scaffold from './scaffold.demo.vue'
-
-export default {
-  components: {
-    scaffold
-  },
-  data () {
-    return {
-
-    }
-  },
-  methods: {
-  }
-}
-</script>
diff --git a/demo/documentation/components/drawerDemo/scaffold.demo.vue b/demo/documentation/components/drawerDemo/scaffold.demo.vue
deleted file mode 100644
index 84493d483..000000000
--- a/demo/documentation/components/drawerDemo/scaffold.demo.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Basic Usage
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-button @click="active = !active">
-        active
-      </n-button>
-      <n-drawer v-model="active">
-        777
-      </n-drawer>
-      <!--EXAMPLE_END-->
-    </div>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      active: false
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/dropdown/enUS/basic.md b/demo/documentation/components/dropdown/enUS/basic.md
new file mode 100644
index 000000000..53ae9aa07
--- /dev/null
+++ b/demo/documentation/components/dropdown/enUS/basic.md
@@ -0,0 +1,29 @@
+# Basic
+```html
+<n-dropdown>
+  <template v-slot:activator>
+    <div>menu</div>
+  </template>
+  <n-dropdown-item
+    v-for="item in items"
+    :key="item"
+    @click="handleClick(item)"
+  >
+    {{ item }}
+  </n-dropdown-item>
+</n-dropdown>
+```
+```js
+export default {
+  data () {
+    return {
+      items: ['item1longlonglong', 'item2longlonglong', 'item3longlonglong', 'item4longlonglong']
+    }
+  },
+  methods: {
+    handleClick (item) {
+      this.$NMessage.info(item)
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/dropdown/enUS/cascade.md b/demo/documentation/components/dropdown/enUS/cascade.md
new file mode 100644
index 000000000..2dcb16b21
--- /dev/null
+++ b/demo/documentation/components/dropdown/enUS/cascade.md
@@ -0,0 +1,50 @@
+# Cascade
+```html
+<n-dropdown
+  placement="bottom-start"
+  trigger="hover"
+>
+  <template v-slot:activator>
+    <div>menu</div>
+  </template>
+  <n-dropdown-item>
+    item1
+  </n-dropdown-item>
+  <n-dropdown-item>
+    item2
+  </n-dropdown-item>
+  <n-dropdown-item>
+    item3
+  </n-dropdown-item>
+  <n-dropdown-submenu>
+    <template v-slot:activator>
+      <n-dropdown-item
+        arrow
+      >
+        submenu
+      </n-dropdown-item>
+    </template>
+    <n-dropdown-item>
+      item4
+    </n-dropdown-item>
+    <n-dropdown-item>
+      item5
+    </n-dropdown-item>
+    <n-dropdown-submenu>
+      <template v-slot:activator>
+        <n-dropdown-item
+          arrow
+        >
+          submenu2
+        </n-dropdown-item>
+      </template>
+      <n-dropdown-item>
+        item6
+      </n-dropdown-item>
+      <n-dropdown-item>
+        item7
+      </n-dropdown-item>
+    </n-dropdown-submenu>
+  </n-dropdown-submenu>
+</n-dropdown>
+```
\ No newline at end of file
diff --git a/demo/documentation/components/dropdown/enUS/index.md b/demo/documentation/components/dropdown/enUS/index.md
new file mode 100644
index 000000000..01e5e17af
--- /dev/null
+++ b/demo/documentation/components/dropdown/enUS/index.md
@@ -0,0 +1,7 @@
+# Dropdown
+```demo
+basic
+trigger
+placement
+cascade
+```
\ No newline at end of file
diff --git a/demo/documentation/components/dropdown/enUS/placement.md b/demo/documentation/components/dropdown/enUS/placement.md
new file mode 100644
index 000000000..b9cd21122
--- /dev/null
+++ b/demo/documentation/components/dropdown/enUS/placement.md
@@ -0,0 +1,29 @@
+# Placement
+```html
+<n-dropdown placement="bottom-start">
+  <template v-slot:activator>
+    <div>menu</div>
+  </template>
+  <n-dropdown-item
+    v-for="item in items"
+    :key="item"
+    @click="handleClick(item)"
+  >
+    {{ item }}
+  </n-dropdown-item>
+</n-dropdown>
+```
+```js
+export default {
+  data () {
+    return {
+      items: ['item1longlonglong', 'item2longlonglong', 'item3longlonglong', 'item4longlonglong']
+    }
+  },
+  methods: {
+    handleClick (item) {
+      this.$NMessage.info(item)
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/dropdown/enUS/trigger.md b/demo/documentation/components/dropdown/enUS/trigger.md
new file mode 100644
index 000000000..29f6a2668
--- /dev/null
+++ b/demo/documentation/components/dropdown/enUS/trigger.md
@@ -0,0 +1,44 @@
+# Trigger
+```html
+<n-dropdown
+  trigger="hover"
+  style="margin-right: 16px;"
+>
+  <template v-slot:activator>
+    <div>Trigger: hover</div>
+  </template>
+  <n-dropdown-item
+    v-for="item in items"
+    :key="item"
+    @click="handleClick(item)"
+  >
+    {{ item }}
+  </n-dropdown-item>
+</n-dropdown>
+<n-dropdown trigger="click">
+  <template v-slot:activator>
+    <div>Trigger: click</div>
+  </template>
+  <n-dropdown-item
+    v-for="item in items"
+    :key="item"
+    @click="handleClick(item)"
+  >
+    {{ item }}
+  </n-dropdown-item>
+</n-dropdown>
+```
+```js
+export default {
+  data () {
+    return {
+      items: ['item1longlonglong', 'item2longlonglong', 'item3longlonglong', 'item4longlonglong']
+    }
+  },
+  methods: {
+    handleClick (item) {
+      this.$NMessage.info(item)
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/dropdown/index.entry b/demo/documentation/components/dropdown/index.entry
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/dropdown/zhCN/index.md b/demo/documentation/components/dropdown/zhCN/index.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/dropdownDemo/basicUsage.demo.vue b/demo/documentation/components/dropdownDemo/basicUsage.demo.vue
deleted file mode 100644
index 03d03b9c1..000000000
--- a/demo/documentation/components/dropdownDemo/basicUsage.demo.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Basic Usage
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-dropdown>
-        <template v-slot:activator>
-          <div>menu</div>
-        </template>
-        <n-dropdown-item
-          v-for="item in items"
-          :key="item"
-          @click="handleClick(item)"
-        >
-          {{ item }}
-        </n-dropdown-item>
-      </n-dropdown>
-      <!--EXAMPLE_END-->
-    </div>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      items: ['item1longlonglong', 'item2longlonglong', 'item3longlonglong', 'item4longlonglong']
-    }
-  },
-  methods: {
-    handleClick (item) {
-      this.$NMessage.info(item)
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/dropdownDemo/cascade.demo.vue b/demo/documentation/components/dropdownDemo/cascade.demo.vue
deleted file mode 100644
index 8211daa76..000000000
--- a/demo/documentation/components/dropdownDemo/cascade.demo.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Cascade
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-dropdown
-        placement="bottom-start"
-        trigger="hover"
-      >
-        <template v-slot:activator>
-          <div>menu</div>
-        </template>
-        <n-dropdown-item>
-          item1
-        </n-dropdown-item>
-        <n-dropdown-item>
-          item2
-        </n-dropdown-item>
-        <n-dropdown-item>
-          item3
-        </n-dropdown-item>
-        <n-dropdown-submenu>
-          <template v-slot:activator>
-            <n-dropdown-item
-              arrow
-            >
-              submenu
-            </n-dropdown-item>
-          </template>
-          <n-dropdown-item>
-            item4
-          </n-dropdown-item>
-          <n-dropdown-item>
-            item5
-          </n-dropdown-item>
-          <n-dropdown-submenu>
-            <template v-slot:activator>
-              <n-dropdown-item
-                arrow
-              >
-                submenu2
-              </n-dropdown-item>
-            </template>
-            <n-dropdown-item>
-              item6
-            </n-dropdown-item>
-            <n-dropdown-item>
-              item7
-            </n-dropdown-item>
-          </n-dropdown-submenu>
-        </n-dropdown-submenu>
-      </n-dropdown>
-      <!--EXAMPLE_END-->
-    </div>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/dropdownDemo/index.vue b/demo/documentation/components/dropdownDemo/index.vue
deleted file mode 100644
index a5d3d2623..000000000
--- a/demo/documentation/components/dropdownDemo/index.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <div
-    ref="doc"
-    class="n-doc"
-  >
-    <div class="n-doc-header">
-      <n-gradient-text :font-size="20">
-        Dropdown / n-dropdown
-      </n-gradient-text>
-    </div>
-    <div class="n-doc-body">
-      <basic-usage />
-      <trigger />
-      <placement />
-      <cascade />
-    </div>
-  </div>
-</template>
-
-<script>
-import basicUsage from './basicUsage.demo'
-import cascade from './cascade.demo.vue'
-import placement from './placement.demo.vue'
-import trigger from './trigger.demo.vue'
-
-export default {
-  components: {
-    cascade,
-    basicUsage,
-    placement,
-    trigger
-  },
-  data () {
-    return {
-
-    }
-  },
-  methods: {
-  }
-}
-</script>
diff --git a/demo/documentation/components/dropdownDemo/placement.demo.vue b/demo/documentation/components/dropdownDemo/placement.demo.vue
deleted file mode 100644
index fcde54b29..000000000
--- a/demo/documentation/components/dropdownDemo/placement.demo.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Placement
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-dropdown placement="bottom-start">
-        <template v-slot:activator>
-          <div>menu</div>
-        </template>
-        <n-dropdown-item
-          v-for="item in items"
-          :key="item"
-          @click="handleClick(item)"
-        >
-          {{ item }}
-        </n-dropdown-item>
-      </n-dropdown>
-      <!--EXAMPLE_END-->
-    </div>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      items: ['item1longlonglong', 'item2longlonglong', 'item3longlonglong', 'item4longlonglong']
-    }
-  },
-  methods: {
-    handleClick (item) {
-      this.$NMessage.info(item)
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/dropdownDemo/trigger.demo.vue b/demo/documentation/components/dropdownDemo/trigger.demo.vue
deleted file mode 100644
index 776f96079..000000000
--- a/demo/documentation/components/dropdownDemo/trigger.demo.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Basic Usage
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-dropdown
-        trigger="hover"
-        style="margin-right: 16px;"
-      >
-        <template v-slot:activator>
-          <div>Trigger: hover</div>
-        </template>
-        <n-dropdown-item
-          v-for="item in items"
-          :key="item"
-          @click="handleClick(item)"
-        >
-          {{ item }}
-        </n-dropdown-item>
-      </n-dropdown>
-      <n-dropdown trigger="click">
-        <template v-slot:activator>
-          <div>Trigger: click</div>
-        </template>
-        <n-dropdown-item
-          v-for="item in items"
-          :key="item"
-          @click="handleClick(item)"
-        >
-          {{ item }}
-        </n-dropdown-item>
-      </n-dropdown>
-      <!--EXAMPLE_END-->
-    </div>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      items: ['item1longlonglong', 'item2longlonglong', 'item3longlonglong', 'item4longlonglong']
-    }
-  },
-  methods: {
-    handleClick (item) {
-      this.$NMessage.info(item)
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/inputNumber/enUS/basic.md b/demo/documentation/components/inputNumber/enUS/basic.md
new file mode 100644
index 000000000..af6f42801
--- /dev/null
+++ b/demo/documentation/components/inputNumber/enUS/basic.md
@@ -0,0 +1,15 @@
+# Basic
+```html
+<n-input-number
+  v-model="value"
+/>
+```
+```js
+export default {
+  data () {
+    return {
+      value: 0
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/inputNumber/enUS/disabled.md b/demo/documentation/components/inputNumber/enUS/disabled.md
new file mode 100644
index 000000000..163165e6b
--- /dev/null
+++ b/demo/documentation/components/inputNumber/enUS/disabled.md
@@ -0,0 +1,16 @@
+# Disabled
+```html
+<n-input-number
+  disabled
+  v-model="value"
+/>
+```
+```js
+export default {
+  data () {
+    return {
+      value: 0
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/inputNumber/enUS/event.md b/demo/documentation/components/inputNumber/enUS/event.md
new file mode 100644
index 000000000..3c4b367c8
--- /dev/null
+++ b/demo/documentation/components/inputNumber/enUS/event.md
@@ -0,0 +1,21 @@
+# Event
+```html
+<n-input-number
+  v-model="value"
+  @change="handleChange"
+/>
+```
+```js
+export default {
+  data () {
+    return {
+      value: 0
+    }
+  },
+  methods: {
+    handleChange (newValue) {
+      this.$NMessage.info(`value: ${newValue}`)
+    }
+  }
+}
+```
diff --git a/demo/documentation/components/inputNumber/enUS/index.md b/demo/documentation/components/inputNumber/enUS/index.md
new file mode 100644
index 000000000..8364055c9
--- /dev/null
+++ b/demo/documentation/components/inputNumber/enUS/index.md
@@ -0,0 +1,9 @@
+# Input Number
+```demo
+basic
+disabled
+event
+min-max
+size
+step
+```
\ No newline at end of file
diff --git a/demo/documentation/components/inputNumber/enUS/minMax.md b/demo/documentation/components/inputNumber/enUS/minMax.md
new file mode 100644
index 000000000..d638ec69d
--- /dev/null
+++ b/demo/documentation/components/inputNumber/enUS/minMax.md
@@ -0,0 +1,22 @@
+# Min and Max
+```html
+<n-input-number
+  v-model="value"
+  :min="-3"
+  :max="5"
+/>
+<n-input-number
+  v-model="value"
+  :min="-5"
+  :max="3"
+/>
+```
+```js
+export default {
+  data () {
+    return {
+      value: 0
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/inputNumber/enUS/size.md b/demo/documentation/components/inputNumber/enUS/size.md
new file mode 100644
index 000000000..b2923658f
--- /dev/null
+++ b/demo/documentation/components/inputNumber/enUS/size.md
@@ -0,0 +1,24 @@
+# Size
+```html
+<n-input-number
+  v-model="value"
+  size="small"
+/>
+<n-input-number
+  v-model="value"
+  size="medium"
+/>
+<n-input-number
+  v-model="value"
+  size="large"
+/>
+```
+```js
+export default {
+  data () {
+    return {
+      value: 0
+    }
+  }
+}
+```
diff --git a/demo/documentation/components/inputNumber/enUS/step.md b/demo/documentation/components/inputNumber/enUS/step.md
new file mode 100644
index 000000000..d79835d9d
--- /dev/null
+++ b/demo/documentation/components/inputNumber/enUS/step.md
@@ -0,0 +1,16 @@
+# Step
+```html
+<n-input-number
+  v-model="value"
+  :step="2"
+/>
+```
+```js
+export default {
+  data () {
+    return {
+      value: 0
+    }
+  }
+}
+```
diff --git a/demo/documentation/components/inputNumber/index.entry b/demo/documentation/components/inputNumber/index.entry
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/inputNumber/zhCN/index.md b/demo/documentation/components/inputNumber/zhCN/index.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/inputNumberDemo/basicUsage.demo.vue b/demo/documentation/components/inputNumberDemo/basicUsage.demo.vue
deleted file mode 100644
index 1ba7097ef..000000000
--- a/demo/documentation/components/inputNumberDemo/basicUsage.demo.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Basic Usage
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-input-number
-        v-model="value"
-      />
-      <!--EXAMPLE_END-->
-    </div>
-    <pre class="n-doc-section__inspect">value: {{ JSON.stringify(value) }}</pre>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      value: 0
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/inputNumberDemo/disabled.demo.vue b/demo/documentation/components/inputNumberDemo/disabled.demo.vue
deleted file mode 100644
index 339a4c475..000000000
--- a/demo/documentation/components/inputNumberDemo/disabled.demo.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Disabled
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-input-number
-        v-model="value"
-        disabled
-      />
-      <!--EXAMPLE_END-->
-    </div>
-    <pre class="n-doc-section__inspect">value: {{ JSON.stringify(value) }}</pre>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      value: 3
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/inputNumberDemo/event.demo.vue b/demo/documentation/components/inputNumberDemo/event.demo.vue
deleted file mode 100644
index 2449afa00..000000000
--- a/demo/documentation/components/inputNumberDemo/event.demo.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Event
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-input-number
-        v-model="value"
-        @change="handleChange"
-      />
-      <!--EXAMPLE_END-->
-    </div>
-    <pre class="n-doc-section__inspect">value: {{ JSON.stringify(value) }}</pre>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      value: 0
-    }
-  },
-  methods: {
-    handleChange (newValue) {
-      this.$NMessage.info(`value: ${newValue}`)
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/inputNumberDemo/index.vue b/demo/documentation/components/inputNumberDemo/index.vue
deleted file mode 100644
index cb38e32b9..000000000
--- a/demo/documentation/components/inputNumberDemo/index.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <div
-    ref="doc"
-    class="n-doc"
-  >
-    <div class="n-doc-header">
-      <n-gradient-text :font-size="20">
-        InputNumber / n-input-number
-      </n-gradient-text>
-    </div>
-    <div class="n-doc-body">
-      <basic-usage />
-      <disabled />
-      <event />
-      <min-and-max />
-      <size />
-      <step />
-    </div>
-  </div>
-</template>
-
-<script>
-import basicUsage from './basicUsage.demo.vue'
-import disabled from './disabled.demo'
-import event from './event.demo'
-import minAndMax from './minAndMax.demo'
-import size from './size.demo'
-import step from './step.demo'
-
-export default {
-  components: {
-    basicUsage,
-    disabled,
-    event,
-    minAndMax,
-    size,
-    step
-  },
-  data () {
-    return {
-
-    }
-  },
-  methods: {
-  }
-}
-</script>
diff --git a/demo/documentation/components/inputNumberDemo/minAndMax.demo.vue b/demo/documentation/components/inputNumberDemo/minAndMax.demo.vue
deleted file mode 100644
index b54b84d75..000000000
--- a/demo/documentation/components/inputNumberDemo/minAndMax.demo.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Min and Max
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-input-number
-        v-model="value"
-        :min="-3"
-        :max="5"
-      />
-      <n-input-number
-        v-model="value"
-        :min="-5"
-        :max="3"
-      />
-      <!--EXAMPLE_END-->
-    </div>
-    <pre class="n-doc-section__inspect">value: {{ JSON.stringify(value) }}</pre>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      value: 0
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/inputNumberDemo/size.demo.vue b/demo/documentation/components/inputNumberDemo/size.demo.vue
deleted file mode 100644
index e8bb3a29a..000000000
--- a/demo/documentation/components/inputNumberDemo/size.demo.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Size
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-input-number
-        v-model="value"
-        size="small"
-      />
-      <n-input-number
-        v-model="value"
-        size="medium"
-      />
-      <n-input-number
-        v-model="value"
-        size="large"
-      />
-      <!--EXAMPLE_END-->
-    </div>
-    <pre class="n-doc-section__inspect">value: {{ JSON.stringify(value) }}</pre>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      value: 0
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/inputNumberDemo/step.demo.vue b/demo/documentation/components/inputNumberDemo/step.demo.vue
deleted file mode 100644
index 83189184b..000000000
--- a/demo/documentation/components/inputNumberDemo/step.demo.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Step
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-input-number
-        v-model="value"
-        :step="2"
-      />
-      <!--EXAMPLE_END-->
-    </div>
-    <pre class="n-doc-section__inspect">value: {{ JSON.stringify(value) }}</pre>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      value: 0
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/popconfirm/enUS/basic.md b/demo/documentation/components/popconfirm/enUS/basic.md
new file mode 100644
index 000000000..fa586ba93
--- /dev/null
+++ b/demo/documentation/components/popconfirm/enUS/basic.md
@@ -0,0 +1,12 @@
+# Basic
+```html
+<n-popconfirm
+  positive-text="ok"
+  negative-text="not ok"
+>
+  <template v-slot:activator>
+    <n-button>Quit</n-button>
+  </template>
+  Are you sure to quit this game?
+</n-popconfirm>
+```
\ No newline at end of file
diff --git a/demo/documentation/components/popconfirm/enUS/customAction.md b/demo/documentation/components/popconfirm/enUS/customAction.md
new file mode 100644
index 000000000..5c914a2ce
--- /dev/null
+++ b/demo/documentation/components/popconfirm/enUS/customAction.md
@@ -0,0 +1,17 @@
+# Custom Action
+```html
+<n-popconfirm :controller="controller">
+  <template v-slot:activator>
+    <n-button>Quit</n-button>
+  </template>
+  Are you sure to quit this game?
+  <template v-slot:action>
+    <n-button
+      size="tiny"
+      @click="handleOopsClick"
+    >
+      oops!
+    </n-button>
+  </template>
+</n-popconfirm>
+```
\ No newline at end of file
diff --git a/demo/documentation/components/popconfirm/enUS/customIcon.md b/demo/documentation/components/popconfirm/enUS/customIcon.md
new file mode 100644
index 000000000..5e4265ed2
--- /dev/null
+++ b/demo/documentation/components/popconfirm/enUS/customIcon.md
@@ -0,0 +1,18 @@
+# Custom Icon
+```html
+<n-popconfirm
+  positive-text="ok"
+  negative-text="not ok"
+>
+  <template v-slot:icon>
+    <n-icon
+      type="md-hand"
+      color="red"
+    />
+  </template>
+  <template v-slot:activator>
+    <n-button>Quit</n-button>
+  </template>
+  Are you sure to quit this game?
+</n-popconfirm>
+```
\ No newline at end of file
diff --git a/demo/documentation/components/popconfirm/enUS/event.md b/demo/documentation/components/popconfirm/enUS/event.md
new file mode 100644
index 000000000..31bc5c9a9
--- /dev/null
+++ b/demo/documentation/components/popconfirm/enUS/event.md
@@ -0,0 +1,24 @@
+# Event
+```html
+<n-popconfirm
+  @positive-click="handlePositiveClick"
+  @negative-click="handleNegativeClick"
+>
+  <template v-slot:activator>
+    <n-button>Quit</n-button>
+  </template>
+  Are you sure to quit this game?
+</n-popconfirm>
+```
+```js
+export default {
+  methods: {
+    handlePositiveClick () {
+      this.$NMessage.info('positive click')
+    },
+    handleNegativeClick () {
+      this.$NMessage.info('negative click')
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/popconfirm/enUS/index.md b/demo/documentation/components/popconfirm/enUS/index.md
new file mode 100644
index 000000000..0428fea32
--- /dev/null
+++ b/demo/documentation/components/popconfirm/enUS/index.md
@@ -0,0 +1,8 @@
+# Popconfirm
+```demo
+basic
+custom-action
+custom-icon
+event
+no-icon
+```
\ No newline at end of file
diff --git a/demo/documentation/components/popconfirm/enUS/noIcon.md b/demo/documentation/components/popconfirm/enUS/noIcon.md
new file mode 100644
index 000000000..932fbeadd
--- /dev/null
+++ b/demo/documentation/components/popconfirm/enUS/noIcon.md
@@ -0,0 +1,9 @@
+# No Icon
+```html
+<n-popconfirm :show-icon="false">
+  <template v-slot:activator>
+    <n-button>No Icon</n-button>
+  </template>
+  Are you sure to quit this game?
+</n-popconfirm>
+```
\ No newline at end of file
diff --git a/demo/documentation/components/popconfirm/index.entry b/demo/documentation/components/popconfirm/index.entry
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/popconfirm/zhCN/index.md b/demo/documentation/components/popconfirm/zhCN/index.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/popconfirmDemo/basicUsage.demo.vue b/demo/documentation/components/popconfirmDemo/basicUsage.demo.vue
deleted file mode 100644
index 9dd38714a..000000000
--- a/demo/documentation/components/popconfirmDemo/basicUsage.demo.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Basic Usage
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-popconfirm
-        positive-text="ok"
-        negative-text="not ok"
-      >
-        <template v-slot:activator>
-          <n-button>Quit</n-button>
-        </template>
-        Are you sure to quit this game?
-      </n-popconfirm>
-      <!--EXAMPLE_END-->
-    </div>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/popconfirmDemo/customAction.demo.vue b/demo/documentation/components/popconfirmDemo/customAction.demo.vue
deleted file mode 100644
index f04e817e9..000000000
--- a/demo/documentation/components/popconfirmDemo/customAction.demo.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Custom Action
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-popconfirm :controller="controller">
-        <template v-slot:activator>
-          <n-button>Quit</n-button>
-        </template>
-        Are you sure to quit this game?
-        <template v-slot:action>
-          <n-button
-            size="tiny"
-            @click="handleOopsClick"
-          >
-            oops!
-          </n-button>
-        </template>
-      </n-popconfirm>
-      <!--EXAMPLE_END-->
-    </div>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      controller: {}
-    }
-  },
-  methods: {
-    handleOopsClick () {
-      this.$NMessage.info('oops!')
-      if (this.controller) this.controller.hide()
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/popconfirmDemo/customIcon.demo.vue b/demo/documentation/components/popconfirmDemo/customIcon.demo.vue
deleted file mode 100644
index db44cae09..000000000
--- a/demo/documentation/components/popconfirmDemo/customIcon.demo.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Custom Icon
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-popconfirm
-        positive-text="ok"
-        negative-text="not ok"
-      >
-        <template v-slot:icon>
-          <n-icon
-            type="md-hand"
-            color="red"
-          />
-        </template>
-        <template v-slot:activator>
-          <n-button>Quit</n-button>
-        </template>
-        Are you sure to quit this game?
-      </n-popconfirm>
-      <!--EXAMPLE_END-->
-    </div>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/popconfirmDemo/event.demo.vue b/demo/documentation/components/popconfirmDemo/event.demo.vue
deleted file mode 100644
index 5af264693..000000000
--- a/demo/documentation/components/popconfirmDemo/event.demo.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Event
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-popconfirm
-        @positive-click="handlePositiveClick"
-        @negative-click="handleNegativeClick"
-      >
-        <template v-slot:activator>
-          <n-button>Quit</n-button>
-        </template>
-        Are you sure to quit this game?
-      </n-popconfirm>
-      <!--EXAMPLE_END-->
-    </div>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  methods: {
-    handlePositiveClick () {
-      this.$NMessage.info('positive click')
-    },
-    handleNegativeClick () {
-      this.$NMessage.info('negative click')
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/popconfirmDemo/index.vue b/demo/documentation/components/popconfirmDemo/index.vue
deleted file mode 100644
index 048b687a0..000000000
--- a/demo/documentation/components/popconfirmDemo/index.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <div
-    ref="doc"
-    class="n-doc"
-  >
-    <div class="n-doc-header">
-      <n-gradient-text :font-size="20">
-        Popconfirm / n-popconfirm
-      </n-gradient-text>
-    </div>
-    <div class="n-doc-body">
-      <basic-usage />
-      <no-icon />
-      <event />
-      <custom-action />
-      <custom-icon />
-    </div>
-  </div>
-</template>
-
-<script>
-import basicUsage from './basicUsage.demo.vue'
-import event from './event.demo.vue'
-import customAction from './customAction.demo.vue'
-import noIcon from './noIcon.demo.vue'
-import customIcon from './customIcon.demo.vue'
-
-export default {
-  components: {
-    basicUsage,
-    event,
-    customAction,
-    noIcon,
-    customIcon
-  },
-  data () {
-    return {
-
-    }
-  },
-  methods: {
-  }
-}
-</script>
diff --git a/demo/documentation/components/popconfirmDemo/noIcon.demo.vue b/demo/documentation/components/popconfirmDemo/noIcon.demo.vue
deleted file mode 100644
index 1a4da4897..000000000
--- a/demo/documentation/components/popconfirmDemo/noIcon.demo.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      No Icon
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-popconfirm no-icon>
-        <template v-slot:activator>
-          <n-button>No Icon</n-button>
-        </template>
-        Are you sure to quit this game?
-      </n-popconfirm>
-      <!--EXAMPLE_END-->
-    </div>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/radio/enUS/basic.md b/demo/documentation/components/radio/enUS/basic.md
new file mode 100644
index 000000000..e5c9735aa
--- /dev/null
+++ b/demo/documentation/components/radio/enUS/basic.md
@@ -0,0 +1,31 @@
+# Basic
+```html
+<n-radio
+  v-model="value"
+  value="Definitely Maybe"
+>
+  Definitely Maybe
+</n-radio>
+<n-radio
+  v-model="value"
+  value="Be Here Now"
+>
+  Be Here Now
+</n-radio>
+<n-radio
+  v-model="value"
+  value="Be Here Now"
+  disabled
+>
+  Be Here Now
+</n-radio>
+```
+```js
+export default {
+  data () {
+    return {
+      value: null
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/radio/enUS/buttonGroup.md b/demo/documentation/components/radio/enUS/buttonGroup.md
new file mode 100644
index 000000000..df822cf2b
--- /dev/null
+++ b/demo/documentation/components/radio/enUS/buttonGroup.md
@@ -0,0 +1,61 @@
+# Button Group
+```html
+<n-radio-group v-model="value">
+  <n-radio-button
+    v-for="song in songs"
+    :key="song.value"
+    :value="song.value"
+    :disabled="(song.label === 'Live Forever' && disabled1 || song.label === 'Shakermaker' && disabled2)"
+  >
+    {{ song.label }}
+  </n-radio-button>
+</n-radio-group>
+
+<n-checkbox
+  v-model="disabled2"
+  style="margin-right: 12px;"
+>
+  disable Shakemaker
+</n-checkbox>
+<n-checkbox
+  v-model="disabled1"
+>
+  disable Live Forever
+</n-checkbox>
+```
+```js
+export default {
+  data () {
+    return {
+      value: null,
+      disabled2: false,
+      disabled1: false,
+      songs: [
+        {
+          value: 'Rock\'n\'Roll Star',
+          label: 'Rock\'n\'Roll Star'
+        },
+        {
+          value: 'Shakermaker',
+          label: 'Shakermaker'
+        },
+        {
+          value: 'Live Forever',
+          label: 'Live Forever'
+        },
+        {
+          value: 'Up in the Sky',
+          label: 'Up in the Sky'
+        },
+        {
+          value: '...',
+          label: '...'
+        }
+      ].map(s => {
+        s.value = s.value.toLowerCase()
+        return s
+      })
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/radio/enUS/group.md b/demo/documentation/components/radio/enUS/group.md
new file mode 100644
index 000000000..8a2aa9422
--- /dev/null
+++ b/demo/documentation/components/radio/enUS/group.md
@@ -0,0 +1,46 @@
+# Group
+```html
+<n-radio-group v-model="value">
+  <n-radio
+    v-for="song in songs"
+    :key="song.value"
+    :value="song.value"
+  >
+    {{ song.label }}
+  </n-radio>
+</n-radio-group>
+```
+```js
+export default {
+  data () {
+    return {
+      value: null,
+      songs: [
+        {
+          value: 'Rock\'n\'Roll Star',
+          label: 'Rock\'n\'Roll Star'
+        },
+        {
+          value: 'Shakermaker',
+          label: 'Shakermaker'
+        },
+        {
+          value: 'Live Forever',
+          label: 'Live Forever'
+        },
+        {
+          value: 'Up in the Sky',
+          label: 'Up in the Sky'
+        },
+        {
+          value: '...',
+          label: '...'
+        }
+      ].map(s => {
+        s.value = s.value.toLowerCase()
+        return s
+      })
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/radio/enUS/index.md b/demo/documentation/components/radio/enUS/index.md
new file mode 100644
index 000000000..d29ad7edb
--- /dev/null
+++ b/demo/documentation/components/radio/enUS/index.md
@@ -0,0 +1,7 @@
+# Radio
+<!--single-column-->
+```demo
+basic
+group
+button-group
+```
\ No newline at end of file
diff --git a/demo/documentation/components/radio/index.entry b/demo/documentation/components/radio/index.entry
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/radio/zhCN/index.md b/demo/documentation/components/radio/zhCN/index.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/radioDemo.vue b/demo/documentation/components/radioDemo.vue
deleted file mode 100644
index 13955bdd2..000000000
--- a/demo/documentation/components/radioDemo.vue
+++ /dev/null
@@ -1,258 +0,0 @@
-<template>
-  <div
-    ref="doc"
-    class="n-doc"
-  >
-    <div class="n-doc-header">
-      <n-gradient-text :font-size="20">
-        Radio
-      </n-gradient-text>
-    </div>
-    <div class="n-doc-body">
-      <div class="n-doc-section">
-        <div class="n-doc-section__header">
-          Single Radio
-        </div>
-        <div class="n-doc-section__view">
-          <n-radio
-            v-model="value1"
-            value="Definitely Maybe"
-          >
-            Definitely Maybe
-          </n-radio>
-          <n-radio
-            v-model="value1"
-            value="Be Here Now"
-          >
-            Be Here Now
-          </n-radio>
-          <n-radio
-            v-model="value1"
-            value="Be Here Now"
-            disabled
-          >
-            Be Here Now
-          </n-radio>
-        </div>
-        <pre class="n-doc-section__inspect">value: {{ JSON.stringify(value1) }}</pre>
-        <div class="n-doc-section__source">
-          <textarea><n-radio
-  v-model="value"
-  value="Definitely Maybe"
->
-  Definitely Maybe
-</n-radio>
-<n-radio
-  v-model="value"
-  value="Be Here Now"
->
-  Be Here Now
-</n-radio>
-<n-radio
-  v-model="value"
-  value="Be Here Now"
-  disabled
->
-  Be Here Now
-</n-radio>
-
-<script>
-export default {
-  data () {
-    return {
-      value: null
-    }
-  }
-}
-</script>
-</textarea>
-        </div>
-      </div>
-      <div class="n-doc-section">
-        <div class="n-doc-section__header">
-          Radio Group
-        </div>
-        <div class="n-doc-section__view">
-          <n-radio-group v-model="value2">
-            <n-radio
-              v-for="song in songs"
-              :key="song.value"
-              :value="song.value"
-            >
-              {{ song.label }}
-            </n-radio>
-          </n-radio-group>
-        </div>
-        <pre class="n-doc-section__inspect">value: {{ JSON.stringify(value2) }}</pre>
-        <div class="n-doc-section__source">
-          <textarea v-pre><n-radio-group v-model="value">
-  <n-radio
-    v-for="song in songs"
-    :key="song.value"
-    :value="song.value"
-  >
-    {{ song.label }}
-  </n-radio>
-</n-radio-group>
-
-<script>
-export default {
-  data () {
-    return {
-      value: null,
-      songs: [
-        {
-          value: 'Rock\'n\'Roll Star',
-          label: 'Rock\'n\'Roll Star'
-        },
-        {
-          value: 'Shakermaker',
-          label: 'Shakermaker'
-        },
-        {
-          value: 'Live Forever',
-          label: 'Live Forever'
-        },
-        {
-          value: 'Up in the Sky',
-          label: 'Up in the Sky'
-        },
-        {
-          value: '...',
-          label: '...'
-        }
-      ].map(s => {
-        s.value = s.value.toLowerCase()
-        return s
-      }
-    }
-  }
-}
-</script>
-</textarea>
-        </div>
-      </div>
-      <div class="n-doc-section">
-        <div class="n-doc-section__header">
-          Radio Button Group
-        </div>
-        <div class="n-doc-section__view">
-          <n-radio-group v-model="value3">
-            <n-radio-button
-              v-for="song in songs"
-              :key="song.value"
-              :value="song.value"
-              :disabled="(song.label === 'Live Forever' && disabled1 || song.label === 'Shakermaker' && disabled2)"
-            >
-              {{ song.label }}
-            </n-radio-button>
-          </n-radio-group>
-        </div>
-        <div class="n-doc-section__view">
-          <n-checkbox
-            v-model="disabled2"
-            style="margin-right: 12px;"
-          >
-            disable Shakemaker
-          </n-checkbox>
-          <n-checkbox
-            v-model="disabled1"
-          >
-            disable Live Forever
-          </n-checkbox>
-        </div>
-        <pre class="n-doc-section__inspect">value: {{ JSON.stringify(value3) }}</pre>
-        <div class="n-doc-section__source">
-          <textarea v-pre><n-radio-group v-model="value">
-  <n-radio
-    v-for="song in songs"
-    :key="song.value"
-    :value="song.value"
-  >
-    {{ song.label }}
-  </n-radio>
-</n-radio-group>
-
-<script>
-export default {
-  data () {
-    return {
-      value: null,
-      songs: [
-        {
-          value: 'Rock\'n\'Roll Star',
-          label: 'Rock\'n\'Roll Star'
-        },
-        {
-          value: 'Shakermaker',
-          label: 'Shakermaker'
-        },
-        {
-          value: 'Live Forever',
-          label: 'Live Forever'
-        },
-        {
-          value: 'Up in the Sky',
-          label: 'Up in the Sky'
-        },
-        {
-          value: '...',
-          label: '...'
-        }
-      ].map(s => {
-        s.value = s.value.toLowerCase()
-        return s
-      }
-    }
-  }
-}
-</script>
-</textarea>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import docCodeEditorMixin from './docCodeEditorMixin'
-export default {
-  mixins: [docCodeEditorMixin],
-  data () {
-    return {
-      value1: null,
-      value2: null,
-      value3: 'Shakermaker',
-      disabled1: false,
-      disabled2: false,
-      songs: [
-        {
-          value: 'Rock\'n\'Roll Star',
-          label: 'Rock\'n\'Roll Star'
-        },
-        {
-          value: 'Shakermaker',
-          label: 'Shakermaker'
-        },
-        {
-          value: 'Live Forever',
-          label: 'Live Forever'
-        },
-        {
-          value: 'Up in the Sky',
-          label: 'Up in the Sky'
-        },
-        {
-          value: '...',
-          label: '...'
-        }
-      ].map(s => {
-        s.value = s.value.toLowerCase()
-        return s
-      })
-    }
-  },
-  methods: {
-  }
-}
-</script>
diff --git a/demo/documentation/components/scaffoldDemo/index.vue b/demo/documentation/components/scaffoldDemo/index.vue
deleted file mode 100644
index 6a8482475..000000000
--- a/demo/documentation/components/scaffoldDemo/index.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div
-    ref="doc"
-    class="n-doc"
-  >
-    <div class="n-doc-header">
-      <n-gradient-text :font-size="20">
-        scaffold
-      </n-gradient-text>
-    </div>
-    <div class="n-doc-body">
-      <scaffold />
-    </div>
-  </div>
-</template>
-
-<script>
-import scaffold from './scaffold.demo.vue'
-
-export default {
-  components: {
-    scaffold
-  },
-  data () {
-    return {
-
-    }
-  },
-  methods: {
-  }
-}
-</script>
diff --git a/demo/documentation/components/scaffoldDemo/scaffold.demo.vue b/demo/documentation/components/scaffoldDemo/scaffold.demo.vue
deleted file mode 100644
index 691ddb5f8..000000000
--- a/demo/documentation/components/scaffoldDemo/scaffold.demo.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Scaffold
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      Write some demo here
-      <!--EXAMPLE_END-->
-    </div>
-    <pre class="n-doc-section__inspect">Inspect some value here</pre>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/select/enUS/remote.md b/demo/documentation/components/select/enUS/remote.md
index 90353fcbd..f47e9832b 100644
--- a/demo/documentation/components/select/enUS/remote.md
+++ b/demo/documentation/components/select/enUS/remote.md
@@ -6,6 +6,7 @@
   placeholder="Search Songs"
   :options="options"
   :on-search="handleSearch"
+  clearable
   remote
   :no-data-content="noDataContent"
   :loading="loading"
diff --git a/demo/documentation/components/select/enUS/remoteMultiple.md b/demo/documentation/components/select/enUS/remoteMultiple.md
index 947e47c7b..783f68910 100644
--- a/demo/documentation/components/select/enUS/remoteMultiple.md
+++ b/demo/documentation/components/select/enUS/remoteMultiple.md
@@ -7,6 +7,7 @@
   placeholder="Search Songs"
   :options="options"
   :on-search="handleSearch"
+  clearable
   remote
   :no-data-content="noDataContent"
   :loading="loading"
diff --git a/demo/documentation/components/slider/enUS/basic.md b/demo/documentation/components/slider/enUS/basic.md
new file mode 100644
index 000000000..3620b548f
--- /dev/null
+++ b/demo/documentation/components/slider/enUS/basic.md
@@ -0,0 +1,19 @@
+# Basic
+```html
+<n-slider
+  v-model="value"
+  :step="10"
+/>
+<n-input-number
+  v-model="value"
+/>
+```
+```js
+export default {
+  data () {
+    return {
+      value: 50
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/slider/enUS/index.md b/demo/documentation/components/slider/enUS/index.md
new file mode 100644
index 000000000..562c2bd61
--- /dev/null
+++ b/demo/documentation/components/slider/enUS/index.md
@@ -0,0 +1,6 @@
+# Slider
+```demo
+basic
+range
+mark
+````
\ No newline at end of file
diff --git a/demo/documentation/components/slider/enUS/mark.md b/demo/documentation/components/slider/enUS/mark.md
new file mode 100644
index 000000000..23419338d
--- /dev/null
+++ b/demo/documentation/components/slider/enUS/mark.md
@@ -0,0 +1,28 @@
+# Mark
+```html
+<n-slider
+  v-model="value"
+  range
+  :marks="marks"
+  :step="10"
+/>
+<n-input-number
+  v-model="value[0]"
+/>
+<n-input-number
+  v-model="value[1]"
+/>
+```
+```js
+export default {
+  data () {
+    return {
+      value: [50, 70],
+      marks: {
+        34: 'Amazing',
+        75: 'Good'
+      }
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/slider/enUS/range.md b/demo/documentation/components/slider/enUS/range.md
new file mode 100644
index 000000000..7ab4e6ef5
--- /dev/null
+++ b/demo/documentation/components/slider/enUS/range.md
@@ -0,0 +1,23 @@
+# Range
+```html
+<n-slider
+  v-model="value"
+  range
+  :step="1"
+/>
+<n-input-number
+  v-model="value[0]"
+/>
+<n-input-number
+  v-model="value[1]"
+/>
+```
+```js
+export default {
+  data () {
+    return {
+      value: [50, 70]
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/slider/index.entry b/demo/documentation/components/slider/index.entry
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/slider/zhCN/index.md b/demo/documentation/components/slider/zhCN/index.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/sliderDemo/index.vue b/demo/documentation/components/sliderDemo/index.vue
deleted file mode 100644
index 24fe9f460..000000000
--- a/demo/documentation/components/sliderDemo/index.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <div
-    ref="doc"
-    class="n-doc"
-  >
-    <div class="n-doc-header">
-      <n-gradient-text :font-size="20">
-        Slider / n-slider
-      </n-gradient-text>
-    </div>
-    <div class="n-doc-body">
-      <scaffold />
-      <range />
-      <mark-demo />
-    </div>
-  </div>
-</template>
-
-<script>
-import scaffold from './scaffold.demo.vue'
-import range from './range.demo.vue'
-import markDemo from './mark.demo.vue'
-
-export default {
-  components: {
-    scaffold,
-    range,
-    markDemo
-  },
-  data () {
-    return {
-
-    }
-  },
-  methods: {
-  }
-}
-</script>
diff --git a/demo/documentation/components/sliderDemo/mark.demo.vue b/demo/documentation/components/sliderDemo/mark.demo.vue
deleted file mode 100644
index 00cdae0e1..000000000
--- a/demo/documentation/components/sliderDemo/mark.demo.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Mark
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-slider
-        v-model="value"
-        range
-        :marks="marks"
-        :step="10"
-      />
-      <!--EXAMPLE_END-->
-    </div>
-    <div class="n-doc-section__inspect">
-      <n-input-number
-        v-model="value[0]"
-      />
-      <n-input-number
-        v-model="value[1]"
-      />
-    </div>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      value: [50, 70],
-      marks: {
-        34: 'Amazing',
-        75: 'Good'
-      }
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/sliderDemo/range.demo.vue b/demo/documentation/components/sliderDemo/range.demo.vue
deleted file mode 100644
index 6323aa678..000000000
--- a/demo/documentation/components/sliderDemo/range.demo.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Range
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-slider
-        v-model="value"
-        range
-        :step="1"
-      />
-      <!--EXAMPLE_END-->
-    </div>
-    <div class="n-doc-section__inspect">
-      <n-input-number
-        v-model="value[0]"
-      />
-      <n-input-number
-        v-model="value[1]"
-      />
-    </div>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      value: [50, 70]
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/sliderDemo/scaffold.demo.vue b/demo/documentation/components/sliderDemo/scaffold.demo.vue
deleted file mode 100644
index bdf74714c..000000000
--- a/demo/documentation/components/sliderDemo/scaffold.demo.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Basic Usage
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-slider
-        v-model="value"
-        :step="10"
-      />
-      <!--EXAMPLE_END-->
-    </div>
-    <div class="n-doc-section__inspect">
-      <n-input-number
-        v-model="value"
-      />
-    </div>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      value: 50
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/steps/enUS/basic.md b/demo/documentation/components/steps/enUS/basic.md
new file mode 100644
index 000000000..1c29aa25c
--- /dev/null
+++ b/demo/documentation/components/steps/enUS/basic.md
@@ -0,0 +1,64 @@
+# Basic
+```html
+<n-steps
+  :current="current"
+  :status="currentStatus"
+>
+  <n-step
+    title="I Me Mine"
+    description="All through the day, I me mine I me mine, I me mine"
+  />
+  <n-step
+    title="Let It Be"
+    description="When I find myself in times of trouble Mother Mary comes to me"
+  />
+  <n-step
+    title="Come Together"
+    description="Here come old flat top He come grooving up slowly"
+  />
+  <n-step
+    title="Something"
+    description="Something in the way she moves Attracts me like no other lover"
+  />
+</n-steps>
+<div
+  style="display: flex; justify-content: center; flex-wrap: wrap; margin-top: 48px;"
+>
+  <n-button
+    icon="md-arrow-round-back"
+    @click="prev"
+  /><n-button
+    icon="md-arrow-round-forward"
+    @click="next"
+  />
+  <n-button @click="currentStatus='error'">
+    current-status: error
+  </n-button>
+  <n-button @click="currentStatus='process'">
+    current-status: process
+  </n-button>
+</div>
+```
+
+```js
+export default {
+  data () {
+    return {
+      current: null,
+      currentStatus: 'error'
+    }
+  },
+  methods: {
+    next () {
+      if (this.current === null) this.current = 1
+      else if (this.current >= 4) this.current = null
+      else this.current++
+    },
+    prev () {
+      if (this.current === 0) this.current = null
+      else if (this.current === null) this.current = 4
+      else this.current--
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/steps/enUS/index.md b/demo/documentation/components/steps/enUS/index.md
new file mode 100644
index 000000000..0daddba89
--- /dev/null
+++ b/demo/documentation/components/steps/enUS/index.md
@@ -0,0 +1,5 @@
+# Step
+<!--single-column-->
+```demo
+basic
+```
\ No newline at end of file
diff --git a/demo/documentation/components/steps/index.entry b/demo/documentation/components/steps/index.entry
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/steps/zhCN/index.md b/demo/documentation/components/steps/zhCN/index.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/stepsDemo/index.vue b/demo/documentation/components/stepsDemo/index.vue
deleted file mode 100644
index a7b21681b..000000000
--- a/demo/documentation/components/stepsDemo/index.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div
-    ref="doc"
-    class="n-doc"
-  >
-    <div class="n-doc-header">
-      <n-gradient-text :font-size="20">
-        NSteps / n-steps
-      </n-gradient-text>
-    </div>
-    <div class="n-doc-body">
-      <scaffold />
-    </div>
-  </div>
-</template>
-
-<script>
-import scaffold from './scaffold.demo.vue'
-
-export default {
-  components: {
-    scaffold
-  },
-  data () {
-    return {
-
-    }
-  },
-  methods: {
-  }
-}
-</script>
diff --git a/demo/documentation/components/stepsDemo/scaffold.demo.vue b/demo/documentation/components/stepsDemo/scaffold.demo.vue
deleted file mode 100644
index 67718b656..000000000
--- a/demo/documentation/components/stepsDemo/scaffold.demo.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Basic Usage
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: wrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-steps
-        :current="current"
-        :finish-status="finishStatus"
-        :current-status="currentStatus"
-      >
-        <n-step
-          title="I Me Mine"
-          description="All through the day, I me mine I me mine, I me mine"
-        />
-        <n-step
-          title="Let It Be"
-          description="When I find myself in times of trouble Mother Mary comes to me"
-        />
-        <n-step
-          title="Come Together"
-          description="Here come old flat top He come grooving up slowly"
-        />
-        <n-step
-          title="Something"
-          description="Something in the way she moves Attracts me like no other lover"
-        />
-      </n-steps>
-      <div
-        style="display: flex; justify-content: center; flex-wrap: wrap; margin-top: 48px;"
-      >
-        <n-button
-          icon="md-arrow-round-back"
-          @click="prev"
-        /><n-button
-          icon="md-arrow-round-forward"
-          @click="next"
-        />
-        <n-button @click="currentStatus='error'">
-          current-status: error
-        </n-button>
-        <n-button @click="currentStatus='process'">
-          current-status: process
-        </n-button>
-        <n-button @click="finishStatus='error'">
-          finish-status: error
-        </n-button>
-        <n-button @click="finishStatus='process'">
-          finish-status: process
-        </n-button>
-        <n-button @click="finishStatus='success'">
-          finish-status: success
-        </n-button>
-      </div>
-      <!--EXAMPLE_END-->
-    </div>
-
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      current: null,
-      finishStatus: 'success',
-      currentStatus: 'error'
-    }
-  },
-  beforeDestroy () {
-  },
-  methods: {
-    next () {
-      if (this.current === null) this.current = 0
-      else if (this.current >= 3) this.current = null
-      else this.current++
-    },
-    prev () {
-      if (this.current === 0) this.current = null
-      else if (this.current === null) this.current = 3
-      else this.current--
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/tableDemo.vue b/demo/documentation/components/tableDemo.vue
deleted file mode 100644
index 03a6838f6..000000000
--- a/demo/documentation/components/tableDemo.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-  <div
-    ref="doc"
-    class="n-doc"
-  >
-    <div class="n-doc-header">
-      <n-gradient-text :font-size="20">
-        Table / n-table
-      </n-gradient-text>
-    </div>
-    <div class="n-doc-body">
-      <div class="n-doc-section">
-        <div class="n-doc-section__header">
-          Basic Usage
-        </div>
-        <div class="n-doc-section__view">
-          <n-table>
-            <n-thead>
-              <n-tr>
-                <n-th>ID</n-th>
-                <n-th>Cluster</n-th>
-                <n-th>Cluster Type</n-th>
-                <n-th>Tags</n-th>
-                <n-th>Network Type</n-th>
-                <n-th>Cluster Status</n-th>
-                <n-th>Nodes</n-th>
-                <n-th>Location</n-th>
-                <n-th>Version</n-th>
-              </n-tr>
-            </n-thead>
-            <n-tbody>
-              <n-tr
-                v-for="i in [1,2,3,4,5]"
-                :key="i"
-              >
-                <n-td>1</n-td>
-                <n-td>Name1</n-td>
-                <n-td>Type1</n-td>
-                <n-td>bla</n-td>
-                <n-td>blablabla</n-td>
-                <n-td>Running</n-td>
-                <n-td>6</n-td>
-                <n-td>Beijing</n-td>
-                <n-td>1.12.6-aliyun.1</n-td>
-              </n-tr>
-            </n-tbody>
-          </n-table>
-        </div>
-        <div class="n-doc-section__source">
-          <textarea><n-table>
-  <n-thead>
-    <n-tr>
-      <n-th>ID</n-th>
-      <n-th>Cluster</n-th>
-      <n-th>Cluster Type</n-th>
-      <n-th>Tags</n-th>
-      <n-th>Network Type</n-th>
-      <n-th>Cluster Status</n-th>
-      <n-th>Nodes</n-th>
-      <n-th>Location</n-th>
-      <n-th>Version</n-th>
-    </n-tr>
-  </n-thead>
-  <n-tbody>
-    <n-tr
-      v-for="i in [1,2,3,4,5]"
-      :key="i"
-    >
-      <n-td>1</n-td>
-      <n-td>Name1</n-td>
-      <n-td>Type1</n-td>
-      <n-td>bla</n-td>
-      <n-td>blablabla</n-td>
-      <n-td>Running</n-td>
-      <n-td>6</n-td>
-      <n-td>Beijing</n-td>
-      <n-td>1.12.6-aliyun.1</n-td>
-    </n-tr>
-  </n-tbody>
-</n-table></textarea>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import docCodeEditorMixin from './docCodeEditorMixin'
-export default {
-  mixins: [docCodeEditorMixin],
-  data () {
-    return {
-
-    }
-  },
-  methods: {
-  }
-}
-</script>
diff --git a/demo/documentation/components/tabs/enUS/basic.md b/demo/documentation/components/tabs/enUS/basic.md
new file mode 100644
index 000000000..68b5a7f1b
--- /dev/null
+++ b/demo/documentation/components/tabs/enUS/basic.md
@@ -0,0 +1,101 @@
+# Basic
+```html
+<n-tabs
+  v-model="name"
+  closable
+>
+  <n-tab-panel
+    name="a"
+    label="aaaaaaaa"
+  >
+    Name: a. <br>
+  </n-tab-panel>
+  <n-tab-panel
+    name="b"
+    label="bbbbbbbb"
+  >
+    Name: b. <br>
+    We can control the element display by setting the tab's name attribute.<br>
+    Also we can use tab-panel's active attribute to init the display.
+    And tab-panels's active attribute is the first priority.
+  </n-tab-panel>
+  <n-tab-panel
+    name="c"
+    label="cccccccc"
+  >
+    Name: a. <br>
+  </n-tab-panel>
+  <n-tab-panel
+    name="d"
+    label="dddddddd"
+  >
+    Name: b. <br>
+    We can control the element display by setting the tab's name attribute.<br>
+    Also we can use tab-panel's active attribute to init the display.
+    And tab-panels's active attribute is the first priority.
+  </n-tab-panel>
+  <n-tab-panel
+    name="e"
+    label="eeeeeeee"
+  >
+    Name: a. <br>
+  </n-tab-panel>
+  <n-tab-panel
+    name="f"
+    label="ffffffff"
+  >
+    Name: b. <br>
+    We can control the element display by setting the tab's name attribute.<br>
+    Also we can use tab-panel's active attribute to init the display.
+    And tab-panels's active attribute is the first priority.
+  </n-tab-panel>
+  <n-tab-panel
+    name="i"
+    label="iiiiiiii"
+  >
+    Name: a. <br>
+  </n-tab-panel>
+  <n-tab-panel
+    name="f"
+    label="jjjjjjjj"
+  >
+    Name: b. <br>
+    We can control the element display by setting the tab's name attribute.<br>
+    Also we can use tab-panel's active attribute to init the display.
+    And tab-panels's active attribute is the first priority.
+  </n-tab-panel>
+  <n-tab-panel
+    name="g"
+    label="gggggggg"
+  >
+    Name: a. <br>
+  </n-tab-panel>
+  <n-tab-panel
+    name="h"
+    label="hhhhhhhh"
+  >
+    Name: b. <br>
+    We can control the element display by setting the tab's name attribute.<br>
+    Also we can use tab-panel's active attribute to init the display.
+    And tab-panels's active attribute is the first priority.
+  </n-tab-panel>
+  <n-tab-panel
+    disabled
+    label="Disabled"
+  />
+</n-tabs>
+```
+```js
+export default {
+  data () {
+    return {
+      name: 'b'
+    }
+  },
+  methods: {
+    updateName () {
+      this.name = this.name === 'a' ? 'b' : 'a'
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/tabs/enUS/card.md b/demo/documentation/components/tabs/enUS/card.md
new file mode 100644
index 000000000..f32949d46
--- /dev/null
+++ b/demo/documentation/components/tabs/enUS/card.md
@@ -0,0 +1,37 @@
+# Card
+```html
+<n-tabs
+  v-model="name"
+  type="card"
+  closable
+  @close="handleClose"
+>
+  <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'
+    }
+  },
+  methods: {
+    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/enUS/index.md b/demo/documentation/components/tabs/enUS/index.md
new file mode 100644
index 000000000..188726f01
--- /dev/null
+++ b/demo/documentation/components/tabs/enUS/index.md
@@ -0,0 +1,5 @@
+# Tabs
+```demo
+basic
+card
+```
\ No newline at end of file
diff --git a/demo/documentation/components/tabs/index.entry b/demo/documentation/components/tabs/index.entry
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/tabs/zhCN/index.md b/demo/documentation/components/tabs/zhCN/index.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/tabsDemo/basic.demo.vue b/demo/documentation/components/tabsDemo/basic.demo.vue
deleted file mode 100644
index c26c8d1ec..000000000
--- a/demo/documentation/components/tabsDemo/basic.demo.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Basic Panel
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-tabs
-        v-model="name"
-        closable
-      >
-        <n-tab-panel
-          name="a"
-          label="aaaaaaaa"
-        >
-          Name: a. <br>
-        </n-tab-panel>
-        <n-tab-panel
-          name="b"
-          label="bbbbbbbb"
-        >
-          Name: b. <br>
-          We can control the element display by setting the tab's name attribute.<br>
-          Also we can use tab-panel's active attribute to init the display.
-          And tab-panels's active attribute is the first priority.
-        </n-tab-panel>
-        <n-tab-panel
-          name="c"
-          label="cccccccc"
-        >
-          Name: a. <br>
-        </n-tab-panel>
-        <n-tab-panel
-          name="d"
-          label="dddddddd"
-        >
-          Name: b. <br>
-          We can control the element display by setting the tab's name attribute.<br>
-          Also we can use tab-panel's active attribute to init the display.
-          And tab-panels's active attribute is the first priority.
-        </n-tab-panel>
-        <n-tab-panel
-          name="e"
-          label="eeeeeeee"
-        >
-          Name: a. <br>
-        </n-tab-panel>
-        <n-tab-panel
-          name="f"
-          label="ffffffff"
-        >
-          Name: b. <br>
-          We can control the element display by setting the tab's name attribute.<br>
-          Also we can use tab-panel's active attribute to init the display.
-          And tab-panels's active attribute is the first priority.
-        </n-tab-panel>
-        <n-tab-panel
-          name="i"
-          label="iiiiiiii"
-        >
-          Name: a. <br>
-        </n-tab-panel>
-        <n-tab-panel
-          name="f"
-          label="jjjjjjjj"
-        >
-          Name: b. <br>
-          We can control the element display by setting the tab's name attribute.<br>
-          Also we can use tab-panel's active attribute to init the display.
-          And tab-panels's active attribute is the first priority.
-        </n-tab-panel>
-        <n-tab-panel
-          name="g"
-          label="gggggggg"
-        >
-          Name: a. <br>
-        </n-tab-panel>
-        <n-tab-panel
-          name="h"
-          label="hhhhhhhh"
-        >
-          Name: b. <br>
-          We can control the element display by setting the tab's name attribute.<br>
-          Also we can use tab-panel's active attribute to init the display.
-          And tab-panels's active attribute is the first priority.
-        </n-tab-panel>
-        <n-tab-panel
-          disabled
-          label="Disabled"
-        />
-      </n-tabs>
-      <!--EXAMPLE_END-->
-    </div>
-    <pre class="n-doc-section__inspect">name: {{ name }}</pre>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      name: 'b'
-    }
-  },
-  methods: {
-    updateName () {
-      this.name = this.name === 'a' ? 'b' : 'a'
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/tabsDemo/card.demo.vue b/demo/documentation/components/tabsDemo/card.demo.vue
deleted file mode 100644
index a1a165c78..000000000
--- a/demo/documentation/components/tabsDemo/card.demo.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Card
-    </div>
-    <div
-      class="n-doc-section__view"
-    >
-      <!--EXAMPLE_START-->
-      <n-tabs
-        v-model="name"
-        type="card"
-        closable
-        @close="handleClose"
-      >
-        <n-tab-panel
-          v-for="panel in panels"
-          :key="panel"
-          :label="panel.toString()"
-          :name="panel.toString()"
-        >
-          {{ panel }}
-        </n-tab-panel>
-      </n-tabs>
-      <!--EXAMPLE_END-->
-    </div>
-    <pre class="n-doc-section__inspect">Inspect some value here</pre>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      panels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
-      name: '1'
-    }
-  },
-  methods: {
-    handleClose (name) {
-      this.$NMessage.info('Close ' + name)
-      const index = this.panels.findIndex(v => name === v.toString())
-      if (~index) {
-        this.panels.splice(index, 1)
-      }
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/tabsDemo/index.vue b/demo/documentation/components/tabsDemo/index.vue
deleted file mode 100644
index 9e5162635..000000000
--- a/demo/documentation/components/tabsDemo/index.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div
-    ref="doc"
-    class="n-doc"
-  >
-    <div class="n-doc-header">
-      <n-gradient-text :font-size="20">
-        Tabs / n-tabs
-      </n-gradient-text>
-    </div>
-    <div class="n-doc-body">
-      <basic />
-      <card />
-    </div>
-  </div>
-</template>
-
-<script>
-import basic from './basic.demo.vue'
-import card from './card.demo.vue'
-
-export default {
-  components: {
-    basic,
-    card
-  },
-  data () {
-    return {
-
-    }
-  },
-  methods: {
-  }
-}
-</script>
diff --git a/demo/documentation/components/time/enUS/basic.md b/demo/documentation/components/time/enUS/basic.md
new file mode 100644
index 000000000..585d0f63e
--- /dev/null
+++ b/demo/documentation/components/time/enUS/basic.md
@@ -0,0 +1,15 @@
+# Basic
+```html
+<n-time :time="0"/>
+<br>
+<n-time :time="time"/>
+```
+```js
+export default {
+  data () {
+    return {
+      time: new Date(0)
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/time/enUS/format.md b/demo/documentation/components/time/enUS/format.md
new file mode 100644
index 000000000..692f70f55
--- /dev/null
+++ b/demo/documentation/components/time/enUS/format.md
@@ -0,0 +1,8 @@
+# Format
+```html
+<n-time :time="0" format="yyyy-MM-dd"/>
+<br>
+<n-time :time="0" format="yyyy-MM-dd hh:mm"/>
+<br>
+<n-time :time="0" format="yyyy-MM-dd hh:mm:ss"/>
+```
\ No newline at end of file
diff --git a/demo/documentation/components/time/enUS/index.md b/demo/documentation/components/time/enUS/index.md
new file mode 100644
index 000000000..9d0db60a0
--- /dev/null
+++ b/demo/documentation/components/time/enUS/index.md
@@ -0,0 +1,7 @@
+# Time
+```demo
+basic
+type
+format
+relative
+```
\ No newline at end of file
diff --git a/demo/documentation/components/time/enUS/relative.md b/demo/documentation/components/time/enUS/relative.md
new file mode 100644
index 000000000..0be90a4db
--- /dev/null
+++ b/demo/documentation/components/time/enUS/relative.md
@@ -0,0 +1,8 @@
+# Relative
+```html
+<n-time :time="0" :to="86400000"/>
+<br>
+<n-time :time="0" :to="864000000"/>
+<br>
+<n-time :time="0" :to="8640000000"/>
+```
\ No newline at end of file
diff --git a/demo/documentation/components/time/enUS/type.md b/demo/documentation/components/time/enUS/type.md
new file mode 100644
index 000000000..dc1ffecb5
--- /dev/null
+++ b/demo/documentation/components/time/enUS/type.md
@@ -0,0 +1,15 @@
+# Type
+```html
+<n-time :time="0" type="date"/>
+<br>
+<n-time :time="time" type="datetime"/>
+```
+```js
+export default {
+  data () {
+    return {
+      time: new Date(0)
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/time/index.entry b/demo/documentation/components/time/index.entry
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/time/zhCN/index.md b/demo/documentation/components/time/zhCN/index.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/timeDemo/index.vue b/demo/documentation/components/timeDemo/index.vue
deleted file mode 100644
index 6a8482475..000000000
--- a/demo/documentation/components/timeDemo/index.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div
-    ref="doc"
-    class="n-doc"
-  >
-    <div class="n-doc-header">
-      <n-gradient-text :font-size="20">
-        scaffold
-      </n-gradient-text>
-    </div>
-    <div class="n-doc-body">
-      <scaffold />
-    </div>
-  </div>
-</template>
-
-<script>
-import scaffold from './scaffold.demo.vue'
-
-export default {
-  components: {
-    scaffold
-  },
-  data () {
-    return {
-
-    }
-  },
-  methods: {
-  }
-}
-</script>
diff --git a/demo/documentation/components/timeDemo/scaffold.demo.vue b/demo/documentation/components/timeDemo/scaffold.demo.vue
deleted file mode 100644
index 691ddb5f8..000000000
--- a/demo/documentation/components/timeDemo/scaffold.demo.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Scaffold
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      Write some demo here
-      <!--EXAMPLE_END-->
-    </div>
-    <pre class="n-doc-section__inspect">Inspect some value here</pre>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/intro/privateStart.vue.md b/demo/documentation/intro/privateStart.vue.md
new file mode 100644
index 000000000..2c4fe0be7
--- /dev/null
+++ b/demo/documentation/intro/privateStart.vue.md
@@ -0,0 +1,18 @@
+# Getting Started
+
+## Installation
+First install it.
+
+```bash
+npm install --save git+https://github.com/07akioni/naive-ui.git
+```
+
+## Usage
+Add the following lines in you entry point js file.
+
+```js
+import naive from 'naive-ui'
+import 'naive-ui/styles/index.scss'
+
+Vue.use(naive)
+```
\ No newline at end of file
diff --git a/demo/documentation/intro/start.vue b/demo/documentation/intro/start.vue
index 4310f0aa5..533423063 100644
--- a/demo/documentation/intro/start.vue
+++ b/demo/documentation/intro/start.vue
@@ -3,22 +3,29 @@
     ref="doc"
     class="readme"
   >
-    <readme />
+    <private-readme v-if="token === 'naive'" />
+    <readme v-else />
   </div>
 </template>
 
 <script>
 import readme from './start.vue.md'
+import privateReadme from './privateStart.vue.md'
 import { replaceEmojiWithImages } from '../../utils'
 
 export default {
   components: {
-    readme
+    readme,
+    privateReadme
+  },
+  data () {
+    return {
+      token: null
+    }
   },
   mounted () {
     replaceEmojiWithImages(this.$refs.doc)
-  },
-  methods: {
+    this.token = localStorage.token
   }
 }
 </script>
diff --git a/demo/header.vue b/demo/header.vue
index e1697fe7d..392392dcd 100644
--- a/demo/header.vue
+++ b/demo/header.vue
@@ -14,6 +14,7 @@
 <template>
   <div class="nav">
     <div class="ui-logo">
+      <img src="./assets/images/naivelogo.png">
       Naive UI ({{ version }})
     </div>
     <div />
@@ -96,7 +97,15 @@ export default {
   align-items: center;
 }
 .ui-logo {
-  padding-left: 48px;
+  display: flex;
+  align-items: center;
+  padding-left: 44px;
+  font-size: 18px;
+}
+.ui-logo > img {
+  margin-right: 12px;
+  height: 32px;
+  width: 32px;
 }
 .theme-picker {
   padding-right: 16px;
diff --git a/demo/init.js b/demo/init.js
index f3aaa2ee1..e4b7d888b 100644
--- a/demo/init.js
+++ b/demo/init.js
@@ -1,7 +1,6 @@
 import Vue from 'vue/dist/vue'
 import VueRouter from 'vue-router'
 import '../styles/index.scss'
-import 'codemirror/lib/codemirror.css'
 import './styles/atom-one-dark-reasonable.scss'
 import './styles/atom-one-light.scss'
 import './styles/markdown.scss'
@@ -22,7 +21,6 @@ import iconDemo from './documentation/components/iconDemo'
 import checkbox from './documentation/components/checkbox'
 import button from './documentation/components/button'
 import switchDemo from './documentation/components/switch'
-import tableDemo from './documentation/components/tableDemo'
 import input from './documentation/components/input'
 import select from './documentation/components/select'
 import cascaderDemo from './documentation/components/cascaderDemo'
@@ -34,19 +32,19 @@ import tooltip from './documentation/components/tooltip'
 import popover from './documentation/components/popover'
 import alert from './documentation/components/alert'
 import datePicker from './documentation/components/datePicker'
-import inputNumberDemo from './documentation/components/inputNumberDemo'
+import inputNumber from './documentation/components/inputNumber'
 import nimbusIconDemo from './documentation/components/nimbusIconDemo'
-import radioDemo from './documentation/components/radioDemo'
+import radio from './documentation/components/radio'
 import formDemo from './documentation/components/formDemo'
-import tabsDemo from './documentation/components/tabsDemo'
+import tabs from './documentation/components/tabs'
 import timePicker from './documentation/components/timePicker'
 import confirm from './documentation/components/confirm'
 import backTop from './documentation/components/backTop'
-import dropdownDemo from './documentation/components/dropdownDemo'
+import dropdown from './documentation/components/dropdown'
 import scrollbarDebug from './debugComponents/scrollbarDebug'
 import scrollbarDebug2 from './debugComponents/scrollbarDebug2'
 import badge from './documentation/components/badge'
-import stepsDemo from './documentation/components/stepsDemo'
+import steps from './documentation/components/steps'
 import notification from './documentation/components/notification'
 import nimbusConfirmCardDemo from './documentation/components/nimbusConfirmCardDemo'
 import pagination from './documentation/components/pagination'
@@ -55,17 +53,17 @@ import tag from './documentation/components/tag'
 import timeline from './documentation/components/timeline'
 import progress from './documentation/components/progress'
 import divider from './documentation/components/divider'
-import popconfirmDemo from './documentation/components/popconfirmDemo'
+import popconfirm from './documentation/components/popconfirm'
 import anchor from './documentation/components/anchor'
 import popselect from './documentation/components/popselect'
 import app from './documentation/components/app'
 import advancedTable from './documentation/components/advancedTable'
 import transferDemo from './documentation/components/transferDemo'
 import spin from './documentation/components/spin'
-import drawerDemo from './documentation/components/drawerDemo'
+import drawer from './documentation/components/drawer'
 import loadingBar from './documentation/components/loadingBar'
-import timeDemo from './documentation/components/timeDemo'
-import sliderDemo from './documentation/components/sliderDemo'
+import time from './documentation/components/time'
+import slider from './documentation/components/slider'
 import treeDemo from './documentation/components/treeDemo'
 import affix from './documentation/components/affix'
 
@@ -138,7 +136,7 @@ const routes = [
       { path: '/n-checkbox', component: checkbox },
       { path: '/n-button', component: button },
       { path: '/n-switch', component: switchDemo },
-      { path: '/n-table', component: tableDemo },
+      // { path: '/n-table', component: tableDemo },
       { path: '/n-advance-table', component: advancedTable },
       { path: '/n-input', component: input },
       { path: '/n-select', component: select },
@@ -154,18 +152,18 @@ const routes = [
       { path: '/n-pagination', component: pagination },
       { path: '/n-alert', component: alert },
       { path: '/n-date-picker', component: datePicker },
-      { path: '/n-input-number', component: inputNumberDemo },
+      { path: '/n-input-number', component: inputNumber },
       { path: '/n-nimbus-icon', component: nimbusIconDemo },
-      { path: '/n-radio', component: radioDemo },
+      { path: '/n-radio', component: radio },
       { path: '/n-form', component: formDemo },
-      { path: '/n-tabs', component: tabsDemo },
+      { path: '/n-tabs', component: tabs },
       { path: '/n-time-picker', component: timePicker },
       { path: '/n-confirm', component: confirm },
       { path: '/n-router-debug', component: routerDebug },
       { path: '/n-modal-debug', component: modalDebug },
       { path: '/n-scrollbar-debug', component: scrollbarDebug },
       { path: '/n-badge', component: badge },
-      { path: '/n-steps', component: stepsDemo },
+      { path: '/n-steps', component: steps },
       { path: '/n-collapse', component: collapse },
       { path: '/n-progress', component: progress },
       { path: '/n-tag', component: tag },
@@ -174,18 +172,18 @@ const routes = [
       { path: '/n-back-top', component: backTop },
       { path: '/n-date-picker-debug', component: datePickerDebug },
       { path: '/n-divider', component: divider },
-      { path: '/n-popconfirm', component: popconfirmDemo },
+      { path: '/n-popconfirm', component: popconfirm },
       { path: '/n-anchor', component: anchor },
-      { path: '/n-dropdown', component: dropdownDemo },
+      { path: '/n-dropdown', component: dropdown },
       { path: '/n-popselect', component: popselect },
       { path: '/n-app', component: app },
       { path: '/n-cancel-mark-debug', component: cancelMarkDebug },
       { path: '/n-transfer', component: transferDemo },
       { path: '/n-spin', component: spin },
-      { path: '/n-drawer', component: drawerDemo },
+      { path: '/n-drawer', component: drawer },
       { path: '/n-loading-bar', component: loadingBar },
-      { path: '/n-time', component: timeDemo },
-      { path: '/n-slider', component: sliderDemo },
+      { path: '/n-time', component: time },
+      { path: '/n-slider', component: slider },
       { path: '/n-tree', component: treeDemo },
       { path: '/n-vertical-align-debug', component: verticalAlignDebug },
       { path: '/n-affix', component: affix }
diff --git a/doc/NaiveUIDemoLoader.js b/doc/NaiveUIDemoLoader.js
index 64e8b97d1..34003cfff 100644
--- a/doc/NaiveUIDemoLoader.js
+++ b/doc/NaiveUIDemoLoader.js
@@ -1,6 +1,6 @@
 // const { getOptions } = require('loader-utils')
 // const validateOptions = require('schema-utils')
-const prettier = require('prettier')
+// const prettier = require('prettier')
 
 module.exports = function (content) {
   const exampleReg = /<!--EXAMPLE_START-->([\s\S]*)?<!--EXAMPLE_END-->/
@@ -13,9 +13,9 @@ module.exports = function (content) {
   const script = content.match(scriptReg)[0]
   // console.log(styleExample)
   styleExample = styleExample === null ? '' : styleExample[1]
-  const example = prettier.format((sourceExample + '\n' + script + '\n' + styleExample), {
-    parser: 'html',
-    printWidth: 80
-  }).trim()
-  return content.replace(sourceReg, `<textarea v-pre>${example}</textarea>`)
+  // const example = prettier.format((sourceExample + '\n' + script + '\n' + styleExample), {
+  //   parser: 'html',
+  //   printWidth: 80
+  // }).trim()
+  return content.replace(sourceReg, `<textarea v-pre>${(sourceExample + '\n' + script + '\n' + styleExample)}</textarea>`)
 }
diff --git a/index.html b/index.html
deleted file mode 100644
index 9ae4a75f9..000000000
--- a/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>2s design</title>
-    <style></style>
-  </head>
-  <body>
-      <div id="app">
-         <router-view></router-view>
-      </div>
-  <script type="text/javascript" src="main.e2bb885.js"></script></body>
-</html>
\ No newline at end of file
diff --git a/package.json b/package.json
index d5a8d1c62..0bc85c76e 100644
--- a/package.json
+++ b/package.json
@@ -15,8 +15,8 @@
     "test-cov": "cross-env NODE_ENV=development BABEL_ENV=test karma start test/unit/karma.conf.js && http-server test/unit/coverage",
     "test-release": "cross-env NODE_ENV=production webpack-dev-server --config build/webpack.release.js",
     "release-doc": "cross-env NODE_ENV=development && rm -rf doc/dist && node doc/changeDemoVersion.js && webpack --config build/webpack.doc.js && sudo bash doc/deploy-doc.sh",
-    "build-doc": "cross-env NODE_ENV=development && rm -rf doc/dist && node doc/changeDemoVersion.js && webpack --config build/webpack.doc.js",
-    "build-private-doc": "cross-env NODE_ENV=development && rm -rf doc/dist && node doc/changeDemoVersion.js && webpack --config build/webpack.private-doc.js"
+    "build-doc": "cross-env NODE_ENV=production && rm -rf doc/dist && node doc/changeDemoVersion.js && webpack --config build/webpack.doc.js",
+    "build-private-doc": "cross-env NODE_ENV=production && rm -rf doc/dist && node doc/changeDemoVersion.js && webpack --config build/webpack.private-doc.js"
   },
   "author": "lecong.zhang",
   "license": "ISC",
@@ -38,7 +38,6 @@
     "babel-plugin-transform-vue-jsx": "^3.7.0",
     "babel-preset-env": "^1.7.0",
     "chai": "^4.2.0",
-    "codemirror": "^5.47.0",
     "copy-webpack-plugin": "^5.0.3",
     "cross-env": "^5.2.0",
     "css-loader": "^2.1.1",
@@ -55,7 +54,6 @@
     "highlight.js": "^9.15.10",
     "html-webpack-plugin": "^3.2.0",
     "http-server": "^0.11.1",
-    "iview": "^3.4.2",
     "jsdom": "^15.1.1",
     "karma": "^4.1.0",
     "karma-chrome-launcher": "^2.2.0",
@@ -70,7 +68,6 @@
     "marked": "^0.7.0",
     "memory-fs": "^0.4.1",
     "mocha": "^6.1.4",
-    "prettier": "^1.18.2",
     "prettier-eslint": "^9.0.0",
     "progress-bar-webpack-plugin": "^1.12.1",
     "regenerator-runtime": "^0.13.2",
@@ -88,6 +85,7 @@
     "vue-router": "^3.0.6",
     "vue-template-compiler": "^2.6.10",
     "webpack": "^4.30.0",
+    "webpack-bundle-analyzer": "^3.6.0",
     "webpack-cli": "^3.3.2",
     "webpack-dev-server": "^3.4.1"
   },
@@ -95,11 +93,11 @@
     "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
     "@vue/babel-preset-jsx": "^1.0.0",
     "async-validator": "^1.11.5",
+    "date-fns": "^2.5.1",
     "ionicons": "^4.5.8",
     "masonry-layout": "^4.2.2",
-    "moment": "^2.24.0",
     "node-sass": "^4.12.0",
-    "sass-loader": "^7.1.0",
-    "resize-observer-polyfill": "^1.5.1"
+    "resize-observer-polyfill": "^1.5.1",
+    "sass-loader": "^7.1.0"
   }
 }
diff --git a/packages/base/Picker/src/main.vue b/packages/base/Picker/src/main.vue
index 52fb5416e..49c973648 100644
--- a/packages/base/Picker/src/main.vue
+++ b/packages/base/Picker/src/main.vue
@@ -11,6 +11,8 @@
       [`n-${theme}-theme`]: theme
     }"
     @click="handleClick"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
     @mousedown.capture="handleMouseDown"
   >
     <template v-if="multiple && !filterable">
@@ -32,25 +34,10 @@
         >
           {{ option.label }}
         </n-tag>
-        <!-- <div
-          v-for="option in selectedOptions"
-          :key="option.value"
-          class="n-base-picker-tag"
-        >
-          <div class="n-base-picker-tag__content">
-            {{ option.label }}
-          </div>
-          <n-icon
-            class="n-base-picker-tag__icon"
-            type="md-close"
-            @click.stop="handleDeleteOption(option)"
-          />
-        </div> -->
         <n-base-cancel-mark
           class="n-base-picker__mark"
           :theme="theme"
-          arrow
-          :show="!remote"
+          :arrow="showArrow"
           :disabled="disabled"
           :active="active"
           :clearable="clearable && selected"
@@ -103,9 +90,8 @@
         <n-base-cancel-mark
           ref="cancelMark"
           class="n-base-picker__mark"
-          arrow
+          :arrow="showArrow"
           :theme="theme"
-          :show="!remote"
           :disabled="disabled"
           :active="active"
           :clearable="clearable && selected"
@@ -141,8 +127,7 @@
           ref="cancelMark"
           class="n-base-picker__mark"
           :theme="theme"
-          arrow
-          :show="!remote"
+          :arrow="showArrow"
           :disabled="disabled"
           :active="active"
           :clearable="clearable && selected"
@@ -173,9 +158,8 @@
         </div>
         <n-base-cancel-mark
           class="n-base-picker__mark"
-          arrow
           :theme="theme"
-          :show="!remote"
+          :arrow="showArrow"
           :disabled="disabled"
           :active="active"
           :clearable="clearable && selected"
@@ -252,16 +236,20 @@ export default {
   },
   data () {
     return {
-      patternInputFocused: false
+      patternInputFocused: false,
+      hover: false
     }
   },
   computed: {
+    showArrow () {
+      if (!this.clearable) return true
+      else return !(this.hover && this.selected)
+    },
     labelPlaceholder () {
       return this.selectedOption ? this.selectedOption.label : this.placeholder
     },
     label () {
       const label = (this.selectedOption && this.selectedOption.label) || ''
-      // console.log(label)
       return label
     },
     selected () {
@@ -289,6 +277,12 @@ export default {
     handleClear (e) {
       this.$emit('clear', e)
     },
+    handleMouseEnter () {
+      this.hover = true
+    },
+    handleMouseLeave () {
+      this.hover = false
+    },
     handleMouseDown (e) {
       if (!this.active) return
       const filterableElKeys = ['focusableEl1', 'patternInputWrapper', 'patternInput', 'focusableEl2']
diff --git a/packages/base/Protal/index.js b/packages/base/Portal/index.js
similarity index 100%
rename from packages/base/Protal/index.js
rename to packages/base/Portal/index.js
diff --git a/packages/base/Protal/src/main.js b/packages/base/Portal/src/main.js
similarity index 88%
rename from packages/base/Protal/src/main.js
rename to packages/base/Portal/src/main.js
index 4480df0c8..20945aa71 100644
--- a/packages/base/Protal/src/main.js
+++ b/packages/base/Portal/src/main.js
@@ -29,11 +29,11 @@ export default {
     const childrenCount = defaultSlot && defaultSlot.length
     if (defaultSlot && childrenCount) {
       if (childrenCount !== 1) {
-        console.error(`NBaseProtal: default slot has more than one child`)
+        console.error(`NBasePortal: default slot has more than one child`)
       }
       return defaultSlot[0]
     } else {
-      console.error(`NBaseProtal: default slot is empty`)
+      console.error(`NBasePortal: default slot is empty`)
       return null
     }
   }
diff --git a/packages/common/DatePicker/src/main.vue b/packages/common/DatePicker/src/main.vue
index 218082845..201939a9f 100644
--- a/packages/common/DatePicker/src/main.vue
+++ b/packages/common/DatePicker/src/main.vue
@@ -24,10 +24,12 @@
       :readonly="disabled ? 'disabled' : false"
       :splitor="splitor"
       split
+      icon="ios-calendar"
+      icon-position="right"
       @click="handleActivatorClick"
       @focus="handleFocus"
-      @blur="handleStartTimeInputBlur"
-      @input="handleStartTimeInput"
+      @blur="handleRangeInputBlur"
+      @input="handleRangeInput"
     />
     <!-- <input
         class="n-date-picker__input n-date-picker__input--splitor"
@@ -64,6 +66,8 @@
       :disabled="disabled"
       :placeholder="computedPlaceholder"
       :readonly="disabled ? 'disabled' : false"
+      icon="ios-calendar"
+      icon-position="right"
       @click="handleActivatorClick"
       @focus="handleFocus"
       @blur="handleTimeInputBlur"
@@ -90,6 +94,7 @@
       >
         <datetime-panel
           v-if="type === 'datetime'"
+          ref="panel"
           :value="value"
           :active="active"
           :actions="actions"
@@ -99,6 +104,7 @@
         />
         <date-panel
           v-else-if="type === 'date'"
+          ref="panel"
           :value="value"
           :active="active"
           :actions="actions"
@@ -108,6 +114,7 @@
         />
         <daterange-panel
           v-else-if="type === 'daterange'"
+          ref="panel"
           :value="value"
           :active="active"
           :actions="actions"
@@ -117,6 +124,7 @@
         />
         <datetimerange-panel
           v-else-if="type === 'datetimerange'"
+          ref="panel"
           :value="value"
           :active="active"
           :actions="actions"
@@ -130,7 +138,7 @@
 </template>
 
 <script>
-import moment from 'moment'
+// import moment from 'moment'
 import detachable from '../../../mixins/detachable'
 import placeable from '../../../mixins/placeable'
 import zindexable from '../../../mixins/zindexable'
@@ -142,18 +150,21 @@ import clickoutside from '../../../directives/clickoutside'
 import NInput from '../../Input'
 import withapp from '../../../mixins/withapp'
 import themeable from '../../../mixins/themeable'
+import { format, getTime, isValid } from 'date-fns'
+import { strictParse } from '../../../utils/dateUtils'
+import isEqual from 'lodash/isEqual'
 
 const DATE_FORMAT = {
-  date: 'YYYY-MM-DD',
-  datetime: 'YYYY-MM-DD HH:mm:ss',
-  daterange: 'YYYY-MM-DD',
-  datetimerange: 'YYYY-MM-DD HH:mm:ss'
+  date: 'yyyy-MM-dd',
+  datetime: 'yyyy-MM-dd HH:mm:ss',
+  daterange: 'yyyy-MM-dd',
+  datetimerange: 'yyyy-MM-dd HH:mm:ss'
 }
 const DATE_VALIDATE_FORMAT = {
-  date: ['YYYY-MM-DD', 'YYYY-MM-D', 'YYYY-M-D', 'YYYY-M-DD'],
-  datetime: ['YYYY-MM-DD HH:mm:ss', 'YYYY-MM-D HH:mm:ss', 'YYYY-M-D HH:mm:ss', 'YYYY-M-DD HH:mm:ss'],
-  daterange: ['YYYY-MM-DD', 'YYYY-MM-D', 'YYYY-M-D', 'YYYY-M-DD'],
-  datetimerange: ['YYYY-MM-DD HH:mm:ss', 'YYYY-MM-D HH:mm:ss', 'YYYY-M-D HH:mm:ss', 'YYYY-M-DD HH:mm:ss']
+  date: ['yyyy-MM-dd', 'yyyy-MM-D', 'yyyy-M-D', 'yyyy-M-dd'],
+  datetime: ['yyyy-MM-dd HH:mm:ss', 'yyyy-MM-D HH:mm:ss', 'yyyy-M-D HH:mm:ss', 'yyyy-M-dd HH:mm:ss'],
+  daterange: ['yyyy-MM-dd', 'yyyy-MM-D', 'yyyy-M-D', 'yyyy-M-dd'],
+  datetimerange: ['yyyy-MM-dd HH:mm:ss', 'yyyy-MM-D HH:mm:ss', 'yyyy-M-D HH:mm:ss', 'yyyy-M-dd HH:mm:ss']
 }
 const PLACEHOLDER = {
   date: 'Select date',
@@ -285,6 +296,7 @@ export default {
      * If new value is invalid, do nothing.
      */
     value (newValue) {
+      console.log(newValue)
       this.refresh(newValue)
     }
   },
@@ -293,7 +305,7 @@ export default {
   },
   methods: {
     handleClickOutside (e) {
-      if (!this.$refs.activator.contains(e.target)) {
+      if (this.active && !this.$refs.activator.contains(e.target)) {
         this.closeCalendar()
       }
     },
@@ -322,7 +334,7 @@ export default {
       if (value === null) {
         this.displayTime = ''
       } else {
-        this.displayTime = moment(value).format(this.computedFormat)
+        this.displayTime = format(value, this.computedFormat)
       }
     },
     refreshDisplayRange (values) {
@@ -330,8 +342,8 @@ export default {
         this.displayStartTime = ''
         this.displayEndTime = ''
       } else {
-        this.displayStartTime = moment(values[0]).format(this.computedFormat)
-        this.displayEndTime = moment(values[1]).format(this.computedFormat)
+        this.displayStartTime = format(values[0], this.computedFormat)
+        this.displayEndTime = format(values[1], this.computedFormat)
       }
     },
     /**
@@ -339,57 +351,82 @@ export default {
      */
     handleTimeInputBlur () {
       if (this.disabled) return
-      const newSelectedDateTime = moment(this.displayTime, this.computedValidateFormat, true)
-      if (newSelectedDateTime.isValid()) {
-        this.$emit('input', newSelectedDateTime.valueOf())
+      const newSelectedDateTime = strictParse(this.displayTime, this.computedFormat, new Date())
+      console.log('handle blur', this.displayTime, this.computedFormat, new Date())
+      console.log('handle blur new time', typeof newSelectedDateTime)
+      if (isValid(newSelectedDateTime)) {
+        this.$emit('input', getTime(newSelectedDateTime))
       } else {
         this.refreshDisplayTime(this.value)
       }
       this.isFocus = false
     },
-    handleStartTimeInputBlur () {
+    handleRangeInputBlur () {
       if (this.disabled) return
-      const startMoment = moment(this.displayStartTime, this.computedValidateFormat, true)
-      if (startMoment.isValid()) {
-        this.changeStartDateTime(startMoment)
-      } else {
-        this.refresh(this.value)
-      }
-      this.isFocus = false
-    },
-    handleEndTimeInputBlur () {
-      if (this.disabled) return
-      const endMoment = moment(this.displayStartTime, this.computedValidateFormat, true)
-      if (endMoment.isValid()) {
-        this.changeStartDateTime(endMoment)
-      } else {
+      const startDateTime = strictParse(this.displayStartTime, this.computedFormat, new Date())
+      const endDateTime = strictParse(this.displayEndTime, this.computedFormat, new Date())
+      if (!isValid(startDateTime) || !isValid(endDateTime)) {
         this.refresh(this.value)
+      } else {
+        this.changeStartEndTime(startDateTime, endDateTime)
       }
       this.isFocus = false
     },
+    // handleStartTimeInputBlur () {
+    //   if (this.disabled) return
+    //   const startMoment = strictParse(this.displayStartTime, this.computedFormat, null)
+    //   if (startMoment !== null) {
+    //     this.changeStartDateTime(startMoment)
+    //   } else {
+    //     this.refresh(this.value)
+    //   }
+    //   this.isFocus = false
+    // },
+    // handleEndTimeInputBlur () {
+    //   if (this.disabled) return
+    //   const endMoment = strictParse(this.displayStartTime, this.computedFormat, null)
+    //   if (endMoment !== null) {
+    //     this.changeStartDateTime(endMoment)
+    //   } else {
+    //     this.refresh(this.value)
+    //   }
+    //   this.isFocus = false
+    // },
     /**
      * Input
      */
     handleTimeInput (v) {
-      const newSelectedDateTime = moment(this.displayTime, this.computedFormat, true)
-      if (newSelectedDateTime.isValid()) {
-        this.$emit('input', newSelectedDateTime.valueOf())
+      console.log('handle input before strict parse')
+      const newSelectedDateTime = strictParse(this.displayTime, this.computedFormat, new Date())
+      console.log('handle input', this.displayTime, this.computedFormat, newSelectedDateTime)
+      console.log('handle input new time', newSelectedDateTime, typeof newSelectedDateTime)
+      if (isValid(newSelectedDateTime)) {
+        this.$emit('input', getTime(newSelectedDateTime))
       }
     },
-    handleStartTimeInput (e) {
-      const v = e.target.value
-      const newStartTime = moment(v, this.computedFormat, true)
-      if (newStartTime.isValid()) {
+    handleRangeInput (v) {
+      // const v = e.target.value
+      if (v === null) v = [null, null]
+      const [startTime, endTime] = v
+      const newStartTime = strictParse(startTime, this.computedFormat, new Date())
+      if (startTime !== this.displayStartTime && isValid(newStartTime)) {
         this.changeStartDateTime(newStartTime)
       }
-    },
-    handleEndTimeInput (e) {
-      const v = e.target.value
-      const newEndTime = moment(v, this.computedFormat, true)
-      if (newEndTime.isValid()) {
+      const newEndTime = strictParse(endTime, this.computedFormat, new Date())
+      if (endTime !== this.displayEndTime && isValid(newEndTime)) {
         this.changeEndDateTime(newEndTime)
       }
+      this.displayStartTime = startTime
+      this.displayEndTime = endTime
+      // console.log('handleRangeInput', v, newStartTime, newEndTime)
     },
+    // handleEndTimeInput (e) {
+    //   const v = e.target.value
+    //   const newEndTime = moment(v, this.computedFormat, true)
+    //   if (newEndTime.isValid()) {
+    //     this.changeEndDateTime(newEndTime)
+    //   }
+    // },
     /**
      * Click
      */
@@ -429,39 +466,46 @@ export default {
      * Utils
      */
     changeStartDateTime (time) {
+      // debugger
       if (typeof time !== 'number') {
-        time = time.valueOf()
+        time = getTime(time)
       }
       if (this.value === null) {
         this.$emit('input', [time, time])
         this.refresh([time, time])
       } else {
-        this.$emit('input', [time, Math.max(this.value[1], time)])
-        this.refresh([time, Math.max(this.value[1], time)])
+        const newValue = [time, Math.max(this.value[1], time)]
+        if (!isEqual(newValue, this.value)) {
+          this.$emit('input', newValue)
+          this.refresh(newValue)
+        }
+      }
+    },
+    changeEndDateTime (time) {
+      if (typeof time !== 'number') {
+        time = getTime(time)
+      }
+      if (this.value === null) {
+        this.$emit('input', [time, time])
+        this.refresh([time, time])
+      } else {
+        const newValue = [Math.min(this.value[0], time), time]
+        if (!isEqual(newValue, this.value)) {
+          this.$emit('input', newValue)
+          this.refresh(newValue)
+        }
       }
     },
     changeStartEndTime (startTime, endTime) {
       if (endTime === undefined) endTime = startTime
       if (typeof startTime !== 'number') {
-        startTime = startTime.valueOf()
+        startTime = getTime(startTime)
       }
       if (typeof endTime !== 'number') {
-        endTime = endTime.valueOf()
+        endTime = getTime(endTime)
       }
       this.$emit('input', [startTime, endTime])
       this.refresh([startTime, endTime])
-    },
-    changeEndDateTime (time) {
-      if (typeof time !== 'number') {
-        time = time.valueOf()
-      }
-      if (this.value === null) {
-        this.$emit('input', [time, time])
-        this.refresh([time, time])
-      } else {
-        this.$emit('input', [Math.min(this.value[0], time), time])
-        this.refresh([Math.min(this.value[0], time), time])
-      }
     }
   }
 }
diff --git a/packages/common/DatePicker/src/panel/commonCalendarMixin.js b/packages/common/DatePicker/src/panel/commonCalendarMixin.js
index fe8cdb5e7..d2f9343c9 100644
--- a/packages/common/DatePicker/src/panel/commonCalendarMixin.js
+++ b/packages/common/DatePicker/src/panel/commonCalendarMixin.js
@@ -1,4 +1,3 @@
-import { dateArray } from '../utils'
 import clickoutside from '../../../../directives/clickoutside'
 
 const TIME_CONST = {
@@ -19,7 +18,6 @@ export default {
     }
   },
   methods: {
-    dateArray,
     clearValue () {
       this.$emit('input', null)
     },
diff --git a/packages/common/DatePicker/src/panel/date.vue b/packages/common/DatePicker/src/panel/date.vue
index efef15e0a..5b753c9ff 100644
--- a/packages/common/DatePicker/src/panel/date.vue
+++ b/packages/common/DatePicker/src/panel/date.vue
@@ -24,7 +24,7 @@
           <n-base-icon type="backward" />
         </div>
         <div class="n-date-picker-panel-month-modifier__month-year">
-          {{ calendarDateTime.format('MMMM') }} {{ calendarDateTime.year() }}
+          {{ calendarMonth }} {{ calendarYear }}
         </div>
         <div
           class="n-date-picker-panel-month-modifier__next"
@@ -51,7 +51,7 @@
       <div class="n-date-picker-panel__divider" />
       <div class="n-date-picker-panel-dates">
         <div
-          v-for="(dateItem, i) in dateArray(calendarDateTime, valueAsMoment, currentDateTime)"
+          v-for="(dateItem, i) in dateArray"
           :key="i"
           class="n-date-picker-panel-dates__date"
           :class="{
@@ -62,7 +62,7 @@
           }"
           @click="handleDateClick(dateItem)"
         >
-          {{ dateItem.date }}
+          {{ dateItem.dateObject.date }}
         </div>
         <div
           v-if="!(actions && actions.length)"
@@ -97,15 +97,15 @@
 </template>
 
 <script>
-import moment from 'moment'
+// import moment from 'moment'
 import NBaseIcon from '../../../../base/Icon'
-import clickoutside from '../../../../directives/clickoutside'
 import uniCalendarMixin from './uniCalendarMixin'
+import { startOfDay } from 'date-fns'
 
 import NButton from '../../../Button'
 
-const DATETIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'
-const DATE_FORMAT = 'YYYY-MM-DD'
+const DATETIME_FORMAT = 'yyyy-MM-dd HH:mm:ss'
+const DATE_FORMAT = 'yyyy-MM-dd'
 const DATE_VALIDATE_FORMAT = ['YYYY-MM-DD', 'YYYY-MM-D', 'YYYY-M-D', 'YYYY-M-DD']
 
 const PLACEHOLDER = 'Select date and time'
@@ -115,9 +115,6 @@ export default {
     NButton,
     NBaseIcon
   },
-  directives: {
-    clickoutside
-  },
   mixins: [uniCalendarMixin],
   props: {
     placeholder: {
@@ -137,7 +134,7 @@ export default {
   },
   methods: {
     adjustValue (value) {
-      return moment(value).startOf('day')
+      return startOfDay(value) // moment(value).startOf('day')
     }
   }
 }
diff --git a/packages/common/DatePicker/src/panel/daterange.vue b/packages/common/DatePicker/src/panel/daterange.vue
index f46356bfe..f8b66d10a 100644
--- a/packages/common/DatePicker/src/panel/daterange.vue
+++ b/packages/common/DatePicker/src/panel/daterange.vue
@@ -3,7 +3,6 @@
     <div
       v-if="active"
       ref="self"
-      v-clickoutside.lazy="handleClickOutside"
       class="n-date-picker-panel n-date-picker-panel--daterange"
       :class="{
         [`n-${theme}-theme`]: theme
@@ -28,7 +27,7 @@
             <n-base-icon type="backward" />
           </div>
           <div class="n-date-picker-panel-month-modifier__month-year">
-            {{ startCalendarDateTime.format('MMMM') }} {{ startCalendarDateTime.year() }}
+            {{ startCalendarMonth }} {{ startCalendarYear }}
           </div>
           <div
             class="n-date-picker-panel-month-modifier__next"
@@ -57,7 +56,7 @@
           class="n-date-picker-panel-dates"
         >
           <div
-            v-for="(dateItem, i) in dateArray(startCalendarDateTime, valueAsMomentArray, currentDateTime)"
+            v-for="(dateItem, i) in startDateArray"
             :key="i"
             class="n-date-picker-panel-dates__date"
             :class="{
@@ -70,7 +69,7 @@
             @click="handleDateClick(dateItem)"
             @mouseenter="handleDateMouseEnter(dateItem)"
           >
-            {{ dateItem.date }}
+            {{ dateItem.dateObject.date }}
           </div>
         </div>
       </div>
@@ -93,7 +92,7 @@
             <n-base-icon type="backward" />
           </div>
           <div class="n-date-picker-panel-month-modifier__month-year">
-            {{ endCalendarDateTime.format('MMMM') }} {{ endCalendarDateTime.year() }}
+            {{ endCalendarMonth }} {{ endCalendarYear }}
           </div>
           <div
             class="n-date-picker-panel-month-modifier__next"
@@ -122,7 +121,7 @@
           class="n-date-picker-panel-dates"
         >
           <div
-            v-for="(dateItem, i) in dateArray(endCalendarDateTime, valueAsMomentArray, currentDateTime)"
+            v-for="(dateItem, i) in endDateArray"
             :key="i"
             class="n-date-picker-panel-dates__date"
             :class="{
@@ -135,7 +134,7 @@
             @click="handleDateClick(dateItem)"
             @mouseenter="handleDateMouseEnter(dateItem)"
           >
-            {{ dateItem.date }}
+            {{ dateItem.dateObject.date }}
           </div>
           <div
             v-if="!(actions && actions.length)"
@@ -171,12 +170,13 @@
 </template>
 
 <script>
-import moment from 'moment'
+// import moment from 'moment'
 import NButton from '../../../Button'
 import NBaseIcon from '../../../../base/Icon'
 import dualCalendarMixin from './dualCalendarMixin'
+import { startOfDay } from 'date-fns'
 
-const DATE_FORMAT = 'YYYY-MM-DD'
+const DATE_FORMAT = 'yyyy-MM-dd'
 const PLACEHOLDER = 'Select date and time'
 
 export default {
@@ -201,7 +201,7 @@ export default {
         this.syncCalendarTimeWithValue(this.value)
       }
     },
-    valueAsMomentArray (newValue) {
+    valueAsDateArray (newValue) {
       if (this.isSelecting) return
       if (newValue !== null) {
         this.syncCalendarTimeWithValue(newValue)
@@ -209,13 +209,13 @@ export default {
     }
   },
   created () {
-    if (this.valueAsMomentArray !== null) {
-      this.syncCalendarTimeWithValue(this.valueAsMomentArray)
+    if (this.valueAsDateArray !== null) {
+      this.syncCalendarTimeWithValue(this.valueAsDateArray)
     }
   },
   methods: {
-    adjustMoment (datetime) {
-      return moment(datetime).startOf('date')
+    adjustValue (datetime) {
+      return startOfDay(datetime)
     }
   }
 }
diff --git a/packages/common/DatePicker/src/panel/datetime.vue b/packages/common/DatePicker/src/panel/datetime.vue
index 183b71fad..5ceadd14e 100644
--- a/packages/common/DatePicker/src/panel/datetime.vue
+++ b/packages/common/DatePicker/src/panel/datetime.vue
@@ -19,6 +19,8 @@
           @input="handleDateInput"
         />
         <n-time-picker
+          position-mode="absolute"
+          :detached="false"
           class="n-date-picker-panel__time-input"
           :value="value"
           stop-selector-bubble
@@ -39,7 +41,7 @@
           <n-base-icon type="backward" />
         </div>
         <div class="n-date-picker-panel-month-modifier__month-year">
-          {{ calendarDateTime.format('MMMM') }} {{ calendarDateTime.year() }}
+          {{ calendarMonth }} {{ calendarYear }}
         </div>
         <div
           class="n-date-picker-panel-month-modifier__next"
@@ -66,7 +68,7 @@
       <div class="n-date-picker-panel__divider" />
       <div class="n-date-picker-panel-dates">
         <div
-          v-for="(dateItem, i) in dateArray(calendarDateTime, valueAsMoment, currentDateTime)"
+          v-for="(dateItem, i) in dateArray"
           :key="i"
           class="n-date-picker-panel-dates__date"
           :class="{
@@ -77,7 +79,7 @@
           }"
           @click="handleDateClick(dateItem)"
         >
-          {{ dateItem.date }}
+          {{ dateItem.dateObject.date }}
         </div>
         <div
           v-if="!(actions && actions.length)"
@@ -112,17 +114,17 @@
 </template>
 
 <script>
-import moment from 'moment'
+// import moment from 'moment'
 import NBaseIcon from '../../../../base/Icon'
-import clickoutside from '../../../../directives/clickoutside'
 import uniCalendarMixin from './uniCalendarMixin'
+import { startOfSecond } from 'date-fns'
 
 import NButton from '../../../Button'
 import NTimePicker from '../../../TimePicker'
 import NInput from '../../../Input'
 
-const DATETIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'
-const DATE_FORMAT = 'YYYY-MM-DD'
+const DATETIME_FORMAT = 'yyyy-MM-dd HH:mm:ss'
+const DATE_FORMAT = 'yyyy-MM-dd'
 const DATE_VALIDATE_FORMAT = ['YYYY-MM-DD', 'YYYY-MM-D', 'YYYY-M-D', 'YYYY-M-DD']
 
 const PLACEHOLDER = 'Select date and time'
@@ -134,9 +136,6 @@ export default {
     NTimePicker,
     NInput
   },
-  directives: {
-    clickoutside
-  },
   mixins: [uniCalendarMixin],
   props: {
     placeholder: {
@@ -156,7 +155,8 @@ export default {
   },
   methods: {
     adjustValue (datetime) {
-      return moment(datetime).startOf('second')
+      return startOfSecond(datetime)
+      // return moment(datetime).startOf('second')
     },
     handleTimePickerInput (value) {
       this.$emit('input', value)
diff --git a/packages/common/DatePicker/src/panel/datetimerange.vue b/packages/common/DatePicker/src/panel/datetimerange.vue
index 950b28ce8..905b44b06 100644
--- a/packages/common/DatePicker/src/panel/datetimerange.vue
+++ b/packages/common/DatePicker/src/panel/datetimerange.vue
@@ -20,6 +20,8 @@
           @input="handleStartDateInput"
         />
         <n-time-picker
+          :detached="false"
+          position-mode="absolute"
           class="n-date-picker-panel__time-input"
           :value="startTimeValue"
           stop-selector-bubble
@@ -38,6 +40,8 @@
           @input="handleEndDateInput"
         />
         <n-time-picker
+          :detached="false"
+          position-mode="absolute"
           class="n-date-picker-panel__time-input"
           :value="endTimeValue"
           stop-selector-bubble
@@ -66,7 +70,7 @@
             />
           </div>
           <div class="n-date-picker-panel-month-modifier__month-year">
-            {{ startCalendarDateTime.format('MMMM') }} {{ startCalendarDateTime.year() }}
+            {{ startCalendarMonth }} {{ startCalendarYear }}
           </div>
           <div
             class="n-date-picker-panel-month-modifier__next"
@@ -99,7 +103,7 @@
           class="n-date-picker-panel-dates"
         >
           <div
-            v-for="(dateItem, i) in dateArray(startCalendarDateTime, valueAsMomentArray, currentDateTime)"
+            v-for="(dateItem, i) in startDateArray"
             :key="i"
             class="n-date-picker-panel-dates__date"
             :class="{
@@ -112,7 +116,7 @@
             @click="handleDateClick(dateItem)"
             @mouseenter="handleDateMouseEnter(dateItem)"
           >
-            {{ dateItem.date }}
+            {{ dateItem.dateObject.date }}
           </div>
         </div>
       </div>
@@ -139,7 +143,7 @@
             />
           </div>
           <div class="n-date-picker-panel-month-modifier__month-year">
-            {{ endCalendarDateTime.format('MMMM') }} {{ endCalendarDateTime.year() }}
+            {{ endCalendarMonth }} {{ endCalendarYear }}
           </div>
           <div
             class="n-date-picker-panel-month-modifier__next"
@@ -172,7 +176,7 @@
           class="n-date-picker-panel-dates"
         >
           <div
-            v-for="(dateItem, i) in dateArray(endCalendarDateTime, valueAsMomentArray, currentDateTime)"
+            v-for="(dateItem, i) in endDateArray"
             :key="i"
             class="n-date-picker-panel-dates__date"
             :class="{
@@ -185,7 +189,7 @@
             @click="handleDateClick(dateItem)"
             @mouseenter="handleDateMouseEnter(dateItem)"
           >
-            {{ dateItem.date }}
+            {{ dateItem.dateObject.date }}
           </div>
           <div
             v-if="!(actions && actions.length)"
@@ -225,16 +229,18 @@
 </template>
 
 <script>
-import moment from 'moment'
+// import moment from 'moment'
 import NButton from '../../../Button'
 import NTimePicker from '../../../TimePicker'
 import NInput from '../../../Input'
 import dualCalendarMixin from './dualCalendarMixin'
 import NBaseIcon from '../../../../base/Icon'
+import { startOfSecond, format, set, getYear, getMonth, getDate, isValid } from 'date-fns'
+import { strictParse } from '../../../../utils/dateUtils'
 
-const DATETIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'
-const DATE_FORMAT = 'YYYY-MM-DD'
-const DATE_VALIDATE_FORMAT = ['YYYY-MM-DD', 'YYYY-MM-D', 'YYYY-M-D', 'YYYY-M-DD']
+const DATETIME_FORMAT = 'yyyy-MM-dd HH:mm:ss'
+const DATE_FORMAT = 'yyyy-MM-dd'
+const DATE_VALIDATE_FORMAT = ['yyyy-MM-dd', 'yyyy-MM-D', 'yyyy-M-D', 'yyyy-M-dd']
 const PLACEHOLDER = 'Select date and time'
 
 export default {
@@ -269,11 +275,11 @@ export default {
         this.syncCalendarTimeWithValue(this.value)
       }
     },
-    valueAsMomentArray (newValue) {
+    valueAsDateArray (newValue) {
       if (newValue !== null) {
         const [startMoment, endMoment] = newValue
-        this.startDateDisplayString = startMoment.format(this.dateFormat)
-        this.endDateDisplayString = endMoment.format(this.dateFormat)
+        this.startDateDisplayString = format(startMoment, this.dateFormat)
+        this.endDateDisplayString = format(endMoment, this.dateFormat)
         if (!this.isSelecting) {
           this.syncCalendarTimeWithValue(newValue)
         }
@@ -284,11 +290,11 @@ export default {
     }
   },
   created () {
-    if (this.valueAsMomentArray !== null) {
-      const [startMoment, endMoment] = this.valueAsMomentArray
-      this.startDateDisplayString = startMoment.format(this.dateFormat)
-      this.endDateDisplayString = endMoment.format(this.dateFormat)
-      this.syncCalendarTimeWithValue(this.valueAsMomentArray)
+    if (this.valueAsDateArray !== null) {
+      const [startMoment, endMoment] = this.valueAsDateArray
+      this.startDateDisplayString = format(startMoment, this.dateFormat)
+      this.endDateDisplayString = format(endMoment, this.dateFormat)
+      this.syncCalendarTimeWithValue(this.valueAsDateArray)
     } else {
       this.startDateDisplayString = ''
       this.endDateDisplayString = ''
@@ -296,43 +302,45 @@ export default {
   },
   methods: {
     adjustValue (datetime) {
-      return moment(datetime).startOf('second')
+      return startOfSecond(datetime)
     },
     handleStartDateInput (value) {
-      const date = moment(value, this.dateFormat, true)
-      if (date.isValid()) {
-        if (!this.valueAsMomentArray) {
-          const newValue = moment()
-          newValue.year(date.year())
-          newValue.month(date.month())
-          newValue.date(date.date())
+      const date = strictParse(value, this.dateFormat, new Date())
+      if (isValid(date)) {
+        if (!this.valueAsDateArray) {
+          const newValue = set(new Date(), {
+            year: getYear(date),
+            month: getMonth(date),
+            date: getDate(date)
+          })
           this.changeStartDateTime(this.adjustValue(newValue))
         } else {
-          const newValue = this.valueAsMomentArray[0]
-          newValue.year(date.year())
-          newValue.month(date.month())
-          newValue.date(date.date())
+          const newValue = set(this.valueAsDateArray[0], {
+            year: getYear(date),
+            month: getMonth(date),
+            date: getDate(date)
+          })
           this.changeStartDateTime(this.adjustValue(newValue))
         }
-      } else {
-        // do nothing
       }
     },
     handleEndDateInput (value) {
       /** strict check when input */
-      const date = moment(value, this.dateFormat, true)
-      if (date.isValid()) {
-        if (!this.valueAsMomentArray) {
-          const newValue = moment()
-          newValue.year(date.year())
-          newValue.month(date.month())
-          newValue.date(date.date())
+      const date = strictParse(value, this.dateFormat, new Date())
+      if (isValid(date)) {
+        if (!this.valueAsDateArray) {
+          const newValue = set(new Date(), {
+            year: getYear(date),
+            month: getMonth(date),
+            date: getDate(date)
+          })
           this.changeEndDateTime(this.adjustValue(newValue))
         } else {
-          const newValue = this.valueAsMomentArray[1]
-          newValue.year(date.year())
-          newValue.month(date.month())
-          newValue.date(date.date())
+          const newValue = set(this.valueAsDateArray[1], {
+            year: getYear(date),
+            month: getMonth(date),
+            date: getDate(date)
+          })
           this.changeEndDateTime(this.adjustValue(newValue))
         }
       } else {
@@ -340,19 +348,22 @@ export default {
       }
     },
     handleStartDateInputBlur () {
-      const date = moment(this.startDateDisplayString, this.dateValidateFormat, true)
-      if (date.isValid()) {
-        if (!this.valueAsMomentArray) {
-          const newValue = moment()
-          newValue.year(date.year())
-          newValue.month(date.month())
-          newValue.date(date.date())
+      const date = strictParse(this.startDateDisplayString, this.dateFormat, new Date())
+      // const date = moment(this.startDateDisplayString, this.dateValidateFormat, true)
+      if (isValid(date)) {
+        if (!this.valueAsDateArray) {
+          const newValue = set(new Date(), {
+            year: getYear(date),
+            month: getMonth(date),
+            date: getDate(date)
+          })
           this.changeStartDateTime(this.adjustValue(newValue))
         } else {
-          const newValue = this.valueAsMomentArray[0]
-          newValue.year(date.year())
-          newValue.month(date.month())
-          newValue.date(date.date())
+          const newValue = set(this.valueAsDateArray[0], {
+            year: getYear(date),
+            month: getMonth(date),
+            date: getDate(date)
+          })
           this.changeStartDateTime(this.adjustValue(newValue))
         }
       } else {
@@ -360,19 +371,21 @@ export default {
       }
     },
     handleEndDateInputBlur () {
-      const date = moment(this.endDateDisplayString, this.dateValidateFormat, true)
-      if (date.isValid()) {
-        if (!this.valueAsMomentArray) {
-          const newValue = moment()
-          newValue.year(date.year())
-          newValue.month(date.month())
-          newValue.date(date.date())
+      const date = strictParse(this.endDateDisplayString, this.dateFormat, new Date())
+      if (isValid(date)) {
+        if (!this.valueAsDateArray) {
+          const newValue = set(new Date(), {
+            year: getYear(date),
+            month: getMonth(date),
+            date: getDate(date)
+          })
           this.changeEndDateTime(this.adjustValue(newValue))
         } else {
-          const newValue = this.valueAsMomentArray[1]
-          newValue.year(date.year())
-          newValue.month(date.month())
-          newValue.date(date.date())
+          const newValue = set(this.valueAsDateArray[1], {
+            year: getYear(date),
+            month: getMonth(date),
+            date: getDate(date)
+          })
           this.changeEndDateTime(this.adjustValue(newValue))
         }
       } else {
@@ -384,16 +397,16 @@ export default {
      * else update datetime related string
      */
     refreshDisplayDateString (times) {
-      if (this.valueAsMomentArray === null) {
+      if (this.valueAsDateArray === null) {
         this.startDateDisplayString = ''
         this.endDateDisplayString = ''
         return
       }
       if (times === undefined) {
-        times = this.valueAsMomentArray
+        times = this.valueAsDateArray
       }
-      this.startDateDisplayString = times[0].format(this.dateFormat)
-      this.endDateDisplayString = times[1].format(this.dateFormat)
+      this.startDateDisplayString = format(times[0], this.dateFormat)
+      this.endDateDisplayString = format(times[1], this.dateFormat)
     },
     handleStartTimePickerInput (value) {
       this.changeStartDateTime(value)
diff --git a/packages/common/DatePicker/src/panel/dualCalendarMixin.js b/packages/common/DatePicker/src/panel/dualCalendarMixin.js
index 28aa95b97..66f10ecac 100644
--- a/packages/common/DatePicker/src/panel/dualCalendarMixin.js
+++ b/packages/common/DatePicker/src/panel/dualCalendarMixin.js
@@ -1,4 +1,7 @@
-import moment from 'moment'
+// import moment from 'moment'
+import { isValid, getMonth, getYear, getTime, format, addMonths, startOfMonth } from 'date-fns'
+import { dateArray } from '../../../../utils/dateUtils'
+
 import commonCalendarMixin from './commonCalendarMixin'
 
 export default {
@@ -40,9 +43,9 @@ export default {
     return {
       startDateDisplayString: '',
       endDateDisplayString: '',
-      startCalendarDateTime: moment(),
-      endCalendarDateTime: moment().add(1, 'month'),
-      currentDateTime: moment(),
+      startCalendarDateTime: new Date(),
+      endCalendarDateTime: addMonths(new Date(), 1),
+      currentDateTime: new Date(),
       calendar: [],
       isSelecting: false,
       startDateTime: null,
@@ -51,6 +54,24 @@ export default {
     }
   },
   computed: {
+    startDateArray () {
+      return dateArray(this.startCalendarDateTime, this.valueAsDateArray, this.currentDateTime)
+    },
+    endDateArray () {
+      return dateArray(this.endCalendarDateTime, this.valueAsDateArray, this.currentDateTime)
+    },
+    startCalendarMonth () {
+      return format(this.startCalendarDateTime, 'MMMM')
+    },
+    endCalendarMonth () {
+      return format(this.endCalendarDateTime, 'MMMM')
+    },
+    startCalendarYear () {
+      return format(this.startCalendarDateTime, 'yyyy')
+    },
+    endCalendarYear () {
+      return format(this.endCalendarDateTime, 'yyyy')
+    },
     startTimeValue () {
       if (this.value !== null) return this.value[0]
       else return null
@@ -63,31 +84,31 @@ export default {
      * If value is valid return null.
      * If value is not valid, return moment(value)
      */
-    valueAsMomentArray () {
+    valueAsDateArray () {
       if (this.value === null || this.value === undefined) return null
-      const startMoment = moment(this.value[0])
-      const endMoment = moment(this.value[1])
-      if (startMoment.isValid() && endMoment.isValid()) {
+      const startMoment = new Date(this.value[0])
+      const endMoment = new Date(this.value[1])
+      if (isValid(startMoment) && isValid(startMoment)) {
         return [startMoment, endMoment]
       } else return null
     }
   },
   watch: {
     startCalendarDateTime (newCalendarDateTime, oldCalendarDateTime) {
-      if (newCalendarDateTime.isValid() && oldCalendarDateTime) {
+      if (isValid(newCalendarDateTime) && oldCalendarDateTime) {
         if (
-          newCalendarDateTime.year() !== oldCalendarDateTime.year() ||
-          newCalendarDateTime.month() !== oldCalendarDateTime.month()
+          getYear(newCalendarDateTime) !== getYear(oldCalendarDateTime) ||
+          getMonth(newCalendarDateTime) !== getMonth(oldCalendarDateTime)
         ) {
           this.banTransitionOneTick()
         }
       }
     },
     endCalendarDateTime (newCalendarDateTime, oldCalendarDateTime) {
-      if (newCalendarDateTime.isValid() && oldCalendarDateTime) {
+      if (isValid(newCalendarDateTime) && oldCalendarDateTime) {
         if (
-          newCalendarDateTime.year() !== oldCalendarDateTime.year() ||
-          newCalendarDateTime.month() !== oldCalendarDateTime.month()
+          getYear(newCalendarDateTime) !== getYear(oldCalendarDateTime) ||
+          getMonth(newCalendarDateTime) !== getMonth(oldCalendarDateTime)
         ) {
           this.banTransitionOneTick()
         }
@@ -106,13 +127,14 @@ export default {
       this.closeCalendar()
     },
     syncCalendarTimeWithValue (value) {
+      // console.log('syncCalendarTimeWithValue', value)
       if (value === null) return
       const [startMoment, endMoment] = value
-      this.startCalendarDateTime = moment(startMoment)
-      if (moment(endMoment).startOf('month').valueOf() <= moment(startMoment).startOf('month').valueOf()) {
-        this.endCalendarDateTime = moment(startMoment).add(1, 'month').startOf('month')
+      this.startCalendarDateTime = new Date(startMoment)
+      if (startOfMonth(endMoment) <= startOfMonth(startMoment)) {
+        this.endCalendarDateTime = startOfMonth(addMonths(startMoment, 1))
       } else {
-        this.endCalendarDateTime = moment(endMoment).startOf('month')
+        this.endCalendarDateTime = startOfMonth(endMoment)
       }
     },
     handleDateClick (dateItem) {
@@ -145,7 +167,7 @@ export default {
     },
     changeStartDateTime (time) {
       if (typeof time !== 'number') {
-        time = time.valueOf()
+        time = getTime(time)
       }
       if (this.value === null) {
         this.$emit('input', [time, time])
@@ -155,7 +177,7 @@ export default {
     },
     changeEndDateTime (time) {
       if (typeof time !== 'number') {
-        time = time.valueOf()
+        time = getTime(time)
       }
       if (this.value === null) {
         this.$emit('input', [time, time])
@@ -166,55 +188,55 @@ export default {
     changeStartEndTime (startTime, endTime) {
       if (endTime === undefined) endTime = startTime
       if (typeof startTime !== 'number') {
-        startTime = startTime.valueOf()
+        startTime = getTime(startTime)
       }
       if (typeof endTime !== 'number') {
-        endTime = endTime.valueOf()
+        endTime = getTime(endTime)
       }
       this.$emit('input', [startTime, endTime])
     },
     /** change calendar time */
     adjustCalendarTimes (byStartCalendarTime) {
-      const startTime = this.startCalendarDateTime.startOf('month').valueOf()
-      const endTime = this.endCalendarDateTime.startOf('month').valueOf()
+      const startTime = startOfMonth(this.startCalendarDateTime)
+      const endTime = startOfMonth(this.endCalendarDateTime)
       if (startTime >= endTime) {
         if (byStartCalendarTime) {
-          this.endCalendarDateTime = moment(startTime).add(1, 'month')
+          this.endCalendarDateTime = addMonths(startTime, 1)
         } else {
-          this.startCalendarDateTime = moment(endTime).subtract(1, 'month')
+          this.startCalendarDateTime = addMonths(endTime, -1)
         }
       }
     },
     startCalendarNextYear () {
-      this.startCalendarDateTime = moment(this.startCalendarDateTime).add(1, 'year')
+      this.startCalendarDateTime = addMonths(this.startCalendarDateTime, 1)
       this.adjustCalendarTimes(true)
     },
     startCalendarPrevYear () {
-      this.startCalendarDateTime = moment(this.startCalendarDateTime).subtract(1, 'year')
+      this.startCalendarDateTime = addMonths(this.startCalendarDateTime, -1)
       this.adjustCalendarTimes(true)
     },
     startCalendarNextMonth () {
-      this.startCalendarDateTime = moment(this.startCalendarDateTime).add(1, 'month')
+      this.startCalendarDateTime = addMonths(this.startCalendarDateTime, 1)
       this.adjustCalendarTimes(true)
     },
     startCalendarPrevMonth () {
-      this.startCalendarDateTime = moment(this.startCalendarDateTime).subtract(1, 'month')
+      this.startCalendarDateTime = addMonths(this.startCalendarDateTime, -1)
       this.adjustCalendarTimes(true)
     },
     endCalendarNextYear () {
-      this.endCalendarDateTime = moment(this.endCalendarDateTime).add(1, 'year')
+      this.endCalendarDateTime = addMonths(this.endCalendarDateTime, 1)
       this.adjustCalendarTimes(false)
     },
     endCalendarPrevYear () {
-      this.endCalendarDateTime = moment(this.endCalendarDateTime).subtract(1, 'year')
+      this.endCalendarDateTime = addMonths(this.endCalendarDateTime, -1)
       this.adjustCalendarTimes(false)
     },
     endCalendarNextMonth () {
-      this.endCalendarDateTime = moment(this.endCalendarDateTime).add(1, 'month')
+      this.endCalendarDateTime = addMonths(this.endCalendarDateTime, 1)
       this.adjustCalendarTimes(false)
     },
     endCalendarPrevMonth () {
-      this.endCalendarDateTime = moment(this.endCalendarDateTime).subtract(1, 'month')
+      this.endCalendarDateTime = addMonths(this.endCalendarDateTime, -1)
       this.adjustCalendarTimes(false)
     }
   }
diff --git a/packages/common/DatePicker/src/panel/uniCalendarMixin.js b/packages/common/DatePicker/src/panel/uniCalendarMixin.js
index 9667d8993..d23af06a2 100644
--- a/packages/common/DatePicker/src/panel/uniCalendarMixin.js
+++ b/packages/common/DatePicker/src/panel/uniCalendarMixin.js
@@ -1,6 +1,9 @@
-import moment from 'moment'
+// import moment from 'moment'
 import commonCalendarMixin from './commonCalendarMixin'
-import { setDate } from '../utils'
+import { isValid, getDate, getMonth, getYear, getTime, isSameMonth, format, addMonths, addYears, set } from 'date-fns'
+import { dateArray, strictParse } from '../../../../utils/dateUtils'
+
+// import { setYMD } from '../utils'
 
 export default {
   mixins: [commonCalendarMixin],
@@ -30,49 +33,61 @@ export default {
   data () {
     return {
       displayDateString: '',
-      calendarDateTime: moment(),
-      currentDateTime: moment()
+      calendarDateTime: new Date(), // moment(),
+      currentDateTime: new Date() // moment()
     }
   },
   computed: {
+    dateArray () {
+      return dateArray(this.calendarDateTime, this.valueAsDateTime, this.currentDateTime)
+    },
+    calendarMonth () {
+      return format(this.calendarDateTime, 'MMM', 'Invalid Month')
+    },
+    calendarYear () {
+      return format(this.calendarDateTime, 'y', 'Invalid Year')
+    },
     /**
      * If value is valid return null.
      * If value is not valid, return moment(value)
      */
-    valueAsMoment () {
+    valueAsDateTime () {
       if (this.value === null || this.value === undefined) return null
-      const newSelectedDateTime = moment(this.value)
-      if (newSelectedDateTime.isValid()) {
-        return newSelectedDateTime
-      } else {
-        return null
-      }
+      return new Date(this.value)
+      // const newSelectedDateTime = new Date(this.value)
+      // return new
+      // if (newSelectedDateTime.isValid()) {
+      //   return newSelectedDateTime
+      // } else {
+      //   return null
+      // }
     }
   },
   watch: {
     calendarDateTime (newCalendarDateTime, oldCalendarDateTime) {
-      if (newCalendarDateTime.isValid() && oldCalendarDateTime) {
-        if (
-          newCalendarDateTime.year() !== oldCalendarDateTime.year() ||
-          newCalendarDateTime.month() !== oldCalendarDateTime.month()
-        ) {
-          this.banTransitionOneTick()
-        }
+      // if (newCalendarDateTime.isValid() && oldCalendarDateTime) {
+      if (
+        !isSameMonth(newCalendarDateTime, oldCalendarDateTime)
+      // newCalendarDateTime.year() !== oldCalendarDateTime.year() ||
+      // newCalendarDateTime.month() !== oldCalendarDateTime.month()
+      ) {
+        this.banTransitionOneTick()
       }
+      // }
     },
-    valueAsMoment (newValue) {
+    valueAsDateTime (newValue) {
       if (newValue !== null) {
-        this.displayDateString = newValue.format(this.dateFormat)
-        this.calendarDateTime = moment(this.valueAsMoment)
+        this.displayDateString = format(newValue, this.dateFormat) // newValue.format(this.dateFormat)
+        this.calendarDateTime = newValue
       } else {
         this.displayDateString = ''
       }
     }
   },
   created () {
-    if (this.valueAsMoment !== null) {
-      this.displayDateString = this.valueAsMoment.format(this.dateFormat)
-      this.calendarDateTime = moment(this.valueAsMoment)
+    if (this.valueAsDateTime !== null) {
+      this.displayDateString = format(this.valueAsDateTime, this.dateFormat) // this.valueAsDateTime.format(this.dateFormat)
+      this.calendarDateTime = this.valueAsDateTime
     } else {
       this.displayDateString = ''
     }
@@ -81,53 +96,78 @@ export default {
     handleClickOutside () {
       this.closeCalendar()
     },
-    setValue (newSelectedDateTime) {
-      if (newSelectedDateTime === null || newSelectedDateTime === undefined) {
-        this.$emit('input', null)
-      } else if (newSelectedDateTime.isValid()) {
-        const adjustedDateTime = this.adjustValue(newSelectedDateTime)
-        if (this.valueAsMoment === null || adjustedDateTime.valueOf() !== this.valueAsMoment.valueOf()) {
-          this.refreshDisplayDateString(adjustedDateTime)
-          this.$emit('input', adjustedDateTime.valueOf())
-        }
-      }
-    },
+    // setValue (newSelectedDateTime) {
+    //   if (newSelectedDateTime === null || newSelectedDateTime === undefined) {
+    //     this.$emit('input', null)
+    //   } else {
+    //     const adjustedDateTime = this.adjustValue(newSelectedDateTime)
+    //     if (this.valueAsDateTime === null || adjustedDateTime.valueOf() !== this.valueAsDateTime.valueOf()) {
+    //       this.refreshDisplayDateString(adjustedDateTime)
+    //       this.$emit('input', adjustedDateTime.valueOf())
+    //     }
+    //   }
+    // },
     handleDateInput (value) {
-      const date = moment(value, this.dateFormat, true)
-      if (date.isValid()) {
-        if (!this.valueAsMoment) {
-          const newValue = moment()
-          newValue.year(date.year())
-          newValue.month(date.month())
-          newValue.date(date.date())
-          this.$emit('input', this.adjustValue(newValue).valueOf())
+      const date = strictParse(value, this.dateFormat, new Date())// moment(value, this.dateFormat, true)
+      // console.log('handle date input', value)
+      if (isValid(date)) {
+        if (!this.valueAsDateTime) {
+          this.$emit('input', getTime(this.adjustValue(new Date())))
         } else {
-          const newValue = this.valueAsMoment
-          newValue.year(date.year())
-          newValue.month(date.month())
-          newValue.date(date.date())
-          this.$emit('input', this.adjustValue(newValue).valueOf())
+          const newDateTime = set(this.valueAsDateTime, {
+            year: getYear(date),
+            month: getMonth(date),
+            date: getDate(date)
+          })
+          this.$emit('input', getTime(this.adjustValue(newDateTime)))
         }
-      } else {
-        // do nothing
       }
+      // if (date.isValid()) {
+      //   if (!this.valueAsDateTime) {
+      //     const newValue = moment()
+      //     newValue.year(date.year())
+      //     newValue.month(date.month())
+      //     newValue.date(date.date())
+      //     this.$emit('input', this.adjustValue(newValue).valueOf())
+      //   } else {
+      //     const newValue = this.valueAsDateTime
+      //     newValue.year(date.year())
+      //     newValue.month(date.month())
+      //     newValue.date(date.date())
+      //     this.$emit('input', this.adjustValue(newValue).valueOf())
+      //   }
+      // } else {
+      //   // do nothing
+      // }
     },
     handleDateInputBlur () {
-      const date = moment(this.displayDateString, this.dateValidateFormat, true)
-      if (date.isValid()) {
-        if (!this.valueAsMoment) {
-          const newValue = moment()
-          newValue.year(date.year())
-          newValue.month(date.month())
-          newValue.date(date.date())
-          this.$emit('input', this.adjustValue(newValue).valueOf())
+      const date = strictParse(this.displayDateString, this.dateFormat, new Date())
+      // console.log('blur', this.displayDateString, date)
+      // const date = moment(this.displayDateString, this.dateValidateFormat, true)
+      if (isValid(date)) {
+        if (!this.valueAsDateTime) {
+          this.$emit('input', getTime(this.adjustValue(new Date())))
         } else {
-          const newValue = this.valueAsMoment
-          newValue.year(date.year())
-          newValue.month(date.month())
-          newValue.date(date.date())
-          this.$emit('input', this.adjustValue(newValue).valueOf())
+          const newDateTime = set(this.valueAsDateTime, {
+            year: getYear(date),
+            month: getMonth(date),
+            date: getDate(date)
+          })
+          this.$emit('input', getTime(this.adjustValue(newDateTime)))
         }
+        // if (!this.valueAsDateTime) {
+        //   const newValue = moment()
+        //   newValue.year(date.year())
+        //   newValue.month(date.month())
+        //   newValue.date(date.date())
+        //   this.$emit('input', this.adjustValue(newValue).valueOf())
+        // } else {
+        //   const newValue = this.valueAsDateTime
+        //   newValue.year(date.year())
+        //   newValue.month(date.month())
+        //   newValue.date(date.date())
+        //   this.$emit('input', this.adjustValue(newValue).valueOf())
+        // }
       } else {
         this.refreshDisplayDateString()
       }
@@ -137,32 +177,32 @@ export default {
       this.displayDateString = ''
     },
     setSelectedDateTimeToNow () {
-      this.$emit('input', this.adjustValue(moment()).valueOf())
-      this.calendarDateTime = moment()
+      this.$emit('input', getTime(this.adjustValue(new Date())))
+      this.calendarDateTime = new Date() // moment()
     },
     handleDateClick (dateItem) {
       // console.log(dateItem)
-      let newSelectedDateTime = moment()
-      if (this.valueAsMoment !== null) {
-        newSelectedDateTime = moment(this.valueAsMoment)
+      let newSelectedDateTime = new Date()
+      if (this.valueAsDateTime !== null) {
+        newSelectedDateTime = this.valueAsDateTime
       }
-      newSelectedDateTime = setDate(newSelectedDateTime, dateItem)
+      newSelectedDateTime = set(newSelectedDateTime, dateItem.dateObject)
       // console.log(newSelectedDateTime.format('YYYY MM DD'))
-      this.$emit('input', this.adjustValue(newSelectedDateTime).valueOf())
+      this.$emit('input', getTime(this.adjustValue(newSelectedDateTime)))
     },
     /**
      * If not selected, display nothing,
      * else update datetime related string
      */
     refreshDisplayDateString (time) {
-      if (this.valueAsMoment === null) {
+      if (this.valueAsDateTime === null) {
         this.displayDateString = ''
         return
       }
       if (time === undefined) {
-        time = this.valueAsMoment
+        time = this.valueAsDateTime
       }
-      this.displayDateString = time.format(this.dateFormat)
+      this.displayDateString = format(time, this.dateFormat)
     },
     handleConfirmClick () {
       this.$emit('confirm')
@@ -174,16 +214,16 @@ export default {
       }
     },
     nextYear () {
-      this.calendarDateTime = moment(this.calendarDateTime).add(1, 'year')
+      this.calendarDateTime = addYears(this.calendarDateTime, 1)
     },
     prevYear () {
-      this.calendarDateTime = moment(this.calendarDateTime).subtract(1, 'year')
+      this.calendarDateTime = addYears(this.calendarDateTime, -1)
     },
     nextMonth () {
-      this.calendarDateTime = moment(this.calendarDateTime).add(1, 'month')
+      this.calendarDateTime = addMonths(this.calendarDateTime, 1)
     },
     prevMonth () {
-      this.calendarDateTime = moment(this.calendarDateTime).subtract(1, 'month')
+      this.calendarDateTime = addMonths(this.calendarDateTime, -1)
     }
   }
 }
diff --git a/packages/common/DatePicker/src/utils.js b/packages/common/DatePicker/src/utils.js
deleted file mode 100644
index 53ca0e9ab..000000000
--- a/packages/common/DatePicker/src/utils.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import moment from 'moment'
-
-/**
- * change date of `time` accroding to `dateItem`
- * keep time of `time`
- * return a new Moment Object according to time
- * @param {Moment} time
- * @param {Object} dateItem
- */
-function setDate (time, dateItem) {
-  time.year(dateItem.year)
-  time.month(dateItem.month)
-  time.date(dateItem.date)
-  return moment(time)
-}
-
-function isSameDate (time, patternTime) {
-  if (Array.isArray(time)) {
-    return time.some(t => t.year() === patternTime.year() && t.month() === patternTime.month() && t.date() === patternTime.date())
-  } else {
-    return time.year() === patternTime.year() && time.month() === patternTime.month() && time.date() === patternTime.date()
-  }
-}
-
-function dateItem (time, displayTime, selectedTime, currentTime) {
-  let isInSpan = false
-  if (Array.isArray(selectedTime)) {
-    if (selectedTime[0].valueOf() < time.valueOf() && time.valueOf() < selectedTime[1].valueOf()) {
-      isInSpan = true
-    }
-  }
-  return {
-    date: time.date(),
-    month: time.month(),
-    year: time.year(),
-    isDateOfDisplayMonth: time.month() === displayTime.month(),
-    isInSpan,
-    isSelectedDate: selectedTime !== null && isSameDate(selectedTime, time),
-    isCurrentDate: isSameDate(currentTime, time),
-    timestamp: time.valueOf()
-  }
-}
-
-/**
- * Given time to display calendar, given the selected time, given current time,
- * return the date array of display time's month.
- * @param {Moment} displayTime
- * @param {Moment} selectedTime
- * @param {Moment} currentTime
- */
-function dateArray (displayTime, selectedTime, currentTime) {
-  const displayMonth = displayTime.month()
-  /**
-   * First day of current month
-   */
-  const displayMonthIterator = moment(displayTime).startOf('month')
-  /**
-   * Last day of last month
-   */
-  const lastMonthIterator = moment(displayMonthIterator).subtract(1, 'day')
-  const calendarDays = []
-  let protectLastMonthDateIsShownFlag = true
-  while (lastMonthIterator.day() !== 6 || protectLastMonthDateIsShownFlag) {
-    calendarDays.unshift(dateItem(lastMonthIterator, displayTime, selectedTime, currentTime))
-    lastMonthIterator.subtract(1, 'day')
-    protectLastMonthDateIsShownFlag = false
-  }
-  while (displayMonthIterator.month() === displayMonth) {
-    calendarDays.push(dateItem(displayMonthIterator, displayTime, selectedTime, currentTime))
-    displayMonthIterator.add(1, 'day')
-  }
-  while (calendarDays.length < 42) {
-    calendarDays.push(dateItem(displayMonthIterator, displayTime, selectedTime, currentTime))
-    displayMonthIterator.add(1, 'day')
-  }
-  // console.log(calendarDays)
-  return calendarDays
-}
-
-export { dateArray, setDate }
diff --git a/packages/common/Drawer/src/main.vue b/packages/common/Drawer/src/main.vue
index 773b18120..d2f78f4f0 100644
--- a/packages/common/Drawer/src/main.vue
+++ b/packages/common/Drawer/src/main.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-base-portal>
+  <n-base-portal ref="portal">
     <div class="n-detached-content-container">
       <div
         class="n-drawer-container"
@@ -21,6 +21,9 @@
           <div
             v-if="active"
             class="n-drawer"
+            :class="{
+              [`n-${synthesizedTheme}-theme`]: synthesizedTheme
+            }"
           >
             <slot />
           </div>
@@ -31,13 +34,16 @@
 </template>
 
 <script>
-import NBasePortal from '../../../base/Protal'
+import NBasePortal from '../../../base/Portal'
+import withapp from '../../../mixins/withapp'
+import themeable from '../../../mixins/themeable'
 
 export default {
   name: 'NDrawer',
   components: {
     NBasePortal
   },
+  mixins: [withapp, themeable],
   props: {
     value: {
       type: Boolean,
@@ -82,9 +88,15 @@ export default {
     active (newActive) {
       if (newActive) {
         this.containerActive = true
+        this.$refs.portal.transferElement()
       }
     }
   },
+  mounted () {
+    if (this.active) {
+      this.$refs.portal.transferElement()
+    }
+  },
   created () {
     this.containerActive = this.active
   },
diff --git a/packages/common/InputNumber/src/main.vue b/packages/common/InputNumber/src/main.vue
index e26f055f1..5d82afb3b 100644
--- a/packages/common/InputNumber/src/main.vue
+++ b/packages/common/InputNumber/src/main.vue
@@ -3,15 +3,18 @@
     class="n-input-number"
     :class="{
       [`n-input-number--${size}-size`]: true,
-      'n-input-number--disabled': disabled
+      'n-input-number--disabled': disabled,
+      [`n-${synthesizedTheme}-theme`]: synthesizedTheme
     }"
   >
     <button
+      tabindex="-1"
       type="button"
       class="n-input-number__minus-button"
       :class="{
-        [`n-input-bumber__button--disabled`]: value !== null && safeMin !== null && value <= safeMin
+        [`n-input-number__minus-button--disabled`]: value !== null && safeMin !== null && value <= safeMin
       }"
+      @mousedown="handleMouseDown"
       @click="minus"
     >
       <n-icon type="md-remove" />
@@ -27,11 +30,13 @@
       @keyup.enter="handleEnter"
     >
     <button
+      tabindex="-1"
       type="button"
       class="n-input-number__add-button"
       :class="{
-        [`n-input-bumber__button--disabled`]: value !== null && safeMax !== null && value >= safeMax
+        [`n-input-number__add-button--disabled`]: value !== null && safeMax !== null && value >= safeMax
       }"
+      @mousedown="handleMouseDown"
       @click="add"
     >
       <n-icon type="md-add" />
@@ -43,6 +48,8 @@
 <script>
 import NIcon from '../../Icon/index'
 import Emitter from '../../../mixins/emitter'
+import themeable from '../../../mixins/themeable'
+import withapp from '../../../mixins/withapp'
 
 const DEFAULT_STEP = 1
 
@@ -64,7 +71,7 @@ export default {
   components: {
     NIcon
   },
-  mixins: [ Emitter ],
+  mixins: [ withapp, themeable, Emitter ],
   inject: {
     formItem: {
       default: null
@@ -151,6 +158,12 @@ export default {
     }
   },
   methods: {
+    handleMouseDown (e) {
+      if (document.activeElement !== this.$refs.input) {
+        this.$refs.input.focus()
+      }
+      e.preventDefault()
+    },
     formBlur (type, val) {
       if (this.formItem) {
         this.dispatch('NFormItem', 'on-form-' + type, val)
diff --git a/packages/common/Modal/src/Modal.vue b/packages/common/Modal/src/Modal.vue
index 4ba669933..91ff3b566 100644
--- a/packages/common/Modal/src/Modal.vue
+++ b/packages/common/Modal/src/Modal.vue
@@ -1,7 +1,7 @@
 <script>
 import NModalOverlay from './Overlay'
 import NModalContent from './ModalContent'
-import NBasePortal from '../../../base/Protal'
+import NBasePortal from '../../../base/Portal'
 import zindexable from '../../../mixins/zindexable'
 import withapp from '../../../mixins/withapp'
 
diff --git a/packages/common/Popover/src/main.js b/packages/common/Popover/src/main.js
index ff404e819..c7ba39ee9 100644
--- a/packages/common/Popover/src/main.js
+++ b/packages/common/Popover/src/main.js
@@ -1,5 +1,5 @@
 import NBaseContext from '../../../base/Context'
-import NBaseProtal from '../../../base/Protal'
+import NBasePortal from '../../../base/Portal'
 import NPopoverContent from './PopoverContent'
 import activatorMixin from './activatorMixin'
 import genId from '../../../utils/genId'
@@ -78,7 +78,7 @@ export default {
           id
         }
       }, [activatorSlot[0]]),
-      h(NBaseProtal, {}, [
+      h(NBasePortal, {}, [
         h(NPopoverContent, {
           props: {
             ...props,
diff --git a/packages/common/Radio/src/RadioButton.vue b/packages/common/Radio/src/RadioButton.vue
index 8086e9642..70a85a494 100644
--- a/packages/common/Radio/src/RadioButton.vue
+++ b/packages/common/Radio/src/RadioButton.vue
@@ -4,19 +4,14 @@
     :class="{
       'n-radio-button--disabled': disabled,
       'n-radio-button--checked': checked,
-
+      'simulate-hollow-out-text': shouldSimulateHollowOutText
     }"
+    :tabindex="disabled ? -1 : 0"
+    @keyup.enter="handleKeyUpEnter"
     @click="handleClick"
   >
     <div class="n-radio-button__border-mask" />
-    <div
-      class="n-radio-button__label"
-      :class="{
-        'simulate-hollow-out-text': checked
-      }"
-    >
-      <slot />
-    </div>
+    <slot />
   </div>
 </template>
 
@@ -27,6 +22,11 @@ export default {
     prop: 'privateValue',
     event: 'input'
   },
+  inject: {
+    NRadioGroup: {
+      default: null
+    }
+  },
   props: {
     value: {
       type: [Boolean, String, Number],
@@ -42,14 +42,34 @@ export default {
     }
   },
   computed: {
+    shouldSimulateHollowOutText () {
+      return this.checked && (this.NRadioGroup.synthesizedTheme === 'dark')
+    },
     checked () {
-      return this.privateValue === this.value
+      if (this.NRadioGroup) {
+        return this.NRadioGroup.value === this.value
+      } else {
+        return this.privateValue === this.value
+      }
     }
   },
   methods: {
+    handleKeyUpEnter () {
+      this.toggle()
+    },
     handleClick () {
+      this.toggle()
+    },
+    toggle () {
       if (this.disabled) return
       if (this.privateValue !== this.value) {
+        this.emitValue(this.value)
+      }
+    },
+    emitValue () {
+      if (this.NRadioGroup) {
+        this.NRadioGroup.$emit('input', this.value)
+      } else {
         this.$emit('input', this.value)
       }
     }
diff --git a/packages/common/Radio/src/RadioGroup.vue b/packages/common/Radio/src/RadioGroup.vue
index b6dea8e6c..42516eb7c 100644
--- a/packages/common/Radio/src/RadioGroup.vue
+++ b/packages/common/Radio/src/RadioGroup.vue
@@ -1,26 +1,27 @@
 <script>
-
+import withapp from '../../../mixins/withapp'
+import themeable from '../../../mixins/themeable'
 import hollowoutable from '../../../mixins/hollowoutable'
 
 function mapSlot (h, defaultSlot, currentComponent) {
   /**
    * connect current component's v-model to child instance
    */
-  const wrapInstance = instance => {
-    if (instance.componentOptions.tag === 'n-radio' || instance.componentOptions.tag === 'n-radio-button') {
-      instance.componentOptions.propsData.privateValue = currentComponent.value
-      instance.componentOptions.listeners = {
-        ...instance.componentOptions.listeners,
-        input: (v) => {
-          currentComponent.$emit('input', v)
-        }
-      }
-      return instance
-    } else return null
-  }
+  // const wrapInstance = instance => {
+  //   if (instance.componentOptions.tag === 'n-radio' || instance.componentOptions.tag === 'n-radio-button') {
+  //     instance.componentOptions.propsData.privateValue = currentComponent.value
+  //     instance.componentOptions.listeners = {
+  //       ...instance.componentOptions.listeners,
+  //       input: (v) => {
+  //         currentComponent.$emit('input', v)
+  //       }
+  //     }
+  //     return instance
+  //   } else return null
+  // }
   const mappedSlot = []
   for (let i = 0; i < defaultSlot.length; ++i) {
-    const wrappedInstance = wrapInstance(defaultSlot[i])
+    const wrappedInstance = defaultSlot[i] // wrapInstance(defaultSlot[i])
     if (wrappedInstance === null) {
       console.error('[naive ui]: Please don\'t use tags other than `n-radio` and `n-radio-button` in `n-radio-group`.')
       continue
@@ -29,19 +30,36 @@ function mapSlot (h, defaultSlot, currentComponent) {
       mappedSlot.push(wrappedInstance)
     } else {
       const lastInstanceComponentOptions = mappedSlot[mappedSlot.length - 1].componentOptions
-      const lastInstanceChecked = lastInstanceComponentOptions.propsData.privateValue === lastInstanceComponentOptions.propsData.value
+      const lastInstanceChecked = currentComponent.$props.value === lastInstanceComponentOptions.propsData.value
       const lastInstanceDisabled = lastInstanceComponentOptions.propsData.disabled
-      const currentInstanceChecked = wrappedInstance.componentOptions.propsData.privateValue === wrappedInstance.componentOptions.propsData.value
+      const currentInstanceChecked = currentComponent.$props.value === wrappedInstance.componentOptions.propsData.value
       const currentInstanceDisabled = wrappedInstance.componentOptions.propsData.disabled
-      /**
-       * Priority of button splitor:
-       * !disabled  checked >
-       * !disabled !checked >
-       *  disabled  checked >
-       *  disabled !checked
-       */
-      const lastInstancePriority = (!lastInstanceDisabled ? 2 : 0) + (lastInstanceChecked ? 1 : 0)
-      const currentInstancePriority = (!currentInstanceDisabled ? 2 : 0) + (currentInstanceChecked ? 1 : 0)
+
+      let lastInstancePriority
+      let currentInstancePriority
+      if (currentComponent.synthesizedTheme === 'dark') {
+        console.log('dark theme')
+        /**
+         * Priority of button splitor:
+         * !disabled  checked >
+         * !disabled !checked >
+         *  disabled  checked >
+         *  disabled !checked
+         */
+        lastInstancePriority = (!lastInstanceDisabled ? 2 : 0) + (lastInstanceChecked ? 1 : 0)
+        currentInstancePriority = (!currentInstanceDisabled ? 2 : 0) + (currentInstanceChecked ? 1 : 0)
+      } else {
+        console.log('light theme')
+        /**
+         * Priority of button splitor:
+         * !disabled  checked >
+         *  disabled  checked >
+         * !disabled !checked >
+         *  disabled !checked
+         */
+        lastInstancePriority = (lastInstanceChecked ? 2 : 0) + (!lastInstanceDisabled ? 1 : 0)
+        currentInstancePriority = (currentInstanceChecked ? 2 : 0) + (!currentInstanceDisabled ? 1 : 0)
+      }
       const lastInstanceClass = {
         'n-radio-group__splitor--disabled': lastInstanceDisabled,
         'n-radio-group__splitor--checked': lastInstanceChecked
@@ -64,22 +82,25 @@ function mapSlot (h, defaultSlot, currentComponent) {
 
 export default {
   name: 'NRadioGroup',
-  mixins: [hollowoutable],
+  mixins: [withapp, themeable, hollowoutable],
+  provide () {
+    return {
+      NRadioGroup: this
+    }
+  },
   props: {
     value: {
       type: [Boolean, String, Number],
       default: null
     }
   },
-  methods: {
-    handleInput (value) {
-      // console.log('input')
-    }
-  },
   render (h) {
     // console.log('render radio')
     return h('div', {
-      staticClass: 'n-radio-group'
+      staticClass: 'n-radio-group',
+      class: {
+        [`n-${this.synthesizedTheme}-theme`]: this.synthesizedTheme
+      }
     }, mapSlot(h, this.$slots.default, this))
   }
 }
diff --git a/packages/common/Radio/src/main.vue b/packages/common/Radio/src/main.vue
index 17961c164..8d15406f1 100644
--- a/packages/common/Radio/src/main.vue
+++ b/packages/common/Radio/src/main.vue
@@ -3,8 +3,11 @@
     class="n-radio"
     :class="{
       'n-radio--disabled': disabled,
-      'n-radio--checked': checked
+      'n-radio--checked': checked,
+      [`n-${synthesizedTheme}-theme`]: synthesizedTheme
     }"
+    :tabindex="disabled ? -1 : 0"
+    @keyup.enter="handleKeyUpEnter"
     @click="handleClick"
   >
     <div
@@ -21,15 +24,20 @@
 
 <script>
 import Emitter from '../../../mixins/emitter'
+import withapp from '../../../mixins/withapp'
+import themeable from '../../../mixins/themeable'
 
 export default {
   name: 'NRadio',
-  mixins: [ Emitter ],
+  mixins: [ withapp, themeable, Emitter ],
   model: {
     prop: 'privateValue',
     event: 'input'
   },
   inject: {
+    NRadioGroup: {
+      default: null
+    },
     formItem: {
       default: null
     }
@@ -50,19 +58,36 @@ export default {
   },
   computed: {
     checked () {
-      return this.privateValue === this.value
+      if (this.NRadioGroup) {
+        return this.NRadioGroup.value === this.value
+      } else {
+        return this.privateValue === this.value
+      }
     }
   },
   methods: {
+    handleKeyUpEnter () {
+      this.toggle()
+    },
     handleClick (e) {
       this.$emit('click', e)
+      this.toggle()
+    },
+    toggle () {
       if (this.disabled) return
       if (this.privateValue !== this.value) {
-        this.$emit('input', this.value)
+        this.emitValue('input', this.value)
         if (this.formItem) {
           this.dispatch('NFormItem', 'on-form-change', this.value)
         }
       }
+    },
+    emitValue () {
+      if (this.NRadioGroup) {
+        this.NRadioGroup.$emit('input', this.value)
+      } else {
+        this.$emit('input', this.value)
+      }
     }
   }
 }
diff --git a/packages/common/Scrollbar/src/main.vue b/packages/common/Scrollbar/src/main.vue
index f15b94aea..8ae76bb1b 100644
--- a/packages/common/Scrollbar/src/main.vue
+++ b/packages/common/Scrollbar/src/main.vue
@@ -172,8 +172,8 @@ export default {
   destroyed () {
     window.clearTimeout(this.horizontalScrollbarVanishTimerId)
     window.clearTimeout(this.verticalScrollbarVanishTimerId)
-    window.removeEventListener('mousemove', this.handleVerticalScrollMouseMove)
-    window.removeEventListener('mouseup', this.handleVerticalScrollMouseUp)
+    window.removeEventListener('mousemove', this.handleVerticalScrollMouseMove, true)
+    window.removeEventListener('mouseup', this.handleVerticalScrollMouseUp, true)
   },
   mounted () {
     this.updateParameters()
@@ -319,8 +319,8 @@ export default {
     handleVerticalScrollMouseDown (e) {
       this.$emit('scrollstart')
       this.verticalScrollbarActivated = true
-      window.addEventListener('mousemove', this.handleVerticalScrollMouseMove)
-      window.addEventListener('mouseup', this.handleVerticalScrollMouseUp)
+      window.addEventListener('mousemove', this.handleVerticalScrollMouseMove, true)
+      window.addEventListener('mouseup', this.handleVerticalScrollMouseUp, true)
       this.memorizedVerticalTop = this.containerScrollTop
       this.memorizedMouseY = e.clientY
     },
@@ -339,8 +339,8 @@ export default {
     },
     handleVerticalScrollMouseUp (e) {
       this.$emit('scrollend')
-      window.removeEventListener('mousemove', this.handleVerticalScrollMouseMove)
-      window.removeEventListener('mouseup', this.handleVerticalScrollMouseUp)
+      window.removeEventListener('mousemove', this.handleVerticalScrollMouseMove, true)
+      window.removeEventListener('mouseup', this.handleVerticalScrollMouseUp, true)
       this.verticalScrollbarActivated = false
       this.updateParameters()
       if (!this.$el.contains(e.target)) {
diff --git a/packages/common/Steps/src/Step.vue b/packages/common/Steps/src/Step.vue
index a0726f94a..ae2ca8852 100644
--- a/packages/common/Steps/src/Step.vue
+++ b/packages/common/Steps/src/Step.vue
@@ -2,34 +2,31 @@
   <div
     class="n-step"
     :class="{
-      'n-step--finished': finished,
-      'n-step--active': active,
-      [`n-step--${status}`]: status !== null
+      [`n-step--${synthesizedStatus}`]: synthesizedStatus !== null
     }"
   >
-    <div class="n-step__splitor n-step__splitor--left" />
     <div class="n-step-indicator">
       <transition name="n-step-indicator--transition">
         <div
-          v-if="finished && finishStatus !== 'process'"
+          v-if="synthesizedStatus === 'finish' || synthesizedStatus === 'error'"
           class="n-step-indicator__icon"
         >
           <n-icon
-            v-if="status === 'success'"
+            v-if="synthesizedStatus === 'finish'"
             type="md-checkmark"
           />
           <n-icon
-            v-else-if="status === 'error'"
+            v-else-if="synthesizedStatus === 'error'"
             type="md-close"
           />
         </div>
       </transition>
       <transition name="n-step-indicator--transition">
         <div
-          v-if="!finished || (finished && finishStatus === 'process')"
+          v-if="!(synthesizedStatus === 'finish' || synthesizedStatus === 'error')"
           class="n-step-indicator__index"
           :class="{
-            'simulate-hollow-out-text': active
+            'simulate-hollow-out-text': synthesizedStatus === 'process'
           }"
         >
           {{ index }}
@@ -37,10 +34,11 @@
       </transition>
     </div>
     <div class="n-step-content">
-      <div class="n-step-content__title">
-        <div class="n-step-content__title-inner">
+      <div class="n-step-content-title">
+        <div class="n-step-content-title__inner">
           {{ title }}
-        </div><div class="n-step__splitor n-step__splitor--right" />
+        </div>
+        <div class="n-step-splitor n-step-splitor--right" />
       </div>
       <div
         v-if="description !== null"
@@ -58,55 +56,62 @@ import hollowoutable from '../../../mixins/hollowoutable'
 
 export default {
   name: 'NStep',
+  inject: {
+    NSteps: {
+      default: null
+    }
+  },
   components: {
     NIcon
   },
   mixins: [hollowoutable],
   props: {
-    finishStatus: {
+    status: {
       type: String,
-      default: 'success',
-      validator (finishStatus) {
-        return ['process', 'success', 'error'].includes(finishStatus)
+      default: null,
+      validator (value) {
+        return ['process', 'finish', 'error', 'wait'].includes(value)
       }
     },
-    currentStatus: {
-      type: String,
-      default: 'process',
-      validator (currentStatus) {
-        return ['process', 'success', 'error'].includes(currentStatus)
-      }
-    },
-    finished: {
-      type: Boolean,
-      default: false
-    },
-    active: {
-      type: Boolean,
-      default: false
-    },
     title: {
       type: String,
       default: null
     },
+    subtitle: {
+      type: String,
+      default: null
+    },
     description: {
       type: String,
       default: null
     },
+    content: {
+      type: String,
+      default: null
+    },
     index: {
       type: [Number, String],
       default: null
     }
   },
   computed: {
-    status () {
-      if (this.finished) {
-        return this.finishStatus
-      } else if (this.active) {
-        return this.currentStatus
-      } else {
-        return null
+    current () {
+      return this.NSteps && this.NSteps.current
+    },
+    stepsStatus () {
+      return this.NSteps && this.NSteps.status
+    },
+    synthesizedStatus () {
+      if (this.status) {
+        return this.status
+      } else if (this.index < this.current) {
+        return 'finish'
+      } else if (this.index === this.current) {
+        return this.stepsStatus || 'process'
+      } else if (this.index > this.current) {
+        return 'wait'
       }
+      return null
     }
   }
 }
diff --git a/packages/common/Steps/src/main.vue b/packages/common/Steps/src/main.vue
index d8442a415..c79ff8fa8 100644
--- a/packages/common/Steps/src/main.vue
+++ b/packages/common/Steps/src/main.vue
@@ -1,13 +1,12 @@
 <script>
-function wrapStep (step, i, { current, finishStatus, currentStatus }) {
+import withapp from '../../../mixins/withapp'
+import themeable from '../../../mixins/themeable'
+
+function wrapStep (step, i) {
   if (step.componentOptions.tag === 'n-step') {
     step.componentOptions.propsData = {
       ...step.componentOptions.propsData,
-      index: i + 1,
-      finished: !!current && current > i,
-      active: current === i,
-      finishStatus,
-      currentStatus
+      index: i + 1
     }
   }
   return step
@@ -19,30 +18,30 @@ function mapSteps (props, steps) {
 
 export default {
   name: 'NSteps',
+  provide () {
+    return {
+      NSteps: this
+    }
+  },
+  mixins: [withapp, themeable],
   props: {
     current: {
       type: Number,
       default: null,
       required: false
     },
-    finishStatus: {
+    status: {
       type: String,
-      default: 'success',
-      validator (finishStatus) {
-        return ['process', 'success', 'error'].includes(finishStatus)
-      }
-    },
-    currentStatus: {
-      type: String,
-      default: 'process',
-      validator (currentStatus) {
-        return ['process', 'success', 'error'].includes(currentStatus)
-      }
+      default: 'process'
     }
   },
   render (h) {
+    console.log(this.synthesizedTheme)
     return h('div', {
-      staticClass: 'n-steps'
+      staticClass: 'n-steps',
+      class: {
+        [`n-${this.synthesizedTheme}-theme`]: this.synthesizedTheme
+      }
     }, mapSteps({ ...this.$props }, this.$slots.default))
   }
 }
diff --git a/packages/common/Time/src/main.js b/packages/common/Time/src/main.js
index f3b3c7bd4..351c7deeb 100644
--- a/packages/common/Time/src/main.js
+++ b/packages/common/Time/src/main.js
@@ -1,25 +1,26 @@
-import moment from 'moment'
+import { format, formatDistance, isValid } from 'date-fns'
 
 export default {
   name: 'NTime',
   props: {
     time: {
-      validator (time) {
-        if (time === null) return
-        return moment(time).isValid()
+      validator (value) {
+        return isValid(new Date(value))
       },
       default: null
     },
-    raw: {
-      type: Boolean,
-      default: false
-    },
     type: {
-      validator (type) {
-        return ['relative', 'date', 'datetime'].includes('type')
+      validator (value) {
+        return ['relative', 'date', 'datetime'].includes(value)
       },
       default: 'relative'
     },
+    to: {
+      validator (value) {
+        return isValid(new Date(value))
+      },
+      default: () => new Date()
+    },
     format: {
       type: String,
       default: null
@@ -27,7 +28,17 @@ export default {
   },
   computed: {
     renderedTime () {
-
+      if (this.format) {
+        return format(this.time, this.format)
+      } else if (this.type === 'date') {
+        return format(this.time, 'yyyy-MM-dd')
+      } else if (this.type === 'datetime') {
+        return format(this.time, 'yyyy-MM-dd hh:mm:ss')
+      } else {
+        return formatDistance(this.time, this.to, {
+          addSuffix: true
+        })
+      }
     }
   },
   data () {
@@ -36,6 +47,6 @@ export default {
     }
   },
   render (h) {
-    return 'time'
+    return h('span', this.renderedTime)
   }
 }
diff --git a/packages/common/TimePicker/src/main.vue b/packages/common/TimePicker/src/main.vue
index 68d4dea62..897b2f347 100644
--- a/packages/common/TimePicker/src/main.vue
+++ b/packages/common/TimePicker/src/main.vue
@@ -13,6 +13,7 @@
       ref="contentContainer"
       class="n-detached-content-container n-time-picker-detached-content-container"
       :class="{
+        'n-detached-content-container--absolute-positioned': positionModeisAbsolute,
         [namespace]: namespace
       }"
     >
@@ -28,7 +29,6 @@
             :class="{
               [`n-${synthesizedTheme}-theme`]: synthesizedTheme
             }"
-            @mouseup="handleContentMouseUp"
           >
             <div class="n-time-picker-selector-time">
               <div
@@ -43,7 +43,7 @@
                       'n-time-picker-selector-time-row__item--active':
                         hour === computedHour
                     }"
-                    @click="setHour(hour)"
+                    @click="setHours(hour)"
                   >
                     {{ hour }}
                   </div>
@@ -66,7 +66,7 @@
                       'n-time-picker-selector-time-row__item--active':
                         minute === computedMinute
                     }"
-                    @click="setMinute(minute)"
+                    @click="setMinutes(minute)"
                   >
                     {{ minute }}
                   </div>
@@ -92,7 +92,7 @@
                         validator &&
                         !validator(computedHour, computedMinute, second)
                     }"
-                    @click="setSecond(second)"
+                    @click="setSeconds(second)"
                   >
                     {{ second }}
                   </div>
@@ -132,13 +132,14 @@
 <script>
 import NScrollbar from '../../Scrollbar'
 import NInput from '../../Input'
-import moment from 'moment'
 import detachable from '../../../mixins/detachable'
 import placeable from '../../../mixins/placeable'
 import clickoutside from '../../../directives/clickoutside'
 import zindexable from '../../../mixins/zindexable'
 import withapp from '../../../mixins/withapp'
 import themeable from '../../../mixins/themeable'
+import { isValid, startOfSecond, startOfMinute, startOfHour, setHours, setMinutes, setSeconds, getTime, format, getMinutes, getHours, getSeconds, set } from 'date-fns'
+import { strictParse } from '../../../utils/dateUtils'
 
 const DEFAULT_FORMAT = 'HH:mm:ss'
 const TIME_CONST = {
@@ -183,10 +184,6 @@ export default {
   },
   mixins: [detachable, placeable, zindexable, withapp, themeable],
   props: {
-    stopSelectorBubble: {
-      type: Boolean,
-      default: false
-    },
     placement: {
       type: String,
       default: 'bottom-start'
@@ -207,7 +204,7 @@ export default {
   data () {
     return {
       active: false,
-      displayTimeString: this.value === null ? null : moment(this.value).format(this.format),
+      displayTimeString: this.value === null ? null : format(this.value, this.format),
       ...TIME_CONST,
       memorizedValue: this.value
     }
@@ -215,18 +212,18 @@ export default {
   computed: {
     computedTime () {
       if (this.value === null) return null
-      else return moment(this.value)
+      else return new Date(this.value)
     },
     computedHour () {
-      if (this.computedTime) return this.computedTime.format('HH')
+      if (this.computedTime) return format(this.computedTime, 'HH')
       else return null
     },
     computedMinute () {
-      if (this.computedTime) return this.computedTime.format('mm')
+      if (this.computedTime) return format(this.computedTime, 'mm')
       else return null
     },
     computedSecond () {
-      if (this.computedTime) return this.computedTime.format('ss')
+      if (this.computedTime) return format(this.computedTime, 'ss')
       else return null
     }
   },
@@ -238,44 +235,45 @@ export default {
   },
   methods: {
     justifyValueAfterChangeDisplayTimeString () {
-      const time = moment(this.displayTimeString, this.format, true)
-      if (time.isValid()) {
+      const time = strictParse(this.displayTimeString, this.format, new Date())
+      if (isValid(time)) {
         if (this.computedTime !== null) {
-          const newTime = this.computedTime
-          newTime.hour(time.hour())
-          newTime.minute(time.minute())
-          newTime.second(time.second())
-          this.$emit('input', newTime.valueOf())
+          const newTime = set(this.computedTime, {
+            hours: getHours(time),
+            minutes: getMinutes(time),
+            seconds: getSeconds(time)
+          })
+          this.$emit('input', getTime(newTime))
         } else {
-          this.$emit('input', time.valueOf())
+          this.$emit('input', getTime(time))
         }
       }
     },
-    setHour (hour) {
+    setHours (hour) {
       if (this.value === null) {
-        this.$emit('input', moment().hour(hour).startOf('hour').valueOf())
+        this.$emit('input', getTime(startOfHour(new Date())))
       } else {
-        this.$emit('input', moment(this.value).hour(hour).valueOf())
+        this.$emit('input', getTime(setHours(this.value, hour)))
       }
     },
-    setMinute (minute) {
+    setMinutes (minute) {
       if (this.value === null) {
-        this.$emit('input', moment().minute(minute).startOf('minute').valueOf())
+        this.$emit('input', getTime(startOfMinute(new Date())))
       } else {
-        this.$emit('input', moment(this.value).minute(minute).valueOf())
+        this.$emit('input', getTime(setMinutes(this.value, minute)))
       }
     },
-    setSecond (second) {
+    setSeconds (second) {
       if (this.value === null) {
-        this.$emit('input', moment().second(second).startOf('second').valueOf())
+        this.$emit('input', getTime(startOfSecond(new Date())))
       } else {
-        this.$emit('input', moment(this.value).second(second).valueOf())
+        this.$emit('input', getTime(setSeconds(this.value, second)))
       }
     },
     refreshTimeString (time) {
       if (time === undefined) time = this.computedTime
       if (time === null) this.displayTimeString = ''
-      else this.displayTimeString = time.format(this.format)
+      else this.displayTimeString = format(time, this.format)
     },
     handleTimeInputBlur () {
       this.refreshTimeString()
@@ -328,12 +326,6 @@ export default {
     handleConfirmClick () {
       this.refreshTimeString()
       this.active = false
-    },
-    handleContentMouseUp (e) {
-      console.log('handleContentMouseUp')
-      if (this.stopSelectorBubble) {
-        e.stopPropagation()
-      }
     }
   }
 }
diff --git a/packages/common/Tree/src/TreeNodeSwitcher.vue b/packages/common/Tree/src/TreeNodeSwitcher.vue
index c2a5b4910..e0896ae68 100644
--- a/packages/common/Tree/src/TreeNodeSwitcher.vue
+++ b/packages/common/Tree/src/TreeNodeSwitcher.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import NTreeSwitcherIcon from './SwitcherIcon'
+import NTreeSwitcherIcon from './TreeSwitcherIcon'
 
 export default {
   name: 'NTreeSwitcher',
diff --git a/packages/common/Tree/src/SwitcherIcon.vue b/packages/common/Tree/src/TreeSwitcherIcon.vue
similarity index 100%
rename from packages/common/Tree/src/SwitcherIcon.vue
rename to packages/common/Tree/src/TreeSwitcherIcon.vue
diff --git a/packages/common/Tree/src/switcherIcon.vue b/packages/common/Tree/src/switcherIcon.vue
deleted file mode 100644
index e36a9aa6a..000000000
--- a/packages/common/Tree/src/switcherIcon.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <svg
-    viewBox="0 0 1024 1024"
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'NTreeArrow'
-}
-</script>
diff --git a/packages/mixins/detachable.js b/packages/mixins/detachable.js
index 2fdc3c2ae..ee30a4098 100644
--- a/packages/mixins/detachable.js
+++ b/packages/mixins/detachable.js
@@ -16,14 +16,20 @@ export default {
         return true
       },
       default: () => document.body
+    },
+    detached: {
+      type: Boolean,
+      default: true
     }
   },
   watch: {
     active (value) {
       // console.log('activeChange')
-      if (value && !this.contentContainerMounted) {
-        this.contentContainerMounted = true
-        this.appendContent()
+      if (this.detached) {
+        if (value && !this.contentContainerMounted) {
+          this.contentContainerMounted = true
+          this.appendContent()
+        }
       }
     }
   },
@@ -48,17 +54,21 @@ export default {
     }
   },
   mounted () {
-    this.detachTarget = document.body // getScrollParent(this.$refs.self)
-    this.detachContent()
-    if (this.active && !this.contentContainerMounted) {
-      this.contentContainerMounted = true
-      this.appendContent()
+    if (this.detached) {
+      this.detachTarget = document.body // getScrollParent(this.$refs.self)
+      this.detachContent()
+      if (this.active && !this.contentContainerMounted) {
+        this.contentContainerMounted = true
+        this.appendContent()
+      }
     }
     // this.appendContent()
   },
   beforeDestroy () {
-    if (this.detachTarget.contains(this.$refs.contentContainer)) {
-      this.detachTarget.removeChild(this.$refs.contentContainer)
+    if (this.detached) {
+      if (this.detachTarget.contains(this.$refs.contentContainer)) {
+        this.detachTarget.removeChild(this.$refs.contentContainer)
+      }
     }
   }
 }
diff --git a/packages/mixins/placeable.js b/packages/mixins/placeable.js
index 13b9b807e..4759a6840 100644
--- a/packages/mixins/placeable.js
+++ b/packages/mixins/placeable.js
@@ -22,6 +22,13 @@ function getActivatorEl (componentInstance) {
  */
 export default {
   props: {
+    positionMode: {
+      type: String,
+      default: 'fixed',
+      validator (value) {
+        return ['fixed', 'absolute'].includes(value)
+      }
+    },
     placement: {
       validator (value) {
         return [
@@ -48,6 +55,11 @@ export default {
       default: 'self'
     }
   },
+  computed: {
+    positionModeisAbsolute () {
+      return this.positionMode === 'absolute'
+    }
+  },
   watch: {
     active (newValue) {
       if (newValue) {
@@ -90,6 +102,18 @@ export default {
         this.trackedElement = this.getTrackedElement()
       }
     },
+    /**
+     * Need to be fulfilled!
+     */
+    updatePositionInAbsoluteMode () {
+      this.trackingElement.style.position = 'absolute'
+      this.trackingElement.style.top = '100%'
+      this.trackingElement.style.left = '0%'
+      this.trackingElement.style.right = null
+      this.trackingElement.style.bottom = null
+      this.trackingElement.style.transformOrigin = 'top left'
+      this.trackingElement.setAttribute('n-suggested-transform-origin', 'top left')
+    },
     updatePosition (el, cb) {
       // console.log('scroll')
       if (!this.active && !this.show) return
@@ -99,6 +123,10 @@ export default {
       if (!this.trackedElement || !this.trackingElement) {
         console.log('[placeable.updatePosition]: trakedElement or trackingElement not found!')
       }
+      if (this.positionModeisAbsolute) {
+        this.updatePositionInAbsoluteMode()
+        return
+      }
       // console.log(activator)
       const activatorBoundingClientRect = this.trackedElement.getBoundingClientRect()
       // console.log(activatorBoundingClientRect)
diff --git a/packages/mixins/zindexable.js b/packages/mixins/zindexable.js
index 95b61dae4..d38417cd2 100644
--- a/packages/mixins/zindexable.js
+++ b/packages/mixins/zindexable.js
@@ -8,13 +8,16 @@ import zIndexManager from '../utils/dom/zIndexManager'
  * dependency:
  * $refs.contentContainer
  * $vm.active
+ * $vm.detached
  */
 export default {
   mounted () {
+    if (!this.detached) return
     zIndexManager.registerElement(this._getZindexableContent())
   },
   watch: {
     active (newActive) {
+      if (!this.detached) return
       console.debug('[zindexable.watch.active]:', newActive)
       if (newActive) {
         zIndexManager.setNewZIndex(this._getZindexableContent())
@@ -22,6 +25,7 @@ export default {
     }
   },
   beforeDestroy () {
+    if (!this.detached) return
     zIndexManager.unregisterElement(this._getZindexableContent())
   },
   methods: {
diff --git a/packages/utils/dateUtils.js b/packages/utils/dateUtils.js
new file mode 100644
index 000000000..35bcf86fa
--- /dev/null
+++ b/packages/utils/dateUtils.js
@@ -0,0 +1,80 @@
+// import moment from 'moment'
+import { isValid, isSameDay, getDate, getMonth, getYear, isSameMonth, getTime, startOfMonth, addDays, getDay, parse, format } from 'date-fns'
+
+function matchDate (sourceTime, patternTime) {
+  if (Array.isArray(sourceTime)) {
+    // console.log(sourceTime, patternTime, sourceTime.some(time => isSameDay(time, patternTime)))
+    return sourceTime.some(time => isSameDay(time, patternTime))
+    // return time.some(t => t.year() === patternTime.year() && t.month() === patternTime.month() && t.date() === patternTime.date())
+  } else {
+    return isSameDay(sourceTime, patternTime)
+    // return time.year() === patternTime.year() && time.month() === patternTime.month() && time.date() === patternTime.date()
+  }
+}
+
+function dateItem (time, displayTime, selectedTime, currentTime) {
+  let isInSpan = false
+  if (Array.isArray(selectedTime)) {
+    if (selectedTime[0] < time && time < selectedTime[1]) {
+      isInSpan = true
+    }
+  }
+  return {
+    dateObject: {
+      date: getDate(time), // time.date(),
+      month: getMonth(time), // time.month(),
+      year: getYear(time) // time.year(),
+    },
+    isDateOfDisplayMonth: isSameMonth(time, displayTime), // time.month() === displayTime.month(),
+    isInSpan,
+    isSelectedDate: selectedTime !== null && matchDate(selectedTime, time),
+    isCurrentDate: matchDate(currentTime, time),
+    timestamp: getTime(time) // time.valueOf()
+  }
+}
+
+/**
+ * Given time to display calendar, given the selected time, given current time,
+ * return the date array of display time's month.
+ * @param {Moment} displayTime
+ * @param {Moment} selectedTime
+ * @param {Moment} currentTime
+ */
+function dateArray (displayTime, selectedTime, currentTime) {
+  const displayMonth = getMonth(displayTime) // displayTime.month()
+  /**
+   * First day of current month
+   */
+  let displayMonthIterator = startOfMonth(displayTime) // moment(displayTime).startOf('month')
+  /**
+   * Last day of last month
+   */
+  let lastMonthIterator = addDays(displayMonthIterator, -1) // moment(displayMonthIterator).subtract(1, 'day')
+  const calendarDays = []
+  let protectLastMonthDateIsShownFlag = true
+  while (getDay(lastMonthIterator) !== 6 || protectLastMonthDateIsShownFlag) {
+    calendarDays.unshift(dateItem(lastMonthIterator, displayTime, selectedTime, currentTime))
+    lastMonthIterator = addDays(lastMonthIterator, -1) // .subtract(1, 'day')
+    protectLastMonthDateIsShownFlag = false
+  }
+  while (getMonth(displayMonthIterator) === displayMonth) {
+    calendarDays.push(dateItem(displayMonthIterator, displayTime, selectedTime, currentTime))
+    displayMonthIterator = addDays(displayMonthIterator, 1) // .add(1, 'day')
+  }
+  while (calendarDays.length < 42) {
+    calendarDays.push(dateItem(displayMonthIterator, displayTime, selectedTime, currentTime))
+    displayMonthIterator = addDays(displayMonthIterator, 1)
+    // displayMonthIterator.add(1, 'day')
+  }
+  // console.log(calendarDays, selectedTime)
+  return calendarDays
+}
+
+function strictParse (string, pattern, backup) {
+  const result = parse(string, pattern, backup)
+  if (!isValid(result)) return result
+  else if (format(result, pattern) === string) return result
+  else return new Date(NaN)
+}
+
+export { dateArray, strictParse }
diff --git a/testColor.js b/playground/testColor.js
similarity index 100%
rename from testColor.js
rename to playground/testColor.js
diff --git a/styles/DatePicker.scss b/styles/DatePicker.scss
index 8e560654d..cfcacaf3d 100644
--- a/styles/DatePicker.scss
+++ b/styles/DatePicker.scss
@@ -5,7 +5,7 @@
   @include once {
     @include b(date-picker) {
       position: relative;
-      width: 240px;
+      width: 200px;
       @include m(range) {
         width: 382px;
       }
@@ -19,6 +19,9 @@
       margin-bottom: 4px;
       width: 350px;
       border-radius: 6px;
+      @include b(time-picker) {
+        z-index: 1;
+      }
       @include b(date-picker-panel-calendar) {
         width: 350px;
         @include b(date-picker-panel-month-modifier) {
diff --git a/styles/Drawer.scss b/styles/Drawer.scss
index eecfda40a..cf033547f 100644
--- a/styles/Drawer.scss
+++ b/styles/Drawer.scss
@@ -1,13 +1,17 @@
 @import './mixins/mixins.scss';
 @import './themes/vars.scss';
 
-@include b(drawer) {
-  @include slide-in-from-right-transition();
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  background-color: rgba(111, 111, 111, 1);
+@include themes-mixin {
+  @include b(drawer) {
+    @include slide-in-from-right-transition();
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    background-color: $--n-card-color;
+    color: $--n-secondary-text-color;
+    transition: background-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier;
+  }
 }
 
 @include b(drawer-overlay) {
diff --git a/styles/Input.scss b/styles/Input.scss
index 5abcd4175..36db7d53f 100644
--- a/styles/Input.scss
+++ b/styles/Input.scss
@@ -41,6 +41,7 @@
       @include input-size-mixin("medium");
       @include input-size-mixin("large");
       @include e(icon) {
+        transition: opacity .3s $default-cubic-bezier;
         position: absolute;
         line-height: $--input-icon-size;
         height: $--input-icon-size;
@@ -49,6 +50,7 @@
           height: $--input-icon-size;
           width: $--input-icon-size;
           &::before {
+            transition: color .3s $default-cubic-bezier;
             font-size: $--input-icon-size;
             line-height: $--input-icon-size;
             height: $--input-icon-size;
@@ -133,7 +135,6 @@
       }
     }
     @include e(icon) {
-      transition: opacity .3s $default-cubic-bezier;
       opacity: 1;
       @include m(hide-icon) {
         opacity: 0;
diff --git a/styles/InputNumber.scss b/styles/InputNumber.scss
index 1c8b00452..c548fc0c5 100644
--- a/styles/InputNumber.scss
+++ b/styles/InputNumber.scss
@@ -1,120 +1,122 @@
 @import './mixins/mixins.scss';
 @import './themes/vars.scss';
 
-@include b(input-number) {
-  position: relative;
-  border-radius: $input-number-border-radius;
-  width: 152px;
-  display: inline-block;
-  vertical-align: bottom;
-  & * {
+@mixin input-number-size-mixin ($size) {
+  @include m($size + '-size') {
+    $height: map-get($--n-height, $size);
+    height: $height;
+    line-height: $height;
+    @include e(minus-button, add-button, input) {
+      height: $height;
+      line-height: $height;
+    }
+  }
+}
+
+@include themes-mixin {
+  @include b(input-number) {
+    position: relative;
+    border-radius: $--input-number-border-radius;
+    width: 152px;
+    display: inline-block;
     outline: none;
-  }
-  &.n-input-number--disabled {
-    background:rgba(238,238,238,0.05);
-    .n-input-number__minus-button, .n-input-number__add-button {
-      background:rgba(238,238,238,0.05);
-      color:rgba(233,233,236,0.2);
-      pointer-events: none;
-    }
-    .n-input-number__input {
-      color:rgba(233,233,236,0.2);
-      pointer-events: none;
-    }
-    cursor: not-allowed;
-  }
-  &.n-input-number--default-size, &.n-input-number--medium-size {
-    height: $medium-height;
-    line-height: $medium-height;
-    .n-input-number__minus-button, .n-input-number__add-button, .n-input-number__input {
-      height: $medium-height;
-      line-height: $medium-height;
-    }
-  }
-  &.n-input-number--small-size {
-    height: $small-height;
-    line-height: $small-height;
-    .n-input-number__minus-button, .n-input-number__add-button, .n-input-number__input {
-      height: $small-height;
-      line-height: $small-height;
-    }
-  }
-  &.n-input-number--large-size {
-    height: $large-height;
-    line-height: $large-height;
-    .n-input-number__minus-button, .n-input-number__add-button, .n-input-number__input {
-      height: $large-height;
-      line-height: $large-height;
-    }
-  }
-  .n-input-number__border-layer {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    border-radius: $input-number-border-radius;
-    transition: box-shadow .3s $default-cubic-bezier;
-    pointer-events: none;
-  }
-  .n-input-number__minus-button, .n-input-number__add-button {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    padding: 0;
-    width: 28px;
-    border: none;
-    background-color: $input-number-button-background-color;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #eeeeee;
-    font-size: 14px;
-    transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
-    &:hover~.n-input-number__border-layer {
-      box-shadow: inset 0 0 0px 1px $main-color;
-    }
-    &:hover {
-      color: $main-color;
-    }
-    &:active {
-      transition: color .3s $default-cubic-bezier, background-color .15s $default-cubic-bezier;
-      background-color: rgba(99, 226, 183, 0.1);
-    }
-    &.n-input-bumber__button--disabled {
-      background-color: rgba(221,238,247,0.3);
-      color: rgba(255, 255, 255, .2);
+    @include m(disabled) {
+      // background: map-get($--input-number-background-color, 'disabled');
+      @include e(minus-button, add-button) {
+        background: map-get($--input-number-button-background-color, 'disabled');
+        color: map-get($--input-number-button-text-color, 'disabled');
+        pointer-events: none;
+      }
+      @include e(input) {
+        background: map-get($--input-number-background-color, 'disabled');
+        color: map-get($--input-number-button-text-color, 'disabled');
+        pointer-events: none;
+      }
       cursor: not-allowed;
     }
-  }
-  .n-input-number__minus-button {
-    left: 0;
-    border-top-left-radius: $input-number-border-radius;
-    border-bottom-left-radius: $input-number-border-radius;
-  }
-  .n-input-number__add-button {
-    right: 0;
-    border-top-right-radius: $input-number-border-radius;
-    border-bottom-right-radius: $input-number-border-radius;
-  }
-  .n-input-number__input {
-    border-radius: $input-number-border-radius;
-    background-color: $input-number-background-color;
-    &:hover~.n-input-number__border-layer {
-      box-shadow: inset 0 0 0px 1px $main-color;
+    @include input-number-size-mixin('small');
+    @include input-number-size-mixin('medium');
+    @include input-number-size-mixin('large');
+    @include e(border-layer) {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'default');
+      border-radius: $--input-number-border-radius;
+      transition: box-shadow .3s $default-cubic-bezier;
+      pointer-events: none;
     }
-    &:focus {
-      background-color: rgba(99,226,183,0.1);
-      &~.n-input-number__border-layer {
-        box-shadow: inset 0 0 0px 1px $main-color, 0px 0px 10px 1px #366555;
+    @include e(minus-button, add-button) {
+      outline: none;
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      padding: 0;
+      width: 28px;
+      border: none;
+      background-color: map-get($--input-number-button-background-color, 'default');
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: map-get($--input-number-button-text-color, 'default');
+      font-size: 14px;
+      transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, box-shadow .3s $default-cubic-bezier;
+      box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'default');
+      &:hover ~ {
+        @include e(border-layer) {
+          box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'hover');
+        }
+      }
+      &:hover {
+        background-color: map-get($--input-number-button-background-color, 'hover');
+        color: map-get($--input-number-button-text-color, 'hover');
+      }
+      &:active {
+        transition: color .3s $default-cubic-bezier, background-color .15s $default-cubic-bezier;
+        background-color: map-get($--input-number-button-background-color, 'active')
+      }
+      @include m(disabled) {
+        background-color: map-get($--input-number-button-background-color, 'disabled');
+        color: map-get($--input-number-button-text-color, 'disabled');
       }
     }
-    transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
-    border: none;
-    color: $input-number-color;
-    width: 84px;
-    text-align: center;
-    padding: 0 34px;
-    caret-color: $input-caret-color;
+    @include e(minus-button) {
+      left: 0;
+      border-top-left-radius: $--input-number-border-radius;
+      border-bottom-left-radius: $--input-number-border-radius;
+    }
+    @include e(add-button) {
+      right: 0;
+      border-top-right-radius: $--input-number-border-radius;
+      border-bottom-right-radius: $--input-number-border-radius;
+    }
+    @include e(input) {
+      outline: none;
+      border-radius: $--input-number-border-radius;
+      background-color: map-get($--input-number-background-color, 'default');
+      box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'default');
+      &:hover ~ {
+        @include e(border-layer) {
+          box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'hover');
+        }
+      }
+      &:focus {
+        background-color: map-get($--input-number-background-color, 'focus');
+        & ~ {
+          @include e(border-layer) {
+            box-shadow: map-get($--input-number-box-shadow, 'focus');
+          }
+        }
+      }
+      transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, box-shadow .3s $default-cubic-bezier;
+      border: none;
+      color: map-get($--input-number-text-color, 'default');
+      width: 84px;
+      text-align: center;
+      padding: 0 34px;
+      caret-color: $--input-number-caret-color;
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/styles/Notification.scss b/styles/Notification.scss
index e2ed9578d..8314e288e 100644
--- a/styles/Notification.scss
+++ b/styles/Notification.scss
@@ -12,7 +12,6 @@
           $--notification-background-end-color 100%
         );
         color: $--notification-text-color;
-
         @include once {
           position: relative;
           display: flex;
@@ -24,7 +23,7 @@
           max-height: 400px;
           width: 365px;
           border-radius: 6px;
-          box-shadow: 0 2px 25px 0 rgba(0, 0, 0, 0.5);
+          box-shadow:  0px 2px 8px 0px rgba(0,0,0,0.12);
           font-weight: 700;
           opacity: 1;
           transition: opacity 0.3s $default-cubic-bezier,
diff --git a/styles/Radio.scss b/styles/Radio.scss
index 74f0f499d..2bf905dec 100644
--- a/styles/Radio.scss
+++ b/styles/Radio.scss
@@ -1,184 +1,188 @@
 @import './mixins/mixins.scss';
 @import './themes/vars.scss';
 
-@include b(radio) {
-  position: relative;
-  user-select: none;
-  display: inline-flex;
-  vertical-align: middle;
-  align-items: center;
-  margin-right: 18px;
-  .n-radio__control {
-    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
-    transition: box-shadow .2s $default-cubic-bezier;
-    height: 14px;
-    width: 14px;
-    border-radius: 7px;
-    margin-right: 9px;
+@include themes-mixin {
+  @include b(radio) {
+    outline: none;
     position: relative;
-    &::before {
-      content: "";
-      position: absolute;
-      left: 3px;
-      top: 3px;
-      height: 8px;
-      width: 8px;
-      border-radius: 4px;
-      transform: scale(.8);
-      background-color: rgba(99, 226, 183, 1);
-      opacity: 0;
-      transition: opacity .15s $slow-out-cubic-bezier, transform .15s $slow-out-cubic-bezier;
-    }
-    &.n-radio__control--checked {
-      box-shadow: inset 0 0 0 1px rgba(99, 226, 183, 1);
-      &::before {
-        opacity: 1;
-        transform: scale(1);
-        
-        transition: opacity .15s $fast-in-cubic-bezier, transform .15s $fast-in-cubic-bezier;
-      }
-    }
-  }
-  .n-radio__label {
-    display: inline-block;
-    color: rgba(233,233,236,1);
-  }
-  &:not(.n-radio--disabled) {
-    cursor: pointer;
-    &:hover .n-radio__control {
-      box-shadow: inset 0 0 0 1px rgba(99, 226, 183, 1);
-      transition: box-shadow .2s $default-cubic-bezier;
-    }
-    &:active .n-radio__control {
-      box-shadow: inset 0 0 0 1px rgba(99, 226, 183, 1), 0px 0px 10px 1px rgba(99,226,183,0.3);
-    }
-  }
-  &.n-radio--disabled {
-    cursor: not-allowed;
-    .n-radio__control {
-      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
-      transition: box-shadow .2s $default-cubic-bezier;
+    user-select: none;
+    display: inline-flex;
+    vertical-align: middle;
+    align-items: center;
+    margin-right: 18px;
+    @include e(control) {
+      box-shadow: map-get($--radio-box-shadow, 'default');
+      transition: box-shadow .3s $default-cubic-bezier;
+      height: 14px;
+      width: 14px;
+      border-radius: 7px;
+      margin-right: 9px;
+      position: relative;
       &::before {
+        content: "";
+        position: absolute;
+        left: 4px;
+        top: 4px;
+        height: 6px;
+        width: 6px;
+        border-radius: 4px;
         transform: scale(.8);
-        transform-origin: center;
+        background-color: map-get($--radio-control-background-color, 'active');
         opacity: 0;
-        background-color: rgba(233,233,236,0.25);
+        transition: opacity .3s $slow-out-cubic-bezier, transform .3s $slow-out-cubic-bezier;
       }
-      &.n-radio__control--checked {
+      @include m(checked) {
+        box-shadow: map-get($--radio-box-shadow, 'active');
         &::before {
-          transform: scale(1);
           opacity: 1;
+          transform: scale(1);
+          transition: opacity .3s $fast-in-cubic-bezier, transform .3s $fast-in-cubic-bezier;
         }
       }
     }
-    .n-radio__label {
-      color: rgba(233,233,236,0.25);
+    @include e(label) {
+      display: inline-block;
+      white-space: nowrap;
+      color: $--radio-label-text-color;
     }
-  }
-}
-
-@include b(radio-group) {
-  display: inline-flex;
-  vertical-align: middle;
-  .n-radio-group__splitor {
-    height: 100%;
-    width: 1px;
-    background-color: rgba(255,255,255,0.5);
-    transition: background-color .2s $default-cubic-bezier;
-    &.n-radio-group__splitor--checked {
-      background-color: #63E2B7;
-      &.n-radio-group__splitor--disabled {
-        background-color: rgba(99, 226, 183, .4);
+    @include not-m(disabled) {
+      cursor: pointer;
+      &:hover {
+        @include e(control) {
+          box-shadow: map-get($--radio-box-shadow, 'hover');
+          transition: box-shadow .3s $default-cubic-bezier;
+        }
+      }
+      &:focus:not(:active) {
+        @include e(control) {
+          box-shadow: map-get($--radio-box-shadow, 'focus');
+        }
       }
     }
-    &.n-radio-group__splitor--disabled {
-      background-color: rgba(255,255,255,0.25);
+    @include m(disabled) {
+      opacity: $--radio-disabled-opacity;
+      cursor: not-allowed;
+      @include e(control) {
+        box-shadow: map-get($--radio-box-shadow, 'disabled');
+        transition: box-shadow .3s $default-cubic-bezier;
+        &::before {
+          transform: scale(.8);
+          transform-origin: center;
+          opacity: 0;
+          background-color: map-get($--radio-control-background-color, 'disabled');
+        }
+        @include m(checked) {
+          &::before {
+            transform: scale(1);
+            opacity: 1;
+          }
+        }
+      }
+      @include e(label) {
+        color: $--radio-label-text-color;
+      }
     }
   }
 }
 
-@include b(radio-button) {
-  position: relative;
-  user-select: none;
-  display: inline-flex;
-  vertical-align: middle;
-  align-items: center;
-  height: 28px;
-  line-height: 28px;
-  border-top: 1px solid rgba(255,255,255,0.5);
-  border-bottom: 1px solid rgba(255,255,255,0.5);
-  box-sizing: content-box;
-  color: rgba(233,233,236,1);
-  transition: background-color .2s $default-cubic-bezier, border-color .2s $default-cubic-bezier;
-  .n-radio-button__label {
-    height: 28px;
-    line-height: 28px;
+@include themes-mixin {
+  @include b(radio-group) {
     display: inline-block;
-    margin: 0 14px;
-    transition: color .2s $default-cubic-bezier;
-  }
-  .n-radio-button__border-mask {
-    pointer-events: none;
-    position: absolute;
-    box-shadow: inset 0 0 0 1px transparent;
-    transition: box-shadow .2s $default-cubic-bezier;
-    left: -1px;
-    bottom: -1px;
-    right: -1px;
-    top: -1px;
-  }
-  &:first-child {
-    border-top-left-radius: 6px;
-    border-bottom-left-radius: 6px;
-    border-left: 1px solid rgba(255,255,255,0.5);
-    .n-radio-button__border-mask {
-      border-top-left-radius: 6px;
-      border-bottom-left-radius: 6px;
-    }
-  }
-  &:last-child {
-    border-top-right-radius: 6px;
-    border-bottom-right-radius: 6px;
-    border-right: 1px solid rgba(255,255,255,0.5);
-    .n-radio-button__border-mask {
-      border-top-right-radius: 6px;
-      border-bottom-right-radius: 6px;
-    }
-  }
-  &:not(.n-radio-button--disabled) {
-    cursor: pointer;
-    &.n-radio-button--checked {
-      background-color: #63E2B7;
-      color: #1F263E;
-      border-color: #63E2B7;
-      .n-radio-button__label {
-        color: #1F263E;
-        transition: color .2s $fast-in-cubic-bezier;
+    white-space: nowrap;
+    height: 28px;
+    @include b(radio-button) {
+      color: map-get($--radio-button-label-color, 'default');
+      outline: none;
+      position: relative;
+      user-select: none;
+      display: inline-block;
+      height: 28px;
+      line-height: 28px;
+      box-sizing: border-box;
+      padding-left: 14px;
+      padding-right: 14px;
+      white-space: nowrap;
+      border-top: 1px solid map-get($--radio-button-border-color, 'default');
+      border-bottom: 1px solid map-get($--radio-button-border-color, 'default');
+      transition: background-color .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier;
+      // @include e(label) {
+      //   color: map-get($--radio-button-label-color, 'default');
+      //   height: 26px;
+      //   line-height: 26px;
+      //   display: inline-block;
+      //   white-space: nowrap;
+      //   margin-left: 14px;
+      //   margin-right: 14px;
+      //   transition: color .3s $default-cubic-bezier;
+      // }
+      @include e(border-mask) {
+        pointer-events: none;
+        position: absolute;
+        box-shadow: inset 0 0 0 1px transparent;
+        transition: box-shadow .3s $default-cubic-bezier;
+        left: -1px;
+        bottom: -1px;
+        right: -1px;
+        top: -1px;
+      }
+      &:first-child {
+        border-top-left-radius: 6px;
+        border-bottom-left-radius: 6px;
+        border-left: 1px solid map-get($--radio-button-border-color, 'default');
+        @include e(border-mask) {
+          border-top-left-radius: 6px;
+          border-bottom-left-radius: 6px;
+        }
+      }
+      &:last-child {
+        border-top-right-radius: 6px;
+        border-bottom-right-radius: 6px;
+        border-right: 1px solid map-get($--radio-button-border-color, 'default');
+        @include e(border-mask) {
+          border-top-right-radius: 6px;
+          border-bottom-right-radius: 6px;
+        }
+      }
+      @include not-m(disabled) {
+        cursor: pointer;
+        &:hover {
+          @include e(border-mask) {
+            box-shadow: inset 0 0 0 1px map-get($--radio-button-border-color, 'hover');
+            transition: box-shadow .3s $default-cubic-bezier;
+          }
+          @include not-m(checked) {
+            color: map-get($--radio-button-label-color, 'hover');
+          }
+        }
+        &:focus:not(:active) {
+          @include e(border-mask) {
+            box-shadow: inset 0 0 0 1px map-get($--radio-button-label-color, 'active'), 0 0 0 2px change-color(map-get($--radio-button-label-color, 'active'), $alpha: .3);
+          }
+        }
+      }
+      @include m(checked) {
+        background-color: map-get($--radio-button-background-color, 'active');
+        color: map-get($--radio-button-label-color, 'active');
+        border-color:  map-get($--radio-button-border-color, 'active');
+      }
+      @include m(disabled) {
+        cursor: not-allowed;
+        opacity: $--radio-disabled-opacity;
       }
     }
-    &:hover .n-radio-button__border-mask {
-      box-shadow: inset 0 0 0 1px rgba(99, 226, 183, 1);
-      transition: box-shadow .2s $default-cubic-bezier;
-    }
-    &:hover:not(.n-radio-button--checked) .n-radio-button__label {
-      color: #63E2B7;
-    }
-    &:active .n-radio-button__border-mask {
-      box-shadow: inset 0 0 0 1px rgba(99, 226, 183, 1), 0px 0px 10px 1px rgba(99,226,183,0.3);
-    }
-  }
-  &.n-radio-button--disabled {
-    cursor: not-allowed;
-    border-color: rgba(255,255,255,0.16);
-    .n-radio-button__label {
-      color: rgba(255,255,255,0.25);
-    }
-    &.n-radio-button--checked {
-      color: rgba(31, 38, 62, .25);
-      border-color: transparent;
-      background-color: rgba(99, 226, 183, .4);
-      .n-radio-button__label {
-        color: rgba(31, 38, 62, .4);
+    @include e(splitor) {
+      display: inline-block;
+      vertical-align: bottom;
+      height: 28px;
+      width: 1px;
+      background-color: map-get($--radio-button-border-color, 'default');
+      transition: background-color .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier;
+      @include m(checked) {
+        background-color: map-get($--radio-button-border-color, 'active');
+      }
+      @include m(disabled) {
+        opacity: $--radio-disabled-opacity;
+        // background-color: map-get($--radio-button-border-color, 'default');
       }
     }
   }
diff --git a/styles/Slider.scss b/styles/Slider.scss
index fd6dbd8d0..ff280e2f4 100644
--- a/styles/Slider.scss
+++ b/styles/Slider.scss
@@ -22,10 +22,10 @@ $slider-indicator---box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.16);
 
 $slider-dot---size: 8px;
 $slider-dot---box-shadow: inset 0 0 0 2px rgba(78, 143, 132, 1);
+$slider-dot---box-shadow--active: inset 0 0 0 2px rgba(99, 226, 183, 1);
 
 @include b(slider) {
   display: block;
-  width: 100%;
   padding: $slider---padding;
   position: relative;
   z-index: 0;
@@ -36,6 +36,11 @@ $slider-dot---box-shadow: inset 0 0 0 2px rgba(78, 143, 132, 1);
       @include e(fill) {
         background-color: $slider-rail__fill--hover---background-color;
       }
+      @include b(slider-dots) {
+        @include b(slider-dot) {
+          box-shadow: $slider-dot---box-shadow--active;
+        }
+      }
     }
     @include b(slider-handle) {
       box-shadow: $slider-handle--hover---box-shadow;
@@ -113,6 +118,7 @@ $slider-dot---box-shadow: inset 0 0 0 2px rgba(78, 143, 132, 1);
   top: 50%;
   right: 0;
   @include b(slider-dot) {
+    transition: box-shadow .3s $default-cubic-bezier;
     position: absolute;
     transform: translateX(-50%) translateY(-50%);
     height: $slider-dot---size;
diff --git a/styles/Steps.scss b/styles/Steps.scss
index 368ab5155..0387e91b2 100644
--- a/styles/Steps.scss
+++ b/styles/Steps.scss
@@ -1,163 +1,120 @@
 @import './mixins/mixins.scss';
 @import './themes/vars.scss';
 
-@include b(steps) {
-  width: 100%;
-  display: flex;
+@mixin steps-status-mixin ($status) {
+  @include m($status) {
+    @include b(step-splitor) {
+      background-color: map-get($--steps-step-splitor-color, $status);
+    }
+    @include b(step-content) {
+      @include b(step-content-title) {
+        color: map-get($--steps-step-title-color, $status);
+      }
+      @include e(description) {
+        color: map-get($--steps-step-content-color, $status);
+      }
+    }
+    @include b(step-indicator) {
+      background-color: map-get($--steps-step-background-color, $status);
+      box-shadow: 0 0 0 1px map-get($--steps-step-border-color, $status);
+      @include e(icon, index) {
+        color: map-get($--steps-step-indicator-color, $status);
+      }
+    }
+  }
 }
 
-@include b(step) {
-  display: flex;
-  flex: 1;
-  .n-step__splitor {
-    transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
-    height: 1px;
-    flex: 1;
-    align-self: flex-start;
-    margin-top: 10px;
-    margin-left: 11px;
-    margin-right: 11px;
-    background-color: rgba(255,255,255,0.3);
-  }
-  .n-step__splitor.n-step__splitor--left {
-    display: none;
-  }
-  &:last-child {
-    .n-step__splitor.n-step__splitor--right {
-      display: none;
-    }
-    .n-step-content {
-      .n-step-content__title {
-        &::after {
+@include themes-mixin {
+  @include b(steps) {
+    width: 100%;
+    display: flex;
+    @include b(step) {
+      display: flex;
+      flex: 1;
+      @include steps-status-mixin('finish');
+      @include steps-status-mixin('error');
+      @include steps-status-mixin('wait');
+      @include steps-status-mixin('process');
+      @include b(step-splitor) {
+        transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
+        height: 1px;
+        flex: 1;
+        align-self: flex-start;
+        margin-top: 10px;
+        margin-left: 11px;
+        margin-right: 11px;
+        background-color: rgba(255,255,255,0.3);
+        @include m(left) {
           display: none;
         }
       }
-    }
-  }
-  &.n-step--finished {
-    .n-step__splitor {
-      background-color: rgba(99,226,183,1);
-    }
-    .n-step-content {
-      .n-step-content__title {
-        color: rgba(99,226,183,1);
-      }
-      .n-step-content__description {
-        color: rgba(99,226,183,1);
-      }
-    }
-    .n-step-indicator {
-      box-shadow: 0 0 0 1px rgba(99,226,183,1);
-      .n-step-indicator__icon, .n-step-indicator__index {
-        color: rgba(99,226,183,1);
-      }
-    }
-    &.n-step--error {
-      .n-step__splitor {
-        background-color: rgba(255, 146, 164, 1);
-      }
-      .n-step-content {
-        .n-step-content__title {
-          color: rgba(255, 146, 164, 1);
+      &:last-child {
+        @include b(step-splitor) {
+          @include m(right) {
+            display: none;
+          }
         }
-        .n-step-content__description {
-          color: rgba(255, 146, 164, 1);
-        }
-      }
-      .n-step-indicator {
-        box-shadow: 0 0 0 1px rgba(255, 146, 164, 1);
-        .n-step-indicator__icon, .n-step-indicator__index {
-          color: rgba(255, 146, 164, 1);
+        @include b(step-content) {
+          @include e(title) {
+            &::after {
+              display: none;
+            }
+          }
         }
       }
     }
-  }
-  &.n-step--active {
-    .n-step-content {
-      .n-step-content__title {
-        color: rgba(99,226,183,1);
-      }
-      .n-step-content__description {
-        color: rgba(99,226,183,1);
-      }
-    }
-    .n-step-indicator {
-      background-color: rgba(99,226,183,1);
-      box-shadow: 0 0 0 1px rgba(99,226,183,1);
-      .n-step-indicator__icon, .n-step-indicator__index {
-        color: rgba(23, 29, 51, 1);
-      }
-    }
-    &.n-step--error {
-      .n-step-content {
-        .n-step-content__title {
-          color: rgba(255, 146, 164, 1);
-        }
-        .n-step-content__description {
-          color: rgba(255, 146, 164, 1);
+    @include b(step-content) {
+      flex: 1;
+      @include b(step-content-title) {
+        transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
+        position: relative;
+        display: flex;
+        color: rgba(255,255,255,0.3);
+        font-weight: 700;
+        margin-left: 9px;
+        @include e(inner) {
+          white-space: nowrap;
+          flex: 0;
         }
       }
-      .n-step-indicator {
-        background-color: rgba(255, 146, 164, 1);
-        box-shadow: 0 0 0 1px rgba(255, 146, 164, 1);
-        .n-step-indicator__icon, .n-step-indicator__index {
-          color: rgba(23, 29, 51, 1);
-        }
+      @include e(description) {
+        transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
+        color: rgba(255,255,255,0.3);
+        margin-top: 12px;
+        margin-left: 9px;
       }
     }
-  }
-}
-
-@include b(step-content) {
-  flex: 1;
-  .n-step-content__title {
-    transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
-    position: relative;
-    display: flex;
-    color: rgba(255,255,255,0.3);
-    font-weight: 700;
-    margin-left: 9px;
-    .n-step-content__title-inner {
-      white-space: nowrap;
-      flex: 0;
+    
+    @include b(step-indicator) {
+      position: relative;
+      height: 20px;
+      width: 20px;
+      border-radius: 10px;
+      box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
+      transition: background-color .3s $default-cubic-bezier, box-shadow .3s $default-cubic-bezier;
+      @include e(icon) {
+        @include fade-in-transition-ease-in-out(step-indicator, .3s);
+        transition: color .3s $default-cubic-bezier;
+        color: rgba(255,255,255,0.3);
+        width: 16px;
+        height: 16px;
+        font-size: 16px;
+        line-height: 16px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+      }
+      @include e(index) {
+        @include fade-in-transition-ease-in-out(step-indicator, .3s);
+        transition: color .3s $default-cubic-bezier;
+        color: rgba(255,255,255,0.3);
+        font-size: 13px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+      }
     }
   }
-  .n-step-content__description {
-    transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
-    color: rgba(255,255,255,0.3);
-    margin-top: 12px;
-    margin-left: 9px;
-  }
-}
-
-@include b(step-indicator) {
-  position: relative;
-  height: 20px;
-  width: 20px;
-  border-radius: 10px;
-  box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
-  transition: background-color .3s $default-cubic-bezier, box-shadow .3s $default-cubic-bezier;
-  .n-step-indicator__icon {
-    @include fade-in-transition-ease-in-out(step-indicator, .3s);
-    transition: color .3s $default-cubic-bezier;
-    color: rgba(255,255,255,0.3);
-    width: 16px;
-    height: 16px;
-    font-size: 16px;
-    line-height: 16px;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
-  }
-  .n-step-indicator__index {
-    @include fade-in-transition-ease-in-out(step-indicator, .3s);
-    transition: color .3s $default-cubic-bezier;
-    color: rgba(255,255,255,0.3);
-    font-size: 13px;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
-  }
 }
\ No newline at end of file
diff --git a/styles/TimePicker.scss b/styles/TimePicker.scss
index 1ac6ca326..550ff4890 100644
--- a/styles/TimePicker.scss
+++ b/styles/TimePicker.scss
@@ -4,6 +4,7 @@
 @include themes-mixin {
   @include once {
     @include b(time-picker) {
+      position: relative;
       display: inline-block;
       width: 180px;
     }
diff --git a/styles/base.scss b/styles/base.scss
index d2c1342d3..cbb092af9 100644
--- a/styles/base.scss
+++ b/styles/base.scss
@@ -42,6 +42,15 @@ input {
   overflow: visible;
 }
 
+.n-detached-content-container.n-detached-content-container--absolute-positioned {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 0;
+  overflow: visible;
+}
+
 .n-detached-content {
   position: fixed;
 }
\ No newline at end of file
diff --git a/styles/themes/commonVars.scss b/styles/themes/commonVars.scss
index 435ccda6d..1eab51139 100644
--- a/styles/themes/commonVars.scss
+++ b/styles/themes/commonVars.scss
@@ -16,6 +16,8 @@ $--base-picker-border-radius: 6px;
 
 $--base-select-menu-box-shadow: none;
 
+$--input-number-border-radius: 6px;
+
 $--input-icon-size: 20px;
 $--input-border-radius: 6px;
 
diff --git a/styles/themes/dark/components/InputNumber.scss b/styles/themes/dark/components/InputNumber.scss
new file mode 100644
index 000000000..0c06f6b74
--- /dev/null
+++ b/styles/themes/dark/components/InputNumber.scss
@@ -0,0 +1,33 @@
+@mixin setup-dark-input-number {
+  $--input-number-border-color: (
+    'default': transparent,
+    'hover': $--n-primary-color,
+    'focus': $--n-primary-color
+  )!global;
+  $--input-number-background-color: (
+    "default": rgba(255, 255, 255, .1),
+    "disabled": rgba(255, 255, 255, .06),
+    "focus": change-color($--primary-6, $alpha: 0.1)
+  ) !global;
+  $--input-number-text-color: (
+    'default': $--n-secondary-text-color,
+    'disabled': $--n-disabled-text-color
+  ) !global;
+  $--input-number-button-text-color: (
+    'default': $--n-secondary-text-color,
+    'disabled': $--n-disabled-text-color,
+    'hover': $--n-primary-color
+  ) !global;
+  $--input-number-button-background-color: (
+    'default': rgba(255, 255, 255, .06),
+    'disabled': rgba(255, 255, 255, .04)
+  ) !global;
+  $--input-number-caret-color: $--n-primary-color !global;
+  $--input-number-disabled-opacity: 1 !global;
+  $--input-number-box-shadow: (
+    'default': inset 0 0 0 0 transparent,
+    'hover': inset 0 0 0px 1px $--primary-6,
+    'focus': (inset 0 0 0px 1px $--primary-6, 0 0 8px 0px change-color($--primary-6, $alpha: .3)),
+    "disabled": inset 0 0 0 1px transparent
+  ) !global;
+}
\ No newline at end of file
diff --git a/styles/themes/dark/components/Radio.scss b/styles/themes/dark/components/Radio.scss
new file mode 100644
index 000000000..0b5c735ad
--- /dev/null
+++ b/styles/themes/dark/components/Radio.scss
@@ -0,0 +1,29 @@
+@mixin setup-dark-radio {
+  $--radio-box-shadow: (
+    'default': inset 0 0 0 1px rgba(255, 255, 255, 0.4),
+    'active': inset 0 0 0 1px $--n-primary-color,
+    'focus': (inset 0 0 0 1px $--n-primary-color, 0 0 0 2px change-color($--n-primary-color, $alpha: .3)),
+    'hover': inset 0 0 0 1px $--n-primary-color,
+    'disabled': inset 0 0 0 1px rgba(255, 255, 255, 0.4)
+  ) !global;
+  $--radio-label-text-color: $--n-secondary-text-color !global;
+  $--radio-control-background-color: (
+    'active': $--n-primary-color,
+    'disabled': rgba(255, 255, 255, 0.4)
+  ) !global;
+  $--radio-button-border-color: (
+    'default': rgba(255, 255, 255, 0.4),
+    'active': $--n-primary-color,
+    'hover': $--n-primary-color
+  ) !global;
+  $--radio-button-background-color: (
+    'default': transparent,
+    'active': $--n-primary-color,
+  ) !global;
+  $--radio-button-label-color: (
+    'default': $--n-secondary-text-color,
+    'active': $--n-primary-color,
+    'hover': $--n-primary-color
+  ) !global;
+  $--radio-disabled-opacity: .4 !global;
+}
\ No newline at end of file
diff --git a/styles/themes/dark/components/Steps.scss b/styles/themes/dark/components/Steps.scss
new file mode 100644
index 000000000..8a7929037
--- /dev/null
+++ b/styles/themes/dark/components/Steps.scss
@@ -0,0 +1,38 @@
+@mixin setup-dark-step {
+  $--steps-step-border-color: (
+    'process': $--primary-6,
+    'wait': rgba(255, 255, 255, .3),
+    'finish': $--primary-6,
+    'error': $--error-6
+  ) !global;
+  $--steps-step-background-color: (
+    'process': $--primary-6,
+    'wait': transparent,
+    'finish': transparent,
+    'error': transparent
+  ) !global;
+  $--steps-step-indicator-color: (
+    'process': black,
+    'wait': rgba(255, 255, 255, .3),
+    'finish': $--primary-6,
+    'error': $--error-6
+  ) !global;
+  $--steps-step-splitor-color: (
+    'process': rgba(255, 255, 255, .3),
+    'wait': rgba(255, 255, 255, .3),
+    'finish': $--primary-6,
+    'error': $--error-6
+  ) !global;
+  $--steps-step-content-color: (
+    'process': $--n-secondary-text-color,
+    'wait': rgba(255, 255, 255, .3),
+    'finish': $--primary-6,
+    'error': $--error-6
+  ) !global;
+  $--steps-step-title-color: (
+    'process': $--n-text-color,
+    'wait': rgba(255, 255, 255, .3),
+    'finish': $--primary-6,
+    'error': $--error-6
+  ) !global;
+}
\ No newline at end of file
diff --git a/styles/themes/dark/index.scss b/styles/themes/dark/index.scss
index 668d7aca0..4ad1864ce 100644
--- a/styles/themes/dark/index.scss
+++ b/styles/themes/dark/index.scss
@@ -30,6 +30,9 @@
 @import "components/Timeline.scss";
 @import "components/BackTop.scss";
 @import "components/Notification.scss";
+@import "components/Radio.scss";
+@import "components/Steps.scss";
+@import "components/InputNumber.scss";
 
 @mixin setup-dark-theme() {
   @include setup-dark-colors();
@@ -87,4 +90,7 @@
   @include setup-dark-timeline;
   @include setup-dark-back-top;
   @include setup-dark-notification;
+  @include setup-dark-radio;
+  @include setup-dark-step;
+  @include setup-dark-input-number;
 }
diff --git a/styles/themes/light/components/BasePicker.scss b/styles/themes/light/components/BasePicker.scss
index 4ef0e074a..649f58c2e 100644
--- a/styles/themes/light/components/BasePicker.scss
+++ b/styles/themes/light/components/BasePicker.scss
@@ -2,7 +2,7 @@
   $--base-picker-color: $--n-secondary-text-color !global;
   $--base-picker-background-color: (
     "default": rgb(255, 255, 255),
-    "disabled": $alpha-neutral-8,
+    "disabled": $--alpha-neutral-8,
     "active": rgb(255, 255, 255),
   ) !global;
   $--base-picker-placeholder-color: (
diff --git a/styles/themes/light/components/CheckBox.scss b/styles/themes/light/components/CheckBox.scss
index 39c99cbca..dae0ae93e 100644
--- a/styles/themes/light/components/CheckBox.scss
+++ b/styles/themes/light/components/CheckBox.scss
@@ -1,8 +1,8 @@
 @mixin setup-light-checkbox {
-  $--checkbox-font-color: $neutral-3 !global;
-  $--checkbox-border-color: $neutral-5 !global;
+  $--checkbox-font-color: $--neutral-3 !global;
+  $--checkbox-border-color: $--neutral-5 !global;
   $--checkbox-border-color--active: $--primary-6 !global;
-  $--checkbox-indeterminate-color: $neutral-10 !global;
-  $--checkbox-disabled: $neutral-5 !global;
-  $--checkbox-disabled-bg-color: $neutral-8 !global;
+  $--checkbox-indeterminate-color: $--neutral-10 !global;
+  $--checkbox-disabled: $--neutral-5 !global;
+  $--checkbox-disabled-bg-color: $--neutral-8 !global;
 }
\ No newline at end of file
diff --git a/styles/themes/light/components/Input.scss b/styles/themes/light/components/Input.scss
index ddf4f3a04..e201cde93 100644
--- a/styles/themes/light/components/Input.scss
+++ b/styles/themes/light/components/Input.scss
@@ -10,7 +10,7 @@
   ) !global;
   $--input-background-color: (
     "default": rgb(255, 255, 255),
-    "disabled": $alpha-neutral-8,
+    "disabled": $--alpha-neutral-8,
     "focus": rgb(255, 255, 255)
   ) !global;
   $--input-icon-color: $--n-disabled-text-color !global;
diff --git a/styles/themes/light/components/InputNumber.scss b/styles/themes/light/components/InputNumber.scss
new file mode 100644
index 000000000..9a139c560
--- /dev/null
+++ b/styles/themes/light/components/InputNumber.scss
@@ -0,0 +1,35 @@
+@mixin setup-light-input-number {
+  $--input-number-border-color: (
+    'default': $--n-border-color,
+    'hover': $--n-primary-color,
+    'focus': $--n-primary-color
+  )!global;
+  $--input-number-background-color: (
+    'default': rgb(255, 255, 255),
+    'disabled': $--neutral-8,
+    'focus': rgb(255, 255, 255)
+  ) !global;
+  $--input-number-text-color: (
+    'default': $--n-secondary-text-color,
+    'disabled': $--n-disabled-text-color
+  ) !global;
+  $--input-number-button-text-color: (
+    'default': $--n-secondary-text-color,
+    'disabled': $--n-disabled-text-color,
+    'hover': $--n-primary-color
+  ) !global;
+  $--input-number-button-background-color: (
+    'default': $--neutral-8,
+    'hover': $--neutral-8,
+    'active':  $--neutral-8,
+    'disabled': $--neutral-8
+  ) !global;
+  $--input-number-caret-color: $--n-primary-color !global;
+  $--input-number-disabled-opacity: 1 !global;
+  $--input-number-box-shadow: (
+    "default": inset 0 0 0 1px $--n-border-color,
+    "hover": inset 0 0 0 1px $--primary-5,
+    "focus": (inset 0 0 0 1px $--primary-5, 0 0 0 2px change-color($--primary-5, $alpha: .3)),
+    "disabled": inset 0 0 0 1px $--n-border-color
+  ) !global;
+}
\ No newline at end of file
diff --git a/styles/themes/light/components/NimbusServiceLayout.scss b/styles/themes/light/components/NimbusServiceLayout.scss
index c6f1cdca6..ed4519543 100644
--- a/styles/themes/light/components/NimbusServiceLayout.scss
+++ b/styles/themes/light/components/NimbusServiceLayout.scss
@@ -1,10 +1,10 @@
 @mixin setup-light-nimbus-service-layout {
-  $service-layout-drawer-background-color: $neutral-10 !global;
-  $service-layout-body-background-color: $neutral-9 !global;
-  $service-layout-nav-background-color: $neutral-10 !global;
+  $service-layout-drawer-background-color: $--neutral-10 !global;
+  $service-layout-body-background-color: $--neutral-9 !global;
+  $service-layout-nav-background-color: $--neutral-10 !global;
   $service-layout-color: $--n-text-color !global ;
   $service-layout-border-color: $--n-divider-color !global;
   $service-layout-toggle-button-color: rgba(0, 0, 0, .15)!global;
-  $service-layout-item-background-image: linear-gradient(47deg, $neutral-7, $neutral-7) !global;
+  $service-layout-item-background-image: linear-gradient(47deg, $--neutral-7, $--neutral-7) !global;
   $--service-kayout-item-active-color: $--primary-6 !global;
 }
\ No newline at end of file
diff --git a/styles/themes/light/components/Radio.scss b/styles/themes/light/components/Radio.scss
new file mode 100644
index 000000000..68124ee58
--- /dev/null
+++ b/styles/themes/light/components/Radio.scss
@@ -0,0 +1,29 @@
+@mixin setup-light-radio {
+  $--radio-box-shadow: (
+    'default': inset 0 0 0 1px $--n-border-color,
+    'active': inset 0 0 0 1px $--n-primary-color,
+    'focus': (inset 0 0 0 1px $--n-primary-color, 0 0 0 2px change-color($--n-primary-color, $alpha: .3)),
+    'hover': inset 0 0 0 1px $--n-primary-color,
+    'disabled': inset 0 0 0 1px $--n-border-color
+  ) !global;
+  $--radio-label-text-color: $--n-secondary-text-color !global;
+  $--radio-control-background-color: (
+    'active': $--n-primary-color,
+    'disabled': $--n-border-color
+  ) !global;
+  $--radio-button-border-color: (
+    'default': $--n-border-color,
+    'active': $--n-primary-color,
+    'hover': $--n-border-color
+  ) !global;
+  $--radio-button-background-color: (
+    'default': white,
+    'active': white,
+  ) !global;
+  $--radio-button-label-color: (
+    'default': $--n-secondary-text-color,
+    'active': $--n-primary-color,
+    'hover': $--n-primary-color
+  ) !global;
+  $--radio-disabled-opacity: .4 !global;
+}
\ No newline at end of file
diff --git a/styles/themes/light/components/Steps.scss b/styles/themes/light/components/Steps.scss
new file mode 100644
index 000000000..cdf586cc2
--- /dev/null
+++ b/styles/themes/light/components/Steps.scss
@@ -0,0 +1,38 @@
+@mixin setup-light-steps {
+  $--steps-step-border-color: (
+    'process': $--primary-6,
+    'wait': rgba(0, 0, 0, .3),
+    'finish': $--primary-6,
+    'error': $--error-6
+  ) !global;
+  $--steps-step-background-color: (
+    'process': $--primary-6,
+    'wait': transparent,
+    'finish': transparent,
+    'error': transparent
+  ) !global;
+  $--steps-step-indicator-color: (
+    'process': black,
+    'wait': rgba(0, 0, 0, .3),
+    'finish': $--primary-6,
+    'error': $--error-6
+  ) !global;
+  $--steps-step-splitor-color: (
+    'process': rgba(0, 0, 0, .3),
+    'wait': rgba(0, 0, 0, .3),
+    'finish': $--primary-6,
+    'error': $--error-6
+  ) !global;
+  $--steps-step-content-color: (
+    'process': $--n-secondary-text-color,
+    'wait': rgba(0, 0, 0, .3),
+    'finish': $--primary-6,
+    'error': $--error-6
+  ) !global;
+  $--steps-step-title-color: (
+    'process': $--n-text-color,
+    'wait': rgba(0, 0, 0, .3),
+    'finish': $--primary-6,
+    'error': $--error-6
+  ) !global;
+}
\ No newline at end of file
diff --git a/styles/themes/light/components/Table.scss b/styles/themes/light/components/Table.scss
index 28be91b8a..e678816fd 100644
--- a/styles/themes/light/components/Table.scss
+++ b/styles/themes/light/components/Table.scss
@@ -6,5 +6,5 @@
   $--table-row-hover: rgba(0,0,0,0.03) !global;
   $--table-box-shadow: none !global;
   $--table-border:1px solid rgba(0,0,0,0.15) !global;
-  $--table-td-border-right: 1px solid $alpha-neutral-6 !global;
+  $--table-td-border-right: 1px solid $--alpha-neutral-6 !global;
 }
\ No newline at end of file
diff --git a/styles/themes/light/components/Tag.scss b/styles/themes/light/components/Tag.scss
index 6d0bcb694..1bab9aed1 100644
--- a/styles/themes/light/components/Tag.scss
+++ b/styles/themes/light/components/Tag.scss
@@ -12,26 +12,26 @@
     'error-disabled': $--n-disabled-text-color,
   ) !global;
   $--tag-background-color: (
-    'default': $neutral-9,
-    'default-hover': $neutral-9,
-    'default-active': $neutral-9,
-    'default-disabled': $neutral-9,
+    'default': $--neutral-9,
+    'default-hover': $--neutral-9,
+    'default-active': $--neutral-9,
+    'default-disabled': $--neutral-9,
     'success': change-color($--success-6, $alpha: .1),
     'success-hover': change-color($--success-6, $alpha: .1),
     'success-active': change-color($--success-6, $alpha: .1),
-    'success-disabled': $neutral-9,
+    'success-disabled': $--neutral-9,
     'warning': change-color($--warning-6, $alpha: .1),
     'warning-hover': change-color($--warning-6, $alpha: .1),
     'warning-active': change-color($--warning-6, $alpha: .1),
-    'warning-disabled': $neutral-9,
+    'warning-disabled': $--neutral-9,
     'info': change-color($--info-6, $alpha: .1),
     'info-hover': change-color($--info-6, $alpha: .1),
     'info-active': change-color($--info-6, $alpha: .1),
-    'info-disabled': $neutral-9,
+    'info-disabled': $--neutral-9,
     'error': change-color($--error-6, $alpha: .1),
     'error-hover': change-color($--error-6, $alpha: .1),
     'error-active': change-color($--error-6, $alpha: .1),
-    'error-disabled': $neutral-9,
+    'error-disabled': $--neutral-9,
   ) !global;
   $--tag-border-color: (
     'default': $--n-border-color,
diff --git a/styles/themes/light/components/Tooltip.scss b/styles/themes/light/components/Tooltip.scss
index e4ff4fa86..569e2b1b2 100644
--- a/styles/themes/light/components/Tooltip.scss
+++ b/styles/themes/light/components/Tooltip.scss
@@ -1,5 +1,5 @@
 @mixin setup-light-tooltip {
-  $--tooltip-background-color: $alpha-neutral-2 !global;
+  $--tooltip-background-color: $--alpha-neutral-2 !global;
   $--tooltip-color: rgb(255, 255, 255) !global;
   $--tooltip-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.08) !global;
 }
\ No newline at end of file
diff --git a/styles/themes/light/index.scss b/styles/themes/light/index.scss
index a54106cfb..cdd0e19c7 100644
--- a/styles/themes/light/index.scss
+++ b/styles/themes/light/index.scss
@@ -30,6 +30,9 @@
 @import "components/Timeline.scss";
 @import "components/BackTop.scss";
 @import "components/Notification.scss";
+@import "components/Radio.scss";
+@import "components/Steps.scss";
+@import "components/InputNumber.scss";
 
 @mixin setup-light-theme() {
   @include setup-light-colors();
@@ -41,16 +44,16 @@
   $--n-warning-color: $--warning-6 !global;
   $--n-error-color: $--error-6 !global;
 
-  $n-selected-color: $neutral-7 !global;
-  $--n-divider-color: $neutral-7 !global;
-  $--n-border-color: $neutral-6 !global;
+  $--n-selected-color: $--neutral-7 !global;
+  $--n-divider-color: $--neutral-7 !global;
+  $--n-border-color: $--neutral-6 !global;
 
-  $--n-secondary-text-color: $neutral-3 !global;
-  $--n-text-color: $neutral-2 !global;
-  $--n-disabled-text-color: $neutral-5 !global;
-  $--n-card-color: $neutral-10 !global;
-  $--n-dialog-color: $neutral-10 !global;
-  $--n-background-color: $neutral-10 !global;
+  $--n-secondary-text-color: $--neutral-3 !global;
+  $--n-text-color: $--neutral-2 !global;
+  $--n-disabled-text-color: $--neutral-5 !global;
+  $--n-card-color: $--neutral-10 !global;
+  $--n-dialog-color: $--neutral-10 !global;
+  $--n-background-color: $--neutral-10 !global;
 
   @include setup-light-nimbus-service-layout;
   @include setup-light-divider;
@@ -83,4 +86,7 @@
   @include setup-light-timeline;
   @include setup-light-back-top;
   @include setup-light-notification;
+  @include setup-light-radio;
+  @include setup-light-steps;
+  @include setup-light-input-number;
 }
diff --git a/styles/themes/light/lightColors.bak.scss b/styles/themes/light/lightColors.bak.scss
index 85ca376b1..1d9b67664 100644
--- a/styles/themes/light/lightColors.bak.scss
+++ b/styles/themes/light/lightColors.bak.scss
@@ -1,16 +1,16 @@
 /** chorme and firefox render diffrently, so I save the original file */
 
 @mixin setup-light-colors {
-  $neutral-1: rgba(0, 0, 0, 1) !global;
-  $neutral-2: rgba(0, 0, 0, .85) !global;
-  $neutral-3: rgba(0, 0, 0, .45) !global;
-  $neutral-3: rgba(0, 0, 0, .25) !global;
-  $neutral-3: rgba(0, 0, 0, .15) !global;
-  $neutral-3: rgba(0, 0, 0, .09) !global;
-  $neutral-3: rgba(0, 0, 0, .04) !global;
-  $neutral-3: rgba(0, 0, 0, 1) !global;
-  $neutral-3: rgba(0, 0, 0, 1) !global;
-  $neutral-3: rgba(0, 0, 0, 1) !global;
+  $--neutral-1: rgba(0, 0, 0, 1) !global;
+  $--neutral-2: rgba(0, 0, 0, .85) !global;
+  $--neutral-3: rgba(0, 0, 0, .45) !global;
+  $--neutral-3: rgba(0, 0, 0, .25) !global;
+  $--neutral-3: rgba(0, 0, 0, .15) !global;
+  $--neutral-3: rgba(0, 0, 0, .09) !global;
+  $--neutral-3: rgba(0, 0, 0, .04) !global;
+  $--neutral-3: rgba(0, 0, 0, 1) !global;
+  $--neutral-3: rgba(0, 0, 0, 1) !global;
+  $--neutral-3: rgba(0, 0, 0, 1) !global;
   $--primary-1: #e6ffee !global;
   $--primary-2: #9bf2bb !global;
   $--primary-3: #6ee69e !global;
diff --git a/styles/themes/light/lightColors.scss b/styles/themes/light/lightColors.scss
index a79a5973e..8aab69f72 100644
--- a/styles/themes/light/lightColors.scss
+++ b/styles/themes/light/lightColors.scss
@@ -1,24 +1,24 @@
 @mixin setup-light-colors {
-  $alpha-neutral-1: rgba(0, 0, 0, 1) !global;
-  $alpha-neutral-2: rgba(0, 0, 0, .85) !global;
-  $alpha-neutral-3: rgba(0, 0, 0, .65) !global;
-  $alpha-neutral-4: rgba(0, 0, 0, .45) !global;
-  $alpha-neutral-5: rgba(0, 0, 0, .25) !global;
-  $alpha-neutral-6: rgba(0, 0, 0, .15) !global;
-  $alpha-neutral-7: rgba(0, 0, 0, .09) !global;
-  $alpha-neutral-8: rgba(0, 0, 0, .04) !global;
-  $alpha-neutral-9: rgba(0, 0, 0, .02) !global;
-  $alpha-neutral-10: rgba(0, 0, 0, 0) !global;
-  $neutral-1: rgb(0, 0, 0) !global;
-  $neutral-2: rgb(38, 38, 38) !global;
-  $neutral-3: rgb(89, 89, 89) !global;
-  $neutral-4: rgb(140, 140, 140) !global;
-  $neutral-5: rgb(191, 191, 191) !global;
-  $neutral-6: rgb(217, 217, 217) !global;
-  $neutral-7: rgb(232, 232, 232) !global;
-  $neutral-8: rgb(244, 244, 244) !global;
-  $neutral-9: rgb(250, 250, 250) !global;
-  $neutral-10: rgb(255, 255, 255) !global;
+  $--alpha-neutral-1: rgba(0, 0, 0, 1) !global;
+  $--alpha-neutral-2: rgba(0, 0, 0, .85) !global;
+  $--alpha-neutral-3: rgba(0, 0, 0, .65) !global;
+  $--alpha-neutral-4: rgba(0, 0, 0, .45) !global;
+  $--alpha-neutral-5: rgba(0, 0, 0, .25) !global;
+  $--alpha-neutral-6: rgba(0, 0, 0, .15) !global;
+  $--alpha-neutral-7: rgba(0, 0, 0, .09) !global;
+  $--alpha-neutral-8: rgba(0, 0, 0, .04) !global;
+  $--alpha-neutral-9: rgba(0, 0, 0, .02) !global;
+  $--alpha-neutral-10: rgba(0, 0, 0, 0) !global;
+  $--neutral-1: rgb(0, 0, 0) !global;
+  $--neutral-2: rgb(38, 38, 38) !global;
+  $--neutral-3: rgb(89, 89, 89) !global;
+  $--neutral-4: rgb(140, 140, 140) !global;
+  $--neutral-5: rgb(191, 191, 191) !global;
+  $--neutral-6: rgb(217, 217, 217) !global;
+  $--neutral-7: rgb(232, 232, 232) !global;
+  $--neutral-8: rgb(244, 244, 244) !global;
+  $--neutral-9: rgb(250, 250, 250) !global;
+  $--neutral-10: rgb(255, 255, 255) !global;
   $--primary-1: #d9f1e1 !global;
   $--primary-2: #a7d4b6 !global;
   $--primary-3: #7dc798 !global;
diff --git a/think.md b/think.md
index 284db7945..0690c3eb5 100644
--- a/think.md
+++ b/think.md
@@ -46,6 +46,8 @@ popover 停止追踪的时机
 popover 可能 activator 和 content 不同步，在 beforeRouteEnter locale change 的时候！！！
 ## 2019.9.28
 confirm 有 bug = =...和 button 颜色相关，之后检查吧
+## 2019.10.21
+Radio Button 默认主题下是否 hollow out，这是个问题
 ## TODO
 issue fix, add delay prop
 add trigger to tooltip