commit e320f43c2d0a7ca425ad3b8d49d24d8efe4ff545
Author: qingwei.li <cinwell.li@gmail.com>
Date:   Wed Jul 27 14:15:02 2016 +0800

    Initial commit

diff --git a/.babelrc b/.babelrc
new file mode 100644
index 000000000..1e2392943
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["es2015"],
+  "comments": false
+}
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 000000000..9385523f1
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,2 @@
+popper.js
+fecha.js
diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 000000000..75310fc75
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,9 @@
+{
+  "plugins": ['vue'],
+  "extends": 'elemefe',
+  "parserOptions": {
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true
+    }
+  }
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000..f823b3750
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,10 @@
+node_modules
+.DS_Store
+npm-debug.log
+lerna-debug.log
+npm-debug.log.*
+lerna-debug.log.*
+lib
+.idea
+examples/element-ui
+fe.element/element-ui
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 000000000..3a8e31723
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,65 @@
+## 更新日志
+
+### 0.2.0
+
+`2016-07-29`
+
+- 增加 grid 相关组件
+- form-item 增加 required 属性
+
+*非兼容性更新*
+
+- progress 的 percentage 属性值范围从 0～1 改变为 1~100.
+
+### 0.1.9
+
+`2016-07-12`
+
+- 增加 menu 组件
+
+*非兼容性更新*
+
+- 使用了新的图标集，原有的某些图标可能不存在了
+
+### 0.1.8
+
+`2016-07-07`
+
+- dropdown 和 tooltip 首次出现闪动问题
+
+### 0.1.7
+
+`2016-07-06`
+
+- dropdown 增加触发下拉菜单方式的参数
+- 修正若干组件的样式问题和浏览器兼容问题
+- 修复 popper.js 产生的过多 scroll 事件绑定
+- 在 radio-group 里增加 radio-button 类型
+- 为 select 添加 singleCancelable 选项
+
+### 0.1.6
+
+`2016-06-30`
+- dropdown-menu 改为动态创建
+- 修复 textarea 缺失 model 参数的 bug
+- 修复 pagination 和 input-group 在 safari 下的样式问题
+
+### 0.1.5
+
+`2016-06-29`
+- 为 MessageBox 和 Notification 注册全局方法
+- button 的 loading 状态时改为不触发 hover 和点击等操作
+- input组件 增加 maxlength 和 minlength 属性支持
+
+### 0.1.4
+
+`2016-06-29`
+
+- 增加 Tabs、Form、MessageBox、Alert、Notification、Slider 组件
+- dropdown menu 现在是直接插入到 body 节点下，并且修正了自适应宽度的 bug
+- dropdown item 点击后关闭 dropdown menu
+- radio 绑定值增加 Number 类型支持
+- 增加 radio-group 组件
+- 增加 checkbox-group 组件
+- Select 组件 API 更新，现在的用法和原生 select 标签更加相似
+
diff --git a/Makefile b/Makefile
new file mode 100644
index 000000000..0b7bd180e
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,53 @@
+.PHONY: dist
+default: help
+
+# build all theme
+build-theme: build-theme-default
+
+build-theme-default:
+	packages/theme-default/node_modules/.bin/gulp build --gulpfile packages/theme-default/gulpfile.js
+	cp -rf packages/theme-default/lib lib/theme-default
+
+install:
+	npm i --registry=http://registry.npm.taobao.org --ignore-scripts --loglevel=error
+	./node_modules/.bin/lerna bootstrap
+
+dev: install
+	node bin/iconInit.js
+	npm run dev
+
+new:
+	node bin/new.js $(filter-out $@,$(MAKECMDGOALS))
+
+dist:
+	npm run dist
+	make build-theme
+
+dist-all:
+	node bin/build-all.js
+	make build-theme
+
+deploy: install
+	@npm run deploy
+	@rm -rf fe.element/element-ui
+	@cp -r examples/element-ui fe.element
+
+gh-docs:
+	@npm run gh-docs
+
+pub:
+	./node_modules/.bin/kp $(filter-out $@,$(MAKECMDGOALS))
+
+pub-all: dist-all
+	./node_modules/.bin/lerna publish
+
+help:
+	@echo "   \033[35mmake\033[0m \033[1m命令使用说明\033[0m"
+	@echo "   \033[35mmake install\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  安装依赖"
+	@echo "   \033[35mmake new <component-name> [中文名]\033[0m\t---  创建新组件 package. 例如 'make new button 按钮'"
+	@echo "   \033[35mmake dev\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  开发模式"
+	@echo "   \033[35mmake dist\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  编译项目，生成目标文件"
+	@echo "   \033[35mmake dist-all\033[0m\t\033[0m\t\033[0m\t---  分别编译每个组件项目"
+	@echo "   \033[35mmake deploy\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  部署 demo"
+	@echo "   \033[35mmake pub\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  发布到 npm 上"
+	@echo "   \033[35mmake pub-all\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  发布各组件到 npm 上"
diff --git a/README.md b/README.md
new file mode 100644
index 000000000..3821ec685
--- /dev/null
+++ b/README.md
@@ -0,0 +1,66 @@
+# Element
+> UI Elements for admin page.
+
+## Demo/Docs
+https://element-component.github.io/element
+
+## Usages
+```shell
+npm i element-ui -S
+```
+
+## Quick Start
+use [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)
+
+``` javascript
+import Vue from 'vue'
+import Element from 'element-ui'
+
+Vue.use(Element)
+
+// or
+import {
+  Select,
+  Button
+  // ...
+} from 'element-ui'
+
+Vue.component(Select.name, ElSelect)
+Vue.component(Button.name, Button)
+```
+
+(roughly) to
+
+``` javascript
+import Vue from 'vue'
+import Element from 'element-ui'
+import 'element-ui/lib/theme-default/index.css';
+
+Vue.use(Element)
+
+// or
+import Select from 'element-ui/lib/select';
+import Select from 'element-ui/lib/theme-default/select.css';
+import Button from 'element-ui/lib/button';
+import Button from 'element-ui/lib/theme-default/button.css';
+
+Vue.component(Select.name, ElSelect)
+Vue.component(Button.name, Button)
+```
+
+## babel-plugin-component
+.babelrc
+```json
+{
+  "plugins": ["xxx", ["component", [
+    {
+      "libraryName": "element-ui",
+      "styleLibraryName": "theme-default"
+    }
+  ]]]
+}
+```
+
+## LICENSE
+MIT
+
diff --git a/bin/build-all.js b/bin/build-all.js
new file mode 100644
index 000000000..8c52544ef
--- /dev/null
+++ b/bin/build-all.js
@@ -0,0 +1,26 @@
+'use strict';
+
+const components = require('../components.json');
+const execSync = require('child_process').execSync;
+const existsSync = require('fs').existsSync;
+const path = require('path');
+
+let componentPaths = [];
+
+delete components.index;
+delete components.font;
+
+Object.keys(components).forEach(key => {
+  const filePath = path.join(__dirname, `../packages/${key}/cooking.conf.js`);
+
+  if (existsSync(filePath)) {
+    componentPaths.push(`packages/${key}/cooking.conf.js`)
+  }
+});
+
+const paths = componentPaths.join(',');
+const cli = `cooking build -c ${paths} -p`;
+
+execSync(cli, {
+  stdio: 'inherit'
+});
diff --git a/bin/build-entry.js b/bin/build-entry.js
new file mode 100644
index 000000000..3a7b47d5d
--- /dev/null
+++ b/bin/build-entry.js
@@ -0,0 +1,70 @@
+var Components = require('../components.json')
+var fs = require('fs')
+var render = require('json-templater/string')
+var uppercamelcase = require('uppercamelcase')
+var path = require('path')
+
+var OUTPUT_PATH = path.join(__dirname, '../src/index.js')
+var IMPORT_TEMPLATE = `import {{name}} from '../packages/{{package}}/index.js';`
+var ISNTALL_COMPONENT_TEMPLATE = `  Vue.component({{name}}.name, {{name}});`
+var MAIN_TEMPLATE = `{{include}}
+
+const install = function(Vue) {
+{{install}}
+
+  Vue.use(Loading);
+
+  Vue.prototype.$msgbox = MessageBox;
+  Vue.prototype.$alert = MessageBox.alert;
+  Vue.prototype.$confirm = MessageBox.confirm;
+  Vue.prototype.$prompt = MessageBox.prompt;
+  Vue.prototype.$notify = Notification;
+};
+
+// auto install
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue);
+};
+
+module.exports = {
+  install,
+{{list}}
+};
+`
+
+delete Components.font
+
+var ComponentNames = Object.keys(Components)
+
+var includeComponentTemplate = []
+var installTemplate = []
+var listTemplate = []
+
+ComponentNames.forEach(name => {
+  var componentName = uppercamelcase(name)
+
+  includeComponentTemplate.push(render(IMPORT_TEMPLATE, {
+    name: componentName,
+    package: name
+  }))
+
+
+  if (['Loading', 'MessageBox', 'Notification'].indexOf(componentName) === -1) {
+    installTemplate.push(render(ISNTALL_COMPONENT_TEMPLATE, {
+      name: componentName,
+      component: name
+    }))
+  }
+
+  listTemplate.push(`  ${componentName}`)
+})
+
+var template = render(MAIN_TEMPLATE, {
+  include: includeComponentTemplate.join('\n'),
+  install: installTemplate.join('\n'),
+  list: listTemplate.join(',\n')
+})
+
+fs.writeFileSync(OUTPUT_PATH, template)
+console.log('[build entry] DONE:', OUTPUT_PATH)
+
diff --git a/bin/iconInit.js b/bin/iconInit.js
new file mode 100644
index 000000000..5f5df7db3
--- /dev/null
+++ b/bin/iconInit.js
@@ -0,0 +1,20 @@
+'use strict';
+
+var postcss = require('postcss');
+var fs = require('fs');
+var path = require('path');
+var fontFile = fs.readFileSync(path.resolve(__dirname, '../packages/theme-default/src/icon.css'), 'utf8');
+var nodes = postcss.parse(fontFile).nodes;
+var classList = [];
+
+nodes.forEach((node) => {
+  var selector = node.selector || '';
+  var reg = new RegExp(/\.el-icon-([^:]+):before/);
+  var arr = selector.match(reg);
+
+  if (arr && arr[1]) {
+    classList.push(arr[1]);
+  }
+})
+
+fs.writeFile(path.resolve(__dirname, '../examples/icon.json'), JSON.stringify(classList));
diff --git a/bin/new.js b/bin/new.js
new file mode 100644
index 000000000..253eaa5f5
--- /dev/null
+++ b/bin/new.js
@@ -0,0 +1,133 @@
+'use strict';
+
+console.log();
+process.on('exit', () => {
+  console.log();
+});
+
+if (!process.argv[2]) {
+  console.error('[组件名]必填.');
+  process.exit(1);
+}
+
+const path = require('path');
+const fileSave = require('file-save');
+const uppercamelcase = require('uppercamelcase');
+const componentname = process.argv[2];
+const chineseName = process.argv[3] || componentname;
+const ComponentName = uppercamelcase(componentname);
+const PackagePath = path.resolve(__dirname, '../packages', componentname);
+const Files = [
+  {
+    filename: 'index.js',
+    content: `const ${ComponentName} = require('./src/main');
+
+${ComponentName}.install = function(Vue) {
+  Vue.component(${ComponentName}.name, ${ComponentName});
+};
+
+module.exports = ${ComponentName};`
+  },
+  {
+    filename: 'cooking.conf.js',
+    content: `var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'El${ComponentName}',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();`
+  },
+  {
+    filename: 'package.json',
+    content: `{
+  "name": "el-${componentname}",
+  "version": "0.0.0",
+  "description": "A ${componentname} component for Vue.js.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/${componentname}",
+  "author": "elemefe",
+  "license": "MIT",
+  "dependencies": {}
+}`
+  },
+  {
+    filename: 'src/main.vue',
+    content: `<template>
+  <div class="el-${componentname}"></div>
+</template>
+
+<script>
+export default {
+  name: 'el-${componentname}'
+};
+</script>`
+  },
+  {
+    filename: path.join('../../examples/docs/', `${componentname}.md`),
+    content:`## ${chineseName}`
+  }
+]
+
+// 添加到 components.json
+const componentsFile = require('../components.json');
+if (componentsFile[componentname]) {
+  console.error(`${componentname} 已存在.`);
+  process.exit(1);
+}
+componentsFile[componentname] = [`./packages/${componentname}/index.js`];
+fileSave(path.join(__dirname, '../components.json'))
+  .write(JSON.stringify(componentsFile, null, '  '), 'utf8')
+  .end('\n')
+
+// 创建 package
+Files.forEach(file => {
+  fileSave(path.join(PackagePath, file.filename))
+  .write(file.content, 'utf8')
+  .end('\n')
+})
+
+// 添加到 nav.config.json
+const navConfigFile = require('../examples/nav.config.json');
+navConfigFile[navConfigFile.length - 1].list.push({
+  path: `/${componentname}`,
+  name: `${chineseName} (${componentname})`,
+  title: componentname === chineseName ?
+         componentname :
+         `${componentname} ${chineseName}`
+});
+
+fileSave(path.join(__dirname, '../examples/nav.config.json'))
+  .write(JSON.stringify(navConfigFile, null, '  '), 'utf8')
+  .end('\n')
+
+console.log('DONE!');
diff --git a/components.json b/components.json
new file mode 100644
index 000000000..90a32fd66
--- /dev/null
+++ b/components.json
@@ -0,0 +1,155 @@
+{
+  "group": [
+    "./packages/group/index.js"
+  ],
+  "select-dropdown": [
+    "./packages/select-dropdown/index.js"
+  ],
+  "pagination": [
+    "./packages/pagination/index.js"
+  ],
+  "dialog": [
+    "./packages/dialog/index.js"
+  ],
+  "cascader": [
+    "./packages/cascader/index.js"
+  ],
+  "autocomplete": [
+    "./packages/autocomplete/index.js"
+  ],
+  "dropdown": [
+    "./packages/dropdown/index.js"
+  ],
+  "dropdown-item": [
+    "./packages/dropdown-item/index.js"
+  ],
+  "menu": [
+    "./packages/menu/index.js"
+  ],
+  "submenu": [
+    "./packages/submenu/index.js"
+  ],
+  "menu-item": [
+    "./packages/menu-item/index.js"
+  ],
+  "input": [
+    "./packages/input/index.js"
+  ],
+  "input-number": [
+    "./packages/input-number/index.js"
+  ],
+  "input-group": [
+    "./packages/input-group/index.js"
+  ],
+  "radio": [
+    "./packages/radio/index.js"
+  ],
+  "radio-group": [
+    "./packages/radio-group/index.js"
+  ],
+  "radio-button": [
+    "./packages/radio-button/index.js"
+  ],
+  "checkbox": [
+    "./packages/checkbox/index.js"
+  ],
+  "checkbox-group": [
+    "./packages/checkbox-group/index.js"
+  ],
+  "switch": [
+    "./packages/switch/index.js"
+  ],
+  "select": [
+    "./packages/select/index.js"
+  ],
+  "option": [
+    "./packages/option/index.js"
+  ],
+  "option-group": [
+    "./packages/option-group/index.js"
+  ],
+  "button": [
+    "./packages/button/index.js"
+  ],
+  "button-group": [
+    "./packages/button-group/index.js"
+  ],
+  "table": [
+    "./packages/table/index.js"
+  ],
+  "table-column": [
+    "./packages/table-column/index.js"
+  ],
+  "date-picker": [
+    "./packages/date-picker/index.js"
+  ],
+  "time-select": [
+    "./packages/time-select/index.js"
+  ],
+  "time-picker": [
+    "./packages/time-picker/index.js"
+  ],
+  "popover": [
+    "./packages/popover/index.js"
+  ],
+  "tooltip": [
+    "./packages/tooltip/index.js"
+  ],
+  "message-box": [
+    "./packages/message-box/index.js"
+  ],
+  "breadcrumb": [
+    "./packages/breadcrumb/index.js"
+  ],
+  "breadcrumb-item": [
+    "./packages/breadcrumb-item/index.js"
+  ],
+  "form": [
+    "./packages/form/index.js"
+  ],
+  "form-item": [
+    "./packages/form-item/index.js"
+  ],
+  "tabs": [
+    "./packages/tabs/index.js"
+  ],
+  "tab-pane": [
+    "./packages/tab-pane/index.js"
+  ],
+  "tag": [
+    "./packages/tag/index.js"
+  ],
+  "tree": [
+    "./packages/tree/index.js"
+  ],
+  "alert": [
+    "./packages/alert/index.js"
+  ],
+  "notification": [
+    "./packages/notification/index.js"
+  ],
+  "slider": [
+    "./packages/slider/index.js"
+  ],
+  "loading": [
+    "./packages/loading/index.js"
+  ],
+  "icon": [
+    "./packages/icon/index.js"
+  ],
+  "row": [
+    "./packages/row/index.js"
+  ],
+  "col": [
+    "./packages/col/index.js"
+  ],
+  "upload": [
+    "./packages/upload/index.js"
+  ],
+  "progress": [
+    "./packages/progress/index.js"
+  ],
+  "spinner": [
+    "./packages/spinner/index.js"
+  ]
+}
diff --git a/examples/app.vue b/examples/app.vue
new file mode 100644
index 000000000..9983abafc
--- /dev/null
+++ b/examples/app.vue
@@ -0,0 +1,386 @@
+<style lang="css">
+  @import '../node_modules/purecss/build/grids-core.css';
+  @import '../node_modules/purecss/build/grids-units.css';
+  @import '../node_modules/purecss/build/menus.css';
+  @import '../node_modules/highlight.js/styles/color-brewer.css';
+  @import 'assets/styles/common.css';
+
+  html, body {
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    overflow: auto;
+  }
+
+  .pure-g [class *= "pure-u"] {
+    font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
+  }
+
+  .app__sidebar {
+    width: 230px;
+    display: block;
+  }
+
+  .app__content {
+    margin-left: 230px;
+    display: block;
+  }
+
+  .app__menu {
+    bottom: 0;
+    position: fixed;
+    top: 0;
+    z-index: 10;
+    background-color: #f8f8f9;
+    color: #20293b;
+
+    .app__brand {
+      color: #20293b;
+      font-size: 24px;
+      margin: 10px 0 40px;
+      text-align: center;
+
+      .app__eleme {
+        font-weight: 900;
+      }
+    }
+
+    .app__menu__label {
+      color: #20293b;
+      font-weight: bold;
+      font-size: 14px;
+      padding: 10px 0 10px 36px;
+      position: relative;
+
+      &::after {
+        border-color: transparent transparent transparent rgba(170, 170, 170, .5);
+        border-style: solid;
+        border-width: 5px 0 5px 7px;
+        content: " ";
+        display: block;
+        height: 0;
+        position: absolute;
+        right: 22px;
+        top: 14px;
+        transition-delay: .1s;
+        transition: transform .3s;
+        width: 0;
+      }
+
+      &.unfold::after {
+        transform: rotate(90deg);
+      }
+    }
+
+    .app__menu__link {
+      padding: 12px 0 12px 50px;
+      font-size: 14px;
+      color: #20293b;
+      transition: color, background-color .3s;
+
+      &:focus {
+        background-color: transparent;
+      }
+
+      &.active {
+        border-left: 3px solid #2675c3;
+        color: #2675c3;
+        padding-left: 47px;
+      }
+    }
+
+  }
+
+  .app__main {
+    .app__description {
+      font-size: 14px;
+      margin: 0;
+      color: #666;
+      padding-bottom: 36px;
+      margin-bottom: 36px;
+      border-bottom: 1px solid #e4e4e4;
+
+      &:empty {
+        display: none;
+      }
+    }
+
+    a {
+      color: #216fc1;
+    }
+
+    h2 {
+      color: #333;
+      font-size: 20px;
+      font-weight: bold;
+      margin: 60px 0 16px;
+      line-height: 1;
+
+      &:first-of-type {
+        margin-top: 36px;
+      }
+    }
+
+    h3 {
+      color: #333;
+      font-size: 16px;
+      font-weight: normal;
+      line-height: 1;
+      margin: 36px 0 16px;
+    }
+
+    p, h2, h3 {
+      +div, +span {
+        margin: 10px 0 24px;
+      }
+
+      +span {
+        margin-right: 8px;
+      }
+    }
+
+    p {
+      color: #666;
+      font-size: 14px;
+      margin: 0 0 16px;
+      line-height: 1.5;
+    }
+
+    section > table {
+      border-collapse: collapse;
+      border-style: hidden;
+      box-shadow: 0 0 0 1px #e1e1e1;
+      border-radius: 5px;
+      overflow: hidden;
+      width: 100%;
+
+      thead {
+        background-color: #f8f8f8;
+        font-size: 14px;
+
+        th {
+          color: #666;
+        }
+      }
+
+      th, td {
+        border: 1px solid #e1e1e1;
+        padding: 10px 16px;
+        text-align: left;
+        font-size: 14px;
+        color: #999;
+      }
+    }
+
+    .hljs {
+      border-radius: 5px;
+      border: 1px solid #e1e1e1;
+      font-size: 14px;
+      max-height: 90px;
+      overflow-y: hidden;
+      position: relative;
+      margin-bottom: 40px;
+      margin-top: 0;
+
+      &::before {
+        background: linear-gradient(0deg, #fff 0, rgba(255, 255, 255, 0) 80%);
+        bottom: 0;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        content: "";
+      }
+
+      &.open {
+        max-height: 100%;
+
+        &::before {
+          content: none;
+        }
+
+        .hljs__button::before {
+          margin-bottom: 0;
+          margin-top: 9px;
+          transform: rotate(45deg);
+        }
+      }
+    }
+
+    .hljs__button {
+      background-color: #fff;
+      border-radius: 4px;
+      border: 1px solid #ccc;
+      outline: 0;
+      position: absolute;
+      right: 10px;
+      top: 10px;
+      height: 28px;
+      width: 28px;
+
+      &::before {
+        margin-bottom: 2px;
+        margin-top: 0;
+        transform: rotate(-135deg);
+        border-left: 1px solid #ccc;
+        border-top: 1px solid #ccc;
+        content: "";
+        display: inline-block;
+        height: 10px;
+        width: 10px;
+      }
+    }
+  }
+
+  .app__header {
+    background-color: #2c7dc7;
+    color: #fff;
+    padding: 42px;
+    height: 120px;
+    box-sizing: border-box;
+
+    .app__headline {
+      font-size: 36px;
+      font-weight: normal;
+      line-height: 1;
+      margin: 0 0 10px 0;
+    }
+  }
+
+  .slidedown-transition {
+    transition: all .3s ease-in-out;
+    overflow: hidden;
+  }
+
+  .slidedown-enter, .slidedown-leave {
+    max-height: 0 !important;
+  }
+  .demo {
+    margin: 20px 0;
+  }
+</style>
+
+<template>
+  <div class="pure-g">
+    <div class="pure-u-1-6 app__sidebar pure-menu pure-menu-scrollable app__menu">
+      <a class="pure-menu-heading app__brand" v-link="'/'">
+        <span class="app__eleme">ELEME</span>NT
+      </a>
+
+      <template v-for="nav in navs">
+        <a
+          href="#"
+          @click.prevent="navState.$set($index, !navState[$index] || false)"
+          class="pure-menu-heading app__menu__label"
+          :class="{ 'unfold': !navState[$index] }"
+          v-text="nav.group"></a>
+        <ul
+          class="pure-menu-list"
+          transition="slidedown"
+          v-show="!navState[$index]"
+          :style="{
+            maxHeight: nav.list.length * 44 + 'px'
+          }">
+          <li
+            class="pure-menu-item app__menu__item"
+            v-for="item in nav.list"
+            v-if="!item.disabled">
+            <a
+              class="pure-menu-link app__menu__link"
+              v-link="{ path: item.path, activeClass: 'active' }"
+              v-text="item.name"></a>
+          </li>
+        </ul>
+      </template>
+
+    </div>
+    <div class="pure-u-5-6 app__content">
+      <header class="app__header">
+        <h1 class="app__headline">{{ $route.title || 'element 后台组件' }}</h1>
+      </header>
+      <section class="app__main" v-el:main>
+        <p class="app__description">{{ $route.description }}</p>
+        <router-view></router-view>
+      </section>
+      <toc main=".app__main"></toc>
+    </div>
+  </div>
+
+  <button class="hljs__button" v-el:button></button>
+</template>
+
+<script>
+  import { navs } from './route.config';
+  import toc from './components/toc';
+  import E from 'oui-dom-events';
+  import { toggleClass, addClass, removeClass } from './dom/class';
+
+  export default {
+    name: 'app',
+
+    components: {
+      toc
+    },
+
+    data() {
+      return {
+        highlights: [],
+        navState: []
+      };
+    },
+
+    methods: {
+      findAllHighlight() {
+        return Array.prototype.slice.call(document.querySelectorAll('.hljs'));
+      }
+    },
+
+    created() {
+      this.navs = navs;
+    },
+
+    ready() {
+      this.mainContent = document.querySelector('.app__content');
+
+      E.delegate(this.$els.main, '.hljs__button', 'click.highlight', e => {
+        const parent = e.target.parentNode;
+
+        toggleClass(parent, 'open');
+      });
+    },
+
+    beforeDestroy() {
+      E.undelegate(this.$els.main, '.hljs', 'click.highlight');
+    },
+
+    watch: {
+      highlights(list) {
+        list.map(item => {
+          if (item.offsetHeight <= 100) {
+            toggleClass(item, 'open');
+          } else {
+            item.appendChild(this.$els.button.cloneNode(true));
+          }
+        });
+      }
+    },
+
+    events: {
+      ['element.example.reload']() {
+        this.$nextTick(() => {
+          if (this.mainContent.querySelector('.no-toc')) {
+            addClass(this.mainContent, 'no-toc');
+          } else {
+            removeClass(this.mainContent, 'no-toc');
+          }
+
+          this.highlights = this.findAllHighlight();
+        });
+        this.mainContent.scrollTop = 0;
+        return true;
+      }
+    }
+  };
+</script>
diff --git a/examples/assets/images/guide1.png b/examples/assets/images/guide1.png
new file mode 100644
index 000000000..f799c23d3
Binary files /dev/null and b/examples/assets/images/guide1.png differ
diff --git a/examples/assets/images/guide2.png b/examples/assets/images/guide2.png
new file mode 100644
index 000000000..84f815ed8
Binary files /dev/null and b/examples/assets/images/guide2.png differ
diff --git a/examples/assets/images/guide3.png b/examples/assets/images/guide3.png
new file mode 100644
index 000000000..cb1cdaa08
Binary files /dev/null and b/examples/assets/images/guide3.png differ
diff --git a/examples/assets/images/guide4.png b/examples/assets/images/guide4.png
new file mode 100644
index 000000000..cc404ecc8
Binary files /dev/null and b/examples/assets/images/guide4.png differ
diff --git a/examples/assets/styles/common.css b/examples/assets/styles/common.css
new file mode 100644
index 000000000..de970e0b8
--- /dev/null
+++ b/examples/assets/styles/common.css
@@ -0,0 +1,88 @@
+.app__content {
+  min-width: 740px;
+
+  &.no-toc {
+    min-width: 660px;
+
+    .app__main {
+      max-width: 906px;
+      margin: 36px 42px;
+    }
+  }
+
+  .app__main {
+    margin: 36px 242px 36px 42px;
+  }
+}
+
+.app__main.commonpage {
+  p {
+    color: #333;
+    font-size: 14px;
+    line-height: 22px;
+    margin-bottom: 0;
+  }
+
+  small {
+    color: #ccc;
+    font-size: 12px;
+    font-weight: normal;
+    padding-left: 20px;
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+  }
+
+  li {
+    color: #333;
+    font-size: 14px;
+    line-height: 22px;
+
+    &::before {
+      content: "-";
+      margin: 0 4px;
+    }
+  }
+
+  hr {
+    border-color: #e4e4e4;
+    border-style: solid;
+    margin: 36px 0;
+    border-top: 0;
+  }
+
+  a {
+    color: #2270c1;
+  }
+
+  code {
+    background-color: #f8f8f8;
+    padding: 4px;
+    color: #666;
+  }
+
+  .hljs {
+    max-height: 100%;
+    min-height: 100%;
+    background-color: #f8f8f8;
+    border: none;
+    color: #666;
+    padding: 20px 36px;
+    margin: 16px 0;
+
+    &::before {
+      content: none;
+    }
+
+    .hljs-comment, .hljs-quote {
+      color: #aaa;
+    }
+
+    .hljs__button {
+      display: none;
+    }
+  }
+}
\ No newline at end of file
diff --git a/examples/components/lightbox.vue b/examples/components/lightbox.vue
new file mode 100644
index 000000000..5fd423af4
--- /dev/null
+++ b/examples/components/lightbox.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="dialog d-popup-center"
+    v-if="rendered"
+    v-show="visible"
+    :transition="transition">
+    <div class="dialog-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Popup from 'vue-popup';
+  import 'vue-popup/lib/popup.css';
+
+  export default {
+    mixins: [Popup],
+
+    props: {
+      showClose: {
+        type: Boolean,
+        default: true
+      },
+      showModal: {
+        type: Boolean,
+        default: true
+      },
+      modal: {
+        default: true
+      },
+      closeOnClickModal: {
+        default: true
+      }
+    },
+
+    methods: {
+      willClose() {
+        this.visible = false;
+      }
+    }
+  };
+</script>
+
+<style lang="css">
+  .dialog {
+    position: fixed;
+
+    img {
+      width: 60vw;
+    }
+  }
+  .app__main .d-modal {
+    margin: 0;
+  }
+</style>
\ No newline at end of file
diff --git a/examples/components/table-filter.vue b/examples/components/table-filter.vue
new file mode 100644
index 000000000..bb37a7cd4
--- /dev/null
+++ b/examples/components/table-filter.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="table-filter" v-show="visible">haha</div>
+</template>
+
+<style scoped>
+  .table-filter {
+    position: absolute 0 100px * *;
+    background-color: #fff;
+  }
+</style>
+
+<script type="text/babel">
+  export default {
+    data() {
+      return {
+        visible: true
+      };
+    },
+
+    events: {
+      toggleFilterPopup(visibleFilter) {
+        this.visible = visibleFilter === 'tag';
+      }
+    },
+
+    ready() {
+      console.log('popup ready');
+    }
+  };
+</script>
\ No newline at end of file
diff --git a/examples/components/toc-item.vue b/examples/components/toc-item.vue
new file mode 100644
index 000000000..971513ab2
--- /dev/null
+++ b/examples/components/toc-item.vue
@@ -0,0 +1,48 @@
+<template>
+  <li class="item">
+    <a
+      class="toc__link"
+      :class="{ 'active': active === item.id }"
+      :href="'#' + encodeURIComponent(item.heading)"
+      v-text="item.heading">
+    </a>
+    <ol
+      class="group"
+      v-if="item.children"
+      v-show="active >= item.id && active <= (item.id + item.children.length || 0)">
+      <el-toc-item
+        :item="sub"
+        class="item"
+        :active="active"
+        v-for="sub in item.children">
+      </el-toc-item>
+    </ol>
+  </li>
+</template>
+
+<script>
+  /**
+   * 浮动在右边的目录子项
+   */
+  export default {
+    name: 'el-toc-item',
+
+    props: {
+      item: Object,
+      active: Number
+    },
+
+    methods: {
+      encodeURIComponent(source) {
+        return encodeURIComponent(source);
+      }
+    }
+  };
+</script>
+
+<style lang="css">
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+</style>
diff --git a/examples/components/toc.vue b/examples/components/toc.vue
new file mode 100644
index 000000000..f7ef3c675
--- /dev/null
+++ b/examples/components/toc.vue
@@ -0,0 +1,203 @@
+<template>
+  <nav
+    class="toc"
+    :class="{ 'toc--fixed': fixed }"
+    :style="{ 'top': offset + 'px' }">
+    <ol class="group">
+      <el-toc-item
+        v-for="item in toc"
+        class="title"
+        :active="active"
+        :item="item">
+      </el-toc-item>
+    </ol>
+  </nav>
+</template>
+
+<script>
+  import ElTocItem from './toc-item';
+  import E from 'oui-dom-events';
+
+  /**
+   * 浮动在右边的目录
+   */
+  export default {
+    name: 'toc',
+
+    components: {
+      ElTocItem
+    },
+
+    props: {
+      main: {
+        type: String,
+        required: true
+      }
+    },
+
+    data() {
+      return {
+        toc: [],
+        offset: 0,
+        fixed: false,
+        active: 0
+      };
+    },
+
+    events: {
+      ['element.example.reload']() {
+        this.$nextTick(() => {
+          this.toc = [];
+          this.anchors = this.findAllAnchors();
+          this.scrollWrap = document.querySelector('body');
+          this.currentHeaderHeight = document.querySelector('.app__main:first-of-type').offsetTop;
+          this.fixedOffsetTop = document.querySelector('.app__menu__label').offsetTop;
+          this.updateFixed();
+
+          this.generateTOC(this.anchors, this.toc);
+          E.off(this.scrollWrap, 'mousewheel.toc.activecurrent');
+          this.scrollActiveCurrent();
+        });
+      }
+    },
+
+    ready() {
+      this.scrollAutoFixed();
+    },
+
+    methods: {
+      /**
+       * @see https://github.com/chjj/marked/issues/334
+       */
+      generateTOC(anchors, toc) {
+        if (document.querySelector('.no-toc')) {
+          return;
+        }
+
+        let cache = {};
+
+        for (let key in anchors) {
+          const current = this.fetchAnchorData(anchors[key]);
+          const level = current.level || 1;
+          const last = cache[level - 1];
+
+          current.id = Number(key);
+
+          if (last) {
+            last.children = (last.children || []).concat(current);
+          } else {
+            cache[level] = current;
+            toc.push(current);
+          }
+        }
+      },
+
+      fetchAnchorData(anchor) {
+        const head = anchor.parentNode;
+        const level = head.tagName.match(/\d/g)[0];
+        const heading = head.getAttribute('id');
+
+        return { level, heading };
+      },
+
+      updateFixed() {
+        if (this.scrollWrap.scrollTop <= this.fixedOffsetTop / 2) {
+          this.offset = this.currentHeaderHeight;
+          this.fixed = false;
+          return;
+        }
+
+        if (this.fixed) return;
+
+        this.offset = this.fixedOffsetTop;
+        this.fixed = true;
+      },
+
+      scrollAutoFixed() {
+        E.on(document, 'mousewheel.toc.autofixed', this.updateFixed);
+      },
+
+      findAllAnchors() {
+        return Array.prototype.slice.call(document.querySelectorAll('.anchor'));
+      },
+
+      scrollActiveCurrent() {
+        const anchors = this.findAllAnchors();
+        const body = this.scrollWrap;
+        const distances = [];
+        let current;
+        let index = 0;
+        let max;
+
+        for (let anchor of anchors) {
+          distances.push(anchor.offsetTop);
+        }
+
+        current = distances[index];
+        max = distances.length - 1;
+        this.active = index;
+
+        // 记录当前滚动档位
+        // 判断当前滚动和下个档位
+        E.on(this.scrollWrap, 'mousewheel.toc.activecurrent', e => {
+          const scrollTop = body.scrollTop;
+
+          while (index < max && scrollTop > current) {
+            current = distances[++index];
+            this.active = index;
+          }
+
+          while (index && scrollTop < current) {
+            current = distances[--index];
+            this.active = index;
+          }
+        });
+      }
+    },
+
+    beforeDestroy() {
+      E.off(this.scrollWrap, 'mousewheel.toc.autofixed');
+      E.off(this.scrollWrap, 'mousewheel.toc.activecurrent');
+    }
+  };
+</script>
+
+<style lang="css">
+  .toc {
+    color: #999;
+    margin-right: 40px;
+    margin-top: -14px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 160px;
+
+    &.toc--fixed {
+      position: fixed;
+    }
+
+    .group {
+      font-size: 13px;
+      list-style-type: none;
+      margin: 0;
+      padding-left: 12px;
+    }
+
+    .item {
+      margin: 14px 0;
+
+      .toc__link:hover,
+      .toc__link.active {
+        color: #216fc1;
+      }
+
+      .group {
+        border-left: 1px solid rgba(31, 109, 191, .5);
+      }
+    }
+
+    .title {
+      margin-bottom: 18px;
+    }
+  }
+</style>
diff --git a/examples/data/cascader.json b/examples/data/cascader.json
new file mode 100644
index 000000000..fe758cdc1
--- /dev/null
+++ b/examples/data/cascader.json
@@ -0,0 +1,29 @@
+[
+  {
+    "label": "普通业务",
+    "value": "普通业务",
+    "children": [
+      {
+        "label": "业务1",
+        "value": "业务1",
+        "children": [
+          {
+            "label": "业务5",
+            "value": "业务5",
+            "children": []
+          }
+        ]
+      },
+      {
+        "label": "业务2",
+        "value": "业务2",
+        "children": []
+      }
+    ]
+  },
+  {
+    "label": "会员业务",
+    "value": "会员业务",
+    "children": []
+  }
+]
diff --git a/examples/data/select-disabled.json b/examples/data/select-disabled.json
new file mode 100644
index 000000000..d977035bb
--- /dev/null
+++ b/examples/data/select-disabled.json
@@ -0,0 +1,19 @@
+[
+  {
+    "label": "选项1",
+    "value": "结果1"
+  },
+  {
+    "label": "选项2",
+    "value": "结果2",
+    "disabled": true
+  },
+  {
+    "label": "选项3",
+    "value": "结果3"
+  },
+  {
+    "label": "选项4",
+    "value": "结果4"
+  }
+]
diff --git a/examples/data/select-group.json b/examples/data/select-group.json
new file mode 100644
index 000000000..c30ebb732
--- /dev/null
+++ b/examples/data/select-group.json
@@ -0,0 +1,54 @@
+{
+  "gourp1": [
+    {
+      "label": "选项1",
+      "value": "结果1"
+    },
+    {
+      "label": "选项2",
+      "value": "结果2"
+    },
+    {
+      "label": "选项3",
+      "value": "结果3"
+    },
+    {
+      "label": "选项4",
+      "value": "结果4"
+    },
+    {
+      "label": "选项5",
+      "value": "结果5"
+    },
+    {
+      "label": "选项6",
+      "value": "结果6"
+    }
+  ],
+  "gourp2": [
+    {
+      "label": "选项7",
+      "value": "结果7"
+    },
+    {
+      "label": "选项8",
+      "value": "结果8"
+    },
+    {
+      "label": "选项9",
+      "value": "结果9"
+    },
+    {
+      "label": "选项10",
+      "value": "结果10"
+    },
+    {
+      "label": "选项11",
+      "value": "结果11"
+    },
+    {
+      "label": "选项12",
+      "value": "结果12"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/examples/data/select-normal.json b/examples/data/select-normal.json
new file mode 100644
index 000000000..2310060da
--- /dev/null
+++ b/examples/data/select-normal.json
@@ -0,0 +1,32 @@
+[
+  {
+    "label": "选项1",
+    "value": "结果1",
+    "remark": "remark1"
+  },
+  {
+    "label": "选项2",
+    "value": "结果2",
+    "remark": "remark2"
+  },
+  {
+    "label": "选项3",
+    "value": "结果3",
+    "remark": "remark3"
+  },
+  {
+    "label": "选项4",
+    "value": "结果4",
+    "remark": "remark4"
+  },
+  {
+    "label": "选项5",
+    "value": "结果5",
+    "remark": "remark5"
+  },
+  {
+    "label": "选项6",
+    "value": "结果6",
+    "remark": "remark6"
+  }
+]
diff --git a/examples/docs/alert.md b/examples/docs/alert.md
new file mode 100644
index 000000000..5304eaf13
--- /dev/null
+++ b/examples/docs/alert.md
@@ -0,0 +1,111 @@
+<style>
+  .demo-box.demo-alert .el-alert {
+    margin: 20px 0 0;
+  }
+</style>
+
+## 基本用法
+
+<div class="demo-box demo-alert">
+  <el-alert title="成功提示的文案" type="success"></el-alert>
+  <el-alert title="消息提示的文案" type="info"></el-alert>
+  <el-alert title="警告提示的文案" type="warning"></el-alert>
+  <el-alert title="错误提示的文案" type="error"></el-alert>
+</div>
+
+```html
+<el-alert title="成功提示的文案" type="success"></el-alert>
+<el-alert title="消息提示的文案" type="info"></el-alert>
+<el-alert title="警告提示的文案" type="warning"></el-alert>
+<el-alert title="错误提示的文案" type="error"></el-alert>
+```
+
+## 自定义关闭按钮
+
+<div class="demo-box demo-alert">
+  <el-alert title="成功提示的文案" type="success" close-text="知道了"></el-alert>
+</div>
+
+```html
+<el-alert title="成功提示的文案" type="success" close-text="知道了"></el-alert>
+```
+
+## 带有 icon
+
+<div class="demo-box demo-alert">
+  <el-alert title="成功提示的文案" type="success" show-icon></el-alert>
+  <el-alert title="消息提示的文案" type="info" show-icon></el-alert>
+  <el-alert title="警告提示的文案" type="warning" show-icon></el-alert>
+  <el-alert title="错误提示的文案" type="error" show-icon></el-alert>
+</div>
+
+```html
+<el-alert title="成功提示的文案" type="success" show-icon></el-alert>
+<el-alert title="消息提示的文案" type="info" show-icon></el-alert>
+<el-alert title="警告提示的文案" type="warning" show-icon></el-alert>
+<el-alert title="错误提示的文案" type="error" show-icon></el-alert>
+```
+
+## 带有辅助性文字介绍
+
+<div class="demo-box demo-alert">
+  <el-alert title="成功提示的文案" type="success" description="文字说明文字说明文字说明文字说明文字说明文字说明"></el-alert>
+</div>
+
+```html
+<el-alert
+  title="成功提示的文案"
+  type="success"
+  description="文字说明文字说明文字说明文字说明文字说明文字说明">
+</el-alert>
+```
+
+## 带有 icon 和辅助性文字介绍
+
+<div class="demo-box demo-alert">
+  <el-alert title="成功提示的文案" type="success" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
+  <el-alert title="消息提示的文案" type="info" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
+  <el-alert title="警告提示的文案" type="warning" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
+  <el-alert title="错误提示的文案" type="error" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
+</div>
+
+```html
+<el-alert
+  title="成功提示的文案"
+  type="success"
+  description="文字说明文字说明文字说明文字说明文字说明文字说明"
+  show-icon>
+</el-alert>
+
+<el-alert
+  title="消息提示的文案"
+  type="info"
+  description="文字说明文字说明文字说明文字说明文字说明文字说明"
+  show-icon>
+</el-alert>
+
+<el-alert
+  title="警告提示的文案"
+  type="warning"
+  description="文字说明文字说明文字说明文字说明文字说明文字说明"
+  show-icon>
+</el-alert>
+
+<el-alert
+  title="错误提示的文案"
+  type="error"
+  description="文字说明文字说明文字说明文字说明文字说明文字说明"
+  show-icon>
+</el-alert>
+```
+
+## API
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| title | 标题, 必选参数 | string | | |
+| type | 主题 | string | 'success', 'warning', 'info', 'error' | 'info' |
+| description | 说明文字 | string | | |
+| closable | 是否可关闭 | boolean | | true |
+| closeText | 关闭按钮自定义文本 | string | | |
+| showIcon | 是否显示图标 | boolean | | false |
+| onClose | 关闭时的回调函数 | function | | |
diff --git a/examples/docs/autocomplete.md b/examples/docs/autocomplete.md
new file mode 100644
index 000000000..c0ca13132
--- /dev/null
+++ b/examples/docs/autocomplete.md
@@ -0,0 +1,419 @@
+<style>
+  .demo-box {
+    .el-autocomplete {
+      width: 180px;
+    }
+    .el-autocomplete__suggestions.my-autocomplete-suggestions {
+      width: 300px;
+
+      & .remark {
+        float: right;
+        font-size: 13px;
+      }
+    }
+  }
+</style>
+<script>
+  var $q = require('q');
+
+  export default {
+    data() {
+      return {
+        states: [],
+        state1: '',
+        state2: '',
+        state3: '',
+        state4: '',
+        myPartial: {
+          name: 'my-autocomplete-suggestions',
+          template: '<span class="label">选项{{$index}}</span><span class="remark">{{item.display}}</span>'
+        }
+      }
+    },
+    methods: {
+      loadAll() {
+        var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
+                Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
+                Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
+                Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
+                North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
+                South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
+                Wisconsin, Wyoming';
+        var result = [];
+
+        allStates.split(/, +/g).forEach((state) => {
+          if (state) {
+            result.push({
+              value: state.toLowerCase(),
+              display: state
+            });
+          }
+        });
+
+        return result;
+      },
+      querySearch(query, simulateQuery) {
+        var states = this.states;
+        var results = query ? states.filter(this.createStateFilter(query)) : states,
+            deferred;
+        
+        if (simulateQuery) {
+          if (!query) { return []; }
+
+          deferred = $q.defer();
+
+          setTimeout(() => {
+            deferred.resolve(results);
+          }, Math.random() * 3000, false);
+
+          return deferred.promise;
+        } else {
+          return results;
+        }
+      },
+      createStateFilter(query) {
+        return (state) => {
+          return (state.value.indexOf(query.toLowerCase()) === 0);
+        };
+      }
+    },
+    ready() {
+      this.states = this.loadAll();
+    }
+  };
+</script>
+
+## 基础使用
+
+<div class="demo-box">
+  <el-autocomplete
+    :value.sync = "state1"
+    :suggestions = "querySearch(state1)"
+    placeholder = "请输入内容"
+  ></el-autocomplete>
+</div>
+
+```html
+<template>
+  <el-autocomplete
+    :value.sync = "state1"
+    :suggestions = "querySearch(state1)"
+    placeholder = "请输入内容"
+  ></el-autocomplete>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        state1: ''
+      }
+    },
+    methods: {
+      loadAll() {
+        var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
+                Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
+                Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
+                Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
+                North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
+                South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
+                Wisconsin, Wyoming';
+        var result = [];
+
+        allStates.split(/, +/g).forEach((state) => {
+          if (state) {
+            result.push({
+              value: state.toLowerCase(),
+              display: state
+            });
+          }
+        });
+
+        return result;
+      },
+      querySearch(query, simulateQuery) {
+        var states = this.states;
+        var results = query ? states.filter(this.createStateFilter(query)) : states,
+            deferred;
+        
+        if (simulateQuery) {
+          if (!query) { return []; }
+
+          deferred = $q.defer();
+
+          setTimeout(() => {
+            deferred.resolve(results);
+          }, Math.random() * 3000, false);
+
+          return deferred.promise;
+        } else {
+          return results;
+        }
+      },
+      createStateFilter(query) {
+        return (state) => {
+          return (state.value.indexOf(query.toLowerCase()) === 0);
+        };
+      }
+    },
+    ready() {
+      this.states = this.loadAll();
+    }
+  };
+</script>
+```
+
+## 通过键盘控制下拉的显示
+
+<div class="demo-box">
+  <el-autocomplete
+    :value.sync = "state2"
+    :suggestions = "querySearch(state2)"
+    :show-on-up-down = "true"
+    placeholder = "请输入内容"
+  ></el-autocomplete>
+</div>
+
+```html
+<template>
+  <el-autocomplete
+    :value.sync = "state2"
+    :suggestions = "querySearch(state2)"
+    :show-on-up-down = "true"
+    placeholder = "请输入内容"
+  ></el-autocomplete>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        state2: ''
+      }
+    },
+    methods: {
+      loadAll() {
+        var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
+                Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
+                Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
+                Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
+                North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
+                South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
+                Wisconsin, Wyoming';
+        var result = [];
+
+        allStates.split(/, +/g).forEach((state) => {
+          if (state) {
+            result.push({
+              value: state.toLowerCase(),
+              display: state
+            });
+          }
+        });
+
+        return result;
+      },
+      querySearch(query, simulateQuery) {
+        var states = this.states;
+        var results = query ? states.filter(this.createStateFilter(query)) : states,
+            deferred;
+        
+        if (simulateQuery) {
+          if (!query) { return []; }
+
+          deferred = $q.defer();
+
+          setTimeout(() => {
+            deferred.resolve(results);
+          }, Math.random() * 3000, false);
+
+          return deferred.promise;
+        } else {
+          return results;
+        }
+      },
+      createStateFilter(query) {
+        return (state) => {
+          return (state.value.indexOf(query.toLowerCase()) === 0);
+        };
+      }
+    },
+    ready() {
+      this.states = this.loadAll();
+    }
+  };
+</script>
+```
+
+## 自定义模板
+
+<div class="demo-box">
+  <el-autocomplete
+    :value.sync = "state3"
+    :suggestions = "querySearch(state3)"
+    :partial = "myPartial"
+    placeholder = "请输入内容"
+  ></el-autocomplete>
+</div>
+
+```html
+<el-autocomplete
+  :value.sync = "state3"
+  :suggestions = "querySearch(state3)"
+  :partial = "myPartial"
+  placeholder = "请输入内容"
+></el-autocomplete>
+
+<script>
+  export default {
+    data() {
+      return {
+        state3: '',
+        myPartial: {
+          name: 'my-autocomplete-suggestions',
+          template: '<span class="label">选项{{$index}}</span><span class="remark">{{item.display}}</span>'
+        }
+      }
+    },
+    methods: {
+      loadAll() {
+        var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
+                Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
+                Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
+                Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
+                North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
+                South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
+                Wisconsin, Wyoming';
+        var result = [];
+
+        allStates.split(/, +/g).forEach((state) => {
+          if (state) {
+            result.push({
+              value: state.toLowerCase(),
+              display: state
+            });
+          }
+        });
+
+        return result;
+      },
+      querySearch(query, simulateQuery) {
+        var states = this.states;
+        var results = query ? states.filter(this.createStateFilter(query)) : states,
+            deferred;
+        
+        if (simulateQuery) {
+          if (!query) { return []; }
+
+          deferred = $q.defer();
+
+          setTimeout(() => {
+            deferred.resolve(results);
+          }, Math.random() * 3000, false);
+
+          return deferred.promise;
+        } else {
+          return results;
+        }
+      },
+      createStateFilter(query) {
+        return (state) => {
+          return (state.value.indexOf(query.toLowerCase()) === 0);
+        };
+      }
+    },
+    ready() {
+      this.states = this.loadAll();
+    }
+  };
+</script>
+```
+
+## 服务端数据
+
+<div class="demo-box">
+  <el-autocomplete
+    :value.sync = "state4"
+    :suggestions = "querySearch(state4, true)"
+    :search-from-server = "true"
+    placeholder = "请输入内容"
+  ></el-autocomplete>
+</div>
+
+```html
+<el-autocomplete
+  :value.sync = "state4"
+  :suggestions = "querySearch(state4, true)"
+  :search-from-server = "true"
+  placeholder = "请输入内容"
+></el-autocomplete>
+<script>
+  var $q = require('q');
+
+  export default {
+    data() {
+      return {
+        state4: ''
+      }
+    },
+    methods: {
+      loadAll() {
+        var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
+                Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
+                Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
+                Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
+                North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
+                South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
+                Wisconsin, Wyoming';
+        var result = [];
+
+        allStates.split(/, +/g).forEach((state) => {
+          if (state) {
+            result.push({
+              value: state.toLowerCase(),
+              display: state
+            });
+          }
+        });
+
+        return result;
+      },
+      querySearch(query, simulateQuery) {
+        var states = this.states;
+        var results = query ? states.filter(this.createStateFilter(query)) : states,
+            deferred;
+        
+        if (simulateQuery) {
+          if (!query) { return []; }
+
+          deferred = $q.defer();
+
+          setTimeout(() => {
+            deferred.resolve(results);
+          }, Math.random() * 3000, false);
+
+          return deferred.promise;
+        } else {
+          return results;
+        }
+      },
+      createStateFilter(query) {
+        return (state) => {
+          return (state.value.indexOf(query.toLowerCase()) === 0);
+        };
+      }
+    },
+    ready() {
+      this.states = this.loadAll();
+    }
+  };
+</script>
+```
+
+## API
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| placeholder   | 输入框占位文本   | string          |                       |         |
+| disabled      | 禁用            | boolean         | true, false           | false   |
+| suggestions   | 建议列表 | array,object  |  |  |
+| value         | 输入绑定值   | string  |                     |         |
+| showOnUpDown  | 是否通过键盘上下键控制建议列表 | boolean  |    |         |
+| partial       | 建议列表的自定义模板           | object  |                       |         |
diff --git a/examples/docs/breadcrumb.md b/examples/docs/breadcrumb.md
new file mode 100644
index 000000000..8f8ae8c5c
--- /dev/null
+++ b/examples/docs/breadcrumb.md
@@ -0,0 +1,25 @@
+## 基础使用
+
+<div>
+  <el-breadcrumb>
+    <el-breadcrumb-item>Home</el-breadcrumb-item>
+    <el-breadcrumb-item>Page 1</el-breadcrumb-item>
+    <el-breadcrumb-item>Page 1-2</el-breadcrumb-item>
+    <el-breadcrumb-item>Page 1-2-1</el-breadcrumb-item>
+  </el-breadcrumb>
+</div>
+
+
+```html
+<el-breadcrumb>
+  <el-breadcrumb-item>Home</el-breadcrumb-item>
+  <el-breadcrumb-item>Page 1</el-breadcrumb-item>
+  <el-breadcrumb-item>Page 1-2</el-breadcrumb-item>
+  <el-breadcrumb-item>Page 1-2-1</el-breadcrumb-item>
+</el-breadcrumb>
+```
+
+## API
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| separator | 分隔符 | string | | 反斜杠'/' |
diff --git a/examples/docs/button.md b/examples/docs/button.md
new file mode 100644
index 000000000..3e806c636
--- /dev/null
+++ b/examples/docs/button.md
@@ -0,0 +1,159 @@
+<script>
+  export default {
+    data() {
+      return {
+        isLoading: false,
+        isLoading2: false
+      };
+    },
+    methods: {
+      handleClick(event) {
+        console.log(event);
+        alert('button clicked!');
+      }
+    }
+  }
+</script>
+<style>
+  .demo-box.demo-button {
+    .el-button + .el-button {
+      margin-left: 10px;
+    }
+    .el-button-group {
+      margin-bottom: 20px;
+
+      .el-button + .el-button {
+        margin-left: 0;
+      }
+    }
+  }
+</style>
+
+## 基础用法
+
+<div class="demo-box demo-button">
+  <el-button>Default</el-button>
+  <el-button type="primary">primary</el-button>
+  <el-button type="success">success</el-button>
+  <el-button type="warning">warning</el-button>
+  <el-button type="danger">danger</el-button>
+  <el-button type="info">info</el-button>
+  <el-button :disabled="true">disabled</el-button>
+  <el-button type="text">text button</el-button>
+</div>
+
+```html
+<el-button>Default</el-button>
+<el-button type="primary">primary</el-button>
+<el-button type="success">success</el-button>
+<el-button type="warning">warning</el-button>
+<el-button type="danger">danger</el-button>
+<el-button type="info">info</el-button>
+<el-button :disabled="true">disabled</el-button>
+<el-button type="text">text button</el-button>
+```
+
+## Plain Button
+
+<div class="demo-box demo-button">
+  <el-button :plain="true">Default</el-button>
+  <el-button :plain="true" type="success">success</el-button>
+  <el-button :plain="true" type="warning">warning</el-button>
+  <el-button :plain="true" type="danger">danger</el-button>
+  <el-button :plain="true" :disabled="true">disabled</el-button>
+</div>
+
+```html
+<el-button :plain="true">Default</el-button>
+<el-button :plain="true" type="success">success</el-button>
+<el-button :plain="true" type="warning">warning</el-button>
+<el-button :plain="true" type="danger">danger</el-button>
+<el-button :plain="true" :disabled="true">disabled</el-button>
+```
+
+## 尺寸
+
+<div class="demo-box demo-button">
+  <el-button type="primary" size="large">large</el-button>
+  <el-button type="primary">Default</el-button>
+  <el-button type="primary" size="small">small</el-button>
+  <el-button type="primary" size="mini">mini</el-button>
+</div>
+
+```html
+<el-button type="primary" size="large">large</el-button>
+<el-button type="primary">Default</el-button>
+<el-button type="primary" size="small">small</el-button>
+<el-button type="primary" size="mini">mini</el-button>
+```
+
+## Loading
+
+<div class="demo-box demo-button">
+  <el-button type="primary" :loading="true">Button</el-button>
+</div>
+<p>点击后变成 loading 状态</p>
+<div class="demo-box demo-button">
+  <el-button type="primary" :loading="isLoading" @click="isLoading = true">Button</el-button>
+  <el-button type="primary" icon="search" :loading="isLoading2" @click="isLoading2 = true">Button</el-button>
+</div>
+
+```html
+<el-button type="primary" :loading="true">Button</el-button>
+
+<el-button type="primary" :loading="isLoading" @click="isLoading = true">Button</el-button>
+<el-button type="primary" icon="search" :loading="isLoading2" @click="isLoading2 = true">Button</el-button>
+```
+
+## 图标按钮
+
+<div class="demo-box demo-button">
+  <el-button type="primary" icon="edit"></el-button>
+  <el-button type="primary" icon="search">Search</el-button>
+  <el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
+</div>
+
+```html
+<el-button type="primary" icon="edit"></el-button>
+<el-button type="primary" icon="search">Search</el-button>
+<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
+```
+
+## 按钮组
+
+<div class="demo-box demo-button">
+  <el-button-group>
+    <el-button>Button</el-button>
+    <el-button>Button</el-button>
+    <el-button>Button</el-button>
+  </el-button-group>
+  <div></div>
+  <el-button-group>
+    <el-button type="primary" icon="edit"></el-button>
+    <el-button type="primary" icon="share"></el-button>
+    <el-button type="primary" icon="delete"></el-button>
+  </el-button-group>
+</div>
+
+```html
+<el-button-group>
+  <el-button>Button</el-button>
+  <el-button>Button</el-button>
+  <el-button>Button</el-button>
+</el-button-group>
+<div></div>
+<el-button-group>
+  <el-button type="primary" icon="edit"></el-button>
+  <el-button type="primary" icon="share"></el-button>
+  <el-button type="primary" icon="delete"></el-button>
+</el-button-group>
+```
+
+## API
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| size     | 尺寸   | string  |   large,small,mini            |         |
+| type     | 类型   | string    |   primary,success,warning,danger,info,text |         |
+| plain     | 是否朴素按钮   | Boolean    | true,false | false   |
+| disabled  | 禁用    | boolean   | true, false   | false   |
+| icon  | 图标，已有的图标库中的图标名 | string   |    |    |
diff --git a/examples/docs/checkbox.md b/examples/docs/checkbox.md
new file mode 100644
index 000000000..d5e53e9dc
--- /dev/null
+++ b/examples/docs/checkbox.md
@@ -0,0 +1,110 @@
+<script>
+  module.exports = {
+    data() {
+      return {
+        checkList: ['选中且禁用','复选框 A'],
+        // checkList2: ['复选框 A'],
+        checked: true,
+        name: 'Jonny',
+        a: 'Jonny',
+        b: 'Lara'
+      };
+    }
+  };
+</script>
+
+
+<style>
+  .demo-box.demo-checkbox {
+    .checkbox {
+      margin-right: 5px;
+
+      & + .checkbox {
+        margin-left: 10px;
+      }
+    }
+  }
+</style>
+
+## 基础用法
+
+### 单个勾选框，逻辑值
+
+<div class="demo-box demo-checkbox">
+  <el-checkbox class="checkbox" :value.sync="checked">{{checked | json}}</el-checkbox>
+</div>
+
+```html
+<el-checkbox class="checkbox" :value.sync="checked">{{checked | json}}</el-checkbox>
+```
+
+### 多个勾选框，绑定到同一个数组
+
+<div class="demo-box demo-checkbox">
+  <el-checkbox class="checkbox" :value.sync="checkList" label="复选框 A"></el-checkbox>
+  <el-checkbox class="checkbox" :value.sync="checkList" label="复选框 B"></el-checkbox>
+  <el-checkbox class="checkbox" :value.sync="checkList" label="复选框 C"></el-checkbox>
+  <el-checkbox class="checkbox" :value.sync="checkList" label="禁用" disabled></el-checkbox>
+  <el-checkbox class="checkbox" :value.sync="checkList" label="选中且禁用" disabled></el-checkbox>
+</div>
+
+<p>{{checkList | json}}</p>
+
+```html
+<template>
+  <el-checkbox class="checkbox" :value.sync="checkList" label="复选框 A"></el-checkbox>
+  <el-checkbox class="checkbox" :value.sync="checkList" label="复选框 B"></el-checkbox>
+  <el-checkbox class="checkbox" :value.sync="checkList" label="复选框 C"></el-checkbox>
+  <el-checkbox class="checkbox" :value.sync="checkList" label="禁用" disabled></el-checkbox>
+  <el-checkbox class="checkbox" :value.sync="checkList" label="选中且禁用" disabled></el-checkbox>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        checkList: ['选中且禁用','复选框 A']
+      }
+    }
+  }
+</script>
+```
+
+### 绑定 value：
+
+<div class="demo-box demo-checkbox">
+  <el-checkbox
+    class="checkbox"
+    :value.sync="name"
+    :true-label="a"
+    :false-label="b"
+    >
+  </el-checkbox>{{name}}
+</div>
+
+```html
+<el-checkbox
+  class="checkbox"
+  :value.sync="name"
+  :true-label="a"
+  :false-label="b"
+  >
+</el-checkbox>
+```
+
+```js
+vm.a = 'Jonny';
+vm.b = 'Lara';
+// 当选中时
+vm.name === vm.a
+// 当没有选中时
+vm.name === vm.b
+```
+
+## API
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| model     | 绑定值   | string\|string[]\|boolean  |               |         |
+| value     | 真实值   | string    |               |         |
+| label     | 显示值，不填则显示 value   | string    |               |         |
+| disabled  | 禁用    | boolean   | true, false   | false   |
diff --git a/examples/docs/date-picker.md b/examples/docs/date-picker.md
new file mode 100644
index 000000000..06097e21a
--- /dev/null
+++ b/examples/docs/date-picker.md
@@ -0,0 +1,266 @@
+<script>
+  module.exports = {
+    data() {
+      return {
+        pickerOptions1: {
+          shortcuts: [{
+            text: '今天',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            }
+          }, {
+            text: '昨天',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            }
+          }, {
+            text: '一周前',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', date);
+            }
+          }]
+        },
+        pickerOptions2: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        }
+      };
+    }
+  };
+</script>
+
+## 日期点
+
+###  日
+
+以『日』为基本单位
+
+<el-date-picker
+  type="date"
+  placeholder="选择日期">
+</el-date-picker>
+
+```html
+<el-date-picker
+  type="date"
+  placeholder="选择日期">
+</el-date-picker>
+```
+
+###  周
+
+以『周』为基本单位
+
+<el-date-picker
+  type="week"
+  format="yyyy 第 WW 周"
+  placeholder="选择周">
+</el-date-picker>
+
+```html
+<el-date-picker
+  type="week"
+  format="yyyy 第 WW 周"
+  placeholder="选择周">
+</el-date-picker>
+```
+
+###  月
+
+以『月』为基本单位
+
+<el-date-picker
+  type="month"
+  placeholder="选择月">
+</el-date-picker>
+
+```html
+<el-date-picker
+  type="month"
+  placeholder="选择月">
+</el-date-picker>
+```
+
+###  年
+
+以『年』为基本单位
+
+<el-date-picker
+  type="year"
+  placeholder="选择日期">
+</el-date-picker>
+
+```html
+<el-date-picker
+  type="year"
+  placeholder="选择日期">
+</el-date-picker>
+```
+
+###  含快捷选项
+
+左侧区域可配置快捷选项，例如『今天』、『昨天』等
+
+<el-date-picker
+  type="date"
+  placeholder="选择日期"
+  :picker-options="pickerOptions1">
+</el-date-picker>
+
+```html
+<el-date-picker
+  type="date"
+  placeholder="选择日期"
+  :picker-options="pickerOptions1">
+</el-date-picker>
+
+<script>
+  module.exports = {
+    data() {
+      return {
+        pickerOptions1: {
+          shortcuts: [{
+            text: '今天',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            }
+          }, {
+            text: '昨天',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            }
+          }, {
+            text: '一周前',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', date);
+            }
+          }]
+        }
+      };
+    }
+  };
+</script>
+```
+
+## 日期范围
+
+###  日期范围
+
+在一个选择器中选择
+
+<el-date-picker
+  type="daterange"
+  placeholder="选择日期范围"
+  style="width: 220px">
+</el-date-picker>
+
+```html
+<el-date-picker
+  type="daterange"
+  placeholder="选择日期范围"
+  style="width: 220px">
+</el-date-picker>
+```
+
+###  含快捷选项
+
+左侧区域可配置快捷选项，例如『最近一周』、『最近一个月』等
+
+<el-date-picker
+  type="daterange"
+  placeholder="选择日期范围"
+  :picker-options="pickerOptions2"
+  style="width: 220px">
+</el-date-picker>
+
+```html
+<el-date-picker
+  type="daterange"
+  placeholder="选择日期范围"
+  :picker-options="pickerOptions2"
+  style="width: 220px">
+</el-date-picker>
+
+<script>
+  module.exports = {
+    data() {
+      return {
+        pickerOptions2: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        }
+      };
+    }
+  };
+</script>
+```
+
+## API
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| value | 绑定值，需双向绑定 | String |   |  |
+| readonly | 只读 | Boolean |  | false |
+| placeholder | 占位内容 | String |  |  |
+| type | 显示类型 | String | year, month, date, datetime, week | date |
+| format | 时间日期格式化 | String | 年 `yyyy`, 月 `MM`, 日 `dd`, 小时 `HH`, 分 `mm`, 秒 `ss` | 'yyyy-MM-dd' |
+| shortcuts | 快捷选项列表，配置信息查看下表 | Object[] | | |
+
+### shortcuts
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| text |  标题 | String | | |
+| onClick | 选中后会调用函数，参数是 vm，设置值通过触发 'pick' 事件。例如 vm.$emit('pick', new Date()) | Function | | |
diff --git a/examples/docs/datetime-picker.md b/examples/docs/datetime-picker.md
new file mode 100644
index 000000000..6e03bb2b4
--- /dev/null
+++ b/examples/docs/datetime-picker.md
@@ -0,0 +1,438 @@
+<script>
+  module.exports = {
+    data() {
+      return {
+        pickerOptions1: {
+          shortcuts: [{
+            text: '今天',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            }
+          }, {
+            text: '昨天',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            }
+          }, {
+            text: '一周前',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', date);
+            }
+          }]
+        },
+        pickerOptions2: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        }
+      };
+    }
+  };
+</script>
+
+## 日期和时间点
+
+###  日期和时间点的选择（一）
+
+在两个选择器中选择日期与时间。
+
+<div class="demo-box">
+  <el-date-picker
+    type="date"
+    placeholder="选择日期">
+  </el-date-picker>
+  <el-time-picker
+    placeholder="选择时间">
+  </el-date-picker>
+</div>
+
+```html
+<el-date-picker
+  type="date"
+  placeholder="选择日期">
+</el-date-picker>
+<el-time-picker
+  placeholder="选择时间">
+</el-time-picker>
+```
+
+###  日期和时间点的选择（二）
+
+在一个选择器中选择日期与时间。
+
+<div class="demo-box">
+  <el-date-picker
+    type="datetime"
+    placeholder="选择日期时间">
+  </el-date-picker>
+</div>
+
+```html
+<el-date-picker
+  type="datetime"
+  placeholder="选择日期时间">
+</el-date-picker>
+```
+
+###  含快捷选项（一）
+
+左侧区域可配置快捷选项，例如『今天』、『昨天』等。
+
+<div class="demo-box">
+  <el-date-picker
+    type="date"
+    :picker-options="pickerOptions1"
+    placeholder="选择日期">
+  </el-date-picker>
+  <el-time-picker
+    placeholder="选择时间">
+  </el-time-picker>
+</div>
+
+```html
+<el-date-picker
+  type="date"
+  placeholder="选择日期"
+ :picker-options="pickerOptions1">
+</el-date-picker>
+<el-time-picker
+  placeholder="选择时间">
+</el-time-picker>
+
+<script>
+  module.exports = {
+    data() {
+      return {
+        pickerOptions1: {
+          shortcuts: [{
+            text: '今天',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            }
+          }, {
+            text: '昨天',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            }
+          }, {
+            text: '一周前',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', date);
+            }
+          }]
+        }
+      };
+    }
+  };
+</script>
+```
+
+###  含快捷选项（二）
+
+左侧区域可配置快捷选项，例如『今天』、『昨天』等。
+
+<div class="demo-box">
+  <el-date-picker
+    type="datetime"
+    placeholder="选择日期时间"
+    :picker-options="pickerOptions1">
+  </el-date-picker>
+</div>
+
+```html
+<el-date-picker
+  type="datetime"
+  placeholder="选择日期时间"
+  :picker-options="pickerOptions1"
+  style="width: 300px;">
+</el-date-picker>
+
+<script>
+  module.exports = {
+    data() {
+      return {
+        pickerOptions1: {
+          shortcuts: [{
+            text: '今天',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            }
+          }, {
+            text: '昨天',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            }
+          }, {
+            text: '一周前',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', date);
+            }
+          }]
+        }
+      };
+    }
+  };
+</script>
+```
+
+## 日期和时间范围
+
+###  日期和时间范围的选择（一）
+
+在两个选择器中选择。
+
+<div class="demo-box">
+  <el-date-picker
+    type="datetime"
+    placeholder="选择开始时间">
+  </el-date-picker>
+  <el-date-picker
+    type="datetime"
+    placeholder="选择结束时间">
+  </el-date-picker>
+</div>
+
+```html
+<el-date-picker
+  type="datetime"
+  placeholder="选择开始时间">
+</el-date-picker>
+<el-date-picker
+  type="datetime"
+  placeholder="选择结束时间">
+</el-date-picker>
+```
+
+###  日期和时间范围的选择（二）
+
+在一个选择器中选择。
+
+<div class="demo-box">
+  <el-date-picker
+    type="datetimerange"
+    placeholder="选择时间范围"
+    style="width:340px">
+  </el-date-picker>
+</div>
+
+```html
+<el-date-picker
+  type="datetimerange"
+  placeholder="选择时间范围"
+  style="width:340px">
+</el-date-picker>
+```
+
+###  含快捷选项
+
+左侧区域可配置快捷选项，例如『最近一周』、『最近一个月』等。
+
+<div class="demo-box">
+  <el-date-picker
+    type="datetimerange"
+    :picker-options="pickerOptions2"
+    placeholder="选择时间范围"
+    style="width:340px">
+  </el-date-picker>
+</div>
+
+```html
+<el-date-picker
+  type="datetimerange"
+  :picker-options="pickerOptions2"
+  placeholder="选择时间范围"
+  style="width:340px">
+</el-date-picker>
+
+<script>
+  module.exports = {
+    data() {
+      return {
+        pickerOptions2: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        }
+      };
+    }
+  };
+</script>
+```
+
+###  日期范围和时间范围选择
+
+在两个选择器中分别选择日期范围和时间范围。
+
+<div class="demo-box">
+  <el-date-picker
+    type="daterange"
+    placeholder="选择日期范围"
+    style="width:220px">
+  </el-date-picker>
+  <el-time-picker
+    is-range
+    placeholder="选择时间范围">
+  </el-time-picker>
+</div>
+
+```html
+<el-date-picker
+  type="daterange"
+  placeholder="选择日期范围"
+  style="width:220px">
+</el-date-picker>
+<el-time-picker
+  is-range
+  placeholder="选择时间范围">
+</el-time-picker>
+```
+
+## 环比时间
+选择两个时间作为限制条件，以得到统计量在这两个时间段的环比数据。
+
+###  周环比
+
+<div class="demo-box">
+  <el-date-picker
+    type="week"
+    placeholder="选择开始周">
+  </el-date-picker>
+  <el-date-picker
+    type="week"
+    placeholder="选择结束周">
+  </el-date-picker>
+</div>
+
+```html
+<el-date-picker
+  type="week"
+  placeholder="选择开始周">
+</el-date-picker>
+<el-date-picker
+  type="week"
+  placeholder="选择结束周">
+</el-date-picker>
+```
+
+###  月环比
+
+<div class="demo-box">
+  <el-date-picker
+    type="month"
+    placeholder="选择开始月">
+  </el-date-picker>
+  <el-date-picker
+    type="month"
+    placeholder="选择结束月">
+  </el-date-picker>
+</div>
+
+```html
+<el-date-picker
+  type="month"
+  placeholder="选择开始月">
+</el-date-picker>
+<el-date-picker
+  type="month"
+  placeholder="选择结束月">
+</el-date-picker>
+```
+
+###  年环比
+
+<div class="demo-box">
+  <el-date-picker
+    type="year"
+    placeholder="选择开始年">
+  </el-date-picker>
+  <el-date-picker
+    type="year"
+    placeholder="选择结束年">
+  </el-date-picker>
+</div>
+
+```html
+<el-date-picker
+  type="year"
+  placeholder="选择开始年">
+</el-date-picker>
+<el-date-picker
+  type="year"
+  placeholder="选择结束年">
+</el-date-picker>
+```
+
+## API
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| value | 绑定值，需双向绑定 | String |   |  |
+| format | 时间日期格式化 | String | 年 `yyyy`, 月 `MM`, 日 `dd`, 小时 `HH`, 分 `mm`, 秒 `ss` | 'yyyy-MM-dd' |
+| type | 显示类型 | String | year, month, date, datetime, week | date |
+| readonly | 只读 | Boolean |  | false |
+| placeholder | 占位内容 | String |  |  |
+| shortcuts | 快捷选项列表，配置信息查看下表 | Object[] | | |
+
+
+### shortcuts
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| text |  标题 | String | | |
+| onClick | 选中后会调用函数，参数是 vm，设置值通过触发 'pick' 事件。例如 vm.$emit('pick', new Date()) | Function | | |
+
+
diff --git a/examples/docs/development.md b/examples/docs/development.md
new file mode 100644
index 000000000..1a42ac120
--- /dev/null
+++ b/examples/docs/development.md
@@ -0,0 +1 @@
+待补充
\ No newline at end of file
diff --git a/examples/docs/dialog.md b/examples/docs/dialog.md
new file mode 100644
index 000000000..4fd9b7138
--- /dev/null
+++ b/examples/docs/dialog.md
@@ -0,0 +1,228 @@
+<script>
+  module.exports = {
+    data() {
+      return {
+        gridData: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }],
+        dialogVisible: false,
+        dialogTinyVisible: false,
+        dialogFullVisible: false,
+        dialogStubbornVisible: false,
+        dialogTableVisible: false,
+        dialogFormVisible: false,
+        form: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
+        formLabelWidth: '80px'
+      };
+    }
+  };
+</script>
+
+<style>
+  .demo-box.demo-dialog {
+    .dialog-footer button:first-child {
+      margin-right: 10px;
+    }
+    .full-image {
+      width: 100%;
+    }
+    .el-dialog__wrapper {
+      margin: 0;
+    } 
+    .el-input {
+      width: 300px;
+    }
+  }
+</style>
+
+## 基本用法
+
+<el-button :plain="true" v-on:click="dialogVisible = true">点击打开 Dialog</el-button>
+
+<div class="demo-box demo-dialog">
+  <el-dialog title="提示" :visible.sync="dialogVisible">
+    <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+    </span>
+  </el-dialog>
+</div>
+
+```html
+<el-button :plain="true" v-on:click="openDialog">点击打开 Dialog</el-button>
+
+<el-dialog title="提示" :visible.sync="dialogVisible">
+  <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogVisible = false">取 消</el-button>
+    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+  </span>
+</el-dialog>
+```
+
+## 设置尺寸
+
+<el-button :plain="true" v-on:click="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
+
+<div class="demo-box demo-dialog">
+  <el-dialog title="提示" :visible.sync="dialogTinyVisible" size="tiny">
+    <span>这是一段内容</span>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogTinyVisible = false">取 消</el-button>
+      <el-button type="primary" @click="dialogTinyVisible = false">确 定</el-button>
+    </span>
+  </el-dialog>
+</div>
+
+```html
+<el-button :plain="true" v-on:click="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
+
+<el-dialog title="提示" :visible.sync="dialogTinyVisible" size="tiny">
+  <span>这是一段内容</span>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogTinyVisible = false">取 消</el-button>
+    <el-button type="primary" @click="dialogTinyVisible = false">确 定</el-button>
+  </span>
+</el-dialog>
+```
+
+<el-button v-on:click="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
+
+<div class="demo-box demo-dialog">
+  <el-dialog title="提示" :visible.sync="dialogFullVisible" size="full">
+    <img src="http://placekitten.com/1920/1280" class="full-image">
+  </el-dialog>
+</div>
+
+```html
+<el-button v-on:click="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
+
+<el-dialog title="提示" :visible.sync="dialogFullVisible" size="full">
+  <img src="http://placekitten.com/1920/1280">
+</el-dialog>
+```
+
+## 设置能否通过点击modal或按下esc关闭dialog
+
+<el-button v-on:click="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>
+
+<div class="demo-box demo-dialog">
+  <el-dialog title="提示" :visible.sync="dialogStubbornVisible" :close-on-click-modal="false" :close-on-press-escape="false">
+    <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
+  </el-dialog>
+</div>
+
+```html
+<el-button v-on:click="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>
+
+<el-dialog title="提示" :visible.sync="dialogStubbornVisible" :close-on-click-modal="false" :close-on-press-escape="false">
+  <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
+</el-dialog>
+```
+
+## 自定义内容
+
+<el-button v-on:click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
+
+<div class="demo-box demo-dialog">
+  <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
+    <el-table :data="gridData">
+      <el-table-column property="date" label="日期" width="150"></el-table-column>
+      <el-table-column property="name" label="姓名" width="200"></el-table-column>
+      <el-table-column property="address" label="地址"></el-table-column>
+    </el-table>
+  </el-dialog>
+</div>
+
+<el-button v-on:click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
+
+<div class="demo-box demo-dialog">
+  <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
+    <el-form :models="form" v-ref:form>
+      <el-form-item label="活动名称" :label-width="formLabelWidth">
+        <el-input :model.sync="form.name" auto-complete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="活动区域" :label-width="formLabelWidth">
+        <el-select :value.sync="form.region" :width="300" placeholder="请选择活动区域">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogFormVisible = false">取 消</el-button>
+      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+    </span>
+  </el-dialog>
+</div>
+
+```html
+<el-button v-on:click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
+
+<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
+  <el-table :data="gridData">
+    <el-table-column property="date" label="日期" width="150"></el-table-column>
+    <el-table-column property="name" label="姓名" width="200"></el-table-column>
+    <el-table-column property="address" label="地址"></el-table-column>
+  </el-table>
+</el-dialog>
+
+<el-button v-on:click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
+
+<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
+  <el-form :models="form" v-ref:form>
+    <el-form-item label="活动名称" :label-width="formLabelWidth">
+      <el-input :model.sync="form.name" auto-complete="off"></el-input>
+    </el-form-item>
+    <el-form-item label="活动区域" :label-width="formLabelWidth">
+      <el-select :value.sync="form.region" :width="300" placeholder="请选择活动区域">
+        <el-option label="区域一" value="shanghai"></el-option>
+        <el-option label="区域二" value="beijing"></el-option>
+      </el-select>
+    </el-form-item>
+  </el-form>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogFormVisible = false">取 消</el-button>
+    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+  </span>
+</el-dialog>
+```
+
+## API
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| title     | dialog 的标题 | string    |                                  |         |
+| size      | dialog 的大小 | string    | 'tiny', 'small', 'large', 'full' | 'small' |
+| customClass      | dialog 的自定义类名 | string    | | |
+| closeOnClickModal | 是否可以通过点击 modal 关闭 dialog | boolean    |  | true |
+| closeOnPressEscape | 是否可以通过按下 esc 关闭 dialog | boolean    |  | true |
+
+## Slot
+| name | 说明 |
+|------|--------|
+| - | dialog 的内容 |
+| footer | dialog 按钮操作区的内容 |
diff --git a/examples/docs/dropdown.md b/examples/docs/dropdown.md
new file mode 100644
index 000000000..b3af23598
--- /dev/null
+++ b/examples/docs/dropdown.md
@@ -0,0 +1,163 @@
+<style>
+  .demo-box {
+    .el-dropdown {
+      vertical-align: top;
+
+      & .el-button-group {
+        margin-bottom: 0;
+      }
+      & + .el-dropdown {
+        margin-left: 15px;
+      }
+    }
+  }
+</style>
+
+<script>
+  export default {
+    methods: {
+      handleMainClick() {
+        alert('click main button');
+      }
+    }
+  }
+</script>
+
+## 基础用法
+
+<p>通过与 button 一致的 type 属性来指定菜单按钮类型。</p>
+
+<div class="demo-box">
+  <el-dropdown text="主要按钮" type="primary" @mainclick="handleMainClick()">
+    <el-dropdown-item>选项一</el-dropdown-item>
+    <el-dropdown-item>选项二</el-dropdown-item>
+    <el-dropdown-item>选项三</el-dropdown-item>
+    <el-dropdown-item>选项四 哈哈哈哈</el-dropdown-item>
+  </el-dropdown>
+</div>
+
+```html
+<el-dropdown text="主要按钮" type="primary" @mainclick="handleMainClick()">
+  <el-dropdown-item>选项一</el-dropdown-item>
+  <el-dropdown-item>选项二</el-dropdown-item>
+  <el-dropdown-item>选项三</el-dropdown-item>
+  <el-dropdown-item>选项四</el-dropdown-item>
+</el-dropdown>
+```
+
+## 不带独立按钮的下拉菜单
+
+可以通过将`icon-separate`属性设为`false`来呈现不带独立按钮的下拉菜单。
+
+<el-dropdown text="下拉菜单" type="primary" :icon-separate="false">
+  <el-dropdown-item>选项一</el-dropdown-item>
+  <el-dropdown-item>选项二</el-dropdown-item>
+  <el-dropdown-item>选项三</el-dropdown-item>
+  <el-dropdown-item class="divider">选项四</el-dropdown-item>
+</el-dropdown>
+
+```html
+<el-dropdown text="下拉菜单" type="primary" :icon-separate="false">
+  <el-dropdown-item>选项一</el-dropdown-item>
+  <el-dropdown-item>选项二</el-dropdown-item>
+  <el-dropdown-item>选项三</el-dropdown-item>
+  <el-dropdown-item class="divider">选项四</el-dropdown-item>
+</el-dropdown>
+```
+
+## 通过点击触发下拉
+
+<div class="demo-box">
+  <el-dropdown text="主要按钮" type="primary" trigger="click">
+    <el-dropdown-item>选项一</el-dropdown-item>
+    <el-dropdown-item>选项二</el-dropdown-item>
+    <el-dropdown-item>选项三</el-dropdown-item>
+    <el-dropdown-item>选项四 哈哈哈哈</el-dropdown-item>
+  </el-dropdown>
+  <el-dropdown text="下拉菜单" type="primary" :icon-separate="false" trigger="click">
+    <el-dropdown-item>选项一</el-dropdown-item>
+    <el-dropdown-item>选项二</el-dropdown-item>
+    <el-dropdown-item>选项三</el-dropdown-item>
+    <el-dropdown-item class="divider">选项四</el-dropdown-item>
+  </el-dropdown>
+</div>
+
+```html
+<el-dropdown text="主要按钮" type="primary" trigger="click">
+  <el-dropdown-item>选项一</el-dropdown-item>
+  <el-dropdown-item>选项二</el-dropdown-item>
+  <el-dropdown-item>选项三</el-dropdown-item>
+  <el-dropdown-item>选项四</el-dropdown-item>
+</el-dropdown>
+<el-dropdown text="下拉菜单" type="primary" :icon-separate="false" trigger="click">
+  <el-dropdown-item>选项一</el-dropdown-item>
+  <el-dropdown-item>选项二</el-dropdown-item>
+  <el-dropdown-item>选项三</el-dropdown-item>
+  <el-dropdown-item class="divider">选项四</el-dropdown-item>
+</el-dropdown>
+```
+
+## 文字类型下拉菜单
+
+<div class="demo-box">
+  <el-dropdown text="下拉菜单" type="text" :icon-separate="false">
+    <el-dropdown-item>选项一</el-dropdown-item>
+    <el-dropdown-item>选项二</el-dropdown-item>
+    <el-dropdown-item>选项三</el-dropdown-item>
+    <el-dropdown-item class="divider">选项四</el-dropdown-item>
+  </el-dropdown>
+</div>
+
+```html
+<el-dropdown text="下拉菜单" type="text" :icon-separate="false">
+  <el-dropdown-item>选项一</el-dropdown-item>
+  <el-dropdown-item>选项二</el-dropdown-item>
+  <el-dropdown-item>选项三</el-dropdown-item>
+  <li class="divider">选项四</el-dropdown-item>
+</el-dropdown>
+```
+
+## 尺寸
+
+<div class="demo-box">
+  <el-dropdown text="下拉菜单" type="primary" size="large">
+    <el-dropdown-item>选项一</el-dropdown-item>
+    <el-dropdown-item>选项二</el-dropdown-item>
+    <el-dropdown-item>选项三</el-dropdown-item>
+    <li class="divider">选项四</el-dropdown-item>
+  </el-dropdown><el-dropdown text="下拉菜单" type="primary">
+    <el-dropdown-item>选项一</el-dropdown-item>
+    <el-dropdown-item>选项二</el-dropdown-item>
+    <el-dropdown-item>选项三</el-dropdown-item>
+    <el-dropdown-item class="divider">选项四</el-dropdown-item>
+  </el-dropdown><el-dropdown text="下拉菜单" type="primary" size="small">
+    <el-dropdown-item>选项一</el-dropdown-item>
+    <el-dropdown-item>选项二</el-dropdown-item>
+    <el-dropdown-item>选项三</el-dropdown-item>
+    <el-dropdown-item class="divider">选项四</el-dropdown-item>
+  </el-dropdown><el-dropdown text="下拉菜单" type="primary" size="mini">
+    <el-dropdown-item>选项一</el-dropdown-item>
+    <el-dropdown-item>选项二</el-dropdown-item>
+    <el-dropdown-item>选项三</el-dropdown-item>
+    <el-dropdown-item class="divider">选项四</el-dropdown-item>
+  </el-dropdown>
+</div>
+
+```html
+<el-dropdown text="下拉菜单" type="primary" size="large">
+  <el-dropdown-item>选项一</el-dropdown-item>
+  <el-dropdown-item>选项二</el-dropdown-item>
+  <el-dropdown-item>选项三</el-dropdown-item>
+  <el-dropdown-item class="divider">选项四</el-dropdown-item>
+</el-dropdown>
+```
+
+## API
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| text          | 菜单按钮文本      | string          |                       |         |
+| type          | 菜单按钮类型，同 button    | string  |                       |         |
+| trigger       | 触发下拉菜单的方式    | string  |    hover,click  |  hover |
+| icon-separate | 独立的下拉菜单按钮 | boolean         | true, false           | false   |
+| size          | 菜单按钮尺寸，同 button     | string          | large, small, mini  |     |
+| menu-align    | 菜单水平对齐方向     | string          | start, end  | end |
diff --git a/examples/docs/form.md b/examples/docs/form.md
new file mode 100644
index 000000000..7cf6690ef
--- /dev/null
+++ b/examples/docs/form.md
@@ -0,0 +1,949 @@
+<script>
+  export default {
+    data() {
+      return {
+        form: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
+        formInline: {
+          user: '',
+          region: ''
+        },
+        formStacked: {
+          name: '',
+          region: '',
+          type: '',
+          remark: ''
+        },
+        formAlignLeft: {
+          name: '',
+          region: '',
+          type: '',
+          remark: ''
+        },
+        ruleForm: {
+          sex: '',
+          user1: '',
+          user2: '',
+          age: '',
+          region: [],
+          desc: '',
+          mail: ''
+        },
+        formNoLabel: {
+          username: '',
+          pass: '',
+          rememberPss: false
+        },
+        ruleForm2: {
+          pass: '',
+          checkPass: '',
+          age: ''
+        },
+        formLabelWidth: '80px',
+        options: [
+        ],
+        rules: {
+          user1: [
+            { required: true, min: 5, message: '用户名至少为 5 个字符', trigger: 'blur' }
+          ],
+          user2: [
+            { required: true, min: 3, message: '用户名至少为 3 个字符', trigger: 'blur' }
+          ],
+          age: [
+            { type: 'number', required: true, message: '请输入年龄', trigger: 'blur' },
+            { type: 'number', min: 18, message: '输入必须为大于18的整数', trigger: 'blur' }
+          ],
+          mail: [
+            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
+          ],
+          sex: [
+            { required: true, message: '请选择性别' }
+          ],
+          region: [
+            { type: 'array', required: true, message: '请至少选择一个地区', trigger: 'change' }
+          ],
+          desc: [
+            { required: true, message: '请填写个人简介', trigger: 'blur' }
+          ]
+        },
+        rules2: {
+          pass: [
+            { required: true, message: '请输入密码', trigger: 'blur' },
+            { validator: this.validaePass }
+          ],
+          checkPass: [
+            { required: true, message: '请再次输入密码', trigger: 'blur' },
+            { validator: this.validaePass2 }
+          ],
+          age: [
+            { required: true, message: '请填写年龄', trigger: 'blur' },
+            { validator: this.checkAge, trigger: 'change' }
+          ]
+        },
+        dynamicForm: {
+          domains: [''],
+          email: ''
+        },
+        dynamicRule: {
+          domains: {
+            type: '域名不能',
+            required: true
+          },
+          email: [
+            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
+          ]
+        }
+      };
+    },
+    methods: {
+      handleSubmit(ev) {
+        this.$refs.ruleForm.validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      handleSubmit2(ev) {
+        this.$refs.ruleForm2.validate(valid => {
+          if (valid) {
+            alert('申请已提交');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      handleSubmit3(ev) {
+        this.$refs.dynamicForm.validate(valid => {
+          if (valid) {
+            alert('申请已提交');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      handleReset() {
+        this.$refs.ruleForm.resetForm();
+      },
+      handleReset2() {
+        this.$refs.ruleForm2.resetForm();
+      },
+      checkAge(rule, value, callback) {
+        var age = parseInt(value, 10);
+        // debugger;
+        setTimeout(() => {
+          if (!Number.isInteger(age)) {
+            callback(new Error('请输入数字值'));
+          } else{
+            if (age < 18) {
+              callback(new Error('必须年满18岁'));
+            } else {
+              callback();
+            }
+          } 
+        }, 1000);
+      },
+      validaePass(rule, value, callback) {
+        if (value === '') {
+          callback(new Error('请输入密码'));
+        } else {
+          if (this.ruleForm2.checkPass !== '') {
+            this.$refs.ruleForm2.validateField('checkPass');
+          }
+          callback();
+        }
+      },
+      validaePass2(rule, value, callback) {
+        if (value === '') {
+          callback(new Error('请再次输入密码'));
+        } else if (value !== this.ruleForm2.pass) {
+          callback(new Error('两次输入密码不一致!'));
+        } else {
+          callback();
+        }
+      },
+      handleValidate(prop, errorMsg) {
+        console.log(prop, errorMsg);
+      },
+      onSubmit() {
+        console.log('submit!');
+      },
+      onRuleFormSubmit() {
+        console.log('onRuleFormSubmit');
+      }
+    }
+  }
+</script>
+
+<style>
+  .demo-form {
+    .el-input,
+    .el-textarea {
+      width: 360px;
+    }
+
+    .line {
+      text-align: center;
+    }
+
+    .el-checkbox-group {
+      width: 320px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+
+      &:after,&:before {
+        content: ' ';
+        display: table;
+      }
+      &:after {
+        clear: both;
+        visibility: hidden;
+        font-size: 0;
+        height: 0;
+      }
+
+      .el-checkbox {
+        float: left;
+        width: 160px;
+        padding-right: 20px;
+        margin: 0;
+        padding: 0;
+
+        + .el-checkbox {
+          margin-left: 0;
+        }
+      }
+    }
+
+    .el-date-picker + .el-date-picker {
+      margin-left: 10px;
+    }
+  }
+  .demo-form-normal {
+    width: 440px;
+  }
+  .demo-form-inline {
+    .el-input {
+      width: 150px;
+    }
+    > * {
+      margin-right: 10px;
+    }
+  }
+  .demo-ruleForm {
+    width: 440px;
+
+    .el-input,
+    .el-textarea {
+      width: auto;
+    }
+  }
+  .demo-dynamic {
+    .el-input {
+      display: inline-block;
+      margin-right: 10px;
+    }
+  }
+  .fr {
+    float: right;
+  }
+</style>
+
+## 基础使用
+
+Form 组件是一个具有校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。
+
+<div class="demo-box demo-form demo-form-normal">
+  <el-form v-ref:form @submit.prevent="onSubmit" label-width="80px">
+    <el-form-item label="活动名称">
+      <el-input :value.sync="form.name"></el-input>
+    </el-form-item>
+    <el-form-item label="活动区域">
+      <el-select :value.sync="form.region" :width="360" placeholder="请选择活动区域">
+        <el-option label="区域一" value="shanghai"></el-option>
+        <el-option label="区域二" value="beijing"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="配送时间">
+      <el-col :span="11">
+        <el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
+      </el-col>
+      <el-col class="line" :span="2">-</el-col>
+      <el-col :span="11">
+        <el-time-picker type="fixed-time" placeholder="选择时间" style="width: 100%;"></el-time-picker>
+      </el-col>
+    </el-form-item>
+    <el-form-item label="蜂鸟配送">
+      <el-switch on-text="" off-text="" :value="form.delivery"></el-switch>
+    </el-form-item>
+    <el-form-item label="活动性质">
+      <el-checkbox-group :value.sync="form.type">
+        <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
+        <el-checkbox label="地推活动" name="type"></el-checkbox>
+        <el-checkbox label="线下主题活动" name="type"></el-checkbox>
+        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
+      </el-checkbox-group>
+    </el-form-item>
+    <el-form-item label="特殊资源">
+      <el-radio :value.sync="form.resource" label="线上品牌商赞助"></el-radio>
+      <el-radio :value.sync="form.resource" label="线下场地免费"></el-radio>
+    </el-form-item>
+    <el-form-item label="活动形式">
+      <el-input type="textarea" :value.sync="form.desc"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary">立即创建</el-button>
+      <el-button @click.prevent>取消</el-button>
+    </el-form-item>
+  </el-form>
+</div>
+
+```html
+<template>
+  <el-form v-ref:form @submit.prevent="onSubmit" label-width="80px">
+    <el-form-item label="活动名称">
+      <el-input :value.sync="form.name"></el-input>
+    </el-form-item>
+    <el-form-item label="活动区域">
+      <el-select :value.sync="form.region" :width="360" placeholder="请选择活动区域">
+        <el-option label="区域一" value="shanghai"></el-option>
+        <el-option label="区域二" value="beijing"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="配送时间">
+      <el-col :span="11">
+        <el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
+      </el-col>
+      <el-col class="line" :span="2">-</el-col>
+      <el-col :span="11">
+        <el-time-picker type="fixed-time" placeholder="选择时间" style="width: 100%;"></el-time-picker>
+      </el-col>
+    </el-form-item>
+    <el-form-item label="蜂鸟配送">
+      <el-switch on-text="" off-text="" :value="form.delivery"></el-switch>
+    </el-form-item>
+    <el-form-item label="活动性质">
+      <el-checkbox-group :value.sync="form.type">
+        <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
+        <el-checkbox label="地推活动" name="type"></el-checkbox>
+        <el-checkbox label="线下主题活动" name="type"></el-checkbox>
+        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
+      </el-checkbox-group>
+    </el-form-item>
+    <el-form-item label="特殊资源">
+      <el-radio :value.sync="form.resource" label="线上品牌商赞助"></el-radio>
+      <el-radio :value.sync="form.resource" label="线下场地免费"></el-radio>
+    </el-form-item>
+    <el-form-item label="活动形式">
+      <el-input type="textarea" :value.sync="form.desc"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary">立即创建</el-button>
+      <el-button @click.prevent>取消</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        form: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        }
+      }
+    },
+    methods: {
+      onSubmit() {
+        console.log('submit!');
+      }
+    }
+  }
+</script>
+```
+
+## Inline Form
+
+<div class="demo-box demo-form demo-form-inline">
+  <el-form type="inline" :model="formInline" @submit.prevent="onSubmit">
+    <el-form-item>
+      <el-input :value.sync="formInline.user" placeholder="审批人"></el-input>
+    </el-form-item><el-form-item>
+      <el-select :value.sync="formInline.region" :width="150" placeholder="请选择活动区域">
+        <el-option label="区域一" value="shanghai"></el-option>
+        <el-option label="区域二" value="beijing"></el-option>
+      </el-select>
+    </el-form-item><el-form-item>
+      <el-button type="primary">查询</el-button>
+    </el-form-item>
+  </el-form>
+</div>
+
+```html
+<template>
+  <el-form type="inline" :model="formInline" @submit.prevent="onSubmit">
+    <el-form-item>
+      <el-input :value.sync="formInline.user" placeholder="审批人"></el-input>
+    </el-form-item><el-form-item>
+      <el-select :value.sync="formInline.region" :width="150" placeholder="请选择活动区域">
+        <el-option label="区域一" value="shanghai"></el-option>
+        <el-option label="区域二" value="beijing"></el-option>
+      </el-select>
+    </el-form-item><el-form-item>
+      <el-button type="primary">查询</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        formInline: {
+          user: '',
+          region: ''
+        }
+      }
+    },
+    methods: {
+      onSubmit() {
+        console.log('submit!');
+      }
+    }
+  }
+</script>
+```
+
+## Stacked Form
+
+<div class="demo-box demo-form demo-form-stacked">
+  <el-form type="stacked" :model="formStacked" @submit.prevent="onSubmit">
+    <el-form-item label="名称">
+      <el-input :value.sync="formStacked.name"></el-input>
+    </el-form-item>
+    <el-form-item label="活动区域">
+      <el-select :value.sync="formStacked.region" :width="360" placeholder="请选择活动区域">
+        <el-option label="区域一" value="shanghai"></el-option>
+        <el-option label="区域二" value="beijing"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="活动展开形式">
+      <el-input :value.sync="formStacked.type"></el-input>
+    </el-form-item>
+    <el-form-item label="备注">
+      <el-input :value.sync="formStacked.remark"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary">立即创建</el-button>
+      <el-button @click.prevent>取消</el-button>
+    </el-form-item>
+  </el-form>
+</div>
+
+```html
+<template>
+  <el-form type="stacked" :model="formStacked" @submit.prevent="onSubmit">
+    <el-form-item label="名称">
+      <el-input :value.sync="formStacked.name"></el-input>
+    </el-form-item>
+    <el-form-item label="活动区域">
+      <el-select :value.sync="formStacked.region" :width="360" placeholder="请选择活动区域">
+        <el-option label="区域一" value="shanghai"></el-option>
+        <el-option label="区域二" value="beijing"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="活动展开形式">
+      <el-input :value.sync="formStacked.type"></el-input>
+    </el-form-item>
+    <el-form-item label="备注">
+      <el-input :value.sync="formStacked.remark"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary">立即创建</el-button>
+      <el-button @click.prevent>取消</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        formStacked: {
+          name: '',
+          region: '',
+          type: '',
+          remark: ''
+        }
+      };
+    },
+    methods: {
+      onSubmit() {
+        console.log('submit!');
+      }
+    }
+  }
+</script>
+```
+
+## 标签左对齐
+
+<div class="demo-box demo-form">
+  <el-form :model="formAlignLeft" label-align="left" @submit.prevent="onSubmit" label-width="80px">
+    <el-form-item label="名称">
+      <el-input :value.sync="formAlignLeft.name"></el-input>
+    </el-form-item>
+    <el-form-item label="推广地">
+      <el-select :value.sync="formAlignLeft.region" :width="360" placeholder="请选择活动区域">
+        <el-option label="区域一" value="shanghai"></el-option>
+        <el-option label="区域二" value="beijing"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="活动形式">
+      <el-input :value.sync="formAlignLeft.type"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary">查询</el-button>
+    </el-form-item>
+  </el-form>
+</div>
+
+```html
+<template>
+  <el-form :model="formAlignLeft" label-align="left" @submit.prevent="onSubmit" label-width="80px">
+    <el-form-item label="名称">
+      <el-input :value.sync="formAlignLeft.name"></el-input>
+    </el-form-item>
+    <el-form-item label="推广地">
+      <el-select :value.sync="formAlignLeft.region" :width="360" placeholder="请选择活动区域">
+        <el-option label="区域一" value="shanghai"></el-option>
+        <el-option label="区域二" value="beijing"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="活动形式">
+      <el-input :value.sync="formAlignLeft.type"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary">查询</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        formAlignLeft: {
+          name: '',
+          region: '',
+          type: ''
+        }
+      };
+    },
+    methods: {
+      onSubmit() {
+        console.log('submit!');
+      }
+    }
+  }
+</script>
+```
+
+## 无标签
+
+<div class="demo-box demo-form">
+  <el-form :model="formNoLabel" @submit.prevent="onSubmit" style="width: 360px;">
+    <el-form-item>
+      <el-input :value.sync="formNoLabel.username" placeholder="手机号码/电子邮箱"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-input :value.sync="formNoLabel.pass" placeholder="账户密码" auto-complete="off"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" class="fr">登录</el-button>
+      <el-checkbox :value.sync="formNoLabel.rememberPss" label="记住密码"></el-checkbox>
+    </el-form-item>
+  </el-form>
+</div>
+
+```html
+<template>
+  <el-form :model="formNoLabel" @submit.prevent="onSubmit" style="width: 360px;">
+    <el-form-item>
+      <el-input :value.sync="formNoLabel.username" placeholder="手机号码/电子邮箱"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-input :value.sync="formNoLabel.pass" placeholder="账户密码" auto-complete="off"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" class="fr">登录</el-button>
+      <el-checkbox :value.sync="formNoLabel.rememberPss" label="记住密码"></el-checkbox>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        formNoLabel: {
+          username: '',
+          pass: '',
+          rememberPss: false
+        }
+      };
+    },
+    methods: {
+      onSubmit() {
+        console.log('submit!');
+      }
+    }
+  }
+</script>
+```
+
+## 表单验证
+
+<div class="demo-box demo-form demo-ruleForm">
+  <el-form :model="ruleForm" :rules="rules" v-ref:rule-form label-width="80px">
+    <el-form-item label="用户名" :required="true">
+      <el-col :span="11">
+        <el-form-item prop="user1">
+          <el-input :value.sync="ruleForm.user1" placeholder="First Name"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="2"><div class="line">-</div></el-col>
+      <el-col :span="11">
+        <el-form-item prop="user2">
+          <el-input :value.sync="ruleForm.user2" placeholder="Last Name"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-form-item>
+    <el-form-item label="年龄" prop="age">
+      <el-input :value.sync="ruleForm.age" :number="true"></el-input>
+    </el-form-item>
+    <el-form-item label="邮箱" prop="mail">
+      <el-input :value.sync="ruleForm.mail"></el-input>
+    </el-form-item>
+    <el-form-item label="性别" prop="sex">
+      <el-radio-group :value.sync="ruleForm.sex">
+        <el-radio label="男" name="sex"></el-radio>
+        <el-radio label="女" name="sex"></el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="简介" prop="desc">
+      <el-input type="textarea" :value.sync="ruleForm.desc"></el-input>
+    </el-form-item>
+    <el-form-item label="地区" prop="region" placeholder="请选择地区">
+      <el-checkbox-group :value.sync="ruleForm.region">
+        <el-checkbox label="BeiJing" name="region"></el-checkbox>
+        <el-checkbox label="ShangHai" name="region"></el-checkbox>
+        <el-checkbox label="ShenZhen" name="region"></el-checkbox>
+        <el-checkbox label="GuangZhou" name="region"></el-checkbox>
+      </el-checkbox-group>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click.prevent="handleSubmit">提交</el-button>
+      <el-button @click.prevent="handleReset">重置</el-button>
+    </el-form-item>
+  </el-form>
+</div>
+
+```html
+<template>
+  <el-form :model="ruleForm" :rules="rules" v-ref:rule-form label-width="80px">
+    <el-form-item label="用户名" :required="true">
+      <el-col :span="11">
+        <el-form-item prop="user1">
+          <el-input :value.sync="ruleForm.user1" placeholder="First Name"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="2"><div class="line">-</div></el-col>
+      <el-col :span="11">
+        <el-form-item prop="user2">
+          <el-input :value.sync="ruleForm.user2" placeholder="Last Name"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-form-item>
+    <el-form-item label="年龄" prop="age">
+      <el-input :value.sync="ruleForm.age" :number="true"></el-input>
+    </el-form-item>
+    <el-form-item label="邮箱" prop="mail">
+      <el-input :value.sync="ruleForm.mail"></el-input>
+    </el-form-item>
+    <el-form-item label="性别" prop="sex">
+      <el-radio-group :value.sync="ruleForm.sex">
+        <el-radio label="男" name="sex"></el-radio>
+        <el-radio label="女" name="sex"></el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="简介" prop="desc">
+      <el-input type="textarea" :value.sync="ruleForm.desc"></el-input>
+    </el-form-item>
+    <el-form-item label="地区" prop="region" placeholder="请选择地区">
+      <el-checkbox-group :value.sync="ruleForm.region">
+        <el-checkbox label="BeiJing" name="region"></el-checkbox>
+        <el-checkbox label="ShangHai" name="region"></el-checkbox>
+        <el-checkbox label="ShenZhen" name="region"></el-checkbox>
+        <el-checkbox label="GuangZhou" name="region"></el-checkbox>
+      </el-checkbox-group>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click.prevent="handleSubmit">提交</el-button>
+      <el-button @click.prevent="handleReset">重置</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        ruleForm: {
+          sex: '',
+          user1: '',
+          user2: '',
+          age: '',
+          region: [],
+          desc: '',
+          mail: ''
+        },
+        rules: {
+          user1: [
+            { required: true, min: 5, message: '用户名至少为 5 个字符', trigger: 'blur' }
+          ],
+          user2: [
+            { required: true, min: 3, message: '用户名至少为 3 个字符', trigger: 'blur' }
+          ],
+          mail: [
+            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
+          ],
+          sex: [
+            { required: true, message: '请选择性别' }
+          ],
+          region: [
+            { type: 'array', required: true, message: '请至少选择一个地区', trigger: 'change' }
+          ],
+          desc: [
+            { required: true, message: '请填写个人简介', trigger: 'blur' }
+          ]
+        }
+      };
+    },
+    methods: {
+      handleSubmit(ev) {
+        this.$refs.ruleForm.validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      }
+    }
+  }
+</script>
+```
+
+## 自定义校验规则
+
+<div class="demo-box demo-form demo-ruleForm">
+  <el-form :model="ruleForm2" :rules="rules2" v-ref:rule-form2 label-width="80px">
+    <el-form-item label="密码" prop="pass">
+      <el-input type="password" :value.sync="ruleForm2.pass" auto-complete="off"></el-input>
+    </el-form-item>
+    <el-form-item label="确认密码" prop="checkPass">
+      <el-input type="password" :value.sync="ruleForm2.checkPass" auto-complete="off"></el-input>
+    </el-form-item>
+    <el-form-item label="年龄" prop="age">
+      <el-input :value.sync="ruleForm2.age"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click.prevent="handleSubmit2">提交</el-button>
+      <el-button @click.prevent="handleReset2">重置</el-button>
+    </el-form-item>
+  </el-form>
+</div>
+
+```html
+<template>
+  <el-form :model="ruleForm2" :rules="rules2" v-ref:rule-form2 label-width="80px">
+    <el-form-item label="密码" prop="pass">
+      <el-input type="password" :value.sync="ruleForm2.pass" auto-complete="off"></el-input>
+    </el-form-item>
+    <el-form-item label="确认密码" prop="checkPass">
+      <el-input type="password" :value.sync="ruleForm2.checkPass" auto-complete="off"></el-input>
+    </el-form-item>
+    <el-form-item label="年龄" prop="age">
+      <el-input :value.sync="ruleForm2.age"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click.prevent="handleSubmit2">提交</el-button>
+      <el-button @click.prevent="handleReset2">重置</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        ruleForm2: {
+          pass: '',
+          checkPass: '',
+          age: ''
+        },
+        rules2: {
+          pass: [
+            { required: true, message: '请输入密码', trigger: 'blur' },
+            { validator: this.validaePass }
+          ],
+          checkPass: [
+            { required: true, message: '请再次输入密码', trigger: 'blur' },
+            { validator: this.validaePass2 }
+          ],
+          age: [
+            { required: true, message: '请填写年龄', trigger: 'blur' },
+            { validator: this.checkAge, trigger: 'change' }
+          ]
+        }
+      };
+    },
+    methods: {
+      handleSubmit(ev) {
+        this.$refs.ruleForm.validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      }
+    }
+  }
+</script>
+```
+
+## 动态增减表单项
+
+<div class="demo-box demo-form demo-dynamic">
+  <el-form :model="dynamicForm" :rules="dynamicRule" v-ref:dynamic-form label-width="80px">
+    <el-form-item prop="email" label="邮箱">
+      <el-input :value.sync="dynamicForm.email"></el-input>
+    </el-form-item>
+    <el-form-item
+      v-for="domain in dynamicForm.domains"
+      :label="'域名' + $index"
+      track-by="$index"
+      :prop="'domains:' + $index"
+      :rules="{ required: true, message: '域名不能为空', trigger: 'blur' }">
+      <el-input :value.sync="domain"></el-input><el-button @click="dynamicForm.domains.$remove(domain)">删除</el-button>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click.prevent="handleSubmit3">提交</el-button>
+      <el-button @click.prevent="dynamicForm.domains.push('')">新增域名</el-button>
+    </el-form-item>
+  </el-form>
+</div>
+
+```html
+<template>
+  <el-form :model="dynamicForm" :rules="dynamicRule" v-ref:dynamic-form label-width="80px">
+    <el-form-item prop="email" label="邮箱">
+      <el-input :value.sync="dynamicForm.email"></el-input>
+    </el-form-item>
+    <el-form-item
+      v-for="domain in dynamicForm.domains"
+      :label="'域名' + $index"
+      track-by="$index"
+      :prop="'domains:' + $index"
+      :rules="{ required: true, message: '域名不能为空', trigger: 'blur' }">
+      <el-input :value.sync="domain"></el-input><el-button @click="dynamicForm.domains.$remove(domain)">删除</el-button>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click.prevent="handleSubmit3">提交</el-button>
+      <el-button @click.prevent="dynamicForm.domains.push('')">新增域名</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        dynamicForm: {
+          domains: [''],
+          email: ''
+        },
+        dynamicRule: {
+          domains: {
+            type: '域名不能',
+            required: true
+          },
+          email: [
+            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
+          ]
+        }
+      };
+    },
+    methods: {
+      handleSubmit3(ev) {
+        this.$refs.ruleForm.validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      }
+    }
+  }
+</script>
+```
+
+## el-form API
+### 组件属性和事件
+
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| model   | 表单数据对象 | object      |                                  |        |
+| rules    | 表单验证规则 | object |  |  |
+| type | 表单类型 | string |  stacked, inline, horizontal | horizontal |
+| label-align | 表单域标签的水平对齐位置 | string |  right,left            | right |
+| label-width | 表单域标签的宽度，所有的 form-item 都会继承 form 组件的 labelWidth 的值 | string | |  |
+| label-suffix | 表单域标签的后缀 | string | |  |
+
+### el-form 实例属性和方法
+
+| 方法名      | 说明          | 类型      | 默认值  |
+|---------- |-------------- |---------- |-------- |
+| validate(cb) | 对整个表单进行校验的方法, 校验结束后会调用传入的回调方法, cb(valid), valid 参数是校验 bool 值结果 | function |    |
+| validateField(prop, cb) | 对部分表单字段进行校验的方法 |  |   |
+| resetForm | 对整个表单进行重置，将所有字段值重置为空并移除校验结果 |  |   |
+
+## el-form-item API
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| prop    | 表单域model字段 | string    | 传入父级 v-form 的 model 中的所有属性 |  |
+| label | 标签文本 | string |   |  |
+| label-width | 表单域标签的的宽度，例如 '50px' | string |              |  |
+| required | 是否必填，如不设置，则会根据校验规则自动生成 | bolean |  | false |
diff --git a/examples/docs/guideline.md b/examples/docs/guideline.md
new file mode 100644
index 000000000..f28fa723a
--- /dev/null
+++ b/examples/docs/guideline.md
@@ -0,0 +1,123 @@
+<section class="guideline no-toc">
+  <h2>选择合适的导航</h2>
+  <p>选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适(方向不明确)，以下是「侧栏导航」和「顶部导航」的区别。</p>
+
+  <h3>侧栏导航：</h3>
+  <p>可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。</p>
+
+  <table>
+    <tbody>
+      <tr>
+        <td>一级类目</td>
+        <td>
+          <lightbox :visible.sync="showIndexDialog1">
+            <img src="~examples/assets/images/guide1.png" alt="一级类目">
+          </lightbox>
+          <img @click="showIndexDialog1 = true" src="~examples/assets/images/guide1.png" alt="一级类目">
+          <p>适用于结构简单的网站；只有一级页面时，不需要使用面包屑。</p>
+        </td>
+      </tr>
+      <tr>
+        <td>二级类目</td>
+        <td>
+          <lightbox :visible.sync="showIndexDialog2">
+            <img src="~examples/assets/images/guide2.png" alt="二级类目">
+          </lightbox>
+          <img @click="showIndexDialog2 = true" src="~examples/assets/images/guide2.png" alt="二级类目">
+          <p>侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。</p>
+        </td>
+      </tr>
+      <tr>
+        <td>三级类目</td>
+        <td>
+          <lightbox :visible.sync="showIndexDialog3">
+            <img src="~examples/assets/images/guide3.png" alt="三级类目">
+          </lightbox>
+          <img @click="showIndexDialog3 = true" src="~examples/assets/images/guide3.png" alt="三级类目">
+          <p>适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+  <h3>顶部导航：</h3>
+  <p>顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。</p>
+
+  <table>
+    <tbody>
+      <tr>
+        <td>一级类目</td>
+        <td>
+          <lightbox :visible.sync="showIndexDialog4">
+            <img src="~examples/assets/images/guide4.png" alt="一级类目">
+          </lightbox>
+          <img @click="showIndexDialog4 = true" src="~examples/assets/images/guide4.png" alt="一级类目">
+          <p>适用于导航较少，页面篇幅较长的网站；</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</section>
+
+<script>
+  import Lightbox from 'examples/components/lightbox';
+
+  module.exports = {
+    name: 'guideline',
+
+    components: {
+      Lightbox
+    },
+
+    data() {
+      return {
+        showIndexDialog1: false,
+        showIndexDialog2: false,
+        showIndexDialog3: false,
+        showIndexDialog4: false
+      };
+    }
+  };
+</script>
+
+<style lang="css">
+  .guideline {
+    img {
+      width: 500px;
+      display: block;
+      margin-bottom: 19px;
+      box-shadow: 1px 2px 3px rgba(0, 0, 0, .2);
+    }
+
+    table {
+      background-color: #f8f8f8;
+      width: 100%;
+
+      p {
+        margin: 0;
+        width: 500px;
+      }
+    }
+
+    td {
+      padding: 36px;
+    }
+
+    tr {
+      border-bottom: 1px solid #e4e4e4;
+
+      &:last-child {
+        border-bottom: 0;
+      }
+    }
+
+    td:first-child {
+      background-color: #f3f3f3;
+      width: 21%;
+      min-width: 100px;
+      text-align: center;
+      color: #666;
+      font-size: 14px;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/examples/docs/home.md b/examples/docs/home.md
new file mode 100644
index 000000000..f6a32dde2
--- /dev/null
+++ b/examples/docs/home.md
@@ -0,0 +1,11 @@
+# 组件说明文档
+
+<script>
+  import { addClass } from 'examples/dom/class.js';
+
+  module.exports = {
+    ready() {
+      addClass(this.$el.parentNode, 'no-toc')
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/examples/docs/icon.md b/examples/docs/icon.md
new file mode 100644
index 000000000..a93d4be7e
--- /dev/null
+++ b/examples/docs/icon.md
@@ -0,0 +1,82 @@
+<script>
+  var iconList = require('examples/icon.json');
+
+  export default {
+    data() {
+      return {
+        icons: iconList
+      };
+    }
+  }
+</script>
+<style>
+  .icon-list {
+    overflow: hidden;
+    list-style: none;
+    padding: 0;
+  }
+  .icon-list li {
+    float: left;
+    width: 20%;
+    text-align: center;
+    height: 120px;
+    line-height: 120px;
+    color: #666;
+    font-size: 13px;
+    transition: color .15s linear;
+
+    border-right: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+    margin-right: -1px;
+    margin-bottom: -1px;
+
+    @utils-vertical-center;
+
+    & span {
+      display: inline-block;
+      line-height: normal;
+      vertical-align: middle;
+    }
+    & i {
+      display: block;
+      font-size: 30px;
+      margin-bottom: 15px;
+    }
+    &:hover {
+      color: rgb(92, 182, 255);
+      cursor: pointer;
+    }
+  }
+</style>
+## icon-font 图标
+
+我们为你提供了一套常用的图标集合。
+
+## 使用方法
+
+直接通过`el-icon-iconName`的类名来使用即可。例如：
+
+<div><i class="el-icon-search"></i></div>
+
+```html
+<i class="el-icon-search"></i>
+```
+
+也可以在按钮组件中使用图标:
+
+<div><el-button type="primary" icon="search">搜索</el-button></div>
+
+```html
+<el-button type="primary" icon="search">搜索</el-button>
+```
+
+## 图标集合
+
+<ul class="icon-list">
+  <li v-for="name in icons">
+    <span>
+      <i :class="'el-icon-' + name"></i>
+      {{'el-icon-' + name}}
+    </span>
+  </li>
+</ul>
diff --git a/examples/docs/input-number.md b/examples/docs/input-number.md
new file mode 100644
index 000000000..75b1a94a1
--- /dev/null
+++ b/examples/docs/input-number.md
@@ -0,0 +1,71 @@
+<script>
+  export default {
+    data() {
+      return {
+        num1: 1,
+        num2: 1
+      }
+    }
+  };
+</script>
+<style>
+  .demo-box.demo-input-number {
+    .el-input-number + .el-input-number {
+      margin-left: 10px;
+    }
+  }
+</style>
+
+## 基础使用
+
+<p>当我们需要标准的数字值时可以用到这个组件，它为你提供了数值输入提供了范围控制和递增递减的步数控制。</p>
+
+<div class="demo-box demo-input-number">
+  <el-input-number :value.sync="num1"></el-input-number>
+</div>
+
+```html
+<el-input-number :value.sync="num1"></el-input-number>
+```
+
+## 禁用状态
+
+<div class="demo-box demo-input-number">
+  <el-input-number :value.sync="num1" :disabled="true"></el-input-number>
+</div>
+
+```html
+<el-input-number :value.sync="num1" :disabled="true"></el-input-number>
+```
+
+## 步数
+
+<div class="demo-box demo-input-number">
+  <el-input-number :value.sync="num2" :step="2"></el-input-number>
+</div>
+
+```html
+<el-input-number :value.sync="num2" :step="2"></el-input-number>
+```
+
+## 尺寸
+
+<div class="demo-box demo-input-number">
+  <el-input-number :value.sync="num1" size="large"></el-input-number>
+  <el-input-number :value.sync="num1"></el-input-number>
+  <el-input-number :value.sync="num1" size="small"></el-input-number>
+</div>
+
+```html
+<el-input-number :value.sync="num1" size="large"></el-input-number>
+<el-input-number :value.sync="num1"></el-input-number>
+<el-input-number :value.sync="num1" size="small"></el-input-number>
+```
+
+## API
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|----------|-------------- |----------|--------------------------------  |-------- |
+| model    | 绑定值         | number   |       | |
+| step     | 步数           | number   |      | 1 |
+| size     | 尺寸           | string   | large, small | |
+| disabled | 是否禁用        | boolean | true, false | false |
diff --git a/examples/docs/input.md b/examples/docs/input.md
new file mode 100644
index 000000000..b869f76e6
--- /dev/null
+++ b/examples/docs/input.md
@@ -0,0 +1,269 @@
+<script>
+  module.exports = {
+    data() {
+      return {
+        input: '',
+        input1: '',
+        input2: '',
+        input3: '',
+        input4: '',
+        input5: '',
+        input6: '',
+        textarea: ''
+      };
+    }
+  };
+</script>
+
+<style>
+  .demo-box.demo-input {
+    .el-input {
+      width: 180px;
+
+      & + .el-input,
+      & + .el-textarea {
+        margin-top: 15px;
+      }
+    }
+    .el-textarea {
+      width: 414px;
+    }
+    .el-input-group + .el-input-group {
+      margin-top: 15px;
+    }
+  }
+</style>
+
+## 基本用法
+
+<div class="demo-box demo-input">
+  <el-input
+    placeholder="请输入内容"
+    :value.sync="input"
+    name="user">
+  </el-input>
+  <el-input
+    placeholder="请输入内容"
+    :value.sync="textarea"
+    name="desc"
+    type="textarea">
+  </el-input>
+</div>
+
+```html
+<el-input
+  placeholder="请输入内容"
+  :value.sync="input"
+  name="user">
+</el-input>
+<el-input
+  placeholder="请输入内容"
+  :value.sync="textarea"
+  name="desc"
+  type="textarea">
+</el-input>
+```
+
+## 禁用状态
+
+<div class="demo-box demo-input">  
+  <el-input
+    :disabled="true"
+    placeholder="请输入内容"
+    :value.sync="input1">
+  </el-input>
+</div>
+
+```html
+<el-input
+  :disabled="true"
+  placeholder="请输入内容"
+  :value.sync="input1">
+</el-input>
+```
+
+<!-- ## readonly 状态
+
+<el-input
+  :readonly="true"
+  placeholder="请输入内容"
+  :value.sync="input1">
+</el-input>
+
+```html
+<el-input
+  :readonly="true"
+  placeholder="请输入内容"
+  :value.sync="input1">
+</el-input>
+``` -->
+
+## Input 图标
+
+<div class="demo-box demo-input">
+  <el-input
+    placeholder="请选择日期"
+    icon="time"
+    :value.sync="input1">
+  </el-input>
+</div>
+
+```html
+<el-input
+  placeholder="请选择日期"
+  icon="time"
+  :value.sync="input1">
+</el-input>
+```
+
+## Input Group
+
+前置和后置元素可以是任何东西， 通过使用`.el-input-group__label`可以声明附加元素是一个标签从而获得合适的样式。
+
+### 后置元素
+
+<div class="demo-box demo-input">
+  <el-input-group>
+    <el-input
+      placeholder="请输入内容"
+      :value.sync="input2">
+    </el-input>
+    <span class="el-input-group__label" slot="append">.com</span>
+  </el-input-group>
+</div>
+
+```html
+<el-input-group>
+  <el-input
+    placeholder="请输入内容"
+    :value.sync="input2">
+  </el-input>
+  <span class="el-input-group__label" slot="append">.com</span>
+</el-input-group>
+```
+
+### 前置元素
+<div class="demo-box demo-input">
+  <el-input-group>
+    <el-button slot="prepend" type="text">按钮</el-button>
+    <el-input
+      placeholder="请输入内容"
+      :value.sync="input2">
+    </el-input>
+  </el-input-group>
+</div>
+
+```html
+<el-input-group>
+  <el-button slot="prepend" type="text">按钮</el-button>
+  <el-input
+    placeholder="请输入内容"
+    :value.sync="input2">
+  </el-input>
+</el-input-group>
+```
+
+### 前置和后置元素
+<div class="demo-box demo-input">
+  <el-input-group>
+    <el-dropdown text="下拉菜单" type="text" :icon-separate="false" slot="prepend">
+      <li>选项一</li>
+      <li>选项二</li>
+      <li>选项三</li>
+      <li class="divider">选项四</li>
+    </el-dropdown>
+    <el-input placeholder="请输入内容" :value.sync="input2"></el-input>
+    <el-button type="text" slot="append">搜索</el-button>
+  </el-input-group>
+</div>
+
+```html
+<el-input-group>
+  <el-dropdown text="下拉菜单" type="text" :icon-separate="false" slot="prepend">
+    <li>选项一</li>
+    <li>选项二</li>
+    <li>选项三</li>
+    <li class="divider">选项四</li>
+  </el-dropdown>
+  <el-input placeholder="请输入内容" :value.sync="input2"></el-input>
+  <el-button type="text" slot="append">搜索</el-button>
+</el-input-group>
+```
+
+## 尺寸
+### large
+
+<div class="demo-box demo-input">
+  <el-input
+    size="large"
+    placeholder="请输入内容"
+    :value.sync="input4">
+  </el-input>
+</div>
+
+### normal
+
+<div class="demo-box demo-input">
+  <el-input
+    placeholder="请输入内容"
+    :value.sync="input4">
+  </el-input>
+</div>
+
+### small
+
+<div class="demo-box demo-input">
+  <el-input
+    size="small"
+    placeholder="请输入内容"
+    :value.sync="input4">
+  </el-input>
+</div>
+
+### mini
+
+<div class="demo-box demo-input">
+  <el-input
+    size="mini"
+    placeholder="请输入内容"
+    :value.sync="input4">
+  </el-input>
+</div>
+
+```html
+<el-input
+  size="large"
+  placeholder="请输入内容"
+  :value.sync="input4">
+</el-input>
+<el-input
+  placeholder="请输入内容"
+  :value.sync="input4">
+</el-input>
+<el-input
+  size="small"
+  placeholder="请输入内容"
+  :value.sync="input4">
+</el-input>
+<el-input
+  size="mini"
+  placeholder="请输入内容"
+  :value.sync="input4">
+</el-input>
+```
+
+## API
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| type         | 同原生的 input 的 type 属性，如果为textarea则显示为extarea   | string  |                    |         |
+| name         | 同原生的 input 的 name 属性   | string  |                     |         |
+| model         | 绑定值           | string, number  |                       |         |
+| maxlength     | 最大输入长度           | number  |                       |         |
+| minlength     | 最小输入长度           | number  |                       |         |
+| placeholder   | 输入框占位文本   | string          |                       |         |
+| disabled      | 禁用            | boolean         | true, false           | false   |
+| readonly      | 禁用            | boolean         | true, false           | false   |
+| size          | 输入框尺寸       | string          | large, small, mini  |     |
+| icon          | 输入框尾部图标       | string          |                  |     |
+| number        | 指定model值为number类型  |  boolean    |                  |  false   |
+
diff --git a/examples/docs/loading.md b/examples/docs/loading.md
new file mode 100644
index 000000000..5950c7465
--- /dev/null
+++ b/examples/docs/loading.md
@@ -0,0 +1,130 @@
+<style>
+  .el-loading-demo {
+    border: solid 1px #999;
+    padding: 10px;
+    text-align: center;
+    
+    p {
+      font-size: 30px;
+      color: #999;
+      margin: 10px 0;
+    }
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        loading: false,
+        loading2: false,
+        fullscreenLoading: false,
+        tableLoading: false,
+        tableData: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }]
+      }
+    },
+    
+    methods: {
+      loadTable() {
+        this.tableLoading = true;
+        setTimeout(() => {
+          this.tableLoading = false;
+        }, 2000);
+      },
+      
+      openFullScreen() {
+        this.fullscreenLoading = true;
+        setTimeout(() => {
+          this.fullscreenLoading = false;
+        }, 2000);
+      }
+    }
+  }
+</script>
+
+## 基本用法
+
+<el-button :plain="true" v-on:click="loading = !loading">打开 / 关闭 loading</el-button>
+
+<div v-loading="loading" class="el-loading-demo">
+  <p>点击上面的按钮，本区域显示 loading 遮罩</p>
+</div>
+
+```html
+<el-button :plain="true" v-on:click="loading = !loading">打开 / 关闭 loading</el-button>
+
+<div v-loading="loading" class="el-loading-demo">
+  <p>点击上面的按钮，本区域显示 loading 遮罩</p>
+</div>
+```
+
+## 修饰符
+
+loading 遮罩默认插入至绑定了 `v-loading` 指令的元素上。通过添加 `body` 修饰符，可以使遮罩插入至 body 上
+
+<el-button :plain="true" v-on:click="loading2 = !loading2">打开 / 关闭 loading</el-button>
+
+<div v-loading.body="loading2" class="el-loading-demo">
+  <p>点击上面的按钮，本区域显示 loading 遮罩</p>
+</div>
+
+```html
+<el-button :plain="true" v-on:click="loading2 = !loading2">打开 / 关闭 loading</el-button>
+
+<div v-loading.body="loading2" class="el-loading-demo">
+  <p>点击上面的按钮，本区域显示 loading 遮罩</p>
+</div>
+```
+
+当需要全屏遮罩时，可使用 `fullscreen` 修饰符（此时遮罩会插入至 body 上）
+
+<el-button :plain="true" v-on:click="openFullScreen" v-loading.fullscreen="fullscreenLoading">打开全屏 loading</el-button>
+
+```html
+<template>
+  <el-button
+    :plain="true"
+    v-on:click="openFullScreen"
+    v-loading.fullscreen="fullscreenLoading">
+    打开全屏 loading
+  </el-button>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        fullscreenLoading: false
+      }
+    }
+    methods: {
+      openFullScreen() {
+        this.fullscreenLoading = true;
+        setTimeout(() => {
+          this.fullscreenLoading = false;
+        }, 2000);
+      }
+    }
+  }
+</script>
+```
\ No newline at end of file
diff --git a/examples/docs/menu.md b/examples/docs/menu.md
new file mode 100644
index 000000000..937d5286f
--- /dev/null
+++ b/examples/docs/menu.md
@@ -0,0 +1,312 @@
+<style>
+  .demo-box .nav {
+    background-color: #eff2f7;
+    line-height: 60px;
+    @utils-clearfix;
+
+    h1 {
+      font-size: 20px;
+      color: #1f2f3d;
+      float: left;
+      margin: 0 25px 0 20px;
+    }
+    > .el-menu {
+      float: left;
+    }
+    &-right {
+      float: right;
+      padding-right: 20px;
+    }
+    .nav__button {
+      font-size: 24px;
+      vertical-align: middle;
+      margin-left: 20px;
+      cursor: pointer;
+      display: inline-block;
+      position: relative;
+      color: #8492a6;
+
+      i {
+        vertical-align: middle;
+        display: block;
+      }
+
+      &.is-unread:after {
+        content: '';
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        position: absolute;
+        top: -2px;
+        right: -4px;
+        border-radius: 50%;
+        background-color: #ff4949;
+      }
+    }
+    .el-input {
+      display: inline-block;
+    }
+    .el-input__inner {
+      background-color: #e5e9f2;
+      border-color: #d3dce6;
+
+      &:focus {
+        border-color: #20a0ff;
+      }
+    }
+
+    &.nav-dark {
+      background-color: #324057;
+
+      h1 {
+        color: #fff;
+      }
+
+      .nav__button {
+        color: #fff;
+      }
+      .el-input__inner {
+        background-color: #1f2d3d;
+        border-color: #1f2d3d;
+        color: #fff;
+
+        &:focus {
+          border-color: #1f2d3d;
+        }
+      }
+    }
+  }
+  .demo-box .nav-vertical {
+    h1 {
+      float: none;
+    }
+    .el-menu--vertical {
+      float: none;
+    }
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        search: '',
+        search2: ''
+      };
+    },
+    methods: {
+      handleopen(key, keyPath) {
+        console.log(key, keyPath);
+      },
+      handleclose(key, keyPath) {
+        console.log(key, keyPath);
+      },
+      handleselect(key, keyPath) {
+        console.log(key, keyPath);
+      }
+    }
+  }
+</script>
+
+## 基础用法
+
+<div class="demo-box">
+  <div class="nav">
+    <h1>Element</h1>
+    <el-menu active-key="2">
+      <el-menu-item key="1">处理中心</el-menu-item>
+      <el-menu-item key="2">我的工作台</el-menu-item>
+      <el-menu-item key="3">订单管理</el-menu-item>
+    </el-menu>
+    <div class="nav-right">
+      <el-input placeholder="搜索用户手机号" icon="search" :value="search"></el-input>
+      <span class="nav__button is-unread">
+        <i class="el-icon-message"></i>
+      </span>
+      <span class="nav__button">
+        <i class="el-icon-setting"></i>
+      </span>
+    </div>
+  </div>
+</div>
+
+```html
+<div class="nav">
+  <h1>Element</h1>
+  <el-menu active-key="1">
+    <el-menu-item key="1">处理中心</el-menu-item>
+    <el-menu-item key="2">我的工作台</el-menu-item>
+    <el-menu-item key="3">订单管理</el-menu-item>
+  </el-menu>
+  <div class="nav-right">
+    <el-input placeholder="搜索用户手机号" icon="search" :value="search"></el-input>
+    <span class="nav__button is-unread">
+      <i class="el-icon-message"></i>
+    </span>
+    <span class="nav__button">
+      <i class="el-icon-setting"></i>
+    </span>
+  </div>
+</div>
+```
+
+<div class="demo-box">
+  <div class="nav nav-dark">
+    <h1>Element</h1>
+    <el-menu theme="dark" active-key="1">
+      <el-menu-item key="1">处理中心</el-menu-item>
+      <el-menu-item key="2">我的工作台</el-menu-item>
+      <el-menu-item key="3">订单管理</el-menu-item>
+    </el-menu>
+    <div class="nav-right">
+      <el-input placeholder="搜索用户手机号" icon="search" :value="search2"></el-input>
+      <span class="nav__button is-unread">
+        <i class="el-icon-message"></i>
+      </span>
+      <span class="nav__button">
+        <i class="el-icon-setting"></i>
+      </span>
+    </div>
+  </div>
+</div>
+
+```html
+<div class="nav nav-dark">
+  <h1>Element</h1>
+  <el-menu theme="dark" active-key="1">
+    <el-menu-item key="1">处理中心</el-menu-item>
+    <el-menu-item key="2">我的工作台</el-menu-item>
+    <el-menu-item key="3">订单管理</el-menu-item>
+  </el-menu>
+  <div class="nav-right">
+    <el-input placeholder="搜索用户手机号" icon="search" :value="search2"></el-input>
+    <span class="nav__button is-unread">
+      <i class="el-icon-message"></i>
+    </span>
+    <span class="nav__button">
+      <i class="el-icon-setting"></i>
+    </span>
+  </div>
+</div>
+```
+
+## 侧边栏导航
+
+<div class="demo-box" style="width: 200px;">
+  <div class="nav nav-vertical">
+    <h1>Element</h1>
+    <el-menu mode="vertical" active-key="2-1">
+      <el-menu-item key="1"><i class="el-icon-message"></i>导航一</el-menu-item>
+      <el-submenu key="sub1">
+        <template slot="title"><i class="el-icon-menu"></i>导航二</template>
+        <el-menu-item key="2-1">选项1</el-menu-item>
+        <el-menu-item key="2-2">选项2</el-menu-item>
+        <el-menu-item key="2-3">选项3</el-menu-item>
+      </el-submenu>
+      <el-submenu key="sub2">
+        <template slot="title"><i class="el-icon-setting"></i>导航三</template>
+        <el-menu-item key="3-1">选项1</el-menu-item>
+        <el-menu-item key="3-2">选项2</el-menu-item>
+        <el-menu-item key="3-3">选项3</el-menu-item>
+      </el-submenu>
+    </el-menu>
+  </div>
+</div>
+
+```html
+<div class="nav nav-vertical">
+  <h1>Element</h1>
+  <el-menu mode="vertical" active-key="2-1">
+    <el-menu-item key="1"><i class="el-icon-message"></i>导航一</el-menu-item>
+    <el-submenu key="sub1">
+      <template slot="title"><i class="el-icon-menu"></i>导航二</template>
+      <el-menu-item key="2-1">选项1</el-menu-item>
+      <el-menu-item key="2-2">选项2</el-menu-item>
+      <el-menu-item key="2-3">选项3</el-menu-item>
+    </el-submenu>
+    <el-submenu key="sub2">
+      <template slot="title"><i class="el-icon-setting"></i>导航三</template>
+      <el-menu-item key="3-1">选项1</el-menu-item>
+      <el-menu-item key="3-2">选项2</el-menu-item>
+      <el-menu-item key="3-3">选项3</el-menu-item>
+    </el-submenu>
+  </el-menu>
+</div>
+```
+
+<div class="demo-box" style="width: 200px;">
+  <div class="nav nav-vertical nav-dark">
+    <h1>Element</h1>
+    <el-menu mode="vertical" theme="dark" :opened-keys="['sub3']" active-key="3-1" :unique-opend="true" @open="handleopen" @close="handleclose" @select="handleselect">
+      <el-menu-item key="1"><i class="el-icon-message"></i>导航一</el-menu-item>
+      <el-submenu key="sub2">
+        <template slot="title"><i class="el-icon-menu"></i>导航二</template>
+        <el-menu-item key="2-1">选项1</el-menu-item>
+        <el-menu-item key="2-2">选项2</el-menu-item>
+        <el-menu-item key="2-3">选项3</el-menu-item>
+      </el-submenu>
+      <el-submenu key="sub3">
+        <template slot="title"><i class="el-icon-setting"></i>导航三</template>
+        <el-menu-item key="3-1">选项1</el-menu-item>
+        <el-menu-item key="3-2">选项2</el-menu-item>
+        <el-menu-item key="3-3">选项3</el-menu-item>
+      </el-submenu>
+      <el-submenu key="sub4">
+        <template slot="title"><i class="el-icon-setting"></i>导航四</template>
+        <el-menu-item key="4-1">选项1</el-menu-item>
+        <el-menu-item key="4-2">选项2</el-menu-item>
+        <el-menu-item key="4-3">选项3</el-menu-item>
+      </el-submenu>
+      <el-submenu key="sub5">
+        <template slot="title"><i class="el-icon-setting"></i>导航五</template>
+        <el-menu-item key="5-1">选项1</el-menu-item>
+        <el-menu-item key="5-2">选项2</el-menu-item>
+        <el-menu-item key="5-3">选项3</el-menu-item>
+      </el-submenu>
+    </el-menu>
+  </div>
+</div>
+
+```html
+<div class="nav nav-vertical nav-dark">
+  <h1>Element</h1>
+  <el-menu mode="vertical" theme="dark" active-key="3-1">
+    <el-menu-item key="1"><i class="el-icon-message"></i>导航一</el-menu-item>
+    <el-submenu key="sub1">
+      <template slot="title"><i class="el-icon-menu"></i>导航二</template>
+      <el-menu-item key="2-1">选项1</el-menu-item>
+      <el-menu-item key="2-2">选项2</el-menu-item>
+      <el-menu-item key="2-3">选项3</el-menu-item>
+    </el-submenu>
+    <el-submenu key="sub2">
+      <template slot="title"><i class="el-icon-setting"></i>导航三</template>
+      <el-menu-item key="3-1">选项1</el-menu-item>
+      <el-menu-item key="3-2">选项2</el-menu-item>
+      <el-menu-item key="3-3">选项3</el-menu-item>
+    </el-submenu>
+  </el-menu>
+</div>
+```
+
+## menu API
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| mode     | 模式   | string  |   horizontal,vertical   | horizontal |
+| theme     | 主题色   | string    | light,dark | light |
+| activeKey | 当前激活菜单的 key | string    |  |    |
+| openedKeys | 当前打开的submenu的 key 数组 | Array    |  |    |
+| uniqueOpend  | 是否只保持一个子菜单的展开 | boolean   | true, false   | false   |
+| router  | 是否使用 vue-router 的模式，启用该模式会在 select 事件触发时执行 this.$route.$router.go(key) 进行路由跳转 | boolean   | true, false   | false   |
+| select  | 菜单激活回调 | function(key, keyPath)   |    |    |
+| open  | SubMenu 展开的回调 | function(key, keyPath)   |    |    |
+| close  | SubMenu 收起的回调 | function(key, keyPath)   |    |    |
+
+## submenu API
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| key     | 唯一标志   | string  |      |  |
+
+## menu-item API
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| key     | 唯一标志   | string  |      |  |
diff --git a/examples/docs/message-box.md b/examples/docs/message-box.md
new file mode 100644
index 000000000..bc3ed37e3
--- /dev/null
+++ b/examples/docs/message-box.md
@@ -0,0 +1,242 @@
+<script>
+  export default {
+    methods: {
+      open() {
+        this.$alert('这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容', '消息');
+      },
+      
+      open2() {
+        this.$alert('操作失败, 请稍后重试', '提示', {
+          type: 'error'
+        });
+      },
+      
+      open3() {
+        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
+          type: 'warning'
+        }).then(() => {
+          this.$msgbox({
+            message: '删除成功!',
+            type: 'success'
+          });
+        }).catch(() => {
+          this.$msgbox({
+            message: '已取消删除',
+            type: 'info'
+          });          
+        });
+      },
+      
+      open4() {
+        this.$prompt('请输入邮箱', '提示', {
+          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
+          inputErrorMessage: '邮箱格式不正确'
+        }).then(({ value, action }) => {
+          console.log('action: ', action);
+          this.$msgbox('', '你的邮箱是: ' + value);
+        }).catch(() => {
+          this.$msgbox('', '取消输入');       
+        });
+      },
+      
+           
+      open5() {
+        this.$msgbox({
+          title: '消息',
+          message: '这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容',
+          showCancelButton: true
+        }).then(action => {
+          this.$msgbox('', 'action: ' + action);
+        });
+      },
+      
+      open6() {
+        this.$msgbox({
+          title: '消息',
+          message: '这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容',
+          showCancelButton: true,
+          showClose: false,
+          confirmButtonText: '知道了',
+          type: 'success'
+        });
+      }
+    }
+  };
+</script>
+
+## 基本用法
+<el-button @click="open">打开 Alert</el-button>
+
+```html
+<template>
+  <el-button @click="open">打开 Message Box</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open() {
+        this.$alert('这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容', '消息');
+      }
+    }
+  }
+</script>
+```
+
+## 返回 Promise
+
+<el-button @click="open2">打开 alert</el-button>
+
+```html
+<template>
+  <el-button @click="open4">打开 alert</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open2() {
+        this.$alert('操作失败, 请稍后重试', '提示', {
+          type: 'error'
+        });
+      },
+    }
+  }
+</script>
+```
+
+<el-button @click="open3">打开 confirm</el-button>
+
+```html
+<template>
+  <el-button @click="open5">打开 confirm</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open3() {
+        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
+          type: 'warning'
+        }).then(() => {
+          this.$alert('删除成功!',{
+            type: 'success'
+          });
+        }).catch(() => {
+          this.$alert('已取消删除', {
+            type: 'info'
+          });          
+        });
+      },
+    }
+  }
+</script>
+```
+<el-button @click="open4">打开 prompt</el-button>
+
+```html
+<template>
+  <el-button @click="open6">打开 prompt</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open4() {
+        this.$prompt('请输入邮箱', '提示', {
+          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
+          inputErrorMessage: '邮箱格式不正确'
+        }).then(value => {
+          this.$alert('你的邮箱是: ' + value);
+        }).catch(() => {
+          this.$alert('取消输入');       
+        });
+      }
+    }
+  }
+</script>
+```
+
+<el-button @click="open5">打开 Message Box</el-button>
+
+```html
+<template>
+  <el-button @click="open3">打开 Message Box</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open5() {
+        this.$msgbox({
+          title: '消息',
+          message: '这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容',
+          showCancelButton: true
+        }).then(action => {
+          this.$alert('action: ' + action);
+        });
+      },
+    }
+  }
+</script>
+```
+
+## 更多配置项
+
+<el-button @click="open6">打开 Message Box</el-button>
+
+```html
+<template>
+  <el-button @click="open2">打开 Message Box</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open6() {
+        this.$msgbox({
+          title: '消息',
+          message: '这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容',
+          showCancelButton: true,
+          confirmButtonText: '知道了',
+          type: 'success'
+        });
+      }
+    }
+  }
+</script>
+```
+
+## 全局方法
+
+element 为 Vue.prototype 添加了如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 vue instance 中可以采用本页面中的方式调用 `MessageBox`。
+
+## 单独引用
+
+单独引入 `MessageBox`：
+
+```javascript
+import { MessageBox } from 'element-ui';
+```
+
+对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt。
+
+## API
+
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| title | 标题 | string | | |
+| message | 消息内容 | string | | |
+| type | 消息类型 | string | 'success', 'info', 'warning', 'error' | |
+| showCancelButton | 是否显示取消按钮 | boolean | | false（以 confirm 和 prompt 方式调用时为 true） |
+| showConfirmButton | 是否显示确定按钮 | boolean | | true |
+| cancelButtonText | 取消按钮的文本内容 | string | | '取消' |
+| confirmButtonText | 确定按钮的文本内容 | string | | '确定' |
+| cancelButtonClass | 取消按钮的自定义类名 | string | | |
+| confirmButtonClass | 确定按钮的自定义类名 | string | | |
+| showInput | 是否显示输入框 | boolean | | false（以 prompt 方式调用时为 true）|
+| inputValue | 输入框的值 | string | | |
+| inputPlaceholder | 输入框的占位符 | string | | |
+| inputPattern | 输入框的校验表达式 | regexp | | |
+| inputValidator | 输入框的校验函数。若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage | function | | |
+| inputErrorMessage | 校验未通过时的提示文本 | string | | '输入的数据不合法!' |
diff --git a/examples/docs/notification.md b/examples/docs/notification.md
new file mode 100644
index 000000000..665d9de2e
--- /dev/null
+++ b/examples/docs/notification.md
@@ -0,0 +1,230 @@
+<script>
+  module.exports = {
+    methods: {
+      open() {
+        this.$notify({
+          title: '标题名称',
+          message: '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'
+        });
+      },
+      
+      open2() {
+        this.$notify({
+          title: '成功',
+          message: '这是一条成功的提示消息',
+          type: 'success'
+        });
+      },
+      
+      open3() {
+        this.$notify({
+          title: '警告',
+          message: '这是一条警告的提示消息',
+          type: 'warning'
+        });
+      },
+            
+      open4() {
+        this.$notify({
+          title: '消息',
+          message: '这是一条消息的提示消息',
+          type: 'info'
+        });
+      },
+                  
+      open5() {
+        this.$notify({
+          title: '错误',
+          message: '这是一条错误的提示消息',
+          type: 'error'
+        });
+      },
+      
+      open6() {
+        this.$notify({
+          title: '提示',
+          message: '这是一条不会自动关闭的消息',
+          duration: 0
+        });
+      },
+      
+      open7() {
+        this.$notify({
+          title: '提示',
+          message: '这是一条带有回调函数的消息',
+          onClose: this.onClose
+        });
+      },
+      
+      onClose() {
+        console.log('Notification 已关闭');
+      }
+    }
+  };
+</script>
+
+<style>
+  .demo-box.demo-notification {
+    .el-button + .el-button {
+      margin-left: 10px;
+    }
+  }
+</style>
+
+## 基本用法
+
+<div class="demo-box demo-notification">
+  <el-button :plain="true" v-on:click="open">点击展示 Notification</el-button>
+</div>
+
+```html
+<template>
+  <el-button :plain="true" v-on:click="open">点击展示 Notification</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open() {
+        this.$notify({
+          title: '标题名称',
+          message: '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'
+        });
+      }
+    }
+  }
+</script>
+```
+
+## 带有 icon
+
+<div class="demo-box demo-notification">
+  <el-button :plain="true" v-on:click="open2">成功</el-button>
+  <el-button :plain="true" v-on:click="open3">警告</el-button>
+  <el-button :plain="true" v-on:click="open4">消息</el-button>
+  <el-button :plain="true" v-on:click="open5">错误</el-button>
+</div>
+
+```html
+<template>
+  <el-button :plain="true" v-on:click="open2">成功</el-button>
+  <el-button :plain="true" v-on:click="open3">警告</el-button>
+  <el-button :plain="true" v-on:click="open4">消息</el-button>
+  <el-button :plain="true" v-on:click="open5">错误</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open2() {
+        this.$notify({
+          title: '成功',
+          message: '这是一条成功的提示消息',
+          type: 'success'
+        });
+      },
+      
+      open3() {
+        this.$notify({
+          title: '警告',
+          message: '这是一条警告的提示消息',
+          type: 'warning'
+        });
+      },
+            
+      open4() {
+        this.$notify({
+          title: '消息',
+          message: '这是一条消息的提示消息',
+          type: 'info'
+        });
+      },
+                  
+      open5() {
+        this.$notify({
+          title: '错误',
+          message: '这是一条错误的提示消息',
+          type: 'error'
+        });
+      }
+    }
+  }
+</script>
+```
+
+## 不会自动关闭
+<div class="demo-box demo-notification">
+  <el-button :plain="true" v-on:click="open6">不会自动关闭的 Notification</el-button>
+</div>
+
+```html
+<template>
+  <el-button :plain="true" v-on:click="open6">不会自动关闭的 Notification</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open6() {
+        this.$notify({
+          title: '提示',
+          message: '这是一条不会自动关闭的消息',
+          duration: 0
+        });
+      }
+    }
+  }
+</script>
+```
+
+## 回调函数
+<div class="demo-box demo-notification">
+  <el-button :plain="true" v-on:click="open7">带有回调函数的 Notification</el-button>
+</div>
+
+```html
+<template>
+  <el-button :plain="true" v-on:click="open7">带有回调函数的 Notification</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open7() {
+        this.$notify({
+          title: '提示',
+          message: '这是一条带有回调函数的消息',
+          onClose: this.onClose
+        });
+      },
+      
+      onClose() {
+        console.log('Notification 已关闭');
+      }
+    }
+  }
+</script>
+```
+
+## 全局方法
+
+element 为 Vue.prototype 添加了全局方法 $notify。因此在 vue instance 中可以采用本页面中的方式调用 `Notification`。
+
+## 单独引用
+
+单独引入 `Notification`：
+
+```javascript
+import { Notification } from 'element-ui';
+```
+
+此时调用方法为 `Notification(options)`。
+
+## API
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| title | 标题 | string | | |
+| message | 说明文字 | string | | |
+| type | 主题 | string | 'success', 'warning', 'info', 'error' | |
+| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | | 4500 |
+| onClose | 关闭时的回调函数 | function | | |
diff --git a/examples/docs/pagination.md b/examples/docs/pagination.md
new file mode 100644
index 000000000..58344f70e
--- /dev/null
+++ b/examples/docs/pagination.md
@@ -0,0 +1,90 @@
+## 基础用法
+适用广泛的基础用法。
+
+<el-pagination
+  layout="prev, pager, next"
+  :total="50">
+</el-pagination>
+
+```html
+<el-pagination
+  layout="prev, pager, next"
+  :total="50">
+</el-pagination>
+```
+
+## 小型分页
+在空间有限的情况下，可以使用简单的小型分页。
+
+<el-pagination
+  small
+  layout="prev, pager, next"
+  :total="50">
+</el-pagination>
+
+```html
+<el-pagination
+  small
+  layout="prev, pager, next"
+  :total="50">
+</el-pagination>
+```
+
+## 复杂分页
+能够承载复杂交互的分页，显示更多页码。
+
+<el-pagination
+  layout="prev, pager, next"
+  :total="1000">
+</el-pagination>
+
+```html
+<el-pagination
+  layout="prev, pager, next"
+  :total="1000">
+</el-pagination>
+```
+
+## 附加功能
+在复杂分页的基础上，根据场景需要，可以添加其他功能模块。
+
+
+<el-pagination
+  @size-change="handleSizeChange"
+  @current-change="handleCurrentChange"
+  layout="sizes, prev, pager, next, jumper, total"
+  :total="1000">
+</el-pagination>
+
+```html
+<el-pagination
+  layout="sizes, prev, pager, next, jumper, total"
+  :total="1000">
+</el-pagination>
+```
+
+<script>
+  module.exports = {
+    methods: {
+      handleSizeChange(val) {
+        console.log(`每页 ${val} 条`);
+      },
+      handleCurrentChange(val) {
+        console.log(`当前页: ${val}`);
+      }
+    }
+  }
+</script>
+
+## API
+| 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
+|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
+| small              |   小型分页样式     | Boolean |             | false |
+| page-size              | 每页个数                                                   | Number |             | 10 |
+| total | 总个数 | Number | | 0 |
+| current-page | 当前页数 | Number | | 0|
+| layout | 组件布局，子组件名用逗号分隔。| String | `prev`, `pager`, `next`, `jumper`, `slot`, `->`, `total` | 'prev, pager, next, jumper, slot, ->, total'  |
+| page-sizes | 切换每页显示个数的子组件值 | Number[] | |  [10, 20, 30, 40, 50, 100] |
+| size-change | pageSize 改变时会触发的事件 | Function | | |
+| current-change | currentPage 改变时会触发的事件 | Function | | |
+
diff --git a/examples/docs/popover.md b/examples/docs/popover.md
new file mode 100644
index 000000000..b9973a8d4
--- /dev/null
+++ b/examples/docs/popover.md
@@ -0,0 +1,273 @@
+<script>
+  export default {
+    data() {
+      return {
+        visible2: false,
+        gridData: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }],
+        gridData2: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+          $info: true
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+          $positive: true
+        }],
+        gridData3: [{
+          tag: '家',
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          tag: '公司',
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          tag: '公司',
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          tag: '家',
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          tag: '公司',
+          date: '2016-05-08',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          tag: '家',
+          date: '2016-05-06',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          tag: '公司',
+          date: '2016-05-07',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }],
+        singleSelection: {},
+        multipleSelection: []
+      };
+    },
+
+    watch: {
+      singleSelection(val) {
+        console.log('selection: ', val);
+      },
+
+      multipleSelection(val) {
+        console.log('selection: ', val);
+      }
+    },
+
+    events: {
+      handleClick(row) {
+        console.log('you clicked ', row);
+      }
+    }
+  };
+</script>
+
+<style>
+  .demo-box.demo-popover {
+    .el-popover + .el-popover {
+      margin-left: 10px;
+    }
+    .el-input {
+      width: 360px;
+    }
+    .el-button + .el-button {
+      margin-left: 10px;
+    }
+  }
+</style>
+
+## 基础用法
+可选择提示出现的位置。
+
+<div class="demo-box demo-popover">
+  <el-popover
+    v-ref:popover1
+    placement="top-start"
+    title="标题"
+    width="200"
+    trigger="hover"
+    content="这是一段容,这是一段容,这是一段容,这是一段容。">
+  </el-popover>
+
+  <el-popover
+    v-ref:popover2
+    placement="bottom"
+    title="标题"
+    width="200"
+    trigger="click"
+    content="这是一段容,这是一段容,这是一段容,这是一段容。">
+  </el-popover>
+
+  <el-popover
+    v-ref:popover3
+    placement="right"
+    title="标题"
+    width="200"
+    trigger="focus"
+    content="这是一段容,这是一段容,这是一段容,这是一段容。">
+  </el-popover>
+
+  <el-button v-popover:popover1>hover 激活</el-button>
+  <el-button v-popover:popover2>click 激活</el-button>
+
+  <el-input :value="model" v-popover:popover3 placeholder="focus 激活"></el-input>
+</div>
+
+
+```html
+<el-popover
+  v-ref:popover1
+  placement="top-start"
+  title="标题"
+  width="200"
+  trigger="hover"
+  content="这是一段容,这是一段容,这是一段容,这是一段容。">
+</el-popover>
+
+<el-popover
+  v-ref:popover2
+  placement="bottom"
+  title="标题"
+  width="200"
+  trigger="click"
+  content="这是一段容,这是一段容,这是一段容,这是一段容。">
+</el-popover>
+
+<el-popover
+  v-ref:popover3
+  placement="right"
+  title="标题"
+  width="200"
+  trigger="focus"
+  content="这是一段容,这是一段容,这是一段容,这是一段容。">
+</el-popover>
+
+<el-button v-popover:popover1>hover 激活</el-button>
+<el-button v-popover:popover2>click 激活</el-button>
+<el-button v-popover:popover3>focus 激活</el-button>
+```
+
+## 嵌套信息
+可以嵌套表格等多种信息。
+
+<div class="demo-box demo-popover">
+  <el-popover
+    v-ref:popover4
+    placement="right"
+    width="400"
+    trigger="click">
+    <el-table :data="gridData">
+      <el-table-column width="150" property="date" label="日期"></el-table-column>
+      <el-table-column width="100" property="name" label="姓名"></el-table-column>
+      <el-table-column width="300" property="address" label="地址"></el-table-column>
+    </el-table>
+  </el-popover>
+
+  <el-button v-popover:popover4>click 激活</el-button>
+</div>
+
+```html
+<el-popover
+  v-ref:popover4
+  placement="right"
+  width="400"
+  trigger="click">
+  <el-table :data="gridData">
+    <el-table-column width="150" property="date" label="日期"></el-table-column>
+    <el-table-column width="100" property="name" label="姓名"></el-table-column>
+    <el-table-column width="300" property="address" label="地址"></el-table-column>
+  </el-table>
+</el-popover>
+
+<el-button v-popover:popover4>click 激活</el-button>
+```
+
+
+## 嵌套操作
+常用于确认操作中,比 Dialog 更加轻量。
+
+<div class="demo-box demo-popover">
+  <el-popover
+    v-ref:popover5
+    placement="top"
+    width="160"
+    :visible.sync="visible2">
+    <p>这是一段内容这是一段内容确定删除吗？</p>
+    <div style="text-align: right; margin: 0">
+      <el-button size="mini" type="text" v-on:click="visible2 = false">取消</el-button>
+      <el-button type="primary" size="mini" v-on:click="visible2 = false">确定</el-button>
+    </div>
+  </el-popover>
+
+  <el-button v-popover:popover5>删除</el-button>
+</div>
+
+```html
+<el-popover
+  v-ref:popover5
+  placement="top"
+  width="160"
+  :visible.sync="visible2">
+  <p>这是一段内容这是一段内容确定删除吗？</p>
+  <div style="text-align: right; margin: 0">
+    <el-button size="mini" type="text" v-on:click="visible2 = false">取消</el-button>
+    <el-button type="primary" size="mini" v-on:click="visible2 = false">确定</el-button>
+  </div>
+</el-popover>
+
+<el-button v-popover:popover5>删除</el-button>
+```
+
+## API
+| 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
+|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
+| trigger | 触发方式 | String  | 'click', 'focus', 'hover' |    click    |
+|  title              | 标题 | String |  |   |
+|  content        |  显示的内容  | String            |  |  |
+|  width        |  宽度  | String, Number            |  | 最小宽度 150px |
+|  placement        |  出现位置  | String           |  `top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end`, `right`, `right-start`, `right-end` |  bottom |
+|  visible        |  初始状态是否可见  | Boolean           |  |  false |
+|  offset        |  出现位置的偏移量  | Number, String           |  |  0 |
+|  options        | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object            | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | { boundariesElement: 'body' } |
+
+## Slot
+| 参数               | 说明                                                     |
+|--- | ---|
+| - | 触发 popover 显示的元素|
+| content | 显示的 HTML 内容 |
diff --git a/examples/docs/progress.md b/examples/docs/progress.md
new file mode 100644
index 000000000..da8bda964
--- /dev/null
+++ b/examples/docs/progress.md
@@ -0,0 +1,48 @@
+<style>
+  .demo-box.demo-progress {
+    .el-progress {
+      margin-bottom: 30px;
+    }
+  }
+</style>
+
+## 基础使用
+
+一个基础的进度条
+
+<div class="demo-box demo-progress">
+  <el-progress :percentage="50" size="large"></el-progress>
+  <el-progress :percentage="50" type="green" size="large"></el-progress>
+  <el-progress :percentage="50"></el-progress>
+  <el-progress :percentage="50" type="green"></el-progress>
+  <el-progress :percentage="50" size="small"></el-progress>
+  <el-progress :percentage="50" type="green" size="small"></el-progress>
+</div>
+
+```html
+<el-progress :percentage="50" size="large"></el-progress>
+<el-progress :percentage="50" type="green" size="large"></el-progress>
+<el-progress :percentage="50"></el-progress>
+<el-progress :percentage="50" type="green"></el-progress>
+<el-progress :percentage="50" size="small"></el-progress>
+<el-progress :percentage="50" type="green" size="small"></el-progress>
+```
+
+## 带条纹效果
+
+<div class="demo-box demo-progress">
+  <el-progress :percentage="50" type="blue-stripe" size="large"></el-progress>
+  <el-progress :percentage="50" type="green-stripe" size="large"></el-progress>
+</div>
+
+```html
+<el-progress :percentage="50" type="blue-stripe" size="large"></el-progress>
+<el-progress :percentage="50" type="green-stripe" size="large"></el-progress>
+```
+
+## API
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| percentage    | 百分比         | number          |                       |     0    |
+| type          | 类型           | string         | blue,green,blue-stripe,green-stripe | blue |
+| size          | 尺寸           | string          | large, small  |     |
diff --git a/examples/docs/quickstart.md b/examples/docs/quickstart.md
new file mode 100644
index 000000000..8faae8dfc
--- /dev/null
+++ b/examples/docs/quickstart.md
@@ -0,0 +1,7 @@
+element 是为饿了么定制的一套 Vue.js 后台组件库。帮助你更轻松更快速的开发后台项目。
+
+-------------
+
+## 安装
+
+待补充
diff --git a/examples/docs/radio.md b/examples/docs/radio.md
new file mode 100644
index 000000000..598dff6a1
--- /dev/null
+++ b/examples/docs/radio.md
@@ -0,0 +1,138 @@
+<script>
+  module.exports = {
+    data() {
+      return {
+        radio: '',
+        radio1: '选中且禁用',
+        radio2: 3,
+        radio31: '',
+        radio32: '',
+        radio33: ''
+      };
+    }
+  };
+</script>
+
+## 基本用法
+
+<div class="demo-box demo-radio">
+  <el-radio class="radio" :value.sync="radio" label="单选框 A"></el-radio>
+  <el-radio class="radio" :value.sync="radio" label="单选框 B"></el-radio>
+  <el-radio class="radio" :value.sync="radio" label="单选框 C"></el-radio>
+</div>
+
+```html
+<template>
+  <el-radio class="radio" :value.sync="radio" label="单选框 A"></el-radio>
+  <el-radio class="radio" :value.sync="radio" label="单选框 B"></el-radio>
+  <el-radio class="radio" :value.sync="radio" label="单选框 C"></el-radio>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio: '选中且禁用'
+      }
+    }
+  }
+</script>
+```
+
+## Radio Group
+
+<div class="demo-box demo-radio">
+  <el-radio-group :value.sync="radio2">
+    <el-radio :label="9"></el-radio>
+    <el-radio :label="6"></el-radio>
+    <el-radio :label="3"></el-radio>
+  </el-radio-group>
+</div>
+
+```html
+<el-radio-group :value.sync="radio2">
+  <el-radio :label="9"></el-radio>
+  <el-radio :label="6"></el-radio>
+  <el-radio :label="3"></el-radio>
+</el-radio-group>
+```
+
+## Radio Group Button
+
+<div class="demo">
+  <el-radio-group :value.sync="radio31" size="large">
+    <el-radio-button label="上海"></el-radio-button>
+    <el-radio-button label="北京"></el-radio-button>
+    <el-radio-button label="广州" :disabled="true"></el-radio-button>
+    <el-radio-button label="深圳"></el-radio-button>
+  </el-radio-group>
+</div>
+<div class="demo">
+  <el-radio-group :value.sync="radio32">
+    <el-radio-button label="上海"></el-radio-button>
+    <el-radio-button label="北京"></el-radio-button>
+    <el-radio-button label="广州" :disabled="true"></el-radio-button>
+    <el-radio-button label="深圳"></el-radio-button>
+  </el-radio-group>
+</div>
+<div class="demo">
+  <el-radio-group :value.sync="radio33" size="small">
+    <el-radio-button label="上海"></el-radio-button>
+    <el-radio-button label="北京"></el-radio-button>
+    <el-radio-button label="广州" :disabled="true"></el-radio-button>
+    <el-radio-button label="深圳"></el-radio-button>
+  </el-radio-group>
+</div>
+
+```html
+<el-radio-group :value.sync="radio31" size="large">
+  <el-radio-button label="上海"></el-radio-button>
+  <el-radio-button label="北京"></el-radio-button>
+  <el-radio-button label="广州" :disabled="true"></el-radio-button>
+  <el-radio-button label="深圳"></el-radio-button>
+</el-radio-group>
+<el-radio-group :value.sync="radio32">
+  <el-radio-button label="上海"></el-radio-button>
+  <el-radio-button label="北京"></el-radio-button>
+  <el-radio-button label="广州" :disabled="true"></el-radio-button>
+  <el-radio-button label="深圳"></el-radio-button>
+</el-radio-group>
+<el-radio-group :value.sync="radio33" size="small">
+  <el-radio-button label="上海"></el-radio-button>
+  <el-radio-button label="北京"></el-radio-button>
+  <el-radio-button label="广州" :disabled="true"></el-radio-button>
+  <el-radio-button label="深圳"></el-radio-button>
+</el-radio-group>
+```
+
+## 禁用
+
+<div class="demo-box demo-radio">
+  <el-radio disabled :value.sync="radio" label="禁用"></el-radio>
+  <el-radio disabled :value.sync="radio1" label="选中且禁用"></el-radio>
+</div>
+
+```html
+<el-radio disabled :value.sync="radio" label="禁用"></el-radio>
+<el-radio disabled :value.sync="radio1" label="选中且禁用"></el-radio>
+```
+
+
+## Radio API
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| value     | 绑定值   | string  |               |         |
+| label     | 真实值   | string    |               |         |
+| disabled  | 禁用    | boolean   | true, false   | false   |
+
+## Radio Group API
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| value     | 绑定值   | string  |               |         |
+| size     | 尺寸   | string  | large, small  |         |
+
+## Radio Button API
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| label     | 真实值   | string  |               |         |
+| disabled  | 禁用    | boolean   | true, false   | false   |
diff --git a/examples/docs/select.md b/examples/docs/select.md
new file mode 100644
index 000000000..7dfac17f0
--- /dev/null
+++ b/examples/docs/select.md
@@ -0,0 +1,779 @@
+<script>
+  export default {
+    created() {
+      this.template = '<span>label: {{ label }}, value: {{ value }}</span>';
+    },
+    data() {
+      return {
+        options: [{
+          value: '选项1',
+          label: '标签1'
+        }, {
+          value: '选项2',
+          label: '标签2'
+        }, {
+          value: '选项3',
+          label: '标签3'
+        }, {
+          value: '选项4',
+          label: '标签4'
+        }, {
+          value: '选项5',
+          label: '标签5'
+        }],
+        options2: [{
+          value: '选项1',
+          label: '标签1'
+        }, {
+          value: '选项2',
+          label: '标签2',
+          disabled: true
+        }, {
+          value: '选项3',
+          label: '标签3'
+        }, {
+          value: '选项4',
+          label: '标签4'
+        }, {
+          value: '选项5',
+          label: '标签5'
+        }],
+        options3: [{
+          label: '分组1',
+          options: [{
+            value: '选项1',
+            label: '标签1'
+          }, {
+            value: '选项2',
+            label: '标签2'
+          }]
+        }, {
+          label: '分组2',
+          options: [{
+            value: '选项3',
+            label: '标签3'
+          }, {
+            value: '选项4',
+            label: '标签4'
+          }, {
+            value: '选项5',
+            label: '标签5'
+          }]
+        }],
+        options4: [{
+          value: '选项1',
+          label: '标签1'
+        }, {
+          value: '选项2',
+          label: '标签2'
+        }, {
+          value: '选项3',
+          label: '标签3'
+        }, {
+          value: '选项4',
+          label: '标签4'
+        }, {
+          value: '选项5',
+          label: '标签5'
+        }, {
+          value: '选项6',
+          label: '标签6'
+        }, {
+          value: '选项7',
+          label: '标签7'
+        }, {
+          value: '选项8',
+          label: '标签8'
+        }, {
+          value: '选项9',
+          label: '标签9'
+        }, {
+          value: '选项10',
+          label: '标签10'
+        }, {
+          value: '选项11',
+          label: '标签11'
+        }],
+        options5: [],
+        value: '',
+        value2: '',
+        value3: '',
+        value4: '',
+        value5: '',
+        value6: '',
+        value7: [],
+        value8: '',
+        value9: '',
+        value10: '',
+        value11: '',
+        value12: [],
+        loading: false,
+        states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
+      };
+    },
+
+    methods: {
+      remoteMethod(query) {
+        if (query !== '') {
+          this.loading = true;
+          setTimeout(() => {
+            this.loading = false;
+            this.options5 = this.states.filter(item => item.toLowerCase().indexOf(query) > -1).map(item => { return { value: item, label: item }; });
+          }, 200);
+        }
+      }
+    }
+  };
+</script>
+
+## 基本用法
+
+<el-select :value.sync="value">
+  <el-option v-for="item in options" :label="item.label" :value="item.value"></el-option>
+</el-select>
+
+```html
+<template>
+<el-select :value.sync="value">
+  <el-option
+    v-for="item in options"
+    :label="item.label"
+    :value="item.value">
+  </el-option>
+</el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: '选项1',
+          label: '标签1'
+        }, {
+          value: '选项2',
+          label: '标签2'
+        }, {
+          value: '选项3',
+          label: '标签3'
+        }, {
+          value: '选项4',
+          label: '标签4'
+        }, {
+          value: '选项5',
+          label: '标签5'
+        }],
+        value: ''
+      }
+    }
+  }
+</script>
+```
+
+## 禁用状态
+
+<el-select :value.sync="value2" disabled>
+  <el-option v-for="item in options" :label="item.label" :value="item.value"></el-option>
+</el-select>
+
+```html
+<template>
+  <el-select :value.sync="value2" disabled>
+    <el-option
+      v-for="item in options"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: '选项1',
+          label: '标签1'
+        }, {
+          value: '选项2',
+          label: '标签2'
+        }, {
+          value: '选项3',
+          label: '标签3'
+        }, {
+          value: '选项4',
+          label: '标签4'
+        }, {
+          value: '选项5',
+          label: '标签5'
+        }],
+        value2: ''
+      }
+    }
+  }
+</script>
+```
+
+## 有禁用选项
+
+<el-select :value.sync="value3">
+  <el-option v-for="item in options2" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
+</el-select>
+
+```html
+<template>
+  <el-select :value.sync="value3">
+    <el-option
+      v-for="item in options2"
+      :label="item.label"
+      :value="item.value"
+      :disabled="item.disabled">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options2: [{
+          value: '选项1',
+          label: '标签1'
+        }, {
+          value: '选项2',
+          label: '标签2',
+          disabled: true
+        }, {
+          value: '选项3',
+          label: '标签3'
+        }, {
+          value: '选项4',
+          label: '标签4'
+        }, {
+          value: '选项5',
+          label: '标签5'
+        }],
+        value3: ''
+      }
+    }
+  }
+</script>
+```
+
+## 可清空单选
+
+<el-select :value.sync="value4" clearable>
+  <el-option v-for="item in options" :label="item.label" :value="item.value"></el-option>
+</el-select>
+
+```html
+<template>
+<el-select :value.sync="value4" clearable>
+  <el-option
+    v-for="item in options"
+    :label="item.label"
+    :value="item.value">
+  </el-option>
+</el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: '选项1',
+          label: '标签1'
+        }, {
+          value: '选项2',
+          label: '标签2'
+        }, {
+          value: '选项3',
+          label: '标签3'
+        }, {
+          value: '选项4',
+          label: '标签4'
+        }, {
+          value: '选项5',
+          label: '标签5'
+        }],
+        value4: ''
+      }
+    }
+  }
+</script>
+```
+
+## 指定初始被选项
+
+<el-select :value.sync="value5">
+  <el-option v-for="item in options" :label="item.label" :value="item.value" :selected="item.value === '选项2'"></el-option>
+</el-select>
+
+要指定 `select` 的初始被选项有两种方法。可以通过指定 `el-option` 的 `selected` 属性:
+
+```html
+<template>
+  <el-select :value.sync="value5">
+    <el-option
+      v-for="item in options"
+      :label="item.label"
+      :value="item.value"
+      :selected="item.value === '选项2'">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: '选项1',
+          label: '标签1'
+        }, {
+          value: '选项2',
+          label: '标签2'
+        }, {
+          value: '选项3',
+          label: '标签3'
+        }, {
+          value: '选项4',
+          label: '标签4'
+        }, {
+          value: '选项5',
+          label: '标签5'
+        }],
+        value5: ''
+      }
+    }
+  }
+</script>
+```
+
+或者通过为绑定到 `value` 的变量赋予初始值:
+
+```html
+<template>
+  <el-select :value.sync="value5">
+    <el-option
+      v-for="item in options"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: '选项1',
+          label: '标签1'
+        }, {
+          value: '选项2',
+          label: '标签2'
+        }, {
+          value: '选项3',
+          label: '标签3'
+        }, {
+          value: '选项4',
+          label: '标签4'
+        }, {
+          value: '选项5',
+          label: '标签5'
+        }],
+        value5: '选项2'
+      }
+    }
+  }
+</script>
+```
+
+## 自定义模板
+
+<el-select :value.sync="value6">
+  <el-option
+    v-for="item in options"
+    :label="item.label"
+    :value="item.value"
+    :template="template">
+  </el-option>
+</el-select>
+
+```html
+<template>
+  <el-select :value.sync="value6">
+    <el-option
+      v-for="item in options"
+      :label="item.label"
+      :value="item.value"
+      :template="optionTemplate">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    cerated () {
+      this.optionTemplate = '<span>label: {{ label }}, value: {{ value }}</span>';
+    },
+    data() {
+      return {
+        options: [{
+          value: '选项1',
+          label: '标签1'
+        }, {
+          value: '选项2',
+          label: '标签2'
+        }, {
+          value: '选项3',
+          label: '标签3'
+        }, {
+          value: '选项4',
+          label: '标签4'
+        }, {
+          value: '选项5',
+          label: '标签5'
+        }],
+        value6: ''
+      }
+    }
+  }
+</script>
+```
+
+## 多选
+
+<el-select :value.sync="value7" multiple>
+  <el-option
+    v-for="item in options"
+    :label="item.label"
+    :value="item.value">
+  </el-option>
+</el-select>
+
+```html
+<template>
+  <el-select :value.sync="value7" multiple>
+    <el-option
+      v-for="item in options"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: '选项1',
+          label: '标签1'
+        }, {
+          value: '选项2',
+          label: '标签2'
+        }, {
+          value: '选项3',
+          label: '标签3'
+        }, {
+          value: '选项4',
+          label: '标签4'
+        }, {
+          value: '选项5',
+          label: '标签5'
+        }],
+        value7: []
+      }
+    }
+  }
+</script>
+```
+
+## 自定义宽度
+
+<el-select :value.sync="value8" :width="300" :dropdown-width="350">
+  <el-option v-for="item in options" :label="item.label" :value="item.value"></el-option>
+</el-select>
+
+```html
+<template>
+  <el-select :value.sync="value8" :width="300" :dropdown-width="350">
+    <el-option
+      v-for="item in options"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: '选项1',
+          label: '标签1'
+        }, {
+          value: '选项2',
+          label: '标签2'
+        }, {
+          value: '选项3',
+          label: '标签3'
+        }, {
+          value: '选项4',
+          label: '标签4'
+        }, {
+          value: '选项5',
+          label: '标签5'
+        }],
+        value8: ''
+      }
+    }
+  }
+</script>
+```
+
+## 分组
+
+<el-select :value.sync="value9">
+  <el-option-group v-for="group in options3" :label="group.label">
+    <el-option v-for="item in group.options" :label="item.label" :value="item.value"></el-option>
+  </el-option-group>
+</el-select>
+
+```html
+<template>
+  <el-select :value.sync="value9">
+    <el-option-group v-for="group in options3" :label="group.label">
+      <el-option
+        v-for="item in group.options"
+        :label="item.label"
+        :value="item.value">
+      </el-option>
+    </el-option-group>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options3: [{
+          label: '分组1',
+          options: [{
+            value: '选项1',
+            label: '标签1'
+          }, {
+            value: '选项2',
+            label: '标签2'
+          }]
+        }, {
+          label: '分组2',
+          options: [{
+            value: '选项3',
+            label: '标签3'
+          }, {
+            value: '选项4',
+            label: '标签4'
+          }, {
+            value: '选项5',
+            label: '标签5'
+          }]
+        }],
+        value9: ''
+      }
+    }
+  }
+</script>
+```
+
+## 选项较多时的交互
+
+<el-select :value.sync="value10">
+  <el-option v-for="item in options4" :label="item.label" :value="item.value"></el-option>
+</el-select>
+
+```html
+<template>
+  <el-select :value.sync="value10">
+    <el-option
+      v-for="item in options4"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options4: [{
+          value: '选项1',
+          label: '标签1'
+        }, {
+          value: '选项2',
+          label: '标签2'
+        }, {
+          value: '选项3',
+          label: '标签3'
+        }, {
+          value: '选项4',
+          label: '标签4'
+        }, {
+          value: '选项5',
+          label: '标签5'
+        }, {
+          value: '选项6',
+          label: '标签6'
+        }, {
+          value: '选项7',
+          label: '标签7'
+        }, {
+          value: '选项8',
+          label: '标签8'
+        }, {
+          value: '选项9',
+          label: '标签9'
+        }, {
+          value: '选项10',
+          label: '标签10'
+        }, {
+          value: '选项11',
+          label: '标签11'
+        }],
+        value10: ''
+      }
+    }
+  }
+</script>
+```
+
+## 可搜索
+
+<el-select :value.sync="value11" filterable>
+  <el-option v-for="item in options" :label="item.label" :value="item.value"></el-option>
+</el-select>
+
+```html
+<template>
+  <el-select :value.sync="value11" filterable>
+    <el-option
+      v-for="item in options"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: '选项1',
+          label: '标签1'
+        }, {
+          value: '选项2',
+          label: '标签2'
+        }, {
+          value: '选项3',
+          label: '标签3'
+        }, {
+          value: '选项4',
+          label: '标签4'
+        }, {
+          value: '选项5',
+          label: '标签5'
+        }],
+        value11: ''
+      }
+    }
+  }
+</script>
+```
+
+## 服务端搜索
+
+<el-select :value.sync="value12" multiple filterable remote :remote-method="remoteMethod" :loading="loading">
+  <el-option v-for="item in options5" :label="item.label" :value="item.value"></el-option>
+</el-select>
+
+```html
+<template>
+  <el-select
+    :value.sync="value12"
+    multiple
+    filterable
+    remote
+    :remote-method="remoteMethod"
+    :loading="loading">
+    <el-option
+      v-for="item in options5"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options5: [],
+        value12: [],
+        loading: false,
+        states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
+      }
+    },
+    methods: {
+      remoteMethod(query) {
+        if (query !== '') {
+          this.loading = true;
+          setTimeout(() => {
+            this.loading = false;
+            this.options5 = this.states.filter(item => item.toLowerCase().indexOf(query) > -1).map(item => { return { value: item, label: item }; });
+          }, 200);
+        }
+      }
+    }
+  }
+</script>
+```
+
+## API
+### el-select
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| value | select 目前选中的值 | string/number/array | | |
+| multiple | 是否多选 | boolean | | false |
+| disabled | 是否禁用 | boolean | | false |
+| clearable | 单选时是否可以清空选项 | boolean | | false |
+| width | select 的宽度 | number | | 180（单选）/220（多选） |
+| dropdown-width | 下拉菜单的宽度，不设置则与输入框同宽 | number | | |
+| name | select input 的 name 属性 | string | | |
+| placeholder | 占位符 | string | | '请选择' |
+| filterable | 是否可搜索 | boolean | | false |
+| filter-method | 自定义过滤方法 | function | |  |
+| remote | 是否为远程搜索 | boolean | | false |
+| remote-method | 远程搜索方法，当搜索关键字变化时会调用该方法，参数为目前的搜索关键字 | function | | |
+| loading | 是否正在从远程获取数据 | boolean | | false |
+| change | value 发生变化时的回调函数，参数为 value 的值 | function | | |
+
+### el-option-group
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| label | 分组的标签 | string | | |
+| disabled | 是否将该分组下所有选项置为禁用 | boolean | | false |
+
+### el-option
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| value | 选项的值 | string/number | | |
+| label | 选项的标签，若不设置则默认与 `value` 相同 | string/number | | |
+| disabled | 是否禁用该选项 | boolean | | false |
+| selected | 选项是否被初始选中 | boolean | | false |
+| template | 选项的自定义模板 | String | | `<span>{{ label }}</span>`  |
diff --git a/examples/docs/slider.md b/examples/docs/slider.md
new file mode 100644
index 000000000..57e9ee094
--- /dev/null
+++ b/examples/docs/slider.md
@@ -0,0 +1,89 @@
+<script>
+  export default {
+    methods: {
+      onChange(value) {
+        console.log(value);
+      }
+    }
+  }
+</script>
+
+## 基本用法
+
+<el-slider></el-slider>
+
+```html
+<el-slider></el-slider>
+```
+
+## 定义初始值
+
+<el-slider :value="50"></el-slider>
+
+```html
+<el-slider :value="50"></el-slider>
+```
+
+## 定义区间
+
+<el-slider :min="20" :max="80"></el-slider>
+
+```html
+<el-slider :min="20" :max="80"></el-slider>
+```
+
+## 定义步长
+
+<el-slider :step="10"></el-slider>
+
+```html
+<el-slider :step="10"></el-slider>
+```
+
+## 显示间断点
+
+<el-slider :step="10" show-stops></el-slider>
+
+```html
+<el-slider :step="10" show-stops></el-slider>
+```
+
+## 带有输入框
+
+<el-slider show-input></el-slider>
+
+```html
+<el-slider show-input></el-slider>
+```
+
+## 回调函数
+
+<el-slider @change="onChange"></el-slider>
+
+```html
+<template>
+  <el-slider @change="onChange"></el-slider>
+</template>
+
+<script>
+  export default {
+    methods: {
+      onChange(value) {
+        console.log(value);
+      }
+    }
+  }
+</script>
+```
+
+
+## API
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| value | 绑定值 | number | | 最小值 min |
+| min | 最小值 | number | | 0 |
+| max | 最大值 | number | | 100 |
+| step | 步长 | number | | 1 |
+| showInput | 是否显示输入框 | boolean | | false |
+| showStops | 是否显示间断点 | boolean | | false |
+| change | 值改变时的回调函数 | function | | |
diff --git a/examples/docs/switch.md b/examples/docs/switch.md
new file mode 100644
index 000000000..bc84d7bae
--- /dev/null
+++ b/examples/docs/switch.md
@@ -0,0 +1,61 @@
+<style>
+  .demo-box.demo-switch {
+    .el-switch {
+      display: block;
+      margin: 20px 0;
+    }
+  }
+</style>
+
+## 基本用法
+
+<div class="demo-box demo-switch">
+  <el-switch></el-switch>
+</div>
+
+```html
+<el-switch></el-switch>
+```
+
+## 禁用状态
+
+<div class="demo-box demo-switch">
+  <el-switch disabled></el-switch>
+  <el-switch disabled :value="false"></el-switch>
+  <el-switch on-text="" off-text="" disabled></el-switch>
+  <el-switch on-text="" off-text="" disabled :value="false"></el-switch>
+</div>
+
+```html
+<el-switch disabled></el-switch>
+<el-switch disabled :value="false"></el-switch>
+<el-switch on-text="" off-text="" disabled></el-switch>
+<el-switch on-text="" off-text="" disabled :value="false"></el-switch>
+```
+
+## 自定义颜色
+
+<div class="demo-box demo-switch">
+  <el-switch on-color="#13ce66" off-color="#ff4949"></el-switch>
+  <el-switch on-color="#13ce66" off-color="#ff4949" on-text="" off-text=""></el-switch>
+</div>
+
+```html
+<el-switch on-color="#13ce66" off-color="#ff4949"></el-switch>
+<el-switch on-color="#13ce66" off-color="#ff4949" on-text="" off-text=""></el-switch>
+```
+
+## API
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| value     | switch 的选中状态   | boolean    |               | true |
+| disabled  | 禁用    | boolean   | true, false   | false   |
+| width  | switch 的宽度（像素）    | number   | | 58（有文字）/ 46（无文字） |
+| on-icon-class  | switch 打开时所显示图标的类名    | string   | | |
+| off-icon-class  | switch 关闭时所显示图标的类名    | string   | | |
+| on-text  | switch 打开时的文字    | string   | | 'ON' |
+| off-text  | switch 关闭时的文字    | string   | | 'OFF' |
+| on-color  | switch 打开时的背景色    | string   | | |
+| off-color  | switch 关闭时的背景色    | string   | | |
+| name  | 对应 input 的 name 属性    | string   | | |
+
diff --git a/examples/docs/table.md b/examples/docs/table.md
new file mode 100644
index 000000000..0aac0e794
--- /dev/null
+++ b/examples/docs/table.md
@@ -0,0 +1,606 @@
+<script>
+  import Vue from 'vue';
+  let popup = Vue.extend(require('examples/components/table-filter.vue'));
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }],
+        tableData2: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+          $info: true
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+          $positive: true
+        }],
+        tableData3: [{
+          tag: '家',
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          tag: '公司',
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          tag: '公司',
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          tag: '家',
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          tag: '公司',
+          date: '2016-05-08',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          tag: '家',
+          date: '2016-05-06',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          tag: '公司',
+          date: '2016-05-07',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }],
+        singleSelection: {},
+        multipleSelection: []
+      };
+    },
+
+    watch: {
+      singleSelection(val) {
+        console.log('selection: ', val);
+      },
+
+      multipleSelection(val) {
+        console.log('selection: ', val);
+      }
+    }
+  };
+</script>
+
+## 基础表格
+
+<el-table :data="tableData" style="width: 520px">
+  <el-table-column property="date" label="日期" width="120"></el-table-column>
+  <el-table-column property="name" label="姓名" width="120"></el-table-column>
+  <el-table-column property="address" label="地址"></el-table-column>
+</el-table>
+
+```html
+<template>
+  <el-table :data="tableData">
+    <el-table-column property="date" label="日期" width="120"></el-table-column>
+    <el-table-column property="name" label="姓名" width="120"></el-table-column>
+    <el-table-column property="address" label="地址"></el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }]
+      }
+    }
+  }
+</script>
+```
+
+## 带斑马纹表格
+
+<el-table :data="tableData" stripe style="width: 520px">
+  <el-table-column property="date" label="日期" width="120"></el-table-column>
+  <el-table-column property="name" label="姓名" width="120"></el-table-column>
+  <el-table-column property="address" label="地址"></el-table-column>
+</el-table>
+
+```html
+<template>
+  <el-table :data="tableData" stripe>
+    <el-table-column property="date" label="日期" width="120"></el-table-column>
+    <el-table-column property="name" label="姓名" width="120"></el-table-column>
+    <el-table-column property="address" label="地址"></el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }]
+      }
+    }
+  }
+</script>
+```
+
+## 带边框表格
+
+<el-table :data="tableData" border style="width: 520px">
+  <el-table-column property="date" label="日期" width="120"></el-table-column>
+  <el-table-column property="name" label="姓名" width="120"></el-table-column>
+  <el-table-column property="address" label="地址"></el-table-column>
+</el-table>
+
+```html
+<template>
+  <el-table :data="tableData" border>
+    <el-table-column property="date" label="日期" width="120"></el-table-column>
+    <el-table-column property="name" label="姓名" width="120"></el-table-column>
+    <el-table-column property="address" label="地址"></el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }]
+      }
+    }
+  }
+</script>
+```
+
+## 带状态表格
+
+<el-table :data="tableData2" style="width: 520px">
+  <el-table-column property="date" label="日期" width="120"></el-table-column>
+  <el-table-column property="name" label="姓名" width="120"></el-table-column>
+  <el-table-column property="address" label="地址"></el-table-column>
+</el-table>
+
+```html
+<template>
+  <el-table :data="tableData2">
+    <el-table-column property="date" label="日期" width="120"></el-table-column>
+    <el-table-column property="name" label="姓名" width="120"></el-table-column>
+    <el-table-column property="address" label="地址"></el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData2: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+          $info: true
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+          $positive: true
+        }]
+      }
+    }
+  }
+</script>
+```
+
+## 固定表头
+
+<el-table :data="tableData3" height="250" border style="width: 520px">
+  <el-table-column property="date" label="日期" width="120"></el-table-column>
+  <el-table-column property="name" label="姓名" width="120"></el-table-column>
+  <el-table-column property="address" label="地址"></el-table-column>
+</el-table>
+
+```html
+<template>
+  <el-table :data="tableData3" height="250" border>
+    <el-table-column property="date" label="日期" width="120"></el-table-column>
+    <el-table-column property="name" label="姓名" width="120"></el-table-column>
+    <el-table-column property="address" label="地址"></el-table-column>
+  </el-table>
+</template>
+ 
+<script>
+  export default {
+    data() {
+      return {
+        tableData3: [{
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-08',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-06',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-07',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }]
+      }
+    }
+  }
+</script>
+```
+
+## 固定列
+<el-table :data="tableData" :fixed-column-count="1" border style="width: 500px">
+  <el-table-column property="date" label="日期" width="150"></el-table-column>
+  <el-table-column property="name" label="姓名" width="300"></el-table-column>
+  <el-table-column property="address" label="地址" width="300"></el-table-column>
+</el-table>
+
+```html
+<template>
+  <el-table :data="tableData" :fixed-column-count="1" border style="width: 500px">
+    <el-table-column property="date" label="日期" width="150"></el-table-column>
+    <el-table-column property="name" label="姓名" width="300"></el-table-column>
+    <el-table-column property="address" label="地址" width="300"></el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }]
+      }
+    }
+  }
+</script>
+```
+
+## 固定列和表头
+<el-table :data="tableData3" :fixed-column-count="1" border style="width: 500px" height="250">
+  <el-table-column property="date" label="日期" width="150"></el-table-column>
+  <el-table-column property="name" label="姓名" width="300"></el-table-column>
+  <el-table-column property="address" label="地址" width="300"></el-table-column>
+</el-table>
+
+```html
+<template>
+  <el-table :data="tableData3" :fixed-column-count="1" border style="width: 500px" height="250">
+    <el-table-column property="date" label="日期" width="150"></el-table-column>
+    <el-table-column property="name" label="姓名" width="300"></el-table-column>
+    <el-table-column property="address" label="地址" width="300"></el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData3: [{
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-08',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-06',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-07',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }]
+      }
+    }
+  }
+</script>
+```
+
+## 单选
+
+<el-table :data="tableData" selection-mode="single" :selection.sync="singleSelection" style="width: 520px" allow-no-selection>
+  <el-table-column property="date" label="日期" width="120"></el-table-column>
+  <el-table-column property="name" label="姓名" width="120"></el-table-column>
+  <el-table-column property="address" label="地址"></el-table-column>
+</el-table>
+<p>{{ singleSelection | json }}</p>
+
+```html
+<template>
+  <el-table :data="tableData" selection-mode="single" :selection.sync="singleSelection">
+    <el-table-column property="date" label="日期" width="120"></el-table-column>
+    <el-table-column property="name" label="姓名" width="120"></el-table-column>
+    <el-table-column property="address" label="地址"></el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }],
+        singleSelection: {}
+      }
+    }
+  }
+</script>
+```
+
+## 多选
+
+<el-table :data="tableData3" selection-mode="multiple" :selection.sync="multipleSelection" style="width: 520px">
+  <el-table-column type="selection" width="50"></el-table-column>
+  <el-table-column property="date" label="日期" width="120"></el-table-column>
+  <el-table-column property="name" label="姓名" width="120"></el-table-column>
+  <el-table-column property="address" label="地址"></el-table-column>
+</el-table>
+<p>{{ multipleSelection | json }}</p>
+
+```html
+<template>
+  <el-table :data="tableData3" selection-mode="multiple" :selection.sync="multipleSelection">
+    <el-table-column type="selection" width="50"></el-table-column>
+    <el-table-column property="date" label="日期" width="120"></el-table-column>
+    <el-table-column property="name" label="姓名" width="120"></el-table-column>
+    <el-table-column property="address" label="地址"></el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData3: [{
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-08',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-06',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-07',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }],
+        multipleSelection: []
+      }
+    }
+  }
+</script>
+```
+
+## 排序
+
+<el-table :data="tableData" border style="width: 520px">
+  <el-table-column property="date" label="日期" sortable width="120"></el-table-column>
+  <el-table-column property="name" label="姓名" width="120"></el-table-column>
+  <el-table-column property="address" label="地址"></el-table-column>
+</el-table>
+
+```html
+<template>
+  <el-table :data="tableData" border style="width: 520px">
+    <el-table-column property="date" label="日期" sortable width="120"></el-table-column>
+    <el-table-column property="name" label="姓名" width="120"></el-table-column>
+    <el-table-column property="address" label="地址"></el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }]
+      }
+    }
+  }
+</script>
+```
+
+## el-table API
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| data | 显示的数据 | array | | |
+| height | table 的高度，默认高度为空，即自动高度 | string | | '' |
+| stripe | 是否为斑马纹 table | boolean | | false |
+| border | 是否带有纵向边框 | boolean | | false |
+| selectionMode | 列表项选择模式 | string | 'single', 'multiple', 'none' | 'none' |
+| allowNoSelection | 单选模式是否允许选项为空 | boolean | | false |
+| selection | 多选模式下返回数组，单选模式下返回选中的元素。 | array/object | | |
+| fixedColumnCount | 固定列的个数 | number | | 0 |
+
+## el-table 事件
+| 事件名 | 说明 | 参数 |
+| ---- | ---- | ---- |
+| selection-change | 当选择项发生变化时会触发该事件 | selected |
+| cell-mouse-enter | 当单元格 hover 进入时会触发该事件 | row, column, cell, event |
+| cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event |
+| cell-click | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
+
+## el-table-column API
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| label | 显示的标题 | string | | '' |
+| property | 对应列内容的字段名 | string | | '' |
+| width | 对应列的宽度 | string | | |
+| sortable | 对应列是否可以排序 | boolean | | false |
+| type | 对应列的类型。如果设置了 `selection` 则显示多选按钮，如果设置了 `index` 则显示该行的索引（从 1 开始计算） | string | 'selection', 'index' | 0 |
+| formatter | 用来格式化内容，在 formatter 执行的时候，会传入 row 和 column | function | |  |
diff --git a/examples/docs/tabs.md b/examples/docs/tabs.md
new file mode 100644
index 000000000..ba2152f07
--- /dev/null
+++ b/examples/docs/tabs.md
@@ -0,0 +1,125 @@
+<script>
+  export default {
+    data() {
+      return {
+        tabs: [{
+          title: '选项卡一',
+          content: '选项卡一内容'
+        },{
+          title: '选项卡二',
+          content: '选项卡二内容'
+        },{
+          title: '选项卡三',
+          content: '选项卡三内容'
+        },{
+          title: '选项卡四',
+          content: '选项卡四内容'
+        }],
+        activeKey: '3',
+        activeKey2: ''
+      }
+    }
+  }
+</script>
+<style>
+  .el-tabs {
+    margin-bottom: 30px;
+  }
+</style>
+
+## 基础使用
+
+<div>
+  <el-tabs :active-key="activeKey">
+    <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
+    <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
+    <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
+    <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
+  </el-tabs>
+</div>
+
+```html
+<el-tabs :active-key="activeKey">
+  <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
+  <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
+  <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
+  <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
+</el-tabs>
+```
+
+## 标签风格
+
+<div>
+  <el-tabs type="card">
+    <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
+    <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
+    <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
+    <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
+  </el-tabs>
+</div>
+
+```html
+<el-tabs type="card">
+  <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
+  <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
+  <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
+  <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
+</el-tabs>
+```
+
+## 可关闭的标签
+
+<div>
+  <el-tabs type="card" :closable="true">
+    <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
+    <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
+    <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
+    <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
+  </el-tabs>
+</div>
+{{activeKey2}}
+
+```html
+<el-tabs type="card" :closable="true">
+  <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
+  <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
+  <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
+  <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
+</el-tabs>
+```
+
+## 卡片风格
+
+<div>
+  <el-tabs type="border-card">
+    <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
+    <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
+    <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
+    <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
+  </el-tabs>
+</div>
+
+```html
+<el-tabs type="border-card">
+  <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
+  <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
+  <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
+  <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
+</el-tabs>
+```
+
+## TABS API
+| 参数       | 说明     | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| type     | 风格类型   | string   | card, border-card  |         |
+| closable  | 真实值   | boolean   | true, false |  false  |
+| defaultActiveKey  | 如果没有设置 activeKey, 则使用该值 | string    |     | 第一个面板  |
+| activeKey  | 当前选中面板的key  | string   |    |    |
+| tab.click  | tab 被点击的回调  | string   |    |    |
+| tab.remove  | tab 被删除的回调  | string   |    |    |
+
+## TAB-PANE API
+| 参数       | 说明     | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| label     | 选项卡标题   | string   |  |         |
+| key       | 与选项卡activeKey对应的标识符   | string   |  |  该选项卡在选项卡中的index值，如第一个选项卡则为'1'  |
diff --git a/examples/docs/tag.md b/examples/docs/tag.md
new file mode 100644
index 000000000..c4e63e728
--- /dev/null
+++ b/examples/docs/tag.md
@@ -0,0 +1,95 @@
+<script>
+  export default {
+    data() {
+      return {
+        tags: [
+          { key: 1, name: '标签一', type: '' },
+          { key: 2, name: '标签二', type: 'gray' },
+          { key: 5, name: '标签三', type: 'primary' },
+          { key: 3, name: '标签四', type: 'success' },
+          { key: 4, name: '标签五', type: 'warning' },
+          { key: 6, name: '标签六', type: 'danger' }
+        ]
+      };
+    },
+    methods: {
+      handleClose(tag) {
+        this.tags.$remove(tag);
+      }
+    }
+  }
+</script>
+
+<style>
+  .demo-box.demo-tag {
+    .el-tag + .el-tag {
+      margin-left: 10px;
+    }
+  }
+</style>
+
+## 基础使用
+
+<div class="demo-box demo-tag">
+  <el-tag>标签一</el-tag>
+  <el-tag type="gray">标签二</el-tag>
+  <el-tag type="primary">标签三</el-tag>
+  <el-tag type="success">标签四</el-tag>
+  <el-tag type="warning">标签五</el-tag>
+  <el-tag type="danger">标签六</el-tag>
+</div>
+
+```html
+<el-tag>标签一</el-tag>
+<el-tag type="gray">标签二</el-tag>
+<el-tag type="primary">标签三</el-tag>
+<el-tag type="success">标签四</el-tag>
+<el-tag type="warning">标签五</el-tag>
+<el-tag type="danger">标签六</el-tag>
+```
+
+## 可移除的标签
+
+<div class="demo-box demo-tag">
+  <el-tag
+    v-for="tag in tags"
+    :closable="true"
+    :type="tag.type"
+    @close="handleClose(tag)"
+  >
+  {{tag.name}}
+  </el-tag>
+</div>
+
+```html
+<el-tag
+  v-for="tag in tags"
+  :closable="true"
+  :type="tag.type"
+  @close="handleClose(tag)"
+>
+{{tag.name}}
+</el-tag>
+
+<script>
+  export default {
+    data() {
+      return {
+        tags: [
+          { key: 1, name: '标签一', type: '' },
+          { key: 2, name: '标签二', type: 'gray' },
+          { key: 5, name: '标签三', type: 'primary' },
+          { key: 3, name: '标签四', type: 'success' },
+          { key: 4, name: '标签五', type: 'warning' },
+          { key: 6, name: '标签六', type: 'danger' }
+        ]
+      };
+    },
+    methods: {
+      handleClose(tag) {
+        this.tags.$remove(tag);
+      }
+    }
+  }
+</script>
+```
diff --git a/examples/docs/time-picker.md b/examples/docs/time-picker.md
new file mode 100644
index 000000000..6b7d58033
--- /dev/null
+++ b/examples/docs/time-picker.md
@@ -0,0 +1,234 @@
+<style>
+  .demo-box {
+    .el-date-editor + .el-date-editor {
+      margin-left: 10px;
+    }
+  }
+</style>
+
+## 固定时间点
+提供几个固定的时间点供用户选择。
+
+<div class="demo-box">
+  <el-time-select
+    :picker-options="{
+      start: '08:30',
+      step: '00:15',
+      end: '18:30'
+    }"
+    placeholder="选择时间">
+  </el-time-select>
+</div>
+
+```html
+<el-time-select
+  :value.sync="value"
+  :picker-options="{
+    start: '08:30',
+    step: '00:15',
+    end: '18:30'
+  }"
+  placeholder="选择时间">
+</el-time-select>
+```
+
+## 任意时间点
+可以选择任意时间。
+
+<div class="demo-box">
+  <el-time-picker
+    placeholder="任意时间点">
+  </el-time-picker>
+</div>
+
+```html
+<el-time-picker
+  :value.sync="value"
+  placeholder="任意时间点">
+</el-time-picker>
+```
+
+### 通用 - 手动输入规则
+<div class="demo-box">
+  <el-time-picker
+    placeholder="任意时间点">
+  </el-time-picker>
+</div>
+
+```html
+<el-time-picker
+  :value.sync="value"
+  placeholder="任意时间点">
+</el-time-picker>
+```
+
+### 通用 - 限制时间范围
+
+<div class="demo-box">
+  <el-time-picker
+    :picker-options="{
+      selectableRange: '18:30:00 - 20:30:00'
+    }"
+    placeholder="任意时间点">
+  </el-time-picker>
+</div>
+
+```html
+<el-time-picker
+  :value.sync="value"
+  :picker-options="{
+    selectableRange: '18:30:00 - 20:30:00'
+  }"
+  placeholder="任意时间点">
+</el-time-picker>
+```
+
+
+## 固定时间范围
+
+### 先选择开始时间
+先选择开始时间,结束时间内备选项的状态会随之改变。
+
+<div class="demo-box">
+  <el-time-select
+    placeholder="起始时间"
+    :value.sync="startTime"
+    :picker-options="{
+      start: '08:30',
+      step: '00:15',
+      end: '18:30'
+    }">
+  </el-time-select>
+  <el-time-select
+    placeholder="结束时间"
+    :value.sync="endTime"
+    :picker-options="{
+      start: '08:30',
+      step: '00:15',
+      end: '18:30',
+      minTime: startTime
+    }">
+  </el-time-select>
+</div>
+
+```html
+<el-time-select
+  placeholder="起始时间"
+  :value.sync="startTime"
+  :picker-options="{
+    start: '08:30',
+    step: '00:15',
+    end: '18:30'
+  }">
+</el-time-select>
+<el-time-select
+  placeholder="结束时间"
+  :value.sync="endTime"
+  :picker-options="{
+    start: '08:30',
+    step: '00:15',
+    end: '18:30',
+    minTime: startTime
+  }">
+</el-time-select>
+```
+
+### 先选择结束时间
+开始时间的备选项不随结束时间的选择改变。
+
+<div class="demo-box">
+  <el-time-select
+    placeholder="起始时间"
+    :value.sync="startTime2"
+    :picker-options="{
+      start: '08:30',
+      step: '00:15',
+      end: '18:30'
+    }">
+  </el-time-select>
+  <el-time-select
+    placeholder="结束时间"
+    :value.sync="endTime2"
+    :picker-options="{
+      start: '08:30',
+      step: '00:15',
+      end: '18:30',
+      minTime: startTime2
+    }">
+  </el-time-select>
+</div>
+
+```html
+<el-time-select
+  placeholder="起始时间"
+  :value.sync="startTime2"
+  :picker-options="{
+    start: '08:30',
+    step: '00:15',
+    end: '18:30'
+  }">
+</el-time-select>
+<el-time-select
+  placeholder="结束时间"
+  :value.sync="endTime2"
+  :picker-options="{
+    start: '08:30',
+    step: '00:15',
+    end: '18:30',
+    minTime: startTime2
+  }">
+</el-time-select>
+```
+
+## 任意时间范围
+可选择任意的时间范围。
+
+<div class="demo-box">
+  <el-time-picker
+    is-range
+    placeholder="选择时间范围">
+  </el-time-picker>
+</div>
+
+```html
+<el-time-picker
+  is-range
+  placeholder="选择时间范围">
+</el-time-picker>
+```
+
+<script>
+  export default {
+    data() {
+      return {
+        startTime: '',
+        endTime: '',
+        startTime2: '',
+        endTime2: ''
+      };
+    }
+  }
+</script>
+
+## API
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| value | 绑定值，需双向绑定 | String |   |  |
+| readonly | 只读 | Boolean |  | false |
+| placeholder | 占位内容 | String |  |  |
+| format | 时间格式化 | String | 小时: `HH`, 分`mm`, 秒`ss` | 'HH:mm:ss' |
+| picker-options | 当前时间日期选择器特有的选项，参考下表 | Object | | {} |
+
+### time-select Options
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| start | 开始时间 | String |  |09:00 |
+| end | 结束时间 | String |  |18:00 |
+| step | 间隔时间 | String |  | 00:30 |
+| minTime | 最小时间，小于该时间的时间段将被禁用 | String |  | 00:00 |
+
+### time-picker Options
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| selectableRange | 可选时间段，例如 `18:30:00 - 20:30:00`，或者传入数组 `['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | String, Array |  |  |
+
diff --git a/examples/docs/tooltip.md b/examples/docs/tooltip.md
new file mode 100644
index 000000000..64ad2f9d5
--- /dev/null
+++ b/examples/docs/tooltip.md
@@ -0,0 +1,128 @@
+## 基础用法
+鼠标 hover 的时候显示,可选择提示出现的位置。
+
+<style>
+  .box {
+    width: 400px;
+
+    .top {
+      text-align: center;
+    }
+
+    .left {
+      float: left;
+      width: 60px;
+    }
+
+    .right {
+      float: right;
+      width: 60px;
+    }
+
+    .bottom {
+      clear: both;
+      text-align: center;
+    }
+
+    .item {
+      margin: 4px;
+    }
+  }
+</style>
+
+<script>
+  module.exports = {
+    data() {
+      return {
+        switch: true
+      }
+    },
+
+    computed: {
+      effect() {
+        return this.switch ? 'dark' : 'light';
+      }
+    }
+  }
+</script>
+
+<el-switch
+  :value.sync="switch"
+  on-text="黑色"
+  off-text="白色"
+  on-color="#1f2d3d"
+  off-color="#ccc">
+</el-switch>
+
+<div class="box">
+  <div class="top">
+    <el-tooltip class="item" :effect="effect" content="Top Left 提示文字" placement="top-start">
+      <el-button>上左</el-button>
+    </el-tooltip>
+    <el-tooltip class="item" :effect="effect" content="Top Center 提示文字" placement="top">
+      <el-button>上边</el-button>
+    </el-tooltip>
+    <el-tooltip class="item" :effect="effect" content="Top Right 提示文字" placement="top-end">
+      <el-button>上右</el-button>
+    </el-tooltip>
+  </div>
+  <div class="left">
+    <el-tooltip class="item" :effect="effect" content="Left Top 提示文字" placement="left-start">
+      <el-button>左上</el-button>
+    </el-tooltip>
+    <el-tooltip class="item" :effect="effect" content="Left Center 提示文字" placement="left">
+      <el-button>左边</el-button>
+    </el-tooltip>
+    <el-tooltip class="item" :effect="effect" content="Left Bottom 提示文字" placement="left-end">
+      <el-button>左下</el-button>
+    </el-tooltip>
+  </div>
+
+  <div class="right">
+    <el-tooltip class="item" :effect="effect" content="Right Top 提示文字" placement="right-start">
+      <el-button>右上</el-button>
+    </el-tooltip>
+    <el-tooltip class="item" :effect="effect" content="Right Center 提示文字" placement="right">
+      <el-button>右边</el-button>
+    </el-tooltip>
+    <el-tooltip class="item" :effect="effect" content="Right Bottom 提示文字" placement="right-end">
+      <el-button>右下</el-button>
+    </el-tooltip>
+  </div>
+  <div class="bottom">
+    <el-tooltip class="item" :effect="effect" content="Bottom Left 提示文字" placement="bottom-start">
+      <el-button>下左</el-button>
+    </el-tooltip>
+    <el-tooltip class="item" :effect="effect" content="Bottom Center 提示文字" placement="bottom">
+      <el-button>下边</el-button>
+    </el-tooltip>
+    <el-tooltip class="item" :effect="effect" content="Bottom Right 提示文字" placement="bottom-end">
+      <el-button>下右</el-button>
+    </el-tooltip>
+  </div>
+</div>
+
+## 适用于不同情景
+
+<div>
+  <el-tooltip content="Top center" placement="top">
+    <el-button>Top center</el-button>
+  </el-tooltip>
+</div>
+
+
+<div>
+  <el-tooltip content="Bottom center" placement="bottom" effect="light">
+    <el-button>Bottom center</el-button>
+  </el-tooltip>
+</div>
+
+## API
+| 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
+|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
+|  effect        |  默认提供的样式  | String            | `dark`, `light`  | dark  |
+|  content        |  显示的内容  | String            |  |  |
+|  placement        |  出现位置  | String           |  `top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end`, `right`, `right-start`, `right-end` |  bottom |
+|  visible        |  初始状态是否可见  | Boolean           |  |  false |
+|  disabled       |  控制是否不可见  | Boolean           |  |  false |
+|  options        | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object            | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | { boundariesElement: 'body' } |
diff --git a/examples/docs/tree.md b/examples/docs/tree.md
new file mode 100644
index 000000000..664c916e4
--- /dev/null
+++ b/examples/docs/tree.md
@@ -0,0 +1,101 @@
+<style>
+  .leaf {
+    width: 20px;
+    background: #ddd;
+  }
+
+  .folder {
+    width: 20px;
+    background: #888;
+  }
+</style>
+
+<script type="text/ecmascript-6">
+  import Vue from 'vue';
+
+  var data = [{
+    label: 'bb',
+    children: [{
+      label: 'b1'
+    }]
+  }, {
+    label: 'cc',
+    children: [{
+      label: 'cc1'
+    }, {
+      label: 'cc2'
+    }]
+  }];
+
+  var regions = [{
+    'name': 'region1'
+  }, {
+    'name': 'region2'
+  }];
+
+  var count = 1;
+
+  var props = {
+    label: 'name',
+    children: 'zones',
+    icon(data, node) {
+      if (node.isLeaf) {
+        return 'el-icon-close';
+      }
+      return 'el-icon-search';
+    }
+  };
+
+  var defaultProps = {
+    children: 'children',
+    label: 'label'
+  };
+
+  export default {
+    methods: {
+      getCheckedNodes() {
+        console.log(this.$refs.tree.getCheckedNodes(true));
+      },
+
+      loadNode(node, resolve) {
+        if (node.level === -1) {
+          return resolve([{ name: 'Root1' }, { name: 'Root2' }]);
+        }
+        var hasChild = Math.random() > 0.5;
+        if (node.level > 4) return resolve([]);
+
+        setTimeout(function() {
+          var data;
+          if (hasChild) {
+            data = [{
+              name: 'zone' + count++
+            }, {
+              name: 'zone' + count++
+            }];
+          } else {
+            data = [];
+          }
+
+          resolve(data);
+        }, 500);
+      }
+    },
+
+    data() {
+      return {
+        data,
+        regions,
+        defaultProps,
+        props
+      };
+    }
+  };
+</script>
+
+## Basic
+
+<el-tree :data="data" :props="defaultProps"></el-tree>
+
+## Have Checkbox
+
+<el-tree :data="regions" :props="props" :load="loadNode" lazy show-checkbox></el-tree>
diff --git a/examples/docs/upload.md b/examples/docs/upload.md
new file mode 100644
index 000000000..939af4eb4
--- /dev/null
+++ b/examples/docs/upload.md
@@ -0,0 +1,118 @@
+<style>
+  .upload-tip {
+    color: #8492a6;
+    font-size: 12px;
+    margin-top: 7px;
+  }
+  .demo-box {
+    margin-bottom: 24px;
+  }
+  .el-draggeer__uploaded-image__btns {
+    margin-top: 45px;
+    color: #fff;
+    font-size: 14px;
+
+    & .btn {
+      display: inline-block;
+
+      & span {
+        opacity: 0;
+        transition: opacity .15s linear;
+      }
+
+      &:not(:first-child) {
+        margin-left: 35px;
+      }
+
+      &:hover span {
+        opacity: 1;
+      }
+    }
+    & i {
+      display: block;
+      font-size: 26px;
+      margin-bottom: 5px;
+    }
+  }
+</style>
+<script>
+  export default {
+    methods: {
+      handleChange(file, fileList, event) {
+        console.log(file, fileList, event);
+      },
+      handleRemove(file, fileList) {
+        console.log(file, fileList);
+      }
+    }
+  }
+</script>
+
+## 基础使用
+
+<div class="demo-box">
+  <el-upload action="http://127.0.0.1:9000/upload" @filechange="handleChange" @fileremove="handleRemove">
+    <el-button size="small" type="primary">点击上传</el-button>
+    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
+  </el-upload>
+</div>
+
+```html
+<el-upload action="http://127.0.0.1:9000/upload" @filechange="handleChange" @fileremove="handleRemove">
+  <el-button size="small" type="primary">点击上传</el-button>
+  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
+</el-upload>
+```
+
+## 拖拽文件上传
+
+<div class="demo-box">
+  <el-upload action="http://127.0.0.1:9000/upload" type="drag" :multiple="true">
+    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
+  </el-upload>
+</div>
+
+```html
+<el-upload action="http://127.0.0.1:9000/upload" type="drag" :multiple="true">
+  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
+</el-upload>
+```
+
+## 图片缩略图模式
+
+上传文件类型限制为只能上传图片，并可展示本地缩略图，该模式暂不支持多选
+
+<div class="demo-box">
+  <el-upload action="http://127.0.0.1:9000/upload" type="drag" mode="image">
+    <div class="el-draggeer__uploaded-image__btns" slot="interact">
+      <span class="btn"><i class="el-icon-share"></i><span>分享图片</span></span>
+      <span class="btn"><i class="el-icon-delete"></i><span>删除</span></span>
+    </div>
+    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
+  </el-upload>
+</div>
+
+```html
+<el-upload action="http://127.0.0.1:9000/upload" type="drag" mode="image">
+  <div class="el-draggeer__uploaded-image__btns" slot="interact">
+    <span class="btn"><i class="el-icon-share"></i><span>分享图片</span></span>
+    <span class="btn"><i class="el-icon-delete"></i><span>删除</span></span>
+  </div>
+  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
+</el-upload>
+```
+
+## API
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| action | 必选参数, 上传的地址 | string | | |
+| headers | 可选参数, 设置上传的请求头部 | object |  |  |
+| multiple | 可选参数, 是否支持多选文件 | boolean | | |
+| file | 可选参数, 上传的文件字段名 | string | | file |
+| withCredentials | 支持发送 cooking 凭证信息 | boolean | | false |
+| showUploadList | 是否显示已上传文件列表 | boolean | | true |
+| type | 上传控件类型 | string | select,drag | select |
+| accept | 可选参数, 接受上传的[文件类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), 拖拽文件上传时不受此参数影响 | string |  |  |
+| filechange | 可选参数, 上传文件改变时的回调 | function(file, fileList, event) |  |  |
+| fileremove | 可选参数, 文件列表移除文件时的回调 | function(file, fileList) |  |  |
+| type | 上传控件类型 | string | select,drag | select |
diff --git a/examples/dom/class.js b/examples/dom/class.js
new file mode 100644
index 000000000..f0dd03dfe
--- /dev/null
+++ b/examples/dom/class.js
@@ -0,0 +1,22 @@
+export const hasClass = function(obj, cls) {
+  return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
+};
+
+export const addClass = function(obj, cls) {
+  if (!hasClass(obj, cls)) obj.className += ' ' + cls;
+};
+
+export const removeClass = function(obj, cls) {
+  if (hasClass(obj, cls)) {
+    const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
+    obj.className = obj.className.replace(reg, ' ');
+  }
+};
+
+export const toggleClass = function(obj, cls) {
+  if (hasClass(obj, cls)) {
+    removeClass(obj, cls);
+  } else {
+    addClass(obj, cls);
+  }
+};
diff --git a/examples/entry.js b/examples/entry.js
new file mode 100644
index 000000000..1e19d6b03
--- /dev/null
+++ b/examples/entry.js
@@ -0,0 +1,26 @@
+import Vue from 'vue';
+import entry from './app';
+import VueRouter from 'vue-router';
+import configRouter from './route.config';
+import Element from 'main/index.js';
+import 'packages/theme-default/src/index.css';
+
+// test Released package
+// import Element from '../lib/index.js';
+// import '../lib/theme-default/index.css';
+
+Vue.use(Element);
+Vue.use(VueRouter);
+
+const router = new VueRouter();
+const app = Vue.extend({
+  template: '<entry></entry>',
+  components: { entry }
+});
+
+configRouter(router);
+router.start(app, 'app');
+
+router.afterEach(() => {
+  document.body.scrollTop = 0;
+});
diff --git a/examples/icon.json b/examples/icon.json
new file mode 100644
index 000000000..a186b92d7
--- /dev/null
+++ b/examples/icon.json
@@ -0,0 +1 @@
+["search","share","setting","circle-cross","warning","information","circle-check","delete","d-arrow-left","d-arrow-right","picture","upload","menu","time","circle-close","arrow-down","arrow-up","arrow-right","arrow-left","close","document","d-caret","date","message","loading","ellipsis","plus","caret-left","caret-right","caret-bottom","edit","caret-top","check","minus","angle-left","angle-right","truck"]
\ No newline at end of file
diff --git a/examples/index.template.html b/examples/index.template.html
new file mode 100644
index 000000000..b97e0f9ef
--- /dev/null
+++ b/examples/index.template.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <title>Element 后台组件</title>
+  </head>
+  <body>
+    <app></app>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/examples/nav.config.json b/examples/nav.config.json
new file mode 100644
index 000000000..cc0386a55
--- /dev/null
+++ b/examples/nav.config.json
@@ -0,0 +1,222 @@
+[
+  {
+    "group": "使用说明",
+    "list": [
+      {
+        "path": "/quickstart",
+        "name": "快速上手"
+      },
+      {
+        "path": "/development",
+        "name": "开发指南"
+      },
+      {
+        "path": "/changelog",
+        "name": "更新日志"
+      }
+    ]
+  },
+  {
+    "group": "设计指南",
+    "list": [
+      {
+        "path": "/menu",
+        "name": "导航",
+        "description": "导航(Navigation) 可以解决用户在访问页面时：在哪里，去哪里，怎么去的问题。一般导航会有「侧栏导航」和「顶部导航」2种类型。"
+      }
+    ]
+  },
+  {
+    "group": "Basic",
+    "list": [
+      {
+        "path": "/button",
+        "name": "按钮 (button)",
+        "title": "Button 按钮",
+        "description": "常用的操作按钮"
+      },
+      {
+        "path": "/icon",
+        "name": "图标 (icon)",
+        "title": "Icon 图标"
+      },
+      {
+        "path": "/tag",
+        "name": "标签 (tag)",
+        "title": "Tag 标签",
+        "description": "Tag 标签"
+      },
+      {
+        "path": "/dialog",
+        "name": "对话框 (dialog)",
+        "title": "Dialog 对话框",
+        "description": "在保留当前页面状态的情况下, 告知用户信息并承载相关操作。"
+      },
+      {
+        "path": "/message-box",
+        "name": "弹框 (message-box)",
+        "title": "message-box 弹框"
+      },
+      {
+        "path": "/popover",
+        "name": "弹出框 (popover)",
+        "title": "popover 弹出框",
+        "description": "收纳具体内容和相关操作, 激活后弹出展现"
+      },
+      {
+        "path": "/tooltip",
+        "name": "文字提示 (tooltip)",
+        "title": "tooltip 文字提示",
+        "description": "优雅地展示文字提示信息"
+      },
+      {
+        "path": "/alert",
+        "name": "警告 (alert)",
+        "title": "alert 警告",
+        "description": "用于页面中展示重要的提示信息"
+      },
+      {
+        "path": "/notification",
+        "name": "通知 (notification)",
+        "title": "notification 通知",
+        "description": "悬浮出现在页面右上角, 显示全局的通知提醒消息"
+      },
+      {
+        "path": "/loading",
+        "name": "加载 (loading)",
+        "title": "loading 加载",
+        "description": "加载数据时显示"
+      }
+    ]
+  },
+  {
+    "group": "Form",
+    "list": [
+      {
+        "path": "/autocomplete",
+        "name": "自动完成 (autocomplete)",
+        "title": "Autocomplete 自动完成"
+      },
+      {
+        "path": "/select",
+        "name": "选择器 (select)",
+        "title": "Select 选择器",
+        "description": "当选项过多时, 使用下拉菜单展示并选择内容"
+      },
+      {
+        "path": "/checkbox",
+        "name": "多选框 (checkbox)",
+        "title": "Checkbox 多选框",
+        "description": "用于在多个可选项中进行多项选择。"
+      },
+      {
+        "path": "/radio",
+        "name": "单选框 (radio)",
+        "title": "Radio 单选框",
+        "description": "用于在多个备选项选中单个选项。"
+      },
+      {
+        "path": "/input",
+        "name": "输入框 (input)",
+        "title": "Input 输入框"
+      },
+      {
+        "path": "/input-number",
+        "name": "计数器 (input-number)",
+        "title": "Input Number 计数器"
+      },
+      {
+        "path": "/switch",
+        "name": "开关 (switch)",
+        "title": "Switch 开关",
+        "description": "用于两种对立状态的切换。"
+      },
+      {
+        "path": "/time-picker",
+        "name": "时间选择器（time-picker）",
+        "title": "时间选择器",
+        "description": "用于选择或输入时间"
+      },
+      {
+        "path": "/date-picker",
+        "name": "日期选择器（date-picker）",
+        "title": "日期选择器",
+        "description": "用于选择或输入时间"
+      },
+      {
+        "path": "/datetime-picker",
+        "name": "日期时间选择器",
+        "title": "日期时间选择器",
+        "description": "用于选择或输入日期时间"
+      },
+      {
+        "path": "/upload",
+        "name": "上传 (upload)",
+        "title": "upload 上传",
+        "description": "文件上传组件"
+      },
+      {
+        "path": "/form",
+        "name": "表单 (form)",
+        "title": "form 表单",
+        "description": "一个多功能的并带有字段验证的表单组件"
+      },
+      {
+        "path": "/slider",
+        "name": "滑块 (slider)",
+        "title": "slider 滑块",
+        "description": "通过拖动滑块在一个固定区间内进行选择"
+      }
+    ]
+  },
+  {
+    "group": "Nav",
+    "list": [
+      {
+        "path": "/tabs",
+        "name": "标签页 (tabs)",
+        "title": "tabs 标签页",
+        "description": "富展现的标签页"
+      },
+      {
+        "path": "/breadcrumb",
+        "name": "面包屑 (breadcrumb)",
+        "title": "breadcrumb 面包屑",
+        "description": ""
+      },
+      {
+        "path": "/dropdown",
+        "name": "下拉菜单 (dropdown)",
+        "title": "Dropdown 下拉菜单"
+      }
+    ]
+  },
+  {
+    "group": "Data",
+    "list": [
+      {
+        "path": "/table",
+        "name": "表格 (table)",
+        "title": "Table 表格",
+        "description": "用于展示多条结构类似的数据, 可对数据进行排序、筛选、对比或其他自定义操作。"
+      },
+      {
+        "path": "/progress",
+        "name": "进度条 (progress)",
+        "title": "progress 进度条",
+        "description": ""
+      },
+      {
+        "path": "/pagination",
+        "name": "分页 (pagination)",
+        "title": "Pagination 分页",
+        "description": "当数据量过多时, 使用分页分解数据"
+      },
+      {
+        "path": "/tree",
+        "name": "tree (tree)",
+        "title": "tree"
+      }
+    ]
+  }
+]
diff --git a/examples/route.config.js b/examples/route.config.js
new file mode 100644
index 000000000..10f78bd4e
--- /dev/null
+++ b/examples/route.config.js
@@ -0,0 +1,40 @@
+import navConfig from './nav.config.json';
+
+const registerRoute = (config) => {
+  let route = {};
+  config.map(nav => nav.list.map(page => {
+    try {
+      route[page.path] = page.path !== '/changelog' ? {
+        component: require(`./docs${page.path}.md`),
+        title: page.title || page.name,
+        description: page.description
+      } : {
+        component: require('../CHANGELOG.md'),
+        title: page.title || page.name,
+        description: page.description
+      };
+    } catch (e) {
+      console.error(e);
+      page.disabled = true;
+    }
+  }));
+
+  return { route, navs: config };
+};
+
+const route = registerRoute(navConfig);
+
+export const navs = route.navs;
+export default function configRouter(router) {
+  router.map(Object.assign({
+    '*': {
+      component: require('./docs/home.md')
+    }
+  }, route.route));
+
+  router.beforeEach(transition => {
+    document.title = transition.to.title || document.title;
+    transition.to.router.app.$broadcast('element.example.reload');
+    transition.next();
+  });
+};
diff --git a/fe.element/appspec.yml b/fe.element/appspec.yml
new file mode 100644
index 000000000..76c138afd
--- /dev/null
+++ b/fe.element/appspec.yml
@@ -0,0 +1,5 @@
+appid: fe.element
+version: 1.0.0
+os: linux
+language: cdnjs
+apptype: web
diff --git a/fe.element_build.yml b/fe.element_build.yml
new file mode 100644
index 000000000..db0e608cc
--- /dev/null
+++ b/fe.element_build.yml
@@ -0,0 +1,11 @@
+language: fe.cooking
+version: 0.5.4
+script:
+  - make deploy
+outfile:
+  - ./fe.element
+notifications:
+  email:
+    - haiping.zeng@ele.me
+branch:
+  master: alpha_stable
diff --git a/lerna.json b/lerna.json
new file mode 100644
index 000000000..e87c3ad87
--- /dev/null
+++ b/lerna.json
@@ -0,0 +1,10 @@
+{
+  "lerna": "2.0.0-beta.18",
+  "version": "independent",
+  "publishConfig": {
+    "ignore": [
+      "node_modules",
+      "log.*"
+    ]
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 000000000..0bee6c402
--- /dev/null
+++ b/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "element-ui",
+  "version": "0.1.9",
+  "description": "A Component Library for Vue.js.",
+  "main": "lib/index.js",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "dev": "node bin/build-entry.js && cooking watch -c scripts/cooking.demo.js",
+    "dist": "rm -rf lib && cooking build -p && cooking build -c scripts/cooking.component.js -p",
+    "deploy": "cooking build -c scripts/cooking.demo.js -p",
+    "gh-docs": "cooking build -c scripts/cooking.demo.js -p && gh-pages -d examples/element-ui --remote origin",
+    "prepublish": "make dist"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:eleme/element-ui.git"
+  },
+  "keywords": [
+    "eleme",
+    "vue",
+    "components"
+  ],
+  "bugs": {
+    "url": "https://github.com/eleme/element-ui/issues"
+  },
+  "dependencies": {
+    "object-assign": "^4.1.0"
+  },
+  "devDependencies": {
+    "file-save": "^0.2.0",
+    "gh-pages": "^0.11.0",
+    "highlight.js": "^9.3.0",
+    "json-templater": "^1.0.4",
+    "lerna": "2.0.0-beta.18",
+    "markdown-it-toc-and-anchor": "^4.1.1",
+    "oui-dom-events": "^0.2.1",
+    "postcss": "^5.0.21",
+    "purecss": "^0.6.0",
+    "q": "^1.4.1",
+    "uppercamelcase": "^1.1.0",
+    "vue": "^1.0.26",
+    "vue-loader": "^8.5.3",
+    "vue-markdown-loader": "^0.4.0",
+    "vue-popup": "^0.1.8",
+    "vue-router": "^0.7.13"
+  }
+}
diff --git a/packages/alert/cooking.conf.js b/packages/alert/cooking.conf.js
new file mode 100644
index 000000000..4adcd4e0e
--- /dev/null
+++ b/packages/alert/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElAlert',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/alert/index.js b/packages/alert/index.js
new file mode 100644
index 000000000..0242beae3
--- /dev/null
+++ b/packages/alert/index.js
@@ -0,0 +1,7 @@
+const Alert = require('./src/main');
+
+Alert.install = function(Vue) {
+  Vue.component(Alert.name, Alert);
+};
+
+module.exports = Alert;
diff --git a/packages/alert/package.json b/packages/alert/package.json
new file mode 100644
index 000000000..cbaea01de
--- /dev/null
+++ b/packages/alert/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "el-alert",
+  "version": "0.0.0",
+  "description": "A alert component for Vue.js.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/alert",
+  "author": "elemefe",
+  "license": "MIT",
+  "dependencies": {}
+}
diff --git a/packages/alert/src/main.vue b/packages/alert/src/main.vue
new file mode 100644
index 000000000..8f3db0aa2
--- /dev/null
+++ b/packages/alert/src/main.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="el-alert el-alert--{{ type }}" transition="el-alert-fade" v-show="visible">
+    <i class="el-alert__icon {{ iconClass }} {{ isBigIcon }}" v-if="showIcon"></i>
+    <div class="el-alert__content">
+      <span class="el-alert__title {{ isBoldTitle }}" v-if="title">{{ title }}</span>
+      <p class="el-alert__description" v-if="description">{{ description }}</p>
+      <i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
+    </div>
+  </div>
+</template>
+
+<script type="text/babel">
+  const TYPE_CLASSES_MAP = {
+    'success': 'el-icon-circle-check',
+    'warning': 'el-icon-warning',
+    'error': 'el-icon-circle-cross'
+  };
+  export default {
+    name: 'el-alert',
+
+    props: {
+      title: {
+        type: String,
+        default: '',
+        required: true
+      },
+      description: {
+        type: String,
+        default: ''
+      },
+      type: {
+        type: String,
+        default: 'info'
+      },
+      closable: {
+        type: Boolean,
+        default: true
+      },
+      closeText: {
+        type: String,
+        default: ''
+      },
+      showIcon: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    data() {
+      return {
+        visible: true
+      };
+    },
+
+    methods: {
+      close() {
+        this.visible = false;
+        this.$emit('onClose');
+      }
+    },
+
+    computed: {
+      iconClass() {
+        return TYPE_CLASSES_MAP[this.type] || 'el-icon-information';
+      },
+
+      isBigIcon() {
+        return this.description ? 'is-big' : '';
+      },
+
+      isBoldTitle() {
+        return this.description ? 'is-bold' : '';
+      }
+    }
+  };
+</script>
diff --git a/packages/autocomplete/cooking.conf.js b/packages/autocomplete/cooking.conf.js
new file mode 100644
index 000000000..d9e2fb03f
--- /dev/null
+++ b/packages/autocomplete/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElAutocomplete',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/autocomplete/index.js b/packages/autocomplete/index.js
new file mode 100644
index 000000000..1f923d5da
--- /dev/null
+++ b/packages/autocomplete/index.js
@@ -0,0 +1,7 @@
+const ElAutocomplete = require('./src/autocomplete');
+
+ElAutocomplete.install = function(Vue) {
+  Vue.component(ElAutocomplete.name, ElAutocomplete);
+};
+
+module.exports = ElAutocomplete;
diff --git a/packages/autocomplete/package.json b/packages/autocomplete/package.json
new file mode 100644
index 000000000..46542b179
--- /dev/null
+++ b/packages/autocomplete/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "el-autocomplete",
+  "version": "1.0.0",
+  "description": "A autocomplete component for Vue.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/autocomplete",
+  "author": "haiping.zeng<haiping.zeng@ele.me>",
+  "license": "MIT",
+  "dependencies": {
+  }
+}
diff --git a/packages/autocomplete/src/autocomplete.vue b/packages/autocomplete/src/autocomplete.vue
new file mode 100644
index 000000000..7c5374cff
--- /dev/null
+++ b/packages/autocomplete/src/autocomplete.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="el-autocomplete">
+    <el-input
+      :value="value"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :name = 'name'
+      @onchange="handleChange"
+      @onfocus="handleFocus()"
+      @onblur="handleBlur()"
+      @keydown.up="highlight(highlightedIndex - 1)"
+      @keydown.down="highlight(highlightedIndex + 1)"
+      @keydown.enter="select(highlightedIndex)"
+    ></el-input>
+    <ul
+      v-show="showSuggestions && !loading && suggestions.length > 0"
+      class="el-autocomplete__suggestions"
+      :class="[partial ? partial.name : '']"
+      transition="md-fade-bottom"
+      v-el:suggestions
+    >
+      <li :class="{'highlighted': highlightedIndex === $index}" @click="select($index)" v-for="item in suggestions">{{item.display}}</li>
+    </ul>
+    <div
+      v-show="showSuggestions && loading"
+      class="el-autocomplete__suggestions is-loading"
+    >
+      <i class="el-icon-loading"></i>
+    </div>
+  </div>
+</template>
+<script>
+  import ElInput from 'packages/input/index.js';
+
+  export default {
+    name: 'ElAutocomplete',
+
+    components: {
+      ElInput
+    },
+    props: {
+      placeholder: String,
+      disabled: Boolean,
+      name: String,
+      suggestions: [Array, Object],
+      value: String,
+      showOnUpDown: Boolean,
+      partial: Object
+    },
+    data() {
+      return {
+        showSuggestions: false,
+        inputFocusing: false,
+        loading: false,
+        highlightedIndex: -1
+      };
+    },
+    created() {
+      if (this.partial) {
+        this.$options.template = this.$options.template.replace(/(item\sin\ssuggestions">)(?:.|\s)*?(<)/, '$1' + this.partial.template + '$2');
+      }
+    },
+    watch: {
+      'suggestions'(val) {
+        if (val && val.then) {
+          this.loading = true;
+          this.suggestions.then((res) => {
+            this.loading = false;
+            this.suggestions = res;
+          });
+        }
+      }
+    },
+    methods: {
+      handleChange(value) {
+        this.value = value;
+        this.showSuggestions = true;
+      },
+      handleFocus() {
+        if (!this.showOnUpDown) {
+          this.showSuggestions = true;
+        }
+      },
+      handleBlur() {
+        this.showSuggestions = false;
+      },
+      select(index) {
+        if (this.suggestions && this.suggestions[index]) {
+          this.value = this.suggestions[index].value;
+          this.$nextTick(() => {
+            this.showSuggestions = false;
+          });
+        }
+      },
+      getSuggestionElement(index) {
+        if (!this.suggestions || !this.suggestions[index]) {
+          return null;
+        } else {
+          return this.$els.suggestions.children[index];
+        }
+      },
+      highlight(index) {
+        if (index < 0) {
+          index = 0;
+        } else if (index >= this.suggestions.length) {
+          index = this.suggestions.length - 1;
+        }
+
+        var elSelect = this.getSuggestionElement(index);
+        var elSuggestions = this.$els.suggestions;
+        var scrollTop = elSuggestions.scrollTop;
+        var offsetTop = elSelect.offsetTop;
+
+        if (offsetTop > (scrollTop + elSuggestions.clientHeight - 12)) {
+          elSuggestions.scrollTop += elSelect.scrollHeight;
+        }
+        if (offsetTop < scrollTop - 12) {
+          elSuggestions.scrollTop -= elSelect.scrollHeight;
+        }
+
+        this.highlightedIndex = index;
+
+        if (this.showOnUpDown) {
+          this.showSuggestions = true;
+        }
+      }
+    }
+  };
+</script>
diff --git a/packages/breadcrumb-item/index.js b/packages/breadcrumb-item/index.js
new file mode 100644
index 000000000..17263c0c3
--- /dev/null
+++ b/packages/breadcrumb-item/index.js
@@ -0,0 +1,7 @@
+const ElBreadcrumbItem = require('../breadcrumb/src/breadcrumb-item');
+
+ElBreadcrumbItem.install = function(Vue) {
+  Vue.component(ElBreadcrumbItem.name, ElBreadcrumbItem);
+};
+
+module.exports = ElBreadcrumbItem;
diff --git a/packages/breadcrumb/cooking.conf.js b/packages/breadcrumb/cooking.conf.js
new file mode 100644
index 000000000..283dc2251
--- /dev/null
+++ b/packages/breadcrumb/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElBreadcrumb',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/breadcrumb/index.js b/packages/breadcrumb/index.js
new file mode 100644
index 000000000..18b86ab4a
--- /dev/null
+++ b/packages/breadcrumb/index.js
@@ -0,0 +1,7 @@
+const ElBreadcrumb = require('./src/breadcrumb');
+
+ElBreadcrumb.install = function(Vue) {
+  Vue.component(ElBreadcrumb.name, ElBreadcrumb);
+};
+
+module.exports = ElBreadcrumb;
diff --git a/packages/breadcrumb/package.json b/packages/breadcrumb/package.json
new file mode 100644
index 000000000..eb67f32c4
--- /dev/null
+++ b/packages/breadcrumb/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "el-breadcrumb",
+  "version": "1.0.0",
+  "description": "A breadcrumb component for Vue.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/breadcrumb",
+  "author": "haiping.zeng<haiping.zeng@ele.me>",
+  "license": "MIT",
+  "dependencies": {
+  }
+}
diff --git a/packages/breadcrumb/src/breadcrumb-item.vue b/packages/breadcrumb/src/breadcrumb-item.vue
new file mode 100644
index 000000000..dc2fe77c7
--- /dev/null
+++ b/packages/breadcrumb/src/breadcrumb-item.vue
@@ -0,0 +1,24 @@
+<template>
+  <span class="el-breadcrumb__item">
+    <span class="el-breadcrumb__item__text"><slot></slot></span><span class="el-breadcrumb__separator">{{separator}}</span>
+  </span>
+</template>
+<script>
+  export default {
+    name: 'ElBreadcrumbItem',
+
+    props: {
+    },
+    data() {
+      return {
+        separator: ''
+      };
+    },
+    methods: {
+
+    },
+    ready() {
+      this.separator = this.$parent.separator;
+    }
+  };
+</script>
diff --git a/packages/breadcrumb/src/breadcrumb.vue b/packages/breadcrumb/src/breadcrumb.vue
new file mode 100644
index 000000000..bca2f50ff
--- /dev/null
+++ b/packages/breadcrumb/src/breadcrumb.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="el-breadcrumb">
+    <slot></slot>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'ElBreadcrumb',
+
+    props: {
+      separator: {
+        type: String,
+        default: '/'
+      }
+    },
+    data() {
+      return {
+
+      };
+    },
+    methods: {
+
+    },
+    ready() {
+    }
+  };
+</script>
diff --git a/packages/button-group/index.js b/packages/button-group/index.js
new file mode 100644
index 000000000..40a81a4fa
--- /dev/null
+++ b/packages/button-group/index.js
@@ -0,0 +1,7 @@
+const ElButtonGroup = require('../button/src/button-group');
+
+ElButtonGroup.install = function(Vue) {
+  Vue.component(ElButtonGroup.name, ElButtonGroup);
+};
+
+module.exports = ElButtonGroup;
diff --git a/packages/button/.npmignore b/packages/button/.npmignore
new file mode 100644
index 000000000..87ae846ae
--- /dev/null
+++ b/packages/button/.npmignore
@@ -0,0 +1,3 @@
+node_modules/
+npm-debug.log
+npm-debug.log.*
diff --git a/packages/button/cooking.conf.js b/packages/button/cooking.conf.js
new file mode 100644
index 000000000..46dc548c8
--- /dev/null
+++ b/packages/button/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElButton',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/button/index.js b/packages/button/index.js
new file mode 100644
index 000000000..d71e7b3d6
--- /dev/null
+++ b/packages/button/index.js
@@ -0,0 +1,9 @@
+const ElButton = require('./src/button');
+const ElButtonGroup = require('./src/button-group');
+
+ElButton.install = function(Vue) {
+  Vue.component(ElButton.name, ElButton);
+  Vue.component(ElButtonGroup.name, ElButtonGroup);
+};
+
+module.exports = ElButton;
diff --git a/packages/button/package.json b/packages/button/package.json
new file mode 100644
index 000000000..30082a757
--- /dev/null
+++ b/packages/button/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "el-button",
+  "version": "1.0.0",
+  "description": "A button component for Vue.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/button",
+  "author": "haiping.zeng<haiping.zeng@ele.me>",
+  "license": "MIT",
+  "dependencies": {
+  }
+}
diff --git a/packages/button/src/button-group.vue b/packages/button/src/button-group.vue
new file mode 100644
index 000000000..e562986a5
--- /dev/null
+++ b/packages/button/src/button-group.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="el-button-group">
+    <slot></slot>
+  </div>
+</template>
+<script>
+  /**
+   * button
+   * @module components/basic/menu
+   * @desc 用于按钮组
+   * @param {string} label - 名称
+   */
+  export default {
+    name: 'ElButtonGroup'
+  };
+</script>
diff --git a/packages/button/src/button.vue b/packages/button/src/button.vue
new file mode 100644
index 000000000..6a6022014
--- /dev/null
+++ b/packages/button/src/button.vue
@@ -0,0 +1,49 @@
+<template>
+  <button :disabled="disabled" class="el-button"
+    :class="[
+      type ? 'el-button-' + type : '',
+      size ? 'el-button-' + size : '',
+      {
+        'is-disabled': disabled,
+        'is-loading': loading,
+        'is-plain': plain
+      }
+    ]"
+  >
+    <i class="el-icon-loading" v-if="loading"></i><i :class="'el-icon-' + icon" v-if="icon && !loading"></i><span v-if="_slotContents && _slotContents.default">
+      <slot></slot>
+    </span>
+  </button>
+</template>
+<script>
+  /**
+   * button
+   */
+  export default {
+    name: 'ElButton',
+
+    props: {
+      type: {
+        type: String,
+        default: 'default'
+      },
+      size: String,
+      icon: {
+        type: String,
+        default: ''
+      },
+      loading: {
+        type: Boolean,
+        default: false
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      plain: {
+        type: Boolean,
+        default: false
+      }
+    }
+  };
+</script>
diff --git a/packages/cascader/README.md b/packages/cascader/README.md
new file mode 100644
index 000000000..19014cd4b
--- /dev/null
+++ b/packages/cascader/README.md
@@ -0,0 +1,50 @@
+# el-cascader
+> A el-cascader component for Vue.js.
+
+## Installation
+```shell
+npm i el-cascader -D
+```
+
+## Usage
+```javascript
+import Vue from 'vue'
+import ElCascader from 'el-cascader'
+import 'theme-default/dist/cascader.css'
+
+Vue.use(ElCascader)
+```
+
+or
+
+```javascript
+import Vue from 'vue'
+import { ElCascader } from 'el-cascader'
+
+Vue.component('el-cascader', ElCascader)
+```
+
+
+## Options
+
+### el-cascader
+
+| 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
+|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
+|model| 绑定值| string | | |
+|placeholder| 占位符| string | | | |
+
+
+## Development
+```shell
+make dev
+
+## test
+make test
+
+## build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)
diff --git a/packages/cascader/cooking.conf.js b/packages/cascader/cooking.conf.js
new file mode 100644
index 000000000..6f6df4d40
--- /dev/null
+++ b/packages/cascader/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElCascader',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/cascader/index.js b/packages/cascader/index.js
new file mode 100644
index 000000000..f601f4ad3
--- /dev/null
+++ b/packages/cascader/index.js
@@ -0,0 +1,7 @@
+const ElCascader = require('./src/cascader');
+
+ElCascader.install = function(Vue) {
+  Vue.component(ElCascader.name, ElCascader);
+};
+
+module.exports = ElCascader;
diff --git a/packages/cascader/package.json b/packages/cascader/package.json
new file mode 100644
index 000000000..4e713caaa
--- /dev/null
+++ b/packages/cascader/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "el-cascader",
+  "version": "1.0.1",
+  "description": "A cascader component for Vue.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/cascader",
+  "author": "qingwei-li<qingwei.li@ele.me>",
+  "license": "MIT",
+  "dependencies": {
+    "object-equal": "^1.0.0",
+    "vue-clickoutside": "0.0.4"
+  }
+}
diff --git a/packages/cascader/src/cascader.vue b/packages/cascader/src/cascader.vue
new file mode 100644
index 000000000..a3a106002
--- /dev/null
+++ b/packages/cascader/src/cascader.vue
@@ -0,0 +1,91 @@
+<script>
+  import ElInput from 'packages/input/index.js';
+  import ElDropdown from './dropdown.vue';
+
+  /**
+   * ElCascader
+   * @module components/basic/cascader
+   * @desc 级联下拉选择
+   * @param {string} model - 绑定值
+   * @param {string} [placeholder] - 占位内容
+   */
+  export default {
+    name: 'ElCascader',
+
+    props: {
+      model: {
+        required: true,
+        type: String
+      },
+      placeholder: String
+    },
+
+    directives: {
+      ElementClickoutside: require('vue-clickoutside')
+    },
+
+    data() {
+      return {
+        show: false,
+        data: [],
+        menus: []
+      };
+    },
+
+    compiled() {
+      this.data.push(this.menus);
+    },
+
+    methods: {
+      handleSelected(selected, index) {
+        const nextIndex = index + 1;
+        let removeIndex = nextIndex;
+
+        if (selected.hasOwnProperty('submenu')) {
+          this.data.$set(nextIndex, selected.submenu);
+          removeIndex++;
+        }
+
+        this.data = this.data.slice(0, removeIndex);
+      }
+    },
+
+    components: {
+      ElInput,
+      ElDropdown
+    }
+  };
+</script>
+
+<template>
+  <div
+    class="element-cascader"
+    v-element-clickoutside="show = false">
+
+    <el-input
+      readonly
+      :value.sync="model"
+      @click="show = !show"
+      :placeholder="placeholder">
+    </el-input>
+
+    <div
+      v-show="show"
+      class="element-cascader__dropdown">
+      <div class="element-cascader__wrap">
+        <el-dropdown
+          class="element-cascader__menu"
+          v-ref:dropdown
+          :model.sync="model"
+          :data="list"
+          :index="$index"
+          trigger="hover"
+          v-for="list in data"
+          @change="handleSelected">
+        </el-dropdown>
+      </div>
+    </div>
+
+    <slot></slot>
+  </div>
+</template>
diff --git a/packages/cascader/src/dropdown.vue b/packages/cascader/src/dropdown.vue
new file mode 100644
index 000000000..f11c49f53
--- /dev/null
+++ b/packages/cascader/src/dropdown.vue
@@ -0,0 +1,109 @@
+<script>
+  import isEqual from 'object-equal';
+
+  /**
+   * dropdown
+   * @module components/basic/dropdown
+   * @desc 级联选择下拉菜单
+   * @param {object[]} data - 基本数据
+   * @param {string|string[]} [model] - 绑定值，需双向绑定
+   * @param {number} [index] - 当前组件的索引
+   * @param {string} [trigger=click] - 触发方式，可选'click', 'hover'
+   * @param {boolean} [allow-arrow=false] - 是否显示箭头
+   * @param {function} [change] - 选中后的回调函数
+   */
+  module.exports = {
+    name: 'ElDropdown',
+
+    props: {
+      data: {
+        default() {
+          return [];
+        },
+        required: true
+      },
+      model: {
+        default() {
+          return [];
+        },
+        twoWay: true
+      },
+      index: Number,
+      trigger: {
+        type: String,
+        default: 'click',
+        validator(value) {
+          return ['click', 'hover'].indexOf(value) > -1;
+        }
+      }
+    },
+
+    data() {
+      return {
+        cache: {}
+      };
+    },
+
+    watch: {
+      model(value) {
+        if (!value) {
+          this.cache = '';
+        }
+      }
+    },
+
+    methods: {
+      handleSelected(trigger, data, pid, id) {
+        let cache;
+
+        if (trigger === 'click' && !data.hasOwnProperty('submenu')) {
+          this.$parent.show = false;
+        }
+
+        if (data.disabled || trigger !== this.trigger) {
+          return;
+        }
+        // 缓存结果
+        cache = { pid: pid, id: id };
+        if (isEqual(cache, this.cache)) {
+          return;
+        }
+        this.cache = cache;
+
+        // 返回结果，如果需要返回完整数据（每一层的数据）需要 model 为数组类型且父组件
+        // 设置了 completed 属性
+        if (this.$parent.completed) {
+          if (!Array.isArray(this.model)) {
+            this.model = [];
+          }
+
+          this.model.$set(pid, data.label);
+          this.model = this.model.slice(0, pid + 1);
+        } else {
+          this.model = data.label;
+        }
+
+        this.$nextTick(() => this.$dispatch('change', data, pid));
+      }
+    }
+  };
+</script>
+
+<template>
+  <div class="element-dropdown">
+    <ul class="element-dropdown__list">
+      <li
+        v-for="item in data"
+        class="element-option element-option--arrow"
+        :class="{
+          'is-disabled': item.disabled,
+          'is-selected': cache.pid === index && cache.id === $index,
+          'is-last': !item.hasOwnProperty('submenu')
+        }"
+        @click="handleSelected('click', item, index, $index)"
+        @mouseover="handleSelected('hover', item, index, $index)">
+        <span v-text="item.label"></span>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/packages/cascader/src/menu.vue b/packages/cascader/src/menu.vue
new file mode 100644
index 000000000..d8b9b7c64
--- /dev/null
+++ b/packages/cascader/src/menu.vue
@@ -0,0 +1,35 @@
+<script>
+  /**
+   * menu
+   * @module components/basic/menu
+   * @desc 用于 dropdown 中的菜单
+   * @param {string} label - 名称
+   */
+  export default {
+    name: 'ElMenu',
+
+    props: {
+      label: String,
+      disabled: Boolean
+    },
+
+    compiled() {
+      const parent = this.$parent;
+      let menu = {
+        label: this.label,
+        disabled: this.disabled
+      };
+
+      if (this.submenu) {
+        menu.submenu = this.submenu;
+      }
+
+      if (parent.$options.name !== this.name && parent.hasOwnProperty('menus')) {
+        parent.menus = parent.menus.concat(menu);
+      } else {
+        parent.submenu = (parent.submenu || []).concat(menu);
+      }
+
+    }
+  };
+</script>
\ No newline at end of file
diff --git a/packages/checkbox-group/index.js b/packages/checkbox-group/index.js
new file mode 100644
index 000000000..85c120a81
--- /dev/null
+++ b/packages/checkbox-group/index.js
@@ -0,0 +1,7 @@
+const ElCheckboxGroup = require('../checkbox/src/checkbox-group.vue');
+
+ElCheckboxGroup.install = function(Vue) {
+  Vue.component(ElCheckboxGroup.name, ElCheckboxGroup);
+};
+
+module.exports = ElCheckboxGroup;
diff --git a/packages/checkbox/README.md b/packages/checkbox/README.md
new file mode 100644
index 000000000..58b8ffdf4
--- /dev/null
+++ b/packages/checkbox/README.md
@@ -0,0 +1,51 @@
+# el-checkbox
+> A el-checkbox component for Vue.js.
+
+## Demo
+http://element-component.github.io/el-checkbox
+
+## Installation
+```shell
+npm i el-checkbox -D
+```
+
+## Usage
+```javascript
+import Vue from 'vue'
+import ElCheckbox from 'el-checkbox'
+import 'element-theme-default/dist/checkbox.css'
+
+Vue.use(ElCheckbox)
+```
+
+or
+
+```javascript
+import Vue from 'vue'
+import { ElCheckbox } from 'el-checkbox'
+
+Vue.component('el-checkbox', ElCheckbox)
+```
+
+
+## Options
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| model     | 绑定值   | string[]  |               |         |
+| value     | 真实值   | string    |               |         |
+| label     | 显示值，不填则显示 value   | string    |               |         |
+| disabled  | 禁用    | boolean   | true, false   | false   |
+
+## Development
+```shell
+make dev
+
+## test
+make test
+
+## build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)
diff --git a/packages/checkbox/cooking.conf.js b/packages/checkbox/cooking.conf.js
new file mode 100644
index 000000000..04758b042
--- /dev/null
+++ b/packages/checkbox/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElCheckbox',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/checkbox/index.js b/packages/checkbox/index.js
new file mode 100644
index 000000000..ef523ea72
--- /dev/null
+++ b/packages/checkbox/index.js
@@ -0,0 +1,8 @@
+const ElCheckbox = require('./src/checkbox');
+
+ElCheckbox.install = function(Vue) {
+  Vue.component('el-checkbox', ElCheckbox);
+};
+
+module.exports = ElCheckbox;
+
diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json
new file mode 100644
index 000000000..73bcfaad6
--- /dev/null
+++ b/packages/checkbox/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "el-checkbox",
+  "version": "1.0.2",
+  "description": "A checkbox component for Vue.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/checkbox",
+  "author": "haiping.zeng@ele.me",
+  "license": "MIT",
+  "dependencies": {}
+}
diff --git a/packages/checkbox/src/checkbox-group.vue b/packages/checkbox/src/checkbox-group.vue
new file mode 100644
index 000000000..a88ae5535
--- /dev/null
+++ b/packages/checkbox/src/checkbox-group.vue
@@ -0,0 +1,27 @@
+<script>
+  import emitter from 'main/mixins/emitter';
+
+  export default {
+    name: 'ElCheckboxGroup',
+
+    mixins: [emitter],
+
+    props: {
+      value: {
+        default: '',
+        required: true
+      }
+    },
+    watch: {
+      value(value) {
+        this.dispatch('form-item', 'el.form.change', value);
+      }
+    }
+  };
+</script>
+
+<template>
+  <div class="el-checkbox-group">
+    <slot></slot>
+  </div>
+</template>
diff --git a/packages/checkbox/src/checkbox.vue b/packages/checkbox/src/checkbox.vue
new file mode 100644
index 000000000..bfb290150
--- /dev/null
+++ b/packages/checkbox/src/checkbox.vue
@@ -0,0 +1,129 @@
+<template>
+  <label class="el-checkbox">
+    <span class="el-checkbox__input">
+      <span class="el-checkbox__inner"
+        :class="{
+          'is-disabled': isLimit || disabled,
+          'is-checked': checked,
+          'is-indeterminate': indeterminate,
+          'is-focus': focus
+        }"
+      ></span>
+      <input
+        v-if="trueLabel || falseLabel"
+        class="el-checkbox__original"
+        :true-value="trueLabel"
+        :false-value="falseLabel"
+        v-model="_value"
+        type="checkbox"
+        @change="$emit('on-change', checked)"
+        @focus="focus = true"
+        @blur="focus = false"
+        :disabled="isLimit || disabled"
+        v-el: checkbox>
+      <input
+        v-else
+        class="el-checkbox__original"
+        :value="label"
+        v-model="_value"
+        @focus="focus = true"
+        @blur="focus = false"
+        type="checkbox"
+        @change="$emit('on-change', checked)"
+        :disabled="isLimit || disabled">
+    </span>
+    <span class="el-checkbox__label">
+      <slot></slot>
+      <template v-if="!_slotContents">{{label}}</template>
+    </span>
+  </label>
+</template>
+<script>
+  /**
+   * checkbox
+   * @module components/basic/checkbox
+   * @desc 多选按钮
+   * @param {string[]} value - 绑定值
+   * @param {string} value - 真实值
+   * @param {string} [label] - 显示值
+   * @param {boolean} [disabled=false] - 是否禁用
+   *
+   * @example
+   * <el-checkbox :value.sync="data" value="Jack"></el-checkbox>
+   * <el-checkbox :value.sync="data" value="John"></el-checkbox>
+   * <el-checkbox :value.sync="data" value="Mike" disabled></el-checkbox>
+   */
+  export default {
+    name: 'ElCheckbox',
+
+    props: {
+      value: {
+        type: [Array, Boolean, String]
+      },
+      label: {
+        type: String
+      },
+      indeterminate: Boolean,
+      disabled: Boolean,
+      trueLabel: {
+        default: ''
+      },
+      falseLabel: {
+        default: ''
+      }
+    },
+
+    computed: {
+      _value: {
+        get() {
+          return this.value !== undefined ? this.value : this.$parent.value;
+        },
+        set(newValue) {
+          if (this.value !== undefined) {
+            this.value = newValue;
+          } else {
+            this.$parent.value = newValue;
+          }
+        }
+      },
+      checked() {
+        var type = Object.prototype.toString.call(this._value);
+
+        if (type === '[object Boolean]') {
+          return this._value;
+        } else if (type === '[object Array]') {
+          return this._value.indexOf(this.label) > -1;
+        } else if (type === '[object String]') {
+          return this._value === this.trueLabel;
+        }
+      }
+    },
+
+    data() {
+      return {
+        isLimit: false,
+        focus: false
+      };
+    },
+
+    events: {
+      ['element.checkbox.disabled']() {
+        if (this.checked) {
+          return;
+        }
+
+        this.isLimit = true;
+      },
+
+      ['element.checkbox.enabled']() {
+        this.isLimit = false;
+      }
+    },
+
+    watch: {
+      checked(sure) {
+        this.$dispatch('element.checkbox', sure);
+      }
+    }
+  };
+</script>
diff --git a/packages/col/cooking.conf.js b/packages/col/cooking.conf.js
new file mode 100644
index 000000000..5cc8ca2af
--- /dev/null
+++ b/packages/col/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElCol',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/col/index.js b/packages/col/index.js
new file mode 100644
index 000000000..ee09e61ad
--- /dev/null
+++ b/packages/col/index.js
@@ -0,0 +1,8 @@
+const ElCol = require('./src/col');
+
+ElCol.install = function(Vue) {
+  Vue.component('el-col', ElCol);
+};
+
+module.exports = ElCol;
+
diff --git a/packages/col/package.json b/packages/col/package.json
new file mode 100644
index 000000000..b4d8b251a
--- /dev/null
+++ b/packages/col/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "el-col",
+  "version": "1.0.0",
+  "description": "A row component for Vue.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/col",
+  "author": "haiping.zeng@ele.me",
+  "license": "MIT",
+  "dependencies": {}
+}
diff --git a/packages/col/src/col.vue b/packages/col/src/col.vue
new file mode 100644
index 000000000..8a38c60e2
--- /dev/null
+++ b/packages/col/src/col.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="el-col"
+    :class="[
+      'el-col-' + span,
+      offset ? 'el-col-offset-' + offset : '',
+      pull ? 'el-col-pull-' + pull : '',
+      push ? 'el-col-push-' + push : ''
+    ]"
+    v-bind:style="style"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'ElCol',
+
+    props: {
+      span: {
+        type: Number,
+        required: true
+      },
+      offset: {
+        type: Number
+      },
+      pull: {
+        type: Number
+      },
+      push: {
+        type: Number
+      }
+    },
+
+    computed: {
+      gutter() {
+        return this.$parent.gutter;
+      },
+      style() {
+        var ret = {};
+
+        if (this.gutter) {
+          ret.paddingLeft = this.gutter / 2 + 'px';
+          ret.paddingRight = ret.paddingLeft;
+        }
+
+        return ret;
+      }
+    },
+
+    data() {
+      return {
+      };
+    }
+  };
+</script>
diff --git a/packages/date-picker/README.md b/packages/date-picker/README.md
new file mode 100644
index 000000000..e05438cc9
--- /dev/null
+++ b/packages/date-picker/README.md
@@ -0,0 +1,33 @@
+# __component_name__
+
+# Screenshots
+
+# Demo
+
+# Installation
+>
+
+# Usage
+```javascript
+
+```
+
+# Options
+
+|     name    | description |     type    |   default   |
+|-------------|-------------|-------------|-------------|
+|             |             |             |             |
+
+# Development
+```shell
+make dev
+
+# test
+make test
+
+# build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)
diff --git a/packages/date-picker/cooking.conf.js b/packages/date-picker/cooking.conf.js
new file mode 100644
index 000000000..860ef0731
--- /dev/null
+++ b/packages/date-picker/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, '_index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElDatePicker',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/date-picker/index.js b/packages/date-picker/index.js
new file mode 100644
index 000000000..caa5b7fb6
--- /dev/null
+++ b/packages/date-picker/index.js
@@ -0,0 +1,2 @@
+import Picker from '../date-picker/src/picker/date-picker';
+module.exports = Picker;
diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
new file mode 100644
index 000000000..d863212b9
--- /dev/null
+++ b/packages/date-picker/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "el-datepicker",
+  "version": "1.0.0",
+  "description": "A datepicker component for Vue.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/datepicker",
+  "author": "long.zhang@ele.me",
+  "license": "MIT",
+  "dependencies": {
+    "wind-dom": "0.0.3",
+    "vue-clickoutside": "*"
+  },
+  "devDependencies": {
+    "vue": "^1.0.0"
+  }
+}
diff --git a/packages/date-picker/src/basic/date-table.vue b/packages/date-picker/src/basic/date-table.vue
new file mode 100644
index 000000000..de4a0cf13
--- /dev/null
+++ b/packages/date-picker/src/basic/date-table.vue
@@ -0,0 +1,434 @@
+<template>
+  <table
+    cellspacing="0"
+    cellpadding="0"
+    class="el-date-table"
+    @click="handleClick"
+    @mousemove="handleMouseMove"
+    :class="{ 'is-week-mode': selectionMode === 'week' }">
+    <tbody>
+    <tr>
+      <th v-if="showWeekNumber">{{ $t('datepicker.week') }}</th>
+      <th>{{ $t('datepicker.weeks.sun') }}</th>
+      <th>{{ $t('datepicker.weeks.mon') }}</th>
+      <th>{{ $t('datepicker.weeks.tue') }}</th>
+      <th>{{ $t('datepicker.weeks.wed') }}</th>
+      <th>{{ $t('datepicker.weeks.thu') }}</th>
+      <th>{{ $t('datepicker.weeks.fri') }}</th>
+      <th>{{ $t('datepicker.weeks.sat') }}</th>
+    </tr>
+    <tr
+      class="el-date-table__row"
+      v-for="row in rows"
+      :class="{ current: value && isWeekActive(row[1]) }">
+      <td
+        v-for="cell in row"
+        :class="getCellClasses(cell)"
+        v-text="cell.type === 'today' ? '今天' : cell.text"></td>
+    </tr>
+    </tbody>
+  </table>
+</template>
+
+<script type="text/ecmascript-6">
+  import { $t, getFirstDayOfMonth, getDayCountOfMonth, getWeekNumber, getStartDateOfMonth, DAY_DURATION } from '../util';
+  import { hasClass } from 'wind-dom/src/class';
+  import Vue from 'vue';
+
+  const clearHours = function(time) {
+    const cloneDate = new Date(time);
+    cloneDate.setHours(0, 0, 0, 0);
+    return cloneDate.getTime();
+  };
+
+  export default {
+    props: {
+      date: {},
+
+      year: {},
+
+      month: {},
+
+      week: {},
+
+      selectionMode: {
+        default: 'day'
+      },
+
+      showWeekNumber: {
+        type: Boolean,
+        default: false
+      },
+
+      disabledDate: {},
+
+      minDate: {},
+
+      maxDate: {},
+
+      rangeState: {
+        default() {
+          return {
+            endDate: null,
+            selecting: false,
+            row: null,
+            column: null
+          };
+        }
+      },
+
+      value: {}
+    },
+
+    computed: {
+      monthDate() {
+        return this.date.getDate();
+      },
+
+      startDate() {
+        return getStartDateOfMonth(this.year, this.month);
+      },
+
+      rows() {
+        const date = new Date(this.year, this.month, 1);
+        let day = getFirstDayOfMonth(date); // day of first day
+        const dateCountOfMonth = getDayCountOfMonth(date.getFullYear(), date.getMonth());
+        const dateCountOfLastMonth = getDayCountOfMonth(date.getFullYear(), (date.getMonth() === 0 ? 11 : date.getMonth() - 1));
+
+        day = (day === 0 ? 7 : day);
+
+        const rows = this.tableRows;
+        let count = 1;
+        let firstDayPosition;
+
+        const startDate = this.startDate;
+        const disabledDate = this.disabledDate;
+        const now = clearHours(new Date());
+
+        for (var i = 0; i < 6; i++) {
+          const row = rows[i];
+
+          if (this.showWeekNumber) {
+            if (!row[0]) {
+              row[0] = { type: 'week', text: getWeekNumber(new Date(startDate.getTime() + DAY_DURATION * (i * 7 + 1))) };
+            }
+          }
+
+          for (var j = 0; j < 7; j++) {
+            let cell = row[this.showWeekNumber ? j + 1 : j];
+            if (!cell) {
+              cell = { row: i, column: j, type: 'normal', inRange: false, start: false, end: false };
+            }
+
+            cell.type = 'normal';
+
+            const index = i * 7 + j;
+            const time = startDate.getTime() + DAY_DURATION * index;
+            cell.inRange = time >= clearHours(this.minDate) && time <= clearHours(this.maxDate);
+            cell.start = this.minDate && time === clearHours(this.minDate);
+            cell.end = this.maxDate && time === clearHours(this.maxDate);
+            const isToday = time === now;
+
+            if (isToday) {
+              cell.type = 'today';
+            }
+
+            if (i === 0) {
+              if (j >= day) {
+                cell.text = count++;
+                if (count === 2) {
+                  firstDayPosition = i * 7 + j;
+                }
+              } else {
+                cell.text = dateCountOfLastMonth - (day - j % 7) + 1;
+                cell.type = 'prev-month';
+              }
+            } else {
+              if (count <= dateCountOfMonth) {
+                cell.text = count++;
+                if (count === 2) {
+                  firstDayPosition = i * 7 + j;
+                }
+              } else {
+                cell.text = count++ - dateCountOfMonth;
+                cell.type = 'next-month';
+              }
+            }
+
+            cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
+
+            Vue.set(row, this.showWeekNumber ? j + 1 : j, cell);
+          }
+
+          if (this.selectionMode === 'week') {
+            const start = this.showWeekNumber ? 1 : 0;
+            const end = this.showWeekNumber ? 7 : 6;
+            const isWeekActive = this.isWeekActive(row[start + 1]);
+
+            row[start].inRange = isWeekActive;
+            row[start].start = isWeekActive;
+            row[end].inRange = isWeekActive;
+            row[end].end = isWeekActive;
+          }
+        }
+
+        rows.firstDayPosition = firstDayPosition;
+
+        return rows;
+      }
+    },
+
+    watch: {
+      'rangeState.endDate'(newVal) {
+        this.markRange(newVal);
+      },
+
+      minDate(newVal, oldVal) {
+        if (newVal && !oldVal) {
+          this.rangeState.selecting = true;
+          this.markRange(newVal);
+        } else if (!newVal) {
+          this.rangeState.selecting = false;
+          this.markRange(newVal);
+        } else {
+          this.markRange();
+        }
+      },
+
+      maxDate(newVal, oldVal) {
+        if (newVal && !oldVal) {
+          this.rangeState.selecting = false;
+          this.markRange(newVal);
+          this.$emit('pick', {
+            minDate: this.minDate,
+            maxDate: this.maxDate
+          });
+        }
+      }
+    },
+
+    data() {
+      return {
+        tableRows: [ [], [], [], [], [], [] ]
+      };
+    },
+
+    methods: {
+      $t: $t,
+
+      getCellClasses(cell) {
+        const selectionMode = this.selectionMode;
+        const monthDate = this.monthDate;
+
+        let classes = [];
+        if ((cell.type === 'normal' || cell.type === 'today') && !cell.disabled) {
+          classes.push('available');
+          if (cell.type === 'today') {
+            classes.push('today');
+          }
+        } else {
+          classes.push(cell.type);
+        }
+
+        if (selectionMode === 'day' && (cell.type === 'normal' || cell.type === 'today') &&
+          this.year === this.date.getFullYear() && this.month === this.date.getMonth() && monthDate === Number(cell.text)) {
+          classes.push('current');
+        }
+
+        if (cell.inRange && ((cell.type === 'normal' || cell.type === 'today') || this.selectionMode === 'week')) {
+          classes.push('in-range');
+
+          if (cell.start) {
+            classes.push('start-date');
+          }
+
+          if (cell.end) {
+            classes.push('end-date');
+          }
+        }
+
+        if (cell.disabled) {
+          classes.push('disabled');
+        }
+
+        return classes.join(' ');
+      },
+
+      getDateOfCell(row, column) {
+        const startDate = this.startDate;
+
+        return new Date(startDate.getTime() + (row * 7 + (column - (this.showWeekNumber ? 1 : 0))) * DAY_DURATION);
+      },
+
+      getCellByDate(date) {
+        const startDate = this.startDate;
+        const rows = this.rows;
+        const index = (date - startDate) / DAY_DURATION;
+        const row = rows[Math.floor(index / 7)];
+
+        if (this.showWeekNumber) {
+          return row[index % 7 + 1];
+        } else {
+          return row[index % 7];
+        }
+      },
+
+      isWeekActive(cell) {
+        if (this.selectionMode !== 'week') return false;
+        const newDate = new Date(this.year, this.month, 1);
+        const year = newDate.getFullYear();
+        const month = newDate.getMonth();
+
+        if (cell.type === 'prev-month') {
+          newDate.setMonth(month === 0 ? 11 : month - 1);
+          newDate.setFullYear(month === 0 ? year - 1 : year);
+        }
+
+        if (cell.type === 'next-month') {
+          newDate.setMonth(month === 11 ? 0 : month + 1);
+          newDate.setFullYear(month === 11 ? year + 1 : year);
+        }
+
+        newDate.setDate(parseInt(cell.text, 10));
+
+        return getWeekNumber(newDate) === this.week;
+      },
+
+      markRange(maxDate) {
+        const startDate = this.startDate;
+        if (!maxDate) {
+          maxDate = this.maxDate;
+        }
+
+        const rows = this.rows;
+        const minDate = this.minDate;
+        for (var i = 0, k = rows.length; i < k; i++) {
+          const row = rows[i];
+          for (var j = 0, l = row.length; j < l; j++) {
+            if (this.showWeekNumber && j === 0) continue;
+
+            const cell = row[j];
+            const index = i * 7 + j + (this.showWeekNumber ? -1 : 0);
+            const time = startDate.getTime() + DAY_DURATION * index;
+
+            cell.inRange = minDate && time >= clearHours(minDate) && time <= clearHours(maxDate);
+            cell.start = minDate && time === clearHours(minDate.getTime());
+            cell.end = maxDate && time === clearHours(maxDate.getTime());
+          }
+        }
+      },
+
+      handleMouseMove(event) {
+        if (!this.rangeState.selecting) return;
+
+        this.$emit('changerange', {
+          minDate: this.minDate,
+          maxDate: this.maxDate,
+          rangeState: this.rangeState
+        });
+
+        const target = event.target;
+        if (target.tagName !== 'TD') return;
+
+        const column = target.cellIndex;
+        const row = target.parentNode.rowIndex - 1;
+        const { row: oldRow, column: oldColumn } = this.rangeState;
+
+        if (oldRow !== row || oldColumn !== column) {
+          this.rangeState.row = row;
+          this.rangeState.column = column;
+
+          this.rangeState.endDate = this.getDateOfCell(row, column);
+        }
+      },
+
+      handleClick(event) {
+        let target = event.target;
+
+        if (target.tagName !== 'TD') return;
+        if (hasClass(target, 'disabled') || hasClass(target, 'week')) return;
+
+        var selectionMode = this.selectionMode;
+
+        if (selectionMode === 'week') {
+          target = target.parentNode.cells[1];
+        }
+
+        let year = this.year;
+        let month = this.month;
+
+        const cellIndex = target.cellIndex;
+        const rowIndex = target.parentNode.rowIndex;
+
+        const cell = this.rows[rowIndex - 1][cellIndex];
+        const text = cell.text;
+        const className = target.className;
+
+        const newDate = new Date(this.year, this.month, 1);
+
+        const clickNormalCell = className.indexOf('prev') === -1 && className.indexOf('next') === -1;
+
+        if (className.indexOf('prev') !== -1) {
+          if (month === 0) {
+            year = year - 1;
+            month = 11;
+          } else {
+            month = month - 1;
+          }
+          newDate.setFullYear(year);
+          newDate.setMonth(month);
+        } else if (className.indexOf('next') !== -1) {
+          if (month === 11) {
+            year = year + 1;
+            month = 0;
+          } else {
+            month = month + 1;
+          }
+          newDate.setFullYear(year);
+          newDate.setMonth(month);
+        }
+
+        newDate.setDate(parseInt(text, 10));
+
+        if (clickNormalCell && this.selectionMode === 'range') {
+          if (this.minDate && this.maxDate) {
+            this.minDate = new Date(newDate.getTime());
+            this.maxDate = null;
+            this.rangeState.selecting = true;
+            this.markRange(this.minDate);
+          } else if (this.minDate && !this.maxDate) {
+            if (newDate >= this.minDate) {
+              this.maxDate = new Date(newDate.getTime());
+              this.rangeState.selecting = false;
+
+              this.$emit('pick', {
+                minDate: this.minDate,
+                maxDate: this.maxDate
+              });
+            } else {
+              this.minDate = new Date(newDate.getTime());
+            }
+          } else if (!this.minDate) {
+            this.minDate = new Date(newDate.getTime());
+            this.rangeState.selecting = true;
+            this.markRange(this.minDate);
+          }
+        }
+
+        if (selectionMode === 'day') {
+          this.$emit('pick', newDate);
+        } else if (selectionMode === 'week') {
+          var weekNumber = getWeekNumber(newDate);
+
+          this.value = newDate.getFullYear() + 'w' + weekNumber;
+          this.$emit('pick', {
+            year: newDate.getFullYear(),
+            week: weekNumber,
+            value: this.value,
+            date: newDate
+          });
+        }
+      }
+    }
+  };
+</script>
diff --git a/packages/date-picker/src/basic/month-table.vue b/packages/date-picker/src/basic/month-table.vue
new file mode 100644
index 000000000..7e0fef950
--- /dev/null
+++ b/packages/date-picker/src/basic/month-table.vue
@@ -0,0 +1,74 @@
+<template>
+  <table @click="handleMonthTableClick" class="el-month-table">
+    <tbody>
+    <tr>
+      <td :class="{ current: month === 0 }">
+        <a class="cell">{{ $t('datepicker.months.jan') }}</a>
+      </td>
+      <td :class="{ current: month === 1 }">
+        <a class="cell">{{ $t('datepicker.months.feb') }}</a>
+      </td>
+      <td :class="{ current: month === 2 }">
+        <a class="cell">{{ $t('datepicker.months.mar') }}</a>
+      </td>
+      <td :class="{ current: month === 3 }">
+        <a class="cell">{{ $t('datepicker.months.apr') }}</a>
+      </td>
+    </tr>
+    <tr>
+      <td :class="{ current: month === 4 }">
+        <a class="cell">{{ $t('datepicker.months.may') }}</a>
+      </td>
+      <td :class="{ current: month === 5 }">
+        <a class="cell">{{ $t('datepicker.months.jun') }}</a>
+      </td>
+      <td :class="{ current: month === 6 }">
+        <a class="cell">{{ $t('datepicker.months.jul') }}</a>
+      </td>
+      <td :class="{ current: month === 7 }">
+        <a class="cell">{{ $t('datepicker.months.aug') }}</a>
+      </td>
+    </tr>
+    <tr>
+      <td :class="{ current: month === 8 }">
+        <a class="cell">{{ $t('datepicker.months.sep') }}</a>
+      </td>
+      <td :class="{ current: month === 9 }">
+        <a class="cell">{{ $t('datepicker.months.oct') }}</a>
+      </td>
+      <td :class="{ current: month === 10 }">
+        <a class="cell">{{ $t('datepicker.months.nov') }}</a>
+      </td>
+      <td :class="{ current: month === 11 }">
+        <a class="cell">{{ $t('datepicker.months.dec') }}</a>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+</template>
+
+<script type="text/ecmascript-6">
+  import { $t } from '../util';
+
+  export default {
+    props: {
+      month: {
+        type: Number
+      }
+    },
+
+    methods: {
+      $t: $t,
+
+      handleMonthTableClick(event) {
+        const target = event.target;
+        if (target.tagName !== 'A') return;
+        const column = target.parentNode.cellIndex;
+        const row = target.parentNode.parentNode.rowIndex;
+        const month = this.month = row * 4 + column;
+
+        this.$emit('pick', month);
+      }
+    }
+  };
+</script>
diff --git a/packages/date-picker/src/basic/time-spinner.vue b/packages/date-picker/src/basic/time-spinner.vue
new file mode 100644
index 000000000..51dcc3f5c
--- /dev/null
+++ b/packages/date-picker/src/basic/time-spinner.vue
@@ -0,0 +1,139 @@
+<template>
+  <div
+    @mouseenter="emitSelectRange('hours')"
+    class="el-time-spinner__wrapper"
+    v-el:hour>
+    <ul class="el-time-spinner__list">
+      <li
+        @click="handleClick('hours', { value: hour, disabled: disabled }, true)"
+        v-for="(hour, disabled) in hoursList"
+        track-by="$index"
+        class="el-time-spinner__item"
+        :class="{ 'active': hour === hours, 'disabled': disabled }"
+        v-text="hour"></li>
+    </ul>
+  </div>
+  <div
+    @mouseenter="emitSelectRange('minutes')"
+    class="el-time-spinner__wrapper"
+    v-el:minute>
+    <ul class="el-time-spinner__list">
+      <li
+        @click="handleClick('minutes', minute, true)"
+        v-for="minute in 60"
+        class="el-time-spinner__item"
+        :class="{ 'active': minute === minutes }"
+        v-text="minute"></li>
+    </ul>
+  </div>
+  <div
+    @mouseenter="emitSelectRange('seconds')"
+    class="el-time-spinner__wrapper"
+    v-el:second>
+    <ul class="el-time-spinner__list">
+      <li
+        @click="handleClick('seconds', second, true)"
+        v-for="second in 60"
+        class="el-time-spinner__item"
+        :class="{ 'active': second === seconds }"
+        v-text="second"></li>
+    </ul>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  import { getRangeHours } from '../util';
+
+  export default {
+    props: {
+      hours: {
+        type: Number,
+        default: 0
+      },
+
+      minutes: {
+        type: Number,
+        default: 0
+      },
+
+      seconds: {
+        type: Number,
+        default: 0
+      },
+
+      showSeconds: {
+        type: Boolean,
+        default: true
+      },
+
+      selectableRange: {}
+    },
+
+    watch: {
+      hours(newVal, oldVal) {
+        if (!(newVal >= 0 && newVal <= 23)) {
+          this.hours = oldVal;
+        }
+        this.$els.hour.scrollTop = Math.max(0, (this.hours - 2.5) * 32 + 80);
+        this.$emit('change', { hours: newVal });
+      },
+
+      minutes(newVal, oldVal) {
+        if (!(newVal >= 0 && newVal <= 59)) {
+          this.minutes = oldVal;
+        }
+        this.$els.minute.scrollTop = Math.max(0, (this.minutes - 2.5) * 32 + 80);
+        this.$emit('change', { minutes: newVal });
+      },
+
+      seconds(newVal, oldVal) {
+        if (!(newVal >= 0 && newVal <= 59)) {
+          this.seconds = oldVal;
+        }
+        this.$els.second.scrollTop = Math.max(0, (this.seconds - 2.5) * 32 + 80);
+        this.$emit('change', { seconds: newVal });
+      }
+    },
+
+    computed: {
+      hoursList() {
+        return getRangeHours(this.selectableRange);
+      }
+    },
+
+    methods: {
+      focusEditor(type) {
+        const editor = this.$els[type + 'Editor'];
+        if (editor) {
+          editor.focus();
+        }
+      },
+
+      handleClick(type, value, disabled) {
+        if (value.disabled) {
+          return;
+        }
+
+        this[type] = value.value >= 0 ? value.value : value;
+
+        this.emitSelectRange(type);
+      },
+
+      emitSelectRange(type) {
+        if (type === 'hours') {
+          this.$emit('select-range', 0, 2);
+        } else if (type === 'minutes') {
+          this.$emit('select-range', 3, 5);
+        } else if (type === 'seconds') {
+          this.$emit('select-range', 6, 8);
+        }
+      },
+
+      ajustScrollTop() {
+        this.$els.hour.scrollTop = Math.max(0, (this.hours - 2.5) * 32 + 80);
+        this.$els.minute.scrollTop = Math.max(0, (this.minutes - 2.5) * 32 + 80);
+        this.$els.second.scrollTop = Math.max(0, (this.seconds - 2.5) * 32 + 80);
+      }
+    }
+  };
+</script>
diff --git a/packages/date-picker/src/basic/year-table.vue b/packages/date-picker/src/basic/year-table.vue
new file mode 100644
index 000000000..d454bd653
--- /dev/null
+++ b/packages/date-picker/src/basic/year-table.vue
@@ -0,0 +1,78 @@
+<template>
+  <table @click="handleYearTableClick" class="el-year-table">
+    <tbody>
+    <tr>
+      <td class="available" :class="{ current: year === startYear }">
+        <a class="cell">{{ startYear }}</a>
+      </td>
+      <td class="available" :class="{ current: year === startYear + 1 }">
+        <a class="cell">{{ startYear + 1 }}</a>
+      </td>
+      <td class="available" :class="{ current: year === startYear + 2 }">
+        <a class="cell">{{ startYear + 2 }}</a>
+      </td>
+      <td class="available" :class="{ current: year === startYear + 3 }">
+        <a class="cell">{{ startYear + 3 }}</a>
+      </td>
+    </tr>
+    <tr>
+      <td class="available" :class="{ current: year === startYear + 4 }">
+        <a class="cell">{{ startYear + 4 }}</a>
+      </td>
+      <td class="available" :class="{ current: year === startYear + 5 }">
+        <a class="cell">{{ startYear + 5 }}</a>
+      </td>
+      <td class="available" :class="{ current: year === startYear + 6 }">
+        <a class="cell">{{ startYear + 6 }}</a>
+      </td>
+      <td class="available" :class="{ current: year === startYear + 7 }">
+        <a class="cell">{{ startYear + 7 }}</a>
+      </td>
+    </tr>
+    <tr>
+      <td class="available" :class="{ current: year === startYear + 8 }">
+        <a class="cell">{{ startYear + 8 }}</a>
+      </td>
+      <td class="available" :class="{ current: year === startYear + 9 }">
+        <a class="cell">{{ startYear + 9 }}</a>
+      </td>
+      <td></td>
+      <td></td>
+    </tr>
+    </tbody>
+  </table>
+</template>
+
+<script type="text/ecmascript-6">
+  export default {
+    props: {
+      year: {
+        type: Number
+      }
+    },
+
+    computed: {
+      startYear() {
+        return Math.floor(this.year / 10) * 10;
+      }
+    },
+
+    methods: {
+      nextTenYear() {
+        this.year += 10;
+      },
+
+      prevTenYear() {
+        this.year -= 10;
+      },
+
+      handleYearTableClick(event) {
+        const target = event.target;
+        if (target.tagName === 'A') {
+          const year = this.year = parseInt(target.textContent || target.innerText, 10);
+          this.$emit('pick', year);
+        }
+      }
+    }
+  };
+</script>
diff --git a/packages/date-picker/src/css/date-picker.css b/packages/date-picker/src/css/date-picker.css
new file mode 100644
index 000000000..0281ebb1f
--- /dev/null
+++ b/packages/date-picker/src/css/date-picker.css
@@ -0,0 +1,84 @@
+@import "./vars.css";
+@import "./picker-panel.css";
+
+@component-namespace el {
+  @b date-picker {
+    min-width: 300px;
+
+    .el-picker-panel__content {
+      min-width: 224px;
+    }
+
+    table {
+      table-layout: fixed;
+      width: 100%;
+    }
+
+    @e editor {
+      flex: 1;
+      margin: 0 5px;
+      position: relative;
+      border: 1px solid #c0ccda;
+      border-radius: 4px;
+      padding: 5px 10px;
+      box-sizing: border-box;
+      height: 28px;
+      outline: none;
+      appearance: none;
+      transition: border 0.3s;
+
+      &:hover {
+        border-color: #20a0ff;
+      }
+    }
+
+    @e time-header {
+      position: relative;
+      border-bottom: 1px solid var(--datepicker-inner-border-color);
+      font-size: 0;
+      padding: 8px 5px 5px 5px;
+      display: flex;
+    }
+
+    @e header {
+      margin: 12px;
+      text-align: center;
+    }
+
+    @e header-label {
+      font-size: 14px;
+      padding: 0 5px;
+      line-height: 22px;
+      text-align: center;
+      cursor: pointer;
+
+      &:hover {
+        color: var(--datepicker-text-hover-color);
+      }
+
+      &.active {
+        color: var(--datepicker-active-color);
+      }
+    }
+
+    @e prev-btn {
+      float: left;
+    }
+
+    @e next-btn {
+      float: right;
+    }
+
+    @e time-wrap {
+      padding: 10px;
+      text-align: center;
+    }
+
+    @e time-label {
+      float: left;
+      cursor: pointer;
+      line-height: 30px;
+      margin-left: 10px;
+    }
+  }
+}
diff --git a/packages/date-picker/src/css/date-range-picker.css b/packages/date-picker/src/css/date-range-picker.css
new file mode 100644
index 000000000..7c8a7c135
--- /dev/null
+++ b/packages/date-picker/src/css/date-range-picker.css
@@ -0,0 +1,118 @@
+@import './vars.css';
+
+@component-namespace el {
+  @b date-range-picker {
+    table {
+      table-layout: fixed;
+      width: 100%;
+    }
+
+    .el-picker-panel__body {
+      min-width: 513px;
+    }
+
+    .el-picker-panel__content {
+      margin: 0;
+    }
+
+    @e editor {
+      flex: 1;
+      margin: 0 5px;
+      position: relative;
+      border: 1px solid #c0ccda;
+      border-radius: 4px;
+      padding: 5px 10px;
+      box-sizing: border-box;
+      height: 28px;
+      outline: none;
+      appearance: none;
+      transition: border 0.3s;
+
+      &:hover {
+        border-color: #20a0ff;
+      }
+    }
+
+    @e header {
+      position: relative;
+      text-align: center;
+      height: 28px;
+
+      button {
+        float: left;
+      }
+
+      div {
+        font-size: 14px;
+        margin-right: 50px;
+      }
+    }
+
+    @e content {
+      float: left;
+      width: 50%;
+      box-sizing: border-box;
+      margin: 0;
+      padding: 16px;
+
+      @when left {
+        border-right: 1px solid var(--datepicker-inner-border-color);
+      }
+
+      @when right {
+        .el-date-range-picker__header {
+          button {
+            float: right;
+          }
+
+          div {
+            margin-left: 50px;
+            margin-right: 50px;
+          }
+        }
+      }
+    }
+
+    @e editors-wrap {
+      padding-right: 10px;
+      display: inline-block;
+      width: 50%;
+      box-sizing: border-box;
+      display: flex;
+
+      @when right {
+        padding-left: 10px;
+        text-align: right;
+      }
+    }
+
+    @e time-header {
+      position: relative;
+      border-bottom: 1px solid var(--datepicker-inner-border-color);
+      font-size: 0;
+      padding: 8px 5px 5px 5px;
+      display: flex;
+
+      > .el-icon-arrow-right {
+        position: absolute;
+        left: 50%;
+        margin-left: -10px;
+        margin-top: 5px;
+        font-size: 20px;
+        color: var(--datepicker-icon-color);
+      }
+    }
+
+    @e time-picker-wrap {
+      position: relative;
+
+      .el-picker-panel {
+        position: absolute;
+        top: 13px;
+        right: 0;
+        z-index: 1;
+        background: #fff;
+      }
+    }
+  }
+}
diff --git a/packages/date-picker/src/css/date-table.css b/packages/date-picker/src/css/date-table.css
new file mode 100644
index 000000000..abe8e527e
--- /dev/null
+++ b/packages/date-picker/src/css/date-table.css
@@ -0,0 +1,75 @@
+@import "./vars.css";
+
+@component-namespace el {
+  @b date-table {
+    font-size: 12px;
+    min-width: 224px;
+    user-select: none;
+
+    @when week-mode {
+      .el-date-table__row {
+        &:hover {
+          background-color: var(--datepicker-cell-hover-color);
+        }
+
+        &.current {
+          background-color: var(--datepicker-inrange-color);
+        }
+      }
+    }
+
+    td {
+      width: 32px;
+      height: 32px;
+      box-sizing: border-box;
+      text-align: center;
+      cursor: pointer;
+
+      &.next-month,
+      &.prev-month {
+        color: var(--datepicker-off-color);
+      }
+
+      &.today {
+        color: var(--datepicker-text-hover-color);
+      }
+
+      &.available:hover {
+        background-color: var(--datepicker-cell-hover-color);
+      }
+
+      &.in-range {
+        background-color: var(--datepicker-inrange-color);
+        &:hover {
+          background-color: var(--datepicker-inrange-hover-color);
+        }
+      }
+
+      &.current,
+      &.start-date,
+      &.end-date {
+        background-color: var(--datepicker-active-color) !important;
+        color: #fff;
+      }
+
+      &.disabled {
+        background-color: #f4f4f4;
+        opacity: 1;
+        cursor: not-allowed;
+        color: #ccc;
+        text-decoration: line-through;
+      }
+
+      &.week {
+        font-size: 80%;
+        color: var(--datepicker-header-color);
+      }
+    }
+
+    th {
+      padding: 5px;
+      color: var(--datepicker-header-color);
+      font-weight: 400;
+    }
+  }
+}
diff --git a/packages/date-picker/src/css/month-table.css b/packages/date-picker/src/css/month-table.css
new file mode 100644
index 000000000..760e4616f
--- /dev/null
+++ b/packages/date-picker/src/css/month-table.css
@@ -0,0 +1,31 @@
+@import "./vars.css";
+
+@component-namespace el {
+  @b month-table {
+    font-size: 12px;
+    margin: -1px;
+
+    td {
+      text-align: center;
+      padding: 20px 3px;
+      cursor: pointer;
+
+      .cell {
+        width: 48px;
+        height: 32px;
+        display: block;
+        line-height: 32px;
+        color: var(--datepicker-color);
+
+        &:hover {
+          background-color: var(--datepicker-cell-hover-color);
+        }
+      }
+
+      &.current .cell {
+        background-color: var(--datepicker-active-color) !important;
+        color: #fff;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/date-picker/src/css/picker-panel.css b/packages/date-picker/src/css/picker-panel.css
new file mode 100644
index 000000000..2af340d2d
--- /dev/null
+++ b/packages/date-picker/src/css/picker-panel.css
@@ -0,0 +1,111 @@
+@import './vars.css';
+
+@component-namespace el {
+  @b picker-panel {
+    color: var(--datepicker-color);
+    border: 1px solid var(--datepicker-border-color);
+    box-shadow: 0 2px 6px #ccc;
+    background: #fff;
+    border-radius: 2px;
+    line-height: 20px;
+    margin: 5px 0;
+
+    @e body, body-wrapper {
+      &::after {
+        content: "";
+        display: table;
+        clear: both;
+      }
+    }
+
+    @e content {
+      position: relative;
+      margin: 15px;
+    }
+
+    @e footer {
+      border-top: 1px solid var(--datepicker-inner-border-color);
+      padding: 4px;
+      text-align: right;
+      background-color: #fff;
+      position: relative;
+    }
+
+    @e shortcut {
+      display: block;
+      width: 100%;
+      border: 0;
+      background-color: transparent;
+      line-height: 28px;
+      font-size: 14px;
+      color: var(--datepicker-color);
+      padding-left: 12px;
+      text-align: left;
+      outline: none;
+      cursor: pointer;
+
+      &:hover {
+        background-color: #e5e9f2;
+      }
+
+      &.active {
+        background-color: #e6f1fe;
+        color: var(--datepicker-active-color);
+      }
+    }
+
+    @e btn {
+      border: 1px solid #dcdcdc;
+      color: #333;
+      line-height: 24px;
+      border-radius: 2px;
+      padding: 0 20px;
+      cursor: pointer;
+      background-color: transparent;
+      outline: none;
+
+      &[disabled] {
+        color: #cccccc;
+        cursor: not-allowed;
+      }
+    }
+
+    @e icon-btn {
+      font-size: 12px;
+      color: var(--datepicker-icon-color);
+      border: 0;
+      background: transparent;
+      cursor: pointer;
+      outline: none;
+      margin-top: 3px;
+
+      &:hover {
+        color: var(--datepicker-text-hover-color);
+      }
+    }
+
+    @e link-btn {
+      color: #55a4ff;
+      text-decoration: none;
+      padding: 15px;
+      font-size: 12px;
+    }
+  }
+
+  .el-picker-panel *[slot=sidebar],
+  .el-picker-panel__sidebar {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 110px;
+    border-right: 1px solid var(--datepicker-inner-border-color);
+    box-sizing: border-box;
+    padding-top: 6px;
+    background-color: #f9fafc;
+  }
+
+  .el-picker-panel *[slot=sidebar] + .el-picker-panel__body,
+  .el-picker-panel__sidebar + .el-picker-panel__body {
+    margin-left: 110px;
+  }
+}
diff --git a/packages/date-picker/src/css/picker.css b/packages/date-picker/src/css/picker.css
new file mode 100644
index 000000000..715c0e9e8
--- /dev/null
+++ b/packages/date-picker/src/css/picker.css
@@ -0,0 +1,121 @@
+@import "./vars.css";
+@import "../../../theme-default/src/common/transition.css";
+
+@component-namespace el {
+  @b date-editor {
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+    height: 36px;
+    width: 182px;
+
+    @e editor {
+      border: 1px solid #c0ccda;
+      border-radius: 4px;
+      line-height: 18px;
+      height: 36px;
+      padding: 3px 10px;
+      width: 100%;
+      box-sizing: border-box;
+      transition: border 0.3s;
+      color: #666;
+      font-size: 14px;
+
+      &::-webkit-input-placeholder {
+        color: var(--input-placeholder-color);
+        font-size: 14px;
+      }
+
+      &::-moz-placeholder {
+        color: #bbb;
+        font-size: 14px;
+      }
+
+      &:-ms-input-placeholder {
+        color: #bbb;
+        font-size: 14px;
+      }
+
+      &::placeholder {
+        color: #bbb;
+        font-size: 14px;
+      }
+    }
+
+    @e trigger {
+      cursor: pointer;
+      position: absolute;
+      display: inline-block;
+      width: 20px;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      color: var(--datepicker-trigger-color);
+      font-size: 13px;
+      line-height: 38px;
+    }
+
+    @e clear {
+      cursor: pointer;
+      position: absolute;
+      width: 20px;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      line-height: 36px;
+      color: var(--datepicker-icon-color);
+
+      &:hover {
+        color: var(--datepicker-text-hover-color);
+      }
+    }
+
+    @when have-trigger {
+      .el-date-editor__editor {
+        padding-right: 20px;
+      }
+
+      .el-date-editor__clear {
+        right: 22px;
+      }
+    }
+
+    &.lg {
+      .el-date-editor__editor {
+        padding: 6px 4px;
+      }
+    }
+
+    &.sm {
+      .el-date-editor__editor {
+        padding: 1px 1px;
+      }
+    }
+
+    .el-picker-panel {
+      position: absolute;
+      min-width: 180px;
+      box-sizing: border-box;
+      box-shadow: 0 2px 6px #ccc;
+      background: #fff;
+      z-index: 10;
+      top: 41px;
+    }
+  }
+
+  .el-date-editor__editor:focus,
+  .el-date-editor:hover > .el-date-editor__editor,
+  .el-date-editor.is-active > .el-date-editor__editor {
+    outline: none;
+    border-color: var(--datepicker-active-color);
+  }
+
+  .el-date-editor .el-date-editor__clear {
+    display: none;
+  }
+
+  .el-date-editor.is-filled:hover .el-date-editor__clear,
+  .el-date-editor.is-filled.is-active > .el-date-editor__clear {
+    display: inline-block;
+  }
+}
diff --git a/packages/date-picker/src/css/time-picker.css b/packages/date-picker/src/css/time-picker.css
new file mode 100644
index 000000000..c0860c0d5
--- /dev/null
+++ b/packages/date-picker/src/css/time-picker.css
@@ -0,0 +1,68 @@
+@import "./vars.css";
+
+@component-namespace el {
+  @b time-panel {
+    margin: 5px 0;
+    border: solid 1px #d3dce6;
+    background-color: #fff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
+    border-radius: 2px;
+    position: absolute;
+    width: 180px;
+    left: 0;
+    z-index: 1000;
+    user-select: none;
+
+    @e content {
+      font-size: 0;
+      display: flex;
+      position: relative;
+
+      &::after, &::before {
+        content: ":";
+        top: 50%;
+        color: #fff;
+        position: absolute;
+        font-size: 14px;
+        margin-top: -8px;
+        z-index: 1;
+      }
+
+      &::after {
+        left: calc(100%/3);
+        margin-left: -2px;
+      }
+
+      &::before {
+        right: calc(100%/3);
+        margin-right: -2px;
+      }
+    }
+
+    @e footer {
+      border-top: 1px solid var(--datepicker-inner-border-color);
+      padding: 4px;
+      height: 36px;
+      text-align: right;
+      box-sizing: border-box;
+    }
+
+    @e btn {
+      border: none;
+      line-height: 28px;
+      padding: 0 5px;
+      margin: 0 5px;
+      cursor: pointer;
+      background-color: transparent;
+      outline: none;
+      font-size: 12px;
+      color: #8492a6;
+
+      &.confirm {
+        font-weight: 800;
+        color: #20a0ff;
+      }
+    }
+
+  }
+}
diff --git a/packages/date-picker/src/css/time-range-picker.css b/packages/date-picker/src/css/time-range-picker.css
new file mode 100644
index 000000000..67eca4504
--- /dev/null
+++ b/packages/date-picker/src/css/time-range-picker.css
@@ -0,0 +1,34 @@
+@import '../css/vars.css';
+
+@component-namespace el {
+  @b time-range-picker {
+    width: 354px;
+    overflow: visible;
+
+    @e content {
+      position: relative;
+      text-align: center;
+      padding: 10px;
+      display: flex;
+    }
+
+    @e cell {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 4px 7px 7px;
+      flex: 1;
+    }
+
+    @e header {
+      margin-bottom: 5px;
+      text-align: center;
+      font-size: 14px;
+    }
+
+    @e body {
+      display: flex;
+      border-radius:2px;
+      border: 1px solid var(--datepicker-border-color);
+    }
+  }
+}
diff --git a/packages/date-picker/src/css/time-spinner.css b/packages/date-picker/src/css/time-spinner.css
new file mode 100644
index 000000000..cd3775a85
--- /dev/null
+++ b/packages/date-picker/src/css/time-spinner.css
@@ -0,0 +1,57 @@
+@import "./vars.css";
+
+@component-namespace el {
+  @b time-spinner {
+    @e wrapper {
+      height: 190px;
+      overflow: hidden;
+      flex: 1;
+      vertical-align: top;
+      position: relative;
+
+      &:hover {
+        overflow-y: auto;
+      }
+    }
+
+    @e list {
+      padding: 0;
+      margin: 0;
+      list-style: none;
+      text-align: center;
+
+      &::after,
+      &::before {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 80px;
+      }
+    }
+
+    @e item {
+      height: 32px;
+      line-height: 32px;
+      font-size: 12px;
+
+      &:hover:not(.disabled) {
+        background: #E5E9F2;
+        cursor: pointer;
+      }
+
+      &.active:not(.disabled) {
+        background-color: #20a0ff;
+        color: #fff;
+
+        &:hover {
+          background-color: #1D8CE0;
+        }
+      }
+
+      &.disabled {
+        color: var(--datepicker-border-color);
+        cursor: not-allowed;
+      }
+    }
+  }
+}
diff --git a/packages/date-picker/src/css/vars.css b/packages/date-picker/src/css/vars.css
new file mode 100644
index 000000000..3e5fa2e29
--- /dev/null
+++ b/packages/date-picker/src/css/vars.css
@@ -0,0 +1,14 @@
+:root {
+  --datepicker-color: #475669;
+  --datepicker-off-color: #ddd;
+  --datepicker-header-color: #8492a6;
+  --datepicker-icon-color: #99a9bf;
+  --datepicker-trigger-color: #c0ccda;
+  --datepicker-border-color: #d3dce6;
+  --datepicker-inner-border-color: #e4e4e4;
+  --datepicker-cell-hover-color: #e5e9f2;
+  --datepicker-inrange-color: #D3ECFF;
+  --datepicker-inrange-hover-color: #AFDCFF;
+  --datepicker-active-color: #20a0ff;
+  --datepicker-text-hover-color: #20a0ff;
+}
\ No newline at end of file
diff --git a/packages/date-picker/src/css/year-table.css b/packages/date-picker/src/css/year-table.css
new file mode 100644
index 000000000..ec0fce46d
--- /dev/null
+++ b/packages/date-picker/src/css/year-table.css
@@ -0,0 +1,35 @@
+@import "./vars.css";
+
+@component-namespace el {
+  @b year-table {
+    font-size: 12px;
+    margin: -1px;
+
+    .el-icon {
+      color: var(--datepicker-icon-color);
+    }
+
+    td {
+      text-align: center;
+      padding: 20px 3px;
+      cursor: pointer;
+
+      .cell {
+        width: 48px;
+        height: 32px;
+        display: block;
+        line-height: 32px;
+        color: var(--datepicker-color);
+      }
+
+      &.available .cell:hover {
+        background-color: var(--datepicker-cell-hover-color);
+      }
+
+      &.current .cell {
+        background-color: var(--datepicker-active-color) !important;
+        color: #fff;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/date-picker/src/panel/date-range.vue b/packages/date-picker/src/panel/date-range.vue
new file mode 100644
index 000000000..33ba27e40
--- /dev/null
+++ b/packages/date-picker/src/panel/date-range.vue
@@ -0,0 +1,470 @@
+<template>
+  <div
+    v-show="visible"
+    transition="md-fade-bottom"
+    class="el-picker-panel el-date-range-picker">
+    <div class="el-picker-panel__body-wrapper">
+      <slot name="sidebar" class="el-picker-panel__sidebar"></slot>
+      <div class="el-picker-panel__sidebar" v-if="shortcuts">
+        <button
+          class="el-picker-panel__shortcut"
+          v-for="shortcut in shortcuts"
+          @click="handleShortcutClick(shortcut)">{{shortcut.text}}</button>
+      </div>
+      <div class="el-picker-panel__body">
+        <div class="el-date-range-picker__time-header" v-if="showTime">
+          <span class="el-date-range-picker__editors-wrap">
+            <input
+              placeholder="开始日期"
+              class="el-date-range-picker__editor"
+              v-model="leftVisibleDate"
+              @input="handleDateInput($event, 'min')"
+              @change="handleDateChange($event, 'min')"/>
+            <span class="el-date-range-picker__time-picker-wrap">
+              <input
+                placeholder="开始时间"
+                class="el-date-range-picker__editor"
+                v-model="leftVisibleTime"
+                @focus="leftTimePickerVisible = true"
+                @change="handleTimeChange($event, 'min')"/>
+              <time-picker
+                v-ref:lefttimepicker
+                :date="minDate"
+                @pick="handleLeftTimePick"
+                v-show="leftTimePickerVisible">
+              </time-picker>
+            </span>
+          </span>
+          <span class="el-icon-arrow-right"></span>
+          <span class="el-date-range-picker__editors-wrap is-right">
+            <input
+              placeholder="结束日期"
+              class="el-date-range-picker__editor"
+              v-model="rightVisibleDate"
+              :readonly="!minDate"
+              @input="handleDateInput($event, 'max')"
+              @change="handleDateChange($event, 'max')" />
+            <span class="el-date-range-picker__time-picker-wrap">
+              <input
+                placeholder="结束时间"
+                class="el-date-range-picker__editor"
+                v-model="rightVisibleTime"
+                @focus="minDate && (rightTimePickerVisible = true)"
+                :readonly="!minDate"
+                @change="handleTimeChange($event, 'max')" />
+              <time-picker
+                v-ref:righttimepicker
+                :date="maxDate"
+                @pick="handleRightTimePick"
+                v-show="rightTimePickerVisible"></time-picker>
+            </span>
+          </span>
+        </div>
+        <div class="el-picker-panel__content el-date-range-picker__content is-left">
+          <div class="el-date-range-picker__header">
+            <button
+              @click="prevYear"
+              class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
+            <button
+              @click="prevMonth"
+              class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
+            <div>{{ leftLabel }}</div>
+          </div>
+          <date-table
+            selection-mode="range"
+            :date="date"
+            :year="leftYear"
+            :month="leftMonth"
+            :min-date="minDate"
+            :max-date="maxDate"
+            :range-state="rangeState"
+            @changerange="handleChangeRange"
+            @pick="handleRangePick">
+          </date-table>
+        </div>
+        <div class="el-picker-panel__content el-date-range-picker__content is-right">
+          <div class="el-date-range-picker__header">
+            <button
+              @click="nextYear"
+              class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
+            <button
+              @click="nextMonth"
+              class="el-picker-panel__icon-btn el-icon-arrow-right"></button>
+            <div>{{ rightLabel }}</div>
+          </div>
+          <date-table
+            selection-mode="range"
+            :date="rightDate"
+            :year="rightYear"
+            :month="rightMonth"
+            :min-date="minDate"
+            :max-date="maxDate"
+            :range-state="rangeState"
+            @changerange="handleChangeRange"
+            @pick="handleRangePick"></date-table>
+        </div>
+      </div>
+    </div>
+    <div class="el-picker-panel__footer" v-if="showTime">
+      <a
+        href="JavaScript:"
+        class="el-picker-panel__link-btn"
+        @click="changeToToday">{{ $t('datepicker.today') }}</a>
+      <button
+        class="el-picker-panel__btn"
+        @click="handleConfirm"
+        :disabled="btnDisabled">确定</button>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  import { nextMonth, prevMonth, $t, formatDate, parseDate } from '../util';
+
+  export default {
+    props: {
+      date: {
+        default() {
+          return new Date();
+        }
+      },
+
+      minDate: {},
+
+      maxDate: {},
+
+      rangeState: {
+        default() {
+          return {
+            endDate: null,
+            selecting: false,
+            row: null,
+            column: null
+          };
+        }
+      },
+
+      showTime: {
+        type: Boolean,
+        default: false
+      },
+
+      shortcuts: {},
+
+      value: {},
+
+      visible: Boolean
+    },
+
+    computed: {
+      btnDisabled() {
+        return !(this.minDate && this.maxDate && !this.selecting);
+      },
+
+      leftLabel() {
+        return this.date.getFullYear() + '年 ' + (this.date.getMonth() + 1) + '月';
+      },
+
+      rightLabel() {
+        return this.rightDate.getFullYear() + '年 ' + (this.rightDate.getMonth() + 1) + '月';
+      },
+
+      leftYear() {
+        return this.date.getFullYear();
+      },
+
+      leftMonth() {
+        return this.date.getMonth();
+      },
+
+      rightYear() {
+        return this.rightDate.getFullYear();
+      },
+
+      rightMonth() {
+        return this.rightDate.getMonth();
+      },
+
+      leftVisibleDate() {
+        return formatDate(this.minDate);
+      },
+
+      rightVisibleDate() {
+        return formatDate(this.maxDate);
+      },
+
+      leftVisibleTime() {
+        return formatDate(this.minDate, 'HH:mm:ss');
+      },
+
+      rightVisibleTime() {
+        return formatDate(this.maxDate, 'HH:mm:ss');
+      },
+
+      leftHours: {
+        get() {
+          return this.date.getHours();
+        },
+        set(hours) {
+          this.date.setHours(hours);
+        }
+      },
+
+      leftMinutes: {
+        get() {
+          return this.date.getMinutes();
+        },
+        set(minutes) {
+          this.date.setMinutes(minutes);
+        }
+      },
+
+      leftSeconds: {
+        get() {
+          return this.date.getSeconds();
+        },
+        set(seconds) {
+          this.date.setSeconds(seconds);
+        }
+      },
+
+      rightHours: {
+        get() {
+          return this.rightDate.getHours();
+        },
+        set(hours) {
+          this.rightDate.setHours(hours);
+        }
+      },
+
+      rightMinutes: {
+        get() {
+          return this.rightDate.getMinutes();
+        },
+        set(minutes) {
+          this.rightDate.setMinutes(minutes);
+        }
+      },
+
+      rightSeconds: {
+        get() {
+          return this.rightDate.getSeconds();
+        },
+        set(seconds) {
+          this.rightDate.setSeconds(seconds);
+        }
+      },
+
+      rightDate() {
+        const newDate = new Date(this.date);
+        const month = newDate.getMonth();
+        newDate.setDate(1);
+
+        if (month === 11) {
+          newDate.setFullYear(newDate.getFullYear() + 1);
+          newDate.setMonth(0);
+        } else {
+          newDate.setMonth(month + 1);
+        }
+        return newDate;
+      }
+    },
+
+    data() {
+      return {
+        leftTimePickerVisible: false,
+        rightTimePickerVisible: false
+      };
+    },
+
+    watch: {
+      minDate() {
+        this.$nextTick(() => {
+          if (this.maxDate && this.maxDate < this.minDate) {
+            this.maxDate = null;
+          }
+        });
+      },
+
+      maxDate() {
+      },
+
+      leftTimePickerVisible(val) {
+        if (val) this.$refs.lefttimepicker.ajustScrollTop();
+      },
+
+      rightTimePickerVisible(val) {
+        if (val) this.$refs.righttimepicker.ajustScrollTop();
+      },
+
+      value(newVal) {
+        if (!newVal) {
+          this.minDate = null;
+          this.maxDate = null;
+        } else if (Array.isArray(newVal)) {
+          this.minDate = newVal[0];
+          this.maxDate = newVal[1];
+        }
+      }
+    },
+
+    methods: {
+      $t,
+
+      handleDateInput(event, type) {
+        const value = event.target.value;
+        const parsedValue = parseDate(value, 'yyyy-MM-dd');
+        if (parsedValue) {
+          const target = new Date(type === 'min' ? this.minDate : this.maxDate);
+          if (target) {
+            target.setFullYear(parsedValue.getFullYear());
+            target.setMonth(parsedValue.getMonth());
+            target.setDate(parsedValue.getDate());
+          }
+        }
+      },
+
+      handleChangeRange(val) {
+        this.minDate = val.minDate;
+        this.maxDate = val.maxDate;
+        this.rangeState = val.rangeState;
+      },
+
+      handleDateChange(event, type) {
+        const value = event.target.value;
+        const parsedValue = parseDate(value, 'yyyy-MM-dd');
+        if (parsedValue) {
+          const target = new Date(type === 'min' ? this.minDate : this.maxDate);
+          if (target) {
+            target.setFullYear(parsedValue.getFullYear());
+            target.setMonth(parsedValue.getMonth());
+            target.setDate(parsedValue.getDate());
+          }
+          if (type === 'min') {
+            if (target < this.maxDate) {
+              this.minDate = new Date(target.getTime());
+            }
+          } else {
+            if (target > this.minDate) {
+              this.maxDate = new Date(target.getTime());
+              if (this.minDate && this.minDate > this.maxDate) {
+                this.minDate = null;
+              }
+            }
+          }
+        }
+      },
+
+      handleTimeChange(event, type) {
+        const value = event.target.value;
+        const parsedValue = parseDate(value, 'HH:mm:ss');
+        if (parsedValue) {
+          const target = new Date(type === 'min' ? this.minDate : this.maxDate);
+          if (target) {
+            target.setHours(parsedValue.getHours());
+            target.setMinutes(parsedValue.getMinutes());
+            target.setSeconds(parsedValue.getSeconds());
+          }
+          if (type === 'min') {
+            if (target < this.maxDate) {
+              this.minDate = new Date(target.getTime());
+            }
+          } else {
+            if (target > this.minDate) {
+              this.maxDate = new Date(target.getTime());
+            }
+          }
+        }
+      },
+
+      handleRangePick(val) {
+        this.maxDate = val.maxDate;
+        this.minDate = val.minDate;
+        if (!this.showTime) {
+          this.$emit('pick', [this.minDate, this.maxDate]);
+        }
+      },
+
+      changeToToday() {
+        this.date = new Date();
+      },
+
+      handleShortcutClick(shortcut) {
+        if (shortcut.onClick) {
+          shortcut.onClick(this);
+        }
+      },
+
+      resetView() {
+        this.leftTimePickerVisible = false;
+        this.rightTimePickerVisible = false;
+      },
+
+      handleLeftTimePick(value) {
+        if (!this.minDate) {
+          this.minDate = new Date();
+        }
+        this.minDate.setHours(value.getHours());
+        this.minDate.setMinutes(value.getMinutes());
+        this.minDate.setSeconds(value.getSeconds());
+
+        this.minDate = new Date(this.minDate);
+        this.leftTimePickerVisible = false;
+      },
+
+      handleRightTimePick(value) {
+        if (!this.maxDate) {
+          const now = new Date();
+          if (now >= this.minDate) {
+            this.maxDate = new Date();
+          } else {
+
+          }
+        }
+
+        if (this.maxDate) {
+          this.maxDate.setHours(value.getHours());
+          this.maxDate.setMinutes(value.getMinutes());
+          this.maxDate.setSeconds(value.getSeconds());
+
+          this.maxDate = new Date(this.maxDate);
+        }
+
+        this.rightTimePickerVisible = false;
+      },
+
+      prevMonth() {
+        this.date = prevMonth(this.date);
+      },
+
+      nextMonth() {
+        this.date = nextMonth(this.date);
+      },
+
+      nextYear() {
+        const date = this.date;
+        date.setFullYear(date.getFullYear() + 1);
+        this.resetDate();
+      },
+
+      prevYear() {
+        const date = this.date;
+        date.setFullYear(date.getFullYear() - 1);
+        this.resetDate();
+      },
+
+      handleConfirm() {
+        this.$emit('pick', [this.minDate, this.maxDate]);
+      },
+
+      resetDate() {
+        this.date = new Date(this.date);
+      }
+    },
+
+    components: {
+      TimePicker: require('./time'),
+      DateTable: require('../basic/date-table')
+    }
+  };
+</script>
diff --git a/packages/date-picker/src/panel/date.vue b/packages/date-picker/src/panel/date.vue
new file mode 100644
index 000000000..032667605
--- /dev/null
+++ b/packages/date-picker/src/panel/date.vue
@@ -0,0 +1,433 @@
+<template>
+  <div
+    v-show="visible"
+    transition="md-fade-bottom"
+    class="el-picker-panel el-date-picker">
+    <div class="el-picker-panel__body-wrapper">
+      <slot name="sidebar" class="el-picker-panel__sidebar"></slot>
+      <div class="el-picker-panel__sidebar" v-if="shortcuts">
+        <button
+          class="el-picker-panel__shortcut"
+          v-for="shortcut in shortcuts"
+          @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</button>
+      </div>
+      <div class="el-picker-panel__body">
+       <div class="el-date-picker__time-header" v-if="showTime">
+          <input
+            placehoder="选择日期"
+            type="text"
+            v-model="visibleDate"
+            class="el-date-picker__editor">
+          <span class="el-date-picker__editor">
+            <input
+              @focus="timePickerVisible = true"
+              v-model="visibleTime"
+              placehoder="选择时间"
+              type="text"
+              class="el-date-picker__editor">
+            <time-picker
+              v-ref:timepicker
+              :date="date"
+              @pick="handleTimePick"
+              v-show="timePickerVisible">
+            </time-picker>
+          </span>
+        </div>
+        <div class="el-date-picker__header" v-show="currentView !== 'time'">
+          <button
+            @click="prevYear"
+            class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left">
+          </button>
+          <button
+            @click="prevMonth"
+            v-show="currentView === 'date'"
+            class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left">
+          </button>
+          <span
+            @click="showYearPicker"
+            class="el-date-picker__header-label">{{ yearLabel }}</span>
+          <span
+            @click="showMonthPicker"
+            v-show="currentView === 'date'"
+            class="el-date-picker__header-label"
+            :class="{ active: currentView === 'month' }">{{ month + 1 }}月</span>
+          <button
+            @click="nextYear"
+            class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right">
+          </button>
+          <button
+            @click="nextMonth"
+            v-show="currentView === 'date'"
+            class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right">
+          </button>
+        </div>
+
+        <div class="el-picker-panel__content">
+          <date-table
+            v-show="currentView === 'date'"
+            @pick="handleDatePick"
+            :year="year"
+            :month="month"
+            :date="date"
+            :value="value"
+            :week="week"
+            :selection-mode="selectionMode"
+            :disabled-date="disabledDate">
+          </date-table>
+          <year-table
+            v-ref:year-table
+            :year="year"
+            v-show="currentView === 'year'"
+            @pick="handleYearPick">
+          </year-table>
+          <month-table
+            :month="month"
+            v-show="currentView === 'month'"
+            @pick="handleMonthPick">
+          </month-table>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="el-picker-panel__footer"
+      v-show="footerVisible && currentView === 'date'">
+      <a
+        href="JavaScript:"
+        class="el-picker-panel__link-btn"
+        @click="changeToToday">{{ $t('datepicker.today') }}</a>
+      <button
+        class="el-picker-panel__btn"
+        @click="confirm">{{ $t('datepicker.confirm') }}</button>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  import { $t, formatDate, parseDate } from '../util';
+
+  export default {
+    props: {
+      currentView: {
+        default: 'date'
+      },
+
+      date: {
+        default() {
+          return new Date();
+        }
+      },
+
+      disabledDate: {},
+
+      value: {},
+
+      showTime: Boolean,
+
+      selectionMode: {
+        type: String,
+        default: 'day'
+      },
+
+      shortcuts: {},
+
+      visible: Boolean
+    },
+
+    watch: {
+      value(newVal) {
+        if (this.selectionMode === 'day' && newVal instanceof Date) {
+          this.date = newVal;
+          this.year = newVal.getFullYear();
+          this.month = newVal.getMonth();
+        }
+      },
+
+      timePickerVisible(val) {
+        if (val) this.$refs.timepicker.ajustScrollTop();
+      },
+
+      selectionMode(newVal) {
+        if (newVal === 'month') {
+          if (this.currentView !== 'year' || this.currentView !== 'month') {
+            this.currentView = 'month';
+          }
+        }
+      },
+
+      date(newVal) {
+        if (!this.year) {
+          this.year = newVal.getFullYear();
+          this.month = newVal.getMonth();
+        }
+      }
+    },
+
+    ready() {
+      if (this.date && !this.year) {
+        this.year = this.date.getFullYear();
+        this.month = this.date.getMonth();
+      }
+    },
+
+    methods: {
+      $t: $t,
+
+      resetDate() {
+        this.date = new Date(this.date);
+      },
+
+      showMonthPicker() {
+        this.currentView = 'month';
+      },
+
+      showYearPicker() {
+        this.currentView = 'year';
+      },
+
+      handleLabelClick() {
+        if (this.currentView === 'date') {
+          this.showMonthPicker();
+        } else if (this.currentView === 'month') {
+          this.showYearPicker();
+        }
+      },
+
+      prevMonth() {
+        this.month--;
+        if (this.month < 0) {
+          this.month = 11;
+          this.year--;
+        }
+      },
+
+      nextMonth() {
+        this.month++;
+        if (this.month > 11) {
+          this.month = 0;
+          this.year++;
+        }
+      },
+
+      nextYear() {
+        if (this.currentView === 'year') {
+          this.$refs.yearTable.nextTenYear();
+        } else {
+          this.year++;
+        }
+      },
+
+      prevYear() {
+        if (this.currentView === 'year') {
+          this.$refs.yearTable.prevTenYear();
+        } else {
+          this.year--;
+        }
+      },
+
+      handleShortcutClick(shortcut) {
+        if (shortcut.onClick) {
+          shortcut.onClick(this);
+        }
+      },
+
+      handleTimePick(picker, visible, first) {
+        this.date = picker || this.date;
+
+        if (!first) {
+          this.timePickerVisible = visible;
+        }
+      },
+
+      handleMonthPick(month) {
+        this.month = month;
+        const selectionMode = this.selectionMode;
+        if (selectionMode !== 'month') {
+          this.date.setMonth(month);
+          this.currentView = 'date';
+          this.resetDate();
+        } else {
+          this.date.setMonth(month);
+          this.resetDate();
+          this.value = new Date(this.date.getFullYear(), month, 1);
+          this.$emit('pick', this.value);
+        }
+      },
+
+      handleDatePick(value) {
+        if (this.selectionMode === 'day') {
+          if (!this.showTime) {
+            this.$emit('pick', new Date(value.getTime()));
+          }
+          this.date.setFullYear(value.getFullYear());
+          this.date.setMonth(value.getMonth());
+          this.date.setDate(value.getDate());
+        } else if (this.selectionMode === 'week') {
+          let date = formatDate(value.date, this.format || 'yyyywWW');
+          const week = this.week = value.week;
+
+          date = /WW/.test(date)
+            ? date.replace(/WW/, week < 10 ? '0' + week : week)
+            : date.replace(/W/, week);
+
+          this.$emit('pick', date);
+        }
+
+        this.resetDate();
+      },
+
+      handleYearPick(year) {
+        this.year = year;
+        this.date.setFullYear(year);
+        if (this.selectionMode === 'year') {
+          this.$emit('pick', year);
+        } else {
+          this.currentView = 'month';
+        }
+
+        this.resetDate();
+      },
+
+      changeToToday() {
+        this.date.setTime(+new Date());
+        this.$emit('pick', new Date(this.date.getTime()));
+        this.resetDate();
+      },
+
+      confirm() {
+        this.$emit('pick', this.date);
+      },
+
+      resetView() {
+        if (this.selectionMode === 'month') {
+          this.currentView = 'month';
+        } else if (this.selectionMode === 'year') {
+          this.currentView = 'year';
+        } else {
+          this.currentView = 'date';
+        }
+
+        if (this.selectionMode !== 'week') {
+          this.year = this.date.getFullYear();
+          this.month = this.date.getMonth();
+        }
+      }
+    },
+
+    components: {
+      TimePicker: require('./time'),
+      YearTable: require('../basic/year-table'),
+      MonthTable: require('../basic/month-table'),
+      DateTable: require('../basic/date-table')
+    },
+
+    compiled() {
+      if (this.selectionMode === 'month') {
+        this.currentView = 'month';
+      }
+    },
+
+    data() {
+      return {
+        year: null,
+        month: null,
+        week: null,
+        timePickerVisible: false
+      };
+    },
+
+    computed: {
+      footerVisible() {
+        return this.showTime;
+      },
+
+      visibleTime: {
+        get() {
+          return formatDate(this.date, 'HH:mm:ss');
+        },
+
+        set(val) {
+          if (val) {
+            const date = parseDate(val, 'HH:mm:ss');
+            if (date) {
+              date.setFullYear(this.date.getFullYear());
+              date.setMonth(this.date.getMonth());
+              date.setDate(this.date.getDate());
+              this.date = date;
+            }
+          }
+        }
+      },
+
+      visibleDate: {
+        get() {
+          return formatDate(this.date);
+        },
+
+        set(val) {
+          const date = parseDate(val, 'yyyy-MM-dd');
+          if (date) {
+            date.setHours(this.date.getHours());
+            date.setMinutes(this.date.getMinutes());
+            date.setSeconds(this.date.getSeconds());
+            this.date = date;
+          }
+        }
+      },
+
+      yearLabel() {
+        const year = this.year;
+        if (!year) return '';
+        if (this.currentView === 'year') {
+          const startYear = Math.floor(year / 10) * 10;
+          return startYear + '年' + '-' + (startYear + 9) + '年';
+        }
+        return this.year + '年';
+      },
+
+      hours: {
+        get() {
+          return this.date.getHours();
+        },
+        set(hours) {
+          this.date.setHours(hours);
+        }
+      },
+
+      minutes: {
+        get() {
+          return this.date.getMinutes();
+        },
+        set(minutes) {
+          this.date.setMinutes(minutes);
+        }
+      },
+
+      seconds: {
+        get() {
+          return this.date.getSeconds();
+        },
+        set(seconds) {
+          this.date.setSeconds(seconds);
+        }
+      },
+
+      timeText() {
+        const hours = this.hours;
+        const minutes = this.minutes;
+        return (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes);
+      },
+
+      label() {
+        const year = this.year;
+        const month = this.month + 1;
+
+        if (this.currentView === 'date') {
+          return year + ' / ' + month;
+        }
+
+        return year;
+      }
+    }
+  };
+</script>
diff --git a/packages/date-picker/src/panel/time-range.vue b/packages/date-picker/src/panel/time-range.vue
new file mode 100644
index 000000000..6d9564061
--- /dev/null
+++ b/packages/date-picker/src/panel/time-range.vue
@@ -0,0 +1,240 @@
+<template>
+  <div
+    v-show="visible"
+    transition="md-fade-bottom"
+    class="el-time-range-picker el-picker-panel">
+    <div class="el-time-range-picker__content">
+      <div class="el-time-range-picker__cell">
+        <div class="el-time-range-picker__header">开始时间</div>
+        <div class="el-time-range-picker__body el-time-panel__content">
+          <time-spinner
+            v-ref:min-spinner
+            :show-seconds="showSeconds"
+            @change="handleMinChange"
+            @select-range="setMinSelectionRange"
+            :hours="minHours"
+            :minutes="minMinutes"
+            :seconds="minSeconds">
+          </time-spinner>
+        </div>
+      </div>
+      <div class="el-time-range-picker__cell">
+        <div class="el-time-range-picker__header">结束时间</div>
+        <div class="el-time-range-picker__body el-time-panel__content">
+          <time-spinner
+            v-ref:max-spinner
+            :show-seconds="showSeconds"
+            @change="handleMaxChange"
+            @select-range="setMaxSelectionRange"
+            :hours="maxHours"
+            :minutes="maxMinutes"
+            :seconds="maxSeconds">
+          </time-spinner>
+        </div>
+      </div>
+    </div>
+    <div class="el-time-panel__footer">
+      <button
+        class="el-time-panel__btn cancel"
+        @click="handleCancel()">取消</button>
+      <button
+        class="el-time-panel__btn confirm"
+        @click="handleConfirm()"
+        :disabled="btnDisabled">确定</button>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  import { parseDate, limitRange } from '../util';
+
+  const MIN_TIME = parseDate('00:00:00', 'HH:mm:ss');
+  const MAX_TIME = parseDate('23:59:59', 'HH:mm:ss');
+  const isDisabled = function(minTime, maxTime) {
+    const minValue = minTime.getHours() * 3600 + minTime.getMinutes() * 60 + minTime.getSeconds();
+    const maxValue = maxTime.getHours() * 3600 + maxTime.getMinutes() * 60 + maxTime.getSeconds();
+
+    return minValue > maxValue;
+  };
+
+  export default {
+    components: {
+      TimeSpinner: require('../basic/time-spinner')
+    },
+
+    props: {
+      minTime: {
+        default() {
+          return new Date();
+        }
+      },
+
+      maxTime: {
+        default() {
+          const date = new Date();
+          date.setHours(date.getHours() + 1);
+          return date;
+        }
+      },
+
+      format: {
+        default: 'HH:mm:ss'
+      },
+
+      visible: Boolean
+    },
+
+    computed: {
+      showSeconds() {
+        return (this.format || '').indexOf('ss') !== -1;
+      },
+
+      minHours: {
+        get() {
+          if (this.minTime) {
+            return this.minTime.getHours();
+          }
+          return 0;
+        },
+        set(hours) {
+          if (this.minTime) {
+            this.minTime.setHours(hours);
+          }
+        }
+      },
+
+      minMinutes: {
+        get() {
+          if (this.minTime) {
+            return this.minTime.getMinutes();
+          }
+          return 0;
+        },
+        set(minutes) {
+          if (this.minTime) {
+            this.minTime.setMinutes(minutes);
+          }
+        }
+      },
+
+      minSeconds: {
+        get() {
+          if (this.minTime) {
+            return this.minTime.getSeconds();
+          }
+          return 0;
+        },
+        set(seconds) {
+          if (this.minTime) {
+            this.minTime.setSeconds(seconds);
+          }
+        }
+      },
+
+      maxHours: {
+        get() {
+          if (this.maxTime) {
+            return this.maxTime.getHours();
+          }
+          return 0;
+        },
+        set(hours) {
+          if (this.maxTime) {
+            this.maxTime.setHours(hours);
+          }
+        }
+      },
+
+      maxMinutes: {
+        get() {
+          if (this.maxTime) {
+            return this.maxTime.getMinutes();
+          }
+          return 0;
+        },
+        set(minutes) {
+          if (this.maxTime) {
+            this.maxTime.setMinutes(minutes);
+          }
+        }
+      },
+
+      maxSeconds: {
+        get() {
+          if (this.maxTime) {
+            return this.maxTime.getSeconds();
+          }
+          return 0;
+        },
+        set(seconds) {
+          if (this.maxTime) {
+            this.maxTime.setSeconds(seconds);
+          }
+        }
+      }
+    },
+
+    data() {
+      return {
+        btnDisabled: isDisabled(this.minTime, this.maxTime)
+      };
+    },
+
+    methods: {
+      handleCancel() {
+        this.$emit('pick', null);
+      },
+
+      handleChange() {
+        this.$refs.minSpinner.selectableRange = [[MIN_TIME, this.maxTime]];
+        this.$refs.maxSpinner.selectableRange = [[this.minTime, MAX_TIME]];
+        this.handleConfirm(true);
+      },
+
+      handleMaxChange(date) {
+        if (date.hours !== undefined) this.maxHours = date.hours;
+        if (date.minutes !== undefined) this.maxMinutes = date.minutes;
+        if (date.seconds !== undefined) this.maxSeconds = date.seconds;
+        this.handleChange();
+      },
+
+      handleMinChange(date) {
+        if (date.hours !== undefined) this.minHours = date.hours;
+        if (date.minutes !== undefined) this.minMinutes = date.minutes;
+        if (date.seconds !== undefined) this.minSeconds = date.seconds;
+        this.handleChange();
+      },
+
+      setMinSelectionRange(start, end) {
+        this.$emit('select-range', start, end);
+      },
+
+      setMaxSelectionRange(start, end) {
+        this.$emit('select-range', start + 11, end + 11);
+      },
+
+      handleConfirm(visible = false, first = false) {
+        const minSelectableRange = this.$refs.minSpinner.selectableRange;
+        const maxSelectableRange = this.$refs.maxSpinner.selectableRange;
+
+        this.minTime = limitRange(this.minTime, minSelectableRange);
+        this.maxTime = limitRange(this.maxTime, maxSelectableRange);
+
+        this.$emit('pick', [this.minTime, this.maxTime], visible, first);
+      },
+
+      ajustScrollTop() {
+        this.$refs.minSpinner.ajustScrollTop();
+        this.$refs.maxSpinner.ajustScrollTop();
+      },
+
+      focusEditor(...args) {
+        return this.$refs.minSpinner.focusEditor(...args);
+      }
+    },
+
+    ready() {
+      this.$nextTick(() => this.handleConfirm(true, true));
+    }
+  };
+</script>
diff --git a/packages/date-picker/src/panel/time-select.vue b/packages/date-picker/src/panel/time-select.vue
new file mode 100644
index 000000000..2af5d8e2e
--- /dev/null
+++ b/packages/date-picker/src/panel/time-select.vue
@@ -0,0 +1,130 @@
+<template>
+  <div
+    v-show="visible"
+    class="el-picker-panel time-select"
+    transition="md-fade-bottom">
+    <div class="el-picker-panel__content">
+      <div class="time-select-item"
+        v-for="item in items"
+        :class="{ selected: value === item.value, disabled: item.disabled }"
+        :disabled="item.disabled"
+        @click="handleClick(item)">
+        {{ item.value }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  const parseTime = function(time) {
+    const values = ('' || time).split(':');
+    if (values.length >= 2) {
+      const hours = parseInt(values[0], 10);
+      const minutes = parseInt(values[1], 10);
+
+      return {
+        hours,
+        minutes
+      };
+    }
+    return null;
+  };
+
+  const compareTime = function(time1, time2) {
+    const value1 = parseTime(time1);
+    const value2 = parseTime(time2);
+
+    const minutes1 = value1.minutes + value1.hours * 60;
+    const minutes2 = value2.minutes + value2.hours * 60;
+
+    if (minutes1 === minutes2) {
+      return 0;
+    }
+
+    return minutes1 > minutes2 ? 1 : -1;
+  };
+
+  const formatTime = function(time) {
+    return (time.hours < 10 ? '0' + time.hours : time.hours) + ':' + (time.minutes < 10 ? '0' + time.minutes : time.minutes);
+  };
+
+  const nextTime = function(time, step) {
+    const timeValue = parseTime(time);
+    const stepValue = parseTime(step);
+
+    const next = {
+      hours: timeValue.hours,
+      minutes: timeValue.minutes
+    };
+
+    next.minutes += stepValue.minutes;
+    next.hours += stepValue.hours;
+
+    next.hours += Math.floor(next.minutes / 60);
+    next.minutes = next.minutes % 60;
+
+    return formatTime(next);
+  };
+
+  export default {
+    props: {
+      start: {
+        default: '09:00'
+      },
+
+      end: {
+        default: '18:00'
+      },
+
+      step: {
+        default: '00:30'
+      },
+
+      value: {},
+
+      visible: Boolean,
+
+      minTime: {}
+    },
+
+    watch: {
+      minTime(val) {
+        if (this.value && val && compareTime(this.value, val) === -1) {
+          this.$emit('pick');
+        }
+      }
+    },
+
+    methods: {
+      handleClick(item) {
+        if (!item.disabled) {
+          this.$emit('pick', item.value);
+          this.value = item.value;
+        }
+      }
+    },
+
+    computed: {
+      items() {
+        const start = this.start;
+        const end = this.end;
+        const step = this.step;
+
+        const result = [];
+
+        if (start && end && step) {
+          let current = start;
+          while (compareTime(current, end) === -1) {
+            result.push({
+              value: current,
+              disabled: compareTime(current, this.minTime || '00:00') <= 0
+            });
+            current = nextTime(current, step);
+          }
+        }
+
+        return result;
+      }
+    }
+  };
+</script>
diff --git a/packages/date-picker/src/panel/time.vue b/packages/date-picker/src/panel/time.vue
new file mode 100644
index 000000000..556ed5ffc
--- /dev/null
+++ b/packages/date-picker/src/panel/time.vue
@@ -0,0 +1,155 @@
+<template>
+  <div
+    v-show="visible"
+    transition="md-fade-bottom"
+    class="el-time-panel">
+    <div class="el-time-panel__content">
+      <time-spinner
+        v-ref:spinner
+        @change="handleChange"
+        :show-seconds="showSeconds"
+        :hours="hours"
+        :minutes="minutes"
+        @select-range="setSelectionRange"
+        :seconds="seconds">
+      </time-spinner>
+    </div>
+    <div class="el-time-panel__footer">
+      <button
+        class="el-time-panel__btn
+        cancel" @click="handleCancel()">取消</button>
+      <button
+        class="el-time-panel__btn confirm"
+        @click="handleConfirm()">确定</button>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  import { limitRange } from '../util';
+
+  export default {
+    components: {
+      TimeSpinner: require('../basic/time-spinner')
+    },
+
+    props: {
+      date: {
+        default() {
+          return new Date();
+        }
+      },
+
+      format: {
+        default: 'HH:mm:ss'
+      },
+
+      value: {},
+
+      visible: Boolean,
+
+      selectableRange: {}
+    },
+
+    watch: {
+      value(newVal) {
+        if (newVal instanceof Date) {
+          this.date = newVal;
+        } else if (!newVal) {
+          this.date = new Date();
+        }
+      }
+    },
+
+    computed: {
+      showSeconds() {
+        return (this.format || '').indexOf('ss') !== -1;
+      },
+
+      hours: {
+        get() {
+          if (this.date) {
+            return this.date.getHours();
+          }
+          return 0;
+        },
+        set(hours) {
+          if (this.date) {
+            this.date.setHours(hours);
+          }
+        }
+      },
+
+      minutes: {
+        get() {
+          if (this.date) {
+            return this.date.getMinutes();
+          }
+          return 0;
+        },
+        set(minutes) {
+          if (this.date) {
+            this.date.setMinutes(minutes);
+          }
+        }
+      },
+
+      seconds: {
+        get() {
+          if (this.date) {
+            return this.date.getSeconds();
+          }
+          return 0;
+        },
+        set(seconds) {
+          if (this.date) {
+            this.date.setSeconds(seconds);
+          }
+        }
+      }
+    },
+
+    methods: {
+      handleCancel() {
+        this.$emit('pick', null);
+      },
+
+      handleChange(date) {
+        if (date.hours !== undefined) this.hours = date.hours;
+        if (date.minutes !== undefined) this.minutes = date.minutes;
+        if (date.seconds !== undefined) this.seconds = date.seconds;
+        this.handleConfirm(true);
+      },
+
+      setSelectionRange(start, end) {
+        this.$emit('select-range', start, end);
+      },
+
+      handleConfirm(visible = false, first) {
+        const spinner = this.$refs.spinner;
+        let date = new Date();
+
+        const { hours, minutes, seconds } = spinner;
+        date.setHours(hours);
+        date.setMinutes(minutes);
+        date.setSeconds(seconds);
+
+        this.date = date = limitRange(date, this.selectableRange);
+        this.$emit('pick', date, visible, first);
+      },
+
+      focusEditor(...args) {
+        return this.$refs.spinner.focusEditor(...args);
+      },
+
+      ajustScrollTop() {
+        return this.$refs.spinner.ajustScrollTop();
+      }
+    },
+
+    ready() {
+      this.$refs.spinner.selectableRange = this.selectableRange;
+      this.$nextTick(() => this.handleConfirm(true, true));
+    }
+  };
+</script>
diff --git a/packages/date-picker/src/picker.vue b/packages/date-picker/src/picker.vue
new file mode 100644
index 000000000..b0fdc217a
--- /dev/null
+++ b/packages/date-picker/src/picker.vue
@@ -0,0 +1,493 @@
+<template>
+  <span
+    class="el-date-editor"
+    v-clickoutside="pickerVisible = false"
+    :class="{
+      'is-have-trigger': haveTrigger,
+      'is-active': pickerVisible,
+      'is-filled': !!this.value,
+      'is-lg': size === 'lg', 'is-sm': size === 'sm'
+    }">
+
+    <input
+      lazy
+      class="el-date-editor__editor"
+      :readonly="readonly"
+      :type="editorType"
+      :placeholder="placeholder"
+      :style="{ height: height ? height + 'px' : '' }"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @keydown="handleKeydown($event)"
+      @keyup="handleKeyup($event)"
+      v-el:reference
+      v-model="visualValue" />
+
+    <span
+      @click="togglePicker()"
+      class="el-date-editor__trigger el-icon {{triggerClass}}"
+      v-if="haveTrigger">
+    </span>
+  </span>
+</template>
+
+<script>
+import Vue from 'vue';
+import { merge, formatDate, parseDate, getWeekNumber } from './util';
+import Popper from 'main/utils/popper.js';
+
+const FUNCTION_KEYS = [13, 16, 17, 18, 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40];
+const RANGE_SEPARATOR = ' - ';
+const DEFAULT_FORMATS = {
+  date: 'yyyy-MM-dd',
+  month: 'yyyy-MM',
+  datetime: 'yyyy-MM-dd HH:mm:ss',
+  time: 'HH:mm:ss',
+  timerange: 'HH:mm:ss',
+  daterange: 'yyyy-MM-dd',
+  datetimerange: 'yyyy-MM-dd HH:mm:ss'
+};
+const HAVE_TRIGGER_TYPES = [
+  'date',
+  'datetime',
+  'time',
+  'time-select',
+  'week',
+  'month',
+  'year',
+  'daterange',
+  'timerange',
+  'datetimerange'
+];
+const DATE_FORMATTER = function(value, format) {
+  return formatDate(value, format);
+};
+const DATE_PARSER = function(text, format) {
+  text = text.split(':');
+  if (text.length > 1) text = text.map(item => item.slice(-2));
+  text = text.join(':');
+
+  return parseDate(text, format);
+};
+const RANGE_FORMATTER = function(value, format) {
+  if (Array.isArray(value) && value.length === 2) {
+    const start = value[0];
+    const end = value[1];
+
+    if (start && end) {
+      return formatDate(start, format) + RANGE_SEPARATOR + formatDate(end, format);
+    }
+  }
+  return '';
+};
+const RANGE_PARSER = function(text, format) {
+  const array = text.split(RANGE_SEPARATOR);
+  if (array.length === 2) {
+    const range1 = array[0].split(':').map(item => item.slice(-2)).join(':');
+    const range2 = array[1].split(':').map(item => item.slice(-2)).join(':');
+    return [parseDate(range1, format), parseDate(range2, format)];
+  }
+  return [];
+};
+const TYPE_VALUE_RESOLVER_MAP = {
+  default: {
+    formatter(value) {
+      if (!value) return '';
+      return '' + value;
+    },
+    parser(text) {
+      if (text === undefined || text === '') return null;
+      return text;
+    }
+  },
+  week: {
+    formatter(value) {
+      if (value instanceof Date) {
+        const weekNumber = getWeekNumber(value);
+        return value.getFullYear() + 'w' + (weekNumber > 9 ? weekNumber : '0' + weekNumber);
+      }
+      return value;
+    },
+    parser(text) {
+      const array = (text || '').split('w');
+      if (array.length === 2) {
+        const year = Number(array[0]);
+        const month = Number(array[1]);
+
+        if (!isNaN(year) && !isNaN(month) && month < 54) {
+          return text;
+        }
+      }
+      return null;
+    }
+  },
+  date: {
+    formatter: DATE_FORMATTER,
+    parser: DATE_PARSER
+  },
+  datetime: {
+    formatter: DATE_FORMATTER,
+    parser: DATE_PARSER
+  },
+  daterange: {
+    formatter: RANGE_FORMATTER,
+    parser: RANGE_PARSER
+  },
+  datetimerange: {
+    formatter: RANGE_FORMATTER,
+    parser: RANGE_PARSER
+  },
+  timerange: {
+    formatter: RANGE_FORMATTER,
+    parser: RANGE_PARSER
+  },
+  time: {
+    formatter: DATE_FORMATTER,
+    parser: DATE_PARSER
+  },
+  month: {
+    formatter: DATE_FORMATTER,
+    parser: DATE_PARSER
+  },
+  year: {
+    formatter(value) {
+      if (!value) return '';
+      return '' + value;
+    },
+    parser(text) {
+      const year = Number(text);
+      if (!isNaN(year)) return year;
+
+      return null;
+    }
+  },
+  number: {
+    formatter(value) {
+      if (!value) return '';
+      return '' + value;
+    },
+    parser(text) {
+      let result = Number(text);
+
+      if (!isNaN(text)) {
+        return result;
+      } else {
+        return null;
+      }
+    }
+  }
+};
+
+export default {
+  props: {
+    format: String,
+    readonly: Boolean,
+    placeholder: String,
+    value: {},
+    haveTrigger: {},
+    pickerOptions: {}
+  },
+
+  directives: {
+    clickoutside: require('vue-clickoutside')
+  },
+
+  data() {
+    return {
+      pickerVisible: false
+    };
+  },
+
+  watch: {
+    pickerVisible(val) {
+      val === true ? this.showPicker() : this.hidePicker();
+    }
+  },
+
+  computed: {
+    triggerClass() {
+      return this.type.indexOf('time') !== -1 ? 'el-icon-time' : 'el-icon-date';
+    },
+
+    editable() {
+      return this.type.indexOf('range') === -1;
+    },
+
+    selectionMode() {
+      if (this.type === 'week') {
+        return 'week';
+      } else if (this.type === 'month') {
+        return 'month';
+      } else if (this.type === 'year') {
+        return 'year';
+      }
+
+      return 'day';
+    },
+
+    haveTrigger() {
+      if (typeof this.showTrigger !== 'undefined') {
+        return this.showTrigger;
+      }
+      return HAVE_TRIGGER_TYPES.indexOf(this.type) !== -1;
+    },
+
+    visualValue: {
+      get() {
+        const value = this.value;
+        const formatter = (
+          TYPE_VALUE_RESOLVER_MAP[this.type] ||
+          TYPE_VALUE_RESOLVER_MAP['default']
+        ).formatter;
+        const format = DEFAULT_FORMATS[this.type];
+
+        return formatter(value, this.format || format);
+      },
+
+      set(value) {
+        if (value) {
+          const type = this.type;
+          const parser = (
+            TYPE_VALUE_RESOLVER_MAP[type] ||
+            TYPE_VALUE_RESOLVER_MAP['default']
+          ).parser;
+          const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]);
+
+          if (parsedValue) {
+            this.value = parsedValue;
+          }
+          return;
+        }
+        this.value = value;
+      }
+    },
+
+    editorType() {
+      return 'text';
+    }
+  },
+
+  methods: {
+    handleFocus() {
+      const type = this.type;
+
+      if (HAVE_TRIGGER_TYPES.indexOf(type) !== -1) {
+        if (!this.pickerVisible) {
+          this.showPicker();
+        }
+      }
+      this.$emit('focus', this);
+    },
+
+    handleBlur() {
+      this.$emit('blur', this);
+    },
+
+    handleKeydown(event) {
+      const keyCode = event.keyCode;
+      let selectionStart = event.target.selectionStart;
+      let selectionEnd = event.target.selectionEnd;
+      let length = event.target.value.length;
+
+      if (keyCode === 27) {
+        this.pickerVisible = this.picker.visible = false;
+      // left
+      } else if (keyCode === 37) {
+        event.preventDefault();
+
+        if (selectionEnd === length && selectionStart === length) {
+          event.target.selectionStart = length - 2;
+        } else if (selectionStart >= 3) {
+          event.target.selectionStart -= 3;
+        } else {
+          event.target.selectionStart = 0;
+        }
+        event.target.selectionEnd = event.target.selectionStart + 2;
+      // right
+      } else if (keyCode === 39) {
+        event.preventDefault();
+        if (selectionEnd === 0 && selectionStart === 0) {
+          event.target.selectionEnd = 2;
+        } else if (selectionEnd <= length - 3) {
+          event.target.selectionEnd += 3;
+        } else {
+          event.target.selectionEnd = length;
+        }
+        event.target.selectionStart = event.target.selectionEnd - 2;
+      }
+    },
+
+    handleKeyup(event) {
+      const keyCode = event.keyCode;
+      if (FUNCTION_KEYS.indexOf(keyCode) > -1) return;
+      if (!(this.picker && this.pickerVisible)) return;
+      const selectionStart = event.target.selectionStart;
+      const value = event.target.value;
+      const type = this.type;
+      const parser = (
+        TYPE_VALUE_RESOLVER_MAP[type] ||
+        TYPE_VALUE_RESOLVER_MAP['default']
+      ).parser;
+      const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]);
+
+      if (!parsedValue) return;
+      this.picker.value = this.value = parsedValue;
+
+      if (this.type.indexOf('date') > -1) return;
+
+      setTimeout(_ => {
+        let start = selectionStart;
+        let end = selectionStart;
+        const offset = 2;
+
+        if (selectionStart === 9) {
+          start += offset;
+        }
+        if (selectionStart >= 12) {
+          if (selectionStart % 3 === 0) {
+            start += 1;
+            end = start;
+          } else if (selectionStart % 3 === 2) {
+            end = start + offset;
+          }
+        } else {
+          if (selectionStart % 3 === 1) {
+            start += 1;
+            end = start;
+          } else if (selectionStart % 3 === 0) {
+            end = start + offset;
+          }
+        }
+
+        event.target.selectionStart = start;
+        event.target.selectionEnd = end;
+      }, 0);
+    },
+
+    togglePicker() {
+      !this.pickerVisible ? this.showPicker() : this.hidePicker();
+    },
+
+    destroyPopper() {
+      if (this.popper) {
+        this.resetTransformOrigin(this.popper);
+        setTimeout(() => {
+          this.popper && this.popper.destroy();
+          this.popper = null;
+        }, 300);
+      }
+    },
+
+    hidePicker() {
+      if (this.picker) {
+        this.picker.resetView && this.picker.resetView();
+        this.pickerVisible = this.picker.visible = false;
+        this.destroyPopper();
+      }
+    },
+
+    showPicker() {
+      if (!this.picker) {
+        this.picker = new Vue(merge({
+          el: document.createElement('div'),
+          replace: true
+        }, this.panel));
+        this.picker.showTime = this.type === 'datetime' || this.type === 'datetimerange';
+        this.picker.selectionMode = this.selectionMode;
+        if (this.format) {
+          this.picker.format = this.format;
+        }
+
+        const options = this.pickerOptions;
+
+        if (options && options.selectableRange) {
+          let ranges = options.selectableRange;
+          const parser = TYPE_VALUE_RESOLVER_MAP.datetimerange.parser;
+          const format = DEFAULT_FORMATS.timerange;
+
+          ranges = Array.isArray(ranges) ? ranges : [ranges];
+          this.picker.selectableRange = ranges.map(range => parser(range, format));
+          delete this.pickerOptions.selectableRange;
+        }
+
+        if (this.type === 'time-select' && options) {
+          this.$watch('pickerOptions.minTime', val => {
+            this.picker.minTime = val;
+          });
+        }
+
+        for (const option in options) {
+          if (options.hasOwnProperty(option)) {
+            this.picker[option] = options[option];
+          }
+        }
+
+        this.$el.appendChild(this.picker.$el);
+        this.pickerVisible = this.picker.visible = true;
+        this.picker.resetView && this.picker.resetView();
+
+        this.picker.$on('pick', (date, visible = false) => {
+          this.value = date;
+
+          if (!visible) {
+            this.pickerVisible = this.picker.visible = false;
+          }
+          this.picker.resetView && this.picker.resetView();
+        });
+
+        this.picker.$on('select-range', (start, end) => {
+          setTimeout(() => {
+            this.$els.reference.setSelectionRange(start, end);
+            this.$els.reference.focus();
+          }, 0);
+        });
+      } else {
+        this.pickerVisible = this.picker.visible = true;
+      }
+
+      this.$nextTick(() => {
+        if (this.popper) {
+          this.popper.update();
+          return;
+        }
+
+        this.popper = new Popper(this.$els.reference, this.picker.$el, {
+          gpuAcceleration: false,
+          placement: 'bottom-start',
+          boundariesPadding: 0,
+          forceAbsolute: true
+        });
+
+        this.popper.onCreate(popper => {
+          this.resetTransformOrigin(popper);
+        });
+      });
+
+      if (this.value instanceof Date) {
+        this.picker.date = new Date(this.value.getTime());
+        this.picker.resetView && this.picker.resetView();
+      } else {
+        this.picker.value = this.value;
+      }
+
+      this.$nextTick(() => {
+        if (this.type.indexOf('time') !== -1) {
+          this.picker.focusEditor && this.picker.focusEditor('hours');
+        }
+        this.picker.ajustScrollTop && this.picker.ajustScrollTop();
+      });
+    },
+
+    resetTransformOrigin(popper) {
+      let placementMap = { top: 'bottom', bottom: 'top' };
+      let placement = popper._popper.getAttribute('x-placement').split('-')[0];
+      let origin = placementMap[placement];
+      popper._popper.style.transformOrigin = `center ${ origin }`;
+    }
+  },
+
+  beforeDestroy() {
+    this.popper && this.popper.destroy();
+  }
+};
+</script>
diff --git a/packages/date-picker/src/picker/date-picker.js b/packages/date-picker/src/picker/date-picker.js
new file mode 100644
index 000000000..17a55b48f
--- /dev/null
+++ b/packages/date-picker/src/picker/date-picker.js
@@ -0,0 +1,25 @@
+import Picker from '../picker';
+import DatePanel from '../panel/date';
+import DateRangePanel from '../panel/date-range';
+
+const getPanel = function(type) {
+  if (type === 'daterange' || type === 'datetimerange') {
+    return DateRangePanel;
+  }
+  return DatePanel;
+};
+
+export default {
+  mixins: [Picker],
+
+  name: 'ElDatePicker',
+
+  props: {
+    type: String,
+    default: 'date'
+  },
+
+  created() {
+    this.panel = getPanel(this.type);
+  }
+};
diff --git a/packages/date-picker/src/picker/time-picker.js b/packages/date-picker/src/picker/time-picker.js
new file mode 100644
index 000000000..d127d2cdd
--- /dev/null
+++ b/packages/date-picker/src/picker/time-picker.js
@@ -0,0 +1,18 @@
+import Picker from '../picker';
+import TimePanel from '../panel/time';
+import TimeRangePanel from '../panel/time-range';
+
+export default {
+  mixins: [Picker],
+
+  name: 'ElTimePicker',
+
+  props: {
+    isRange: Boolean
+  },
+
+  created() {
+    this.type = this.isRange ? 'timerange' : 'time';
+    this.panel = this.isRange ? TimeRangePanel : TimePanel;
+  }
+};
diff --git a/packages/date-picker/src/picker/time-select.js b/packages/date-picker/src/picker/time-select.js
new file mode 100644
index 000000000..496849590
--- /dev/null
+++ b/packages/date-picker/src/picker/time-select.js
@@ -0,0 +1,13 @@
+import Picker from '../picker';
+import Panel from '../panel/time-select';
+
+export default {
+  mixins: [Picker],
+
+  name: 'ElTimeSelect',
+
+  created() {
+    this.type = 'time-select';
+    this.panel = Panel;
+  }
+};
diff --git a/packages/date-picker/src/util/dropdown.js b/packages/date-picker/src/util/dropdown.js
new file mode 100644
index 000000000..f78e7e523
--- /dev/null
+++ b/packages/date-picker/src/util/dropdown.js
@@ -0,0 +1,27 @@
+var dropdowns = [];
+
+document.addEventListener('click', function(event) {
+  dropdowns.forEach(function(dropdown) {
+    var target = event.target;
+    if (!dropdown || !dropdown.$el) return;
+    if (target === dropdown.$el || dropdown.$el.contains(target)) {
+      return;
+    }
+    dropdown.onDocumentClick && dropdown.onDocumentClick(event);
+  });
+});
+
+export default {
+  open(instance) {
+    if (instance) {
+      dropdowns.push(instance);
+    }
+  },
+
+  close(instance) {
+    var index = dropdowns.indexOf(instance);
+    if (index !== -1) {
+      dropdowns.splice(instance, 1);
+    }
+  }
+};
diff --git a/packages/date-picker/src/util/fecha.js b/packages/date-picker/src/util/fecha.js
new file mode 100644
index 000000000..2a59b4261
--- /dev/null
+++ b/packages/date-picker/src/util/fecha.js
@@ -0,0 +1,319 @@
+/*eslint-disable*/
+// 把 YYYY-MM-DD 改成了 yyyy-MM-dd
+(function (main) {
+  'use strict';
+
+  /**
+   * Parse or format dates
+   * @class fecha
+   */
+  var fecha = {};
+  var token = /d{1,4}|M{1,4}|yy(?:yy)?|S{1,3}|Do|ZZ|([HhMsDm])\1?|[aA]|"[^"]*"|'[^']*'/g;
+  var twoDigits = /\d\d?/;
+  var threeDigits = /\d{3}/;
+  var fourDigits = /\d{4}/;
+  var word = /[0-9]*['a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+|[\u0600-\u06FF\/]+(\s*?[\u0600-\u06FF]+){1,2}/i;
+  var noop = function () {
+  };
+
+  function shorten(arr, sLen) {
+    var newArr = [];
+    for (var i = 0, len = arr.length; i < len; i++) {
+      newArr.push(arr[i].substr(0, sLen));
+    }
+    return newArr;
+  }
+
+  function monthUpdate(arrName) {
+    return function (d, v, i18n) {
+      var index = i18n[arrName].indexOf(v.charAt(0).toUpperCase() + v.substr(1).toLowerCase());
+      if (~index) {
+        d.month = index;
+      }
+    };
+  }
+
+  function pad(val, len) {
+    val = String(val);
+    len = len || 2;
+    while (val.length < len) {
+      val = '0' + val;
+    }
+    return val;
+  }
+
+  var dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+  var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+  var monthNamesShort = shorten(monthNames, 3);
+  var dayNamesShort = shorten(dayNames, 3);
+  fecha.i18n = {
+    dayNamesShort: dayNamesShort,
+    dayNames: dayNames,
+    monthNamesShort: monthNamesShort,
+    monthNames: monthNames,
+    amPm: ['am', 'pm'],
+    DoFn: function DoFn(D) {
+      return D + ['th', 'st', 'nd', 'rd'][D % 10 > 3 ? 0 : (D - D % 10 !== 10) * D % 10];
+    }
+  };
+
+  var formatFlags = {
+    D: function(dateObj) {
+      return dateObj.getDay();
+    },
+    DD: function(dateObj) {
+      return pad(dateObj.getDay());
+    },
+    Do: function(dateObj, i18n) {
+      return i18n.DoFn(dateObj.getDate());
+    },
+    d: function(dateObj) {
+      return dateObj.getDate();
+    },
+    dd: function(dateObj) {
+      return pad(dateObj.getDate());
+    },
+    ddd: function(dateObj, i18n) {
+      return i18n.dayNamesShort[dateObj.getDay()];
+    },
+    dddd: function(dateObj, i18n) {
+      return i18n.dayNames[dateObj.getDay()];
+    },
+    M: function(dateObj) {
+      return dateObj.getMonth() + 1;
+    },
+    MM: function(dateObj) {
+      return pad(dateObj.getMonth() + 1);
+    },
+    MMM: function(dateObj, i18n) {
+      return i18n.monthNamesShort[dateObj.getMonth()];
+    },
+    MMMM: function(dateObj, i18n) {
+      return i18n.monthNames[dateObj.getMonth()];
+    },
+    yy: function(dateObj) {
+      return String(dateObj.getFullYear()).substr(2);
+    },
+    yyyy: function(dateObj) {
+      return dateObj.getFullYear();
+    },
+    h: function(dateObj) {
+      return dateObj.getHours() % 12 || 12;
+    },
+    hh: function(dateObj) {
+      return pad(dateObj.getHours() % 12 || 12);
+    },
+    H: function(dateObj) {
+      return dateObj.getHours();
+    },
+    HH: function(dateObj) {
+      return pad(dateObj.getHours());
+    },
+    m: function(dateObj) {
+      return dateObj.getMinutes();
+    },
+    mm: function(dateObj) {
+      return pad(dateObj.getMinutes());
+    },
+    s: function(dateObj) {
+      return dateObj.getSeconds();
+    },
+    ss: function(dateObj) {
+      return pad(dateObj.getSeconds());
+    },
+    S: function(dateObj) {
+      return Math.round(dateObj.getMilliseconds() / 100);
+    },
+    SS: function(dateObj) {
+      return pad(Math.round(dateObj.getMilliseconds() / 10), 2);
+    },
+    SSS: function(dateObj) {
+      return pad(dateObj.getMilliseconds(), 3);
+    },
+    a: function(dateObj, i18n) {
+      return dateObj.getHours() < 12 ? i18n.amPm[0] : i18n.amPm[1];
+    },
+    A: function(dateObj, i18n) {
+      return dateObj.getHours() < 12 ? i18n.amPm[0].toUpperCase() : i18n.amPm[1].toUpperCase();
+    },
+    ZZ: function(dateObj) {
+      var o = dateObj.getTimezoneOffset();
+      return (o > 0 ? '-' : '+') + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4);
+    }
+  };
+
+  var parseFlags = {
+    d: [twoDigits, function (d, v) {
+      d.day = v;
+    }],
+    M: [twoDigits, function (d, v) {
+      d.month = v - 1;
+    }],
+    yy: [twoDigits, function (d, v) {
+      var da = new Date(), cent = +('' + da.getFullYear()).substr(0, 2);
+      d.year = '' + (v > 68 ? cent - 1 : cent) + v;
+    }],
+    h: [twoDigits, function (d, v) {
+      d.hour = v;
+    }],
+    m: [twoDigits, function (d, v) {
+      d.minute = v;
+    }],
+    s: [twoDigits, function (d, v) {
+      d.second = v;
+    }],
+    yyyy: [fourDigits, function (d, v) {
+      d.year = v;
+    }],
+    S: [/\d/, function (d, v) {
+      d.millisecond = v * 100;
+    }],
+    SS: [/\d{2}/, function (d, v) {
+      d.millisecond = v * 10;
+    }],
+    SSS: [threeDigits, function (d, v) {
+      d.millisecond = v;
+    }],
+    D: [twoDigits, noop],
+    ddd: [word, noop],
+    MMM: [word, monthUpdate('monthNamesShort')],
+    MMMM: [word, monthUpdate('monthNames')],
+    a: [word, function (d, v, i18n) {
+      var val = v.toLowerCase();
+      if (val === i18n.amPm[0]) {
+        d.isPm = false;
+      } else if (val === i18n.amPm[1]) {
+        d.isPm = true;
+      }
+    }],
+    ZZ: [/[\+\-]\d\d:?\d\d/, function (d, v) {
+      var parts = (v + '').match(/([\+\-]|\d\d)/gi), minutes;
+
+      if (parts) {
+        minutes = +(parts[1] * 60) + parseInt(parts[2], 10);
+        d.timezoneOffset = parts[0] === '+' ? minutes : -minutes;
+      }
+    }]
+  };
+  parseFlags.DD = parseFlags.DD;
+  parseFlags.dddd = parseFlags.ddd;
+  parseFlags.Do = parseFlags.dd = parseFlags.d;
+  parseFlags.mm = parseFlags.m;
+  parseFlags.hh = parseFlags.H = parseFlags.HH = parseFlags.h;
+  parseFlags.MM = parseFlags.M;
+  parseFlags.ss = parseFlags.s;
+  parseFlags.A = parseFlags.a;
+
+
+  // Some common format strings
+  fecha.masks = {
+    'default': 'ddd MMM dd yyyy HH:mm:ss',
+    shortDate: 'M/D/yy',
+    mediumDate: 'MMM d, yyyy',
+    longDate: 'MMMM d, yyyy',
+    fullDate: 'dddd, MMMM d, yyyy',
+    shortTime: 'HH:mm',
+    mediumTime: 'HH:mm:ss',
+    longTime: 'HH:mm:ss.SSS'
+  };
+
+  /***
+   * Format a date
+   * @method format
+   * @param {Date|number} dateObj
+   * @param {string} mask Format of the date, i.e. 'mm-dd-yy' or 'shortDate'
+   */
+  fecha.format = function (dateObj, mask, i18nSettings) {
+    var i18n = i18nSettings || fecha.i18n;
+
+    if (typeof dateObj === 'number') {
+      dateObj = new Date(dateObj);
+    }
+
+    if (Object.prototype.toString.call(dateObj) !== '[object Date]' || isNaN(dateObj.getTime())) {
+      throw new Error('Invalid Date in fecha.format');
+    }
+
+    mask = fecha.masks[mask] || mask || fecha.masks['default'];
+
+    return mask.replace(token, function ($0) {
+      return $0 in formatFlags ? formatFlags[$0](dateObj, i18n) : $0.slice(1, $0.length - 1);
+    });
+  };
+
+  /**
+   * Parse a date string into an object, changes - into /
+   * @method parse
+   * @param {string} dateStr Date string
+   * @param {string} format Date parse format
+   * @returns {Date|boolean}
+   */
+  fecha.parse = function (dateStr, format, i18nSettings) {
+    var i18n = i18nSettings || fecha.i18n;
+
+    if (typeof format !== 'string') {
+      throw new Error('Invalid format in fecha.parse');
+    }
+
+    format = fecha.masks[format] || format;
+
+    // Avoid regular expression denial of service, fail early for really long strings
+    // https://www.owasp.org/index.php/Regular_expression_Denial_of_Service_-_ReDoS
+    if (dateStr.length > 1000) {
+      return false;
+    }
+
+    var isValid = true;
+    var dateInfo = {};
+    format.replace(token, function ($0) {
+      if (parseFlags[$0]) {
+        var info = parseFlags[$0];
+        var index = dateStr.search(info[0]);
+        if (!~index) {
+          isValid = false;
+        } else {
+          dateStr.replace(info[0], function (result) {
+            info[1](dateInfo, result, i18n);
+            dateStr = dateStr.substr(index + result.length);
+            return result;
+          });
+        }
+      }
+
+      return parseFlags[$0] ? '' : $0.slice(1, $0.length - 1);
+    });
+
+    if (!isValid) {
+      return false;
+    }
+
+    var today = new Date();
+    if (dateInfo.isPm === true && dateInfo.hour != null && +dateInfo.hour !== 12) {
+      dateInfo.hour = +dateInfo.hour + 12;
+    } else if (dateInfo.isPm === false && +dateInfo.hour === 12) {
+      dateInfo.hour = 0;
+    }
+
+    var date;
+    if (dateInfo.timezoneOffset != null) {
+      dateInfo.minute = +(dateInfo.minute || 0) - +dateInfo.timezoneOffset;
+      date = new Date(Date.UTC(dateInfo.year || today.getFullYear(), dateInfo.month || 0, dateInfo.day || 1,
+        dateInfo.hour || 0, dateInfo.minute || 0, dateInfo.second || 0, dateInfo.millisecond || 0));
+    } else {
+      date = new Date(dateInfo.year || today.getFullYear(), dateInfo.month || 0, dateInfo.day || 1,
+        dateInfo.hour || 0, dateInfo.minute || 0, dateInfo.second || 0, dateInfo.millisecond || 0);
+    }
+    return date;
+  };
+
+  /* istanbul ignore next */
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = fecha;
+  } else if (typeof define === 'function' && define.amd) {
+    define(function () {
+      return fecha;
+    });
+  } else {
+    main.fecha = fecha;
+  }
+})(this);
diff --git a/packages/date-picker/src/util/i18n.js b/packages/date-picker/src/util/i18n.js
new file mode 100644
index 000000000..959b29b8a
--- /dev/null
+++ b/packages/date-picker/src/util/i18n.js
@@ -0,0 +1,31 @@
+export default {
+  datepicker: {
+    today: '此刻',
+    clear: '清空',
+    confirm: '确定',
+    week: '周次',
+    weeks: {
+      sun: '日',
+      mon: '一',
+      tue: '二',
+      wed: '三',
+      thu: '四',
+      fri: '五',
+      sat: '六'
+    },
+    months: {
+      jan: '一月',
+      feb: '二月',
+      mar: '三月',
+      apr: '四月',
+      may: '五月',
+      jun: '六月',
+      jul: '七月',
+      aug: '八月',
+      sep: '九月',
+      oct: '十月',
+      nov: '十一月',
+      dec: '十二月'
+    }
+  }
+};
diff --git a/packages/date-picker/src/util/index.js b/packages/date-picker/src/util/index.js
new file mode 100644
index 000000000..a6ddbeffd
--- /dev/null
+++ b/packages/date-picker/src/util/index.js
@@ -0,0 +1,183 @@
+import dateUtil from './fecha';
+
+const newArray = function(start, end) {
+  let result = [];
+  for (let i = start; i <= end; i++) {
+    result.push(i);
+  }
+  return result;
+};
+
+export const merge = function(target) {
+  for (var i = 1, j = arguments.length; i < j; i++) {
+    var source = arguments[i];
+    for (var prop in source) {
+      if (source.hasOwnProperty(prop)) {
+        var value = source[prop];
+        if (value !== undefined) {
+          target[prop] = value;
+        }
+      }
+    }
+  }
+
+  return target;
+};
+
+export const formatDate = function(date, format) {
+  if (!(date instanceof Date)) return '';
+  return dateUtil.format(date, format || 'yyyy-MM-dd');
+};
+
+export const parseDate = function(string, format) {
+  return dateUtil.parse(string, format || 'yyyy-MM-dd');
+};
+
+export const getDayCountOfMonth = function(year, month) {
+  if (month === 3 || month === 5 || month === 8 || month === 10) {
+    return 30;
+  }
+
+  if (month === 1) {
+    if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
+      return 29;
+    } else {
+      return 28;
+    }
+  }
+
+  return 31;
+};
+
+export const getFirstDayOfMonth = function(date) {
+  const temp = new Date(date.getTime());
+  temp.setDate(1);
+  return temp.getDay();
+};
+
+export const DAY_DURATION = 86400000;
+
+export const getStartDateOfMonth = function(year, month) {
+  const result = new Date(year, month, 1);
+  const day = result.getDay();
+
+  if (day === 0) {
+    result.setTime(result.getTime() - DAY_DURATION * 7);
+  } else {
+    result.setTime(result.getTime() - DAY_DURATION * day);
+  }
+
+  return result;
+};
+
+export const getWeekNumber = function(src) {
+  const date = new Date(src.getTime());
+  date.setHours(0, 0, 0, 0);
+  // Thursday in current week decides the year.
+  date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);
+  // January 4 is always in week 1.
+  const week1 = new Date(date.getFullYear(), 0, 4);
+  // Adjust to Thursday in week 1 and count number of weeks from date to week 1.
+  return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7);
+};
+
+export const prevMonth = function(src) {
+  const year = src.getFullYear();
+  const month = src.getMonth();
+  const date = src.getDate();
+
+  const newYear = month === 0 ? year - 1 : year;
+  const newMonth = month === 0 ? 11 : month - 1;
+
+  const newMonthDayCount = getDayCountOfMonth(newYear, newMonth);
+  if (newMonthDayCount < date) {
+    src.setDate(newMonthDayCount);
+  }
+
+  src.setMonth(newMonth);
+  src.setFullYear(newYear);
+
+  return new Date(src.getTime());
+};
+
+export const nextMonth = function(src) {
+  const year = src.getFullYear();
+  const month = src.getMonth();
+  const date = src.getDate();
+
+  const newYear = month === 11 ? year + 1 : year;
+  const newMonth = month === 11 ? 0 : month + 1;
+
+  const newMonthDayCount = getDayCountOfMonth(newYear, newMonth);
+  if (newMonthDayCount < date) {
+    src.setDate(newMonthDayCount);
+  }
+
+  src.setMonth(newMonth);
+  src.setFullYear(newYear);
+
+  return new Date(src.getTime());
+};
+
+export const getRangeHours = function(ranges) {
+  const hours = [];
+  let disabledHours = [];
+
+  (ranges || []).forEach(range => {
+    const value = range.map(date => date.getHours());
+
+    disabledHours = disabledHours.concat(newArray(value[0], value[1]));
+  });
+
+  if (disabledHours.length) {
+    for (let i = 0; i < 24; i++) {
+      hours[i] = disabledHours.indexOf(i) === -1;
+    }
+  } else {
+    for (let i = 0; i < 24; i++) {
+      hours[i] = false;
+    }
+  }
+
+  return hours;
+};
+
+export const limitRange = function(date, ranges) {
+  if (!ranges) return date;
+
+  const len = ranges.length;
+  const format = 'HH:mm:ss';
+
+  date = dateUtil.parse(dateUtil.format(date, format), format);
+  for (let i = 0; i < len; i++) {
+    const range = ranges[i];
+    if (date >= range[0] && date <= range[1]) {
+      return date;
+    }
+  }
+
+  let maxDate = ranges[0][0];
+  let minDate = ranges[0][0];
+
+  ranges.forEach(range => {
+    minDate = new Date(Math.min(range[0], minDate));
+    maxDate = new Date(Math.max(range[1], maxDate));
+  });
+
+  return date < minDate ? minDate : maxDate;
+};
+
+import i18n from './i18n';
+
+export const $t = function(path) {
+  const array = path.split('.');
+  let current = i18n;
+  for (var i = 0, j = array.length; i < j; i++) {
+    var property = array[i];
+    var value = current[property];
+    if (i === j - 1) return value;
+    if (!value) return '';
+    current = value;
+  }
+  return '';
+};
diff --git a/packages/dialog/README.md b/packages/dialog/README.md
new file mode 100644
index 000000000..ccbc4886b
--- /dev/null
+++ b/packages/dialog/README.md
@@ -0,0 +1,49 @@
+# el-dialog
+> A el-dialog component for Vue.js.
+
+## Demo
+http://element-component.github.io/el-dialog
+
+## Installation
+```shell
+npm i el-dialog -D
+```
+
+## Usage
+```javascript
+import Vue from 'vue'
+import ElDialog from 'el-dialog'
+import 'element-theme-default'
+
+Vue.use(ElDialog)
+```
+
+or
+
+```javascript
+import Vue from 'vue'
+import { ElDialog } from 'el-dialog'
+
+Vue.component('el-dialog', ElDialog)
+```
+
+
+## Options
+
+|     name    | description |     type    |   default   |
+|-------------|-------------|-------------|-------------|
+|             |             |             |             |
+
+## Development
+```shell
+make dev
+
+## test
+make test
+
+## build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)
diff --git a/packages/dialog/cooking.conf.js b/packages/dialog/cooking.conf.js
new file mode 100644
index 000000000..319f4825c
--- /dev/null
+++ b/packages/dialog/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElDialog',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/dialog/index.js b/packages/dialog/index.js
new file mode 100644
index 000000000..a93e9c56f
--- /dev/null
+++ b/packages/dialog/index.js
@@ -0,0 +1,7 @@
+const ElDialog = require('./src/component');
+
+ElDialog.install = function(Vue) {
+  Vue.component('el-dialog', ElDialog);
+};
+
+module.exports = ElDialog;
diff --git a/packages/dialog/package.json b/packages/dialog/package.json
new file mode 100644
index 000000000..32e0c41d9
--- /dev/null
+++ b/packages/dialog/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "el-dialog",
+  "version": "1.0.0",
+  "description": "A dialog component for Vue.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/dialog",
+  "author": "elemefe",
+  "license": "MIT",
+  "devDependencies": {
+    "vue-popup": "^0.1.8"
+  }
+}
diff --git a/packages/dialog/src/component.vue b/packages/dialog/src/component.vue
new file mode 100644
index 000000000..7ffe1e8ac
--- /dev/null
+++ b/packages/dialog/src/component.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="el-dialog__wrapper" v-if="visible" transition="dialog-fade" @click.self="handleWrapperClick">
+    <div class="el-dialog {{ sizeClass }} {{ customClass }}" v-el:dialog :style="{ 'margin-bottom': size !== 'full' ? '50px' : '', 'top': size !== 'full' ? dynamicTop + 'px' : '0' }">
+      <div class="el-dialog__header">
+        <span class="el-dialog__title">{{title}}</span>
+        <div class="el-dialog__headerbtn">
+          <i class="el-dialog__close el-icon el-icon-close" @click='close()'></i>
+        </div>
+      </div>
+      <div class="el-dialog__body"><slot></slot></div>
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Popup from 'vue-popup';
+
+  export default {
+    name: 'el-dialog',
+
+    mixins: [ Popup ],
+
+    props: {
+      title: {
+        type: String,
+        default: ''
+      },
+
+      modal: {
+        type: Boolean,
+        default: true
+      },
+
+      closeOnClickModal: {
+        type: Boolean,
+        default: true
+      },
+
+      closeOnPressEscape: {
+        type: Boolean,
+        default: true
+      },
+
+      size: {
+        type: String,
+        default: 'small'
+      },
+
+      customClass: {
+        type: String,
+        default: ''
+      }
+    },
+
+    data() {
+      return {
+        dynamicTop: 0
+      };
+    },
+
+    watch: {
+      visible(val) {
+        if (val) {
+          this.$els.dialog.scrollTop = 0;
+        }
+      }
+    },
+
+    computed: {
+      sizeClass() {
+        return `el-dialog--${ this.size }`;
+      }
+    },
+
+    methods: {
+      handleWrapperClick() {
+        if (this.closeOnClickModal) {
+          this.visible = false;
+        }
+      },
+
+      resetTop() {
+        this.dynamicTop = Math.floor((window.innerHeight || document.documentElement.clientHeight) * 0.16);
+      }
+    },
+
+    ready() {
+      if (this.visible) {
+        this.rendered = true;
+        this.open();
+      }
+      window.addEventListener('resize', this.resetTop);
+      this.resetTop();
+    },
+
+    beforeDestroy() {
+      window.removeEventListener('resize', this.resetTop);
+    }
+  };
+</script>
diff --git a/packages/dropdown-item/index.js b/packages/dropdown-item/index.js
new file mode 100644
index 000000000..4a6dfc24a
--- /dev/null
+++ b/packages/dropdown-item/index.js
@@ -0,0 +1,7 @@
+const ElDropdownItem = require('../dropdown/src/dropdown-item');
+
+ElDropdownItem.install = function(Vue) {
+  Vue.component(ElDropdownItem.name, ElDropdownItem);
+};
+
+module.exports = ElDropdownItem;
diff --git a/packages/dropdown/cooking.conf.js b/packages/dropdown/cooking.conf.js
new file mode 100644
index 000000000..d83aa3d94
--- /dev/null
+++ b/packages/dropdown/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElDropdown',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/dropdown/index.js b/packages/dropdown/index.js
new file mode 100644
index 000000000..1e760ce91
--- /dev/null
+++ b/packages/dropdown/index.js
@@ -0,0 +1,7 @@
+const ElDropdown = require('./src/dropdown');
+
+ElDropdown.install = function(Vue) {
+  Vue.component(ElDropdown.name, ElDropdown);
+};
+
+module.exports = ElDropdown;
diff --git a/packages/dropdown/package.json b/packages/dropdown/package.json
new file mode 100644
index 000000000..8a904231f
--- /dev/null
+++ b/packages/dropdown/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "el-dropdown",
+  "version": "1.0.0",
+  "description": "A dropdown component for Vue.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/dropdown",
+  "author": "haiping.zeng<haiping.zeng@ele.me>",
+  "license": "MIT",
+  "dependencies": {
+    "vue-clickoutside": "0.0.4"
+  }
+}
diff --git a/packages/dropdown/src/dropdown-item.vue b/packages/dropdown/src/dropdown-item.vue
new file mode 100644
index 000000000..ca17c4547
--- /dev/null
+++ b/packages/dropdown/src/dropdown-item.vue
@@ -0,0 +1,8 @@
+<template>
+  <li class="el-dropdown-item"><slot></slot></li>
+</template>
+<script>
+  export default {
+    name: 'ElDropdownItem'
+  };
+</script>
diff --git a/packages/dropdown/src/dropdown-menu.vue b/packages/dropdown/src/dropdown-menu.vue
new file mode 100644
index 000000000..e5dda0697
--- /dev/null
+++ b/packages/dropdown/src/dropdown-menu.vue
@@ -0,0 +1,43 @@
+<template>
+  <ul class="el-dropdown__menu" transition="md-fade-bottom">
+    <slot></slot>
+  </ul>
+</template>
+<script>
+  import Popper from 'main/utils/popper.js';
+
+  export default {
+    data() {
+      return {
+        popper: null
+      };
+    },
+    computed: {
+      menuAlign() {
+        return this.$parent.menuAlign;
+      }
+    },
+    methods: {
+      updatePopper() {
+        if (this.popper) {
+          this.popper.update();
+        }
+      }
+    },
+    ready() {
+      document.body.appendChild(this.$el);
+      // this.$el.appendTo('body');
+
+      this.$nextTick(() => {
+        this.popper = new Popper(this.$parent.$el, this.$el, { gpuAcceleration: false, placement: `bottom-${this.menuAlign}` });
+      });
+    },
+
+    beforeDestroy() {
+      this.$remove();
+      setTimeout(() => {
+        this.popper.destroy();
+      }, 300);
+    }
+  };
+</script>
diff --git a/packages/dropdown/src/dropdown.vue b/packages/dropdown/src/dropdown.vue
new file mode 100644
index 000000000..a43ffe771
--- /dev/null
+++ b/packages/dropdown/src/dropdown.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="el-dropdown"
+    :class="{'el-dropdown--text': type === 'text'}"
+    v-clickoutside="hide()"
+  >
+    <!-- 带独立的下拉菜单按钮 -->
+    <el-button-group v-if="iconSeparate">
+      <el-button :size="size" :type="type" @click="$emit('mainclick')">{{text}}</el-button>
+      <el-button
+        :size="size"
+        :type="type"
+        class="el-dropdown__icon-button"
+        @mouseenter="handleMouseEnter"
+        @mouseleave="handleMouseLeave"
+        @click="handleClick">
+        <i class="el-dropdown__icon el-icon-caret-bottom"></i>
+      </el-button>
+    </el-button-group>
+    <!-- 不带独立的下拉菜单按钮 -->
+    <el-button :size="size" :type="type" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" @click="handleClick" v-else>
+      {{text}}<i class="el-dropdown__icon el-icon-caret-bottom"></i>
+    </el-button>
+    <!-- 下拉菜单 -->
+    <el-dropdown-menu
+      v-ref:menu
+      v-if="visible"
+      @mouseenter="handleMouseEnter"
+      @mouseleave="handleMouseLeave"
+    >
+      <slot></slot>
+    </el-dropdown-menu>
+  </div>
+</template>
+<script>
+  /**
+   * dropdown
+   * @module packages/dropdown
+   * @desc 下拉菜单组件
+   * @param {string} label - 名称
+   */
+  import ElButton from 'packages/button/index.js';
+  import ElButtonGroup from 'packages/button-group/index.js';
+  import ElDropdownMenu from './dropdown-menu.vue';
+  import Vue from 'vue';
+  import VueClickoutside from 'vue-clickoutside';
+  Vue.use(VueClickoutside);
+
+  export default {
+    name: 'ElDropdown',
+
+    components: {
+      ElButton,
+      ElButtonGroup,
+      ElDropdownMenu
+    },
+
+    props: {
+      text: String,
+      type: String,
+      iconSeparate: {
+        type: Boolean,
+        default: true
+      },
+      trigger: {
+        type: String,
+        default: 'hover'
+      },
+      size: {
+        type: String,
+        default: ''
+      },
+      menuAlign: {
+        type: String,
+        default: 'end'
+      }
+    },
+
+    data() {
+      return {
+        timeout: null,
+        visible: false
+      };
+    },
+
+    methods: {
+      show() {
+        clearTimeout(this.timeout);
+        this.timeout = setTimeout(() => {
+          this.visible = true;
+        }, 250);
+      },
+      hide() {
+        clearTimeout(this.timeout);
+        this.timeout = setTimeout(() => {
+          this.visible = false;
+        }, 150);
+      },
+      handleMouseEnter() {
+        if (this.trigger === 'hover') {
+          this.show();
+        }
+      },
+      handleMouseLeave() {
+        if (this.trigger === 'hover') {
+          this.hide();
+        }
+      },
+      handleClick() {
+        if (this.trigger === 'click') {
+          this.visible = !this.visible;
+        }
+      }
+    }
+  };
+</script>
diff --git a/packages/form-item/index.js b/packages/form-item/index.js
new file mode 100644
index 000000000..294bca194
--- /dev/null
+++ b/packages/form-item/index.js
@@ -0,0 +1,7 @@
+const ElFormItem = require('../form/src/form-item');
+
+ElFormItem.install = function(Vue) {
+  Vue.component(ElFormItem.name, ElFormItem);
+};
+
+module.exports = ElFormItem;
diff --git a/packages/form/cooking.conf.js b/packages/form/cooking.conf.js
new file mode 100644
index 000000000..77cd62639
--- /dev/null
+++ b/packages/form/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElForm',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/form/index.js b/packages/form/index.js
new file mode 100644
index 000000000..bccc57732
--- /dev/null
+++ b/packages/form/index.js
@@ -0,0 +1,7 @@
+const ElForm = require('./src/form');
+
+ElForm.install = function(Vue) {
+  Vue.component(ElForm.name, ElForm);
+};
+
+module.exports = ElForm;
diff --git a/packages/form/package.json b/packages/form/package.json
new file mode 100644
index 000000000..19766626a
--- /dev/null
+++ b/packages/form/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "el-form",
+  "version": "1.0.0",
+  "description": "A form component for Vue.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/form",
+  "author": "haiping.zeng<haiping.zeng@ele.me>",
+  "license": "MIT",
+  "dependencies": {
+    "async-validator": "^1.6.3"
+  }
+}
diff --git a/packages/form/src/form-item.vue b/packages/form/src/form-item.vue
new file mode 100644
index 000000000..4ff837b26
--- /dev/null
+++ b/packages/form/src/form-item.vue
@@ -0,0 +1,183 @@
+<template>
+  <div class="el-form-item" :class="{
+    'is-error': error !== '',
+    'is-validating': validating,
+    'is-required': required
+  }">
+    <label class="el-form-item__label" v-bind:style="labelStyle" v-if="label">
+      {{label + form.labelSuffix}}
+    </label>
+    <div class="el-form-item__content" v-bind:style="contentStyle">
+      <slot></slot>
+      <div class="el-form-item__error" v-if="error !== ''" transition="md-fade-bottom">{{error}}</div>
+    </div>
+  </div>
+</template>
+<script>
+  import AsyncValidator from 'async-validator';
+  import emitter from 'main/mixins/emitter';
+
+  export default {
+    name: 'ElFormItem',
+
+    componentName: 'form-item',
+
+    mixins: [emitter],
+
+    props: {
+      label: String,
+      labelWidth: String,
+      prop: String,
+      required: Boolean,
+      rules: [Object, Array]
+    },
+    computed: {
+      labelStyle() {
+        var ret = {};
+        var labelWidth = this.labelWidth || this.form.labelWidth;
+        if (labelWidth) {
+          ret.width = labelWidth;
+        }
+        return ret;
+      },
+      contentStyle() {
+        var ret = {};
+        var labelWidth = this.labelWidth || this.form.labelWidth;
+        if (labelWidth) {
+          ret.marginLeft = labelWidth;
+        }
+        return ret;
+      },
+      form() {
+        var parent = this.$parent;
+        while (parent.$el.tagName !== 'FORM') {
+          parent = parent.$parent;
+        }
+        return parent;
+      },
+      fieldValue() {
+        var model = this.form.model;
+        if (!model) { return; }
+
+        if (!model[this.prop]) {
+          let temp = this.prop.split(':');
+          return model[temp[0]][temp[1]];
+        } else {
+          return model[this.prop];
+        }
+      },
+      fieldRule() {
+        return this.rules || (this.form.rules ? this.form.rules[this.prop] : null);
+      }
+    },
+    data() {
+      return {
+        valid: true,
+        error: '',
+        validateDisabled: false,
+        validating: false,
+        validator: {}
+      };
+    },
+    methods: {
+      validate(trigger, cb) {
+        var rules = this.getFilteredRule(trigger);
+
+        if (!rules || rules.length === 0) {
+          cb && cb();
+          return true;
+        }
+
+        this.validating = true;
+
+        var descriptor = {};
+        descriptor[this.prop] = rules;
+
+        var validator = new AsyncValidator(descriptor);
+        var model = {};
+
+        model[this.prop] = this.fieldValue;
+
+        validator.validate(model, { first: true, firstFields: true }, (errors, fields) => {
+          this.valid = !errors;
+          this.error = errors ? errors[0].message : '';
+
+          cb && cb(errors);
+          this.validating = false;
+        });
+      },
+      resetField() {
+        this.valid = true;
+        this.error = '';
+
+        let model = this.form.model;
+        let value = model[this.prop];
+
+        if (Array.isArray(value) && value.length > 0) {
+          this.validateDisabled = true;
+          model[this.prop] = [];
+        } else if (typeof value === 'string' && value !== '') {
+          this.validateDisabled = true;
+          model[this.prop] = '';
+        } else if (typeof value === 'number') {
+          this.validateDisabled = true;
+          model[this.prop] = 0;
+        }
+      },
+      getFilteredRule(trigger) {
+        var rules = this.fieldRule;
+
+        if (!rules) { return null; }
+        if (!trigger) { return rules; }
+
+        if (Array.isArray(rules)) {
+          return rules.filter(rule => {
+            return !rule.trigger || rule.trigger.indexOf(trigger) !== -1;
+          });
+        }
+
+        if (rules.trigger && rules.trigger.indexOf(trigger) === -1) {
+          return null;
+        } else {
+          return rules;
+        }
+      }
+    },
+    ready() {
+      var rules = this.fieldRule;
+
+      if (rules) {
+        if (Array.isArray(rules)) {
+          rules.every(rule => {
+            if (rule.required) {
+              this.required = true;
+              return false;
+            }
+          });
+        } else {
+          this.required = !!this.rules.required;
+        }
+      }
+      if (this.prop) {
+        this.dispatch('form', 'el.form.addField', this);
+      }
+    },
+    events: {
+      'el.form.blur'(value) {
+        this.validate('blur');
+      },
+      'el.form.change'(value, useTrigger = true) {
+        if (this.validateDisabled) {
+          this.validateDisabled = false;
+          return;
+        }
+
+        var trigger = useTrigger ? 'change' : '';
+        this.validate(trigger);
+      }
+    },
+    beforeDestroy() {
+      this.dispatch('form', 'el.form.removeField', this);
+    }
+  };
+</script>
diff --git a/packages/form/src/form.vue b/packages/form/src/form.vue
new file mode 100644
index 000000000..9800457cd
--- /dev/null
+++ b/packages/form/src/form.vue
@@ -0,0 +1,82 @@
+<template>
+  <form :class="[
+    type ? 'el-form-' + type : 'el-form',
+    { 'is-label-left': labelAlign === 'left' }
+  ]">
+    <slot></slot>
+  </form>
+</template>
+<script>
+  import AsyncValidator from 'async-validator';
+
+  export default {
+    name: 'ElForm',
+
+    componentName: 'form',
+
+    props: {
+      model: Object,
+      rules: Object,
+      type: String,
+      labelAlign: String,
+      labelWidth: String,
+      labelSuffix: {
+        type: String,
+        default: ''
+      }
+    },
+    data() {
+      return {
+        fields: {},
+        fieldLength: 0,
+        validator: {}
+      };
+    },
+    ready() {
+      if (this.rules) {
+        this.validator = new AsyncValidator(this.rules);
+      }
+    },
+    events: {
+      'el.form.addField'(field) {
+        this.fields[field.prop] = field;
+        this.fieldLength++;
+      },
+      'el.form.removeField'(field) {
+        delete this.fields[field.prop];
+        this.fieldLength--;
+      }
+    },
+    methods: {
+      resetForm() {
+        for (let prop in this.fields) {
+          let field = this.fields[prop];
+          field.resetField();
+        }
+      },
+      validate(callback) {
+        var count = 0;
+        var valid = true;
+
+        for (let prop in this.fields) {
+          let field = this.fields[prop];
+          field.validate('', errors => {
+            if (errors) {
+              valid = false;
+            }
+
+            if (++count === this.fieldLength) {
+              callback(valid);
+            }
+          });
+        }
+      },
+      validateField(prop, cb) {
+        var field = this.fields[prop];
+        if (!field) { throw new Error('must call validateField with valid prop string!'); }
+
+        field.validate('', cb);
+      }
+    }
+  };
+</script>
diff --git a/packages/group/index.js b/packages/group/index.js
new file mode 100644
index 000000000..979f21c67
--- /dev/null
+++ b/packages/group/index.js
@@ -0,0 +1 @@
+module.exports = require('./src/group.vue');
diff --git a/packages/group/src/group.vue b/packages/group/src/group.vue
new file mode 100644
index 000000000..25fa1e17c
--- /dev/null
+++ b/packages/group/src/group.vue
@@ -0,0 +1,26 @@
+<script>
+  /**
+   * group
+   * @module components/basic/group
+   * @desc 显示分组的布局样式
+   * @param {string} [title] - 显示标题
+   */
+  export default {
+    name: 'el-group',
+
+    props: {
+      title: String
+    }
+  };
+</script>
+
+<template>
+  <div class="element-group">
+    <label
+      class="element-group__label"
+      v-text="title"></label>
+    <div class="element-group__option">
+      <slot></slot>
+    </div>
+  </div>
+</template>
diff --git a/packages/icon/index.js b/packages/icon/index.js
new file mode 100644
index 000000000..2b43b70df
--- /dev/null
+++ b/packages/icon/index.js
@@ -0,0 +1 @@
+module.exports = require('./src/icon.vue');
diff --git a/packages/icon/src/icon.vue b/packages/icon/src/icon.vue
new file mode 100644
index 000000000..b53ac30b8
--- /dev/null
+++ b/packages/icon/src/icon.vue
@@ -0,0 +1,13 @@
+<template>
+  <i :class="'el-icon-' + name"></i>
+</template>
+
+<script>
+  export default {
+    name: 'ElIcon',
+
+    props: {
+      name: String
+    }
+  };
+</script>
diff --git a/packages/input-group/index.js b/packages/input-group/index.js
new file mode 100644
index 000000000..66500245c
--- /dev/null
+++ b/packages/input-group/index.js
@@ -0,0 +1,7 @@
+const ElInputGroup = require('../input/src/input-group');
+
+ElInputGroup.install = function(Vue) {
+  Vue.component(ElInputGroup.name, ElInputGroup);
+};
+
+module.exports = ElInputGroup;
diff --git a/packages/input-number/README.md b/packages/input-number/README.md
new file mode 100644
index 000000000..1dd4f26e3
--- /dev/null
+++ b/packages/input-number/README.md
@@ -0,0 +1,53 @@
+# el-input
+> A el-input component for Vue.js.
+
+# Demo
+http://element-component.github.io/el-input
+
+# Installation
+```shell
+npm i el-input -D
+```
+
+# Usage
+```javascript
+import Vue from 'vue'
+import ElInput from 'el-input'
+import 'element-theme-default/dist/input.css'
+
+Vue.use(ElInput)
+```
+
+or
+
+```javascript
+import Vue from 'vue'
+import { ElInput } from 'el-input'
+
+Vue.component('el-input', ElInput)
+```
+
+# Options
+
+|     name    | description |     type    |   default   |
+|-------------|-------------|-------------|-------------|
+| model | 绑定值，需双向绑定 | string|number ||
+| placeholder | 输入框占位文本 | string ||
+| suggestion | 输入建议 | string[] ||
+| disabled | 是否禁用 | boolean | false |
+| cache | 是否需要缓存 | boolean | false |
+| effect | 输入框效果，允许 text, number, special | string | text |
+
+# Development
+```shell
+make dev
+
+# test
+make test
+
+# build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)
diff --git a/packages/input-number/cooking.conf.js b/packages/input-number/cooking.conf.js
new file mode 100644
index 000000000..10f755083
--- /dev/null
+++ b/packages/input-number/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElInputNumber',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/input-number/index.js b/packages/input-number/index.js
new file mode 100644
index 000000000..cded5e786
--- /dev/null
+++ b/packages/input-number/index.js
@@ -0,0 +1,7 @@
+const ElInputNumber = require('./src/input-number');
+
+ElInputNumber.install = function(Vue) {
+  Vue.component(ElInputNumber.name, ElInputNumber);
+};
+
+module.exports = ElInputNumber;
diff --git a/packages/input-number/package.json b/packages/input-number/package.json
new file mode 100644
index 000000000..43d91f619
--- /dev/null
+++ b/packages/input-number/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "el-input-number",
+  "version": "1.0.1",
+  "description": "A input component for Vue.",
+  "main": "lib/index.js",
+  "keywords": [
+    "element",
+    "vue",
+    "component",
+    "input"
+  ],
+  "author": "haipingZeng <haiping.zeng@ele.me>",
+  "license": "MIT",
+  "repository": "https://github.com/element-component/element/tree/master/packages/input-number",
+  "dependencies": {
+    "wind-dom": "0.0.3"
+  },
+  "devDependencies": {
+    "vue-clickoutside": "0.0.4"
+  }
+}
diff --git a/packages/input-number/src/input-number.vue b/packages/input-number/src/input-number.vue
new file mode 100644
index 000000000..e60de7468
--- /dev/null
+++ b/packages/input-number/src/input-number.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="el-input-number"
+    :class="[
+      size ? 'is-' + size : '',
+      { 'is-disabled': disabled }
+    ]"
+  >
+    <el-input
+      :value="value"
+      @onchange="handleChnage"
+      :disabled="disabled"
+      :size="size"
+      :number="true"
+      :class="{
+        'is-active': inputActive
+      }">
+    </el-input>
+    <span
+      class="el-input-number__decrease el-icon-minus"
+      :class="{'is-disabled': minDisabled}"
+      v-repeat-click="decrease()"
+      @mouseenter="activeInput(minDisabled)"
+      @mouseleave="unactiveInput(minDisabled)"
+    >
+    </span>
+    <span
+      class="el-input-number__increase el-icon-plus"
+      :class="{'is-disabled': maxDisabled}"
+      v-repeat-click="increase()"
+      @mouseenter="activeInput(maxDisabled)"
+      @mouseleave="unactiveInput(maxDisabled)"
+    >
+    </span>
+  </div>
+</template>
+<script>
+  import ElInput from 'packages/input/index.js';
+  import { once, on } from 'wind-dom/src/event';
+
+  export default {
+    name: 'ElInputNumber',
+    props: {
+      value: {
+        type: Number,
+        required: true
+      },
+      step: {
+        type: Number,
+        default: 1
+      },
+      max: {
+        type: Number,
+        default: Infinity
+      },
+      min: {
+        type: Number,
+        default: 0
+      },
+      disabled: Boolean,
+      size: String
+    },
+    directives: {
+      repeatClick: {
+        bind() {
+          const el = this.el;
+          let interval = null;
+          let startTime;
+
+          const handler = () => {
+            this.vm.$get(this.expression);
+          };
+
+          const clear = function() {
+            if (new Date() - startTime < 100) {
+              handler();
+            }
+            clearInterval(interval);
+            interval = null;
+          };
+
+          on(el, 'mousedown', function() {
+            startTime = new Date();
+            once(document, 'mouseup', clear);
+            interval = setInterval(function() {
+              handler();
+            }, 100);
+          });
+        }
+      }
+    },
+    components: {
+      ElInput
+    },
+    data() {
+      return {
+        inputActive: false
+      };
+    },
+    computed: {
+      minDisabled() {
+        return this.value - this.step < this.min;
+      },
+      maxDisabled() {
+        return this.value + this.step > this.max;
+      }
+    },
+    methods: {
+      increase() {
+        if (this.value + this.step > this.max || this.disabled) return;
+        this.value += this.step;
+        if (this.maxDisabled) {
+          this.inputActive = false;
+        }
+      },
+      decrease() {
+        if (this.value - this.step < this.min || this.disabled) return;
+        this.value -= this.step;
+        if (this.minDisabled) {
+          this.inputActive = false;
+        }
+      },
+      activeInput(disabled) {
+        if (!this.disabled && !disabled) {
+          this.inputActive = true;
+        }
+      },
+      unactiveInput(disabled) {
+        if (!this.disabled && !disabled) {
+          this.inputActive = false;
+        }
+      },
+      handleChnage(value) {
+        this.$emit('onchange', value);
+      }
+    }
+  };
+</script>
diff --git a/packages/input/README.md b/packages/input/README.md
new file mode 100644
index 000000000..1dd4f26e3
--- /dev/null
+++ b/packages/input/README.md
@@ -0,0 +1,53 @@
+# el-input
+> A el-input component for Vue.js.
+
+# Demo
+http://element-component.github.io/el-input
+
+# Installation
+```shell
+npm i el-input -D
+```
+
+# Usage
+```javascript
+import Vue from 'vue'
+import ElInput from 'el-input'
+import 'element-theme-default/dist/input.css'
+
+Vue.use(ElInput)
+```
+
+or
+
+```javascript
+import Vue from 'vue'
+import { ElInput } from 'el-input'
+
+Vue.component('el-input', ElInput)
+```
+
+# Options
+
+|     name    | description |     type    |   default   |
+|-------------|-------------|-------------|-------------|
+| model | 绑定值，需双向绑定 | string|number ||
+| placeholder | 输入框占位文本 | string ||
+| suggestion | 输入建议 | string[] ||
+| disabled | 是否禁用 | boolean | false |
+| cache | 是否需要缓存 | boolean | false |
+| effect | 输入框效果，允许 text, number, special | string | text |
+
+# Development
+```shell
+make dev
+
+# test
+make test
+
+# build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)
diff --git a/packages/input/cooking.conf.js b/packages/input/cooking.conf.js
new file mode 100644
index 000000000..76456fecc
--- /dev/null
+++ b/packages/input/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElInput',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/input/index.js b/packages/input/index.js
new file mode 100644
index 000000000..eaf673150
--- /dev/null
+++ b/packages/input/index.js
@@ -0,0 +1,9 @@
+const ElInput = require('./src/input');
+const ElInputGroup = require('./src/input-group');
+
+ElInput.install = function(Vue) {
+  Vue.component(ElInput.name, ElInput);
+  Vue.component(ElInputGroup.name, ElInputGroup);
+};
+
+module.exports = ElInput;
diff --git a/packages/input/package.json b/packages/input/package.json
new file mode 100644
index 000000000..5e59f5ef9
--- /dev/null
+++ b/packages/input/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "el-input",
+  "version": "1.0.1",
+  "description": "A input component for Vue.",
+  "main": "lib/index.js",
+  "keywords": [
+    "element",
+    "vue",
+    "component",
+    "input"
+  ],
+  "author": "haiping.zeng <haiping.zeng@ele.me>",
+  "license": "MIT",
+  "repository": "https://github.com/element-component/element/tree/master/packages/input",
+  "devDependencies": {
+  }
+}
diff --git a/packages/input/src/input-group.vue b/packages/input/src/input-group.vue
new file mode 100644
index 000000000..0370addbe
--- /dev/null
+++ b/packages/input/src/input-group.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="el-input-group">
+    <div class="el-input-group__prepend" v-if="_slotContents.prepend">
+      <slot name="prepend"></slot>
+    </div>
+    <slot></slot>
+    <div class="el-input-group__append" v-if="_slotContents.append">
+      <slot name="append"></slot>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'ElInputGroup',
+    data() {
+      return {
+      };
+    }
+  };
+</script>
diff --git a/packages/input/src/input.vue b/packages/input/src/input.vue
new file mode 100644
index 000000000..b9f3879f7
--- /dev/null
+++ b/packages/input/src/input.vue
@@ -0,0 +1,105 @@
+<template>
+  <div :class="[
+    type === 'textarea' ? 'el-textarea' : 'el-input',
+    size ? 'el-input-' + size : '',
+    {'is-disabled': disabled}
+  ]">
+    <template v-if="type !== 'textarea'">
+      <i class="el-input__icon" :class="[icon ? 'el-icon-' + icon : '']" v-if="icon"></i>
+      <i class="el-input__icon el-icon-loading" v-if="validating"></i>
+      <input
+        :type="type"
+        :name="name"
+        class="el-input__inner"
+        :placeholder="placeholder"
+        v-model="value"
+        :disabled="disabled"
+        :readonly="readonly"
+        @focus="$emit('onfocus', value)"
+        @blur="handleBlur"
+        :number="number"
+        :maxlength="maxlength"
+        :minlength="minlength"
+        :autocomplete="autoComplete"
+        v-el:input
+      >
+    </template>
+    <!-- 写成垂直的方式会导致 placeholder 失效, 蜜汁bug -->
+    <textarea v-else v-model="value" class="el-textarea__inner" :name="name" :placeholder="placeholder" :disabled="disabled" :readonly="readonly" @focus="$emit('onfocus', value)" @blur="handleBlur"></textarea>
+  </div>
+</template>
+<script>
+  import emitter from 'main/mixins/emitter';
+
+  export default {
+    name: 'ElInput',
+
+    mixins: [emitter],
+
+    props: {
+      value: {
+        required: true
+      },
+      placeholder: {
+        type: String,
+        default: ''
+      },
+      size: {
+        type: String,
+        default: ''
+      },
+      readonly: {
+        type: Boolean,
+        default: false
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      type: {
+        type: String,
+        default: 'text'
+      },
+      name: {
+        type: String,
+        default: ''
+      },
+      number: {
+        type: Boolean,
+        default: false
+      },
+      autoComplete: {
+        type: String,
+        default: 'off'
+      },
+      maxlength: Number,
+      minlength: Number
+    },
+    events: {
+      inputSelect() {
+        this.$els.input.select();
+      }
+    },
+    methods: {
+      handleBlur(event) {
+        this.$emit('onblur', this.value);
+        this.dispatch('form-item', 'el.form.blur', [this.value]);
+      }
+    },
+    computed: {
+      validating() {
+        return this.$parent.validating;
+      }
+    },
+    watch: {
+      'value'(val) {
+        this.$emit('onchange', this.value);
+        this.dispatch('form-item', 'el.form.change', this.value);
+      }
+    }
+  };
+</script>
diff --git a/packages/loading/cooking.conf.js b/packages/loading/cooking.conf.js
new file mode 100644
index 000000000..db5d5df19
--- /dev/null
+++ b/packages/loading/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElLoading',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/loading/index.js b/packages/loading/index.js
new file mode 100644
index 000000000..a6f62af52
--- /dev/null
+++ b/packages/loading/index.js
@@ -0,0 +1,4 @@
+import Loading from './src/directive';
+Loading.name = 'loading';
+
+module.exports = Loading;
diff --git a/packages/loading/package.json b/packages/loading/package.json
new file mode 100644
index 000000000..b2db41026
--- /dev/null
+++ b/packages/loading/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "el-loading",
+  "version": "0.0.0",
+  "description": "A loading component for Vue.js.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/loading",
+  "author": "elemefe",
+  "license": "MIT",
+  "dependencies": {}
+}
diff --git a/packages/loading/src/directive.js b/packages/loading/src/directive.js
new file mode 100644
index 000000000..5999bb5c0
--- /dev/null
+++ b/packages/loading/src/directive.js
@@ -0,0 +1,120 @@
+exports.install = Vue => {
+  let insertDom = (parent, directive) => {
+    if (!directive.domVisible) {
+      Object.keys(directive.maskStyle).forEach(property => {
+        directive.mask.style[property] = directive.maskStyle[property];
+      });
+
+      Object.keys(directive.spinnerStyle).forEach(property => {
+        directive.spinner.style[property] = directive.spinnerStyle[property];
+      });
+
+      if (directive.originalPosition !== 'absolute') {
+        parent.style.position = 'relative';
+      }
+      if (directive.modifiers.fullscreen) {
+        parent.style.overflow = 'hidden';
+      }
+      directive.mask.style.display = 'block';
+      directive.spinner.style.display = 'inline-block';
+      directive.domVisible = true;
+
+      parent.appendChild(directive.mask);
+      directive.mask.appendChild(directive.spinner);
+      directive.domInserted = true;
+    }
+  };
+
+  Vue.directive('loading', {
+    bind: function() {
+      this.mask = document.createElement('div');
+      this.mask.className = 'el-loading-mask';
+      this.maskStyle = {
+        position: 'absolute',
+        zIndex: '10000',
+        backgroundColor: 'rgba(0, 0, 0, .7)',
+        margin: '0'
+      };
+
+      this.spinner = document.createElement('i');
+      this.spinner.className = 'el-icon-loading';
+      this.spinnerStyle = {
+        color: '#ddd',
+        fontSize: '32px',
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        marginTop: '-19px',
+        marginLeft: '-16px',
+        zIndex: '10001'
+      };
+    },
+
+    update: function(val) {
+      if (val) {
+        Vue.nextTick(() => {
+          if (this.modifiers.fullscreen) {
+            this.originalPosition = document.body.style.position;
+            this.originalOverflow = document.body.style.overflow;
+
+            ['top', 'right', 'bottom', 'left'].forEach(property => {
+              this.maskStyle[property] = '0';
+            });
+            this.maskStyle.position = 'fixed';
+            this.spinnerStyle.position = 'fixed';
+
+            insertDom(document.body, this);
+          } else {
+            if (this.modifiers.body) {
+              this.originalPosition = document.body.style.position;
+
+              ['top', 'left'].forEach(property => {
+                this.maskStyle[property] = this.el.getBoundingClientRect()[property] + document.body[`scroll${ property[0].toUpperCase() + property.slice(1) }`] + 'px';
+              });
+              ['height', 'width'].forEach(property => {
+                this.maskStyle[property] = this.el.getBoundingClientRect()[property] + 'px';
+              });
+
+              insertDom(document.body, this);
+            } else {
+              this.originalPosition = this.el.style.position;
+
+              ['top', 'right', 'bottom', 'left'].forEach(property => {
+                this.maskStyle[property] = '0';
+              });
+
+              insertDom(this.el, this);
+            }
+          }
+        });
+      } else {
+        if (this.domVisible) {
+          this.mask.style.display = 'none';
+          this.spinner.style.display = 'none';
+          this.domVisible = false;
+
+          if (this.modifiers.fullscreen) {
+            document.body.style.overflow = this.originalOverflow;
+          }
+          if (this.modifiers.fullscreen || this.modifiers.body) {
+            document.body.style.position = this.originalPosition;
+          } else {
+            this.el.style.position = this.originalPosition;
+          }
+        }
+      }
+    },
+
+    unbind: function() {
+      if (this.domInserted) {
+        if (this.modifiers.fullscreen || this.modifiers.body) {
+          document.body.removeChild(this.mask);
+          this.mask.removeChild(this.spinner);
+        } else {
+          this.el.removeChild(this.mask);
+          this.mask.removeChild(this.spinner);
+        }
+      }
+    }
+  });
+};
diff --git a/packages/menu-item/index.js b/packages/menu-item/index.js
new file mode 100644
index 000000000..6bf758618
--- /dev/null
+++ b/packages/menu-item/index.js
@@ -0,0 +1,7 @@
+const ElMenuItem = require('../menu/src/menu-item');
+
+ElMenuItem.install = function(Vue) {
+  Vue.component(ElMenuItem.name, ElMenuItem);
+};
+
+module.exports = ElMenuItem;
diff --git a/packages/menu/cooking.conf.js b/packages/menu/cooking.conf.js
new file mode 100644
index 000000000..9f8a6e78f
--- /dev/null
+++ b/packages/menu/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElMenu',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/menu/index.js b/packages/menu/index.js
new file mode 100644
index 000000000..06fb8b6d6
--- /dev/null
+++ b/packages/menu/index.js
@@ -0,0 +1,7 @@
+const ElMenu = require('./src/menu');
+
+ElMenu.install = function(Vue) {
+  Vue.component(ElMenu.name, ElMenu);
+};
+
+module.exports = ElMenu;
diff --git a/packages/menu/src/menu-item.vue b/packages/menu/src/menu-item.vue
new file mode 100644
index 000000000..abd374ff0
--- /dev/null
+++ b/packages/menu/src/menu-item.vue
@@ -0,0 +1,52 @@
+<script>
+  import emitter from 'main/mixins/emitter';
+
+  module.exports = {
+    name: 'el-menu-item',
+
+    componentName: 'menu-item',
+
+    mixins: [emitter],
+
+    props: {
+      key: {
+        type: String,
+        required: true
+      }
+    },
+    data() {
+      return {
+        active: false
+      };
+    },
+    computed: {
+      keyPath() {
+        return this.$parent.keyPath ? this.$parent.keyPath.concat(this.key) : [this.key];
+      }
+    },
+    methods: {
+      handleClick() {
+        if (!this.active) {
+          this.dispatch('menu', 'select-key', [this.key, this.keyPath]);
+        }
+      }
+    },
+    events: {
+      'select-key': function(key) {
+        this.active = key === this.key;
+      }
+    }
+  };
+</script>
+
+<template>
+  <li class="el-menu-item"
+    @click="handleClick"
+    :class="{
+      'is-active': active,
+      'is-disabled': disabled
+    }">
+    <slot></slot>
+    <span class="el-menu-item__bar" v-if="active" transition="zoom-x"></span>
+  </li>
+</template>
diff --git a/packages/menu/src/menu.vue b/packages/menu/src/menu.vue
new file mode 100644
index 000000000..e3b81b82d
--- /dev/null
+++ b/packages/menu/src/menu.vue
@@ -0,0 +1,73 @@
+<template>
+  <ul class="el-menu"
+    :class="{
+      'el-menu--vertical': mode === 'vertical',
+      'el-menu--dark': theme === 'dark'
+    }"
+  >
+    <slot></slot>
+  </ul>
+</template>
+<script>
+  import emitter from 'main/mixins/emitter';
+
+  export default {
+    name: 'ElMenu',
+
+    componentName: 'menu',
+
+    mixins: [emitter],
+
+    props: {
+      mode: {
+        type: String,
+        default: ''
+      },
+      activeKey: {
+        type: String
+      },
+      openedKeys: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      theme: {
+        type: String,
+        default: 'light'
+      },
+      uniqueOpend: Boolean,
+      router: Boolean
+    },
+    ready() {
+      this.broadcast('menu-item', 'select-key', this.activeKey);
+      this.broadcast('submenu', 'open-menu', this.openedKeys);
+    },
+    events: {
+      'expand-menu': function(key, keyPath) {
+        this.openedKeys.push(key);
+
+        if (this.uniqueOpend) {
+          this.broadcast('submenu', 'close-menu', keyPath);
+          this.openedKeys = this.openedKeys.filter((key) => {
+            return keyPath.indexOf(key) !== -1;
+          });
+        }
+        this.$emit('open', key, keyPath);
+      },
+      'collapse-menu': function(key, keyPath) {
+        this.openedKeys.$remove(key);
+        this.$emit('close', key, keyPath);
+      },
+      'select-key': function(key, keyPath) {
+        this.activeKey = key;
+        this.broadcast('menu-item', 'select-key', key);
+        this.$emit('select', key, keyPath);
+
+        if (this.router) {
+          this.$route.router.go(key);
+        }
+      }
+    }
+  };
+</script>
diff --git a/packages/menu/src/submenu.vue b/packages/menu/src/submenu.vue
new file mode 100644
index 000000000..0e4e9c4b9
--- /dev/null
+++ b/packages/menu/src/submenu.vue
@@ -0,0 +1,63 @@
+<script>
+  import emitter from 'main/mixins/emitter';
+
+  module.exports = {
+    name: 'el-submenu',
+
+    componentName: 'submenu',
+
+    mixins: [emitter],
+
+    props: {
+      key: {
+        type: String,
+        required: true
+      }
+    },
+    data() {
+      return {
+        opened: false
+      };
+    },
+    computed: {
+      keyPath() {
+        return this.$parent.keyPath ? this.$parent.keyPath.concat(this.key) : [this.key];
+      }
+    },
+    methods: {
+      handleClick() {
+        if (!this.opened) {
+          this.dispatch('menu', 'expand-menu', [this.key, this.keyPath]);
+          this.opened = true;
+        } else {
+          this.dispatch('menu', 'collapse-menu', [this.key, this.keyPath]);
+          this.opened = false;
+        }
+      }
+    },
+    events: {
+      'close-menu': function(openedKeys) {
+        if (openedKeys && openedKeys.indexOf(this.key) === -1) {
+          this.opened = false;
+        }
+      },
+      'open-menu': function(keysArray) {
+        if (keysArray && keysArray.indexOf(this.key) !== -1) {
+          this.opened = true;
+        }
+      }
+    }
+  };
+</script>
+
+<template>
+  <li class="el-submenu" :class="{'is-opened': opened}">
+    <div class="el-submenu__title" @click="handleClick">
+      <slot name="title"></slot>
+      <i class="el-submenu__icon-arrow el-icon-arrow-up"></i>
+    </div>
+    <ul class="el-menu" v-show="opened">
+      <slot></slot>
+    </ul>
+  </li>
+</template>
diff --git a/packages/message-box/cooking.conf.js b/packages/message-box/cooking.conf.js
new file mode 100644
index 000000000..c57c267bb
--- /dev/null
+++ b/packages/message-box/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElMessageBox',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/message-box/index.js b/packages/message-box/index.js
new file mode 100644
index 000000000..110d20fbe
--- /dev/null
+++ b/packages/message-box/index.js
@@ -0,0 +1,3 @@
+import MessageBox from './src/main.js';
+
+module.exports = MessageBox;
diff --git a/packages/message-box/package.json b/packages/message-box/package.json
new file mode 100644
index 000000000..75e7f42f3
--- /dev/null
+++ b/packages/message-box/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "el-message-box",
+  "version": "0.0.0",
+  "description": "A message-box component for Vue.js.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/message-box",
+  "author": "elemefe",
+  "license": "MIT",
+  "dependencies": {
+    "vue-popup": "^0.1.8"
+  }
+}
diff --git a/packages/message-box/src/main.js b/packages/message-box/src/main.js
new file mode 100644
index 000000000..ec38a877e
--- /dev/null
+++ b/packages/message-box/src/main.js
@@ -0,0 +1,197 @@
+var CONFIRM_TEXT = '确定';
+var CANCEL_TEXT = '取消';
+
+var defaults = {
+  title: '提示',
+  message: '',
+  type: '',
+  showInput: false,
+  showClose: true,
+  closeOnClickModal: true,
+  inputValue: null,
+  inputPlaceholder: '',
+  inputPattern: null,
+  inputValidator: null,
+  inputErrorMessage: '',
+  showConfirmButton: true,
+  showCancelButton: false,
+  confirmButtonPosition: 'right',
+  confirmButtonHighlight: false,
+  cancelButtonHighlight: false,
+  confirmButtonText: CONFIRM_TEXT,
+  cancelButtonText: CANCEL_TEXT,
+  confirmButtonClass: '',
+  cancelButtonClass: ''
+};
+
+import Vue from 'vue';
+import msgboxVue from './main.vue';
+
+var merge = function(target) {
+  for (var i = 1, j = arguments.length; i < j; i++) {
+    var source = arguments[i];
+    for (var prop in source) {
+      if (source.hasOwnProperty(prop)) {
+        var value = source[prop];
+        if (value !== undefined) {
+          target[prop] = value;
+        }
+      }
+    }
+  }
+
+  return target;
+};
+
+var MessageBoxConstructor = Vue.extend(msgboxVue);
+
+var currentMsg, instance;
+var msgQueue = [];
+
+var initInstance = function() {
+  instance = new MessageBoxConstructor({
+    el: document.createElement('div')
+  });
+
+  instance.callback = function(action) {
+    if (currentMsg) {
+      var callback = currentMsg.callback;
+      if (typeof callback === 'function') {
+        if (instance.showInput) {
+          callback(instance.inputValue, action);
+        } else {
+          callback(action);
+        }
+      }
+      if (currentMsg.resolve) {
+        var $type = currentMsg.options.$type;
+        if ($type === 'confirm' || $type === 'prompt') {
+          if (action === 'confirm') {
+            if (instance.showInput) {
+              currentMsg.resolve({ value: instance.inputValue, action });
+            } else {
+              currentMsg.resolve(action);
+            }
+          } else if (action === 'cancel' && currentMsg.reject) {
+            currentMsg.reject(action);
+          }
+        } else {
+          currentMsg.resolve(action);
+        }
+      }
+    }
+  };
+};
+
+var showNextMsg = function() {
+  if (!instance) {
+    initInstance();
+  }
+
+  if (!instance.visible || instance.closeTimer) {
+    if (msgQueue.length > 0) {
+      currentMsg = msgQueue.shift();
+
+      var options = currentMsg.options;
+      for (var prop in options) {
+        if (options.hasOwnProperty(prop)) {
+          instance[prop] = options[prop];
+        }
+      }
+      instance.$appendTo(document.body);
+
+      Vue.nextTick(() => {
+        instance.visible = true;
+      });
+    }
+  }
+};
+
+var MessageBox = function(options, callback) {
+  if (typeof options === 'string') {
+    options = {
+      title: options
+    };
+    if (arguments[1]) {
+      options.message = arguments[1];
+    }
+    if (arguments[2]) {
+      options.type = arguments[2];
+    }
+  } else if (options.callback && !callback) {
+    callback = options.callback;
+  }
+
+  if (typeof Promise !== 'undefined') {
+    return new Promise(function(resolve, reject) { // eslint-disable-line
+      msgQueue.push({
+        options: merge({}, defaults, MessageBox.defaults || {}, options),
+        callback: callback,
+        resolve: resolve,
+        reject: reject
+      });
+
+      showNextMsg();
+    });
+  } else {
+    msgQueue.push({
+      options: merge({}, defaults, MessageBox.defaults || {}, options),
+      callback: callback
+    });
+
+    showNextMsg();
+  }
+};
+
+MessageBox.setDefaults = function(defaults) {
+  MessageBox.defaults = defaults;
+};
+
+MessageBox.alert = function(message, title, options) {
+  if (typeof title === 'object') {
+    options = title;
+    title = '';
+  }
+  return MessageBox(merge({
+    title: title,
+    message: message,
+    $type: 'alert',
+    closeOnClickModal: false
+  }, options));
+};
+
+MessageBox.confirm = function(message, title, options) {
+  if (typeof title === 'object') {
+    options = title;
+    title = '';
+  }
+  return MessageBox(merge({
+    title: title,
+    message: message,
+    $type: 'confirm',
+    showCancelButton: true
+  }, options));
+};
+
+MessageBox.prompt = function(message, title, options) {
+  if (typeof title === 'object') {
+    options = title;
+    title = '';
+  }
+  return MessageBox(merge({
+    title: title,
+    message: message,
+    showCancelButton: true,
+    showInput: true,
+    $type: 'prompt'
+  }, options));
+};
+
+MessageBox.close = function() {
+  instance.visible = false;
+  msgQueue = [];
+  currentMsg = null;
+};
+
+export default MessageBox;
+export { MessageBox };
diff --git a/packages/message-box/src/main.vue b/packages/message-box/src/main.vue
new file mode 100644
index 000000000..6fffb8c18
--- /dev/null
+++ b/packages/message-box/src/main.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="el-message-box__wrapper">
+    <div class="el-message-box" v-if="rendered" v-show="visible" transition="msgbox-bounce">
+      <div class="el-message-box__header" v-if="title !== ''">
+        <div class="el-message-box__title">{{ title }}</div>
+        <i class="el-message-box__close el-icon-close" @click="handleAction('cancel')" v-if="showClose"></i>
+      </div>
+      <div class="el-message-box__content" v-if="message !== ''">
+        <div class="el-message-box__status {{ typeClass }}"></div>
+        <div class="el-message-box__message" :style="{ 'margin-left': type ? '50px' : '0' }"><p>{{ message }}</p></div>
+        <div class="el-message-box__input" v-show="showInput">
+          <input type="text" v-model="inputValue" :placeholder="inputPlaceholder" v-el:input />
+          <div class="el-message-box__errormsg" :style="{ visibility: !!editorErrorMessage ? 'visible' : 'hidden' }">{{editorErrorMessage}}</div>
+        </div>
+      </div>
+      <div class="el-message-box__btns">
+        <el-button class="{{ cancelButtonClasses }}" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</el-button>
+        <el-button class="{{ confirmButtonClasses }}" v-show="showConfirmButton" @click="handleAction('confirm')" type="primary">{{ confirmButtonText }}</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/babel">
+  let CONFIRM_TEXT = '确定';
+  let CANCEL_TEXT = '取消';
+  let typeMap = {
+    success: 'circle-check',
+    info: 'information',
+    warning: 'warning',
+    error: 'circle-cross'
+  };
+
+  import Popup from 'vue-popup';
+
+  export default {
+    name: 'el-message-box',
+
+    mixins: [ Popup ],
+
+    props: {
+      modal: {
+        default: true
+      },
+      showClose: {
+        type: Boolean,
+        default: true
+      },
+      closeOnClickModal: {
+        default: true
+      },
+      closeOnPressEscape: {
+        default: true
+      }
+    },
+
+    computed: {
+      typeClass() {
+        return this.type ? `el-icon-${ typeMap[this.type] }` : '';
+      },
+
+      confirmButtonClasses() {
+        return 'el-button el-button-primary ' + this.confirmButtonClass;
+      },
+      cancelButtonClasses() {
+        return 'el-button el-button-default ' + this.cancelButtonClass;
+      }
+    },
+
+    methods: {
+      handleAction(action) {
+        if (this.$type === 'prompt' && action === 'confirm' && !this.validate()) {
+          return;
+        }
+        var callback = this.callback;
+        this.visible = false;
+        callback(action);
+      },
+
+      validate() {
+        if (this.$type === 'prompt') {
+          var inputPattern = this.inputPattern;
+          if (inputPattern && !inputPattern.test(this.inputValue || '')) {
+            this.editorErrorMessage = this.inputErrorMessage || '输入的数据不合法!';
+            return false;
+          }
+          var inputValidator = this.inputValidator;
+          if (typeof inputValidator === 'function') {
+            var validateResult = inputValidator(this.inputValue);
+            if (validateResult === false) {
+              this.editorErrorMessage = this.inputErrorMessage || '输入的数据不合法!';
+              return false;
+            }
+            if (typeof validateResult === 'string') {
+              this.editorErrorMessage = validateResult;
+              return false;
+            }
+          }
+        }
+        this.editorErrorMessage = '';
+        return true;
+      }
+    },
+
+    watch: {
+      inputValue() {
+        if (this.$type === 'prompt') {
+          this.validate();
+        }
+      },
+
+      visible(val) {
+        if (val && this.$type === 'prompt') {
+          setTimeout(() => {
+            if (this.$els.input) {
+              this.$els.input.focus();
+            }
+          }, 500);
+        }
+      }
+    },
+
+    data() {
+      return {
+        title: '',
+        message: '',
+        type: '',
+        showInput: false,
+        inputValue: null,
+        inputPlaceholder: '',
+        inputPattern: null,
+        inputValidator: null,
+        inputErrorMessage: '',
+        showConfirmButton: true,
+        showCancelButton: false,
+        confirmButtonText: CONFIRM_TEXT,
+        cancelButtonText: CANCEL_TEXT,
+        confirmButtonClass: '',
+        confirmButtonDisabled: false,
+        cancelButtonClass: '',
+
+        editorErrorMessage: null,
+        callback: null
+      };
+    }
+  };
+</script>
diff --git a/packages/notification/cooking.conf.js b/packages/notification/cooking.conf.js
new file mode 100644
index 000000000..21bef7f12
--- /dev/null
+++ b/packages/notification/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElNotification',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/notification/index.js b/packages/notification/index.js
new file mode 100644
index 000000000..aaac00867
--- /dev/null
+++ b/packages/notification/index.js
@@ -0,0 +1,3 @@
+import Notification from './src/main.js';
+
+module.exports = Notification;
diff --git a/packages/notification/package.json b/packages/notification/package.json
new file mode 100644
index 000000000..e6c08b741
--- /dev/null
+++ b/packages/notification/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "el-notification",
+  "version": "0.0.0",
+  "description": "A notification component for Vue.js.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/notification",
+  "author": "elemefe",
+  "license": "MIT",
+  "dependencies": {}
+}
diff --git a/packages/notification/src/main.js b/packages/notification/src/main.js
new file mode 100644
index 000000000..cb220082c
--- /dev/null
+++ b/packages/notification/src/main.js
@@ -0,0 +1,54 @@
+import Vue from 'vue';
+var NotificationConstructor = Vue.extend(require('./main.vue'));
+
+var instance;
+var instances = [];
+var seed = 1;
+
+var Notification = function(options) {
+  options = options || {};
+  var userOnClose = options.onClose;
+  var id = 'notification_' + seed++;
+
+  options.onClose = function() {
+    Notification.close(id, userOnClose);
+  };
+
+  instance = new NotificationConstructor({
+    data: options
+  });
+  instance.id = id;
+  instance.vm = instance.$mount();
+  instance.vm.$appendTo('body');
+  instance.dom = instance.vm.$el;
+
+  var topDist = 0;
+  for (var i = 0, len = instances.length; i < len; i++) {
+    topDist += instances[i].$el.offsetHeight + 16;
+  }
+  topDist += 16;
+  instance.top = topDist;
+  instances.push(instance);
+};
+
+Notification.close = function(id, userOnClose) {
+  for (var i = 0, len = instances.length; i < len; i++) {
+    if (id === instances[i].id) {
+      if (typeof userOnClose === 'function') {
+        userOnClose(instances[i]);
+      }
+      var index = i;
+      var removedHeight = instances[i].dom.offsetHeight;
+      instances.splice(i, 1);
+      break;
+    }
+  }
+
+  if (len > 1) {
+    for (i = index; i < len - 1 ; i++) {
+      instances[i].dom.style.top = parseInt(instances[i].dom.style.top, 10) - removedHeight - 10 + 'px';
+    }
+  }
+};
+
+export default Notification;
diff --git a/packages/notification/src/main.vue b/packages/notification/src/main.vue
new file mode 100644
index 000000000..3c31e3eb1
--- /dev/null
+++ b/packages/notification/src/main.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="el-notification" transition="el-notification-fade" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer()" @mouseleave="startTimer()">
+    <i class="el-notification__icon el-icon-{{typeClass}}" v-if="type"></i>
+    <div class="el-notification__group" :style="{ 'margin-left': type ? '55px' : '0' }">
+      <span>{{ title }}</span>
+      <p>{{ message }}</p>
+      <div class="el-notification__closeBtn el-icon-close" @click="handleClose()"></div>
+    </div>
+  </div>
+</template>
+
+<script type="text/babel">
+  let typeMap = {
+    success: 'circle-check',
+    info: 'information',
+    warning: 'warning',
+    error: 'circle-cross'
+  };
+
+  export default {
+    name: 'ElNotification',
+
+    data() {
+      return {
+        title: '',
+        message: '',
+        duration: 4500,
+        type: '',
+        onClose: null,
+
+        closed: false,
+        top: null,
+        timer: null
+      };
+    },
+
+    computed: {
+      typeClass() {
+        return this.type ? typeMap[this.type] : '';
+      }
+    },
+
+    watch: {
+      closed(newVal) {
+        if (newVal) {
+          this.$destroy(true);
+        }
+      }
+    },
+
+    methods: {
+      handleClose() {
+        this.closed = true;
+        if (typeof this.onClose === 'function') {
+          this.onClose();
+        }
+      },
+
+      clearTimer() {
+        clearTimeout(this.timer);
+      },
+
+      startTimer() {
+        if (this.duration > 0) {
+          this.timer = setTimeout(() => {
+            if (!this.closed) {
+              this.handleClose();
+            }
+          }, this.duration);
+        }
+      }
+    },
+
+    ready() {
+      if (this.duration > 0) {
+        this.timer = setTimeout(() => {
+          if (!this.closed) {
+            this.handleClose();
+          }
+        }, this.duration);
+      }
+    }
+  };
+</script>
\ No newline at end of file
diff --git a/packages/option-group/index.js b/packages/option-group/index.js
new file mode 100644
index 000000000..7d6f845e4
--- /dev/null
+++ b/packages/option-group/index.js
@@ -0,0 +1,7 @@
+const ElOptionGroup = require('../select/src/option-group');
+
+ElOptionGroup.install = function(Vue) {
+  Vue.component(ElOptionGroup.name, ElOptionGroup);
+};
+
+module.exports = ElOptionGroup;
diff --git a/packages/option/index.js b/packages/option/index.js
new file mode 100644
index 000000000..05970c6aa
--- /dev/null
+++ b/packages/option/index.js
@@ -0,0 +1,7 @@
+const ElOption = require('../select/src/option');
+
+ElOption.install = function(Vue) {
+  Vue.component(ElOption.name, ElOption);
+};
+
+module.exports = ElOption;
diff --git a/packages/pagination/README.md b/packages/pagination/README.md
new file mode 100644
index 000000000..9b9a79bb3
--- /dev/null
+++ b/packages/pagination/README.md
@@ -0,0 +1 @@
+## el-pagination
diff --git a/packages/pagination/cooking.conf.js b/packages/pagination/cooking.conf.js
new file mode 100644
index 000000000..bc357e541
--- /dev/null
+++ b/packages/pagination/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElPagination',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/pagination/index.js b/packages/pagination/index.js
new file mode 100644
index 000000000..1085962d3
--- /dev/null
+++ b/packages/pagination/index.js
@@ -0,0 +1,7 @@
+const Pagination = require('./src/pagination');
+
+Pagination.install = function(Vue) {
+  Vue.component(Pagination.name, Pagination);
+};
+
+module.exports = Pagination;
diff --git a/packages/pagination/package.json b/packages/pagination/package.json
new file mode 100644
index 000000000..1e3aca5f6
--- /dev/null
+++ b/packages/pagination/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "el-pagination",
+  "version": "0.0.0",
+  "description": "A pagination component for Vue.js.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/pagination",
+  "author": "qingwei-li<qingwei.li@ele.me>",
+  "license": "MIT",
+  "dependencies": {}
+}
diff --git a/packages/pagination/src/pager.vue b/packages/pagination/src/pager.vue
new file mode 100644
index 000000000..de69c9a27
--- /dev/null
+++ b/packages/pagination/src/pager.vue
@@ -0,0 +1,138 @@
+<template>
+  <ul @click="onPagerClick($event)" class="el-pager">
+    <li
+      :class="{ active: currentPage === 1 }"
+      v-if="pageCount > 0"
+      class="number">1</li>
+    <li
+      class="el-icon ellipsis btn-quickprev {{quickprevIconClass}}"
+      v-if="showPrevMore"
+      @mouseenter="quickprevIconClass = 'el-icon-d-arrow-left'"
+      @mouseleave="quickprevIconClass = 'el-icon-ellipsis'"
+    >
+    </li>
+    <li
+      v-for="pager in pagers"
+      :class="{ active: $parent.currentPage === pager }"
+      class="number">{{ pager }}</li>
+    <li
+      class="el-icon ellipsis btn-quicknext {{quicknextIconClass}}"
+      v-if="showNextMore"
+      @mouseenter="quicknextIconClass = 'el-icon-d-arrow-right'"
+      @mouseleave="quicknextIconClass = 'el-icon-ellipsis'"
+    >
+    </li>
+    <li
+      :class="{ active: currentPage === pageCount }"
+      class="number"
+      v-if="pageCount > 1">{{ pageCount }}</li>
+  </ul>
+</template>
+
+<script type="text/ecmascript-6">
+  export default {
+    name: 'ElPager',
+
+    props: {
+      currentPage: Number,
+
+      pageCount: Number
+    },
+
+    methods: {
+      onPagerClick(event) {
+        const target = event.target;
+        if (target.tagName === 'UL') {
+          return;
+        }
+
+        let newPage = Number(event.target.textContent);
+        const pageCount = this.pageCount;
+        const currentPage = this.currentPage;
+
+        if (target.className.indexOf('ellipsis') !== -1) {
+          if (target.className.indexOf('quickprev') !== -1) {
+            newPage = currentPage - 5;
+          } else if (target.className.indexOf('quicknext') !== -1) {
+            newPage = currentPage + 5;
+          }
+        }
+
+        if (!isNaN(newPage)) {
+          if (newPage < 1) {
+            newPage = 1;
+          }
+
+          if (newPage > pageCount) {
+            newPage = pageCount;
+          }
+        }
+
+        this.currentPage = newPage;
+
+        if (newPage !== currentPage) {
+          this.$emit('current-change', newPage);
+        }
+      }
+    },
+
+    computed: {
+      pagers() {
+        const pagerCount = 7;
+
+        const currentPage = Number(this.currentPage);
+        const pageCount = Number(this.pageCount);
+
+        let showPrevMore = false;
+        let showNextMore = false;
+
+        if (pageCount > pagerCount) {
+          if (currentPage > pagerCount - 2) {
+            showPrevMore = true;
+          }
+
+          if (currentPage < pageCount - 2) {
+            showNextMore = true;
+          }
+        }
+
+        const array = [];
+
+        if (showPrevMore && !showNextMore) {
+          const startPage = pageCount - (pagerCount - 2);
+          for (let i = startPage; i < pageCount; i++) {
+            array.push(i);
+          }
+        } else if (!showPrevMore && showNextMore) {
+          for (let i = 2; i < pagerCount; i++) {
+            array.push(i);
+          }
+        } else if (showPrevMore && showNextMore) {
+          const offset = Math.floor(pagerCount / 2) - 1;
+          for (let i = currentPage - offset ; i <= currentPage + offset; i++) {
+            array.push(i);
+          }
+        } else {
+          for (let i = 2; i < pageCount; i++) {
+            array.push(i);
+          }
+        }
+
+        this.showPrevMore = showPrevMore;
+        this.showNextMore = showNextMore;
+
+        return array;
+      }
+    },
+
+    data() {
+      return {
+        current: null,
+        showPrevMore: false,
+        showNextMore: false,
+        quicknextIconClass: 'el-icon-ellipsis',
+        quickprevIconClass: 'el-icon-ellipsis'
+      };
+    }
+  };
+</script>
diff --git a/packages/pagination/src/pagination.vue b/packages/pagination/src/pagination.vue
new file mode 100644
index 000000000..6aa000d2c
--- /dev/null
+++ b/packages/pagination/src/pagination.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="el-pagination"></div>
+</template>
+
+<script type="text/ecmascript-6">
+  import Vue from 'vue';
+  import Pager from './pager.vue';
+  import ElSelect from 'packages/select/index.js';
+  import ElOption from 'packages/option/index.js';
+
+  var TEMPLATE_MAP = {
+    prev: '<span is="prev"></span>',
+    jumper: '<span is="jumper"></span>',
+    pager: '<span is="pager" :current-page="currentPage" :page-count="pageCount" @current-change="handleCurrentChange"></span>',
+    next: '<span is="next"></span>',
+    sizes: '<span is="sizes"></span>',
+    slot: '<slot></slot>',
+    total: '<span is="total"></span>'
+  };
+
+  export default {
+    name: 'ElPagination',
+
+    props: {
+      pageSize: {
+        type: Number,
+        default: 10
+      },
+
+      small: Boolean,
+
+      total: {
+        type: Number,
+        default: 0
+      },
+
+      currentPage: {
+        type: Number,
+        default: 1
+      },
+
+      layout: {
+        default: 'prev, pager, next, jumper, slot, ->, total'
+      },
+
+      pageSizes: {
+        type: Array,
+        default() {
+          return [10, 20, 30, 40, 50, 100];
+        }
+      }
+    },
+
+    components: {
+      ElSelect,
+      ElOption,
+
+      Prev: {
+        template: `<button class="btn-prev" @click="$parent.prev()" :class="{ disabled: $parent.currentPage <= 1 }">
+          <i class="el-icon el-icon-arrow-left"></i>
+        </button>`
+      },
+
+      Next: {
+        template: `<button class="btn-next" @click="$parent.next()" :class="{ disabled: $parent.currentPage === $parent.pageCount }">
+          <i class="el-icon el-icon-arrow-right"></i>
+        </button>`
+      },
+
+      Sizes: {
+        template: `<span class="el-pagination__sizes">
+          <el-select size="small" :value="$parent.pageSize" @change="handleChange" :width="110">
+            <el-option v-for="item in $parent.pageSizes" :value="item" :label="item + ' 条/页'"></el-option>
+          </el-select>
+        </span>`,
+
+        methods: {
+          handleChange(val) {
+            if (val !== this.$parent.pageSize) {
+              this.$parent.pageSize = val = parseInt(val, 10);
+              this.$parent.$emit('size-change', val);
+            }
+          }
+        }
+      },
+
+      Jumper: {
+        data() {
+          return {
+            oldValue: null
+          };
+        },
+
+        methods: {
+          handleFocus(event) {
+            this.oldValue = event.target.value;
+          },
+
+          handleChange(event) {
+            const target = event.target;
+            if (target.value !== this.oldValue && Number(target.value) === this.$parent.currentPage) {
+              this.$parent.$emit('current-change', this.$parent.currentPage);
+            }
+
+            this.oldValue = null;
+          }
+        },
+
+        template: `<span class="el-pagination__jump">前往<input class="el-pagination__editor"
+          type="number"
+          :min="1"
+          :max="pageCount"
+          v-model="$parent.currentPage"
+          @change="handleChange($event)"
+          @focus="handleFocus($event)"
+          style="width: 30px;"
+          number
+          lazy />页</span>`
+      },
+
+      Total: {
+        template: '<span class="el-pagination__total">共 {{$parent.total}} 条</span>'
+      },
+
+      Pager
+    },
+
+    methods: {
+      handleCurrentChange(val) {
+        this.currentPage = this.getValidCurrentPage(val);
+        this.$emit('current-change', this.currentPage);
+      },
+
+      prev() {
+        const oldPage = this.currentPage;
+        const newVal = this.currentPage - 1;
+        this.currentPage = this.getValidCurrentPage(newVal);
+
+        if (this.currentPage !== oldPage) {
+          this.$emit('current-change', this.currentPage);
+        }
+      },
+
+      next() {
+        const oldPage = this.currentPage;
+        const newVal = this.currentPage + 1;
+        this.currentPage = this.getValidCurrentPage(newVal);
+
+        if (this.currentPage !== oldPage) {
+          this.$emit('current-change', this.currentPage);
+        }
+      },
+
+      first() {
+        const oldPage = this.currentPage;
+        const newVal = 1;
+        this.currentPage = this.getValidCurrentPage(newVal);
+
+        if (this.currentPage !== oldPage) {
+          this.$emit('current-change', this.currentPage);
+        }
+      },
+
+      last() {
+        const oldPage = this.currentPage;
+        const newVal = this.pageCount;
+        this.currentPage = this.getValidCurrentPage(newVal);
+
+        if (this.currentPage !== oldPage) {
+          this.$emit('current-change', this.currentPage);
+        }
+      },
+
+      getValidCurrentPage(value) {
+        value = parseInt(value, 10);
+
+        var resetValue;
+        if (value < 1) {
+          resetValue = this.pageCount > 0 ? 1 : 0;
+        } else if (value > this.pageCount) {
+          resetValue = this.pageCount;
+        }
+
+        if (resetValue === undefined && isNaN(value)) {
+          value = this.pageCount > 0 ? 1 : 0;
+        }
+
+        return resetValue === undefined ? value : resetValue;
+      }
+    },
+
+    created() {
+      this.$options._linkerCachable = false;
+      let template = `<div class="el-pagination ${this.small ? 'el-pagination--small' : ''}" >`;
+      const layout = this.$options.layout || this.layout || '';
+
+      const components = layout.split(',').map((item) => item.trim());
+
+      let haveRightWrapper = false;
+
+      components.forEach((component) => {
+        if (component === '->') {
+          haveRightWrapper = true;
+          template += '<div class="el-pagination__rightwrapper">';
+        } else {
+          if (!TEMPLATE_MAP[component]) {
+            console.warn('layout component not resolved:' + component);
+          }
+          template += TEMPLATE_MAP[component] || '';
+        }
+      });
+
+      if (haveRightWrapper) {
+        template += '</div>';
+      }
+      template += '</div>';
+
+      this.$options.template = template;
+    },
+
+    computed: {
+      pageCount() {
+        return Math.ceil(this.total / this.pageSize);
+      },
+
+      startRecordIndex() {
+        const result = (this.currentPage - 1) * this.pageSize + 1;
+        return result > 0 ? result : 0;
+      },
+
+      endRecordIndex() {
+        const result = this.currentPage * this.pageSize;
+        return result > this.total ? this.total : result;
+      }
+    },
+
+    watch: {
+      pageCount(newVal) {
+        if (newVal > 0 && this.currentPage === 0) {
+          this.currentPage = 1;
+        } else if (this.currentPage > newVal) {
+          this.currentPage = newVal;
+        }
+      },
+
+      currentPage(newVal, oldVal) {
+        newVal = parseInt(newVal, 10);
+
+        if (isNaN(newVal)) {
+          newVal = oldVal || 1;
+        } else {
+          newVal = this.getValidCurrentPage(newVal);
+        }
+
+        if (newVal !== undefined) {
+          Vue.nextTick(() => {
+            this.currentPage = newVal;
+          });
+        }
+      }
+    },
+
+    ready() {
+      this.currentPage = this.getValidCurrentPage(this.currentPage);
+    }
+  };
+</script>
diff --git a/packages/popover/cooking.conf.js b/packages/popover/cooking.conf.js
new file mode 100644
index 000000000..43e29dd80
--- /dev/null
+++ b/packages/popover/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElPopover',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/popover/index.js b/packages/popover/index.js
new file mode 100644
index 000000000..c09e2e33f
--- /dev/null
+++ b/packages/popover/index.js
@@ -0,0 +1,7 @@
+const Popover = require('./src/main');
+
+Popover.install = function(Vue) {
+  Vue.component(Popover.name, Popover);
+};
+
+module.exports = Popover;
diff --git a/packages/popover/package.json b/packages/popover/package.json
new file mode 100644
index 000000000..6fc2ca3b6
--- /dev/null
+++ b/packages/popover/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "el-popover",
+  "version": "0.0.0",
+  "description": "A popover component for Vue.js.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/popover",
+  "author": "elemefe",
+  "license": "MIT",
+  "devDependencies": {
+    "wind-dom": "0.0.3"
+  }
+}
diff --git a/packages/popover/src/main.vue b/packages/popover/src/main.vue
new file mode 100644
index 000000000..1334b57d1
--- /dev/null
+++ b/packages/popover/src/main.vue
@@ -0,0 +1,116 @@
+<template>
+  <div
+    class="el-popover"
+    v-el:popper
+    v-show="visible"
+    :transition="transition"
+    :style="{ width: width + 'px' }">
+    <div class="el-popover__title" v-if="title" v-text="title"></div>
+    <slot>{{ content }}</slot>
+  </div>
+</template>
+
+<script>
+import Popper from 'main/utils/vue-popper';
+import Vue from 'vue';
+import { on, off } from 'wind-dom/src/event';
+
+Vue.directive('popover', {
+  update() {
+    this.vm.$nextTick(() => {
+      this.vm.$refs[this.arg].reference = this.el;
+    });
+  }
+});
+
+export default {
+  name: 'el-popover',
+
+  mixins: [Popper],
+
+  props: {
+    trigger: {
+      type: String,
+      default: 'click',
+      validator: value => ['click', 'focus', 'hover'].indexOf(value) > -1
+    },
+    title: String,
+    content: String,
+    reference: {
+      default: 'body'
+    },
+    width: {},
+    visibleArrow: {
+      default: true
+    },
+    transition: {
+      type: String,
+      default: 'fade-in-linear'
+    },
+    options: {
+      default() {
+        return {
+          gpuAcceleration: false
+        };
+      }
+    }
+  },
+
+  ready() {
+    let _timer;
+
+    this.$nextTick(() => {
+      if (this.trigger === 'click') {
+        on(this.reference, 'click', () => { this.visible = !this.visible; });
+        on(document, 'click', (e) => {
+          if (!this.$el ||
+              !this.reference ||
+              this.$el.contains(e.target) ||
+              this.reference.contains(e.target)) return;
+          this.visible = false;
+        });
+      } else if (this.trigger === 'hover') {
+        on(this.reference, 'mouseenter', () => {
+          this.visible = true;
+          clearTimeout(_timer);
+        });
+        on(this.reference, 'mouseleave', () => {
+          _timer = setTimeout(() => {
+            this.visible = false;
+          }, 200);
+        });
+      } else {
+        if (this.reference.hasChildNodes()) {
+          const children = this.reference.childNodes;
+
+          for (let i = 0; i < children.length; i++) {
+            if (children[i].nodeName === 'INPUT') {
+              on(children[i], 'focus', () => { this.visible = true; });
+              on(children[i], 'blur', () => { this.visible = false; });
+              break;
+            }
+          }
+        } else if (
+            this.reference.nodeName === 'INPUT' ||
+            this.reference.nodeName === 'TEXTAREA'
+          ) {
+          on(this.reference, 'focus', () => { this.visible = true; });
+          on(this.reference, 'blur', () => { this.visible = false; });
+        } else {
+          on(this.reference, 'mousedown', () => { this.visible = true; });
+          on(this.reference, 'mouseup', () => { this.visible = false; });
+        }
+      }
+    });
+  },
+
+  destroyed() {
+    off(this.reference, 'mouseup');
+    off(this.reference, 'mousedown');
+    off(this.reference, 'focus');
+    off(this.reference, 'blur');
+    off(this.reference, 'mouseleave');
+    off(this.reference, 'mouseenter');
+  }
+};
+</script>
diff --git a/packages/progress/cooking.conf.js b/packages/progress/cooking.conf.js
new file mode 100644
index 000000000..e0851f192
--- /dev/null
+++ b/packages/progress/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElProgress',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/progress/index.js b/packages/progress/index.js
new file mode 100644
index 000000000..ae7767fc8
--- /dev/null
+++ b/packages/progress/index.js
@@ -0,0 +1,7 @@
+const ElProgress = require('./src/progress');
+
+ElProgress.install = function(Vue) {
+  Vue.component(ElProgress.name, ElProgress);
+};
+
+module.exports = ElProgress;
diff --git a/packages/progress/package.json b/packages/progress/package.json
new file mode 100644
index 000000000..6fa5933cc
--- /dev/null
+++ b/packages/progress/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "el-progress",
+  "version": "1.0.1",
+  "description": "A progress component for Vue.",
+  "main": "lib/index.js",
+  "keywords": [
+    "element",
+    "vue",
+    "component",
+    "progress"
+  ],
+  "author": "haiping.zeng <haiping.zeng@ele.me>",
+  "license": "MIT",
+  "repository": "https://github.com/element-component/element/tree/master/packages/progress",
+  "devDependencies": {
+  }
+}
diff --git a/packages/progress/src/progress.vue b/packages/progress/src/progress.vue
new file mode 100644
index 000000000..d553c4504
--- /dev/null
+++ b/packages/progress/src/progress.vue
@@ -0,0 +1,35 @@
+<template>
+  <div
+    class="el-progress"
+    :class="[
+      size ? 'el-progress--' + size : '',
+      type ? 'el-progress--' + type : ''
+    ]"
+  >
+    <div class="el-progress__bar" v-bind:style="barStyle"></div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'ElProgress',
+    props: {
+      type: {
+        type: String,
+        default: 'blue'
+      },
+      size: String,
+      percentage: {
+        type: Number,
+        default: 0,
+        required: true
+      }
+    },
+    computed: {
+      barStyle() {
+        var style = {};
+        style.width = this.percentage + '%';
+        return style;
+      }
+    }
+  };
+</script>
diff --git a/packages/radio-button/index.js b/packages/radio-button/index.js
new file mode 100644
index 000000000..828a1a18a
--- /dev/null
+++ b/packages/radio-button/index.js
@@ -0,0 +1,7 @@
+const RadioButton = require('../radio/src/radio-button.vue');
+
+RadioButton.install = function(Vue) {
+  Vue.component(RadioButton.name, RadioButton);
+};
+
+module.exports = RadioButton;
diff --git a/packages/radio-group/index.js b/packages/radio-group/index.js
new file mode 100644
index 000000000..917f236bd
--- /dev/null
+++ b/packages/radio-group/index.js
@@ -0,0 +1,7 @@
+const RadioGroup = require('../radio/src/radio-group.vue');
+
+RadioGroup.install = function(Vue) {
+  Vue.component(RadioGroup.name, RadioGroup);
+};
+
+module.exports = RadioGroup;
diff --git a/packages/radio/README.md b/packages/radio/README.md
new file mode 100644
index 000000000..7253378a1
--- /dev/null
+++ b/packages/radio/README.md
@@ -0,0 +1,51 @@
+# el-radio
+> A el-radio component for Vue.js.
+
+## Demo
+http://element-component.github.io/el-radio
+
+## Installation
+```shell
+npm i el-radio -D
+```
+
+## Usage
+```javascript
+import Vue from 'vue'
+import ElRadio from 'el-radio'
+import 'element-theme-default/dist/radio.css'
+
+Vue.use(ElRadio)
+```
+
+or
+
+```javascript
+import Vue from 'vue'
+import { ElRadio } from 'el-radio'
+
+Vue.component('el-radio', ElRadio)
+```
+
+
+## Options
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| model     | 绑定值   | string  |               |         |
+| value     | 真实值   | string    |               |         |
+| label     | 显示值，默认显示 value   | string    |               |         |
+| disabled  | 禁用    | boolean   | true, false   | false   |
+
+## Development
+```shell
+make dev
+
+## test
+make test
+
+## build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)
diff --git a/packages/radio/cooking.conf.js b/packages/radio/cooking.conf.js
new file mode 100644
index 000000000..6f6df4d40
--- /dev/null
+++ b/packages/radio/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElCascader',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/radio/index.js b/packages/radio/index.js
new file mode 100644
index 000000000..38273264a
--- /dev/null
+++ b/packages/radio/index.js
@@ -0,0 +1,8 @@
+const ElRadio = require('./src/radio');
+
+ElRadio.install = function(Vue) {
+  Vue.component('el-radio', ElRadio);
+};
+
+module.exports = ElRadio;
+
diff --git a/packages/radio/package.json b/packages/radio/package.json
new file mode 100644
index 000000000..deb5418bb
--- /dev/null
+++ b/packages/radio/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "el-radio",
+  "version": "1.0.0",
+  "description": "A radio component for Vue.js.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/radio",
+  "author": "qingwei-li<qingwei.li@ele.me>",
+  "license": "MIT",
+  "dependencies": {}
+}
diff --git a/packages/radio/src/radio-button.vue b/packages/radio/src/radio-button.vue
new file mode 100644
index 000000000..8c27e1541
--- /dev/null
+++ b/packages/radio/src/radio-button.vue
@@ -0,0 +1,50 @@
+<script>
+  export default {
+    name: 'ElRadioButton',
+
+    props: {
+      label: {
+        type: [String, Number],
+        required: true
+      },
+      disabled: Boolean,
+      name: String,
+      size: String
+    },
+    computed: {
+      value: {
+        get() {
+          return this.$parent.value;
+        },
+        set(newValue) {
+          this.$parent.value = newValue;
+        }
+      }
+    },
+    ready() {
+      this.size = this.$parent.size;
+    }
+  };
+</script>
+
+<template>
+  <label
+    class="el-radio-button"
+    :class="[
+      size ? 'el-radio-button-' + size : '',
+      { 'is-active': value === label }
+    ]"
+  >
+    <input
+      class="el-radio-button__orig-radio"
+      :value="label"
+      type="radio"
+      v-model="value"
+      :name="name"
+      :disabled="disabled">
+    <span class="el-radio-button__inner">
+      <slot></slot>
+      <template v-if="!_slotContents">{{label}}</template>
+    </span>
+  </label>
+</template>
diff --git a/packages/radio/src/radio-group.vue b/packages/radio/src/radio-group.vue
new file mode 100644
index 000000000..d232025bb
--- /dev/null
+++ b/packages/radio/src/radio-group.vue
@@ -0,0 +1,29 @@
+<script>
+  import emitter from 'main/mixins/emitter';
+
+  export default {
+    name: 'ElRadioGroup',
+
+    mixins: [emitter],
+
+    props: {
+      value: {
+        default: '',
+        twoWay: true,
+        required: true
+      },
+      size: String
+    },
+    watch: {
+      value(value) {
+        this.dispatch('form-item', 'el.form.change', [this.value]);
+      }
+    }
+  };
+</script>
+
+<template>
+  <div class="el-radio-group">
+    <slot></slot>
+  </div>
+</template>
diff --git a/packages/radio/src/radio.vue b/packages/radio/src/radio.vue
new file mode 100644
index 000000000..5906bc097
--- /dev/null
+++ b/packages/radio/src/radio.vue
@@ -0,0 +1,66 @@
+<template>
+  <label class="el-radio">
+    <span class="el-radio__input">
+      <span class="el-radio__inner"
+        :class="{
+        'is-disabled': disabled,
+        'is-checked': _value === label,
+        'is-focus': focus
+      }"></span>
+      <input
+        class="el-radio__original"
+        :value="label"
+        type="radio"
+        v-model="_value"
+        @focus="focus = true"
+        @blur="focus = false"
+        :name="name"
+        :disabled="disabled">
+    </span>
+    <span class="el-radio__label">
+      <slot></slot>
+      <template v-if="!_slotContents">{{label}}</template>
+    </span>
+  </label>
+</template>
+<script>
+  export default {
+    name: 'ElRadio',
+
+    props: {
+      value: {
+        twoWay: true
+      },
+      label: {
+        type: [String, Number],
+        required: true
+      },
+      disabled: Boolean,
+      name: String
+    },
+    data() {
+      return {
+        focus: false
+      };
+    },
+    watch: {
+      value(value) {
+        this.$emit('onchange', value);
+      }
+    },
+    computed: {
+      _value: {
+        get() {
+          return this.value !== undefined ? this.value : this.$parent.value;
+        },
+        set(newValue) {
+          if (this.value !== undefined) {
+            this.value = newValue;
+          } else {
+            this.$parent.value = newValue;
+          }
+        }
+      }
+    }
+  };
+</script>
diff --git a/packages/row/cooking.conf.js b/packages/row/cooking.conf.js
new file mode 100644
index 000000000..c90fc5cd8
--- /dev/null
+++ b/packages/row/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElRow',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/row/index.js b/packages/row/index.js
new file mode 100644
index 000000000..b4420c459
--- /dev/null
+++ b/packages/row/index.js
@@ -0,0 +1,8 @@
+const ElRow = require('./src/row');
+
+ElRow.install = function(Vue) {
+  Vue.component('el-row', ElRow);
+};
+
+module.exports = ElRow;
+
diff --git a/packages/row/package.json b/packages/row/package.json
new file mode 100644
index 000000000..f84c87e51
--- /dev/null
+++ b/packages/row/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "el-row",
+  "version": "1.0.2",
+  "description": "A row component for Vue.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/row",
+  "author": "qingwei-li<qingwei.li@ele.me>",
+  "license": "MIT",
+  "dependencies": {}
+}
diff --git a/packages/row/src/row.vue b/packages/row/src/row.vue
new file mode 100644
index 000000000..48ed82f3e
--- /dev/null
+++ b/packages/row/src/row.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="el-row" v-bind:style="style">
+    <slot></slot>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'ElRow',
+
+    props: {
+      gutter: {
+        type: Number
+      }
+    },
+
+    computed: {
+      style() {
+        var ret = {};
+
+        if (this.gutter) {
+          ret.marginLeft = `-${this.gutter / 2}px`;
+          ret.marginRight = ret.marginLeft;
+        }
+
+        return ret;
+      }
+    },
+
+    data() {
+      return {
+      };
+    }
+  };
+</script>
diff --git a/packages/select-dropdown/cooking.conf.js b/packages/select-dropdown/cooking.conf.js
new file mode 100644
index 000000000..25b86b89a
--- /dev/null
+++ b/packages/select-dropdown/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElSelectMenu',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/select-dropdown/index.js b/packages/select-dropdown/index.js
new file mode 100644
index 000000000..60756cab8
--- /dev/null
+++ b/packages/select-dropdown/index.js
@@ -0,0 +1,7 @@
+const SelectDropdown = require('./src/select-dropdown.vue');
+
+SelectDropdown.install = function(Vue) {
+  Vue.component(SelectDropdown.name, SelectDropdown);
+};
+
+module.exports = SelectDropdown;
diff --git a/packages/select-dropdown/package.json b/packages/select-dropdown/package.json
new file mode 100644
index 000000000..83a9d2424
--- /dev/null
+++ b/packages/select-dropdown/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "el-select-dropdown",
+  "version": "0.0.0",
+  "description": "A select-dropdown component for Vue.js.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/select-dropdown",
+  "author": "elemefe",
+  "license": "MIT",
+  "dependencies": {
+  }
+}
diff --git a/packages/select-dropdown/src/select-dropdown.vue b/packages/select-dropdown/src/select-dropdown.vue
new file mode 100644
index 000000000..cb8917294
--- /dev/null
+++ b/packages/select-dropdown/src/select-dropdown.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="el-select-dropdown">
+    <slot></slot>
+  </div>
+</template>
+
+<script type="text/babel">
+  import Popper from 'main/utils/popper.js';
+
+  export default {
+    name: 'el-select-dropdown',
+
+    componentName: 'select-dropdown',
+
+    data() {
+      return {
+        popper: null
+      };
+    },
+
+    created() {
+      this.$on('updatePopper', this.updatePopper);
+      this.$on('destroyPopper', this.destroyPopper);
+    },
+
+    methods: {
+      updatePopper() {
+        if (this.popper) {
+          this.popper.update();
+        } else {
+          this.popper = new Popper(this.$parent.$els.reference, this.$el, {
+            gpuAcceleration: false,
+            placement: 'bottom-start',
+            boundariesPadding: 0,
+            forceAbsolute: true
+          });
+          this.popper.onCreate(popper => {
+            this.resetTransformOrigin(popper);
+          });
+        }
+      },
+
+      destroyPopper() {
+        if (this.popper) {
+          this.resetTransformOrigin(this.popper);
+          setTimeout(() => {
+            this.popper.destroy();
+            this.popper = null;
+          }, 300);
+        }
+      },
+
+      resetTransformOrigin(popper) {
+        let placementMap = { top: 'bottom', bottom: 'top' };
+        let placement = popper._popper.getAttribute('x-placement').split('-')[0];
+        let origin = placementMap[placement];
+        popper._popper.style.transformOrigin = `center ${ origin }`;
+      }
+    },
+
+    beforeDestroy() {
+      if (this.popper) {
+        this.popper.destroy();
+      }
+    }
+  };
+</script>
diff --git a/packages/select/README.md b/packages/select/README.md
new file mode 100644
index 000000000..6b948716f
--- /dev/null
+++ b/packages/select/README.md
@@ -0,0 +1,80 @@
+# el-select
+> A el-select component for Vue.js.
+
+## dependencies
+- vue-clickoutside
+
+## Installation
+```shell
+npm i el-select -D
+```
+
+## Usage
+```javascript
+  import vue from 'Vue'
+
+  // import component
+  import Component from 'el-select'
+  import ''el-select/lib/style.css'
+
+  Vue.use(Component)
+```
+
+or
+```javascript
+import {
+  ElSelect,
+  ElOption,
+  ElOptionGroup
+} from 'el-select'
+
+Vue.component('el-select', ElSelect)
+Vue.component('el-option', ElOption)
+Vue.component('el-option-group', ElOptionGroup)
+```
+
+## API
+
+### el-elect
+
+| 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
+|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
+| model              | 绑定值                                                   | string,  string[] |             |        |
+| type              | 显示类型, search 会带搜索框，multiple 允许多选                                                  | string | normal, search, multiple | normal |
+| placeholder        | 输入框占位文本                                           | string            |             |        |
+| hint-placeholder        | 获取焦点后显示的占位文本                                           | string            |             |        |
+| search-placeholder | 搜索框占位内容                                           | string            |             |        |
+| search-model | 搜索结果绑定值                                           | string            |             |        |
+| disabled           | 禁用                                                     | boolean           | true, false | false  |
+| change       | 选中值后的回调函数, 返回当前选中的值                                                 | function           | |   ||
+
+### el-option
+| 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
+|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
+| label| 显示值，可选 | string|             |        |
+| value| 真实值| string|             |        |
+| remark| 额外信息，将显示在右边| string|             |        |
+| disabled           | 禁用| boolean           | true, false | false  |
+
+### el-option-group
+
+| 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
+|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
+| hide-title        | 隐藏标题| boolean            |true, false |false|
+| hide-list        | 隐藏列表| boolean            |true, false |false|
+| title| 真实值| 分组标题|             |        |
+
+
+## Development
+```shell
+make dev
+
+## test
+make test
+
+## build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)
diff --git a/packages/select/cooking.conf.js b/packages/select/cooking.conf.js
new file mode 100644
index 000000000..b582e5547
--- /dev/null
+++ b/packages/select/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElSelect',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/select/index.js b/packages/select/index.js
new file mode 100644
index 000000000..6c130d151
--- /dev/null
+++ b/packages/select/index.js
@@ -0,0 +1,7 @@
+var ElSelect = require('./src/select');
+
+ElSelect.install = function(Vue) {
+  Vue.component(ElSelect.name, ElSelect);
+};
+
+module.exports = ElSelect;
diff --git a/packages/select/package.json b/packages/select/package.json
new file mode 100644
index 000000000..95fd7126f
--- /dev/null
+++ b/packages/select/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "el-select",
+  "version": "1.0.1",
+  "description": "A el-select component for Vue.",
+  "main": "lib/index.js",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "author": "qingwei.li<qingwei.li@ele.me>",
+  "license": "MIT",
+  "repository": "https://github.com/element-component/element/tree/master/packages/select",
+  "devDependencies": {
+    "throttle-debounce": "^1.0.1",
+    "vue-clickoutside": "0.0.4"
+  }
+}
diff --git a/packages/select/src/option-group.vue b/packages/select/src/option-group.vue
new file mode 100644
index 000000000..fbd95bf6b
--- /dev/null
+++ b/packages/select/src/option-group.vue
@@ -0,0 +1,32 @@
+<template>
+  <li class="el-select-group__title">{{ label }}</li>
+  <li>
+    <ul class="el-select-group">
+      <slot></slot>
+    </ul>
+  </li>
+</template>
+
+<script type="text/babel">
+  import emitter from 'main/mixins/emitter';
+
+  export default {
+    mixins: [emitter],
+
+    name: 'el-option-group',
+
+    props: {
+      label: String,
+      disabled: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    ready() {
+      if (this.disabled) {
+        this.broadcast('option', 'disableOptions');
+      }
+    }
+  };
+</script>
\ No newline at end of file
diff --git a/packages/select/src/option.vue b/packages/select/src/option.vue
new file mode 100644
index 000000000..0db5c4058
--- /dev/null
+++ b/packages/select/src/option.vue
@@ -0,0 +1,120 @@
+<template>
+  <li
+    @mouseenter="hoverItem"
+    @click.stop="selectOptionClick"
+    class="el-select-dropdown__item"
+    v-show="queryPassed"
+    :class="{ 'selected': itemSelected(), 'is-disabled': disabled, 'hover': parent.hoverIndex === index }">
+    <include></include>
+  </li>
+</template>
+
+<script type="text/babel">
+  import emitter from 'main/mixins/emitter';
+  const toString = Object.prototype.toString;
+
+  export default {
+    mixins: [emitter],
+
+    name: 'el-option',
+
+    componentName: 'option',
+
+    props: {
+      value: {
+        required: true
+      },
+      label: [String, Number],
+      selected: {
+        type: Boolean,
+        default: false
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      template: {
+        type: String,
+        default: '<span>{{ label }}</span>'
+      }
+    },
+
+    data() {
+      return {
+        parent: null,
+        index: -1,
+        queryPassed: true,
+        hitState: false
+      };
+    },
+
+    watch: {
+      selected(val) {
+        if (val === true) {
+          this.dispatch('select', 'addOptionToValue', this);
+        }
+      }
+    },
+
+    partials: {
+      'el-selectmenu-default': '<span>{{ label }}</span>'
+    },
+
+    methods: {
+      disableOptions() {
+        this.disabled = true;
+      },
+
+      hoverItem() {
+        if (!this.disabled) {
+          this.parent.hoverIndex = this.parent.options.indexOf(this);
+        }
+      },
+
+      selectOptionClick() {
+        if (this.disabled !== true) {
+          this.dispatch('select', 'handleOptionClick', this);
+        }
+      },
+
+      itemSelected() {
+        if (toString.call(this.parent.selected) === '[object Object]') {
+          return this === this.parent.selected;
+        } else if (toString.call(this.parent.selected) === '[object Array]') {
+          return this.parent.selected.indexOf(this) > -1;
+        }
+      },
+
+      queryChange(query) {
+        this.queryPassed = new RegExp(query, 'i').test(this.label);
+        if (!this.queryPassed) {
+          this.parent.filteredOptionsCount--;
+        }
+      }
+    },
+
+    created() {
+      // Vue 1.x 需要禁用缓存；2.0 不需要配置
+      this.$options._linkerCachable = false;
+      this.parent = this.$parent;
+      while (!this.parent.isSelect) {
+        this.parent = this.parent.$parent;
+      }
+      this.label = this.label || ((typeof this.value === 'string' || typeof this.value === 'number') ? this.value : '');
+      this.selected = this.selected || (this.parent.multiple ? this.parent.value.indexOf(this.value) > -1 : this.parent.value === this.value);
+      this.parent.options.push(this);
+      this.parent.optionsCount++;
+      this.parent.filteredOptionsCount++;
+      this.index = this.parent.options.indexOf(this);
+
+      this.$options.template = this.$options.template.replace(/<include><\/include>/g, this.template);
+
+      if (this.selected === true) {
+        this.dispatch('select', 'addOptionToValue', this);
+      }
+
+      this.$on('queryChange', this.queryChange);
+      this.$on('disableOptions', this.disableOptions);
+    }
+  };
+</script>
diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
new file mode 100644
index 000000000..0b11a47d0
--- /dev/null
+++ b/packages/select/src/select.vue
@@ -0,0 +1,487 @@
+<template>
+  <div class="el-select" :class="{ 'is-multiple': multiple, 'is-small': size === 'small' }">
+    <div class="el-select__tags" v-if="multiple" @click.stop="toggleMenu" v-el:tags :style="{ 'max-width': width - 36 + 'px' }">
+      <el-tag
+      v-for="item in selected"
+      closable
+      :hit="item.hitState"
+      type="primary"
+      @click="deleteTag($event, item)"
+      close-transition>{{ item.label }}</el-tag>
+
+      <input
+        type="text"
+        class="el-select__input"
+        @keyup="managePlaceholder"
+        @keydown="resetInputState"
+        @keydown.down.prevent="navigateOptions('next')"
+        @keydown.up.prevent="navigateOptions('prev')"
+        @keydown.enter.prevent="selectOption"
+        @keydown.esc.prevent="visible = false"
+        @keydown.delete="deletePrevTag"
+        v-model="query"
+        :debounce="remote ? 300 : 0"
+        v-if="filterable"
+        :style="{ width: inputLength + 'px' }"
+        v-el:input>
+    </div>
+    <el-input
+      v-el:reference
+      :value.sync="selectedLabel"
+      type="text"
+      :placeholder="placeholder"
+      :name="name"
+      :disabled="disabled"
+      :readonly="!filterable || multiple"
+      @click="toggleMenu"
+      @keyup="debouncedOnInputChange"
+      @keydown.down.prevent="navigateOptions('next')"
+      @keydown.up.prevent="navigateOptions('prev')"
+      @keydown.enter.prevent="selectOption"
+      @keydown.esc.prevent="visible = false"
+      @keydown.tab="visible = false"
+      @mouseenter="inputHovering = true"
+      @mouseleave="inputHovering = false"
+      :icon="showCloseIcon ? 'circle-close' : 'caret-top'"
+      :style="{ 'width': width + 'px' }"
+      v-element-clickoutside="visible = false">
+    </el-input>
+    <el-select-menu
+      v-el:popper
+      v-show="visible && nodataText !== false"
+      transition="md-fade-bottom"
+      :style="{ 'width': dropdownWidth ? dropdownWidth + 'px' : '100%' }">
+      <ul class="el-select-dropdown__list" v-show="options.length > 0 && filteredOptionsCount > 0">
+        <slot></slot>
+      </ul>
+      <p class="el-select-dropdown__nodata" v-if="nodataText">{{ nodataText }}</p>
+    </el-select-menu>
+  </div>
+</template>
+
+<script type="text/babel">
+  import emitter from 'main/mixins/emitter';
+  import ElInput from 'packages/input/index.js';
+  import ElSelectMenu from 'packages/select-dropdown/index.js';
+  import ElTag from 'packages/tag/index.js';
+  import debounce from 'throttle-debounce/debounce';
+
+  export default {
+    mixins: [emitter],
+
+    name: 'ElSelect',
+
+    componentName: 'select',
+
+    computed: {
+      debounce() {
+        return this.remote ? 300 : 0;
+      },
+
+      showCloseIcon() {
+        let criteria = this.clearable && this.inputHovering && !this.multiple && this.options.indexOf(this.selected) > -1;
+        let icon = this.$el.querySelector('.el-input__icon');
+        if (icon) {
+          if (criteria) {
+            icon.addEventListener('click', this.deleteSelected);
+            icon.classList.add('is-show-close');
+          } else {
+            icon.removeEventListener('click', this.deleteSelected);
+            icon.classList.remove('is-show-close');
+          }
+        }
+        return criteria;
+      },
+
+      nodataText() {
+        if (this.loading) {
+          return '加载中';
+        } else {
+          if (this.voidRemoteQuery) {
+            this.voidRemoteQuery = false;
+            return false;
+          }
+          if (this.filteredOptionsCount === 0) {
+            return '无匹配数据';
+          }
+          if (this.options.length === 0) {
+            return '无数据';
+          }
+        }
+        return null;
+      }
+    },
+
+    components: {
+      ElInput,
+      ElSelectMenu,
+      ElTag
+    },
+
+    directives: {
+      ElementClickoutside: require('vue-clickoutside')
+    },
+
+    props: {
+      name: String,
+      width: Number,
+      dropdownWidth: Number,
+      value: {},
+      size: String,
+      disabled: Boolean,
+      clearable: Boolean,
+      filterable: Boolean,
+      loading: Boolean,
+      remote: Boolean,
+      remoteMethod: Function,
+      filterMethod: Function,
+      multiple: Boolean,
+      placeholder: {
+        type: String,
+        default: '请选择'
+      }
+    },
+
+    data() {
+      return {
+        options: [],
+        selected: {},
+        isSelect: true,
+        inputLength: 20,
+        valueChangeBySelected: false,
+        cachedPlaceHolder: '',
+        optionsCount: 0,
+        filteredOptionsCount: 0,
+        dropdownUl: null,
+        visible: false,
+        selectedLabel: '',
+        selectInit: false,
+        hoverIndex: -1,
+        query: '',
+        voidRemoteQuery: false,
+        bottomOverflowBeforeHidden: 0,
+        optionsAllDisabled: false,
+        inputHovering: false
+      };
+    },
+
+    watch: {
+      loading(val) {
+        if (val) {
+          this.options = [];
+        }
+      },
+
+      value(val) {
+        this.$emit('change', val);
+        if (this.valueChangeBySelected) {
+          this.valueChangeBySelected = false;
+          return;
+        }
+        if (this.multiple && Object.prototype.toString.call(val) === '[object Array]') {
+          this.$nextTick(() => {
+            this.resetInputHeight();
+          });
+          this.selectedInit = true;
+          this.selected = [];
+          val.forEach(item => {
+            let option = this.options.filter(option => option.value === item)[0];
+            if (option) {
+              this.$emit('addOptionToValue', option);
+            }
+          });
+        }
+        if (!this.multiple) {
+          if (val === '') {
+            this.selected = {};
+            this.selectedLabel = '';
+          }
+          let option = this.options.filter(option => option.value === val)[0];
+          if (option) {
+            this.$emit('addOptionToValue', option);
+          }
+        }
+        this.resetHoverIndex();
+      },
+
+      selected(val) {
+        if (this.multiple) {
+          if (this.selectedInit) {
+            this.selectedInit = false;
+            return;
+          }
+          this.valueChangeBySelected = true;
+          this.value = val.map(item => item.value);
+          if (this.selected.length > 0) {
+            this.placeholder = '';
+          } else {
+            this.placeholder = this.cachedPlaceHolder;
+          }
+          this.$nextTick(() => {
+            this.resetInputHeight();
+          });
+          if (this.filterable) {
+            this.query = '';
+            this.hoverIndex = -1;
+            this.$els.input.focus();
+            this.inputLength = 20;
+          }
+        } else {
+          if (val.value) {
+            this.value = val.value;
+          }
+        }
+      },
+
+      query(val) {
+        if (this.multiple && this.filterable) {
+          this.resetInputHeight();
+        }
+        if (this.remote && typeof this.remoteMethod === 'function') {
+          this.hoverIndex = -1;
+          if (!this.multiple) {
+            this.selected = {};
+          }
+          this.remoteMethod(val);
+          if (val === '') {
+            this.options = [];
+          }
+        } else if (typeof this.filterMethod === 'function') {
+          this.filterMethod(val);
+        } else {
+          this.filteredOptionsCount = this.optionsCount;
+          this.broadcast('option', 'queryChange', val);
+        }
+      },
+
+      visible(val) {
+        if (!val) {
+          this.$el.querySelector('.el-input__icon').classList.remove('is-reverse');
+          this.broadcast('select-dropdown', 'destroyPopper');
+          if (this.$els.input) {
+            this.$els.input.blur();
+          }
+          this.resetHoverIndex();
+          if (!this.multiple) {
+            if (this.dropdownUl && this.selected.$el) {
+              this.bottomOverflowBeforeHidden = this.selected.$el.getBoundingClientRect().bottom - this.$els.popper.getBoundingClientRect().bottom;
+            }
+            if (this.selected && this.selected.value) {
+              this.selectedLabel = this.selected.label;
+            }
+            if (this.remote) {
+
+            }
+          }
+        } else {
+          if (this.remote) {
+            this.voidRemoteQuery = true;
+          }
+          this.$el.querySelector('.el-input__icon').classList.add('is-reverse');
+          this.broadcast('select-dropdown', 'updatePopper');
+          if (this.filterable) {
+            this.query = this.selectedLabel;
+            if (this.multiple) {
+              this.$els.input.focus();
+            } else {
+              this.broadcast('input', 'inputSelect');
+            }
+          }
+          if (!this.dropdownUl) {
+            let dropdownChildNodes = this.$els.popper.childNodes;
+            this.dropdownUl = [].filter.call(dropdownChildNodes, item => item.tagName === 'UL')[0];
+          }
+          if (!this.multiple && this.dropdownUl) {
+            if (this.bottomOverflowBeforeHidden > 0) {
+              this.dropdownUl.scrollTop += this.bottomOverflowBeforeHidden;
+            }
+          }
+        }
+      },
+
+      options(val) {
+        this.optionsAllDisabled = val.length === val.filter(item => item.disabled === true).length;
+      }
+    },
+
+    methods: {
+      toggleLastOptionHitState(hit) {
+        if (!Array.isArray(this.selected)) return;
+        const option = this.selected[this.selected.length - 1];
+        if (!option) return;
+
+        if (hit === true || hit === false) {
+          option.hitState = hit;
+          return hit;
+        }
+
+        option.hitState = !option.hitState;
+        return option.hitState;
+      },
+
+      deletePrevTag(e) {
+        if (e.target.value.length <= 0 && !this.toggleLastOptionHitState()) {
+          this.selected.pop();
+        }
+      },
+
+      addOptionToValue(option) {
+        if (this.multiple) {
+          if (this.selected.indexOf(option) === -1 && (this.remote ? this.value.indexOf(option.value) === -1 : true)) {
+            this.selectedInit = false;
+            this.selected.push(option);
+            this.resetHoverIndex();
+          }
+        } else {
+          this.selected = option;
+          this.selectedLabel = option.label;
+          this.hoverIndex = option.index;
+        }
+      },
+
+      managePlaceholder() {
+        if (this.placeholder !== '') {
+          this.placeholder = this.$els.input.value ? '' : this.cachedPlaceHolder;
+        }
+      },
+
+      resetInputState(e) {
+        if (e.keyCode !== 8) this.toggleLastOptionHitState(false);
+        this.inputLength = this.$els.input.value.length * 12 + 20;
+      },
+
+      resetInputHeight() {
+        this.$nextTick(() => {
+          let inputChildNodes = this.$els.reference.childNodes;
+          let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];
+          input.style.height = Math.max(this.$els.tags.clientHeight + 6, this.size === 'small' ? 28 : 36) + 'px';
+          this.broadcast('select-dropdown', 'updatePopper');
+        });
+      },
+
+      resetHoverIndex() {
+        setTimeout(() => {
+          if (!this.multiple) {
+            this.hoverIndex = this.options.indexOf(this.selected);
+          } else {
+            if (this.selected.length > 0) {
+              this.hoverIndex = Math.min.apply(null, this.selected.map(item => this.options.indexOf(item)));
+            } else {
+              this.hoverIndex = -1;
+            }
+          }
+        }, 300);
+      },
+
+      handleOptionSelect(option) {
+        if (!this.multiple) {
+          this.selected = option;
+          this.selectedLabel = option.label;
+          this.visible = false;
+        } else {
+          let optionIndex = -1;
+          this.selected.forEach((item, index) => {
+            if (item === option || item.label === option.label) {
+              optionIndex = index;
+            }
+          });
+          if (optionIndex > -1) {
+            this.selected.splice(optionIndex, 1);
+          } else {
+            this.selected.push(option);
+          }
+        }
+      },
+
+      toggleMenu() {
+        if (!this.disabled) {
+          this.visible = !this.visible;
+        }
+      },
+
+      navigateOptions(direction) {
+        if (!this.visible) {
+          this.visible = true;
+          return;
+        }
+        if (!this.optionsAllDisabled) {
+          if (direction === 'next') {
+            this.hoverIndex++;
+            if (this.hoverIndex === this.options.length) {
+              this.hoverIndex = 0;
+            }
+            this.resetScrollTop();
+            if (this.options[this.hoverIndex].disabled === true || !this.options[this.hoverIndex].queryPassed) {
+              this.navigateOptions('next');
+            }
+          }
+          if (direction === 'prev') {
+            this.hoverIndex--;
+            if (this.hoverIndex < 0) {
+              this.hoverIndex = this.options.length - 1;
+            }
+            this.resetScrollTop();
+            if (this.options[this.hoverIndex].disabled === true || !this.options[this.hoverIndex].queryPassed) {
+              this.navigateOptions('prev');
+            }
+          }
+        }
+      },
+
+      resetScrollTop() {
+        let bottomOverflowDistance = this.options[this.hoverIndex].$el.getBoundingClientRect().bottom - this.$els.popper.getBoundingClientRect().bottom;
+        let topOverflowDistance = this.options[this.hoverIndex].$el.getBoundingClientRect().top - this.$els.popper.getBoundingClientRect().top;
+        if (bottomOverflowDistance > 0) {
+          this.dropdownUl.scrollTop += bottomOverflowDistance;
+        }
+        if (topOverflowDistance < 0) {
+          this.dropdownUl.scrollTop += topOverflowDistance;
+        }
+      },
+
+      selectOption() {
+        this.handleOptionSelect(this.options[this.hoverIndex]);
+      },
+
+      deleteSelected(event) {
+        event.stopPropagation();
+        this.selected = {};
+        this.selectedLabel = '';
+        this.visible = false;
+      },
+
+      deleteTag(event, tag) {
+        if (event.target.tagName === 'I') {
+          let index = this.selected.indexOf(tag);
+          if (index > -1) {
+            this.selected.splice(index, 1);
+          }
+          event.stopPropagation();
+        }
+      },
+
+      onInputChange() {
+        if (this.filterable) {
+          this.query = this.selectedLabel;
+        }
+      }
+    },
+
+    created() {
+      this.cachedPlaceHolder = this.placeholder;
+      if (this.multiple) {
+        this.selectedInit = true;
+        this.selected = [];
+      }
+      if (!this.width) {
+        this.width = this.multiple ? 220 : 180;
+      }
+      this.debouncedOnInputChange = debounce(this.debounce, () => {
+        this.onInputChange();
+      });
+
+      this.$on('addOptionToValue', this.addOptionToValue);
+      this.$on('handleOptionClick', this.handleOptionSelect);
+    }
+  };
+</script>
diff --git a/packages/slider/cooking.conf.js b/packages/slider/cooking.conf.js
new file mode 100644
index 000000000..e61b101e4
--- /dev/null
+++ b/packages/slider/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElSlider',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/slider/index.js b/packages/slider/index.js
new file mode 100644
index 000000000..f39136b4e
--- /dev/null
+++ b/packages/slider/index.js
@@ -0,0 +1,7 @@
+const Slider = require('./src/main');
+
+Slider.install = function(Vue) {
+  Vue.component(Slider.name, Slider);
+};
+
+module.exports = Slider;
diff --git a/packages/slider/package.json b/packages/slider/package.json
new file mode 100644
index 000000000..e686d5b14
--- /dev/null
+++ b/packages/slider/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "el-slider",
+  "version": "0.0.0",
+  "description": "A slider component for Vue.js.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/slider",
+  "author": "elemefe",
+  "license": "MIT",
+  "dependencies": {
+    "wind-dom": "0.0.3"
+  }
+}
diff --git a/packages/slider/src/main.vue b/packages/slider/src/main.vue
new file mode 100644
index 000000000..2fbc8c556
--- /dev/null
+++ b/packages/slider/src/main.vue
@@ -0,0 +1,234 @@
+<template>
+  <div class="el-slider">
+    <el-input-number
+      :value.sync="value"
+      v-if="showInput"
+      class="el-slider__input"
+      @keyup="onInputChange()"
+      v-el:input
+      :step="step"
+      :min="min"
+      :max="max"
+      size="small">
+    </el-input-number>
+    <div class="el-slider__runway"
+      :class="{ 'show-input': showInput }"
+      @click="onSliderClick($event)" v-el:slider>
+      <div class="el-slider__bar" :style="{ width: currentPosition }"></div>
+      <div class="el-slider__button-wrapper" @mouseenter="hovering = true" @mouseleave="hovering = false" :style="{left: currentPosition}" v-el:button>
+        <div class="el-slider__button" :class="{ 'hover': hovering, 'dragging': dragging }"></div>
+      </div>
+      <div class="el-slider__pop" v-show="showTip" transition="popper-fade" v-el:pop>{{ value }}</div>
+      <div class="el-slider__stop" v-for="item in stops" :style="{ 'left': item + '%' }" v-if="showStops"></div>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  import Popper from 'main/utils/popper.js';
+  import ElInputNumber from 'packages/input-number/index.js';
+  import { getStyle } from 'wind-dom/src/style';
+
+  export default {
+    name: 'ElSlider',
+
+    props: {
+      min: {
+        type: Number,
+        default: 0
+      },
+      max: {
+        type: Number,
+        default: 100
+      },
+      step: {
+        type: Number,
+        default: 1
+      },
+      defaultValue: {
+        type: Number,
+        default: 0
+      },
+      value: {
+        type: Number,
+        default: 0
+      },
+      showInput: {
+        type: Boolean,
+        default: false
+      },
+      showStops: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    components: {
+      ElInputNumber
+    },
+
+    data() {
+      return {
+        showTip: false,
+        hovering: false,
+        dragging: false,
+        popper: null,
+        newPos: null,
+        oldValue: this.value,
+        currentPosition: (this.value - this.min) / (this.max - this.min) * 100 + '%'
+      };
+    },
+
+    watch: {
+      showTip(val) {
+        if (val) {
+          this.$nextTick(() => {
+            this.updatePopper();
+          });
+        } else {
+          setTimeout(() => {
+            if (this.popper) {
+              this.popper.destroy();
+              this.popper = null;
+            }
+          }, 150);
+        }
+      },
+
+      value(val) {
+        this.$nextTick(() => {
+          this.updatePopper();
+        });
+        if (val < this.min) {
+          this.value = this.min;
+          return;
+        }
+        if (val > this.max) {
+          this.value = this.max;
+          return;
+        }
+        this.setPosition((val - this.min) * 100 / (this.max - this.min));
+      }
+    },
+
+    methods: {
+      updatePopper() {
+        if (this.popper) {
+          this.popper.update();
+        } else {
+          this.popper = new Popper(this.$els.button, this.$els.pop, { gpuAcceleration: false, placement: 'top' });
+          this.popper.onCreate(() => {
+            let placementMap = { top: 'bottom', bottom: 'top' };
+            let placement = this.popper._popper.getAttribute('x-placement').split('-')[0];
+            let origin = placementMap[placement];
+            this.popper._popper.classList.add(placement);
+            this.popper._popper.classList.remove(placementMap[placement]);
+            this.popper._popper.style.transformOrigin = `center ${ origin }`;
+          });
+          this.updatePopper();
+        }
+      },
+
+      setPosition(newPos) {
+        if (newPos >= 0 && (newPos <= 100)) {
+          var lengthPerStep = 100 / ((this.max - this.min) / this.step);
+          var steps = Math.round(newPos / lengthPerStep);
+          this.value = Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min);
+          this.currentPosition = (this.value - this.min) / (this.max - this.min) * 100 + '%';
+          if (!this.dragging) {
+            if (this.value !== this.oldValue) {
+              this.$emit('change', this.value);
+              this.oldValue = this.value;
+            }
+          }
+        }
+      },
+
+      onSliderClick(event) {
+        var currentX = event.clientX;
+        var sliderOffsetLeft;
+        getStyle(this.$el.parentNode, 'position') === 'static' ? sliderOffsetLeft = this.$els.slider.offsetLeft : sliderOffsetLeft = this.$el.parentNode.offsetLeft + this.$els.slider.offsetLeft;
+        var newPos = (currentX - sliderOffsetLeft) / this.$sliderWidth * 100;
+        this.setPosition(newPos);
+      },
+
+      onInputChange() {
+        if (this.value === '') {
+          return;
+        }
+        if (!isNaN(this.value)) {
+          this.setPosition((this.value - this.min) * 100 / (this.max - this.min));
+        }
+      }
+    },
+
+    computed: {
+      $sliderWidth() {
+        return parseInt(getStyle(this.$els.slider, 'width'), 10);
+      },
+
+      showTip() {
+        return this.dragging || this.hovering;
+      },
+
+      stops() {
+        let stopCount = (this.max - this.value) / this.step;
+        let result = [];
+        let currentLeft = parseFloat(this.currentPosition);
+        let stepWidth = 100 * this.step / (this.max - this.min);
+        for (let i = 1; i < stopCount; i++) {
+          result.push(currentLeft + i * stepWidth);
+        }
+        return result;
+      }
+    },
+
+    compiled() {
+      var startX = 0;
+      var currentX = 0;
+      var startPos = 0;
+
+      var onDragStart = event => {
+        this.dragging = true;
+        startX = event.clientX;
+        startPos = parseInt(this.currentPosition, 10);
+      };
+
+      var onDragging = event => {
+        if (this.dragging) {
+          currentX = event.clientX;
+          var diff = (currentX - startX) / this.$sliderWidth * 100;
+          this.newPos = startPos + diff;
+          this.setPosition(this.newPos);
+        }
+      };
+
+      var onDragEnd = () => {
+        if (this.dragging) {
+          this.dragging = false;
+          this.setPosition(this.newPos);
+          window.removeEventListener('mousemove', onDragging);
+          window.removeEventListener('mouseup', onDragEnd);
+        }
+      };
+
+      this.$els.button.addEventListener('mousedown', function(event) {
+        onDragStart(event);
+        window.addEventListener('mousemove', onDragging);
+        window.addEventListener('mouseup', onDragEnd);
+      });
+    },
+
+    created() {
+      if (this.value < this.min || this.value > this.max) {
+        this.value = this.min;
+      }
+    },
+
+    beforeDestroy() {
+      if (this.popper) {
+        this.popper.destroy();
+      }
+    }
+  };
+</script>
diff --git a/packages/spinner/cooking.conf.js b/packages/spinner/cooking.conf.js
new file mode 100644
index 000000000..56c9a6afd
--- /dev/null
+++ b/packages/spinner/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElSpinner',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/spinner/index.js b/packages/spinner/index.js
new file mode 100644
index 000000000..de2419e39
--- /dev/null
+++ b/packages/spinner/index.js
@@ -0,0 +1,7 @@
+const ElSpinner = require('./src/spinner');
+
+ElSpinner.install = function(Vue) {
+  Vue.component(ElSpinner.name, ElSpinner);
+};
+
+module.exports = ElSpinner;
diff --git a/packages/spinner/package.json b/packages/spinner/package.json
new file mode 100644
index 000000000..3e08578ff
--- /dev/null
+++ b/packages/spinner/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "el-spinner",
+  "version": "1.0.0",
+  "description": "A input component for Vue.",
+  "main": "lib/index.js",
+  "keywords": [
+    "element",
+    "vue",
+    "component",
+    "input"
+  ],
+  "author": "haiping.zeng@ele.me",
+  "license": "MIT",
+  "repository": "https://github.com/element-component/element/tree/master/packages/spinner",
+  "devDependencies": {
+    "vue-clickoutside": "0.0.4"
+  }
+}
diff --git a/packages/spinner/src/spinner.vue b/packages/spinner/src/spinner.vue
new file mode 100644
index 000000000..ab58e0a55
--- /dev/null
+++ b/packages/spinner/src/spinner.vue
@@ -0,0 +1,27 @@
+<template>
+  <span class="el-spinner">
+    <svg class="el-spinner-inner" viewBox="0 0 50 50" v-bind:style="{ width: radius/2 + 'px', height: radius/2 + 'px' }">
+      <circle class="path" cx="25" cy="25" r="20" fill="none" :stroke="strokeColor" :stroke-width="strokeWidth"></circle>
+    </svg>
+  </span>
+</template>
+<script>
+  export default {
+    name: 'ElSpinner',
+    props: {
+      type: String,
+      radius: {
+        type: Number,
+        default: 100
+      },
+      strokeWidth: {
+        type: Number,
+        default: 5
+      },
+      strokeColor: {
+        type: String,
+        default: '#efefef'
+      }
+    }
+  };
+</script>
diff --git a/packages/submenu/index.js b/packages/submenu/index.js
new file mode 100644
index 000000000..486650ea0
--- /dev/null
+++ b/packages/submenu/index.js
@@ -0,0 +1,7 @@
+const ElSubmenu = require('../menu/src/submenu');
+
+ElSubmenu.install = function(Vue) {
+  Vue.component(ElSubmenu.name, ElSubmenu);
+};
+
+module.exports = ElSubmenu;
diff --git a/packages/switch/README.md b/packages/switch/README.md
new file mode 100644
index 000000000..99201710a
--- /dev/null
+++ b/packages/switch/README.md
@@ -0,0 +1,46 @@
+# el-switch
+> A el-switch component for Vue.js.
+
+## Installation
+```shell
+npm i el-switch -D
+```
+
+## Usage
+```javascript
+import Vue from 'vue'
+import ElSwitch from 'el-switch'
+import 'element-theme-default'
+
+Vue.use(ElSwitch)
+```
+
+or
+
+```javascript
+import Vue from 'vue'
+import { ElSwitch } from 'el-switch'
+
+Vue.component('el-switch', ElSwitch)
+```
+
+
+## Options
+
+|     name    | description |     type    |   default   |
+|-------------|-------------|-------------|-------------|
+|             |             |             |             |
+
+## Development
+```shell
+make dev
+
+## test
+make test
+
+## build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)
diff --git a/packages/switch/cooking.conf.js b/packages/switch/cooking.conf.js
new file mode 100644
index 000000000..6f6df4d40
--- /dev/null
+++ b/packages/switch/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElCascader',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/switch/index.js b/packages/switch/index.js
new file mode 100644
index 000000000..79fb26423
--- /dev/null
+++ b/packages/switch/index.js
@@ -0,0 +1,8 @@
+const ElSwitch = require('./src/component');
+
+ElSwitch.install = function(Vue) {
+  Vue.component('el-switch', ElSwitch);
+};
+
+module.exports = ElSwitch;
+
diff --git a/packages/switch/package.json b/packages/switch/package.json
new file mode 100644
index 000000000..a4d7e1aa8
--- /dev/null
+++ b/packages/switch/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "el-switch",
+  "version": "1.0.0",
+  "description": "A switch component for vue.js",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/switch",
+  "author": "elemefe",
+  "license": "MIT",
+  "dependencies": {}
+}
diff --git a/packages/switch/src/component.vue b/packages/switch/src/component.vue
new file mode 100644
index 000000000..927fb7bb1
--- /dev/null
+++ b/packages/switch/src/component.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="el-switch" :class="{ 'is-disabled': disabled, 'el-switch--wide': hasText, 'el-switch--color': onColor || offColor }">
+    <div class="el-switch__mask" v-show="disabled"></div>
+    <input class="el-switch__input" type="checkbox" v-model="value" :name="name" :disabled="disabled" style="display: none;">
+    <span class="el-switch__core" v-el:core @click="handleMiscClick" :style="{ 'width': width + 'px' }">
+      <span class="el-switch__button" v-el:button></span>
+    </span>
+    <div
+      class="el-switch__label el-switch__label--left"
+      v-show="value"
+      @click="handleMiscClick"
+      :style="{ 'width': width + 'px' }"
+      transition="label-fade">
+      <i class="{{ onIconClass }}" v-if="onIconClass"></i>
+      <span v-if="onText">{{ onText }}</span>
+    </div>
+    <div
+      class="el-switch__label el-switch__label--right"
+      v-show="!value"
+      @click="handleMiscClick"
+      :style="{ 'width': width + 'px' }"
+      transition="label-fade">
+      <i class="{{ offIconClass }}" v-if="offIconClass"></i>
+      <span v-if="offText">{{ offText }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'el-switch',
+    props: {
+      value: {
+        type: Boolean,
+        default: true
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      width: {
+        type: Number,
+        default: 0
+      },
+      onIconClass: {
+        type: String,
+        default: ''
+      },
+      offIconClass: {
+        type: String,
+        default: ''
+      },
+      onText: {
+        type: String,
+        default: 'ON'
+      },
+      offText: {
+        type: String,
+        default: 'OFF'
+      },
+      onColor: {
+        type: String,
+        default: ''
+      },
+      offColor: {
+        type: String,
+        default: ''
+      },
+      name: {
+        type: String,
+        default: ''
+      }
+    },
+    computed: {
+      hasText() {
+        return this.onText || this.offText;
+      }
+    },
+    watch: {
+      value() {
+        if (this.onColor || this.offColor) {
+          this.handleCoreColor();
+        }
+        this.handleButtonTransform();
+      }
+    },
+    methods: {
+      handleMiscClick() {
+        if (!this.disabled) {
+          this.value = !this.value;
+        }
+      },
+      handleButtonTransform() {
+        this.$els.button.style.transform = this.value ? `translate3d(${ this.width - 20 }px, 2px, 0)` : 'translate3d(2px, 2px, 0)';
+      },
+      handleCoreColor() {
+        if (this.value) {
+          this.$els.core.style.borderColor = this.onColor;
+          this.$els.core.style.backgroundColor = this.onColor;
+        } else {
+          this.$els.core.style.borderColor = this.offColor;
+          this.$els.core.style.backgroundColor = this.offColor;
+        }
+      }
+    },
+    ready() {
+      if (this.width === 0) {
+        this.width = this.hasText ? 58 : 46;
+      }
+      this.handleButtonTransform();
+      if ((this.onColor || this.offColor) && !this.disabled) {
+        this.handleCoreColor();
+      }
+    }
+  };
+</script>
diff --git a/packages/tab-pane/index.js b/packages/tab-pane/index.js
new file mode 100644
index 000000000..3ddfa853a
--- /dev/null
+++ b/packages/tab-pane/index.js
@@ -0,0 +1,7 @@
+const TabPane = require('../tabs/src/tab-pane.vue');
+
+TabPane.install = function(Vue) {
+  Vue.component(TabPane.name, TabPane);
+};
+
+module.exports = TabPane;
diff --git a/packages/table-column/index.js b/packages/table-column/index.js
new file mode 100644
index 000000000..0f0651b3f
--- /dev/null
+++ b/packages/table-column/index.js
@@ -0,0 +1,7 @@
+const ElTableColumn = require('../table/src/table-column');
+
+ElTableColumn.install = function(Vue) {
+  Vue.component(ElTableColumn.name, ElTableColumn);
+};
+
+module.exports = ElTableColumn;
diff --git a/packages/table/README.md b/packages/table/README.md
new file mode 100644
index 000000000..154652806
--- /dev/null
+++ b/packages/table/README.md
@@ -0,0 +1,49 @@
+# el-table
+> A el-table component for Vue.js.
+
+## Demo
+http://element-component.github.io/el-table
+
+## Installation
+```shell
+npm i el-table -D
+```
+
+## Usage
+```javascript
+import Vue from 'vue'
+import ElTable from 'el-table'
+import 'element-theme-default'
+
+Vue.use(ElTable)
+```
+
+or
+
+```javascript
+import Vue from 'vue'
+import { ElTable } from 'el-table'
+
+Vue.component('el-table', ElTable)
+```
+
+
+## Options
+
+|     name    | description |     type    |   default   |
+|-------------|-------------|-------------|-------------|
+|             |             |             |             |
+
+## Development
+```shell
+make dev
+
+## test
+make test
+
+## build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)
diff --git a/packages/table/cooking.conf.js b/packages/table/cooking.conf.js
new file mode 100644
index 000000000..18ba95ef1
--- /dev/null
+++ b/packages/table/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElTable',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/table/index.js b/packages/table/index.js
new file mode 100644
index 000000000..fa5b207da
--- /dev/null
+++ b/packages/table/index.js
@@ -0,0 +1,7 @@
+const ElTable = require('./src/table');
+
+ElTable.install = function(Vue) {
+  Vue.component('el-table', ElTable);
+};
+
+module.exports = ElTable;
diff --git a/packages/table/package.json b/packages/table/package.json
new file mode 100644
index 000000000..6a5dd86a9
--- /dev/null
+++ b/packages/table/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "el-table",
+  "version": "1.0.0",
+  "description": "A table component for Vue.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/dialog",
+  "author": "elemefe",
+  "license": "MIT",
+  "devDependencies": {
+    "throttle-debounce": "^1.0.1"
+  }
+}
diff --git a/packages/table/src/table-body.vue b/packages/table/src/table-body.vue
new file mode 100644
index 000000000..0ee203196
--- /dev/null
+++ b/packages/table/src/table-body.vue
@@ -0,0 +1,142 @@
+<template>
+  <table class="el-table__body" cellspacing="0" cellpadding="0" border="0">
+    <tbody>
+    <tr v-for="row in data"
+      @click="handleClick($event, row)" @mouseenter="handleMouseEnter($index)"
+      :class="{
+        'current-row': row === $parent.$parent.selected,
+        hover: $parent.$parent.hoverRowIndex === $index,
+        'positive-row': row.$positive,
+        'info-row': row.$info,
+        'warning-row': row.$warning,
+        'negative-row': row.$negative
+      }">
+      <td v-for="column in columns" :class="column.id"
+          @mouseenter="handleCellMouseEnter($event, row)"
+          @mouseleave="handleCellMouseLeave($event)">
+        <partial v-if="column.template" :name="'template:' + column.id"></partial>
+        <partial v-else name="template:default"></partial>
+      </td>
+      <td class="gutter" v-if="!fixed"></td>
+    </tr>
+    </tbody>
+  </table>
+</template>
+
+<script type="text/babel">
+  const getColumnById = function(grid, columnId) {
+    let column = null;
+    grid.columns.forEach(function(item) {
+      if (item.id === columnId) {
+        column = item;
+      }
+    });
+    return column;
+  };
+
+  const getColumnByCell = function(grid, cell) {
+    const matches = (cell.className || '').match(/grid_[^\s]+/gm);
+    if (matches) {
+      return getColumnById(grid, matches[0]);
+    }
+    return null;
+  };
+
+  import { getValueByPath, getCell, orderBy, getChild } from './util';
+
+  export default {
+    props: {
+      columns: {},
+      data: {},
+      fixed: {},
+      selection: {
+        default() {
+          return [];
+        }
+      }
+    },
+
+    data() {
+      return {
+        tooltipDisabled: true
+      };
+    },
+
+    filters: {
+      orderBy
+    },
+
+    partials: {
+      'template:default': '<div class="cell">{{ $getPropertyText(row, column.property, column.id) }}</div>'
+    },
+
+    methods: {
+      handleCellMouseEnter(event, row) {
+        let grid = this.$parent;
+        const cell = getCell(event);
+
+        if (cell) {
+          const column = getColumnByCell(grid, cell);
+          const hoverState = grid.hoverState = { cell: cell, column: column, row: row };
+          grid.$emit('cell-mouse-enter', hoverState.row, hoverState.column, hoverState.cell, event);
+        }
+
+        // 判断是否text-overflow, 如果是就显示tooltip
+        const cellChild = getChild(event);
+        if (cellChild.scrollWidth > cellChild.offsetWidth) {
+          this.tooltipDisabled = false;
+        } else {
+          this.tooltipDisabled = true;
+        }
+      },
+
+      handleCellMouseLeave(event) {
+        let grid = this.$parent;
+        const cell = getCell(event);
+
+        if (cell) {
+          const oldHoverState = grid.hoverState;
+          grid.$emit('cell-mouse-leave', oldHoverState.row, oldHoverState.column, oldHoverState.cell, event);
+        }
+      },
+
+      handleMouseEnter(index) {
+        this.$parent.hoverRowIndex = index;
+      },
+
+      handleClick(event, row) {
+        let grid = this.$parent;
+        const cell = getCell(event);
+
+        if (cell) {
+          const column = getColumnByCell(grid, cell);
+          if (column) {
+            grid.$emit('cell-click', row, column, cell, event);
+          }
+        }
+
+        if (grid.selectionMode === 'single') {
+          grid.selected = row;
+          grid.$emit('selection-change', row);
+        }
+
+        grid.$emit('row-click', row, event);
+      },
+
+      handleCreate(vm) {
+        document.body.appendChild(vm.popper);
+        vm.updatePopper();
+      },
+
+      $getPropertyText(row, property, columnId) {
+        let grid = this.$parent;
+        const column = getColumnById(grid, columnId);
+        if (column && column.formatter) {
+          return column.formatter(row, column);
+        }
+
+        return getValueByPath(row, property);
+      }
+    }
+  };
+</script>
\ No newline at end of file
diff --git a/packages/table/src/table-column.vue b/packages/table/src/table-column.vue
new file mode 100644
index 000000000..d5e1659d4
--- /dev/null
+++ b/packages/table/src/table-column.vue
@@ -0,0 +1,254 @@
+<template>
+  <div><slot></slot></div>
+</template>
+
+<script type="text/babel">
+  import ElCheckbox from 'packages/checkbox/index.js';
+  import ElTag from 'packages/tag/index.js';
+
+  let columnIdSeed = 1;
+
+  const defaults = {
+    default: {
+      direction: ''
+    },
+    selection: {
+      width: 48,
+      minWidth: 48,
+      realWidth: 48,
+      direction: ''
+    },
+    index: {
+      width: 48,
+      minWidth: 48,
+      realWidth: 48,
+      direction: ''
+    },
+    filter: {
+      headerTemplate: 'filter header',
+      direction: ''
+    }
+  };
+
+  const forced = {
+    selection: {
+      // TODO :value.sync="$parent.$parent.selection"
+      headerTemplate: '<div><el-checkbox @click="toggleAllSelection($event)" :value.sync="allSelected"></el-checkbox></div>',
+      template: '<el-checkbox :value.sync="row.$selected"></el-checkbox>',
+      sortable: false,
+      resizable: false
+    },
+    index: {
+      headerTemplate: '<div>#</div>',
+      template: '{{ $parent.$index + 1 }}',
+      sortable: false
+    },
+    filter: {
+      headerTemplate: '<div>#</div>',
+      template: '<el-tag type="primary" style="height: 16px; line-height: 16px; min-width: 40px; text-align: center">{{ row[column.property] }}</el-tag>',
+      resizable: false
+    }
+  };
+
+  const getDefaultColumn = function(type, options) {
+    const column = {};
+
+    Object.assign(column, defaults[type || 'default']);
+
+    for (let name in options) {
+      if (options.hasOwnProperty(name)) {
+        const value = options[name];
+        if (typeof value !== 'undefined') {
+          column[name] = value;
+        }
+      }
+    }
+
+    return column;
+  };
+
+  import Vue from 'vue';
+
+  export default {
+    name: 'el-table-column',
+
+    props: {
+      type: {
+        type: String,
+        default: 'default'
+      },
+      label: String,
+      property: String,
+      width: {},
+      minWidth: {},
+      template: String,
+      sortable: {
+        type: Boolean,
+        default: false
+      },
+      resizable: {
+        type: Boolean,
+        default: true
+      },
+      formatter: Function
+    },
+
+    data() {
+      return {
+        isChildColumn: false,
+        columns: []
+      };
+    },
+
+    components: {
+      ElCheckbox,
+      ElTag
+    },
+
+    beforeCompile() {
+      let columnId = this.columnId = (this.$parent.gridId || (this.$parent.columnId + '_')) + 'column_' + columnIdSeed++;
+
+      let parent = this.$parent;
+      if (!parent.gridId) {
+        this.isChildColumn = true;
+      }
+
+      let type = this.type;
+
+      let width = this.width;
+      if (width !== undefined) {
+        width = parseInt(width, 10);
+        if (isNaN(width)) {
+          width = null;
+        }
+      }
+
+      let minWidth = this.minWidth;
+      if (minWidth !== undefined) {
+        minWidth = parseInt(minWidth, 10);
+        if (isNaN(minWidth)) {
+          minWidth = 80;
+        }
+      } else {
+        minWidth = 80;
+      }
+
+      let options = this.$options;
+      let tagName = options.el.tagName.toLowerCase();
+      let isColumnGroup = false;
+      let template = this.template;
+
+      if (options._content) {
+        let content = options._content.innerHTML;
+        if (content.indexOf(`</${tagName}>`) === -1) {
+          options._content = null;
+          template = content;
+        } else {
+          template = null;
+          isColumnGroup = true;
+        }
+      }
+
+      let property = this.property;
+      if ((!template || /^\s*$/.test(template)) && property) {
+        template = `{{ $getPropertyText(row, '${property}', '${columnId}') }}`;
+      }
+
+      let column = getDefaultColumn(type, {
+        id: columnId,
+        label: this.label,
+        property: this.property,
+        type,
+        template,
+        minWidth,
+        width,
+        isColumnGroup,
+        realWidth: width || minWidth,
+        sortable: this.sortable,
+        resizable: this.resizable,
+        formatter: this.formatter
+      });
+
+      Object.assign(column, forced[type] || {});
+
+      if (column.headerTemplate) {
+        Vue.partial('headerTemplate:' + column.id, column.headerTemplate);
+      }
+
+      if (column.template) {
+//        Vue.partial('template:' + column.id, `<div class="cell">${column.template}</div>`);
+        Vue.partial('template:' + column.id, `<el-tooltip @created="handleCreate" :effect="effect" placement="top" :disabled="tooltipDisabled"><div class="cell">${column.template}</div><span slot="content">${column.template}</span></el-tooltip>`);
+      }
+
+      this.columnConfig = column;
+    },
+
+    detached() {
+      if (!this.$parent) {
+        return;
+      }
+      let columns = this.$parent.columns;
+      if (columns) {
+        let columnId = this.columnId;
+        for (let i = 0, j = columns.length; i < j; i++) {
+          let column = columns[i];
+
+          if (column.id === columnId) {
+            columns.splice(i, 1);
+            break;
+          }
+        }
+      }
+
+      if (this.isChildColumn) {
+        if (this.$parent.$parent.$ready) {
+          this.$parent.$parent.debouncedReRender();
+        }
+      } else {
+        if (this.$parent.$ready) {
+          this.$parent.debouncedReRender();
+        }
+      }
+    },
+
+    watch: {
+      label(newVal) {
+        if (this.columnConfig) {
+          this.columnConfig.label = newVal;
+        }
+      },
+
+      property(newVal) {
+        if (this.columnConfig) {
+          this.columnConfig.property = newVal;
+        }
+      }
+    },
+
+    ready() {
+      let parent = this.$parent;
+      let columnConfig = this.columnConfig;
+      let columnIndex;
+
+      if (!this.isChildColumn) {
+        columnIndex = [].indexOf.call(parent.$els.hiddenColumns.children, this.$el);
+      } else {
+        columnIndex = [].indexOf.call(parent.$el.children, this.$el);
+      }
+
+      parent.columns.splice(columnIndex, 0, columnConfig);
+
+      if (this.isChildColumn) {
+        parent.columnConfig.columns = parent.columns;
+
+        if (parent.$parent.$ready) {
+          parent.$parent.debouncedReRender();
+        }
+      } else {
+        if (parent.$ready) {
+          parent.debouncedReRender();
+        }
+      }
+    }
+  };
+</script>
diff --git a/packages/table/src/table-header.vue b/packages/table/src/table-header.vue
new file mode 100644
index 000000000..e5de0ecb4
--- /dev/null
+++ b/packages/table/src/table-header.vue
@@ -0,0 +1,198 @@
+<template>
+  <table class="el-table__header" cellspacing="0" cellpadding="0" border="0">
+    <colgroup v-for="column in columns" :name="column.id" :width="column.realWidth || column.width"></colgroup>
+    <thead>
+      <tr>
+        <th v-for="column in columns"
+          @mousemove="handleMouseMove($event, column)"
+          @mouseout="handleMouseOut"
+          @mousedown="handleMouseDown($event, column)"
+          @click="handleHeaderClick($event, column)"
+          class="{{ column.id }} {{column.direction}}">
+          <partial v-if="column.headerTemplate" :name="'headerTemplate:' + column.id"></partial>
+          <partial v-else name="default"></partial><div class="caret-wrapper" v-if="column.sortable"><i class="sort-caret ascending"></i><i class="sort-caret descending"></i></div>
+        </th>
+        <th class="gutter" :style="{ width: ($parent.showVScrollBar ? $parent.gutterWidth : 0) + 'px' }">&nbsp;</th>
+      </tr>
+    </thead>
+  </table>
+</template>
+
+<script type="text/babel">
+  import Vue from 'vue';
+
+  export default {
+    name: 'el-table-header',
+
+    props: {
+      columns: {},
+      fixed: Boolean,
+      allSelected: {
+        default: Boolean
+      },
+      border: Boolean
+    },
+
+    partials: {
+      default: '<div>{{column.label}}</div>'
+    },
+
+    methods: {
+      toggleAllSelection($event) {
+        this.$parent.toggleAllSelection($event);
+      },
+
+      handleMouseDown(event, column) {
+        if (this.draggingColumn && this.border) {
+          this.dragging = true;
+
+          this.$parent.resizeProxyVisible = true;
+
+          const gridEl = this.$parent.$el;
+          const gridLeft = gridEl.getBoundingClientRect().left;
+          const columnEl = this.$el.querySelector(`th.${column.id}`);
+          const columnRect = columnEl.getBoundingClientRect();
+          const minLeft = columnRect.left - gridLeft + 30;
+
+          columnEl.classList.add('noclick');
+
+          this.dragState = {
+            startMouseLeft: event.clientX,
+            startLeft: columnRect.right - gridLeft,
+            startColumnLeft: columnRect.left - gridLeft,
+            gridLeft: gridLeft
+          };
+
+          const resizeProxy = this.$parent.$els.resizeProxy;
+          resizeProxy.style.left = this.dragState.startLeft + 'px';
+
+          document.onselectstart = function() { return false; };
+          document.ondragstart = function() { return false; };
+
+          const mousemove = (event) => {
+            const deltaLeft = event.clientX - this.dragState.startMouseLeft;
+            const proxyLeft = this.dragState.startLeft + deltaLeft;
+
+            resizeProxy.style.left = Math.max(minLeft, proxyLeft) + 'px';
+          };
+
+          const mouseup = () => {
+            if (this.dragging) {
+              const finalLeft = parseInt(resizeProxy.style.left, 10);
+              const columnWidth = finalLeft - this.dragState.startColumnLeft;
+              column.width = column.realWidth = columnWidth;
+
+              Vue.nextTick(() => {
+                this.$parent.$calcColumns();
+              });
+
+              document.body.style.cursor = '';
+              this.dragging = false;
+              this.draggingColumn = null;
+              this.dragState = {};
+
+              this.$parent.resizeProxyVisible = false;
+            }
+
+            document.removeEventListener('mousemove', mousemove);
+            document.removeEventListener('mouseup', mouseup);
+            document.onselectstart = null;
+            document.ondragstart = null;
+
+            setTimeout(function() {
+              columnEl.classList.remove('noclick');
+            }, 0);
+          };
+
+          document.addEventListener('mousemove', mousemove);
+          document.addEventListener('mouseup', mouseup);
+        }
+      },
+
+      handleMouseMove(event, column) {
+        const target = event.target;
+
+        if (!column || !column.resizable) return;
+
+        if (!this.dragging && this.border) {
+          let rect = target.getBoundingClientRect();
+
+          if (rect.width > 12 && rect.right - event.pageX < 8) {
+            document.body.style.cursor = 'col-resize';
+            this.draggingColumn = column;
+          } else if (!this.dragging) {
+            document.body.style.cursor = '';
+            this.draggingColumn = null;
+            if (column.sortable) document.body.style.cursor = 'pointer';
+          }
+        }
+      },
+
+      handleMouseOut() {
+        document.body.style.cursor = '';
+      },
+
+      handleHeaderClick(event, column) {
+        let target = event.target;
+        while (target && target.tagName !== 'TH') {
+          target = target.parentNode;
+        }
+
+        if (target && target.tagName === 'TH') {
+          if (target.classList.contains('noclick')) {
+            target.classList.remove('noclick');
+            return;
+          }
+        }
+
+        if (!column.sortable) return;
+
+        const grid = this.$parent;
+
+        if (grid.sortingColumn !== column) {
+          if (grid.sortingColumn) {
+            grid.sortingColumn.direction = '';
+          }
+          grid.sortingColumn = column;
+          grid.sortingProperty = column.property;
+        }
+
+        if (!column.direction) {
+          column.direction = 'ascending';
+        } else if (column.direction === 'ascending') {
+          column.direction = 'descending';
+        } else {
+          column.direction = '';
+          grid.sortingColumn = null;
+          grid.sortingProperty = null;
+        }
+
+        grid.sortingDirection = column.direction === 'descending' ? -1 : 1;
+      },
+
+      $setVisibleFilter(property) {
+        if (this.visibleFilter) {
+          this.visibleFilter = null;
+        } else {
+          this.visibleFilter = property;
+        }
+      }
+    },
+
+    watch: {
+      visibleFilter(val) {
+        this.$parent.visibleFilter = val;
+      }
+    },
+
+    data() {
+      return {
+        draggingColumn: null,
+        dragging: false,
+        dragState: {},
+        columnsMap: null,
+        visibleFilter: null
+      };
+    }
+  };
+</script>
\ No newline at end of file
diff --git a/packages/table/src/table.vue b/packages/table/src/table.vue
new file mode 100644
index 000000000..89a1c7062
--- /dev/null
+++ b/packages/table/src/table.vue
@@ -0,0 +1,441 @@
+<template>
+  <div class="el-table" :class="{ 'el-table--fit': fit, 'el-table--striped': stripe, 'el-table--border': border }" @mouseleave="handleMouseLeave($event)">
+    <div class="hidden-columns" v-el:hidden-columns><slot></slot></div>
+    <div class="el-table__header-wrapper">
+      <table-header :columns="columns" :all-selected.sync="allSelected" :selection.sync="selection" :style="{ width: bodyWidth ? bodyWidth + 'px' : '' }" :border="border"></table-header>
+    </div>
+    <div class="el-table__body-wrapper">
+      <table-body :columns="columns" :selection.sync="selection" :data="data | orderBy sortingProperty sortingDirection" :style="{ width: bodyWidth ? bodyWidth - (showVScrollBar ? gutterWidth : 0 ) + 'px' : '' }"></table-body>
+    </div>
+    <div class="el-table__fixed" :style="{ width: fixedBodyWidth ? fixedBodyWidth + 'px' : '' }" v-el:fixed>
+      <div class="el-table__fixed-header-wrapper" v-if="fixedColumnCount > 0">
+        <table-header :columns="fixedColumns" :all-selected.sync="allSelected" :selection.sync="selection" :style="{ width: fixedBodyWidth ? fixedBodyWidth + 'px' : '' }" :border="border"></table-header>
+      </div>
+      <div class="el-table__fixed-body-wrapper" v-if="fixedColumnCount > 0" :style="{ top: headerHeight + 'px' }">
+        <table-body :columns="fixedColumns" fixed :selection.sync="selection" :data="data | orderBy sortingProperty sortingDirection" :style="{ width: fixedBodyWidth ? fixedBodyWidth + 'px' : '' }"></table-body>
+      </div>
+    </div>
+    <div class="el-table__column-resize-proxy" v-el:resize-proxy v-show="resizeProxyVisible"></div>
+    <slot name="bottom"></slot>
+  </div>
+</template>
+
+<script type="text/babel">
+  import Vue from 'vue';
+  import throttle from 'throttle-debounce/throttle';
+  import debounce from 'throttle-debounce/debounce';
+  import { getScrollBarWidth } from './util';
+
+  let gridIdSeed = 1;
+  let GUTTER_WIDTH;
+
+  import TableBody from './table-body.vue';
+  import TableHeader from './table-header.vue';
+
+  export default {
+    name: 'el-table',
+
+    props: {
+      data: {
+        type: Array,
+        default: function() {
+          return [];
+        }
+      },
+
+      width: String,
+
+      height: String,
+
+      fit: {
+        type: Boolean,
+        default: true
+      },
+
+      stripe: {
+        type: Boolean,
+        default: false
+      },
+
+      border: {
+        type: Boolean,
+        default: false
+      },
+
+      fixedColumnCount: {
+        type: Number,
+        default: 0
+      },
+
+      selectionMode: {
+        type: String,
+        default: 'none'
+      },
+
+      selection: {},
+
+      allowNoSelection: {
+        type: Boolean,
+        default: false
+      },
+
+      gutterWidth: {
+        default: 0
+      }
+    },
+
+    events: {
+      onresize() {
+        Vue.nextTick(() => {
+          this.$calcColumns();
+        });
+      }
+    },
+
+    partials: {
+      default: '<div>{{column.label}}</div>'
+    },
+
+    components: {
+      TableHeader,
+      TableBody
+    },
+
+    methods: {
+      doOnDataChange(data) {
+        data = data || [];
+
+        if (this.selectionMode === 'single') {
+          const oldSelection = this.selected;
+          if (oldSelection === null) {
+            if (!this.allowNoSelection) {
+              this.selected = data[0];
+              if (this.selected !== oldSelection) {
+                this.$emit('selection-change', this.selected);
+              }
+            }
+          } else if (data.indexOf(oldSelection) === -1) {
+            if (!this.allowNoSelection) {
+              this.selected = data[0];
+            } else {
+              this.selected = null;
+            }
+            if (this.selected !== oldSelection) {
+              this.$emit('selection-change', this.selected);
+            }
+          }
+        }
+      },
+
+      toggleAllSelection() {
+        setTimeout(() => {
+          this.data.forEach(item => {
+            item.$selected = this.allSelected;
+          });
+        }, 0);
+      },
+
+      $calcColumns() {
+        let fit = this.fit;
+        let columns = this.columns;
+
+        let bodyWidth = this.$el.clientWidth;
+        let bodyMinWidth = 0;
+
+        let flattenColumns = [];
+
+        columns.forEach((column) => {
+          if (column.isColumnGroup) {
+            flattenColumns.push.apply(flattenColumns, column.columns);
+          } else {
+            flattenColumns.push(column);
+          }
+        });
+
+        if (fit) {
+          let flexColumns = [];
+          let definedWidthColumnsWidth = 0;
+          let definedMinWidthSum = 0;
+
+          flattenColumns.forEach((column) => {
+            definedMinWidthSum += column.minWidth || 80;
+            bodyMinWidth += column.width || column.minWidth || 80;
+
+            if (typeof column.width === 'number') {
+              definedWidthColumnsWidth += column.width;
+            } else {
+              flexColumns.push(column);
+            }
+          });
+
+          if (bodyMinWidth < bodyWidth - this.gutterWidth) { // do not have scroll bar.
+            let flexWidthTotal = bodyWidth - this.gutterWidth - columns.length - bodyMinWidth;
+            let flexWidthPerColumn = Math.floor(flexWidthTotal / flexColumns.length);
+            let flexWidthFirstColumn = flexWidthTotal - flexWidthPerColumn * flexColumns.length + flexWidthPerColumn;
+
+            flexColumns.forEach((column, index) => {
+              if (index === 0) {
+                column.realWidth = (column.minWidth || 80) + flexWidthFirstColumn;
+              } else {
+                column.realWidth = (column.minWidth || 80) + flexWidthPerColumn;
+              }
+            });
+          } else { // need horizontal scroll bar.
+            this.showHScrollBar = true;
+            flexColumns.forEach(function(column) {
+              column.realWidth = column.minWidth;
+            });
+          }
+
+          this.bodyWidth = Math.max(bodyMinWidth, bodyWidth);
+        } else {
+          flattenColumns.forEach((column) => {
+            if (!column.width && !column.minWidth) {
+              column.realWidth = 80;
+            }
+
+            bodyMinWidth += column.realWidth;
+          });
+          this.showHScrollBar = bodyMinWidth > bodyWidth;
+
+          this.bodyWidth = bodyMinWidth;
+        }
+
+        if (this.styleNode) {
+          let styleSheet = this.styleNode.sheet;
+
+          for (let i = 0, j = styleSheet.cssRules.length; i < j; i++) {
+            styleSheet.deleteRule(0);
+          }
+
+          columns.forEach(function(column) {
+            const addRule = function(rule) {
+              styleSheet.insertRule(rule, styleSheet.cssRules.length);
+            };
+
+            if (column.isColumnGroup) {
+              let childColumns = column.columns;
+              let groupWidth = 0;
+              childColumns.forEach(function(childColumn) {
+                groupWidth += childColumn.realWidth;
+                addRule(`.${childColumn.id}, .${childColumn.id} > div { width: ${childColumn.realWidth}px; }`);
+              });
+
+              addRule(`.${column.id}, .${column.id} > div { width: ${groupWidth}px; }`);
+            } else {
+              addRule(`.${column.id}, .${column.id} > div { width: ${column.realWidth}px; }`);
+            }
+          });
+        }
+
+        if (this.fixedColumnCount > 0) {
+          let fixedBodyWidth = 0;
+          let fixedColumnCount = this.fixedColumnCount;
+
+          columns.forEach(function(column, index) {
+            if (index < fixedColumnCount) {
+              fixedBodyWidth += column.realWidth;
+            }
+          });
+
+          this.fixedBodyWidth = fixedBodyWidth;
+        }
+
+        Vue.nextTick(() => {
+          this.headerHeight = this.$el.querySelector('.el-table__header-wrapper').offsetHeight;
+        });
+      },
+
+      $calcHeight(height) {
+        if (typeof height === 'string' && /^\d+$/.test(height)) {
+          height = Number(height);
+        }
+
+        if (!isNaN(height) && this.$el) {
+          const headerHeight = this.headerHeight = this.$el.querySelector('.el-table__header-wrapper').offsetHeight;
+          const bodyHeight = (height - headerHeight);
+          const gridWrapper = this.$el.querySelector('.el-table__body-wrapper');
+          gridWrapper.style.height = bodyHeight + 'px';
+
+          this.$el.style.height = height + 'px';
+          this.$els.fixed.style.height = height + 'px';
+
+          const fixedBodyWrapper = this.$el.querySelector('.el-table__fixed-body-wrapper');
+          if (fixedBodyWrapper) {
+            fixedBodyWrapper.style.height = (this.showHScrollBar ? gridWrapper.offsetHeight - this.gutterWidth : gridWrapper.offsetHeight) + 'px';
+          }
+        }
+      },
+
+      handleMouseLeave() {
+        this.hoverRowIndex = null;
+        const hoverState = this.hoverState;
+        if (hoverState) {
+          this.hoverState = null;
+        }
+      },
+
+      updateScrollInfo() {
+        Vue.nextTick(() => {
+          if (this.$el) {
+            let gridBodyWrapper = this.$el.querySelector('.el-table__body-wrapper');
+            let gridBody = this.$el.querySelector('.el-table__body-wrapper .el-table__body');
+
+            this.showVScrollBar = gridBody.offsetHeight > gridBodyWrapper.offsetHeight;
+          }
+        });
+      },
+
+      doRender() {
+        let bodyWrapper = this.$el.querySelector('.el-table__body-wrapper');
+        let headerWrapper = this.$el.querySelector('.el-table__header-wrapper');
+        const el = this.$el;
+
+        if (!this.$ready) {
+          bodyWrapper.addEventListener('scroll', function() {
+            headerWrapper.scrollLeft = this.scrollLeft;
+            let fixedBodyWrapper = el.querySelector('.el-table__fixed-body-wrapper');
+            if (fixedBodyWrapper) {
+              fixedBodyWrapper.scrollTop = this.scrollTop;
+            }
+          });
+        }
+
+        this.$calcColumns();
+
+        if (!this.$ready && this.fit) {
+          this.windowResizeListener = throttle(100, () => {
+            this.$calcColumns();
+          });
+          window.addEventListener('resize', this.windowResizeListener);
+        }
+
+        Vue.nextTick(() => {
+          if (this.height) {
+            this.$calcHeight(this.height);
+          }
+        });
+      }
+    },
+
+    created() {
+      this.gridId = 'grid_' + gridIdSeed + '_';
+
+      if (GUTTER_WIDTH === undefined) {
+        GUTTER_WIDTH = getScrollBarWidth();
+      }
+      this.gutterWidth = GUTTER_WIDTH;
+
+      this.debouncedReRender = debounce(50, () => {
+        this.doRender();
+      });
+    },
+
+    computed: {
+      selection() {
+        if (this.selectionMode === 'multiple') {
+          const data = this.data || [];
+          return data.filter(function(item) {
+            return item.$selected === true;
+          });
+        } else if (this.selectionMode === 'single') {
+          return this.selected;
+        } else {
+          return null;
+        }
+      },
+
+      fixedColumns() {
+        const columns = this.columns || [];
+        const fixedColumnCount = this.fixedColumnCount;
+        return columns.filter(function(item, index) {
+          return index < fixedColumnCount;
+        });
+      }
+    },
+
+    watch: {
+      fixedColumnCount() {
+        this.debouncedReRender();
+      },
+
+      selection(val) {
+        this.$emit('selection-change', val);
+        if (this.selectionMode === 'multiple') {
+          this.allSelected = val.length === this.data.length;
+        }
+      },
+
+      visibleFilter(val) {
+        this.$broadcast('toggleFilterPopup', val);
+      },
+
+      height(value) {
+        this.$calcHeight(value);
+      },
+
+      data(newVal) {
+        this.doOnDataChange(newVal);
+        this.updateScrollInfo();
+      }
+    },
+
+    beforeCompile() {
+      const styleNode = document.createElement('style');
+      styleNode.type = 'text/css';
+      styleNode.rel = 'stylesheet';
+      styleNode.title = 'Grid Column Style';
+      document.getElementsByTagName('head')[0].appendChild(styleNode);
+
+      this.styleNode = styleNode;
+
+      if (this.data && this.selectionMode === 'multiple') {
+        this.data = this.data.map(item => Object.assign({ '$selected': false }, item));
+      }
+    },
+
+    destroyed() {
+      if (this.styleNode) {
+        this.styleNode.parentNode.removeChild(this.styleNode);
+      }
+
+      if (this.windowResizeListener) {
+        window.removeEventListener('resize', this.windowResizeListener);
+      }
+    },
+
+    ready() {
+      this.doRender();
+
+      this.$ready = true;
+      if (this.data) {
+        this.doOnDataChange(this.data);
+      }
+      this.updateScrollInfo();
+      if (this.fixedColumnCount > 0) {
+        this.$nextTick(() => {
+          this.$els.fixed.style.height = this.$el.clientHeight + 'px';
+        });
+      }
+    },
+
+    data() {
+      return {
+        showHScrollBar: false,
+        showVScrollBar: false,
+        hoverRowIndex: null,
+        headerHeight: 35,
+        selected: null,
+        allSelected: false,
+        columns: [],
+        resizeProxyVisible: false,
+        bodyWidth: '',
+        fixedBodyWidth: '',
+        sortingColumn: null,
+        sortingProperty: null,
+        sortingDirection: 1,
+        visibleFilter: null
+      };
+    }
+  };
+</script>
diff --git a/packages/table/src/util.js b/packages/table/src/util.js
new file mode 100644
index 000000000..758a555a9
--- /dev/null
+++ b/packages/table/src/util.js
@@ -0,0 +1,87 @@
+var scrollBarWidth;
+
+export const getScrollBarWidth = () => {
+  if (scrollBarWidth !== undefined) return scrollBarWidth;
+
+  const outer = document.createElement('div');
+  outer.style.visibility = 'hidden';
+  outer.style.width = '100px';
+  outer.style.position = 'absolute';
+  outer.style.top = '-9999px';
+  document.body.appendChild(outer);
+
+  const widthNoScroll = outer.offsetWidth;
+  outer.style.overflow = 'scroll';
+
+  const inner = document.createElement('div');
+  inner.style.width = '100%';
+  outer.appendChild(inner);
+
+  const widthWithScroll = inner.offsetWidth;
+  outer.parentNode.removeChild(outer);
+
+  return widthNoScroll - widthWithScroll;
+};
+
+export const getCell = function(event) {
+  let cell = event.target;
+
+  while (cell && cell.tagName.toUpperCase() !== 'HTML') {
+    if (cell.tagName.toUpperCase() === 'TD') {
+      return cell;
+    }
+    cell = cell.parentNode;
+  }
+
+  return null;
+};
+
+export const getValueByPath = function(object, prop) {
+  prop = prop || '';
+  const paths = prop.split('.');
+  let current = object;
+  let result = null;
+  for (let i = 0, j = paths.length; i < j; i++) {
+    const path = paths[i];
+    if (!current) break;
+
+    if (i === j - 1) {
+      result = current[path];
+      break;
+    }
+    current = current[path];
+  }
+  return result;
+};
+
+const isObject = function(obj) {
+  return obj !== null && typeof obj === 'object';
+};
+
+export const orderBy = function(array, sortKey, reverse) {
+  if (!sortKey) {
+    return array;
+  }
+  const order = (reverse && reverse < 0) ? -1 : 1;
+
+  // sort on a copy to avoid mutating original array
+  return array.slice().sort(function(a, b) {
+    if (sortKey !== '$key') {
+      if (isObject(a) && '$value' in a) a = a.$value;
+      if (isObject(b) && '$value' in b) b = b.$value;
+    }
+    a = isObject(a) ? getValueByPath(a, sortKey) : a;
+    b = isObject(b) ? getValueByPath(b, sortKey) : b;
+    return a === b ? 0 : a > b ? order : -order;
+  });
+};
+
+export const getChild = function(event) {
+  let cell = event.target;
+
+  while (cell.children.length) {
+    cell = cell.children[0];
+  }
+
+  return cell;
+};
diff --git a/packages/tabs/cooking.conf.js b/packages/tabs/cooking.conf.js
new file mode 100644
index 000000000..42d91beb1
--- /dev/null
+++ b/packages/tabs/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElTabs',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/tabs/index.js b/packages/tabs/index.js
new file mode 100644
index 000000000..3cf7a3a9c
--- /dev/null
+++ b/packages/tabs/index.js
@@ -0,0 +1,9 @@
+const ElTabs = require('./src/tabs');
+const ElTabPane = require('./src/tab-pane');
+
+ElTabs.install = function(Vue) {
+  Vue.component(ElTabs.name, ElTabs);
+  Vue.component(ElTabPane.name, ElTabPane);
+};
+
+module.exports = ElTabs;
diff --git a/packages/tabs/package.json b/packages/tabs/package.json
new file mode 100644
index 000000000..0baa36cfe
--- /dev/null
+++ b/packages/tabs/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "el-tabs",
+  "version": "1.0.0",
+  "description": "A tabs component for Vue.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/tabs",
+  "author": "haiping.zeng<haiping.zeng@ele.me>",
+  "license": "MIT",
+  "dependencies": {
+  }
+}
diff --git a/packages/tabs/src/tab-pane.vue b/packages/tabs/src/tab-pane.vue
new file mode 100644
index 000000000..888001f66
--- /dev/null
+++ b/packages/tabs/src/tab-pane.vue
@@ -0,0 +1,57 @@
+<script>
+  module.exports = {
+    name: 'el-tab-pane',
+
+    props: {
+      label: {
+        type: String,
+        required: true
+      },
+      key: {
+        type: String
+      }
+    },
+
+    data() {
+      return {
+        counter: 0,
+        transition: '',
+        paneStyle: {
+          position: 'relative'
+        }
+      };
+    },
+
+    created() {
+      if (!this.key) {
+        this.key = this.$parent.$children.indexOf(this) + 1 + '';
+      }
+    },
+
+    events: {
+    },
+
+    computed: {
+      show() {
+        return this.$parent.activeKey === this.key;
+      }
+    },
+
+    watch: {
+      '$parent.activeKey'(newValue, oldValue) {
+        if (this.key === newValue) {
+          this.transition = newValue > oldValue ? 'slideInRight' : 'slideInLeft';
+        }
+        if (this.key === oldValue) {
+          this.transition = oldValue > newValue ? 'slideInRight' : 'slideInLeft';
+        }
+      }
+    }
+  };
+</script>
+
+<template>
+  <div class="el-tab-pane" v-if="show">
+    <slot></slot>
+  </div>
+</template>
diff --git a/packages/tabs/src/tab.vue b/packages/tabs/src/tab.vue
new file mode 100644
index 000000000..e1a66f45b
--- /dev/null
+++ b/packages/tabs/src/tab.vue
@@ -0,0 +1,27 @@
+<script>
+  module.exports = {
+    name: 'el-tab',
+
+    props: {
+      tab: {
+        type: Object,
+        required: true
+      },
+      closable: Boolean
+    },
+    data() {
+      return {
+        showClose: false
+      };
+    }
+  };
+</script>
+
+<template>
+  <div class="el-tabs__item"
+  :class="{
+    'is-active': $parent.activeKey === tab.key,
+    'is-disabled': tab.disabled,
+    'is-closable': closable
+  }">{{tab.label}}<span class="el-icon-close" v-if="closable" @click="$emit('onremove', tab, $event)"></span></div>
+</template>
diff --git a/packages/tabs/src/tabs.vue b/packages/tabs/src/tabs.vue
new file mode 100644
index 000000000..ab371f641
--- /dev/null
+++ b/packages/tabs/src/tabs.vue
@@ -0,0 +1,113 @@
+<script>
+  import ElTab from './tab';
+
+  module.exports = {
+    name: 'el-tabs',
+
+    components: {
+      ElTab
+    },
+
+    props: {
+      type: String,
+      tabPosition: String,
+      defaultActiveKey: {
+        type: String
+      },
+      activeKey: {
+        type: String
+      },
+      closable: false,
+      tabWidth: 0
+    },
+
+    data() {
+      return {
+        tabs: [],
+        children: null,
+        activeTab: null
+      };
+    },
+
+    computed: {
+      barStyle: {
+        cache: false,
+        get() {
+          if (this.type) return {};
+          var style = {};
+          var offset = 0;
+          var tabWidth = 0;
+
+          this.tabs.every((tab, index) => {
+            let $el = this.$refs.tabs[index].$el;
+            if (tab.key !== this.activeKey) {
+              offset += $el.clientWidth;
+              return true;
+            } else {
+              tabWidth = $el.clientWidth;
+              return false;
+            }
+          });
+
+          style.width = tabWidth + 'px';
+          style.transform = `translateX(${offset}px)`;
+          return style;
+        }
+      }
+    },
+
+    methods: {
+      removeTab(tab, ev) {
+        ev.stopPropagation();
+        tab.$destroy(true);
+
+        var index = this.tabs.indexOf(tab);
+
+        if (index !== -1) {
+          this.tabs.splice(index, 1);
+        }
+
+        if (tab.key === this.activeKey) {
+          let deleteIndex = this.$children.indexOf(tab);
+          let nextChild = this.$children[deleteIndex + 1];
+          let prevChild = this.$children[deleteIndex - 1];
+
+          this.activeKey = nextChild ? nextChild.key : prevChild ? prevChild.key : '-1';
+        }
+        this.$emit('tab.remove', tab);
+      },
+      handleTabClick(tab) {
+        this.activeKey = tab.key;
+        this.$emit('tab.click', tab);
+      }
+    },
+    ready() {
+      if (!this.activeKey) {
+        this.activeKey = this.defaultActiveKey || this.$children[0].key;
+      }
+      this.$children.forEach(tab => {
+        this.tabs.push(tab);
+      });
+    }
+  };
+</script>
+
+<template>
+  <div class="el-tabs" :class="[type ? 'el-tabs--' + type : '']">
+    <div class="el-tabs__header">
+      <el-tab
+        v-for="tab in tabs"
+        v-ref:tabs
+        :tab="tab"
+        :closable="closable"
+        @onremove="removeTab"
+        @click="handleTabClick(tab)"
+      ></el-tab>
+      <div class="el-tabs__active-bar" v-bind:style="barStyle" v-if="!this.type && tabs.length > 0"></div>
+    </div>
+
+    <div class="el-tabs__content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
diff --git a/packages/tag/cooking.conf.js b/packages/tag/cooking.conf.js
new file mode 100644
index 000000000..dd83ef37b
--- /dev/null
+++ b/packages/tag/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElTag',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/tag/index.js b/packages/tag/index.js
new file mode 100644
index 000000000..029de5b9a
--- /dev/null
+++ b/packages/tag/index.js
@@ -0,0 +1,7 @@
+const ElTag = require('./src/tag');
+
+ElTag.install = function(Vue) {
+  Vue.component(ElTag.name, ElTag);
+};
+
+module.exports = ElTag;
diff --git a/packages/tag/package.json b/packages/tag/package.json
new file mode 100644
index 000000000..25956f4db
--- /dev/null
+++ b/packages/tag/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "el-tag",
+  "version": "1.0.1",
+  "description": "A input component for Vue.",
+  "main": "lib/index.js",
+  "keywords": [
+    "element",
+    "vue",
+    "component",
+    "input"
+  ],
+  "author": "haipingZeng <haiping.zeng@ele.me>",
+  "license": "MIT",
+  "repository": "https://github.com/element-component/element/tree/master/packages/tag",
+  "devDependencies": {
+    "vue-clickoutside": "0.0.4"
+  }
+}
diff --git a/packages/tag/src/tag.vue b/packages/tag/src/tag.vue
new file mode 100644
index 000000000..28b2c6872
--- /dev/null
+++ b/packages/tag/src/tag.vue
@@ -0,0 +1,29 @@
+<template>
+  <span
+    class="el-tag"
+    :class="[type ? 'el-tag--' + type : '', {'is-hit': hit}]"
+    :transition="closeTransition ? '' : 'md-fade-center'">
+    <slot></slot>
+    <i
+      class="el-tag__close el-icon-close"
+      v-if="closable"
+      @click="handleClose"></i>
+  </span>
+</template>
+<script>
+  export default {
+    name: 'ElTag',
+    props: {
+      text: String,
+      closable: Boolean,
+      type: String,
+      hit: Boolean,
+      closeTransition: Boolean
+    },
+    methods: {
+      handleClose(event) {
+        this.$emit('close', event);
+      }
+    }
+  };
+</script>
diff --git a/packages/theme-default/README.md b/packages/theme-default/README.md
new file mode 100644
index 000000000..7c214858d
--- /dev/null
+++ b/packages/theme-default/README.md
@@ -0,0 +1,27 @@
+# element-theme-default
+> element component defualt theme.
+
+## Usage
+
+Use Sass Or postcss-import
+```css
+@import 'element-theme-default';
+```
+
+Or Use webpack
+```javascript
+import 'element-theme-default';
+```
+
+Or
+```html
+<link rel="stylesheet" href="path/to/node_modules/element-theme-default/dist/index.css">
+```
+
+##  Import your need
+```javascript
+import 'element-theme-default/dist/input.css';
+import 'element-theme-default/dist/select.css';
+
+// ...
+```
diff --git a/packages/theme-default/gulpfile.js b/packages/theme-default/gulpfile.js
new file mode 100644
index 000000000..91b1984da
--- /dev/null
+++ b/packages/theme-default/gulpfile.js
@@ -0,0 +1,37 @@
+'use strict';
+
+const gulp = require('gulp');
+const postcss = require('gulp-postcss');
+const cssmin = require('gulp-cssmin');
+
+const salad = require('postcss-salad')({
+  browser: ['ie > 9', 'last 2 version'],
+  features: {
+    'bem': {
+      'shortcuts': {
+        'component': 'b',
+        'modifier': 'm',
+        'descendent': 'e'
+      },
+      'separators': {
+        'descendent': '__',
+        'modifier': '--'
+      }
+    }
+  }
+});
+
+gulp.task('compile', function () {
+  return gulp.src('./src/*.css')
+    .pipe(postcss([salad]))
+    .pipe(cssmin())
+    .pipe(gulp.dest('./lib'));
+});
+
+gulp.task('copyfont', function () {
+  return gulp.src('./src/fonts/**')
+    .pipe(cssmin())
+    .pipe(gulp.dest('./lib/fonts'));
+});
+
+gulp.task('build', ['compile', 'copyfont']);
diff --git a/packages/theme-default/package.json b/packages/theme-default/package.json
new file mode 100644
index 000000000..fdd673398
--- /dev/null
+++ b/packages/theme-default/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "element-theme-default",
+  "version": "1.0.0",
+  "description": "Element component default theme.",
+  "main": "lib/index.css",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "build": "postcss -c postcss.conf.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/element-component/element-theme-default.git"
+  },
+  "keywords": [
+    "element",
+    "theme"
+  ],
+  "author": "haiping.zeng <qingwei.li@ele.me>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/element-component/element-theme-default/issues"
+  },
+  "homepage": "https://github.com/element-component/element-theme-default#readme",
+  "devDependencies": {
+    "gulp": "^3.9.1",
+    "gulp-cssmin": "^0.1.7",
+    "gulp-postcss": "^6.1.1",
+    "postcss-salad": "^1.0.5"
+  }
+}
diff --git a/packages/theme-default/src/alert.css b/packages/theme-default/src/alert.css
new file mode 100644
index 000000000..bbb99e7c4
--- /dev/null
+++ b/packages/theme-default/src/alert.css
@@ -0,0 +1,89 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+
+  @b alert {
+    width: 100%;
+    padding: 8px 16px;
+    margin: 0;
+    box-sizing: border-box;
+    border-radius: 4px;
+    position: relative;
+    background-color: #fff;
+    overflow: hidden;
+    color: #fff;
+    opacity: 1;
+    display: table;
+
+    @modifier success {
+      background-color: #13ce66;
+    }
+
+    @modifier info {
+      background-color: #50bfff;
+    }
+
+    @modifier warning {
+      background-color: #f7ba2a;
+    }
+
+    @modifier error {
+      background-color: #ff4949;
+    }
+
+    @e content {
+      display: table-cell;
+      padding-left: 8px;
+    }
+
+    @e icon {
+      font-size: 16px;
+      width: 16px;
+      display: table-cell;
+      color: #fff;
+      vertical-align: middle;
+      @when big {
+        font-size: 28px;
+        width: 28px;
+      }
+    }
+
+    @e title {
+      font-size: 13px;
+      line-height: 18px;
+      @when bold {
+        font-weight: bold;
+      }
+    }
+
+    & .el-alert__description {
+      color: #fff;
+      font-size: 12px;
+      margin: 5px 0 0 0;
+    }
+
+    @e closebtn {
+      font-size: 12px;
+      color: #fff;
+      opacity: 1;
+      position: absolute 12px 15px * *;
+      cursor: pointer;
+
+      @when customed {
+        font-style: normal;
+        font-size: 13px;
+        top: 9px;
+      }
+    }
+  }
+
+  .el-alert-fade-transition {
+    transition: opacity .2s;
+  }
+
+  .el-alert-fade-enter,
+  .el-alert-fade-leave {
+    opacity: 0;
+  }
+}
diff --git a/packages/theme-default/src/autocomplete.css b/packages/theme-default/src/autocomplete.css
new file mode 100644
index 000000000..dba8c6d6e
--- /dev/null
+++ b/packages/theme-default/src/autocomplete.css
@@ -0,0 +1,63 @@
+@charset "UTF-8";
+@import "./input.css";
+@import "./common/var.css";
+
+@component-namespace el {
+  @b autocomplete {
+    position: relative;
+
+    @e suggestions {
+      position: absolute;
+      left: 0;
+      top: 110%;
+      margin: 0;
+      background-color: #fff;
+      border: 1px solid #D3DCE6;
+      width: 100%;
+      padding: 6px 0;
+      z-index: 10;
+      border-radius: 2px;
+      max-height: 280px;
+      box-sizing: border-box;
+      overflow: auto;
+      box-shadow: 0 0 6px 0 rgba(0,0,0,0.04), 0 2px 4px 0 rgba(0,0,0,0.12);
+
+      & li {
+        list-style: none;
+        line-height: 36px;
+        padding: 0 27px 0 10px;
+        margin: 0;
+        cursor: pointer;
+
+        &.highlighted,
+        &:hover {
+          background-color: var(--color-primary);
+          color: #fff;
+        }
+        &:active {
+          background-color: darken(var(--color-primary), 0.2);
+        }
+        &.divider {
+          margin-top: 6px;
+          border-top: 1px solid #D3DCE6;
+        }
+        &.divider:last-child {
+          margin-bottom: -6px;
+        }
+      }
+
+      @when loading {
+        text-align: center;
+        height: 100px;
+        line-height: 100px;
+        font-size: 20px;
+        color: #999;
+        @utils-vertical-center;
+
+        & .el-icon-loading {
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/theme-default/src/base.css b/packages/theme-default/src/base.css
new file mode 100644
index 000000000..d5da9e9e1
--- /dev/null
+++ b/packages/theme-default/src/base.css
@@ -0,0 +1,2 @@
+@import "./common/transition.css";
+@import "./icon.css";
diff --git a/packages/theme-default/src/breadcrumb.css b/packages/theme-default/src/breadcrumb.css
new file mode 100644
index 000000000..7fe4bfdbf
--- /dev/null
+++ b/packages/theme-default/src/breadcrumb.css
@@ -0,0 +1,38 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+
+  @b breadcrumb {
+    font-size:13px;
+    color:#475669;
+    @utils-clearfix;
+
+    @e separator {
+      margin: 0 8px;
+      color: #c0ccda;
+    }
+    @e item {
+      float: left;
+
+      &:not(:last-child) {
+        .el-breadcrumb__item__text {
+          transition: color .15s linear;
+
+          &:hover {
+            color: var(--color-primary);
+            cursor: pointer;
+          }
+        }
+      }
+
+      &:last-child {
+        color: #99a9bf;
+
+        .el-breadcrumb__separator {
+          display: none;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/theme-default/src/button.css b/packages/theme-default/src/button.css
new file mode 100644
index 000000000..91a1acd6b
--- /dev/null
+++ b/packages/theme-default/src/button.css
@@ -0,0 +1,197 @@
+@charset "UTF-8";
+@import "./common/var.css";
+@import './mixins/button';
+
+@component-namespace el {
+  @b button {
+    display: inline-block;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    background: var(--button-default-fill);
+    border: var(--border-base);
+    color: var(--button-default-color);
+    -webkit-appearance: none;
+    text-align: center;
+    box-sizing: border-box;
+    outline: none;
+    margin: 0;
+    @utils-user-select none;
+    
+    @mixin button-size var(--button-padding-vertical), var(--button-padding-horizontal), var(--button-font-size), var(--button-border-radius);
+
+    &:hover {
+      color: var(--color-primary);
+      border-color: @color;
+    }
+    
+    &:active {
+      color: shade(var(--color-primary), var(--button-active-shade-percent));
+      border-color: @color;
+      outline: none;
+    }
+
+    &::-moz-focus-inner {
+      border: 0;
+    }
+
+    & .el-icon-right {
+      margin-left: 5px;
+    }
+    & .el-icon-left {
+      margin-right: 5px;
+    }
+
+    & [class*="el-icon-"] {
+      /*line-height: 0.9;*/
+      
+      & + span {
+        margin-left: 5px;
+      }
+    }
+
+    @when plain {
+      &:hover {
+        background: #fff;
+        border-color: var(--color-primary);
+        color: var(--color-primary);
+      }
+      
+      &:active {
+        background: #fff;
+        border-color: shade(var(--color-primary), var(--button-active-shade-percent));
+        color: shade(var(--color-primary), var(--button-active-shade-percent));
+        outline: none;
+      }
+    }
+
+    @when active {
+      color: shade(var(--color-primary), var(--button-active-shade-percent));
+      border-color: @color;
+    }
+
+    @when disabled {
+      &,
+      &:hover {
+        color: var(--button-disabled-color);
+        cursor: not-allowed;
+        background-image: none;
+        background-color: var(--button-disabled-fill);
+        border-color: var(--button-disabled-border);
+      }
+
+      &.is-plain {
+        &,
+        &:hover {
+          background-color: #fff;
+          border-color: #d3dce6;
+          color: #C0CCDA;
+        }
+      }
+    }
+
+    @when loading {
+      position: relative;
+      pointer-events: none;
+
+      &:before {
+        pointer-events: none;
+        content: '';
+        position: absolute;
+        left: -1px;
+        top: -1px;
+        right: -1px;
+        bottom: -1px;
+        border-radius: inherit;
+        background-color: rgba(255,255,255,.35);
+      }
+    }
+  }
+
+  @b button-primary {
+    @mixin button-variant var(--button-primary-color), var(--button-primary-fill), var(--button-primary-border);
+  }
+  @b button-success {
+    @mixin button-variant var(--button-success-color), var(--button-success-fill), var(--button-success-border);
+  }
+  @b button-warning {
+    @mixin button-variant var(--button-warning-color), var(--button-warning-fill), var(--button-warning-border);
+  }
+  @b button-danger {
+    @mixin button-variant var(--button-danger-color), var(--button-danger-fill), var(--button-danger-border);
+  }
+  @b button-info {
+    @mixin button-variant var(--button-info-color), var(--button-info-fill), var(--button-info-border);
+  }
+  @b button-text {
+    border: none;
+    color: var(--color-primary);
+    background: transparent;
+
+    &:hover {
+      color: tint(var(--color-primary), var(--button-hover-tint-percent));
+    }
+    &:active {
+      color: shade(var(--color-primary), var(--button-active-shade-percent));
+    }
+  }
+
+  @b button-large {
+    @mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), var(--button-border-radius);
+  }
+  @b button-small {
+    @mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), var(--button-border-radius);
+  }
+  @b button-mini {
+    @mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), var(--button-border-radius);
+  }
+
+  @b button-group {
+    @utils-clearfix;
+    display: inline-block;
+
+    & .el-button {
+      float: left;
+      position: relative;
+
+      &:first-child {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+      &:last-child {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+      &:not(:first-child):not(:last-child) {
+        border-radius: 0;
+      }
+      &:not(:last-child) {
+        margin-right: -1px;
+      }
+
+      &:hover,
+      &:active {
+        z-index: 1;
+      }
+
+      @when active {
+        z-index: 1;
+      }
+    }
+
+    @each $type in (primary, success, warning, danger, info) {
+      .el-button-$type {
+        &:first-child {
+          border-right-color: rgba(#fff, 0.5);
+        }
+        &:last-child {
+          border-left-color: rgba(#fff, 0.5);
+        }
+        &:not(:first-child):not(:last-child) {
+          border-left-color: rgba(#fff, 0.5);
+          border-right-color: rgba(#fff, 0.5);
+        }
+      }
+    }
+  }
+}
diff --git a/packages/theme-default/src/cascader.css b/packages/theme-default/src/cascader.css
new file mode 100644
index 000000000..a79fe34e2
--- /dev/null
+++ b/packages/theme-default/src/cascader.css
@@ -0,0 +1,45 @@
+@charset "UTF-8";
+@import "./input.css";
+@import "./common/var.css";
+/*@import "./core/dropdown.css";*/
+
+@component-namespace element {
+
+  @b cascader {
+    display: inline-block;
+    position: relative;
+
+    @e dropdown {
+      background-color: var(--cascader-menu-fill);
+      border: var(--cascader-menu-border);
+      border-radius: var(--cascader-menu-radius);
+      box-shadow: var(--cascader-menu-submenu-shadow);
+      margin-top: 5px;
+      max-height: var(--cascader-height);
+      position: absolute;
+      white-space: nowrap;
+      z-index: 10;
+    }
+
+    @e wrap {
+      overflow: hidden;
+    }
+
+    @e menu {
+      border: 0;
+      box-shadow: none;
+      display: inline-block;
+      margin: 0;
+      position: relative;
+      vertical-align: top;
+
+      &::before {
+        border-left: var(--cascader-menu-border);
+        content: " ";
+        height: var(--cascader-height);
+        left: 0;
+        position: absolute;
+      }
+    }
+  }
+}
diff --git a/packages/theme-default/src/checkbox.css b/packages/theme-default/src/checkbox.css
new file mode 100644
index 000000000..658c08dff
--- /dev/null
+++ b/packages/theme-default/src/checkbox.css
@@ -0,0 +1,133 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+
+  @b checkbox {
+    color: var(--checkbox-color);
+    position: relative;
+    cursor: pointer;
+    display: inline-block;
+    white-space: nowrap;
+    @utils-user-select none;
+
+    @e input {
+      white-space: nowrap;
+      cursor: pointer;
+      outline: none;
+      display: inline-block;
+      line-height: 1;
+      position: relative;
+      vertical-align: middle;
+    }
+    @e inner {
+      display: inline-block;
+      position: relative;
+      border: var(--checkbox-input-border);
+      border-radius: var(--checkbox-input-border-radius);
+      box-sizing: border-box;
+      rect: var(--checkbox-input-width) var(--checkbox-input-height) var(--checkbox-input-fill);
+      z-index: var(--index-normal);
+      transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
+                  background-color .25s cubic-bezier(.71,-.46,.29,1.46);
+
+      &:not(.is-disabled):hover {
+        border-color: var(--checkbox-input-border-color-hover);
+      }
+
+      &::after {
+        content: "";
+        border: 2px solid var(--checkbox-checked-icon-color);
+        border-left: 0;
+        border-top: 0;
+        height: 8px;
+        left: 5px;
+        position: absolute;
+        top: 1px;
+        transform: rotate(45deg) scaleY(0);
+        width: 4px;
+        transition: transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;
+        transform-origin: center;
+      }
+
+      @when disabled {
+        background-color: var(--checkbox-disabled-input-fill);
+        border-color: var(--checkbox-disabled-input-border-color);
+        cursor: not-allowed;
+
+        &::after {
+          cursor: not-allowed;
+          border-color: var(--checkbox-disabled-icon-color);
+        }
+
+        & + .el-checkbox__label {
+          cursor: not-allowed;
+        }
+      }
+
+      @when checked {
+        background-color: var(--checkbox-checked-input-fill);
+        border-color: var(--checkbox-checked-input-border-color);
+
+        &::after {
+          transform: rotate(45deg) scaleY(1);
+        }
+      }
+
+      @when focus {
+        border-color: var(--checkbox-input-border-color-hover);
+      }
+
+      &.is-disabled.is-checked {
+        background-color: var(--checkbox-disabled-checked-input-fill);
+        border-color: var(--checkbox-disabled-checked-input-border-color);
+
+        &::after {
+          border-color: var(--checkbox-disabled-checked-icon-color);
+        }
+      }
+
+      @when indeterminate {
+        background-color: var(--checkbox-checked-input-fill);
+        border-color: var(--checkbox-checked-input-border-color);
+
+        &::before {
+          content: '';
+          position: absolute;
+          display: block;
+          border: 1px solid var(--checkbox-checked-icon-color);
+          margin-top: -1px;
+          left: 3px;
+          right: 3px;
+          top: 50%;
+        }
+
+        &::after {
+          display: none;
+        }
+      }
+
+      &.is-disabled.is-indeterminate {
+        background-color: var(--checkbox-disabled-checked-input-fill);
+        border-color: var(--checkbox-disabled-checked-input-border-color);
+
+        &::before {
+          border-color: var(--checkbox-disabled-checked-icon-color);
+        }
+      }
+    }
+
+    @e original {
+      opacity: 0;
+      outline: none;
+      position: absolute;
+      margin: 0;
+      left: -999px;
+    }
+
+    @e label {
+      font-size: var(--checkbox-font-size);
+      padding-left: 5px;
+    }
+  }
+}
diff --git a/packages/theme-default/src/col.css b/packages/theme-default/src/col.css
new file mode 100644
index 000000000..b2a9f58b4
--- /dev/null
+++ b/packages/theme-default/src/col.css
@@ -0,0 +1,23 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+.el-col-1, .el-col-2, .el-col-3, .el-col-4, .el-col-5, .el-col-6, .el-col-7, .el-col-8, .el-col-9, .el-col-10, .el-col-11, .el-col-12, .el-col-13, .el-col-14, .el-col-15, .el-col-16, .el-col-17, .el-col-18, .el-col-19, .el-col-20, .el-col-21, .el-col-22, .el-col-23, .el-col-24 {
+  float: left;
+}
+
+@for $i from 1 to 24 {
+  .el-col-$i {
+    width: calc(1 / 24 * $(i) * 100)%;
+  }
+  .el-col-offset-$i {
+    margin-left: calc(1 / 24 * $(i) * 100)%;
+  }
+  .el-col-pull-$i {
+    position: relative;
+    right: calc(1 / 24 * $(i) * 100)%;
+  }
+  .el-col-push-$i {
+    position: relative;
+    left: calc(1 / 24 * $(i) * 100)%;
+  }
+}
diff --git a/packages/theme-default/src/common/transition.css b/packages/theme-default/src/common/transition.css
new file mode 100644
index 000000000..03f41b713
--- /dev/null
+++ b/packages/theme-default/src/common/transition.css
@@ -0,0 +1,111 @@
+@charset "UTF-8";
+@import './var.css';
+
+.fade-in-transition {
+  opacity: 1;
+  transition: var(--fade-transition);
+}
+
+.fade-in-linear-transition {
+  opacity: 1;
+  transition: var(--fade-linear-transition);
+}
+
+.fade-in-enter,
+.fade-in-leave,
+.fade-in-linear-enter,
+.fade-in-linear-leave {
+  opacity: 0;
+}
+
+.md-fade-center-transition {
+  opacity: 1;
+  transform: scaleY(1);
+  transition: var(--md-fade-transition);
+  transform-origin: center center;
+}
+.md-fade-center-enter,
+.md-fade-center-leave {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+.md-fade-bottom-transition {
+  opacity: 1;
+  transform: scaleY(1);
+  transition: var(--md-fade-transition);
+  transform-origin: center top;
+}
+.md-fade-bottom-enter,
+.md-fade-bottom-leave {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+.md-fade-top-transition {
+  opacity: 1;
+  transform: scaleY(1);
+  transition: var(--md-fade-transition);
+  transform-origin: center bottom;
+}
+
+.md-fade-top-enter,
+.md-fade-top-leave {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+.md-fade-left-transition {
+  opacity: 1;
+  transform: scaleX(1);
+  transition: var(--md-fade-transition);
+  transform-origin: right center;
+}
+.md-fade-left-enter,
+.md-fade-left-leave {
+  opacity: 0;
+  transform: scaleX(0);
+}
+
+.md-fade-right-transition {
+  opacity: 1;
+  transform: scaleX(1);
+  transition: var(--md-fade-transition);
+  transform-origin: left center;
+}
+.md-fade-right-enter,
+.md-fade-right-leave {
+  opacity: 0;
+  transform: scaleX(0);
+}
+
+.zoom-x-transition {
+  transform: scaleX(1);
+  transition: var(--md-fade-transition);
+  transform-origin: center center;
+}
+.zoom-x-enter,
+.zoom-x-leave {
+  transform: scaleX(0);
+}
+
+.slide-in-bottom-enter {
+  animation: slideInBottomEnter .3s;
+}
+.slide-in-bottom-leave {
+  animation: slideInBottomLeave .3s;
+}
+
+@keyframes slideInBottomEnter {
+  0% {
+    opacity: 0;
+    transform: translate3d(0,50%,0);
+  }
+}
+
+@keyframes slideInBottomLeave {
+  to {
+    opacity: 0;
+    transform: translate3d(0,50%,0);
+  }
+}
diff --git a/packages/theme-default/src/common/var.css b/packages/theme-default/src/common/var.css
new file mode 100644
index 000000000..1eaf69414
--- /dev/null
+++ b/packages/theme-default/src/common/var.css
@@ -0,0 +1,356 @@
+:root {
+
+  /*
+    Transition
+  -------------------------- */
+  --fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+  --fade-linear-transition: opacity 200ms linear;
+  --md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  --border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1);
+  --color-transition-base: color .2s cubic-bezier(.645,.045,.355,1);
+
+  /* Colors
+  -------------------------- */
+  --color-primary: #20a0ff;
+  --color-success: #13ce66;
+  --color-warning: #f7ba2a;
+  --color-danger: #ff4949;
+  --color-info: #50BFFF;
+  --color-blue: #2e90fe;
+  --color-blue-light: #5da9ff;
+  --color-blue-lighter: rgba(var(--color-blue), 0.12);
+  --color-white: #fff;
+  --color-black: #000;
+  --color-grey: #C0CCDA;
+
+  /* Border
+  -------------------------- */
+  --border-width-base: 1px;
+  --border-style-base: solid;
+  --border-color-base: var(--color-grey);
+  --border-base: var(--border-width-base) var(--border-style-base) var(--border-color-base);
+  --border-radius-base: 4px;
+  --border-radius-circle: 100%;
+  --shadow-base: 0 0 2px rgba(var(--color-black), 0.18), 0 0 1px var(--color-blue-light);
+
+  /* Fill
+  -------------------------- */
+  --fill-base: var(--color-white);
+
+  /* Font
+  -------------------------- */
+  --font-size-base: 14px;
+  --font-color-base: #1f2d3d;
+  --font-color-disabled-base: #bbb;
+
+  /* Size
+  -------------------------- */
+  --size-base: 14px;
+
+  /* z-index
+  -------------------------- */
+  --index-normal: 1;
+  --index-top: 1000;
+  --index-popper: 2000;
+
+  /* Disable base
+  -------------------------- */
+  --disabled-fill-base: #EFF2F7;
+  --disabled-color-base: #bbb;
+  --disabled-border-base: #D3DCE6;
+
+  /* Icon
+  -------------------------- */
+  --icon-color: #666;
+
+  /* Checkbox
+  -------------------------- */
+  --checkbox-font-size: 14px;
+  --checkbox-color: #1f2d3d;
+  --checkbox-input-height: 18px;
+  --checkbox-input-width: 18px;
+  --checkbox-input-border-radius: var(--border-radius-base);
+  --checkbox-input-fill: #fff;
+  --checkbox-input-border: var(--border-base);
+  --checkbox-input-border-color: var(--border-color-base);
+  --checkbox-icon-color: #fff;
+
+  --checkbox-disabled-input-border-color: var(--disabled-border-base);
+  --checkbox-disabled-input-fill: var(--disabled-fill-base);
+  --checkbox-disabled-icon-color: var(--disabled-fill-base);
+
+  --checkbox-disabled-checked-input-fill: var(--disabled-border-base);
+  --checkbox-disabled-checked-input-border-color: var(--disabled-border-base);
+  --checkbox-disabled-checked-icon-color: #fff;
+
+  --checkbox-checked-input-border-color: var(--color-blue);
+  --checkbox-checked-input-fill: var(--color-primary);
+  --checkbox-checked-icon-color: var(--fill-base);
+
+  --checkbox-input-shadow-hover: var(--shadow-base);
+  --checkbox-input-border-color-hover: var(--color-primary);
+
+  /* Radio
+  -------------------------- */
+  --radio-font-size: 14px;
+  --radio-color: #1f2d3d;
+  --radio-input-height: 18px;
+  --radio-input-width: 18px;
+  --radio-input-border-radius: var(--border-radius-circle);
+  --radio-input-fill: #fff;
+  --radio-input-border: var(--border-base);
+  --radio-input-border-color: var(--border-color-base);
+  --radio-icon-color: #fff;
+
+  --radio-disabled-input-border-color: var(--disabled-border-base);
+  --radio-disabled-input-fill: var(--disabled-fill-base);
+  --radio-disabled-icon-color: var(--disabled-fill-base);
+
+  --radio-disabled-checked-input-fill: var(--disabled-border-base);
+  --radio-disabled-checked-input-border-color: var(--disabled-border-base);
+  --radio-disabled-checked-icon-color: #fff;
+
+  --radio-checked-input-border-color: var(--color-primary);
+  --radio-checked-input-fill: #fff;
+  --radio-checked-icon-color: var(--color-primary);
+
+  --radio-input-shadow-hover: var(--shadow-base);
+  --radio-input-border-color-hover: var(--color-primary);
+
+  --radio-button-font-size: var(--font-size-base);
+
+  /* Input
+  -------------------------- */
+  --input-font-size: var(--font-size-base);
+  --input-color: var(--font-color-base);
+  --input-width: 140px;
+  --input-height: 36px;
+  --input-shadow-hover: var(--shadow-base);
+  --input-border: var(--border-base);
+  --input-border-color: var(--border-color-base);
+  --input-border-radius: var(--border-radius-base);
+  --input-border-color-hover: #8492A6;
+  --input-fill: #fff;
+  --input-fill-disabled: var(--disabled-fill-base);
+  --input-color-disabled: var(--font-color-disabled-base);
+  --input-icon-color: var(--color-grey);
+  --input-placeholder-color: #99a9bf;
+  --input-max-width: 314px;
+
+  --input-hover-border: #8492A6;
+
+  --input-focus-border: var(--color-primary);
+  --input-focus-fill: #fff;
+
+  --input-disabled-fill: var(--disabled-fill-base);
+  --input-disabled-border: var(--disabled-border-base);
+  --input-disabled-color: var(--disabled-color-base);
+  --input-disabled-placeholder-color: #C0CCDA;
+
+  --input-large-font-size: 16px;
+  --input-large-height: 42px;
+
+  --input-small-font-size: 13px;
+  --input-small-height: 28px;
+
+  --input-mini-font-size: 12px;
+  --input-mini-height: 22px;
+
+  /* Cascader
+  -------------------------- */
+  --cascader-menu-fill: var(--fill-base);
+  --cascader-menu-font-size: var(--font-size-base);
+  --cascader-menu-radius: var(--border-radius-base);
+  --cascader-menu-border: var(--border-base);
+  --cascader-menu-border-color: var(--border-color-base);
+  --cascader-menu-border-width: var(--border-width-base);
+  --cascader-menu-color: var(--font-color-base);
+  --cascader-menu-option-color-active: var(--color-blue);
+  --cascader-menu-option-fill-active: rgba(var(--color-blue), 0.12);
+  --cascader-menu-option-color-hover: var(--font-color-base);
+  --cascader-menu-option-fill-hover: rgba(var(--color-black), 0.06);
+  --cascader-menu-option-color-disabled: #999;
+  --cascader-menu-option-fill-disabled: rgba(var(--color-black), 0.06);
+  --cascader-menu-option-empty-color: #666;
+  --cascader-menu-group-color: #999;
+  --cascader-menu-shadow: 0 1px 2px rgba(var(--color-black), 0.14), 0 0 3px rgba(var(--color-black), 0.14);
+  --cascader-menu-option-pinyin-color: #999;
+  --cascader-menu-submenu-shadow: 1px 1px 2px rgba(var(--color-black), 0.14), 1px 0 2px rgba(var(--color-black), 0.14);
+
+  /* Tag
+  -------------------------- */
+  --tag-color: var(--font-color-base);
+  --tag-fill: #e2e2e2;
+  --tag-border-radius: var(--border-radius-base);
+  --tag-close-color: #666;
+
+  /* Group
+  -------------------------- */
+  --group-option-flex: 0 0 (1/5) * 100%;
+  --group-option-offset-bottom: 12px;
+  --group-option-fill-hover: rgba(var(--color-black), 0.06);
+  --group-title-color: var(--color-black);
+  --group-title-font-size: var(--font-size-base);
+  --group-title-width: 66px;
+
+  /* Tab
+  -------------------------- */
+  --tab-font-size: var(--font-size-base);
+  --tab-border-line: 1px solid #e4e4e4;
+  --tab-header-color-active: var(--color-blue);
+  --tab-header-color-hover: var(--font-color-base);
+  --tab-header-color: var(--font-color-base);
+  --tab-header-fill-active: rgba(var(--color-black), 0.06);
+  --tab-header-fill-hover: rgba(var(--color-black), 0.06);
+  --tab-vertical-header-width: 90px;
+  --tab-vertical-header-count-color: var(--color-white);
+  --tab-vertical-header-count-fill: var(--color-blue);
+  --tab-horizontal-border: 2px solid #438de0;
+
+  /* Button
+  -------------------------- */
+  --button-font-size: 14px;
+  --button-border-radius: var(--border-radius-base);
+  --button-paddding: 5px 20px;
+  --button-padding-vertical: 10px;
+  --button-padding-horizontal: 15px;
+
+  --button-large-font-size: 16px;
+  --button-large-padding-vertical: 11px;
+  --button-large-padding-horizontal: 19px;
+
+  --button-small-font-size: 12px;
+  --button-small-padding-vertical: 7px;
+  --button-small-padding-horizontal: 9px;
+
+  --button-mini-font-size: 12px;
+  --button-mini-padding-vertical: 4px;
+  --button-mini-padding-horizontal: 4px;
+
+  --button-default-color: #1F2D3D;
+  --button-default-fill: #fff;
+  --button-default-border: #c4c4c4;
+
+  --button-ghost-color: #666;
+  --button-ghost-fill: transparent;
+  --button-ghost-border: none;
+
+  --button-disabled-color: #C0CCDA;
+  --button-disabled-fill: #EFF2F7;
+  --button-disabled-border: #D3DCE6;
+
+  --button-primary-border: var(--color-primary);
+  --button-primary-color: #fff;
+  --button-primary-fill: var(--color-primary);
+
+  --button-success-border: var(--color-success);
+  --button-success-color: #fff;
+  --button-success-fill: var(--color-success);
+
+  --button-warning-border: var(--color-warning);
+  --button-warning-color: #fff;
+  --button-warning-fill: var(--color-warning);
+
+  --button-danger-border: var(--color-danger);
+  --button-danger-color: #fff;
+  --button-danger-fill: var(--color-danger);
+
+  --button-info-border: var(--color-info);
+  --button-info-color: #fff;
+  --button-info-fill: var(--color-info);
+
+  --button-hover-tint-percent: 20%;
+  --button-active-shade-percent: 10%;
+
+
+  /* cascader
+  -------------------------- */
+  --cascader-height: 200px;
+
+  /* Switch
+ -------------------------- */
+  --switch-on-color: #20a0ff;
+  --switch-off-color: #C0CCDA;
+  --switch-disabled-color: #E5E9F3;
+  --switch-disabled-text-color: #F9FAFC;
+
+  /* Dialog
+ -------------------------- */
+  --dialog-background-color: var(--color-blue);
+  --dialog-footer-background: var(--color-blue-lighter);
+
+  /* Table
+ -------------------------- */
+  --table-border-color: #e0e6ed;
+  --table-text-color: #1f2d3d;
+  --table-header-background: #EFF2F7;
+
+  /* Pagination
+ -------------------------- */
+  --pagination-font-size: 13px;
+  --pagination-fill: var(--color-white);
+  --pagination-color: #475669;
+  --pagination-border-radius: 2px;
+  --pagination-button-color: #99a9bf;
+  --pagination-button-disabled-color: #D3DCE6;
+  --pagination-button-size: 28px;
+  --pagination-button-disabled-color: #e4e4e4;
+  --pagination-button-disabled-fill: var(--color-white);
+  --pagination-border-color: #D3DCE6;
+  --pagination-hover-fill: var(--color-primary);
+  --pagination-hover-color: var(--color-white);
+
+  /* Popover
+ -------------------------- */
+  --popover-fill: #fff;
+  --popover-font-size: 12px;
+  --popover-border-color: #d3dce6;
+  --popover-arrow-size: 6px;
+  --popover-padding: 10px;
+  --popover-title-font-size: 13px;
+  --popover-title-color: #1f2d3d;
+
+  /* Tooltip
+   -------------------------- */
+  --tooltip-fill: #1f2d3d;
+  --tooltip-color: #fff;
+  --tooltip-font-size: 12px;
+  --tooltip-border-color: #1f2d3d;
+  --tooltip-arrow-size: 6px;
+  --tooltip-padding: 10px;
+
+  /* Tag
+   -------------------------- */
+    --tag-padding: 0 5px;
+    --tag-fill: #8492a6;
+    --tag-border: #8492a6;
+    --tag-color: #fff;
+    --tag-font-size: 12px;
+    --tag-border-radius: 4px;
+
+    --tag-gray-fill: #e5e9f2;
+    --tag-gray-border: #e5e9f2;
+    --tag-gray-color: #475669;
+
+    --tag-primary-fill: rgba(32,159,255,0.10);
+    --tag-primary-border: rgba(32,159,255,0.20);
+    --tag-primary-color: #20a0ff;
+
+    --tag-success-fill: rgba(18,206,102,0.10);
+    --tag-success-border: rgba(18,206,102,0.20);
+    --tag-success-color: #13ce66;
+
+    --tag-warning-fill: rgba(247,186,41,0.10);
+    --tag-warning-border: rgba(247,186,41,0.20);
+    --tag-warning-color: #f7ba2a;
+
+    --tag-danger-fill: rgba(255,73,73,0.10);
+    --tag-danger-border: rgba(255,73,73,0.20);
+    --tag-danger-color: #ff4949;
+
+  /* Dropdown
+   -------------------------- */
+    --dropdown-menu-box-shadow: 0 0 6px 0 rgba(0,0,0,.12), 0 2px 4px 0 rgba(0,0,0,.12);
+    --dropdown-menuItem-hover-fill: #e5e9f2;
+    --dropdown-menuItem-hover-color: #475669;
+}
diff --git a/packages/theme-default/src/core/dropdown.css b/packages/theme-default/src/core/dropdown.css
new file mode 100644
index 000000000..15a045db2
--- /dev/null
+++ b/packages/theme-default/src/core/dropdown.css
@@ -0,0 +1,45 @@
+@charset "UTF-8";
+@import "../common/var.css";
+@import "./option.css";
+
+@component-namespace element {
+
+  @b dropdown {
+    background-color: var(--dropdown-fill);
+    border: var(--dropdown-border);
+    border-radius: var(--dropdown-radius);
+    box-shadow: var(--dropdown-shadow);
+    left: 0;
+    list-style-type: none;
+    margin: -var(--dropdown-border-width);
+    margin-top: 5px;
+    min-width: calc(var(--input-width) + 4);
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    z-index: var(--index-normal);
+
+    @e empty {
+      color: var(--dropdown-option-empty-color);
+      font-size: var(--input-font-size);
+      padding: 7px;
+      text-align: center;
+    }
+
+    @e list {
+      margin: 0;
+      max-height: var(--cascader-height);
+      overflow: auto;
+      padding: 0;
+    }
+
+    @e option {
+      max-height: 250px;
+      overflow: auto;
+    }
+
+    &:empty {
+      display: none;
+    }
+  }
+}
diff --git a/packages/theme-default/src/core/input.css b/packages/theme-default/src/core/input.css
new file mode 100644
index 000000000..1630321ee
--- /dev/null
+++ b/packages/theme-default/src/core/input.css
@@ -0,0 +1,55 @@
+@charset "UTF-8";
+@import "../common/var.css";
+
+@component-namespace element-core {
+
+  @b input {
+    background-color: var(--input-fill);
+    border: var(--input-border);
+    border-radius: var(--input-border-radius);
+    box-sizing: border-box;
+    color: var(--input-color);
+    cursor: text;
+    display: inline-block;
+    font-size: var(--input-font-size);
+    min-height: var(--input-height);
+    min-width: var(--input-width);
+    padding: 2px;
+    position: relative;
+    vertical-align: middle;
+
+    @when disabled {
+      background-color: var(--input-fill-disabled);
+      border-color: inherit;
+      box-shadow: none;
+      color: var(--input-color-disabled);
+      cursor: not-allowed;
+    }
+
+    @when readonly {
+      cursor: pointer;
+    }
+
+    @when multiple {
+      cursor: text;
+    }
+
+    &:hover,
+    &.is-active {
+      border-color: var(--input-focus-border);
+      box-shadow: var(--input-shadow-hover);
+    }
+
+    @e original {
+      background-color: inherit;
+      border: none;
+      box-sizing: border-box;
+      cursor: inherit;
+      height: 100%;
+      line-height: 1.2;
+      outline: none;
+      padding: 5px 7px;
+      width: auto;
+    }
+  }
+}
diff --git a/packages/theme-default/src/core/option.css b/packages/theme-default/src/core/option.css
new file mode 100644
index 000000000..dde059657
--- /dev/null
+++ b/packages/theme-default/src/core/option.css
@@ -0,0 +1,72 @@
+@charset "UTF-8";
+@import "../common/var.css";
+
+@component-namespace element {
+
+  @b option {
+    box-sizing: border-box;
+    color: var(--dropdown-color);
+    cursor: pointer;
+    display: block;
+    font-size: var(--dropdown-font-size);
+    padding: 9px;
+
+    @e remark {
+      color: var(--dropdown-option-pinyin-color);
+      float: right;
+    }
+
+    @m arrow {
+
+      &:not(.is-last)::after {
+        border-left: 1px solid var(--dropdown-border-color);
+        border-top: 1px solid var(--dropdown-border-color);
+        content: " ";
+        height: 4px;
+        margin-top: 6px;
+        position: absolute;
+        right: 12px;
+        transform: rotate(135deg);
+        width: 4px;
+      }
+    }
+
+    @when disabled {
+      background-color: transparent;
+      color: var(--dropdown-option-color-disabled);
+      cursor: not-allowed;
+    }
+
+    &:hover,
+    &.is-hover {
+      background-color: var(--dropdown-option-fill-hover);
+      color: var(--dropdown-option-color-hover);
+    }
+
+    @when selected {
+      background-color: var(--dropdown-option-fill-active);
+      color: var(--dropdown-option-color-active);
+    }
+  }
+
+  @b optiongroup {
+    list-style: none;
+    padding-left: 0;
+
+    & .element-option {
+      padding-left: 21px;
+    }
+
+    @e title {
+      box-sizing: border-box;
+      color: var(--dropdown-group-color);
+      display: inline-block;
+      font-size: var(--dropdown-font-size);
+      padding: 8px;
+
+      &:hover {
+        background-color: inherit;
+      }
+    }
+  }
+}
diff --git a/packages/theme-default/src/core/tag.css b/packages/theme-default/src/core/tag.css
new file mode 100644
index 000000000..2fc4aabf5
--- /dev/null
+++ b/packages/theme-default/src/core/tag.css
@@ -0,0 +1,29 @@
+@charset "UTF-8";
+@import "../common/var.css";
+
+@component-namespace element-core {
+
+  @b tag {
+    background-color: var(--tag-fill);
+    border: 0;
+    border-radius: var(--tag-border-radius);
+    color: var(--tag-color);
+    height: 22px;
+    margin: 1px;
+    outline: 0;
+    padding: 3px 16px 3px 3px;
+    position: relative;
+
+    @e button {
+      color: var(--tag-close-color);
+      cursor: pointer;
+      line-height: 1;
+
+      /* 增大可点击面积 */
+      padding: 5px;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+}
diff --git a/packages/theme-default/src/date-picker.css b/packages/theme-default/src/date-picker.css
new file mode 100644
index 000000000..ed0a12d10
--- /dev/null
+++ b/packages/theme-default/src/date-picker.css
@@ -0,0 +1,8 @@
+@import "../../date-picker/src/css/date-table.css";
+@import "../../date-picker/src/css/month-table.css";
+@import "../../date-picker/src/css/year-table.css";
+@import "../../date-picker/src/css/time-spinner.css";
+@import "../../date-picker/src/css/picker.css";
+@import "../../date-picker/src/css/date-picker.css";
+@import "../../date-picker/src/css/date-range-picker.css";
+@import "../../date-picker/src/css/time-range-picker.css";
diff --git a/packages/theme-default/src/dialog.css b/packages/theme-default/src/dialog.css
new file mode 100644
index 000000000..ec4ad7c59
--- /dev/null
+++ b/packages/theme-default/src/dialog.css
@@ -0,0 +1,110 @@
+@charset "UTF-8";
+@import "./common/var.css";
+@import '../../dialog/node_modules/vue-popup/lib/popup.css';
+
+@component-namespace el {
+
+  @b dialog {
+    position: relative;
+    margin-left: auto;
+    margin-right: auto;
+    overflow: hidden;
+    background: #fff;
+    border-radius: 2px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    box-sizing: border-box;
+
+    @modifier tiny {
+      width: 30%;
+    }
+
+    @modifier small {
+      width: 50%;
+    }
+
+    @modifier large {
+      width: 90%;
+    }
+
+    @modifier full {
+      width: 100%;
+      top: 0;
+      height: 100%;
+      overflow: auto;
+    }
+
+    @e wrapper {
+      position: fixed 0 0 0 0;
+      overflow: auto;
+      margin: 0;
+    }
+
+    @e header {
+      padding: 20px 20px 0;
+    }
+
+    @e close {
+      cursor: pointer;
+      color: #C0CCDA;
+
+      &:hover {
+        color: var(--dialog-background-color);
+      }
+    }
+
+    @e title {
+      line-height: 1;
+      font-size: 16px;
+      font-weight: bold;
+      color: #1f2d3d;
+    }
+
+    @e body {
+      padding: 30px 20px;
+      color: #475669;
+      font-size: 14px;
+    }
+
+    @e headerbtn {
+      float: right;
+    }
+
+    & *[slot=footer] {
+      padding: 10px 20px 15px;
+      text-align: right;
+      width: 100%;
+      display: block;
+      box-sizing: border-box;
+    }
+  }
+
+  .dialog-fade-enter {
+    animation: dialog-fade-in .3s;
+  }
+
+  .dialog-fade-leave {
+    animation: dialog-fade-out .3s;
+  }
+
+  @keyframes dialog-fade-in {
+    0% {
+      transform: translate3d(0, -20px, 0);
+      opacity: 0;
+    }
+    100% {
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes dialog-fade-out {
+    0% {
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+    100% {
+      transform: translate3d(0, -20px, 0);
+      opacity: 0;
+    }
+  }
+}
diff --git a/packages/theme-default/src/dropdown.css b/packages/theme-default/src/dropdown.css
new file mode 100644
index 000000000..d4be874c6
--- /dev/null
+++ b/packages/theme-default/src/dropdown.css
@@ -0,0 +1,65 @@
+@charset "UTF-8";
+@import "./common/var.css";
+@import "./button.css";
+
+@component-namespace el {
+  @b dropdown {
+    display: inline-block;
+    position: relative;
+    color: #475669;
+    font-size: var(--font-size-base);
+
+    .el-button-group {
+      display: block;
+    }
+
+    @e menu{
+      margin: 5px 0;
+      background-color: #fff;
+      border: 1px solid #D3DCE6;
+      box-shadow: var(--dropdown-menu-box-shadow);
+      padding: 6px 0;
+      z-index: 10;
+      position: absolute;
+      top: 0;
+      left: 0;
+      min-width: 100px;
+
+      & li {
+        list-style: none;
+        line-height: 36px;
+        padding: 0 10px;
+        margin: 0;
+        cursor: pointer;
+
+        &:hover {
+          background-color: var(--dropdown-menuItem-hover-fill);
+          color: var(--dropdown-menuItem-hover-color);
+        }
+        &.divider {
+          margin-top: 6px;
+          border-top: 1px solid #D3DCE6;
+        }
+        &.divider:last-child {
+          margin-bottom: -6px;
+        }
+      }
+    }
+    @e icon-button {
+      padding: * 5px;
+
+      & .el-dropdown__icon {
+        padding-left: 0;
+      }
+    }
+    @e icon {
+      padding-left: 5px;
+      transform: scale(.8, .8);
+    }
+    @m text {
+      .el-button-text {
+        padding: 0;
+      }
+    }
+  }
+}
diff --git a/packages/theme-default/src/fonts/element-icons.svg b/packages/theme-default/src/fonts/element-icons.svg
new file mode 100755
index 000000000..5a3ec43c2
--- /dev/null
+++ b/packages/theme-default/src/fonts/element-icons.svg
@@ -0,0 +1,47 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="element-icons" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="share" d="M877.398 223.321c18.001-7.641 33.787-18.278 47.4-31.925 13.594-13.666 24.187-29.515 31.8-47.586 7.595-18.072 11.4-37.553 11.4-58.428 0-20.894-3.806-40.357-11.4-58.428-7.612-18.072-18.206-33.939-31.8-47.586-13.613-13.666-29.4-24.301-47.4-31.925-18.001-7.641-37.406-11.445-58.2-11.445-20.813 0-40.2 3.802-58.2 11.445-18.001 7.625-33.806 18.258-47.4 31.925-13.613 13.647-24.206 29.515-31.8 47.586-7.612 18.072-11.4 37.534-11.4 58.428v9.035c0 2.806 0.395 5.421 1.201 7.831 0 3.2 0.187 6.211 0.6 9.035 0.395 2.806 0.994 5.421 1.8 7.831l-364.799 213.233c-7.2-6.438-14.606-12.254-22.2-17.468-7.612-5.232-15.806-9.45-24.6-12.649-8.813-4.029-18.001-6.832-27.601-8.434-9.6-1.619-19.611-2.409-30.001-2.409-20.813 0-40.613 4.009-59.4 12.047-18.805 8.018-35.006 18.862-48.6 32.528-14.4 14.456-25.613 30.909-33.6 49.394-8.006 18.466-12 38.55-12 60.235 0 20.875 3.994 40.753 12 59.633 7.987 18.862 19.2 35.124 33.6 48.79 13.593 14.456 29.793 25.694 48.6 33.732 18.788 8.018 38.587 12.047 59.4 12.047 10.387 0 20.401-1.017 30.001-3.012 9.6-2.013 18.788-5.026 27.601-9.035 8.794-3.219 16.987-7.435 24.6-12.649 7.595-5.232 15-11.050 22.2-17.468l361.2 212.027c-0.806 2.409-1.406 5.215-1.8 8.434-0.412 3.2-1.013 6.025-1.8 8.434 0 3.2-0.206 6.419-0.6 9.638-0.412 3.2-0.6 6.419-0.6 9.638 0 20.875 3.994 40.753 12 59.633 7.987 18.862 19.2 35.124 33.6 48.79 13.594 13.647 29.793 24.696 48.6 33.129 18.788 8.434 38.587 12.649 59.4 12.649 20.794 0 40.593-4.216 59.4-12.649 18.788-8.434 34.987-19.482 48.6-33.129 14.4-13.666 25.594-29.93 33.6-48.79 7.987-18.879 12-38.758 12-59.633 0-21.685-4.013-41.977-12-60.837-8.006-18.879-19.2-35.144-33.6-48.79-13.613-13.666-29.813-24.507-48.6-32.528-18.805-8.038-38.606-12.047-59.4-12.047-10.406 0-20.401 0.79-30.001 2.409-9.6 1.6-18.805 4.406-27.601 8.434-8.813 3.2-17.006 7.416-24.6 12.649-7.612 5.215-15 11.030-22.2 17.468l-361.197-210.824c0.787-3.219 1.387-6.231 1.8-9.035 0.395-2.823 0.994-5.836 1.8-9.035 0-3.219 0.187-6.231 0.6-9.035 0.395-2.823 0.6-5.836 0.6-9.035 0-3.219-0.206-6.438-0.6-9.638-0.412-3.219-0.6-6.438-0.6-9.638-0.806-2.409-1.406-5.232-1.8-8.434-0.412-3.219-1.013-6.025-1.8-8.434l364.799-213.233c6.394 5.609 13.593 10.844 21.6 15.662 7.987 4.819 15.994 9.224 24 13.253 8.793 3.2 17.794 5.609 27 7.228 9.188 1.599 18.6 2.408 28.2 2.408 20.792-0.001 40.199-3.823 58.199-11.446z" />
+<glyph unicode="&#xe901;" glyph-name="setting" d="M1020.132 517.658c-3.985 21.83-25.433 44.119-47.819 48.945l-16.643 3.791c-39.146 11.604-73.838 36.996-95.989 74.336-22.034 37.57-27.308 80.31-17.698 119.374v0l5.274 15.396c6.68 21.255-1.992 50.553-19.456 65.145 0 0-15.705 12.983-59.773 37.915-44.185 24.817-63.172 31.711-63.172 31.711-21.448 7.698-51.569 0.345-67.274-15.97l-11.603-12.179c-29.652-27.574-69.618-44.234-113.804-44.234s-84.503 16.889-114.155 44.579l-11.251 11.834c-15.471 16.315-45.709 23.553-67.274 15.97 0 0-19.221-6.894-63.407-31.711-44.185-25.162-59.656-38.145-59.656-38.145-17.463-14.362-26.136-43.43-19.456-64.915l4.805-15.511c9.376-39.179 4.454-81.689-17.698-119.259s-57.195-63.191-96.575-74.566l-16.057-3.562c-22.034-4.94-43.717-27-47.819-48.945 0 0-3.633-19.647-3.633-69.625s3.633-69.625 3.633-69.625c3.985-22.060 25.433-44.119 47.819-48.945l15.705-3.562c39.38-11.374 74.658-36.996 96.692-74.796 22.034-37.57 27.308-80.31 17.698-119.374v0l-4.571-15.166c-6.68-21.255 1.992-50.553 19.456-65.145 0 0 15.705-12.983 59.773-37.915 44.185-24.932 63.172-31.711 63.172-31.711 21.448-7.698 51.569-0.345 67.274 15.97l11.017 11.604c29.887 27.689 70.087 44.694 114.39 44.694s84.738-17.119 114.39-44.808v0l11.017-11.604c15.471-16.315 45.709-23.553 67.274-15.97 0 0 19.221 6.894 63.407 31.711 44.185 24.932 59.656 37.915 59.656 37.915 17.463 14.362 26.136 43.659 19.456 65.145l-4.805 15.74c-9.376 38.949-4.454 81.459 17.698 118.8 22.034 37.57 57.429 63.306 96.692 74.796v0l15.705 3.562c22.034 4.94 43.717 27 47.819 48.945 0 0 3.633 19.647 3.633 69.625-0.234 49.979-3.868 69.74-3.868 69.74v0 0 0zM512.176 247.888c-112.632 0-204.167 89.502-204.167 200.144 0 110.413 91.301 199.914 204.167 199.914 112.632 0 204.167-89.502 204.167-200.144-0.234-110.413-91.535-199.914-204.167-199.914v0 0 0z" />
+<glyph unicode="&#xe902;" glyph-name="circle-cross" d="M512-64c-70.564 0-137.025 13.333-199.385 40s-116.718 63.179-163.077 109.538c-46.359 46.359-82.872 100.718-109.538 163.077s-40 128.82-40 199.385c0 70.564 13.333 137.025 40 199.385s63.179 116.718 109.538 163.077c46.359 46.359 100.718 82.872 163.077 109.539s128.82 40 199.385 40c70.564 0 137.025-13.333 199.385-40s116.718-63.179 163.077-109.539c46.359-46.359 82.872-100.718 109.539-163.077s40-128.82 40-199.385c0-70.564-13.333-137.025-40-199.385s-63.179-116.718-109.539-163.077c-46.359-46.359-100.718-82.872-163.077-109.538s-128.82-40-199.385-40v0zM747.077 596.923c4.923 4.923 7.385 10.872 7.385 17.846s-2.461 12.923-7.385 17.846l-52.923 51.692c-4.923 4.923-10.667 7.385-17.231 7.385s-12.308-2.462-17.231-7.385l-147.692-147.692-148.923 147.692c-4.923 4.923-10.667 7.385-17.231 7.385s-12.308-2.462-17.231-7.385l-52.923-51.692c-4.103-4.923-6.154-10.872-6.154-17.846s2.051-12.923 6.154-17.846l148.923-147.692-148.923-147.692c-4.103-4.923-6.154-10.872-6.154-17.846s2.051-12.923 6.154-17.846l52.923-51.692c4.923-4.923 10.667-7.385 17.231-7.385s12.308 2.462 17.231 7.385l148.923 147.692 147.692-147.692c4.923-4.923 10.667-7.385 17.231-7.385s12.308 2.462 17.231 7.385l52.923 51.692c4.923 4.923 7.385 10.872 7.385 17.846s-2.461 12.923-7.385 17.846l-148.923 147.692 148.923 147.692z" />
+<glyph unicode="&#xe903;" glyph-name="warning" d="M512 960c-70.564 0-137.025-13.333-199.385-40s-116.718-63.179-163.077-109.539c-46.359-46.359-82.872-100.718-109.538-163.077s-40-128.82-40-199.385c0-70.564 13.333-137.025 40-199.385s63.179-116.718 109.538-163.077c46.359-46.359 100.718-82.872 163.077-109.538s128.82-40 199.385-40c70.564 0 137.025 13.333 199.385 40s116.718 63.179 163.077 109.538c46.359 46.359 82.872 100.718 109.539 163.077s40 128.82 40 199.385c0 70.564-13.333 137.025-40 199.385s-63.179 116.718-109.539 163.077c-46.359 46.359-100.718 82.872-163.077 109.539s-128.82 40-199.385 40v0zM512 157.538c-16.41 0-30.359 5.744-41.846 17.231s-17.231 25.436-17.231 41.846c0 16.41 5.744 30.359 17.231 41.846s25.436 17.231 41.846 17.231c16.41 0 30.359-5.744 41.846-17.231s17.231-25.436 17.231-41.846c0-16.41-5.744-30.359-17.231-41.846s-25.436-17.231-41.846-17.231v0zM571.077 413.538c0-16.41-5.744-30.359-17.231-41.846s-25.436-17.231-41.846-17.231c-16.41 0-30.359 5.744-41.846 17.231s-17.231 25.436-17.231 41.846v275.692c0 16.41 5.744 30.359 17.231 41.846s25.436 17.231 41.846 17.231c16.41 0 30.359-5.744 41.846-17.231s17.231-25.436 17.231-41.846v-275.692z" />
+<glyph unicode="&#xe904;" glyph-name="information" d="M512-64c-70.564 0-137.025 13.333-199.385 40s-116.718 63.179-163.077 109.539c-46.359 46.359-82.872 100.718-109.538 163.077s-40 128.82-40 199.385c0 70.564 13.333 137.025 40 199.385s63.179 116.718 109.538 163.077c46.359 46.359 100.718 82.872 163.077 109.538s128.82 40 199.385 40c70.564 0 137.025-13.333 199.385-40s116.718-63.179 163.077-109.538c46.359-46.359 82.872-100.718 109.539-163.077s40-128.82 40-199.385c0-70.564-13.333-137.025-40-199.385s-63.179-116.718-109.539-163.077c-46.359-46.359-100.718-82.872-163.077-109.539s-128.82-40-199.385-40v0zM512 740.571c-20.318 0-37.587-7.111-51.809-21.333s-21.333-31.492-21.333-51.809c0-20.318 7.111-37.587 21.333-51.809s31.492-21.333 51.809-21.333c20.318 0 37.587 7.111 51.809 21.333s21.333 31.492 21.333 51.809c0 20.318-7.111 37.587-21.333 51.809s-31.492 21.333-51.809 21.333v0zM571.077 465.125c0 15.56-5.744 28.787-17.231 39.679s-25.436 16.338-41.846 16.338c-16.41 0-30.359-5.446-41.846-16.338s-17.231-24.119-17.231-39.679v-261.415c0-15.56 5.744-28.787 17.231-39.679s25.436-16.338 41.846-16.338c16.41 0 30.359 5.446 41.846 16.338s17.231 24.119 17.231 39.679v261.415z" />
+<glyph unicode="&#xe905;" glyph-name="circle-check" d="M512 960c-70.564 0-137.025-13.333-199.385-40s-116.718-63.179-163.077-109.539c-46.359-46.359-82.872-100.718-109.538-163.077s-40-128.82-40-199.385c0-70.564 13.333-137.025 40-199.385s63.179-116.718 109.538-163.077c46.359-46.359 100.718-82.872 163.077-109.538s128.82-40 199.385-40c70.564 0 137.025 13.333 199.385 40s116.718 63.179 163.077 109.538c46.359 46.359 82.872 100.718 109.539 163.077s40 128.82 40 199.385c0 70.564-13.333 137.025-40 199.385s-63.179 116.718-109.539 163.077c-46.359 46.359-100.718 82.872-163.077 109.539s-128.82 40-199.385 40v0zM797.538 561.231l-372.923-372.923c-4.923-4.923-10.667-7.385-17.231-7.385s-12.308 2.461-17.231 7.385l-7.385 7.385-205.539 206.769c-4.923 4.923-7.385 10.667-7.385 17.231s2.462 12.308 7.385 17.231l50.461 50.462c4.923 4.923 10.667 7.385 17.231 7.385s12.308-2.462 17.231-7.385l145.231-146.461 305.231 305.231c4.923 4.923 10.667 7.384 17.231 7.384s12.308-2.461 17.231-7.384l50.461-50.462c4.923-4.923 7.385-10.667 7.385-17.231s-2.462-12.308-7.385-17.231v0z" />
+<glyph unicode="&#xe906;" glyph-name="delete" d="M641.531 770.219v125.781c0 35.2-23.953 64-56.445 64h-136.469c-32.492 0-66.070-28.8-66.070-64v-125.781h-203.347c7.877 0-51.2-12.885-51.2-66.219 0-35.2 26.585-64 59.077-64h649.846c32.492 0 59.077 28.8 59.077 64 0 53.333-59.077 66.219-59.077 66.219h-195.392zM448 768v64c0 44.578 28.406 64 64 64 36.406 0 64-19.656 64-64v-64h-128zM320-64h384c70.4 0 128 57.6 128 128v512h-640v-512c0-70.4 57.6-128 128-128zM643.765 419.556c0 15.644 11.859 28.444 26.353 28.444s26.353-12.8 26.353-28.444v-341.333c0-15.644-11.859-28.444-26.353-28.444s-26.353 12.8-26.353 28.444v341.333zM485.647 419.556c0 15.644 11.859 28.444 26.353 28.444s26.353-12.8 26.353-28.444v-341.333c0-15.644-11.859-28.444-26.353-28.444s-26.353 12.8-26.353 28.444v341.333zM327.529 419.556c0 15.644 11.859 28.444 26.353 28.444s26.353-12.8 26.353-28.444v-341.333c0-15.644-11.859-28.444-26.353-28.444s-26.353 12.8-26.353 28.444v341.333z" />
+<glyph unicode="&#xe907;" glyph-name="d-arrow-left" d="M5.61 424.22c-10.037 24.359-6.751 54.162 11.024 73.751l402.97 444.579c21.974 24.229 56.615 23.078 77.424-2.515 20.77-25.631 19.818-66.037-2.156-90.31l-361.568-398.974 360.142-404.895c21.757-24.487 22.415-64.894 1.427-90.31-10.733-13.033-25.076-19.545-39.425-19.545-13.686 0-27.376 5.958-37.998 17.881l-399.317 448.926c-0.768 0.889-1.059 2.126-1.827 3.059-0.586 0.645-1.203 1.111-1.787 1.794-3.104 3.788-4.747 8.428-6.863 12.774-0.583 1.32-1.533 2.424-2.044 3.787zM517.61 424.22c-10.037 24.359-6.751 54.162 11.024 73.751l402.97 444.579c21.974 24.229 56.615 23.078 77.424-2.515 20.77-25.631 19.818-66.037-2.156-90.31l-361.568-398.974 360.142-404.895c21.757-24.487 22.415-64.894 1.427-90.31-10.733-13.033-25.076-19.545-39.425-19.545-13.686 0-27.376 5.958-37.998 17.881l-399.317 448.926c-0.768 0.889-1.059 2.126-1.827 3.059-0.586 0.645-1.203 1.111-1.787 1.794-3.104 3.788-4.747 8.428-6.863 12.774-0.583 1.32-1.533 2.424-2.044 3.787z" />
+<glyph unicode="&#xe908;" glyph-name="d-arrow-right" d="M1018.39 424.22c10.037 24.359 6.751 54.162-11.024 73.751l-402.97 444.579c-21.974 24.229-56.615 23.078-77.424-2.515-20.77-25.631-19.818-66.037 2.156-90.31l361.568-398.974-360.142-404.895c-21.757-24.487-22.415-64.894-1.427-90.31 10.733-13.033 25.076-19.545 39.425-19.545 13.686 0 27.376 5.958 37.998 17.881l399.317 448.926c0.768 0.889 1.059 2.126 1.827 3.059 0.586 0.645 1.203 1.111 1.787 1.794 3.104 3.788 4.747 8.428 6.863 12.774 0.583 1.32 1.533 2.424 2.044 3.787zM506.39 424.22c10.037 24.359 6.751 54.162-11.024 73.751l-402.97 444.579c-21.974 24.229-56.615 23.078-77.424-2.515-20.77-25.631-19.818-66.037 2.156-90.31l361.568-398.974-360.142-404.895c-21.757-24.487-22.415-64.894-1.427-90.31 10.733-13.033 25.076-19.545 39.425-19.545 13.686 0 27.376 5.958 37.998 17.881l399.317 448.926c0.768 0.889 1.059 2.126 1.827 3.059 0.586 0.645 1.203 1.111 1.787 1.794 3.104 3.788 4.747 8.428 6.863 12.774 0.583 1.32 1.533 2.424 2.044 3.787z" />
+<glyph unicode="&#xe909;" glyph-name="picture" d="M146.714 874.667c-81.028 0-146.714-65.543-146.714-146.693v-559.947c0-81.016 65.614-146.693 146.714-146.693h730.572c81.028 0 146.714 65.543 146.714 146.693v559.947c0 81.016-65.614 146.693-146.714 146.693h-730.572zM743.124 494.961c0 0-11.661 22.216-52.655 22.216-46.512 0-60.496-21.529-60.496-21.529l-175.921-278.521c0 0-9.57-18.661-33.046-18.661-24.574 0-36.311 18.661-36.311 18.661l-92.512 108.458c0 0-23.705 32.196-54.506 32.196-30.678 0-56.159-35.626-56.159-35.626l-71.803-87.488v460.294c0 40.339 32.537 73.039 72.819 73.039h658.933c40.217 0 72.819-32.661 72.819-73.449v-424.329l-171.162 224.739zM475.429 554.688c0-58.942-49.109-106.688-109.697-106.688-60.586 0-109.732 47.784-109.732 106.688 0 58.863 49.147 106.646 109.732 106.646 60.587-0.036 109.697-47.782 109.697-106.646v0 0z" />
+<glyph unicode="&#xe90a;" glyph-name="cloud" d="M565.493 64l213.97 0.114c135.74 4.060 244.537 115.924 244.537 253.326 0 139.971-112.904 253.44-252.179 253.44-2.596 0-5.182-0.039-7.759-0.118 0.078 2.59 0.117 5.189 0.117 7.798 0 139.971-112.904 253.44-252.179 253.44s-252.179-113.469-252.179-253.44c0-2.609 0.039-5.208 0.117-7.798-2.577 0.078-5.163 0.118-7.759 0.118-139.275 0-252.179-113.469-252.179-253.44 0-137.402 108.798-249.266 244.537-253.326v-0.114h229.254v171.675h-90.21c-25.518 0-34.812 17.285-20.819 38.607l140.064 213.426c8.986 13.693 24.345 14.152 33.632 0l140.064-213.426c13.938-21.238 4.672-38.607-20.819-38.607h-90.21v-171.675z" />
+<glyph unicode="&#xe90b;" glyph-name="menu" d="M358.4 410.764h-244.364c-62.836 0-114.036-51.2-114.036-114.036v-244.364c0-65.164 51.2-116.364 114.036-116.364h244.364c62.836 0 114.036 51.2 114.036 114.036v244.364c2.327 65.164-48.873 116.364-114.036 116.364v0zM358.4 960h-244.364c-62.836 0-114.036-51.2-114.036-114.036v-244.364c0-62.836 51.2-114.036 114.036-114.036h244.364c62.836 0 114.036 51.2 114.036 114.036v244.364c2.327 62.836-48.873 114.036-114.036 114.036v0zM909.964 410.764h-244.364c-62.836 0-114.036-51.2-114.036-114.036v-244.364c0-62.836 51.2-114.036 114.036-114.036h244.364c62.836 0 114.036 51.2 114.036 114.036v242.036c0 65.164-51.2 116.364-114.036 116.364v0zM909.964 960h-244.364c-62.836 0-114.036-51.2-114.036-114.036v-244.364c0-62.836 51.2-114.036 114.036-114.036h244.364c62.836 0 114.036 51.2 114.036 114.036v244.364c0 62.836-51.2 114.036-114.036 114.036v0z" />
+<glyph unicode="&#xe90c;" glyph-name="time" d="M512-64c-282.781 0-512 229.275-512 512.016s229.219 511.984 512 511.984c282.75 0 512-229.243 512-511.984s-229.25-512.016-512-512.016v0zM512 850.286c-222.175 0-402.286-180.104-402.286-402.271s180.11-402.301 402.286-402.301c222.175 0 402.286 180.134 402.286 402.301s-180.109 402.271-402.286 402.271v0zM512.815 380.429c-26.499 0-48 21.5-48 47.999v228.161c0 26.499 21.501 47.999 48 47.999s48-21.5 48-47.999v-180.163h160c26.499 0 48-21.5 48-47.999s-21.499-47.999-48-47.999h-208z" />
+<glyph unicode="&#xe90d;" glyph-name="circle-close" d="M521.974 493.004l202.2 202.2c14.296 14.296 37.88 13.889 51.744 0.025 14.282-14.282 14.298-37.422-0.025-51.744l-202.2-202.2 202.2-202.2c14.296-14.296 13.889-37.88 0.025-51.744-14.282-14.282-37.422-14.298-51.744 0.025l-202.2 202.2-202.2-202.2c-14.296-14.296-37.88-13.889-51.744-0.025-14.282 14.282-14.298 37.422 0.025 51.744l202.2 202.2-202.2 202.2c-14.296 14.296-13.889 37.88-0.025 51.744 14.282 14.282 37.422 14.298 51.744-0.025l202.2-202.2zM512-64c282.77 0 512 229.23 512 512s-229.23 512-512 512c-282.77 0-512-229.23-512-512s229.23-512 512-512z" />
+<glyph unicode="&#xe90e;" glyph-name="search" d="M591.269 337.673v0c99.974 99.974 99.974 262.064 0 362.039s-262.064 99.974-362.039 0c-99.974-99.974-99.974-262.064 0-362.039s262.064-99.974 362.039 0v0zM649.951 218.651c-150.771-120.755-371.467-111.251-511.231 28.513-149.961 149.961-149.961 393.097 0 543.058s393.097 149.961 543.058 0c129.223-129.223 147.093-327.631 53.611-475.99l202.266-202.266c25.307-25.307 25.735-65.909 0.567-91.076-24.994-24.994-65.050-25.46-91.076 0.567l-197.195 197.195z" />
+<glyph unicode="&#xe90f;" glyph-name="arrow-down" d="M488.22 197.61c24.359-10.037 54.162-6.751 73.751 11.024l444.579 402.97c24.229 21.974 23.078 56.615-2.515 77.424-25.631 20.77-66.037 19.818-90.31-2.156l-398.974-361.568-404.895 360.142c-24.487 21.757-64.894 22.415-90.31 1.427-13.033-10.733-19.545-25.076-19.545-39.425 0-13.686 5.958-27.376 17.881-37.998l448.926-399.317c0.889-0.768 2.126-1.059 3.059-1.827 0.645-0.586 1.111-1.203 1.794-1.787 3.788-3.104 8.428-4.747 12.774-6.863 1.32-0.583 2.424-1.533 3.787-2.044z" />
+<glyph unicode="&#xe910;" glyph-name="arrow-up" d="M535.78 698.39c-24.359 10.037-54.162 6.751-73.751-11.024l-444.579-402.97c-24.229-21.974-23.078-56.615 2.515-77.424 25.631-20.77 66.037-19.818 90.31 2.156l398.974 361.568 404.895-360.142c24.487-21.757 64.894-22.415 90.31-1.427 13.033 10.733 19.545 25.076 19.545 39.425 0 13.686-5.958 27.376-17.881 37.998l-448.926 399.317c-0.889 0.768-2.126 1.059-3.059 1.827-0.645 0.586-1.111 1.203-1.794 1.787-3.788 3.104-8.428 4.747-12.774 6.863-1.32 0.583-2.424 1.533-3.787 2.044z" />
+<glyph unicode="&#xe911;" glyph-name="arrow-right" d="M762.39 424.22c10.037 24.359 6.751 54.162-11.024 73.751l-402.97 444.579c-21.974 24.229-56.615 23.078-77.424-2.515-20.77-25.631-19.818-66.037 2.156-90.31l361.568-398.974-360.142-404.895c-21.757-24.487-22.415-64.894-1.427-90.31 10.733-13.033 25.076-19.545 39.425-19.545 13.686 0 27.376 5.958 37.998 17.881l399.317 448.926c0.768 0.889 1.059 2.126 1.827 3.059 0.586 0.645 1.203 1.111 1.787 1.794 3.104 3.788 4.747 8.428 6.863 12.774 0.583 1.32 1.533 2.424 2.044 3.787z" />
+<glyph unicode="&#xe912;" glyph-name="arrow-left" d="M261.61 424.22c-10.037 24.359-6.751 54.162 11.024 73.751l402.97 444.579c21.974 24.229 56.615 23.078 77.424-2.515 20.77-25.631 19.818-66.037-2.156-90.31l-361.568-398.974 360.142-404.895c21.757-24.487 22.415-64.894 1.427-90.31-10.733-13.033-25.076-19.545-39.425-19.545-13.686 0-27.376 5.958-37.998 17.881l-399.317 448.926c-0.768 0.889-1.059 2.126-1.827 3.059-0.586 0.645-1.203 1.111-1.787 1.794-3.104 3.788-4.747 8.428-6.863 12.774-0.583 1.32-1.533 2.424-2.044 3.787z" />
+<glyph unicode="&#xe913;" glyph-name="close" d="M512 548.055l-391.169 391.169c-27.707 27.707-72.473 27.677-100.103 0.048-26.822-26.822-27.608-72.447 0.048-100.103l391.169-391.169-391.169-391.169c-27.708-27.707-27.677-72.474-0.048-100.103 26.821-26.822 72.447-27.608 100.103 0.048l391.169 391.169 391.169-391.169c27.707-27.707 72.473-27.677 100.103-0.048 26.822 26.822 27.608 72.447-0.048 100.103l-391.169 391.169 391.169 391.169c27.708 27.707 27.677 72.474 0.048 100.103-26.821 26.822-72.447 27.608-100.103-0.048l-391.169-391.169z" />
+<glyph unicode="&#xe914;" glyph-name="document" d="M440.889 960l-355.556-365.714v-519.027c0-76.594 62.654-139.259 139.227-139.259h574.877c76.574 0 139.229 62.665 139.229 139.259v745.478c0 76.614-62.654 139.263-139.229 139.263h-358.549zM832 117.115c0-39.433-32.618-71.4-70.936-71.4h-498.127c-39.177 0-70.936 31.194-70.936 71.176v404.252h248.982c39.222 0 71.018 31.56 71.018 71.419v257.724h248.982c39.222 0 71.018-32.537 71.018-71.4v-661.771z" />
+<glyph unicode="&#xe915;" glyph-name="d-caret" d="M440.191-34.583c34.080-32.082 89.298-32.115 123.414 0l301.306 283.64c68.598 64.576 47.744 116.924-45.528 116.924h-634.971c-93.742 0-113.844-52.613-45.528-116.924l301.306-283.64zM440.191 937.212c34.080 32.082 89.298 32.115 123.414 0l301.306-283.64c68.598-64.576 47.744-116.924-45.528-116.924h-634.971c-93.742 0-113.844 52.613-45.528 116.924l301.306 283.64z" />
+<glyph unicode="&#xe916;" glyph-name="date" d="M713.143 846.222h-402.286v113.778h-150.857v-113.778h-50.441c-36.944 0-66.892-30.285-66.892-66.931v-776.361c0-36.965 29.122-66.931 66.005-66.931h806.656c36.454 0 66.005 30.285 66.005 66.931v776.361c0 36.965-29.608 66.931-66.892 66.931h-50.441v113.778h-150.857v-113.778zM160 45.714v572.952h704v-572.952h-704zM554.667 362.667v-256h256v256h-256z" />
+<glyph unicode="&#xe917;" glyph-name="message" d="M896.005 874.667h-768.005c-50.498 0-128.001-42.181-128.001-93.344v-18.512c0 0 432.753-371.093 512-371.093 79.257 0 512 369.92 512 369.92v19.685c0 51.163-77.497 93.344-127.995 93.344v0zM0 613.104v-526.128c0 0 47.504-65.643 128.001-65.643h768.005c76.498 0 127.995 65.643 127.995 65.643v527.786c0 0-364.175-333.38-512-333.38-146.284 0-512 331.722-512 331.722v0z" />
+<glyph unicode="&#xe918;" glyph-name="loading" d="M0 448c0-282.77 229.23-512 512-512s512 229.23 512 512c0 282.77-229.23 512-512 512-21.752 0-39.385-17.633-39.385-39.385s17.633-39.385 39.385-39.385c239.267 0 433.231-193.964 433.231-433.231s-193.964-433.231-433.231-433.231c-239.267 0-433.231 193.964-433.231 433.231 0 21.752-17.633 39.385-39.385 39.385s-39.385-17.633-39.385-39.385v0z" />
+<glyph unicode="&#xe919;" glyph-name="more" d="M118.154 329.846c65.255 0 118.154 52.899 118.154 118.154s-52.899 118.154-118.154 118.154c-65.255 0-118.154-52.899-118.154-118.154s52.899-118.154 118.154-118.154zM512 329.846c65.255 0 118.154 52.899 118.154 118.154s-52.899 118.154-118.154 118.154c-65.255 0-118.154-52.899-118.154-118.154s52.899-118.154 118.154-118.154zM905.846 329.846c65.255 0 118.154 52.899 118.154 118.154s-52.899 118.154-118.154 118.154c-65.255 0-118.154-52.899-118.154-118.154s52.899-118.154 118.154-118.154z" />
+<glyph unicode="&#xe91a;" glyph-name="plus" d="M438.857 521.143h-365.214c-40.733 0-73.644-32.747-73.644-73.143 0-40.677 32.971-73.143 73.644-73.143h365.214v-365.214c0-40.733 32.747-73.644 73.143-73.644 40.677 0 73.143 32.971 73.143 73.644v365.214h365.214c40.733 0 73.644 32.747 73.644 73.143 0 40.677-32.971 73.143-73.644 73.143h-365.214v365.214c0 40.733-32.747 73.644-73.143 73.644-40.677 0-73.143-32.971-73.143-73.644v-365.214z" />
+<glyph unicode="&#xe91b;" glyph-name="caret-left" d="M293.836 356.5c-36.187 37.19-35.83 97.855 0 134.678l357.276 367.178c71.513 73.495 129.486 49.602 129.486-53.106v-762.822c0-102.825-58.060-126.512-129.486-53.106l-357.276 367.178z" />
+<glyph unicode="&#xe91c;" glyph-name="caret-right" d="M753.591 356.5c36.187 37.19 35.83 97.855 0 134.678l-357.276 367.178c-71.513 73.495-129.486 49.602-129.486-53.106v-762.822c0-102.825 58.060-126.512 129.486-53.106l357.276 367.178z" />
+<glyph unicode="&#xe91d;" glyph-name="caret-bottom" d="M409.826 240.51c37.19-36.187 97.855-35.83 134.678 0l367.178 357.276c73.495 71.513 49.602 129.486-53.106 129.486h-762.822c-102.825 0-126.512-58.060-53.106-129.486l367.178-357.276z" />
+<glyph unicode="&#xe91e;" glyph-name="edit" d="M84.186 243.909l-84.186-307.909 306.998 85.375 484.852 484.209-225.523 219.804-482.141-481.48zM755.070 913.917l-120.787-120.643 226.275-219.096 117.282 117.171c61.546 61.477 61.546 161.098 0 222.569-61.532 61.443-161.309 61.443-222.77 0z" />
+<glyph unicode="&#xe91f;" glyph-name="caret-top" d="M409.826 700.266c37.19 36.187 97.855 35.83 134.678 0l367.178-357.276c73.495-71.513 49.602-129.486-53.106-129.486h-762.822c-102.825 0-126.512 58.060-53.106 129.486l367.178 357.276z" />
+<glyph unicode="&#xe920;" glyph-name="check" d="M361.151 322.144l482.718 482.718 120.68-120.68-603.398-603.398-301.699 301.699 120.68 120.68 181.019-181.019z" />
+<glyph unicode="&#xe921;" glyph-name="minus" d="M78.769 526.769h866.462c43.503 0 78.769-35.266 78.769-78.769s-35.266-78.769-78.769-78.769h-866.462c-43.503 0-78.769 35.266-78.769 78.769s35.266 78.769 78.769 78.769z" />
+<glyph unicode="&#xe922;" glyph-name="truck" d="M794.624 593.76c-5.952 8.896-15.936 14.24-26.624 14.24h-32c-17.696 0-32-14.304-32-32v-192c0-17.696 14.304-32 32-32h128c17.696 0 32 14.304 32 32v48c0 6.304-1.888 12.512-5.376 17.76l-96 144zM864 384h-128v192h32l96-144v-48zM1007.872 469.248l-128 192c-17.856 26.784-47.744 42.752-79.872 42.752h-128v64c0 52.928-43.072 96-96 96h-480c-52.928 0-96-43.072-96-96v-352c0-52.928 43.072-96 96-96v0-96c0-52.928 43.072-96 96-96h36.544c14.304-55.072 64-96 123.488-96 59.424 0 109.12 40.928 123.424 96h169.024c14.304-55.072 64-96 123.488-96 59.424 0 109.12 40.928 123.424 96h36.608c52.928 0 96 43.072 96 96v192c0 19.008-5.568 37.44-16.128 53.248zM96 384c-17.664 0-32 14.304-32 32v352c0 17.696 14.336 32 32 32h480c17.696 0 32-14.304 32-32v-352c0-17.696-14.304-32-32-32h-480zM352.032 96c-35.36 0-64 28.672-64 64s28.64 64 64 64c35.328 0 64-28.672 64-64s-28.704-64-64-64zM768 96c-35.36 0-64 28.672-64 64s28.64 64 64 64c35.328 0 64-28.672 64-64s-28.672-64-64-64zM960 224c0-17.696-14.304-32-32-32h-36.576c-14.304 55.072-64 96-123.424 96-59.488 0-109.184-40.928-123.488-96h-169.024c-14.304 55.072-64 96-123.424 96-59.488 0-109.184-40.928-123.488-96h-36.576c-17.664 0-32 14.304-32 32v96h416c52.928 0 96 43.072 96 96v224h128c10.688 0 20.672-5.344 26.624-14.24l128-192c3.488-5.248 5.376-11.456 5.376-17.76v-192z" />
+<glyph unicode="&#xf104;" glyph-name="angle-left" horiz-adv-x="384" d="M384.002 164.382q0 8.578-6.598 15.176l-259.3 259.3 259.3 259.3q6.598 6.598 6.598 15.176t-6.598 15.176l-32.989 32.989q-6.598 6.598-15.176 6.598t-15.176-6.598l-307.466-307.466q-6.598-6.598-6.598-15.176t6.598-15.176l307.466-307.466q6.598-6.598 15.176-6.598t15.176 6.598l32.989 32.989q6.598 6.598 6.598 15.176z" />
+<glyph unicode="&#xf105;" glyph-name="angle-right" horiz-adv-x="347" d="M340 438.858q0-7.429-5.714-13.143l-266.286-266.286q-5.714-5.714-13.143-5.714t-13.143 5.714l-28.571 28.571q-5.714 5.714-5.714 13.143t5.714 13.143l224.571 224.571-224.571 224.571q-5.714 5.714-5.714 13.143t5.714 13.143l28.571 28.571q5.714 5.714 13.143 5.714t13.143-5.714l266.286-266.286q5.714-5.714 5.714-13.143z" />
+</font></defs></svg>
\ No newline at end of file
diff --git a/packages/theme-default/src/fonts/element-icons.ttf b/packages/theme-default/src/fonts/element-icons.ttf
new file mode 100755
index 000000000..87d83d546
Binary files /dev/null and b/packages/theme-default/src/fonts/element-icons.ttf differ
diff --git a/packages/theme-default/src/fonts/element-icons.woff b/packages/theme-default/src/fonts/element-icons.woff
new file mode 100755
index 000000000..ae127ac0c
Binary files /dev/null and b/packages/theme-default/src/fonts/element-icons.woff differ
diff --git a/packages/theme-default/src/form.css b/packages/theme-default/src/form.css
new file mode 100644
index 000000000..0b44df059
--- /dev/null
+++ b/packages/theme-default/src/form.css
@@ -0,0 +1,88 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+  @b form {
+    @when label-left {
+      & .el-form-item__label {
+        text-align: left;
+      }
+    }
+  }
+  @b form-item {
+    margin-bottom: 22px;
+    @utils-clearfix;
+
+    & .el-form-item {
+      margin-bottom: 0;
+
+      & .el-form-item__content {
+        margin-left: 0 !important;
+      }
+    }
+
+    @e label {
+      text-align: right;
+      vertical-align: middle;
+      float: left;
+      font-size: 14px;
+      color: #5e6d82;
+      line-height: 1;
+      padding: 11px 12px 11px 0;
+      box-sizing: border-box;
+    }
+    @e content {
+      line-height: 36px;
+      position: relative;
+      font-size: 14px;
+      @utils-clearfix;
+    }
+    @e error {
+      color: #ff4949;
+      font-size: 12px;
+      line-height: 1;
+      padding-top: 4px;
+      position: absolute;
+      top: 100%;
+      left: 0;
+    }
+    & .el-button + .el-button,
+    & .el-checkbox + .el-checkbox,
+    & .el-radio + .el-radio {
+      margin-left: 10px;
+    }
+
+    @when required {
+      .el-form-item__label:before {
+        content: '*';
+        color: var(--color-danger);
+        margin-right: 4px;
+      }
+    }
+
+    @when error {
+      & .el-input__inner,
+      & .el-textarea__inner {
+        border-color: var(--color-danger);
+      }
+    }
+  }
+
+  @b form-inline {
+    & .el-form-item {
+      display: inline-block;
+      margin-right: 10px;
+
+      > * {
+        vertical-align: top;
+      }
+    }
+  }
+  @b form-stacked {
+    & .el-form-item__label {
+      float: none;
+      display: inline-block;
+      padding: 0 0 10px 0;
+    }
+  }
+}
diff --git a/packages/theme-default/src/icon.css b/packages/theme-default/src/icon.css
new file mode 100644
index 000000000..7256b7eca
--- /dev/null
+++ b/packages/theme-default/src/icon.css
@@ -0,0 +1,151 @@
+@font-face {
+    font-family: 'element-icons';
+    src:
+        url('fonts/element-icons.ttf?deq2r7') format('truetype'),
+        url('fonts/element-icons.woff?deq2r7') format('woff'),
+        url('fonts/element-icons.svg?deq2r7#element-icons') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+[class^="el-icon-"], [class*=" el-icon-"] {
+    /* use !important to prevent issues with browser extensions that change fonts */
+    font-family: 'element-icons' !important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    vertical-align: bottom;
+    display: inline-block;
+
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.el-icon-search:before {
+    content: "\e90e";
+}
+.el-icon-share:before {
+    content: "\e900";
+}
+.el-icon-setting:before {
+    content: "\e901";
+}
+.el-icon-circle-cross:before {
+    content: "\e902";
+}
+.el-icon-warning:before {
+    content: "\e903";
+}
+.el-icon-information:before {
+    content: "\e904";
+}
+.el-icon-circle-check:before {
+    content: "\e905";
+}
+.el-icon-delete:before {
+    content: "\e906";
+}
+.el-icon-d-arrow-left:before {
+    content: "\e907";
+}
+.el-icon-d-arrow-right:before {
+    content: "\e908";
+}
+.el-icon-picture:before {
+    content: "\e909";
+}
+.el-icon-upload:before {
+    content: "\e90a";
+}
+.el-icon-menu:before {
+    content: "\e90b";
+}
+.el-icon-time:before {
+    content: "\e90c";
+}
+.el-icon-circle-close:before {
+    content: "\e90d";
+}
+.el-icon-arrow-down:before {
+    content: "\e90f";
+}
+.el-icon-arrow-up:before {
+    content: "\e910";
+}
+.el-icon-arrow-right:before {
+    content: "\e911";
+}
+.el-icon-arrow-left:before {
+    content: "\e912";
+}
+.el-icon-close:before {
+    content: "\e913";
+}
+.el-icon-document:before {
+    content: "\e914";
+}
+.el-icon-d-caret:before {
+    content: "\e915";
+}
+.el-icon-date:before {
+    content: "\e916";
+}
+.el-icon-message:before {
+    content: "\e917";
+}
+.el-icon-loading:before {
+    content: "\e918";
+}
+.el-icon-ellipsis:before {
+    content: "\e919";
+}
+.el-icon-plus:before {
+    content: "\e91a";
+}
+.el-icon-caret-left:before {
+    content: "\e91b";
+}
+.el-icon-caret-right:before {
+    content: "\e91c";
+}
+.el-icon-caret-bottom:before {
+    content: "\e91d";
+}
+.el-icon-edit:before {
+    content: "\e91e";
+}
+.el-icon-caret-top:before {
+    content: "\e91f";
+}
+.el-icon-check:before {
+    content: "\e920";
+}
+.el-icon-minus:before {
+    content: "\e921";
+}
+.el-icon-angle-left:before {
+    content: "\f104";
+}
+.el-icon-angle-right:before {
+    content: "\f105";
+}
+.el-icon-truck:before {
+    content: "\e922";
+}
+
+.el-icon-loading {
+  animation: rotating 1s linear infinite;
+}
+
+@keyframes rotating {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
diff --git a/packages/theme-default/src/index.css b/packages/theme-default/src/index.css
new file mode 100644
index 000000000..f0900aa88
--- /dev/null
+++ b/packages/theme-default/src/index.css
@@ -0,0 +1,33 @@
+@import "./base.css";
+@import "./button.css";
+@import "./input.css";
+@import "./select.css";
+@import "./alert.css";
+@import "./notification.css";
+@import "./slider.css";
+@import "./checkbox.css";
+@import "./radio.css";
+@import "./switch.css";
+@import "./dropdown.css";
+@import "./dialog.css";
+@import "./table.css";
+@import "./pagination.css";
+@import "./popover.css";
+@import "./tooltip.css";
+@import "./autocomplete.css";
+@import "./message-box.css";
+@import "./date-picker.css";
+@import "./time-picker.css";
+@import "./time-select.css";
+@import "./input-number.css";
+@import "./tag.css";
+@import "./breadcrumb.css";
+@import "./form.css";
+@import "./tabs.css";
+@import "./progress.css";
+@import "./tree.css";
+@import "./menu.css";
+@import "./upload.css";
+@import "./row.css";
+@import "./col.css";
+@import "./spinner.css";
diff --git a/packages/theme-default/src/input-number.css b/packages/theme-default/src/input-number.css
new file mode 100644
index 000000000..cc3c41f9b
--- /dev/null
+++ b/packages/theme-default/src/input-number.css
@@ -0,0 +1,70 @@
+@charset "UTF-8";
+@import "./input.css";
+@import "./common/var.css";
+
+@component-namespace el {
+  @b input-number {
+    display: inline-block;
+
+    & .el-input__inner {
+      appearance: none;
+    }
+    & .el-input {
+      float: left;
+      margin-right: calc(-(var(--input-height) + 1px) * 2);
+    }
+    @e increase, decrease {
+      height: 100%;
+      border-left: var(--border-base);
+      width: var(--input-height);
+      line-height: var(--input-height);
+      top: 0;
+      text-align: center;
+      color: #99A9BF;
+      cursor: pointer;
+      float: left;
+      position: relative;
+
+      &:hover {
+        color: var(--color-primary);
+      }
+
+      @when disabled {
+        color: var(--disabled-border-base);
+        cursor: not-allowed;
+      }
+    }
+
+    @when disabled {
+      & .el-input-number__increase, .el-input-number__decrease {
+        border-color: var(--disabled-border-base);
+        color: var(--disabled-border-base);
+
+        &:hover {
+          color: var(--disabled-border-base);
+          cursor: not-allowed;
+        }
+      }
+    }
+    @when large {
+      & .el-input {
+        margin-right: calc(-(var(--input-large-height) + 1px) * 2);
+      }
+      & .el-input-number__increase, .el-input-number__decrease {
+        line-height: var(--input-large-height);
+        width: var(--input-large-height);
+        font-size: var(--input-large-font-size);
+      }
+    }
+    @when small {
+      & .el-input {
+        margin-right: calc(-(var(--input-small-height) + 1px) * 2);
+      }
+      & .el-input-number__increase, .el-input-number__decrease {
+        line-height: var(--input-small-height);
+        width: var(--input-small-height);
+        font-size: var(--input-small-font-size);
+      }
+    }
+  }
+}
diff --git a/packages/theme-default/src/input-recommend.css b/packages/theme-default/src/input-recommend.css
new file mode 100644
index 000000000..f803bda50
--- /dev/null
+++ b/packages/theme-default/src/input-recommend.css
@@ -0,0 +1,29 @@
+@charset "UTF-8";
+@import "./common/var.css";
+/*@import "./core/dropdown.css";*/
+@import "./core/tag.css";
+@import "./core/input.css";
+
+@component-namespace element {
+  @b input {
+    display: inline-block;
+    font-size: var(--input-font-size);
+    position: relative;
+
+    @e placeholder {
+      background-color: #fff;
+      color: var(--input-border-color);
+      left: 4px;
+      padding: 0 2px;
+      position: absolute;
+      top: calc(var(--input-height) / 2 - var(--input-font-size) + 4);
+      transition: all 0.2s ease-out;
+      z-index: var(--index-normal);
+
+      @when enter {
+        color: var(--input-border-color-hover);
+        top: calc((-var(--input-height) + var(--input-font-size)) / 2 + 1);
+      }
+    }
+  }
+}
diff --git a/packages/theme-default/src/input.css b/packages/theme-default/src/input.css
new file mode 100644
index 000000000..8e6048fa3
--- /dev/null
+++ b/packages/theme-default/src/input.css
@@ -0,0 +1,199 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+  @b input {
+    position: relative;
+    
+    @e inner {
+      display: block;
+      padding: 3px 10px;
+      box-sizing: border-box;
+      width: 100%;
+      height: var(--input-height);
+      font-size: var(--font-size-base);
+      color: var(--input-color);
+      background-color: #fff;
+      background-image: none;
+      border: var(--input-border);
+      border-radius: 4px;
+      transition: var(--border-transition-base);
+      outline: none;
+
+      &::placeholder {
+        color: var(--input-placeholder-color);
+      }
+
+      &:hover {
+        border-color: var(--input-hover-border);
+      }
+      &:focus {
+        outline: none;
+        border-color: var(--input-focus-border);
+      }
+    }
+
+    @e icon {
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translate(0, -50%);
+      color: var(--input-icon-color);
+
+      & + .el-input__inner {
+        padding-right: 35px;
+      }
+    }
+
+    @when active {
+      .el-input__inner {
+        outline: none;
+        border-color: var(--input-focus-border);
+      }
+    }
+
+    @when disabled {
+      .el-input__inner {
+        background-color: var(--disabled-fill-base);
+        border-color: var(--disabled-border-base);
+        color: var(--disabled-color-base);
+        cursor: not-allowed;
+
+        &::placeholder {
+          color: var(--input-disabled-placeholder-color);
+        }
+      }
+    }
+
+    .el-icon-loading {
+      animation: validating-rotating 1s linear infinite;
+    }
+  }
+
+  @b input-large {
+    & .el-input__inner {
+      font-size: var(--input-large-font-size);
+      height: var(--input-large-height);
+    }
+  }
+  @b input-small {
+    & .el-input__inner {
+      font-size: var(--input-small-font-size);
+      height: var(--input-small-height);
+    }
+  }
+  @b input-mini {
+    & .el-input__inner {
+      font-size: var(--input-mini-font-size);
+      height: var(--input-mini-height);
+    }
+  }
+
+  @b input-group {
+    display: table;
+
+    & .el-input {
+      vertical-align: middle;
+      display: table-cell;
+    }
+    @e label {
+      padding: 0 10px;
+      font-size: 13px;
+    }
+    @e prepend {
+      vertical-align: middle;
+      display: table-cell;
+      position: relative;
+      border: var(--border-base);
+      border-right: 0;
+      border-radius: 4px;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+
+      & .el-dropdown--text {
+        padding: 0 10px;
+      }
+    }
+    @e append {
+      vertical-align: middle;
+      display: table-cell;
+      position: relative;
+      border: var(--border-base);
+      border-left: 0;
+      border-radius: 4px;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    & .el-input:first-child {
+      .el-input__inner {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+    & .el-input:last-child {
+      .el-input__inner {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+    & .el-input:not(:first-child):not(:last-child) {
+      .el-input__inner {
+        border-radius: 0;
+      }
+    }
+  }
+
+  @b textarea {
+
+    @e inner {
+      display: block;
+      resize: vertical;
+      padding: 10px 5px;
+      box-sizing: border-box;
+      width: 100%;
+      min-height: 88px;
+      font-size: var(--font-size-base);
+      color: #666;
+      background-color: #fff;
+      background-image: none;
+      border: var(--input-border);
+      border-radius: 4px;
+      transition: var(--border-transition-base);
+
+      &::placeholder {
+        color: var(--input-placeholder-color);
+      }
+
+      &:hover {
+        border-color: var(--input-hover-border);
+      }
+
+      &:focus {
+        outline: none;
+        border-color: var(--input-focus-border);
+      }
+    }
+
+    @when disabled {
+      .el-textarea__inner {
+        background-color: var(--disabled-fill-base);
+        border-color: var(--disabled-border-base);
+        color: var(--disabled-color-base);
+        cursor: not-allowed;
+
+        &::placeholder {
+          color: var(--input-disabled-placeholder-color);
+        }
+      }
+    }
+  }
+}
+
+@keyframes validating-rotating {
+  0% {
+    transform: translate(0, -50%) rotateZ(0deg);
+  }
+  100% {
+    transform: translate(0, -50%) rotateZ(360deg);
+  }
+}
diff --git a/packages/theme-default/src/menu.css b/packages/theme-default/src/menu.css
new file mode 100644
index 000000000..a1c525751
--- /dev/null
+++ b/packages/theme-default/src/menu.css
@@ -0,0 +1,159 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+  @b menu {
+    height: 60px;
+    line-height: 60px;
+    background-color: #eff2f7;
+    list-style: none;
+    position: relative;
+    margin: 0;
+    padding-left: 0;
+
+    @e active-bar {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: 5px;
+      background-color: var(--color-primary);
+      z-index: 1;
+      will-change: transform;
+      transition: transform .3s cubic-bezier(.645,.045,.355,1), width .3s cubic-bezier(.645,.045,.355,1);
+    }
+    @m vertical {
+      height: auto;
+
+      & .el-menu-item {
+        float: none;
+        height: 56px;
+        line-height: 56px;
+        margin: 0;
+        padding-left: 20px;
+        cursor: pointer;
+        position: relative;
+        color: #475669;
+        
+        &:hover {
+          background-color: #d3dce6;
+        }
+        &.is-active .el-menu-item__bar {
+          display: none;
+        }
+      }
+      & .el-menu-item.is-active {
+        color: var(--color-primary);
+      }
+    }
+    @m dark {
+      background-color: #324057;
+
+      & .el-menu-item,
+      & .el-submenu__title {
+        color: #c0ccda;
+      }
+
+      &.el-menu--vertical {
+        & .el-menu-item,
+        & .el-submenu__title {
+          &:hover {
+            background-color: #475669;
+          }
+          &.is-active {
+            background-color: #5e6d82;
+            color: #fff;
+          }
+        }
+      }
+
+      & .el-submenu .el-menu-item {
+        background-color: #1f2d3d;
+        color: #99a9bf;
+
+        &:hover {
+          background-color: #475669;
+        }
+        &.is-active {
+          background-color: #5e6d82;
+          color: #fff;
+        }
+      }
+    }
+  }
+  @b menu-item {
+    font-size: 16px;
+    color: #475669;
+    float: left;
+    height: 100%;
+    padding: 0 10px;
+    margin: 0 10px;
+    cursor: pointer;
+    position: relative;
+    
+    @when active {
+      .el-menu-item__bar {
+        content: '';
+        width: 100%;
+        height: 5px;
+        background-color: var(--color-primary);
+        bottom: 0;
+        left: 0;
+        position: absolute;
+        display: block;
+      }
+    }
+    & [class^="el-icon-"] {
+      vertical-align: baseline;
+      margin-right: 10px;
+    }
+    &:first-child {
+      margin-left: 0;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  
+  @b submenu {
+    & .el-menu {
+      height: auto;
+      background-color: darken(#eff2f7, 5%);
+    }
+    & .el-menu-item {
+      padding-left: 46px;
+    }
+    @e title {
+      float: none;
+      height: 56px;
+      line-height: 56px;
+      margin: 0;
+      padding-left: 20px;
+      cursor: pointer;
+      position: relative;
+      color: #475669;
+      
+      &:hover {
+        background-color: #d3dce6;
+      }
+      & [class^="el-icon-"] {
+        vertical-align: baseline;
+        margin-right: 10px;
+      }
+    }
+    @e icon-arrow {
+      position: absolute;
+      margin: 0;
+      top: 50%;
+      right: 20px;
+      transform: rotateZ(180deg) translateY(-50%);
+      font-size: 12px;
+      transition: transform .3s ease-in-out;
+      transform-origin: center 0;
+    }
+    @when opened {
+      & .el-submenu__icon-arrow {
+        transform: translateY(-50%);
+      }
+    }
+  }
+}
diff --git a/packages/theme-default/src/message-box.css b/packages/theme-default/src/message-box.css
new file mode 100644
index 000000000..cd19cc41a
--- /dev/null
+++ b/packages/theme-default/src/message-box.css
@@ -0,0 +1,162 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+
+  @b message-box {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    background-color: #fff;
+    width: 420px;
+    border-radius: 3px;
+    font-size: 16px;
+    -webkit-user-select: none;
+    overflow: hidden;
+    backface-visibility: hidden;
+
+    @e header {
+      padding: 20px 20px 0;
+    }
+
+    @e content {
+      padding: 30px 20px;
+      color: #475669;
+      font-size: 14px;
+      position: relative;
+    }
+
+    @e close {
+      display: inline-block;
+      position: absolute;
+      top: 19px;
+      right: 20px;
+      color: #999;
+      cursor: pointer;
+      line-height: 20px;
+      text-align: center;
+    }
+
+    @e input {
+      & > input {
+        border: 1px solid #dedede;
+        border-radius: 5px;
+        padding: 4px 5px;
+        margin-top: 10px;
+        width: 100%;
+        box-sizing: border-box;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        outline: none;
+      }
+    }
+
+    @e errormsg {
+      color: red;
+      font-size: 12px;
+      min-height: 16px;
+    }
+
+    @e title {
+      padding-left: 0;
+      margin-bottom: 0;
+      font-size: 16px;
+      font-weight: bold;
+      height: 18px;
+      color: #333;
+    }
+
+    @e message {
+      margin: 0;
+
+      & p {
+        margin: 0;
+        line-height: 1.4;
+      }
+    }
+
+    @e btns {
+      padding: 10px 20px 15px;
+      text-align: right;
+
+      & button:nth-child(2) {
+        margin-left: 10px;
+      }
+    }
+
+    @e btns-reverse {
+      flex-direction: row-reverse;
+    }
+
+    @e status {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 36px !important;
+
+      &.el-icon-circle-check {
+        color: #13ce66;
+      }
+
+      &.el-icon-information {
+        color: #50bfff;
+      }
+
+      &.el-icon-warning {
+        color: #f7ba2a;
+      }
+
+      &.el-icon-circle-cross {
+        color: #ff4949;
+      }
+    }
+  }
+}
+
+.msgbox-bounce-enter {
+  -webkit-animation: msgbox-bounce-in .3s cubic-bezier(0.3, 0, 0, 1.5);
+  animation: msgbox-bounce-in .3s cubic-bezier(0.3, 0, 0, 1.5);
+}
+
+.msgbox-bounce-leave {
+  -webkit-animation: msgbox-bounce-out .2s cubic-bezier(0.895, 0.03, 0.685, 0.22);
+  animation: msgbox-bounce-out .2s cubic-bezier(0.895, 0.03, 0.685, 0.22);
+}
+
+@keyframes msgbox-bounce-in {
+  0% {
+    transform: translate3d(-50%, -50%, 0) scale(0.8);
+  }
+  100% {
+    transform: translate3d(-50%, -50%, 0) scale(1);
+  }
+}
+
+@keyframes msgbox-bounce-out {
+  0% {
+    transform: translate3d(-50%, -50%, 0) scale(1);
+  }
+  100% {
+    transform: translate3d(-50%, -50%, 0) scale(0.7);
+  }
+}
+
+@-webkit-keyframes msgbox-bounce-in {
+  0% {
+    -webkit-transform: translate3d(-50%, -50%, 0) scale(0.8);
+  }
+  100% {
+    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
+  }
+}
+
+@-webkit-keyframes msgbox-bounce-out {
+  0% {
+    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
+  }
+  100% {
+    -webkit-transform: translate3d(-50%, -50%, 0) scale(0.7);
+  }
+}
diff --git a/packages/theme-default/src/mixins/_button.css b/packages/theme-default/src/mixins/_button.css
new file mode 100644
index 000000000..55288e9e4
--- /dev/null
+++ b/packages/theme-default/src/mixins/_button.css
@@ -0,0 +1,49 @@
+@define-mixin button-variant $color, $background-color, $border-color {
+  color: $color;
+  background-color: $background-color;
+  border-color: $border-color;
+
+  &:hover {
+    background: tint($background-color, var(--button-hover-tint-percent));
+    border-color: tint($border-color, var(--button-hover-tint-percent));
+    color: $color;
+  }
+  
+  &:active {
+    background: shade($background-color, var(--button-active-shade-percent));
+    border-color: shade($border-color, var(--button-active-shade-percent));
+    color: $color;
+    outline: none;
+  }
+
+  &.is-active {
+    background: shade($background-color, var(--button-active-shade-percent));
+    border-color: shade($border-color, var(--button-active-shade-percent));
+    color: $color;
+  }
+
+  &.is-plain {
+    background: var(--button-default-fill);
+    border: var(--border-base);
+    color: var(--button-default-color);
+
+    &:hover {
+      background: #fff;
+      border-color: $border-color;
+      color: $background-color;
+    }
+    
+    &:active {
+      background: #fff;
+      border-color: shade($border-color, var(--button-active-shade-percent));
+      color: shade($background-color, var(--button-active-shade-percent));
+      outline: none;
+    }
+  }
+}
+
+@define-mixin button-size $padding-vertical, $padding-horizontal, $font-size, $border-radius {
+  padding: $padding-vertical $padding-horizontal;
+  font-size: $font-size;
+  border-radius: $border-radius;
+}
diff --git a/packages/theme-default/src/notification.css b/packages/theme-default/src/notification.css
new file mode 100644
index 000000000..3a03d56c5
--- /dev/null
+++ b/packages/theme-default/src/notification.css
@@ -0,0 +1,78 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+
+  @b notification {
+    width: 330px;
+    padding: 20px;
+    box-sizing: border-box;
+    border-radius: 2px;
+    position: fixed;
+    right: 16px;
+    background-color: #fff;
+    box-shadow: 0 0 6px rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .12);
+    transition: opacity 0.3s, transform .3s, right .3s, top 0.4s;
+    overflow: hidden;
+    z-index: 1000;
+
+    @e group {
+      & span {
+        font-size: 16px;
+        color: #1f2d3d;
+      }
+
+      & p {
+        font-size: 14px;
+        line-height: 21px;
+        margin: 10px 0 0 0;
+        color: #8492a6;
+        text-align: justify;
+      }
+    }
+
+    @e icon {
+      size: 40px;
+      font-size: 40px;
+      float: left;
+      position: relative;
+      top: 3px;
+    }
+
+    @e closeBtn {
+      position: absolute 20px 20px * *;
+      cursor: pointer;
+      color: #C0CCDA;
+      font-size: 14px;
+
+      &:hover {
+        color: #99A9BF;
+      }
+    }
+
+    & .el-icon-circle-check {
+      color: #13ce66;
+    }
+
+    & .el-icon-circle-cross {
+      color: #ff4949;
+    }
+
+    & .el-icon-information {
+      color: #50bfff;
+    }
+
+    & .el-icon-warning {
+      color: #f7ba2a;
+    }
+  }
+
+  .el-notification-fade-enter {
+    transform: translateX(100%);
+    right: 0;
+  }
+
+  .el-notification-fade-leave {
+    opacity: 0;
+  }
+}
diff --git a/packages/theme-default/src/option-group.css b/packages/theme-default/src/option-group.css
new file mode 100644
index 000000000..bd7bbc2e7
--- /dev/null
+++ b/packages/theme-default/src/option-group.css
@@ -0,0 +1,22 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+
+  @b select-group {
+    margin: 0;
+    padding: 0;
+
+    @e title {
+      padding-left: 10px;
+      font-size: 12px;
+      color: #999;
+      height: 30px;
+      line-height: 30px;
+    }
+
+    & .el-select-dropdown__item {
+      padding-left: 20px;
+    }
+  }
+}
diff --git a/packages/theme-default/src/option.css b/packages/theme-default/src/option.css
new file mode 100644
index 000000000..48f545dd0
--- /dev/null
+++ b/packages/theme-default/src/option.css
@@ -0,0 +1,47 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+
+  @b select-dropdown {
+    @e item {
+      font-size: 14px;
+      padding: 8px 10px;
+      position: relative;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: #475669;
+      height: 36px;
+      line-height: 1.5;
+      box-sizing: border-box;
+      cursor: pointer;
+
+      @when disabled {
+        color: #c0ccda;
+        cursor: not-allowed;
+
+        &:hover {
+          background-color: #fff;
+        }
+      }
+
+      &.hover {
+        background-color: #e5e9f2;
+      }
+
+      &.selected {
+        color: #fff;
+        background-color: #20A0FF;
+
+        &.hover {
+          background-color: #1D8CE0;
+        }
+      }
+
+      & span {
+        line-height: 1.5 !important;
+      }
+    }
+  }
+}
diff --git a/packages/theme-default/src/pagination.css b/packages/theme-default/src/pagination.css
new file mode 100644
index 000000000..e724f94c7
--- /dev/null
+++ b/packages/theme-default/src/pagination.css
@@ -0,0 +1,196 @@
+@charset "UTF-8";
+@import "./select.css";
+@import "./common/var.css";
+
+@component-namespace el {
+  @b pagination {
+    white-space: nowrap;
+    padding: 2px 5px;
+    background: var(--pagination-fill);
+    color: var(--pagination-color);
+
+    span,
+    button {
+      display: inline-block;
+      font-size: var(--pagination-font-size);
+      min-width: var(--pagination-button-size);
+      height: var(--pagination-button-size);
+      line-height: var(--pagination-button-size);
+      vertical-align: top;
+      box-sizing: border-box;
+    }
+
+    button {
+      border: none;
+      padding: 0 6px;
+      background: transparent;
+
+      &:focus {
+        outline: none;
+      }
+
+      &:hover {
+        color: var(--pagination-hover-fill);
+      }
+
+      &.disabled {
+        color: var(--pagination-button-disabled-color);
+        background-color: var(--pagination-button-disabled-fill);
+        cursor: not-allowed;
+      }
+    }
+
+    .btn-prev,
+    .btn-next {
+      background: center center no-repeat;
+      background-size: 16px;
+      border: 1px solid var(--pagination-border-color);
+      cursor: pointer;
+      margin: 0;
+      color: var(--pagination-button-color);
+
+      .el-icon {
+        display: block;
+        font-size: 12px;
+      }
+    }
+
+    .btn-prev {
+      border-radius: var(--pagination-border-radius) 0 0 var(--pagination-border-radius);
+      border-right: 0;
+    }
+
+    .btn-next {
+      border-radius: 0 var(--pagination-border-radius) var(--pagination-border-radius) 0;
+      border-left: 0;
+    }
+
+    @m small {
+      .btn-prev,
+      .btn-next,
+      .el-pager li,
+      .el-pager li:last-child {
+        border-color: transparent;
+        font-size: 12px;
+        line-height: 22px;
+        height: 22px;
+        min-width: 22px;
+      }
+
+      .arrow.disabled {
+        visibility: hidden;
+      }
+
+      .el-pager li {
+        border-radius: var(--pagination-border-radius);
+      }
+    }
+
+    @e sizes {
+      margin: 0 10px 0 0;
+
+      .el-input .el-input__inner {
+        font-size: 13px;
+        border-color: var(--pagination-border-color);
+
+        &:hover {
+          border-color: var(--pagination-hover-fill);
+        }
+      }
+    }
+
+    @e jump {
+      margin-left: 10px;
+    }
+
+    @e total {
+      margin-left: 10px;
+    }
+
+    @e rightwrapper {
+      float: right;
+    }
+
+    @e editor {
+      border: 1px solid var(--pagination-border-color);
+      border-radius: var(--pagination-border-radius);
+      line-height: 18px;
+      padding: 4px 2px;
+      width: 30px;
+      text-align: center;
+      margin: 0 6px;
+      box-sizing: border-box;
+      transition: border .3s;
+
+      &::-webkit-inner-spin-button,
+      &::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      &:focus {
+        outline: none;
+        border-color: var(--pagination-hover-fill);
+      };
+    }
+  }
+
+  @b pager {
+    user-select: none;
+    list-style: none;
+    display: inline-block;
+    vertical-align: top;
+    font-size: 0;
+    padding: 0;
+
+    li {
+      padding: 0 4px;
+      border: 1px solid var(--pagination-border-color);
+      border-right: 0;
+      background: var(--pagination-fill);
+      vertical-align: top;
+      display: inline-block;
+      font-size: var(--pagination-font-size);
+      min-width: var(--pagination-button-size);
+      height: var(--pagination-button-size);
+      line-height: var(--pagination-button-size);
+      cursor: pointer;
+      box-sizing: border-box;
+      text-align: center;
+
+      &:last-child {
+        border-right: 1px solid var(--pagination-border-color);
+      }
+
+      &.btn-quicknext,
+      &.btn-quickprev {
+        line-height: 28px;
+        color: var(--pagination-button-color);
+      }
+
+      &.btn-quickprev:hover {
+        cursor: pointer;
+      }
+
+      &.btn-quicknext:hover {
+        cursor: pointer;
+      }
+
+      &.active + li {
+        border-left: 0;
+        padding-left: 5px;
+      }
+
+      &:hover {
+        color: var(--pagination-hover-fill);
+      }
+
+      &.active {
+        border-color: var(--pagination-hover-fill);
+        background-color: var(--pagination-hover-fill);
+        color: var(--pagination-hover-color);
+        cursor: default;
+      }
+    }
+  }
+}
diff --git a/packages/theme-default/src/popover.css b/packages/theme-default/src/popover.css
new file mode 100644
index 000000000..ff0b99434
--- /dev/null
+++ b/packages/theme-default/src/popover.css
@@ -0,0 +1,120 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+  @b popover {
+    position: absolute;
+    background: var(--popover-fill);
+    min-width: 150px;
+    border-radius: 2px;
+    border: 1px solid var(--popover-border-color);
+    padding: var(--popover-padding);
+    z-index: var(--index-popper);
+    font-size: var(--popover-font-size);
+    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .12),
+                0px 0px 6px 0px rgba(0, 0, 0, .04);
+
+    .popper__arrow,
+    .popper__arrow::after {
+      position: absolute;
+      display: block;
+      width: 0;
+      height: 0;
+      border-color: transparent;
+      border-style: solid;
+    }
+
+    .popper__arrow {
+      border-width: var(--popover-arrow-size);
+    }
+
+    .popper__arrow::after {
+      content: " ";
+      border-width: var(--popover-arrow-size);
+    }
+
+    &[x-placement^="top"] {
+      margin-bottom: calc(var(--popover-arrow-size) + 6);
+    }
+
+    &[x-placement^="top"] .popper__arrow {
+      bottom: -var(--popover-arrow-size);
+      left: 50%;
+      margin-right: calc(var(--tooltip-arrow-size) / 2);
+      border-top-color: var(--popover-border-color);
+      border-bottom-width: 0;
+
+      &::after {
+        bottom: 1px;
+        margin-left: -var(--popover-arrow-size);
+        border-top-color: var(--popover-fill);
+        border-bottom-width: 0;
+      }
+    }
+
+    &[x-placement^="bottom"] {
+      margin-top: calc(var(--popover-arrow-size) + 6);
+    }
+
+    &[x-placement^="bottom"] .popper__arrow {
+      top: -var(--popover-arrow-size);
+      left: 50%;
+      margin-right: calc(var(--tooltip-arrow-size) / 2);
+      border-top-width: 0;
+      border-bottom-color: var(--popover-border-color);
+
+      &::after {
+        top: 1px;
+        margin-left: -var(--popover-arrow-size);
+        border-top-width: 0;
+        border-bottom-color: var(--popover-fill);
+      }
+    }
+
+    &[x-placement^="right"] {
+      margin-left: calc(var(--popover-arrow-size) + 6);
+    }
+
+    &[x-placement^="right"] .popper__arrow {
+      top: 50%;
+      left: -var(--popover-arrow-size);
+      margin-bottom: calc(var(--tooltip-arrow-size) / 2);
+      border-right-color: var(--popover-border-color);
+      border-left-width: 0;
+
+      &::after {
+        bottom: -var(--popover-arrow-size);
+        left: 1px;
+        border-right-color: var(--popover-fill);
+        border-left-width: 0;
+      }
+    }
+
+    &[x-placement^="left"] {
+      margin-right: calc(var(--popover-arrow-size) + 6);
+    }
+
+    &[x-placement^="left"] .popper__arrow {
+      top: 50%;
+      right: -var(--popover-arrow-size);
+      margin-bottom: calc(var(--tooltip-arrow-size) / 2);
+      border-right-width: 0;
+      border-left-color: var(--popover-border-color);
+
+      &::after {
+        right: 1px;
+        bottom: -var(--popover-arrow-size);
+        margin-left: -var(--popover-arrow-size);
+        border-right-width: 0;
+        border-left-color: var(--popover-fill);
+      }
+    }
+
+    @e title {
+      color: var(--popover-title-color);
+      font-size: var(--popover-title-font-size);
+      line-height: 1;
+      margin-bottom: 9px;
+    }
+  }
+}
diff --git a/packages/theme-default/src/progress.css b/packages/theme-default/src/progress.css
new file mode 100644
index 000000000..ca79794e2
--- /dev/null
+++ b/packages/theme-default/src/progress.css
@@ -0,0 +1,59 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+  @b progress {
+    height: 4px;
+    border-radius: 2px;
+    background-color: #e5e9f2;
+    overflow: hidden;
+    position: relative;
+
+    @e bar {
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+      border-radius: 2px 0 0 2px;
+    }
+    @m green {
+      .el-progress__bar {
+        background-color: var(--color-success);
+      }
+    }
+    @m blue {
+      .el-progress__bar {
+        background-color: var(--color-primary);
+      }
+    }
+    @m green-stripe {
+      .el-progress__bar {
+        background: linear-gradient(45deg, var(--color-success) 25%, #5adc94 25%, #5adc94 75%, var(--color-success) 75%);
+        background-size: 16px 100%;
+        animation: progress 1.5s linear infinite;
+      }
+    }
+    @m blue-stripe {
+      .el-progress__bar {
+        background: linear-gradient(45deg, var(--color-primary) 25%, #63bcff 25%, #63bcff 75%, var(--color-primary) 75%);
+        background-size: 16px 100%;
+        animation: progress 1.5s linear infinite;
+      }
+    }
+    @m large {
+      height: 6px;
+    }
+    @m small {
+      height: 2px;
+    }
+  }
+}
+
+@keyframes progress {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 32px 0;
+  }
+}
diff --git a/packages/theme-default/src/radio.css b/packages/theme-default/src/radio.css
new file mode 100644
index 000000000..158356867
--- /dev/null
+++ b/packages/theme-default/src/radio.css
@@ -0,0 +1,217 @@
+@charset "UTF-8";
+@import "./common/var.css";
+@import './mixins/button';
+
+@component-namespace el {
+
+  @b radio {
+    color: var(--radio-color);
+    position: relative;
+    cursor: pointer;
+    display: inline-block;
+    white-space: nowrap;
+    @utils-user-select none;
+
+    & + .el-radio {
+      margin-left: 30px;
+    }
+    
+    @e input {
+      white-space: nowrap;
+      cursor: pointer;
+      outline: none;
+      display: inline-block;
+      line-height: 1;
+      position: relative;
+      vertical-align: middle;
+    }
+    @e inner {
+      border: var(--radio-input-border);
+      border-radius: var(--radio-input-border-radius);
+      circle: var(--radio-input-width) var(--radio-input-fill);
+      position: relative;
+      cursor: pointer;
+      display: inline-block;
+      box-sizing: border-box;
+
+      &:not(.is-disabled):hover {
+        border-color: var(--radio-input-border-color-hover);
+      }
+
+      &::after {
+        circle: 6px #fff;
+        content: "";
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%) scale(0);
+        transition: transform .15s cubic-bezier(.71,-.46,.88,.6);
+      }
+
+      @when disabled {
+        background-color: var(--radio-disabled-input-fill);
+        border-color: var(--radio-disabled-input-border-color);
+        cursor: not-allowed;
+
+        &::after {
+          cursor: not-allowed;
+          background-color: var(--radio-disabled-icon-color);
+        }
+
+        & + .el-radio__label {
+          cursor: not-allowed;
+        }
+      }
+
+      @when checked {
+        border-color: var(--radio-checked-input-border-color);
+        background: var(--radio-checked-icon-color);
+
+        &::after {
+          transform: translate(-50%, -50%) scale(1);
+        }
+      }
+
+      @when focus {
+        border-color: var(--radio-input-border-color-hover);
+      }
+      
+      &.is-disabled.is-checked {
+        background-color: var(--radio-disabled-checked-input-fill);
+        border-color: var(--radio-disabled-checked-input-border-color);
+
+        &::after {
+          background-color: var(--radio-disabled-checked-icon-color);
+        }
+      }
+    }
+
+    @e original {
+      opacity: 0;
+      outline: none;
+      position: absolute;
+      z-index: -1;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      margin: 0;
+    }
+
+    @e label {
+      font-size: var(--radio-font-size);
+      padding-left: 5px;
+    }
+  }
+
+  @b radio-group {
+    display: inline-block;
+
+    & .el-radio {
+      font-size: var(--radio-font-size);
+    }
+
+  }
+  @b radio-button {
+    position: relative;
+    overflow: hidden;
+    display: inline-block;
+
+    @e inner {
+      display: inline-block;
+      line-height: 1;
+      white-space: nowrap;
+      vertical-align: middle;
+      cursor: pointer;
+      background: var(--button-default-fill);
+      border: var(--border-base);
+      color: var(--button-default-color);
+      -webkit-appearance: none;
+      text-align: center;
+      box-sizing: border-box;
+      outline: none;
+      margin: 0;
+      position: relative;
+      cursor: pointer;
+      transition: var(--border-transition-base), var(--color-transition-base);
+      @utils-user-select none;
+
+      @mixin button-size var(--button-padding-vertical), var(--button-padding-horizontal), var(--button-font-size), 0;
+
+      &:hover {
+        color: var(--color-primary);
+      }
+
+      & .el-icon-right {
+        margin-left: 5px;
+      }
+      & .el-icon-left {
+        margin-right: 5px;
+      }
+
+      & [class*="el-icon-"] {
+        line-height: 0.9;
+        
+        & + span {
+          margin-left: 5px;
+        }
+      }
+    }
+
+    @e orig-radio {
+      opacity: 0;
+      outline: none;
+      position: absolute;
+      z-index: -1;
+      left: -999px;
+
+      &:checked {
+        & + .el-radio-button__inner {
+          z-index: 1;
+          color: var(--color-primary);
+          border-color: @color;
+        }
+      }
+
+      &:disabled {
+        & + .el-radio-button__inner {
+          z-index: -1;
+          color: var(--button-disabled-color);
+          cursor: not-allowed;
+          background-image: none;
+          background-color: var(--button-disabled-fill);
+          border-color: var(--button-disabled-border);
+        }
+      }
+    }
+
+    &:not(:last-child) {
+      margin-right: -1px;
+    }
+    &:first-child {
+      .el-radio-button__inner {
+        border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
+      }
+    }
+    &:last-child {
+      .el-radio-button__inner {
+        border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
+      }
+    }
+  }
+  @b radio-button-large {
+    & .el-radio-button__inner {
+      @mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), 0;
+    }
+  }
+  @b radio-button-small {
+    & .el-radio-button__inner {
+      @mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), 0;
+    }
+  }
+  @b radio-button-mini {
+    & .el-radio-button__inner {
+      @mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), 0;
+    }
+  }
+}
diff --git a/packages/theme-default/src/row.css b/packages/theme-default/src/row.css
new file mode 100644
index 000000000..186ebb2c2
--- /dev/null
+++ b/packages/theme-default/src/row.css
@@ -0,0 +1,10 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+  @b row {
+    position: relative;
+    box-sizing: border-box;
+    @utils-clearfix;
+  }
+}
diff --git a/packages/theme-default/src/select-dropdown.css b/packages/theme-default/src/select-dropdown.css
new file mode 100644
index 000000000..d887089df
--- /dev/null
+++ b/packages/theme-default/src/select-dropdown.css
@@ -0,0 +1,16 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+
+  @b select-dropdown {
+    width: 100%;
+    position: absolute;
+    z-index: 1001;
+    border: solid 1px #d3dce6;
+    border-radius: 2px;
+    background-color: #fff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+    box-sizing: border-box;
+  }
+}
diff --git a/packages/theme-default/src/select.css b/packages/theme-default/src/select.css
new file mode 100644
index 000000000..fc51a0d5e
--- /dev/null
+++ b/packages/theme-default/src/select.css
@@ -0,0 +1,179 @@
+@charset "UTF-8";
+@import "./common/var.css";
+@import "./select-dropdown.css";
+@import "./input.css";
+@import "./tag.css";
+@import "./option.css";
+@import "./option-group.css";
+
+@component-namespace el {
+
+  @b select {
+    display: inline-block;
+    position: relative;
+
+    @when small {
+      & input {
+        border-radius: 2px;
+        height: 28px;
+      }
+    }
+
+    &:hover {
+      .el-input__inner {
+        border-color: #8492a6;
+      }
+    }
+
+    & .el-select-dropdown {
+      margin: 5px 0;
+
+      & p.el-select-dropdown__nodata {
+        padding: 10px 0;
+        margin: 0;
+        text-align: center;
+        color: #999;
+      }
+    }
+
+    & .el-select-dropdown__list {
+      list-style: none;
+      padding: 6px 0;
+      margin: 0;
+      width: 100%;
+      max-height: 274px;
+      box-sizing: border-box;
+      overflow-y: auto;
+    }
+
+    & .el-input {
+      display: inline-block;
+
+      & .el-input__icon {
+        color: #c0ccda;
+        font-size: 12px;
+        transition: transform .3s;
+        transform: translateY(-50%) rotateZ(180deg);
+        line-height: 16px;
+        top: 50%;
+        cursor: pointer;
+
+        @when reverse {
+          transform: translateY(-50%);
+        }
+
+        @when show-close {
+          transition: 0s;
+          size: 16px;
+          font-size: 14px;
+          right: 8px;
+          text-align: center;
+          transform: translateY(-50%) rotateZ(180deg);
+          border-radius: 50%;
+          color: #C0CCDA;
+
+          &:hover {
+            color: #99A9BF;
+          }
+        }
+      }
+
+      & .el-input__inner {
+        cursor: pointer;
+
+        &:focus {
+          border-color: #2ea0ff;
+        }
+      }
+
+      &.is-disabled {
+        & .el-input__inner {
+          cursor: not-allowed;
+
+          &:hover {
+            border-color: #D3DCE6;
+          }
+        }
+      }
+    }
+
+    @when multiple {
+      & .el-input {
+        width: 220px;
+      }
+
+      & .el-select-dropdown__item.selected {
+        color: #20A0FF;
+        background-color: #fff;
+
+        &.hover {
+          background-color: #E5E9F2;
+        }
+
+        &::after {
+          position: absolute;
+          right: 10px;
+          font-family: 'element-icons';
+          content: "\e920";
+        }
+      }
+    }
+
+    @e input {
+      border: none;
+      outline: none;
+      padding: 0;
+      margin: 4px 0 -3px 10px;
+      color: #666;
+      font-size: 14px;
+      appearance: none;
+      height: 28px;
+      background-color: transparent;
+    }
+
+    @e close {
+      cursor: pointer;
+      position: absolute;
+      top: 8px;
+      z-index: var(--index-top);
+      right: 25px;
+      color: #c0ccda;
+      line-height: 18px;
+      font-size: 12px;
+
+      &:hover {
+        color: #99A9BF;
+      }
+    }
+
+    @e tags {
+      position: absolute;
+      z-index: var(--index-top);
+    }
+
+    & .el-tag__close {
+      margin-top: -2px;
+    }
+
+    & .el-tag {
+      height: 24px;
+      line-height: 24px;
+      box-sizing: border-box;
+      margin: 6px 0 0 6px;
+    }
+
+    @e tag {
+      display: inline-block;
+      height: 24px;
+      line-height: 24px;
+      font-size: 14px;
+      border-radius: 4px;
+      color: #fff;
+      background-color: #20a0ff;
+
+      & .el-icon-close {
+        font-size: 12px;
+      }
+    }
+  }
+}
diff --git a/packages/theme-default/src/slider.css b/packages/theme-default/src/slider.css
new file mode 100644
index 000000000..0e2531f59
--- /dev/null
+++ b/packages/theme-default/src/slider.css
@@ -0,0 +1,120 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+  @b slider {
+    @e runway {
+      width: 100%;
+      height: 4px;
+      margin: 20px 0;
+      background-color: #E5E9F2;
+      border-radius: 3px;
+      position: relative;
+      cursor: pointer;
+      vertical-align: middle;
+
+      &.show-input {
+        margin-right: 160px;
+        width: auto;
+      }
+    }
+
+    @e input {
+      float: right;
+      margin-top: -10px;
+
+      & .el-input {
+        width: 130px;
+      }
+    }
+
+    @e bar {
+      height: 4px;
+      background-color: #20A0FF;
+      border-top-left-radius: 3px;
+      border-bottom-left-radius: 3px;
+      position: absolute;
+    }
+
+    @e button-wrapper {
+      size: 36px;
+      position: absolute;
+      z-index: 1001;
+      top: -16px;
+      transform: translateX(-50%);
+      background-color: transparent;
+    }
+
+    @e button {
+      size: 12px;
+      background-color: #20A0FF;
+      border-radius: 50%;
+      position: absolute;
+      top: 12px;
+      left: 12px;
+      cursor: pointer;
+      transition: .2s;
+
+      &:hover,
+      &.hover,
+      &.dragging {
+        transform: scale(1.5);
+        background-color: #1d8ce0;
+      }
+    }
+
+    @e pop {
+      @utils-user-select none;
+      font-size: 12px;
+      line-height: 26px;
+      text-align: center;
+      size: 26px;
+      border-radius: 50%;
+      background-color: #20A0FF;
+      color: #fff;
+      cursor: default;
+      z-index: var(--index-top);
+
+      &::before {
+        triangle: 9px top #20A0FF;
+        position: absolute;
+        top: -14px;
+        left: 4px;
+      }
+
+      &::after {
+        triangle: 9px bottom #20A0FF;
+        position: absolute;
+        bottom: -14px;
+        left: 4px;
+      }
+
+      &.top::after {
+        content: '';
+      }
+
+      &.bottom::before {
+        content: '';
+      }
+    }
+
+    @e stop {
+      position: absolute;
+      size: 4px;
+      border-radius: 50%;
+      background-color: #c0ccda;
+      transform: translateX(-50%);
+    }
+
+    .popper-fade-transition {
+      transition: transform .3s, opacity .3s;
+      transform-origin: center bottom;
+    }
+
+    .popper-fade-enter,
+    .popper-fade-leave {
+      transform: scale(0.1);
+      opacity: 0;
+    }
+  }
+}
diff --git a/packages/theme-default/src/spinner.css b/packages/theme-default/src/spinner.css
new file mode 100644
index 000000000..6d9d3a0c3
--- /dev/null
+++ b/packages/theme-default/src/spinner.css
@@ -0,0 +1,41 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+  @b spinner {
+    display: inline-block;
+    vertical-align: middle;
+  }
+  @b spinner-inner {
+    animation: rotate 2s linear infinite;
+    width: 50px;
+    height: 50px;
+    
+    & .path {
+      stroke: #ececec;
+      stroke-linecap: round;
+      animation: dash 1.5s ease-in-out infinite;
+    }
+    
+  }
+}
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
diff --git a/packages/theme-default/src/switch.css b/packages/theme-default/src/switch.css
new file mode 100644
index 000000000..f340376e8
--- /dev/null
+++ b/packages/theme-default/src/switch.css
@@ -0,0 +1,123 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+
+  @b switch {
+    display: inline-block;
+    position: relative;
+    line-height: 20px;
+    font-size: 14px;
+    @when disabled {
+      & .el-switch__core,
+      & .el-switch__label {
+        cursor: not-allowed;
+      }
+    }
+
+    @e label {
+      position: absolute;
+      z-index: 10;
+      size: 46px 22px;
+      left: 0;
+      top: 0;
+      display: inline-block;
+      font-size: 14px;
+      cursor: pointer;
+      user-select: none;
+      @m left {
+        i {
+          left: 6px;
+        }
+      }
+      @m right {
+        i {
+          right: 6px;
+        }
+      }
+      & * {
+        line-height: 1;
+        top: 4px;
+        position: absolute;
+        font-size: 14px;
+        display: inline-block;
+        color: var(--color-white);
+      }
+    }
+
+    @e input {
+      &:checked + .el-switch__core {
+        border-color: var(--switch-on-color);
+        background-color: var(--switch-on-color);
+      }
+    }
+
+    @e core {
+      margin: 0;
+      display: inline-block;
+      vertical-align: middle;
+      position: relative;
+      size: 46px 22px;
+      border: 1px solid var(--switch-off-color);
+      outline: none;
+      border-radius: 12px;
+      box-sizing: border-box;
+      background: var(--switch-off-color);
+      cursor: pointer;
+      transition: border-color .3s, background-color .3s;
+
+      & .el-switch__button {
+        position: absolute 0 * * 0;
+        border-radius: 15px;
+        transition: transform .3s;
+        size: 16px;
+        z-index: 100;
+        background-color: var(--color-white);
+      }
+    }
+
+    @when disabled {
+      .el-switch__core {
+        border-color: var(--switch-disabled-color);
+        background: var(--switch-disabled-color);
+
+        & span {
+          background-color: var(--switch-disabled-text-color);
+        }
+
+        & ~ .el-switch__label * {
+          color: var(--switch-disabled-text-color);
+        }
+      }
+
+      .el-switch__input:checked + .el-switch__core {
+        border-color: var(--switch-disabled-color);
+        background-color: var(--switch-disabled-color);
+      }
+    }
+
+    @modifier wide {
+      .el-switch__label {
+        &.el-switch__label--left {
+          span {
+            left: 10px;
+          }
+        }
+        &.el-switch__label--right {
+          span {
+            right: 10px;
+          }
+        }
+      }
+    }
+
+    & .label-fade-transition {
+      transition: .2s;
+    }
+
+    & .label-fade-enter,
+    & .label-fade-leave {
+      opacity: 0;
+    }
+  }
+}
diff --git a/packages/theme-default/src/table.css b/packages/theme-default/src/table.css
new file mode 100644
index 000000000..74d846218
--- /dev/null
+++ b/packages/theme-default/src/table.css
@@ -0,0 +1,298 @@
+@charset "UTF-8";
+@import "./checkbox.css";
+@import "./tag.css";
+@import "./common/var.css";
+
+@component-namespace el {
+
+  @b table {
+    position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    background-color: #fff;
+    border-collapse: collapse;
+    border: 1px solid var(--table-border-color);
+    font-size: 14px;
+    color: var(--table-text-color);
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 1px;
+      background-color: var(--table-border-color);
+      z-index: 1;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 1px;
+      height: 100%;
+      background-color: var(--table-border-color);
+      z-index: 1;
+    }
+
+    @modifier fit {
+      border-right: 0;
+      border-bottom: 0;
+
+      & th.gutter, td.gutter {
+        border-right-width: 1px;
+      }
+    }
+
+    & th, td {
+      height: 20px;
+      max-width: 250px;
+      min-width: 0;
+      box-sizing: border-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      vertical-align: middle;
+      position: relative;
+      border-bottom: 1px solid var(--table-border-color);
+    }
+
+    @modifier border {
+      & th, td {
+        border-right: 1px solid var(--table-border-color);
+      }
+    }
+
+    & th {
+      background-color: var(--table-header-background);
+      text-align: left;
+    }
+
+    & th > div {
+      display: inline-block;
+      padding-left: 18px;
+      line-height: 40px;
+      box-sizing: border-box;
+    }
+
+    & td > div {
+      box-sizing: border-box;
+    }
+
+    & td > div > div {
+      width: inherit;
+    }
+
+    & td div {
+      display: block;
+    }
+
+    @e fixed {
+      position: absolute;
+      top: 0;
+      left: 0;
+      box-shadow: 1px 0 8px #d3d4d6;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: 1px;
+        background-color: var(--table-border-color);
+        z-index: 4;
+      }
+    }
+
+    @e fixed-header-wrapper {
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 3;
+
+      & thead div {
+        background-color: var(--table-header-background);
+        color: var(--table-text-color);
+      }
+    }
+
+    @e fixed-body-wrapper {
+      position: absolute;
+      left: 0;
+      top: 37px;
+      overflow: hidden;
+      z-index: 3;
+    }
+
+    @e header-wrapper, body-wrapper {
+      width: 100%;
+    }
+
+    @e header, body {
+      table-layout: fixed;
+    }
+
+    @e header-wrapper {
+      overflow: hidden;
+
+      & thead div {
+        background-color: var(--table-header-background);
+        color: var(--table-text-color);
+      }
+    }
+
+    @e body-wrapper {
+      overflow: auto;
+      position: relative;
+    }
+
+    & th.required > div::before {
+      display: inline-block;
+      content: "";
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #ff4d51;
+      margin-right: 5px;
+      vertical-align: middle;
+    }
+
+    & th > .cell {
+      position: relative;
+      word-wrap: normal;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: inline-block;
+      line-height: 20px;
+      vertical-align: middle;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    & div.caret-wrapper {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 10px;
+      width: 10px;
+      height: 12px;
+      padding: 0;
+    }
+
+    & .sort-caret {
+      display: inline-block;
+      width: 0;
+      height: 0;
+      border: 0;
+      content: "";
+      position: absolute;
+      z-index: 2;
+
+      &.ascending {
+        top: 0;
+        border-top: none;
+        border-right: 5px solid transparent;
+        border-bottom: 5px solid #99A9BF;
+        border-left: 5px solid transparent;
+      }
+
+      &.descending {
+        bottom: 0;
+        border-top: 5px solid #99A9BF;
+        border-right: 5px solid transparent;
+        border-bottom: none;
+        border-left: 5px solid transparent;
+      }
+    }
+
+    & .ascending .sort-caret.ascending {
+      border-bottom-color: #475669;
+    }
+
+    & .descending .sort-caret.descending {
+      border-top-color: #475669;
+    }
+
+    & th.gutter, td.gutter {
+      width: 15px;
+      border-right-width: 0;
+      border-bottom-width: 0;
+      padding: 0;
+    }
+
+    & td.gutter {
+      width: 0;
+    }
+
+    & td .cell {
+      box-sizing: border-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 40px;
+      padding-left: 18px;
+      }
+
+    & tr input[type="checkbox"] {
+      margin: 0;
+    }
+
+    & tr {
+      background-color: #fff;
+    }
+
+    @modifier striped {
+      & .el-table__body {
+        & tr:nth-child(2n) {
+          background: #FAFAFA;
+        }
+      }
+    }
+
+    & tr.positive-row {
+      background: #E2F0E4;
+    }
+
+    & tr.info-row {
+      background: #C9E5F5;
+    }
+
+    & tr.warning-row {
+      background: #FEEED9;
+    }
+
+    & tr.negative-row {
+      background: #F7D2D3;
+    }
+
+    & tr.current-row {
+      background: #EFF7FF;
+    }
+
+    @e column-resize-proxy {
+      position: absolute;
+      left: 200px;
+      top: 0;
+      bottom: 0;
+      width: 0;
+      border-left: 1px solid var(--table-border-color);
+      z-index: 10;
+    }
+
+    & .hidden-columns {
+      visibility: hidden;
+      position: absolute;
+      z-index: -1;
+    }
+
+    @e column-filter-label {
+      & i {
+        color: #99a9bf;
+      }
+    }
+  }
+}
diff --git a/packages/theme-default/src/tabs.css b/packages/theme-default/src/tabs.css
new file mode 100644
index 000000000..f9c3c99a4
--- /dev/null
+++ b/packages/theme-default/src/tabs.css
@@ -0,0 +1,229 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+  @b tabs {
+    display: inline-block;
+
+    @e header {
+      border-bottom: 1px solid #d3dce6;
+      padding: 0;
+      position: relative;
+      margin: 0 0 15px;
+      @utils-clearfix;
+    }
+    @e active-bar {
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+      height: 3px;
+      background-color: var(--color-primary);
+      z-index: 1;
+      transition: transform .3s cubic-bezier(.645,.045,.355,1);
+      list-style: none;
+    }
+    @e item {
+      padding: 0 16px;
+      height: 42px;
+      box-sizing: border-box;
+      line-height: @height;
+      float: left;
+      list-style: none;
+      font-size: 14px;
+      color: #8492a6;
+      margin-bottom: -1px;
+      position: relative;
+
+      @when active {
+        color: var(--color-primary);
+      }
+
+      &:hover {
+        color: #1f2d3d;
+        cursor: pointer;
+      }
+    }
+    @e content {
+      white-space: nowrap;
+      overflow: hidden;
+      position: relative;
+    }
+    @m card {
+      .el-tabs__active-bar {
+        display: none;
+      }
+      & .el-icon-close {
+        font-size: 12px;
+        vertical-align: middle;
+        line-height: 15px;
+        overflow: hidden;
+        width: 0;
+        height: 14px;
+        border-radius: 50%;
+        text-align: center;
+        transform-origin: 100% 50%;
+        transition: all .3s cubic-bezier(.645,.045,.355,1);
+        position: relative;
+        top: -1px;
+        right: -2px;
+
+        &:before {
+          transform: scale(.7, .7);
+          display: inline-block;
+        }
+
+        &:hover {
+          background-color: #99a9bf;
+          color: #fff;
+        }
+      }
+      .el-tabs__item {
+        border: 1px solid transparent;
+        transition: all .3s cubic-bezier(.645,.045,.355,1);
+              
+        &.is-closable {
+          &:hover {
+            padding: * 9px;
+
+            & .el-icon-close {
+              width: 14px;
+            }
+          }
+        }
+        &.is-active {
+          border: 1px solid #d3dce6;
+          border-bottom-color: #fff;
+          border-radius: 4px 4px 0 0;
+
+          &.is-closable {
+            padding: * 16px;
+            
+            .el-icon-close {
+              width: 14px;
+            }
+          }
+        }
+      }
+    }
+    @m border-card {
+      background: #fff;
+      border: 1px solid #d3dce6;
+      box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.12), 0px 0px 6px 0px rgba(0,0,0,0.04);
+
+      .el-tabs__content {
+        padding: 15px;
+      }
+      .el-tabs__header {
+        background-color: #eff2f7;
+        margin: 0;
+      }
+      .el-tabs__item {
+        transition: all .3s cubic-bezier(.645,.045,.355,1);
+        border: 1px solid transparent;
+
+        &.is-active {
+          background-color: #fff;
+          border-right: 1px solid #d3dce6;
+          border-left: 1px solid #d3dce6;
+          margin: * -1px;
+        }
+      }
+    }
+  }
+  @b tab-pane {
+    width: 100%;
+    display: inline-block;
+  }
+}
+
+.slideInRight-transition,
+.slideInLeft-transition {
+  display: inline-block;
+}
+.slideInRight-enter {
+  animation: slideInRight-enter .3s;
+}
+.slideInRight-leave {
+  position: absolute;
+  left: 0;
+  right: 0;
+  animation: slideInRight-leave .3s;
+}
+.slideInLeft-enter {
+  animation: slideInLeft-enter .3s;
+}
+.slideInLeft-leave {
+  position: absolute;
+  left: 0;
+  right: 0;
+  animation: slideInLeft-leave .3s;
+}
+
+@keyframes slideInRight-enter {
+  0% {
+    opacity: 0;
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    -webkit-transform: translateX(100%);
+    transform: translateX(100%)
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    -webkit-transform: translateX(0);
+    transform: translateX(0)
+  }
+}
+@keyframes slideInRight-leave {
+  0% {
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+    opacity: 1
+  }
+
+  100% {
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    -webkit-transform: translateX(100%);
+    transform: translateX(100%);
+    opacity: 0
+  }
+}
+@keyframes slideInLeft-enter {
+  0% {
+    opacity: 0;
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%)
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    -webkit-transform: translateX(0);
+    transform: translateX(0)
+  }
+}
+@keyframes slideInLeft-leave {
+  0% {
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+    opacity: 1
+  }
+
+  100% {
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%);
+    opacity: 0
+  }
+}
diff --git a/packages/theme-default/src/tag.css b/packages/theme-default/src/tag.css
new file mode 100644
index 000000000..504dfd43f
--- /dev/null
+++ b/packages/theme-default/src/tag.css
@@ -0,0 +1,92 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+
+  @b tag {
+    background-color: var(--tag-fill);
+    display: inline-block;
+    padding: var(--tag-padding);
+    height: 22px;
+    line-height: @height;
+    font-size: var(--tag-font-size);
+    color: var(--tag-color);
+    border-radius: var(--tag-border-radius);
+    border: 1px solid var(--tag-border);
+
+    @when hit {
+      border-color: var(--tag-primary-color);
+    }
+
+    & .el-icon-close {
+      border-radius: 50%;
+      text-align: center;
+      position: relative;
+      cursor: pointer;
+      font-size: 12px;
+      transform: scale(.75, .75);
+      height: 18px;
+      width: 18px;
+      line-height: 18px;
+      vertical-align: middle;
+      top: -1px;
+      right: -2px;
+
+      &:hover {
+        background-color: #fff;
+        color: var(--tag-fill);
+      }
+    }
+
+    @m gray {
+      background-color: var(--tag-gray-fill);
+      border-color: var(--tag-gray-border);
+      color: var(--tag-gray-color);
+
+      & .el-tag__close:hover {
+        background-color: var(--tag-gray-color);
+        color: #fff;
+      }
+    }
+    @m primary {
+      background-color: var(--tag-primary-fill);
+      border-color: var(--tag-primary-border);
+      color: var(--tag-primary-color);
+
+      & .el-tag__close:hover {
+        background-color: var(--tag-primary-color);
+        color: #fff;
+      }
+    }
+    @m success {
+      background-color: var(--tag-success-fill);
+      border-color: var(--tag-success-border);
+      color: var(--tag-success-color);
+
+      & .el-tag__close:hover {
+        background-color: var(--tag-success-color);
+        color: #fff;
+      }
+    }
+    @m warning {
+      background-color: var(--tag-warning-fill);
+      border-color: var(--tag-warning-border);
+      color: var(--tag-warning-color);
+
+      & .el-tag__close:hover {
+        background-color: var(--tag-warning-color);
+        color: #fff;
+      }
+    }
+    @m danger {
+      background-color: var(--tag-danger-fill);
+      border-color: var(--tag-danger-border);
+      color: var(--tag-danger-color);
+
+      & .el-tag__close:hover {
+        background-color: var(--tag-danger-color);
+        color: #fff;
+      }
+    }
+  }
+}
diff --git a/packages/theme-default/src/time-picker.css b/packages/theme-default/src/time-picker.css
new file mode 100644
index 000000000..6676a18be
--- /dev/null
+++ b/packages/theme-default/src/time-picker.css
@@ -0,0 +1,3 @@
+@import "../../date-picker/src/css/picker.css";
+@import "../../date-picker/src/css/time-spinner.css";
+@import "../../date-picker/src/css/time-picker.css";
diff --git a/packages/theme-default/src/time-select.css b/packages/theme-default/src/time-select.css
new file mode 100644
index 000000000..949dadb87
--- /dev/null
+++ b/packages/theme-default/src/time-select.css
@@ -0,0 +1,43 @@
+@import "../../date-picker/src/css/picker.css";
+@import "../../date-picker/src/css/date-picker.css";
+@import "../../date-picker/src/css/vars.css";
+
+.time-select {
+  min-width: 200px;
+  margin: 5px 0;
+  width: 100%;
+}
+
+.time-select .el-picker-panel__content {
+  max-height: 200px;
+  overflow: hidden;
+  margin: 0;
+
+  &:hover {
+    overflow-y: auto;
+  }
+}
+
+.time-select-item {
+  padding: 8px 10px;
+  font-size: 14px;
+}
+
+.time-select-item.selected:not(.disabled) {
+  background-color: var(--datepicker-active-color);
+  color: #fff;
+
+  &:hover {
+    background-color: #1d8ce0;
+  }
+}
+
+.time-select-item.disabled {
+  color: var(--datepicker-border-color);
+  cursor: not-allowed;
+}
+
+.time-select-item:hover {
+  background-color: var(--datepicker-cell-hover-color);
+  cursor: pointer;
+}
diff --git a/packages/theme-default/src/tooltip.css b/packages/theme-default/src/tooltip.css
new file mode 100644
index 000000000..ed462d1d6
--- /dev/null
+++ b/packages/theme-default/src/tooltip.css
@@ -0,0 +1,153 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+  @b tooltip {
+    display: inline-block;
+
+    @e rel {
+      display: inline-block;
+      position: relative;
+    }
+
+    @e popper {
+      position: absolute;
+      border-radius: 4px;
+      padding: var(--tooltip-padding);
+      z-index: var(--index-popper);
+      font-size: var(--tooltip-font-size);
+      line-height: 1;
+
+      .popper__arrow,
+      .popper__arrow::after {
+        position: absolute;
+        display: block;
+        width: 0;
+        height: 0;
+        border-color: transparent;
+        border-style: solid;
+      }
+
+      .popper__arrow {
+        border-width: var(--tooltip-arrow-size);
+      }
+
+      .popper__arrow::after {
+        content: " ";
+        border-width: 5px;
+      }
+
+      &[x-placement^="top"] {
+        margin-bottom: calc(var(--tooltip-arrow-size) + 6px);
+      }
+
+      &[x-placement^="top"] .popper__arrow {
+        bottom: -var(--tooltip-arrow-size);
+        left: 50%;
+        margin-right: calc(var(--tooltip-arrow-size) / 2);
+        border-top-color: var(--tooltip-border-color);
+        border-bottom-width: 0;
+
+        &::after {
+          bottom: 1px;
+          margin-left: -5px;
+          border-top-color: var(--tooltip-fill);
+          border-bottom-width: 0;
+        }
+      }
+
+      &[x-placement^="bottom"] {
+        margin-top: calc(var(--tooltip-arrow-size) + 6px);
+      }
+
+      &[x-placement^="bottom"] .popper__arrow {
+        top: -var(--tooltip-arrow-size);
+        left: 50%;
+        margin-right: calc(var(--tooltip-arrow-size) / 2);
+        border-top-width: 0;
+        border-bottom-color: var(--tooltip-border-color);
+
+        &::after {
+          top: 1px;
+          margin-left: -5px;
+          border-top-width: 0;
+          border-bottom-color: var(--tooltip-fill);
+        }
+      }
+
+      &[x-placement^="right"] {
+        margin-left: calc(var(--tooltip-arrow-size) + 6px);
+      }
+
+      &[x-placement^="right"] .popper__arrow {
+        top: 50%;
+        left: -var(--tooltip-arrow-size);
+        margin-bottom: calc(var(--tooltip-arrow-size) / 2);
+        border-right-color: var(--tooltip-border-color);
+        border-left-width: 0;
+
+        &::after {
+          bottom: -5px;
+          left: 1px;
+          border-right-color: var(--tooltip-fill);
+          border-left-width: 0;
+        }
+      }
+
+      &[x-placement^="left"] {
+        margin-right: calc(var(--tooltip-arrow-size) + 6px);
+      }
+
+      &[x-placement^="left"] .popper__arrow {
+        top: 50%;
+        right: -var(--tooltip-arrow-size);
+        margin-bottom: calc(var(--tooltip-arrow-size) / 2);
+        border-right-width: 0;
+        border-left-color: var(--tooltip-border-color);
+
+        &::after {
+          right: 1px;
+          bottom: -5px;
+          margin-left: -5px;
+          border-right-width: 0;
+          border-left-color: var(--tooltip-fill);
+        }
+      }
+
+      @when dark {
+        background: var(--tooltip-fill);
+        color: var(--tooltip-color);
+      }
+
+      @when light {
+        background: var(--tooltip-color);
+        border: 1px solid var(--tooltip-fill);
+
+        &[x-placement^="top"] .popper__arrow {
+          border-top-color: var(--tooltip-fill);
+          &::after {
+            border-top-color: var(--tooltip-color);
+          }
+        }
+        &[x-placement^="bottom"] .popper__arrow {
+          border-bottom-color: var(--tooltip-fill);
+          &::after {
+            border-bottom-color: var(--tooltip-color);
+          }
+        }
+        &[x-placement^="left"] .popper__arrow {
+          border-left-color: var(--tooltip-fill);
+          &::after {
+            border-left-color: var(--tooltip-color);
+          }
+        }
+        &[x-placement^="right"] .popper__arrow {
+          border-right-color: var(--tooltip-fill);
+          &::after {
+            border-right-color: var(--tooltip-color);
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/theme-default/src/tree.css b/packages/theme-default/src/tree.css
new file mode 100644
index 000000000..312ac2f46
--- /dev/null
+++ b/packages/theme-default/src/tree.css
@@ -0,0 +1,87 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+  @b tree {
+    overflow: auto;
+    cursor: default;
+    background: #ffffff;
+    border: 1px solid #d3dce6;
+  }
+
+  @b tree-node {
+    white-space: nowrap;
+
+    @e content {
+      line-height: 36px;
+      height: 36px;
+      cursor: pointer;
+
+      & > input {
+        vertical-align: middle;
+      }
+      & > * {
+        margin-right: 8px;
+      }
+      &:hover {
+        background: #e5e9f2;
+      }
+    }
+
+    @e expand-icon {
+      display: inline-block;
+      cursor: pointer;
+      width: 0;
+      height: 0;
+      vertical-align: middle;
+      margin-left: 10px;
+      border: 6px solid transparent;
+      border-right-width: 0;
+      border-left-color: #99a9bf;
+      border-left-width: 7px;
+
+      transform: rotate(0deg);
+      transition: transform 0.3s ease-in-out;
+
+      &:hover {
+        border-left-color: #999;
+      }
+
+      &.expanded {
+        transform: rotate(90deg);
+      }
+
+      &.is-leaf {
+        border-color: transparent;
+        cursor: default;
+      }
+    }
+
+    @e label {
+      font-size: 14px;
+      vertical-align: middle;
+      display: inline-block;
+    }
+
+    @e icon {
+      display: inline-block;
+      vertical-align: middle;
+      font-size: 14px;
+      color: #99a9bf;
+    }
+
+    & > .el-tree-node__children {
+      overflow: hidden;
+      background-color: transparent;
+      /** padding-left: 16px; */
+      display: none;
+    }
+
+    &.expanded > .el-tree-node__children {
+      display: block;
+    }
+  }
+}
+.collapse-transition {
+    transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
+}
diff --git a/packages/theme-default/src/upload.css b/packages/theme-default/src/upload.css
new file mode 100644
index 000000000..d5125c888
--- /dev/null
+++ b/packages/theme-default/src/upload.css
@@ -0,0 +1,191 @@
+@charset "UTF-8";
+@import "./progress.css";
+@import "./common/var.css";
+
+@component-namespace el {
+  @b upload {
+    width: 360px;
+
+    @e input {
+      display: none;
+    }
+    @e inner {
+      display: inline-block;
+    }
+    @e files {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      margin-bottom: 10px;
+    }
+    @e file {
+      font-size: 14px;
+      color: #475669;
+      line-height: 32px;
+      position: relative;
+      padding-right: 40px;
+      padding-left: 4px;
+      box-sizing: border-box;
+      border-radius: 4px;
+      width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      position: relative;
+
+      [class^="el-icon"] {
+        color: #99a9bf;
+        margin-right: 7px;
+        height: 100%;
+        line-height: inherit;
+      }
+
+      &:hover {
+        background-color: #eff2f7;
+
+        .el-upload__btn-delete {
+          display: block;
+          cursor: pointer;
+        }
+      }
+      & .el-progress {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+      }
+      & .el-icon-check {
+        margin-right: 0;
+        color: #13ce66;
+        position: absolute;
+        right: 0;
+        top: 0;
+        height: 100%;
+      }
+    }
+    @e tip {
+      font-size: 12px;
+      color: #8492a6;
+      margin-top: 7px;
+    }
+    @e btn-delete {
+      position: absolute;
+      right: 15px;
+      top: 0;
+      font-size: 12px;
+      color: var(--color-primary);
+      display: none;
+    }
+  }
+  @b dragger {
+    background-color: #f9fafc;
+    border: 1px solid #c0ccda;
+    box-sizing: border-box;
+    width: 360px;
+    height: 180px;
+    border-radius: 4px;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+
+    & .el-upload__inner {
+      display: block;
+      height: 100%;
+    }
+    & .el-icon-upload {
+      font-size: 67px;
+      color: #99a9bf;
+      margin: 40px 0 16px;
+      line-height: 50px;
+    }
+
+    & + .el-upload__tip {
+      text-align: center;
+    }
+    & ~ .el-upload__files {
+      margin-top: 7px;
+      padding-top: 5px;
+      border-top: 1px solid rgba(#c0ccda, .2);
+    }
+
+    @e progress {
+      position: absolute 0 60px 0 60px;
+      margin: auto;
+
+      & + .el-upload__inner {
+        opacity: 0;
+      }
+    }
+
+    @e uploaded-image {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      z-index: 10;
+
+      & img {
+        display: block;
+        width: 100%;
+        height: auto;
+      }
+
+      @e interact {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(#000, .72);
+        text-align: center;
+      }
+
+      @e title {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background-color: #fff;
+        height: 36px;
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-weight: normal;
+        text-align: left;
+        padding: 0 10px;
+        margin: 0;
+        line-height: 36px;
+        font-size: 14px;
+        color: #475669;
+      }
+
+      & + .el-upload__inner {
+        opacity: 0;
+        position: relative;
+        z-index: 1;
+      }
+    }
+
+    @e text {
+      color: #99a9bf;
+      font-size: 14px;
+      text-align: center;
+
+      & em {
+        color: var(--color-primary);
+        font-style: normal;
+      }
+    }
+
+    &:not(.is-showImage):hover {
+      border-color: var(--color-primary);
+    }
+
+    @when dragOver {
+      background-color: rgba(32, 159, 255, .06);
+      border: 2px dashed var(--color-primary);
+    }
+  }
+}
diff --git a/packages/time-picker/index.js b/packages/time-picker/index.js
new file mode 100644
index 000000000..60af80fb7
--- /dev/null
+++ b/packages/time-picker/index.js
@@ -0,0 +1,2 @@
+import Picker from '../date-picker/src/picker/time-picker';
+module.exports = Picker;
diff --git a/packages/time-select/index.js b/packages/time-select/index.js
new file mode 100644
index 000000000..6363ddc4c
--- /dev/null
+++ b/packages/time-select/index.js
@@ -0,0 +1,2 @@
+import Picker from '../date-picker/src/picker/time-select';
+module.exports = Picker;
diff --git a/packages/tooltip/cooking.conf.js b/packages/tooltip/cooking.conf.js
new file mode 100644
index 000000000..0a4da21de
--- /dev/null
+++ b/packages/tooltip/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElTooltip',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/tooltip/index.js b/packages/tooltip/index.js
new file mode 100644
index 000000000..2ee1ba5a0
--- /dev/null
+++ b/packages/tooltip/index.js
@@ -0,0 +1,7 @@
+const Tooltip = require('./src/main');
+
+Tooltip.install = function(Vue) {
+  Vue.component(Tooltip.name, Tooltip);
+};
+
+module.exports = Tooltip;
diff --git a/packages/tooltip/package.json b/packages/tooltip/package.json
new file mode 100644
index 000000000..25f2f91f6
--- /dev/null
+++ b/packages/tooltip/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "el-tooltip",
+  "version": "0.0.0",
+  "description": "A tooltip component for Vue.js.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/tooltip",
+  "author": "elemefe",
+  "license": "MIT",
+  "dependencies": {},
+  "devDependencies": {}
+}
diff --git a/packages/tooltip/src/main.vue b/packages/tooltip/src/main.vue
new file mode 100644
index 000000000..6d71b3521
--- /dev/null
+++ b/packages/tooltip/src/main.vue
@@ -0,0 +1,53 @@
+<template>
+  <div
+    class="el-tooltip"
+    @mouseenter="visible = true"
+    @mouseleave="visible = false">
+    <div class="el-tooltip__rel" v-el:reference>
+      <slot></slot>
+    </div>
+
+    <div
+      class="el-tooltip__popper"
+      :class="['is-' + effect]"
+      v-el:popper
+      v-show="!disabled && visible"
+      :transition="transition">
+      <slot name="content"><div v-text="content"></div></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import Popper from 'main/utils/vue-popper';
+
+export default {
+  name: 'el-tooltip',
+
+  mixins: [Popper],
+
+  props: {
+    disabled: Boolean,
+    effect: {
+      type: String,
+      default: 'dark'
+    },
+    content: String,
+    visibleArrow: {
+      default: true
+    },
+    transition: {
+      type: String,
+      default: 'fade-in-linear'
+    },
+    options: {
+      default() {
+        return {
+          boundariesPadding: 10,
+          gpuAcceleration: false
+        };
+      }
+    }
+  }
+};
+</script>
diff --git a/packages/tree/cooking.conf.js b/packages/tree/cooking.conf.js
new file mode 100644
index 000000000..1d2acd4aa
--- /dev/null
+++ b/packages/tree/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElTree',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/tree/index.js b/packages/tree/index.js
new file mode 100644
index 000000000..1f6ebac9b
--- /dev/null
+++ b/packages/tree/index.js
@@ -0,0 +1,7 @@
+const Tree = require('./src/tree.vue');
+
+Tree.install = function(Vue) {
+  Vue.component(Tree.name, Tree);
+};
+
+module.exports = Tree;
diff --git a/packages/tree/package.json b/packages/tree/package.json
new file mode 100644
index 000000000..1ad41211c
--- /dev/null
+++ b/packages/tree/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "el-tree",
+  "version": "0.0.0",
+  "description": "A tree component for Vue.js.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/tree",
+  "author": "elemefe",
+  "license": "MIT",
+  "dependencies": {}
+}
diff --git a/packages/tree/src/model/node.js b/packages/tree/src/model/node.js
new file mode 100644
index 000000000..1118437e2
--- /dev/null
+++ b/packages/tree/src/model/node.js
@@ -0,0 +1,244 @@
+let idSeed = 0;
+import objectAssign from 'object-assign';
+
+const reInitChecked = function(node) {
+  const siblings = node.children;
+
+  let all = true;
+  let none = true;
+
+  for (let i = 0, j = siblings.length; i < j; i++) {
+    const sibling = siblings[i];
+    if (sibling.checked !== true) {
+      all = false;
+    }
+    if (sibling.checked !== false) {
+      none = false;
+    }
+  }
+
+  if (all) {
+    node.setChecked(true);
+  } else if (!all && !none) {
+    node.setChecked('half');
+  } else if (none) {
+    node.setChecked(false);
+  }
+};
+
+const getPropertyFromData = function(node, prop) {
+  const props = node.props;
+  const data = node.data;
+  const config = props[prop];
+
+  if (typeof config === 'function') {
+    return config(data, node);
+  } else if (typeof config === 'string') {
+    return data[config];
+  } else if (typeof config === 'undefined') {
+    return '';
+  }
+};
+
+export default class Node {
+  constructor(options) {
+    this.id = idSeed++;
+    this.text = null;
+    this.checked = false;
+    this.indeterminate = false;
+    this.data = null;
+    this.expanded = false;
+    this.props = null;
+    this.parent = null;
+    this.lazy = false;
+
+    for (let name in options) {
+      if (options.hasOwnProperty(name)) {
+        this[name] = options[name];
+      }
+    }
+
+    // internal
+    this.level = -1;
+    this.loaded = false;
+    this.children = [];
+    this.loading = false;
+
+    if (this.parent) {
+      this.level = this.parent.level + 1;
+    }
+
+    if (this.lazy !== true && this.data) {
+      let children;
+      if (this.level === -1 && this.data instanceof Array) {
+        children = this.data;
+      } else {
+        children = getPropertyFromData(this, 'children') || [];
+      }
+
+      for (let i = 0, j = children.length; i < j; i++) {
+        const child = children[i];
+        this.insertChild(new Node({
+          data: child,
+          parent: this,
+          lazy: this.lazy,
+          load: this.load,
+          props: this.props
+        }));
+      }
+    }
+  }
+
+  get label() {
+    return getPropertyFromData(this, 'label');
+  }
+
+  get icon() {
+    return getPropertyFromData(this, 'icon');
+  }
+
+  insertChild(child, index) {
+    if (!child) throw new Error('insertChild error: child is required.');
+
+    if (!child instanceof Node) {
+      throw new Error('insertChild error: child should an instance of Node.');
+    }
+
+    child.parent = this;
+    child.level = this.level + 1;
+
+    if (typeof index === 'undefined') {
+      this.children.push(child);
+    } else {
+      this.children.splice(index, 0, child);
+    }
+  }
+
+  removeChild(child) {
+    const index = this.children.indexOf(child);
+
+    if (index > -1) {
+      child.parent = null;
+      this.children.splice(child, index);
+    }
+  }
+
+  expand(callback) {
+    if (this.shouldLoadData()) {
+      this.loadData((data) => {
+        if (data instanceof Array) {
+          callback();
+        }
+      });
+    } else {
+      this.expanded = true;
+      if (callback) {
+        callback();
+      }
+    }
+  }
+
+  doCreateChildren(array, defaultProps = {}) {
+    array.forEach((item) => {
+      const node = new Node(objectAssign({
+        data: item,
+        lazy: this.lazy,
+        load: this.load,
+        props: this.props
+      }, defaultProps));
+      this.insertChild(node);
+    });
+  }
+
+  collapse() {
+    this.expanded = false;
+  }
+
+  shouldLoadData() {
+    return this.lazy === true && this.load && !this.loaded;
+  }
+
+  get isLeaf() {
+    return !this.hasChild();
+  }
+
+  hasChild() {
+    const children = this.children;
+    if (!this.lazy || (this.lazy === true && this.loaded === true)) {
+      return children && children.length > 0;
+    }
+    return true;
+  }
+
+  setChecked(value, deep) {
+    this.indeterminate = value === 'half';
+    this.checked = value === true;
+
+    const handleDeep = () => {
+      if (deep) {
+        const children = this.children;
+        for (let i = 0, j = children.length; i < j; i++) {
+          const child = children[i];
+          child.setChecked(value !== false, deep);
+        }
+      }
+    };
+
+    if (this.shouldLoadData()) {
+      // Only work on lazy load data.
+      this.loadData(() => {
+        handleDeep();
+      }, {
+        checked: value !== false
+      });
+    } else {
+      handleDeep();
+    }
+
+    const parent = this.parent;
+    if (parent.level === -1) return;
+
+    reInitChecked(parent);
+  }
+
+  getChildren() { // this is data
+    const data = this.data;
+    if (!data) return null;
+
+    const props = this.props;
+    let children = 'children';
+    if (props) {
+      children = props.children || 'children';
+    }
+
+    if (data[children] === undefined) {
+      data[children] = null;
+    }
+
+    return data[children];
+  }
+
+  loadData(callback, defaultProps = {}) {
+    if (this.lazy === true && this.load && !this.loaded) {
+      this.loading = true;
+
+      const loadFn = this.load;
+      const resolve = (children) => {
+        this.loaded = true;
+        this.loading = false;
+
+        this.doCreateChildren(children, defaultProps);
+
+        if (callback) {
+          callback.call(this, children);
+        }
+      };
+
+      loadFn(this, resolve);
+    } else {
+      if (callback) {
+        callback.call(this);
+      }
+    }
+  }
+}
diff --git a/packages/tree/src/model/tree.js b/packages/tree/src/model/tree.js
new file mode 100644
index 000000000..8519a1ff0
--- /dev/null
+++ b/packages/tree/src/model/tree.js
@@ -0,0 +1,48 @@
+import Node from './node';
+
+export default class Tree {
+  constructor(options) {
+    for (let option in options) {
+      if (options.hasOwnProperty(option)) {
+        this[option] = options[option];
+      }
+    }
+
+    this._isTree = true;
+
+    this.root = new Node({
+      data: this.data,
+      lazy: this.lazy,
+      props: this.props,
+      load: this.load
+    });
+
+    if (this.lazy && this.load) {
+      const loadFn = this.load;
+      loadFn(this.root, (data) => {
+        this.root.doCreateChildren(data);
+      });
+    }
+  }
+
+  getCheckedNodes(leafOnly) {
+    const checkedNodes = [];
+    const walk = function(node) {
+      const children = node.children;
+
+      children.forEach(function(child) {
+        if ((!leafOnly && child.checked) || (leafOnly && !child.hasChild && child.checked)) {
+          checkedNodes.push(child.data);
+        } else {
+          checkedNodes.push(child.data);
+        }
+
+        walk(child);
+      });
+    };
+
+    walk(this);
+
+    return checkedNodes;
+  }
+};
diff --git a/packages/tree/src/transition.js b/packages/tree/src/transition.js
new file mode 100644
index 000000000..3594f581e
--- /dev/null
+++ b/packages/tree/src/transition.js
@@ -0,0 +1,61 @@
+export default {
+  beforeEnter(el) {
+    el.dataset.oldPaddingTop = el.style.paddingTop;
+    el.dataset.oldPaddingBottom = el.style.paddingBottom;
+    el.style.height = '0';
+    el.style.paddingTop = 0;
+    el.style.paddingBottom = 0;
+  },
+
+  enter(el) {
+    el.dataset.oldOverflow = el.style.overflow;
+
+    el.style.display = 'block';
+    if (el.scrollHeight !== 0) {
+      el.style.height = el.scrollHeight + 'px';
+      el.style.paddingTop = el.dataset.oldPaddingTop;
+      el.style.paddingBottom = el.dataset.oldPaddingBottom;
+    } else {
+      el.style.height = '';
+      el.style.paddingTop = el.dataset.oldPaddingTop;
+      el.style.paddingBottom = el.dataset.oldPaddingBottom;
+    }
+
+    el.style.overflow = 'hidden';
+  },
+
+  afterEnter(el) {
+    el.style.display = '';
+    el.style.height = '';
+    el.style.overflow = el.dataset.oldOverflow;
+  },
+
+  beforeLeave(el) {
+    el.dataset.oldPaddingTop = el.style.paddingTop;
+    el.dataset.oldPaddingBottom = el.style.paddingBottom;
+    el.dataset.oldOverflow = el.style.overflow;
+
+    el.style.display = 'block';
+    if (el.scrollHeight !== 0) {
+      el.style.height = el.scrollHeight + 'px';
+    }
+    el.style.overflow = 'hidden';
+  },
+
+  leave(el) {
+    if (el.scrollHeight !== 0) {
+      setTimeout(() => {
+        el.style.height = 0;
+        el.style.paddingTop = 0;
+        el.style.paddingBottom = 0;
+      });
+    }
+  },
+
+  afterLeave(el) {
+    el.style.display = el.style.height = '';
+    el.style.overflow = el.dataset.oldOverflow;
+    el.style.paddingTop = el.dataset.oldPaddingTop;
+    el.style.paddingBottom = el.dataset.oldPaddingBottom;
+  }
+};
diff --git a/packages/tree/src/tree-node.vue b/packages/tree/src/tree-node.vue
new file mode 100644
index 000000000..739212c81
--- /dev/null
+++ b/packages/tree/src/tree-node.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="el-tree-node"
+     :class="{ expanded: childrenRendered && expanded }">
+    <div class="el-tree-node__content" :style="{ 'padding-left': node.level * 16 + 'px' }"
+         @click="handleExpandIconClick">
+      <span class="el-tree-node__expand-icon"
+        :class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }"
+        ></span>
+      <el-checkbox v-if="showCheckbox" :indeterminate="node.indeterminate" :value.sync="node.checked" :true-label="true" :false-label="false" @on-change="handleCheckChange"></el-checkbox>
+      <!--<span class="el-tree-node__icon {{ node.icon }} {{ node.loading ? 'el-icon-loading' : '' }}" v-if="node.icon"></span>-->
+      <span class="el-tree-node__label">{{ node.label }}</span>
+    </div>
+    <div class="el-tree-node__children"
+      v-if="childrenRendered"
+      v-show="expanded"
+      transition="collapse">
+      <el-tree-node v-for="child in node.children" :node="child"></el-tree-node>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  import CollapseTransition from './transition';
+
+  export default {
+    name: 'el-tree-node',
+
+    props: {
+      node: {
+        default() {
+          return {};
+        }
+      }
+    },
+
+    data() {
+      return {
+        $tree: null,
+        expanded: false,
+        childrenRendered: false,
+        showCheckbox: false
+      };
+    },
+
+    methods: {
+      handleExpandIconClick(event) {
+        let target = event.target;
+        if (target.tagName.toUpperCase() !== 'DIV' &&
+                target.parentNode.nodeName.toUpperCase() !== 'DIV' ||
+                target.nodeName.toUpperCase() === 'LABLE') return;
+        if (this.expanded) {
+          this.node.collapse();
+          this.expanded = false;
+        } else {
+          this.node.expand(() => {
+            this.expanded = true;
+            this.childrenRendered = true;
+          });
+        }
+      },
+
+      handleCheckChange(checked) {
+        this.node.setChecked(checked, true);
+      }
+    },
+
+    created() {
+      var parent = this.$parent;
+
+      if (parent.$isTree) {
+        this.$tree = parent;
+      } else {
+        this.$tree = parent.$tree;
+      }
+
+      const tree = this.$tree;
+
+      if (!tree) {
+        console.warn('Can not find node\'s tree.');
+      }
+
+      this.showCheckbox = tree.showCheckbox;
+    },
+
+    transitions: {
+      collapse: CollapseTransition
+    }
+  };
+</script>
diff --git a/packages/tree/src/tree.vue b/packages/tree/src/tree.vue
new file mode 100644
index 000000000..cf239793f
--- /dev/null
+++ b/packages/tree/src/tree.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="el-tree">
+    <el-tree-node v-for="child in tree.root.children" :node="child"></el-tree-node>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  import Tree from './model/tree';
+
+  export default {
+    name: 'el-tree',
+
+    props: {
+      data: {
+        type: Array
+      },
+      showCheckbox: {
+        type: Boolean,
+        default: false
+      },
+      props: {
+        default() {
+          return {
+            children: 'children',
+            label: 'label',
+            icon: 'icon'
+          };
+        }
+      },
+      lazy: {
+        type: Boolean,
+        default: false
+      },
+      load: {
+        type: Function
+      }
+    },
+
+    created() {
+      this.$isTree = true;
+
+      this.tree = new Tree({
+        data: this.data,
+        lazy: this.lazy,
+        props: this.props,
+        load: this.load
+      });
+    },
+
+    data() {
+      return {
+        tree: {}
+      };
+    },
+
+    components: {
+      ElTreeNode: require('./tree-node.vue')
+    },
+
+    computed: {
+      children: {
+        set(value) {
+          this.data = value;
+        },
+        get() {
+          return this.data;
+        }
+      }
+    },
+
+    methods: {
+      getCheckedNodes(leafOnly) {
+        return this.tree.getCheckedNodes(leafOnly);
+      }
+    }
+  };
+</script>
diff --git a/packages/upload/cooking.conf.js b/packages/upload/cooking.conf.js
new file mode 100644
index 000000000..535bf3722
--- /dev/null
+++ b/packages/upload/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElUpload',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/upload/index.js b/packages/upload/index.js
new file mode 100644
index 000000000..5c575d081
--- /dev/null
+++ b/packages/upload/index.js
@@ -0,0 +1,7 @@
+const Upload = require('./src/upload');
+
+Upload.install = function(Vue) {
+  Vue.component(Upload.name, Upload);
+};
+
+module.exports = Upload;
diff --git a/packages/upload/package.json b/packages/upload/package.json
new file mode 100644
index 000000000..988b6cd78
--- /dev/null
+++ b/packages/upload/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "el-upload",
+  "version": "0.0.0",
+  "description": "A upload component for Vue.js.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/upload",
+  "author": "elemefe",
+  "license": "MIT",
+  "dependencies": {
+    "vue-resource": "^0.9.3"
+  },
+  "devDependencies": {}
+}
diff --git a/packages/upload/src/ajax-upload.vue b/packages/upload/src/ajax-upload.vue
new file mode 100644
index 000000000..57f85d7e9
--- /dev/null
+++ b/packages/upload/src/ajax-upload.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="el-upload__inner"
+    @click="$els.input.click();"
+    @drop.prevent="onDrop"
+    @dragOver.prevent
+  >
+    <slot></slot>
+    <template v-if="$parent.type === 'drag'">
+      <i class="el-icon-upload"></i>
+      <div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
+    </template>
+    <input class="el-upload__input" type="file" v-el:input @change="handleChange" :multiple="multiple" :accept="accept">
+  </div>
+</template>
+
+<script>
+import ajax from './ajax';
+
+export default {
+  props: {
+    action: {
+      type: String,
+      required: true
+    },
+    name: {
+      type: String,
+      default: 'file'
+    },
+    withCredentials: true,
+    multiple: Boolean,
+    accept: String,
+    onStart: Function,
+    onProgress: Function,
+    onSuccess: Function,
+    onError: Function,
+    beforeUpload: Function
+  },
+
+  data() {
+    return {
+    };
+  },
+
+  computed: {
+    uploading: {
+      get() {
+        return this.$parent.uploading;
+      },
+      set(value) {
+        this.$parent.uploading = value;
+      }
+    },
+    mode() {
+      return this.$parent.mode;
+    }
+  },
+
+  methods: {
+    isImage(str) {
+      return str.indexOf('image') !== -1;
+    },
+    handleChange(ev) {
+      const files = ev.target.files;
+
+      if (this.uploading || !files) {
+        return;
+      }
+      this.$dispatch('filechange', files, this.$parent.uploadedFiles, ev);
+      this.uploading = true;
+      this.uploadFiles(files);
+    },
+    uploadFiles(files) {
+      let postFiles = Array.prototype.slice.call(files);
+      if (!this.multiple) {
+        postFiles = postFiles.slice(0, 1);
+      }
+      const len = postFiles.length;
+      if (len > 0) {
+        for (let i = 0; i < len; i++) {
+          const file = postFiles[i];
+          let isImage = this.isImage(file.type);
+          // file.uid = uid();
+          if (this.mode === 'image' && !isImage) {
+            continue;
+          }
+          this.upload(file);
+        }
+        this.onStart(postFiles);
+      }
+    },
+    upload(file) {
+      if (!this.beforeUpload) {
+        return this.post(file);
+      }
+
+      const before = this.beforeUpload(file);
+      if (before && before.then) {
+        before.then((processedFile) => {
+          if (Object.prototype.toString.call(processedFile) === '[object File]') {
+            this.post(processedFile);
+          } else {
+            this.post(file);
+          }
+        }, () => {
+          this.reset();
+        });
+      } else if (before !== false) {
+        this.post(file);
+      } else {
+        this.reset();
+      }
+    },
+    post(file) {
+      let formData = new FormData();
+      formData.append(this.name, file);
+
+      ajax(this.action, {
+        headers: this.headers,
+        withCredentials: this.withCredentials,
+        file: file,
+        filename: this.name,
+        onProgress: e => {
+          this.onProgress(e, file);
+        },
+        onSuccess: res => {
+          this.onSuccess(res, file);
+        },
+        onError: err => {
+          this.onError(err, file);
+        }
+      });
+    },
+    onDrop(e) {
+      const files = e.dataTransfer.files;
+      this.uploadFiles(files);
+    }
+  },
+
+  ready() {
+  }
+};
+</script>
diff --git a/packages/upload/src/ajax.js b/packages/upload/src/ajax.js
new file mode 100644
index 000000000..fb4c7d73a
--- /dev/null
+++ b/packages/upload/src/ajax.js
@@ -0,0 +1,94 @@
+function getError(action, option, xhr) {
+  const msg = `cannot post ${action} ${xhr.status}'`;
+  const err = new Error(msg);
+  err.status = xhr.status;
+  err.method = 'post';
+  err.url = action;
+  return err;
+}
+
+function getBody(xhr) {
+  const text = xhr.responseText || xhr.response;
+  if (!text) {
+    return text;
+  }
+
+  try {
+    return JSON.parse(text);
+  } catch (e) {
+    return text;
+  }
+}
+
+// option {
+//  onProgress: (event: { percent: number }): void,
+//  onError: (event: Error, body?: Object): void,
+//  onSuccess: (body: Object): void,
+//  data: Object,
+//  filename: String,
+//  file: File,
+//  withCredentials: Boolean,
+//  action: String,
+//  headers: Object,
+// }
+export default function upload(action, option) {
+  if (typeof XMLHttpRequest === 'undefined') {
+    return;
+  }
+
+  const xhr = new XMLHttpRequest();
+  if (xhr.upload) {
+    xhr.upload.onprogress = function progress(e) {
+      if (e.total > 0) {
+        e.percent = e.loaded / e.total * 100;
+      }
+      option.onProgress(e);
+    };
+  }
+
+  const formData = new FormData();
+
+  if (option.data) {
+    Object.keys(option.data).map(key => {
+      formData.append(key, option.data[key]);
+    });
+  }
+
+  formData.append(option.filename, option.file);
+
+  xhr.onerror = function error(e) {
+    option.onError(e);
+  };
+
+  xhr.onload = function onload() {
+    // allow success when 2xx status
+    // see https://github.com/react-component/upload/issues/34
+    if (xhr.status < 200 || xhr.status >= 300) {
+      return option.onError(getError(action, option, xhr), getBody(xhr));
+    }
+
+    option.onSuccess(getBody(xhr));
+  };
+
+  xhr.open('post', action, true);
+
+  // Has to be after `.open()`. See https://github.com/enyo/dropzone/issues/179
+  if (option.withCredentials && 'withCredentials' in xhr) {
+    xhr.withCredentials = true;
+  }
+
+  const headers = option.headers || {};
+
+  // when set headers['X-Requested-With'] = null , can close default XHR header
+  // see https://github.com/react-component/upload/issues/33
+  // if (headers['X-Requested-With'] !== null) {
+  //   xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+  // }
+
+  for (let item in headers) {
+    if (headers.hasOwnProperty(item) && headers[item] !== null) {
+      xhr.setRequestHeader(item, headers[item]);
+    }
+  }
+  xhr.send(formData);
+}
diff --git a/packages/upload/src/iframe-upload.vue b/packages/upload/src/iframe-upload.vue
new file mode 100644
index 000000000..6d8ad9b55
--- /dev/null
+++ b/packages/upload/src/iframe-upload.vue
@@ -0,0 +1,138 @@
+<template>
+  <span class="el-upload__inner" :style="{ position: 'relative', zIndex: 0 }">
+    <iframe v-el:iframe @load="onLoad" v-bind:style="iframeStyle"></iframe>
+    <slot></slot>
+  </span>
+</template>
+
+<script>
+import ajax from './ajax';
+import ElProgress from 'packages/progress/index.js';
+
+export default {
+  components: {
+    ElProgress
+  },
+
+  data() {
+    return {
+      uploading: false,
+      percentage: 0,
+      uploadedFiles: [],
+      filename: '',
+      success: false,
+      iframeStyle: {
+        position: 'absolute',
+        top: 0,
+        opacity: 0,
+        filter: 'alpha(opacity=0)',
+        left: 0,
+        zIndex: 9999
+      }
+    };
+  },
+
+  methods: {
+    handleChange(ev) {
+      const files = ev.target.files;
+
+      if (this.uploading || !files) {
+        return;
+      }
+
+      this.uploading = true;
+      this.uploadFiles(files);
+    },
+    uploadFiles(files) {
+      let postFiles = Array.prototype.slice.call(files);
+      if (!this.multiple) {
+        postFiles = postFiles.slice(0, 1);
+      }
+      const len = postFiles.length;
+      if (len > 0) {
+        for (let i = 0; i < len; i++) {
+          const file = postFiles[i];
+          // file.uid = uid();
+          this.upload(file);
+        }
+        if (this.multiple) {
+          this.onStart(postFiles);
+        } else {
+          this.onStart(postFiles[0]);
+        }
+      }
+    },
+    upload(file) {
+      if (!this.beforeUpload) {
+        return this.post(file);
+      }
+
+      const before = this.beforeUpload(file);
+      if (before && before.then) {
+        before.then((processedFile) => {
+          if (Object.prototype.toString.call(processedFile) === '[object File]') {
+            this.post(processedFile);
+          } else {
+            this.post(file);
+          }
+        }, () => {
+          this.reset();
+        });
+      } else if (before !== false) {
+        this.post(file);
+      } else {
+        this.reset();
+      }
+    },
+    post(file) {
+      let formData = new FormData();
+      formData.append(this.name, file);
+
+      ajax(this.action, {
+        headers: this.headers,
+        withCredentials: this.withCredentials,
+        file: file,
+        filename: this.name,
+        onProgress: e => {
+          this.onProgress(e, file);
+        },
+        onSuccess: res => {
+          this.onSuccess(res, file);
+        },
+        onError: err => {
+          this.onError(err, file);
+        }
+      });
+    },
+    onLoad() {
+
+    },
+    onStart(files) {
+      this.filename = files.name;
+    },
+    onProgress(ev, file) {
+      console.log(ev.percent);
+      this.percentage = ev.percent;
+    },
+    onSuccess(res, file) {
+      setTimeout(() => {
+        this.uploadedFiles.push(file);
+        this.reset();
+      }, 1000);
+      console.log(res);
+    },
+    onError(err, file) {
+      this.reset();
+      console.log(err);
+    },
+    reset() {
+      this.uploading = false;
+      this.percent = 0;
+      this.filename = '';
+    }
+  },
+
+  ready() {
+  }
+};
+</script>
diff --git a/packages/upload/src/upload.vue b/packages/upload/src/upload.vue
new file mode 100644
index 000000000..3fc7ef2e5
--- /dev/null
+++ b/packages/upload/src/upload.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="el-upload">
+    <!-- 选择类型 -->
+    <template v-if="type === 'select'">
+      <ul class="el-upload__files" v-show="showUploadList && uploadedFiles.length > 0" transition="slide-in-bottom">
+        <li class="el-upload__file" v-for="file in uploadedFiles" transition="slide-in-bottom">
+          <i class="el-icon-document"></i>{{file.name}}
+          <i class="el-icon-check" v-show="file.status === 'success'"></i>
+          <span class="el-upload__btn-delete" @click="removeFile(file)" v-show="file.status === 'finished'">删除</span>
+          <el-progress
+            v-if="file.status === 'success' || file.status === 'uploading'"
+            size="small"
+            :percentage="file.percentage"
+            :type="file.status === 'success' ? 'green' : 'blue'">
+          </el-progress>
+        </li>
+      </ul>
+      <component :is="uploadComponent"
+        :action="action",
+        :multiple="multiple",
+        :with-credentials="withCredentials",
+        :name="name",
+        :accept="accept",
+        :on-start="onStart",
+        :on-progress="onProgress",
+        :on-success="onSuccess",
+        :on-error="onError"
+      >
+        <slot></slot>
+      </component>
+      <slot name="tip"></slot>
+    </template>
+
+    <!-- 拖拽类型 -->
+    <template v-if="type === 'drag'">
+      <div class="el-dragger"
+        :class="{
+          'is-dragOver': dragOver,
+          'is-draging': draging,
+          'is-hover': mouseover,
+          'is-showImage': showImageBlock
+        }"
+        @drop.prevent="dragOver = false"
+        @dragOver.prevent="dragOver = true"
+        @dragLeave.prevent="dragOver = false"
+        @mouseenter="mouseover = true"
+        @mouseleave="mouseover = false"
+      >
+        <el-progress
+          class="el-dragger__progress"
+          v-if="mode === 'image' && (image.status === 'success' || image.status === 'uploading')"
+          size="large"
+          :percentage="image.percentage"
+          :type="image.status === 'success' ? 'green' : 'blue'">
+        </el-progress>
+        <div class="el-dragger__uploaded-image"
+          v-if="mode === 'image' && image.status === 'finished'"
+          transition="slide-in-bottom"
+        >
+          <img :src="image.url">
+          <div v-show="mouseover" class="el-dragger__uploaded-image__interact" transition="fade-in">
+            <slot name="interact"></slot>
+          </div>
+          <h4 v-show="mouseover" class="el-dragger__uploaded-image__title" transition="slide-in-bottom">{{image.name}}</h4>
+        </div>
+        <component :is="uploadComponent"
+          :action="action",
+          :multiple="multiple",
+          :with-credentials="withCredentials",
+          :name="name",
+          :accept="accept",
+          :on-start="onStart",
+          :on-progress="onProgress",
+          :on-success="onSuccess",
+          :on-error="onError"
+        >
+          <slot></slot>
+        </component>
+      </div>
+
+      <slot name="tip" class="el-dragger__tip"></slot>
+
+      <ul class="el-upload__files"
+        v-if="mode !== 'image' && showUploadList"
+        v-show="uploadedFiles.length > 0"
+        transition="slide-in-bottom"
+      >
+        <li class="el-upload__file" v-for="file in uploadedFiles" transition="slide-in-bottom">
+          <i class="el-icon-document"></i>{{file.name}}
+          <i class="el-icon-check" v-show="file.status === 'success'"></i>
+          <span class="el-upload__btn-delete" @click="removeFile(file)" v-show="file.status === 'finished'">删除</span>
+          <el-progress
+            v-if="file.status === 'success' || file.status === 'uploading'"
+            size="small"
+            :percentage="file.percentage"
+            :type="file.status === 'success' ? 'green' : 'blue'">
+          </el-progress>
+        </li>
+      </ul>
+    </template>
+  </div>
+</template>
+
+<script>
+import AjaxUpload from './ajax-upload';
+import IframeUpload from './iframe-upload';
+import ElProgress from 'packages/progress/index.js';
+
+export default {
+  name: 'el-upload',
+
+  // extends: typeof FormData !== 'undefined' ? ajaxUpload : iframeUpload,
+  // extends: iframeUpload,
+
+  components: {
+    ElProgress,
+    AjaxUpload,
+    IframeUpload
+  },
+
+  props: {
+    action: {
+      type: String,
+      required: true
+    },
+    headers: {
+      type: Object,
+      default() {
+        return {
+          // 'Access-Control-Request-Methods': 'GET, PUT, POST, DELETE, OPTIONS',
+          // 'Access-Control-Request-Headers': 'Content-Type, Content-Range, Content-Disposition, Content-Description'
+        };
+      }
+    },
+    multiple: false,
+    name: {
+      type: String,
+      default: 'file'
+    },
+    withCredentials: {
+      type: Boolean,
+      default: false
+    },
+    showUploadList: {
+      type: Boolean,
+      default: true
+    },
+    accept: String,
+    type: {
+      type: String,
+      default: 'select'
+    },
+    mode: String
+  },
+
+  data() {
+    return {
+      uploading: false,
+      percentage: 0,
+      uploadedFiles: [],
+      filename: '',
+      success: false,
+      dragOver: false,
+      draging: false,
+      mouseover: false,
+      tempIndex: 1
+    };
+  },
+
+  computed: {
+    uploadComponent() {
+      return typeof FormData !== 'undefined' ? 'AjaxUpload' : 'IframeUpload';
+    },
+    image() {
+      return this.uploadedFiles.length > 0 ? this.uploadedFiles[this.uploadedFiles.length - 1] : {};
+    },
+    showImageBlock() {
+      return this.mode === 'image' && this.image.status && this.image.status !== 'fail';
+    }
+  },
+
+  ready() {
+    if (this.mode === 'image') {
+      this.accept = 'image/*';
+    }
+  },
+
+  methods: {
+    isImage(str) {
+      return str.indexOf('image') !== -1;
+    },
+    removeFile(file) {
+      this.uploadedFiles.$remove(file);
+      this.$dispatch('fileremove', file, this.uploadedFiles);
+    },
+    onStart(files) {
+      files.forEach(file => {
+        let isImage = this.isImage(file.type);
+        let uid = Date.now() + this.tempIndex++;
+        let _file = {
+          status: 'uploading',
+          name: file.name,
+          size: file.size,
+          percentage: 0,
+          uid: uid
+        };
+        if (this.mode === 'image') {
+          if (!isImage) {
+            this.tempIndex--;
+            return;
+          } else {
+            _file.url = URL.createObjectURL(file);
+          }
+        }
+
+        this.uploadedFiles.push(_file);
+
+        file.index = this.uploadedFiles.length - 1;
+      });
+    },
+    onProgress(ev, file) {
+      this.uploadedFiles[file.index].percentage = ev.percent;
+    },
+    onSuccess(res, file) {
+      var _file = this.uploadedFiles[file.index];
+
+      _file.status = 'success';
+      setTimeout(() => {
+        _file.status = 'finished';
+        this.reset();
+      }, 1000);
+    },
+    onError(err, file) {
+      var _file = this.uploadedFiles[file.index];
+
+      _file.status = 'finished';
+      this.uploadedFiles.$remove(_file);
+      this.reset();
+      console.log(err);
+    },
+    reset() {
+      this.uploading = false;
+      this.percent = 0;
+      this.filename = '';
+    }
+  }
+};
+</script>
diff --git a/scripts/cooking.component.js b/scripts/cooking.component.js
new file mode 100644
index 000000000..87d61054c
--- /dev/null
+++ b/scripts/cooking.component.js
@@ -0,0 +1,54 @@
+var cooking = require('cooking');
+var path = require('path');
+var Components = require('../components.json');
+
+cooking.set({
+  entry: Components.map(function (compo) {
+    compo[0] = path.join(process.cwd(), compo[0]);
+    return compo;
+  }),
+  dist: './lib',
+  clean: true,
+  template: false,
+  format: 'umd',
+  moduleName: ['ELEMENT', '[name]'],
+  extractCSS: '[name]/style.css',
+  extends: ['vue']
+});
+
+cooking.add('output.filename', '[name]/index.js');
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../src'),
+  'packages': path.join(__dirname, '../packages'),
+  'examples': path.join(__dirname, '../examples')
+});
+
+var externals = {};
+Object.keys(Components).forEach(function(key) {
+  externals[`packages/${key}/index.js`] = {
+    root: `ELEMENT.${key}`,
+    commonjs: `element-ui/lib/${key}`,
+    commonjs2: `element-ui/lib/${key}`,
+    amd: `element-ui/lib/${key}`
+  };
+  externals[`packages/${key}/style.css`] = {
+    root: `ELEMENT.${key}/style.css`,
+    commonjs: `element-ui/lib/${key}/style.css`,
+    commonjs2: `element-ui/lib/${key}/style.css`,
+    amd: `element-ui/lib/${key}/style.css`
+  };
+});
+
+cooking.add('externals', Object.assign({
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+}, externals));
+
+cooking.add('loader.js.exclude', /node_modules|utils\/popper\.js|util\/fecha.\js/);
+
+module.exports = cooking.resolve();
diff --git a/scripts/cooking.conf.js b/scripts/cooking.conf.js
new file mode 100644
index 000000000..34d2167e5
--- /dev/null
+++ b/scripts/cooking.conf.js
@@ -0,0 +1,32 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: './src/index.js',
+  dist: './lib',
+  clean: false,
+  template: false,
+  format: 'umd',
+  moduleName: 'ELEMENT',
+  extractCSS: 'style.css',
+  extends: ['vue']
+});
+
+cooking.add('output.filename', 'index.js');
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../src'),
+  'packages': path.join(__dirname, '../packages'),
+  'examples': path.join(__dirname, '../examples')
+});
+
+cooking.add('externals.vue', {
+  root: 'Vue',
+  commonjs: 'vue',
+  commonjs2: 'vue',
+  amd: 'vue'
+});
+
+cooking.add('loader.js.exclude', /node_modules|utils\/popper\.js|util\/fecha.\js/);
+
+module.exports = cooking.resolve();
diff --git a/scripts/cooking.demo.js b/scripts/cooking.demo.js
new file mode 100644
index 000000000..99e120469
--- /dev/null
+++ b/scripts/cooking.demo.js
@@ -0,0 +1,89 @@
+var cooking = require('cooking');
+var path = require('path');
+var Components = require('../components.json');
+
+cooking.set({
+  entry: {
+    app: './examples/entry.js',
+    vendor: ['vue', 'vue-router']
+  },
+  dist: './examples/element-ui/',
+  template: './examples/index.template.html',
+
+  publicPath: '/element-ui/',
+  hash: true,
+  devServer: {
+    port: 8085,
+    log: false,
+    publicPath: '/'
+  },
+  chunk: 'vendor',
+  extractCSS: true,
+  extends: {
+    vue: true,
+    lint: true,
+    saladcss: {
+      browser: ['ie > 8', 'last 2 version'],
+      features: {
+        'bem': {
+          'shortcuts': {
+            'component': 'b',
+            'modifier': 'm',
+            'descendent': 'e'
+          },
+          'separators': {
+            'descendent': '__',
+            'modifier': '--'
+          }
+        }
+      }
+    }
+  }
+});
+
+cooking.add('loader.md', {
+  test: /\.md$/,
+  loader: 'vue-markdown-loader'
+});
+
+cooking.add('vueMarkdown', {
+  use: [
+    [require('markdown-it-toc-and-anchor').default, {
+      anchorLinkSymbol: '',
+      anchorClassName: 'anchor'
+    }]
+  ],
+  preprocess: function (MarkdownIt, source) {
+    MarkdownIt.renderer.rules.table_open = function () {
+      return '<table class="table">';
+    };
+    MarkdownIt.renderer.rules.fence = wrap(MarkdownIt.renderer.rules.fence);
+    return source;
+  }
+});
+
+var wrap = function (render) {
+  return function () {
+    return render.apply(this, arguments)
+      .replace('<code class="', '<code class="hljs ')
+      .replace('<code>', '<code class="hljs">')
+  };
+};
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../src'),
+  'packages': path.join(__dirname, '../packages'),
+  'examples': path.join(__dirname, '../examples')
+});
+
+var externals = {};
+Object.keys(Components).forEach(function (key) {
+  externals[`packages/${key}/style.css`] = 'null';
+});
+
+// 开发模式不需要将不存在的 style.css 打包进去
+cooking.add('externals', externals);
+
+cooking.config.vue.loaders.html = 'html?minimize=true&conservativeCollapse=false';
+
+module.exports = cooking.resolve();
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 000000000..75bdedf72
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,170 @@
+import Group from '../packages/group/index.js';
+import SelectDropdown from '../packages/select-dropdown/index.js';
+import Pagination from '../packages/pagination/index.js';
+import Dialog from '../packages/dialog/index.js';
+import Cascader from '../packages/cascader/index.js';
+import Autocomplete from '../packages/autocomplete/index.js';
+import Dropdown from '../packages/dropdown/index.js';
+import DropdownItem from '../packages/dropdown-item/index.js';
+import Menu from '../packages/menu/index.js';
+import Submenu from '../packages/submenu/index.js';
+import MenuItem from '../packages/menu-item/index.js';
+import Input from '../packages/input/index.js';
+import InputNumber from '../packages/input-number/index.js';
+import InputGroup from '../packages/input-group/index.js';
+import Radio from '../packages/radio/index.js';
+import RadioGroup from '../packages/radio-group/index.js';
+import RadioButton from '../packages/radio-button/index.js';
+import Checkbox from '../packages/checkbox/index.js';
+import CheckboxGroup from '../packages/checkbox-group/index.js';
+import Switch from '../packages/switch/index.js';
+import Select from '../packages/select/index.js';
+import Option from '../packages/option/index.js';
+import OptionGroup from '../packages/option-group/index.js';
+import Button from '../packages/button/index.js';
+import ButtonGroup from '../packages/button-group/index.js';
+import Table from '../packages/table/index.js';
+import TableColumn from '../packages/table-column/index.js';
+import DatePicker from '../packages/date-picker/index.js';
+import TimeSelect from '../packages/time-select/index.js';
+import TimePicker from '../packages/time-picker/index.js';
+import Popover from '../packages/popover/index.js';
+import Tooltip from '../packages/tooltip/index.js';
+import MessageBox from '../packages/message-box/index.js';
+import Breadcrumb from '../packages/breadcrumb/index.js';
+import BreadcrumbItem from '../packages/breadcrumb-item/index.js';
+import Form from '../packages/form/index.js';
+import FormItem from '../packages/form-item/index.js';
+import Tabs from '../packages/tabs/index.js';
+import TabPane from '../packages/tab-pane/index.js';
+import Tag from '../packages/tag/index.js';
+import Tree from '../packages/tree/index.js';
+import Alert from '../packages/alert/index.js';
+import Notification from '../packages/notification/index.js';
+import Slider from '../packages/slider/index.js';
+import Loading from '../packages/loading/index.js';
+import Icon from '../packages/icon/index.js';
+import Row from '../packages/row/index.js';
+import Col from '../packages/col/index.js';
+import Upload from '../packages/upload/index.js';
+import Progress from '../packages/progress/index.js';
+import Spinner from '../packages/spinner/index.js';
+
+const install = function(Vue) {
+  Vue.component(Group.name, Group);
+  Vue.component(SelectDropdown.name, SelectDropdown);
+  Vue.component(Pagination.name, Pagination);
+  Vue.component(Dialog.name, Dialog);
+  Vue.component(Cascader.name, Cascader);
+  Vue.component(Autocomplete.name, Autocomplete);
+  Vue.component(Dropdown.name, Dropdown);
+  Vue.component(DropdownItem.name, DropdownItem);
+  Vue.component(Menu.name, Menu);
+  Vue.component(Submenu.name, Submenu);
+  Vue.component(MenuItem.name, MenuItem);
+  Vue.component(Input.name, Input);
+  Vue.component(InputNumber.name, InputNumber);
+  Vue.component(InputGroup.name, InputGroup);
+  Vue.component(Radio.name, Radio);
+  Vue.component(RadioGroup.name, RadioGroup);
+  Vue.component(RadioButton.name, RadioButton);
+  Vue.component(Checkbox.name, Checkbox);
+  Vue.component(CheckboxGroup.name, CheckboxGroup);
+  Vue.component(Switch.name, Switch);
+  Vue.component(Select.name, Select);
+  Vue.component(Option.name, Option);
+  Vue.component(OptionGroup.name, OptionGroup);
+  Vue.component(Button.name, Button);
+  Vue.component(ButtonGroup.name, ButtonGroup);
+  Vue.component(Table.name, Table);
+  Vue.component(TableColumn.name, TableColumn);
+  Vue.component(DatePicker.name, DatePicker);
+  Vue.component(TimeSelect.name, TimeSelect);
+  Vue.component(TimePicker.name, TimePicker);
+  Vue.component(Popover.name, Popover);
+  Vue.component(Tooltip.name, Tooltip);
+  Vue.component(Breadcrumb.name, Breadcrumb);
+  Vue.component(BreadcrumbItem.name, BreadcrumbItem);
+  Vue.component(Form.name, Form);
+  Vue.component(FormItem.name, FormItem);
+  Vue.component(Tabs.name, Tabs);
+  Vue.component(TabPane.name, TabPane);
+  Vue.component(Tag.name, Tag);
+  Vue.component(Tree.name, Tree);
+  Vue.component(Alert.name, Alert);
+  Vue.component(Slider.name, Slider);
+  Vue.component(Icon.name, Icon);
+  Vue.component(Row.name, Row);
+  Vue.component(Col.name, Col);
+  Vue.component(Upload.name, Upload);
+  Vue.component(Progress.name, Progress);
+  Vue.component(Spinner.name, Spinner);
+
+  Vue.use(Loading);
+
+  Vue.prototype.$msgbox = MessageBox;
+  Vue.prototype.$alert = MessageBox.alert;
+  Vue.prototype.$confirm = MessageBox.confirm;
+  Vue.prototype.$prompt = MessageBox.prompt;
+  Vue.prototype.$notify = Notification;
+};
+
+// auto install
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue);
+};
+
+module.exports = {
+  install,
+  Group,
+  SelectDropdown,
+  Pagination,
+  Dialog,
+  Cascader,
+  Autocomplete,
+  Dropdown,
+  DropdownItem,
+  Menu,
+  Submenu,
+  MenuItem,
+  Input,
+  InputNumber,
+  InputGroup,
+  Radio,
+  RadioGroup,
+  RadioButton,
+  Checkbox,
+  CheckboxGroup,
+  Switch,
+  Select,
+  Option,
+  OptionGroup,
+  Button,
+  ButtonGroup,
+  Table,
+  TableColumn,
+  DatePicker,
+  TimeSelect,
+  TimePicker,
+  Popover,
+  Tooltip,
+  MessageBox,
+  Breadcrumb,
+  BreadcrumbItem,
+  Form,
+  FormItem,
+  Tabs,
+  TabPane,
+  Tag,
+  Tree,
+  Alert,
+  Notification,
+  Slider,
+  Loading,
+  Icon,
+  Row,
+  Col,
+  Upload,
+  Progress,
+  Spinner
+};
diff --git a/src/mixins/emitter.js b/src/mixins/emitter.js
new file mode 100644
index 000000000..515705c13
--- /dev/null
+++ b/src/mixins/emitter.js
@@ -0,0 +1,33 @@
+function broadcast(componentName, eventName, params) {
+  this.$children.forEach(child => {
+    var name = child.$options.componentName;
+
+    if (name === componentName) {
+      child.$emit.apply(child, [eventName].concat(params));
+    } else {
+      broadcast.apply(child, [componentName, eventName].concat(params));
+    }
+  });
+}
+export default {
+  methods: {
+    dispatch(componentName, eventName, params) {
+      var parent = this.$parent;
+      var name = parent.$options.componentName;
+
+      while (parent && (!name || name !== componentName)) {
+        parent = parent.$parent;
+
+        if (parent) {
+          name = parent.$options.componentName;
+        }
+      }
+      if (parent) {
+        parent.$emit.apply(parent, [eventName].concat(params));
+      }
+    },
+    broadcast(componentName, eventName, params) {
+      broadcast.call(this, componentName, eventName, params);
+    }
+  }
+};
diff --git a/src/utils/popper.js b/src/utils/popper.js
new file mode 100644
index 000000000..19b9338f6
--- /dev/null
+++ b/src/utils/popper.js
@@ -0,0 +1,1249 @@
+/**
+ * @fileOverview Kickass library to create and place poppers near their reference elements.
+ * @version {{version}}
+ * @license
+ * Copyright (c) 2016 Federico Zivolo and contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+//
+// Cross module loader
+// Supported: Node, AMD, Browser globals
+//
+;(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(factory);
+    } else if (typeof module === 'object' && module.exports) {
+        // Node. Does not work with strict CommonJS, but
+        // only CommonJS-like environments that support module.exports,
+        // like Node.
+        module.exports = factory();
+    } else {
+        // Browser globals (root is window)
+        root.Popper = factory();
+    }
+}(this, function () {
+
+    'use strict';
+
+    var root = window;
+
+    // default options
+    var DEFAULTS = {
+        // placement of the popper
+        placement: 'bottom',
+
+        gpuAcceleration: true,
+
+        // shift popper from its origin by the given amount of pixels (can be negative)
+        offset: 0,
+
+        // the element which will act as boundary of the popper
+        boundariesElement: 'viewport',
+
+        // amount of pixel used to define a minimum distance between the boundaries and the popper
+        boundariesPadding: 5,
+
+        // popper will try to prevent overflow following this order,
+        // by default, then, it could overflow on the left and on top of the boundariesElement
+        preventOverflowOrder: ['left', 'right', 'top', 'bottom'],
+
+        // the behavior used by flip to change the placement of the popper
+        flipBehavior: 'flip',
+
+        arrowElement: '[x-arrow]',
+
+        // list of functions used to modify the offsets before they are applied to the popper
+        modifiers: [ 'shift', 'offset', 'preventOverflow', 'keepTogether', 'arrow', 'flip', 'applyStyle'],
+
+        modifiersIgnored: [],
+
+        forceAbsolute: false
+    };
+
+    /**
+     * Create a new Popper.js instance
+     * @constructor Popper
+     * @param {HTMLElement} reference - The reference element used to position the popper
+     * @param {HTMLElement|Object} popper
+     *      The HTML element used as popper, or a configuration used to generate the popper.
+     * @param {String} [popper.tagName='div'] The tag name of the generated popper.
+     * @param {Array} [popper.classNames=['popper']] Array of classes to apply to the generated popper.
+     * @param {Array} [popper.attributes] Array of attributes to apply, specify `attr:value` to assign a value to it.
+     * @param {HTMLElement|String} [popper.parent=window.document.body] The parent element, given as HTMLElement or as query string.
+     * @param {String} [popper.content=''] The content of the popper, it can be text, html, or node; if it is not text, set `contentType` to `html` or `node`.
+     * @param {String} [popper.contentType='text'] If `html`, the `content` will be parsed as HTML. If `node`, it will be appended as-is.
+     * @param {String} [popper.arrowTagName='div'] Same as `popper.tagName` but for the arrow element.
+     * @param {Array} [popper.arrowClassNames='popper__arrow'] Same as `popper.classNames` but for the arrow element.
+     * @param {String} [popper.arrowAttributes=['x-arrow']] Same as `popper.attributes` but for the arrow element.
+     * @param {Object} options
+     * @param {String} [options.placement=bottom]
+     *      Placement of the popper accepted values: `top(-start, -end), right(-start, -end), bottom(-start, -right),
+     *      left(-start, -end)`
+     *
+     * @param {HTMLElement|String} [options.arrowElement='[x-arrow]']
+     *      The DOM Node used as arrow for the popper, or a CSS selector used to get the DOM node. It must be child of
+     *      its parent Popper. Popper.js will apply to the given element the style required to align the arrow with its
+     *      reference element.
+     *      By default, it will look for a child node of the popper with the `x-arrow` attribute.
+     *
+     * @param {Boolean} [options.gpuAcceleration=true]
+     *      When this property is set to true, the popper position will be applied using CSS3 translate3d, allowing the
+     *      browser to use the GPU to accelerate the rendering.
+     *      If set to false, the popper will be placed using `top` and `left` properties, not using the GPU.
+     *
+     * @param {Number} [options.offset=0]
+     *      Amount of pixels the popper will be shifted (can be negative).
+     *
+     * @param {String|Element} [options.boundariesElement='viewport']
+     *      The element which will define the boundaries of the popper position, the popper will never be placed outside
+     *      of the defined boundaries (except if `keepTogether` is enabled)
+     *
+     * @param {Number} [options.boundariesPadding=5]
+     *      Additional padding for the boundaries
+     *
+     * @param {Array} [options.preventOverflowOrder=['left', 'right', 'top', 'bottom']]
+     *      Order used when Popper.js tries to avoid overflows from the boundaries, they will be checked in order,
+     *      this means that the last ones will never overflow
+     *
+     * @param {String|Array} [options.flipBehavior='flip']
+     *      The behavior used by the `flip` modifier to change the placement of the popper when the latter is trying to
+     *      overlap its reference element. Defining `flip` as value, the placement will be flipped on
+     *      its axis (`right - left`, `top - bottom`).
+     *      You can even pass an array of placements (eg: `['right', 'left', 'top']` ) to manually specify
+     *      how alter the placement when a flip is needed. (eg. in the above example, it would first flip from right to left,
+     *      then, if even in its new placement, the popper is overlapping its reference element, it will be moved to top)
+     *
+     * @param {Array} [options.modifiers=[ 'shift', 'offset', 'preventOverflow', 'keepTogether', 'arrow', 'flip', 'applyStyle']]
+     *      List of functions used to modify the data before they are applied to the popper, add your custom functions
+     *      to this array to edit the offsets and placement.
+     *      The function should reflect the @params and @returns of preventOverflow
+     *
+     * @param {Array} [options.modifiersIgnored=[]]
+     *      Put here any built-in modifier name you want to exclude from the modifiers list
+     *      The function should reflect the @params and @returns of preventOverflow
+     *
+     * @param {Boolean} [options.removeOnDestroy=false]
+     *      Set to true if you want to automatically remove the popper when you call the `destroy` method.
+     */
+    function Popper(reference, popper, options) {
+        this._reference = reference.jquery ? reference[0] : reference;
+        this.state = {};
+
+        // if the popper variable is a configuration object, parse it to generate an HTMLElement
+        // generate a default popper if is not defined
+        var isNotDefined = typeof popper === 'undefined' || popper === null;
+        var isConfig = popper && Object.prototype.toString.call(popper) === '[object Object]';
+        if (isNotDefined || isConfig) {
+            this._popper = this.parse(isConfig ? popper : {});
+        }
+        // otherwise, use the given HTMLElement as popper
+        else {
+            this._popper = popper.jquery ? popper[0] : popper;
+        }
+
+        // with {} we create a new object with the options inside it
+        this._options = Object.assign({}, DEFAULTS, options);
+
+        // refactoring modifiers' list
+        this._options.modifiers = this._options.modifiers.map(function(modifier){
+            // remove ignored modifiers
+            if (this._options.modifiersIgnored.indexOf(modifier) !== -1) return;
+
+            // set the x-placement attribute before everything else because it could be used to add margins to the popper
+            // margins needs to be calculated to get the correct popper offsets
+            if (modifier === 'applyStyle') {
+                this._popper.setAttribute('x-placement', this._options.placement);
+            }
+
+            // return predefined modifier identified by string or keep the custom one
+            return this.modifiers[modifier] || modifier;
+        }.bind(this));
+
+        // make sure to apply the popper position before any computation
+        this.state.position = this._getPosition(this._popper, this._reference);
+        setStyle(this._popper, { position: this.state.position});
+
+        // fire the first update to position the popper in the right place
+        this.update();
+
+        // setup event listeners, they will take care of update the position in specific situations
+        this._setupEventListeners();
+        return this;
+    }
+
+
+    //
+    // Methods
+    //
+    /**
+     * Destroy the popper
+     * @method
+     * @memberof Popper
+     */
+    Popper.prototype.destroy = function() {
+        this._popper.removeAttribute('x-placement');
+        this._popper.style.left = '';
+        this._popper.style.position = '';
+        this._popper.style.top = '';
+        this._popper.style[getSupportedPropertyName('transform')] = '';
+        this._removeEventListeners();
+
+        // remove the popper if user explicity asked for the deletion on destroy
+        if (this._options.removeOnDestroy) {
+            this._popper.remove();
+        }
+        return this;
+    };
+
+    /**
+     * Updates the position of the popper, computing the new offsets and applying the new style
+     * @method
+     * @memberof Popper
+     */
+    Popper.prototype.update = function() {
+        var data = { instance: this, styles: {} };
+
+        // store placement inside the data object, modifiers will be able to edit `placement` if needed
+        // and refer to _originalPlacement to know the original value
+        data.placement = this._options.placement;
+        data._originalPlacement = this._options.placement;
+
+        // compute the popper and reference offsets and put them inside data.offsets
+        data.offsets = this._getOffsets(this._popper, this._reference, data.placement);
+
+        // get boundaries
+        data.boundaries = this._getBoundaries(data, this._options.boundariesPadding, this._options.boundariesElement);
+
+        data = this.runModifiers(data, this._options.modifiers);
+
+        if (typeof this.state.updateCallback === 'function') {
+            this.state.updateCallback(data);
+        }
+
+    };
+
+    /**
+     * If a function is passed, it will be executed after the initialization of popper with as first argument the Popper instance.
+     * @method
+     * @memberof Popper
+     * @param {Function} callback
+     */
+    Popper.prototype.onCreate = function(callback) {
+        // the createCallbacks return as first argument the popper instance
+        callback(this);
+        return this;
+    };
+
+    /**
+     * If a function is passed, it will be executed after each update of popper with as first argument the set of coordinates and informations
+     * used to style popper and its arrow.
+     * NOTE: it doesn't get fired on the first call of the `Popper.update()` method inside the `Popper` constructor!
+     * @method
+     * @memberof Popper
+     * @param {Function} callback
+     */
+    Popper.prototype.onUpdate = function(callback) {
+        this.state.updateCallback = callback;
+        return this;
+    };
+
+    /**
+     * Helper used to generate poppers from a configuration file
+     * @method
+     * @memberof Popper
+     * @param config {Object} configuration
+     * @returns {HTMLElement} popper
+     */
+    Popper.prototype.parse = function(config) {
+        var defaultConfig = {
+            tagName: 'div',
+            classNames: [ 'popper' ],
+            attributes: [],
+            parent: root.document.body,
+            content: '',
+            contentType: 'text',
+            arrowTagName: 'div',
+            arrowClassNames: [ 'popper__arrow' ],
+            arrowAttributes: [ 'x-arrow']
+        };
+        config = Object.assign({}, defaultConfig, config);
+
+        var d = root.document;
+
+        var popper = d.createElement(config.tagName);
+        addClassNames(popper, config.classNames);
+        addAttributes(popper, config.attributes);
+        if (config.contentType === 'node') {
+            popper.appendChild(config.content.jquery ? config.content[0] : config.content);
+        }else if (config.contentType === 'html') {
+            popper.innerHTML = config.content;
+        } else {
+            popper.textContent = config.content;
+        }
+
+        if (config.arrowTagName) {
+            var arrow = d.createElement(config.arrowTagName);
+            addClassNames(arrow, config.arrowClassNames);
+            addAttributes(arrow, config.arrowAttributes);
+            popper.appendChild(arrow);
+        }
+
+        var parent = config.parent.jquery ? config.parent[0] : config.parent;
+
+        // if the given parent is a string, use it to match an element
+        // if more than one element is matched, the first one will be used as parent
+        // if no elements are matched, the script will throw an error
+        if (typeof parent === 'string') {
+            parent = d.querySelectorAll(config.parent);
+            if (parent.length > 1) {
+                console.warn('WARNING: the given `parent` query(' + config.parent + ') matched more than one element, the first one will be used');
+            }
+            if (parent.length === 0) {
+                throw 'ERROR: the given `parent` doesn\'t exists!';
+            }
+            parent = parent[0];
+        }
+        // if the given parent is a DOM nodes list or an array of nodes with more than one element,
+        // the first one will be used as parent
+        if (parent.length > 1 && parent instanceof Element === false) {
+            console.warn('WARNING: you have passed as parent a list of elements, the first one will be used');
+            parent = parent[0];
+        }
+
+        // append the generated popper to its parent
+        parent.appendChild(popper);
+
+        return popper;
+
+        /**
+         * Adds class names to the given element
+         * @function
+         * @ignore
+         * @param {HTMLElement} target
+         * @param {Array} classes
+         */
+        function addClassNames(element, classNames) {
+            classNames.forEach(function(className) {
+                element.classList.add(className);
+            });
+        }
+
+        /**
+         * Adds attributes to the given element
+         * @function
+         * @ignore
+         * @param {HTMLElement} target
+         * @param {Array} attributes
+         * @example
+         * addAttributes(element, [ 'data-info:foobar' ]);
+         */
+        function addAttributes(element, attributes) {
+            attributes.forEach(function(attribute) {
+                element.setAttribute(attribute.split(':')[0], attribute.split(':')[1] || '');
+            });
+        }
+
+    };
+
+    /**
+     * Helper used to get the position which will be applied to the popper
+     * @method
+     * @memberof Popper
+     * @param config {HTMLElement} popper element
+     * @returns {HTMLElement} reference element
+     */
+    Popper.prototype._getPosition = function(popper, reference) {
+        var container = getOffsetParent(reference);
+
+        if (this._options.forceAbsolute) {
+            return 'absolute';
+        }
+
+        // Decide if the popper will be fixed
+        // If the reference element is inside a fixed context, the popper will be fixed as well to allow them to scroll together
+        var isParentFixed = isFixed(reference, container);
+        return isParentFixed ? 'fixed' : 'absolute';
+    };
+
+    /**
+     * Get offsets to the popper
+     * @method
+     * @memberof Popper
+     * @access private
+     * @param {Element} popper - the popper element
+     * @param {Element} reference - the reference element (the popper will be relative to this)
+     * @returns {Object} An object containing the offsets which will be applied to the popper
+     */
+    Popper.prototype._getOffsets = function(popper, reference, placement) {
+        placement = placement.split('-')[0];
+        var popperOffsets = {};
+
+        popperOffsets.position = this.state.position;
+        var isParentFixed = popperOffsets.position === 'fixed';
+
+        //
+        // Get reference element position
+        //
+        var referenceOffsets = getOffsetRectRelativeToCustomParent(reference, getOffsetParent(popper), isParentFixed);
+
+        //
+        // Get popper sizes
+        //
+        var popperRect = getOuterSizes(popper);
+
+        //
+        // Compute offsets of popper
+        //
+
+        // depending by the popper placement we have to compute its offsets slightly differently
+        if (['right', 'left'].indexOf(placement) !== -1) {
+            popperOffsets.top = referenceOffsets.top + referenceOffsets.height / 2 - popperRect.height / 2;
+            if (placement === 'left') {
+                popperOffsets.left = referenceOffsets.left - popperRect.width;
+            } else {
+                popperOffsets.left = referenceOffsets.right;
+            }
+        } else {
+            popperOffsets.left = referenceOffsets.left + referenceOffsets.width / 2 - popperRect.width / 2;
+            if (placement === 'top') {
+                popperOffsets.top = referenceOffsets.top - popperRect.height;
+            } else {
+                popperOffsets.top = referenceOffsets.bottom;
+            }
+        }
+
+        // Add width and height to our offsets object
+        popperOffsets.width   = popperRect.width;
+        popperOffsets.height  = popperRect.height;
+
+
+        return {
+            popper: popperOffsets,
+            reference: referenceOffsets
+        };
+    };
+
+
+    /**
+     * Setup needed event listeners used to update the popper position
+     * @method
+     * @memberof Popper
+     * @access private
+     */
+    Popper.prototype._setupEventListeners = function() {
+        // NOTE: 1 DOM access here
+        this.state.updateBound = this.update.bind(this);
+        root.addEventListener('resize', this.state.updateBound);
+        // if the boundariesElement is window we don't need to listen for the scroll event
+        if (this._options.boundariesElement !== 'window') {
+            var target = getScrollParent(this._reference);
+            // here it could be both `body` or `documentElement` thanks to Firefox, we then check both
+            if (target === root.document.body || target === root.document.documentElement) {
+                target = root;
+            }
+            target.addEventListener('scroll', this.state.updateBound);
+        }
+    };
+
+    /**
+     * Remove event listeners used to update the popper position
+     * @method
+     * @memberof Popper
+     * @access private
+     */
+    Popper.prototype._removeEventListeners = function() {
+        // NOTE: 1 DOM access here
+        root.removeEventListener('resize', this.state.updateBound);
+        if (this._options.boundariesElement !== 'window') {
+            var target = getScrollParent(this._reference);
+            // here it could be both `body` or `documentElement` thanks to Firefox, we then check both
+            if (target === root.document.body || target === root.document.documentElement) {
+                target = root;
+            }
+            target.removeEventListener('scroll', this.state.updateBound);
+        }
+        this.state.updateBound = null;
+    };
+
+    /**
+     * Computed the boundaries limits and return them
+     * @method
+     * @memberof Popper
+     * @access private
+     * @param {Object} data - Object containing the property "offsets" generated by `_getOffsets`
+     * @param {Number} padding - Boundaries padding
+     * @param {Element} boundariesElement - Element used to define the boundaries
+     * @returns {Object} Coordinates of the boundaries
+     */
+    Popper.prototype._getBoundaries = function(data, padding, boundariesElement) {
+        // NOTE: 1 DOM access here
+        var boundaries = {};
+        var width, height;
+        if (boundariesElement === 'window') {
+            var body = root.document.body,
+                html = root.document.documentElement;
+
+            height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
+            width = Math.max( body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth );
+
+            boundaries = {
+                top: 0,
+                right: width,
+                bottom: height,
+                left: 0
+            };
+        } else if (boundariesElement === 'viewport') {
+            var offsetParent = getOffsetParent(this._popper);
+            var scrollParent = getScrollParent(this._popper);
+            var offsetParentRect = getOffsetRect(offsetParent);
+
+            // if the popper is fixed we don't have to substract scrolling from the boundaries
+            var scrollTop = data.offsets.popper.position === 'fixed' ? 0 : scrollParent.scrollTop;
+            var scrollLeft = data.offsets.popper.position === 'fixed' ? 0 : scrollParent.scrollLeft;
+
+            boundaries = {
+                top: 0 - (offsetParentRect.top - scrollTop),
+                right: root.document.documentElement.clientWidth - (offsetParentRect.left - scrollLeft),
+                bottom: root.document.documentElement.clientHeight - (offsetParentRect.top - scrollTop),
+                left: 0 - (offsetParentRect.left - scrollLeft)
+            };
+        } else {
+            if (getOffsetParent(this._popper) === boundariesElement) {
+                boundaries = {
+                    top: 0,
+                    left: 0,
+                    right: boundariesElement.clientWidth,
+                    bottom: boundariesElement.clientHeight
+                };
+            } else {
+                boundaries = getOffsetRect(boundariesElement);
+            }
+        }
+        boundaries.left += padding;
+        boundaries.right -= padding;
+        boundaries.top = boundaries.top + padding;
+        boundaries.bottom = boundaries.bottom - padding;
+        return boundaries;
+    };
+
+
+    /**
+     * Loop trough the list of modifiers and run them in order, each of them will then edit the data object
+     * @method
+     * @memberof Popper
+     * @access public
+     * @param {Object} data
+     * @param {Array} modifiers
+     * @param {Function} ends
+     */
+    Popper.prototype.runModifiers = function(data, modifiers, ends) {
+        var modifiersToRun = modifiers.slice();
+        if (ends !== undefined) {
+            modifiersToRun = this._options.modifiers.slice(0, getArrayKeyIndex(this._options.modifiers, ends));
+        }
+
+        modifiersToRun.forEach(function(modifier) {
+            if (isFunction(modifier)) {
+                data = modifier.call(this, data);
+            }
+        }.bind(this));
+
+        return data;
+    };
+
+    /**
+     * Helper used to know if the given modifier depends from another one.
+     * @method
+     * @memberof Popper
+     * @returns {Boolean}
+     */
+
+    Popper.prototype.isModifierRequired = function(requesting, requested) {
+        var index = getArrayKeyIndex(this._options.modifiers, requesting);
+        return !!this._options.modifiers.slice(0, index).filter(function(modifier) {
+            return modifier === requested;
+        }).length;
+    };
+
+    //
+    // Modifiers
+    //
+
+    /**
+     * Modifiers list
+     * @namespace Popper.modifiers
+     * @memberof Popper
+     * @type {Object}
+     */
+    Popper.prototype.modifiers = {};
+
+    /**
+     * Apply the computed styles to the popper element
+     * @method
+     * @memberof Popper.modifiers
+     * @argument {Object} data - The data object generated by `update` method
+     * @returns {Object} The same data object
+     */
+    Popper.prototype.modifiers.applyStyle = function(data) {
+        // apply the final offsets to the popper
+        // NOTE: 1 DOM access here
+        var styles = {
+            position: data.offsets.popper.position
+        };
+
+        // round top and left to avoid blurry text
+        var left = Math.round(data.offsets.popper.left);
+        var top = Math.round(data.offsets.popper.top);
+
+        // if gpuAcceleration is set to true and transform is supported, we use `translate3d` to apply the position to the popper
+        // we automatically use the supported prefixed version if needed
+        var prefixedProperty;
+        if (this._options.gpuAcceleration && (prefixedProperty = getSupportedPropertyName('transform'))) {
+            styles[prefixedProperty] = 'translate3d(' + left + 'px, ' + top + 'px, 0)';
+            styles.top = 0;
+            styles.left = 0;
+        }
+        // othwerise, we use the standard `left` and `top` properties
+        else {
+            styles.left =left;
+            styles.top = top;
+        }
+
+        // any property present in `data.styles` will be applied to the popper,
+        // in this way we can make the 3rd party modifiers add custom styles to it
+        // Be aware, modifiers could override the properties defined in the previous
+        // lines of this modifier!
+        Object.assign(styles, data.styles);
+
+        setStyle(this._popper, styles);
+
+        // set an attribute which will be useful to style the tooltip (use it to properly position its arrow)
+        // NOTE: 1 DOM access here
+        this._popper.setAttribute('x-placement', data.placement);
+
+        // if the arrow modifier is required and the arrow style has been computed, apply the arrow style
+        if (this.isModifierRequired(this.modifiers.applyStyle, this.modifiers.arrow) && data.offsets.arrow) {
+            setStyle(data.arrowElement, data.offsets.arrow);
+        }
+
+        return data;
+    };
+
+    /**
+     * Modifier used to shift the popper on the start or end of its reference element side
+     * @method
+     * @memberof Popper.modifiers
+     * @argument {Object} data - The data object generated by `update` method
+     * @returns {Object} The data object, properly modified
+     */
+    Popper.prototype.modifiers.shift = function(data) {
+        var placement = data.placement;
+        var basePlacement = placement.split('-')[0];
+        var shiftVariation = placement.split('-')[1];
+
+        // if shift shiftVariation is specified, run the modifier
+        if (shiftVariation) {
+            var reference = data.offsets.reference;
+            var popper = getPopperClientRect(data.offsets.popper);
+
+            var shiftOffsets = {
+                y: {
+                    start:  { top: reference.top },
+                    end:    { top: reference.top + reference.height - popper.height }
+                },
+                x: {
+                    start:  { left: reference.left },
+                    end:    { left: reference.left + reference.width - popper.width }
+                }
+            };
+
+            var axis = ['bottom', 'top'].indexOf(basePlacement) !== -1 ? 'x' : 'y';
+
+            data.offsets.popper = Object.assign(popper, shiftOffsets[axis][shiftVariation]);
+        }
+
+        return data;
+    };
+
+
+    /**
+     * Modifier used to make sure the popper does not overflows from it's boundaries
+     * @method
+     * @memberof Popper.modifiers
+     * @argument {Object} data - The data object generated by `update` method
+     * @returns {Object} The data object, properly modified
+     */
+    Popper.prototype.modifiers.preventOverflow = function(data) {
+        var order = this._options.preventOverflowOrder;
+        var popper = getPopperClientRect(data.offsets.popper);
+
+        var check = {
+            left: function() {
+                var left = popper.left;
+                if (popper.left < data.boundaries.left) {
+                    left = Math.max(popper.left, data.boundaries.left);
+                }
+                return { left: left };
+            },
+            right: function() {
+                var left = popper.left;
+                if (popper.right > data.boundaries.right) {
+                    left = Math.min(popper.left, data.boundaries.right - popper.width);
+                }
+                return { left: left };
+            },
+            top: function() {
+                var top = popper.top;
+                if (popper.top < data.boundaries.top) {
+                    top = Math.max(popper.top, data.boundaries.top);
+                }
+                return { top: top };
+            },
+            bottom: function() {
+                var top = popper.top;
+                if (popper.bottom > data.boundaries.bottom) {
+                    top = Math.min(popper.top, data.boundaries.bottom - popper.height);
+                }
+                return { top: top };
+            }
+        };
+
+        order.forEach(function(direction) {
+            data.offsets.popper = Object.assign(popper, check[direction]());
+        });
+
+        return data;
+    };
+
+    /**
+     * Modifier used to make sure the popper is always near its reference
+     * @method
+     * @memberof Popper.modifiers
+     * @argument {Object} data - The data object generated by _update method
+     * @returns {Object} The data object, properly modified
+     */
+    Popper.prototype.modifiers.keepTogether = function(data) {
+        var popper  = getPopperClientRect(data.offsets.popper);
+        var reference = data.offsets.reference;
+        var f = Math.floor;
+
+        if (popper.right < f(reference.left)) {
+            data.offsets.popper.left = f(reference.left) - popper.width;
+        }
+        if (popper.left > f(reference.right)) {
+            data.offsets.popper.left = f(reference.right);
+        }
+        if (popper.bottom < f(reference.top)) {
+            data.offsets.popper.top = f(reference.top) - popper.height;
+        }
+        if (popper.top > f(reference.bottom)) {
+            data.offsets.popper.top = f(reference.bottom);
+        }
+
+        return data;
+    };
+
+    /**
+     * Modifier used to flip the placement of the popper when the latter is starting overlapping its reference element.
+     * Requires the `preventOverflow` modifier before it in order to work.
+     * **NOTE:** This modifier will run all its previous modifiers everytime it tries to flip the popper!
+     * @method
+     * @memberof Popper.modifiers
+     * @argument {Object} data - The data object generated by _update method
+     * @returns {Object} The data object, properly modified
+     */
+    Popper.prototype.modifiers.flip = function(data) {
+        // check if preventOverflow is in the list of modifiers before the flip modifier.
+        // otherwise flip would not work as expected.
+        if (!this.isModifierRequired(this.modifiers.flip, this.modifiers.preventOverflow)) {
+            console.warn('WARNING: preventOverflow modifier is required by flip modifier in order to work, be sure to include it before flip!');
+            return data;
+        }
+
+        if (data.flipped && data.placement === data._originalPlacement) {
+            // seems like flip is trying to loop, probably there's not enough space on any of the flippable sides
+            return data;
+        }
+
+        var placement = data.placement.split('-')[0];
+        var placementOpposite = getOppositePlacement(placement);
+        var variation = data.placement.split('-')[1] || '';
+
+        var flipOrder = [];
+        if(this._options.flipBehavior === 'flip') {
+            flipOrder = [
+                placement,
+                placementOpposite
+            ];
+        } else {
+            flipOrder = this._options.flipBehavior;
+        }
+
+        flipOrder.forEach(function(step, index) {
+            if (placement !== step || flipOrder.length === index + 1) {
+                return;
+            }
+
+            placement = data.placement.split('-')[0];
+            placementOpposite = getOppositePlacement(placement);
+
+            var popperOffsets = getPopperClientRect(data.offsets.popper);
+
+            // this boolean is used to distinguish right and bottom from top and left
+            // they need different computations to get flipped
+            var a = ['right', 'bottom'].indexOf(placement) !== -1;
+
+            // using Math.floor because the reference offsets may contain decimals we are not going to consider here
+            if (
+                a && Math.floor(data.offsets.reference[placement]) > Math.floor(popperOffsets[placementOpposite]) ||
+                !a && Math.floor(data.offsets.reference[placement]) < Math.floor(popperOffsets[placementOpposite])
+            ) {
+                // we'll use this boolean to detect any flip loop
+                data.flipped = true;
+                data.placement = flipOrder[index + 1];
+                if (variation) {
+                    data.placement += '-' + variation;
+                }
+                data.offsets.popper = this._getOffsets(this._popper, this._reference, data.placement).popper;
+
+                data = this.runModifiers(data, this._options.modifiers, this._flip);
+            }
+        }.bind(this));
+        return data;
+    };
+
+    /**
+     * Modifier used to add an offset to the popper, useful if you more granularity positioning your popper.
+     * The offsets will shift the popper on the side of its reference element.
+     * @method
+     * @memberof Popper.modifiers
+     * @argument {Object} data - The data object generated by _update method
+     * @returns {Object} The data object, properly modified
+     */
+    Popper.prototype.modifiers.offset = function(data) {
+        var offset = this._options.offset;
+        var popper  = data.offsets.popper;
+
+        if (data.placement.indexOf('left') !== -1) {
+            popper.top -= offset;
+        }
+        else if (data.placement.indexOf('right') !== -1) {
+            popper.top += offset;
+        }
+        else if (data.placement.indexOf('top') !== -1) {
+            popper.left -= offset;
+        }
+        else if (data.placement.indexOf('bottom') !== -1) {
+            popper.left += offset;
+        }
+        return data;
+    };
+
+    /**
+     * Modifier used to move the arrows on the edge of the popper to make sure them are always between the popper and the reference element
+     * It will use the CSS outer size of the arrow element to know how many pixels of conjuction are needed
+     * @method
+     * @memberof Popper.modifiers
+     * @argument {Object} data - The data object generated by _update method
+     * @returns {Object} The data object, properly modified
+     */
+    Popper.prototype.modifiers.arrow = function(data) {
+        var arrow  = this._options.arrowElement;
+
+        // if the arrowElement is a string, suppose it's a CSS selector
+        if (typeof arrow === 'string') {
+            arrow = this._popper.querySelector(arrow);
+        }
+
+        // if arrow element is not found, don't run the modifier
+        if (!arrow) {
+            return data;
+        }
+
+        // the arrow element must be child of its popper
+        if (!this._popper.contains(arrow)) {
+            console.warn('WARNING: `arrowElement` must be child of its popper element!');
+            return data;
+        }
+
+        // arrow depends on keepTogether in order to work
+        if (!this.isModifierRequired(this.modifiers.arrow, this.modifiers.keepTogether)) {
+            console.warn('WARNING: keepTogether modifier is required by arrow modifier in order to work, be sure to include it before arrow!');
+            return data;
+        }
+
+        var arrowStyle  = {};
+        var placement   = data.placement.split('-')[0];
+        var popper      = getPopperClientRect(data.offsets.popper);
+        var reference   = data.offsets.reference;
+        var isVertical  = ['left', 'right'].indexOf(placement) !== -1;
+
+        var len         = isVertical ? 'height' : 'width';
+        var side        = isVertical ? 'top' : 'left';
+        var altSide     = isVertical ? 'left' : 'top';
+        var opSide      = isVertical ? 'bottom' : 'right';
+        var arrowSize   = getOuterSizes(arrow)[len];
+
+        //
+        // extends keepTogether behavior making sure the popper and its reference have enough pixels in conjuction
+        //
+
+        // top/left side
+        if (reference[opSide] - arrowSize < popper[side]) {
+            data.offsets.popper[side] -= popper[side] - (reference[opSide] - arrowSize);
+        }
+        // bottom/right side
+        if (reference[side] + arrowSize > popper[opSide]) {
+            data.offsets.popper[side] += (reference[side] + arrowSize) - popper[opSide];
+        }
+
+        // compute center of the popper
+        var center = reference[side] + (reference[len] / 2) - (arrowSize / 2);
+
+        var sideValue = center - popper[side];
+
+        // prevent arrow from being placed not contiguously to its popper
+        sideValue = Math.max(Math.min(popper[len] - arrowSize, sideValue), 0);
+        arrowStyle[side] = sideValue;
+        arrowStyle[altSide] = ''; // make sure to remove any old style from the arrow
+
+        data.offsets.arrow = arrowStyle;
+        data.arrowElement = arrow;
+
+        return data;
+    };
+
+
+    //
+    // Helpers
+    //
+
+    /**
+     * Get the outer sizes of the given element (offset size + margins)
+     * @function
+     * @ignore
+     * @argument {Element} element
+     * @returns {Object} object containing width and height properties
+     */
+    function getOuterSizes(element) {
+        // NOTE: 1 DOM access here
+        var _display = element.style.display, _visibility = element.style.visibility;
+        element.style.display = 'block'; element.style.visibility = 'hidden';
+        var calcWidthToForceRepaint = element.offsetWidth;
+
+        // original method
+        var styles = root.getComputedStyle(element);
+        var x = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
+        var y = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);
+        var result = { width: element.offsetWidth + y, height: element.offsetHeight + x };
+
+        // reset element styles
+        element.style.display = _display; element.style.visibility = _visibility;
+        return result;
+    }
+
+    /**
+     * Get the opposite placement of the given one/
+     * @function
+     * @ignore
+     * @argument {String} placement
+     * @returns {String} flipped placement
+     */
+    function getOppositePlacement(placement) {
+        var hash = {left: 'right', right: 'left', bottom: 'top', top: 'bottom' };
+        return placement.replace(/left|right|bottom|top/g, function(matched){
+            return hash[matched];
+        });
+    }
+
+    /**
+     * Given the popper offsets, generate an output similar to getBoundingClientRect
+     * @function
+     * @ignore
+     * @argument {Object} popperOffsets
+     * @returns {Object} ClientRect like output
+     */
+    function getPopperClientRect(popperOffsets) {
+        var offsets = Object.assign({}, popperOffsets);
+        offsets.right = offsets.left + offsets.width;
+        offsets.bottom = offsets.top + offsets.height;
+        return offsets;
+    }
+
+    /**
+     * Given an array and the key to find, returns its index
+     * @function
+     * @ignore
+     * @argument {Array} arr
+     * @argument keyToFind
+     * @returns index or null
+     */
+    function getArrayKeyIndex(arr, keyToFind) {
+        var i = 0, key;
+        for (key in arr) {
+            if (arr[key] === keyToFind) {
+                return i;
+            }
+            i++;
+        }
+        return null;
+    }
+
+    /**
+     * Get CSS computed property of the given element
+     * @function
+     * @ignore
+     * @argument {Eement} element
+     * @argument {String} property
+     */
+    function getStyleComputedProperty(element, property) {
+        // NOTE: 1 DOM access here
+        var css = root.getComputedStyle(element, null);
+        return css[property];
+    }
+
+    /**
+     * Returns the offset parent of the given element
+     * @function
+     * @ignore
+     * @argument {Element} element
+     * @returns {Element} offset parent
+     */
+    function getOffsetParent(element) {
+        // NOTE: 1 DOM access here
+        var offsetParent = element.offsetParent;
+        return offsetParent === root.document.body || !offsetParent ? root.document.documentElement : offsetParent;
+    }
+
+    /**
+     * Returns the scrolling parent of the given element
+     * @function
+     * @ignore
+     * @argument {Element} element
+     * @returns {Element} offset parent
+     */
+    function getScrollParent(element) {
+        if (element === root.document) {
+            // Firefox puts the scrollTOp value on `documentElement` instead of `body`, we then check which of them is
+            // greater than 0 and return the proper element
+            if (root.document.body.scrollTop) {
+                return root.document.body;
+            } else {
+                return root.document.documentElement;
+            }
+        }
+
+        // Firefox want us to check `-x` and `-y` variations as well
+        if (
+            ['scroll', 'auto'].indexOf(getStyleComputedProperty(element, 'overflow')) !== -1 ||
+            ['scroll', 'auto'].indexOf(getStyleComputedProperty(element, 'overflow-x')) !== -1 ||
+            ['scroll', 'auto'].indexOf(getStyleComputedProperty(element, 'overflow-y')) !== -1
+        ) {
+            return element;
+        }
+        return element.parentNode ? getScrollParent(element.parentNode) : element;
+    }
+
+    /**
+     * Check if the given element is fixed or is inside a fixed parent
+     * @function
+     * @ignore
+     * @argument {Element} element
+     * @argument {Element} customContainer
+     * @returns {Boolean} answer to "isFixed?"
+     */
+    function isFixed(element) {
+        if (element === root.document.body) {
+            return false;
+        }
+        if (getStyleComputedProperty(element, 'position') === 'fixed') {
+            return true;
+        }
+        return element.parentNode ? isFixed(element.parentNode) : element;
+    }
+
+    /**
+     * Set the style to the given popper
+     * @function
+     * @ignore
+     * @argument {Element} element - Element to apply the style to
+     * @argument {Object} styles - Object with a list of properties and values which will be applied to the element
+     */
+    function setStyle(element, styles) {
+        function is_numeric(n) {
+            return (n !== '' && !isNaN(parseFloat(n)) && isFinite(n));
+        }
+        Object.keys(styles).forEach(function(prop) {
+            var unit = '';
+            // add unit if the value is numeric and is one of the following
+            if (['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !== -1 && is_numeric(styles[prop])) {
+                unit = 'px';
+            }
+            element.style[prop] = styles[prop] + unit;
+        });
+    }
+
+    /**
+     * Check if the given variable is a function
+     * @function
+     * @ignore
+     * @argument {Element} element - Element to check
+     * @returns {Boolean} answer to: is a function?
+     */
+    function isFunction(functionToCheck) {
+        var getType = {};
+        return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
+    }
+
+    /**
+     * Get the position of the given element, relative to its offset parent
+     * @function
+     * @ignore
+     * @param {Element} element
+     * @return {Object} position - Coordinates of the element and its `scrollTop`
+     */
+    function getOffsetRect(element) {
+        var elementRect = {
+            width: element.offsetWidth,
+            height: element.offsetHeight,
+            left: element.offsetLeft,
+            top: element.offsetTop
+        };
+
+        elementRect.right = elementRect.left + elementRect.width;
+        elementRect.bottom = elementRect.top + elementRect.height;
+
+        // position
+        return elementRect;
+    }
+
+    /**
+     * Get bounding client rect of given element
+     * @function
+     * @ignore
+     * @param {HTMLElement} element
+     * @return {Object} client rect
+     */
+    function getBoundingClientRect(element) {
+        var rect = element.getBoundingClientRect();
+        return {
+            left: rect.left,
+            top: rect.top,
+            right: rect.right,
+            bottom: rect.bottom,
+            width: rect.right - rect.left,
+            height: rect.bottom - rect.top
+        };
+    }
+
+    /**
+     * Given an element and one of its parents, return the offset
+     * @function
+     * @ignore
+     * @param {HTMLElement} element
+     * @param {HTMLElement} parent
+     * @return {Object} rect
+     */
+    function getOffsetRectRelativeToCustomParent(element, parent, fixed) {
+        var elementRect = getBoundingClientRect(element);
+        var parentRect = getBoundingClientRect(parent);
+
+        if (fixed) {
+            var scrollParent = getScrollParent(parent);
+            parentRect.top += scrollParent.scrollTop;
+            parentRect.bottom += scrollParent.scrollTop;
+            parentRect.left += scrollParent.scrollLeft;
+            parentRect.right += scrollParent.scrollLeft;
+        }
+
+        var rect = {
+            top: elementRect.top - parentRect.top ,
+            left: elementRect.left - parentRect.left ,
+            bottom: (elementRect.top - parentRect.top) + elementRect.height,
+            right: (elementRect.left - parentRect.left) + elementRect.width,
+            width: elementRect.width,
+            height: elementRect.height
+        };
+        return rect;
+    }
+
+    /**
+     * Get the prefixed supported property name
+     * @function
+     * @ignore
+     * @argument {String} property (camelCase)
+     * @returns {String} prefixed property (camelCase)
+     */
+    function getSupportedPropertyName(property) {
+        var prefixes = ['', 'ms', 'webkit', 'moz', 'o'];
+
+        for (var i = 0; i < prefixes.length; i++) {
+            var toCheck = prefixes[i] ? prefixes[i] + property.charAt(0).toUpperCase() + property.slice(1) : property;
+            if (typeof root.document.body.style[toCheck] !== 'undefined') {
+                return toCheck;
+            }
+        }
+        return null;
+    }
+
+    /**
+     * The Object.assign() method is used to copy the values of all enumerable own properties from one or more source
+     * objects to a target object. It will return the target object.
+     * This polyfill doesn't support symbol properties, since ES5 doesn't have symbols anyway
+     * Source: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
+     * @function
+     * @ignore
+     */
+    if (!Object.assign) {
+        Object.defineProperty(Object, 'assign', {
+            enumerable: false,
+            configurable: true,
+            writable: true,
+            value: function(target) {
+                if (target === undefined || target === null) {
+                    throw new TypeError('Cannot convert first argument to object');
+                }
+
+                var to = Object(target);
+                for (var i = 1; i < arguments.length; i++) {
+                    var nextSource = arguments[i];
+                    if (nextSource === undefined || nextSource === null) {
+                        continue;
+                    }
+                    nextSource = Object(nextSource);
+
+                    var keysArray = Object.keys(nextSource);
+                    for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
+                        var nextKey = keysArray[nextIndex];
+                        var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
+                        if (desc !== undefined && desc.enumerable) {
+                            to[nextKey] = nextSource[nextKey];
+                        }
+                    }
+                }
+                return to;
+            }
+        });
+    }
+
+    return Popper;
+}));
diff --git a/src/utils/vue-popper.js b/src/utils/vue-popper.js
new file mode 100644
index 000000000..9f8c58e09
--- /dev/null
+++ b/src/utils/vue-popper.js
@@ -0,0 +1,144 @@
+import PopperJS from './popper';
+
+/**
+ * @param {HTMLElement} [reference=$els.reference] - The reference element used to position the popper.
+ * @param {HTMLElement} [popper=$els.popper] - The HTML element used as popper, or a configuration used to generate the popper.
+ * @param {String} [placement=button] - Placement of the popper accepted values: top(-start, -end), right(-start, -end), bottom(-start, -right), left(-start, -end)
+ * @param {Number} [offset=0] - Amount of pixels the popper will be shifted (can be negative).
+ * @param {Boolean} [visible=false] Visibility of the popup element.
+ * @param {Boolean} [visible-arrow=false] Visibility of the arrow, no style.
+ */
+export default {
+  props: {
+    placement: {
+      type: String,
+      default: 'bottom'
+    },
+    boundariesPadding: {
+      type: Number,
+      default: 5
+    },
+    reference: Object,
+    popper: Object,
+    offset: {
+      default: 0
+    },
+    visible: Boolean,
+    visibleArrow: Boolean,
+    transition: String,
+    options: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+
+  watch: {
+    'visible'(val) {
+      if (this.popperDestroying) return;
+      val ? this.updatePopper() : this.destroyPopper();
+    }
+  },
+
+  methods: {
+    createPopper() {
+      if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(this.placement)) {
+        return;
+      }
+
+      this.popper = this.popper || this.$els.popper;
+      this.reference = this.reference || this.$els.reference;
+
+      if (!this.popper || !this.reference) {
+        return;
+      }
+
+      if (this.visibleArrow) {
+        this.appendArrow(this.popper);
+      }
+
+      if (this.popperJS && this.popperJS.hasOwnProperty('destroy')) {
+        this.popperJS.destroy();
+      }
+
+      this.$set('options.placement', this.placement);
+      this.$set('options.offset', this.offset);
+
+      this.popperJS = new PopperJS(
+        this.reference,
+        this.popper,
+        this.options
+      );
+      this.popperJS.onCreate(popper => {
+        this.resetTransformOrigin(popper);
+        this.$emit('created', this);
+      });
+    },
+
+    updatePopper() {
+      if (this.popperJS) {
+        this.popperJS.update();
+      } else {
+        this.createPopper();
+      }
+    },
+
+    doDestroy() {
+      if (this.visible) return;
+
+      this.popperJS._popper.removeEventListener('transitionend', this.doDestroy);
+      this.popperJS.destroy();
+      this.popperJS = null;
+    },
+
+    destroyPopper() {
+      if (this.popperJS) {
+        this.resetTransformOrigin(this.popperJS);
+        if (this.transition) {
+          this.popperJS._popper.addEventListener('transitionend', this.doDestroy);
+        } else {
+          this.doDestroy();
+        }
+      }
+    },
+
+    resetTransformOrigin(popper) {
+      let placementMap = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' };
+      let placement = popper._popper.getAttribute('x-placement').split('-')[0];
+      let origin = placementMap[placement];
+      popper._popper.style.transformOrigin = ['top', 'bottom'].indexOf(placement) > -1 ? `center ${ origin }` : `${ origin } center`;
+    },
+
+    appendArrow(element) {
+      let hash;
+      if (this.appended) {
+        return;
+      }
+
+      this.appended = true;
+
+      for (let item in element.attributes) {
+        if (/^_v-/.test(element.attributes[item].name)) {
+          hash = element.attributes[item].name;
+          break;
+        }
+      }
+
+      const arrow = document.createElement('div');
+
+      if (hash) {
+        arrow.setAttribute(hash, '');
+      }
+      arrow.setAttribute('x-arrow', '');
+      arrow.className = 'popper__arrow';
+      element.appendChild(arrow);
+    }
+  },
+
+  beforeDestroy() {
+    if (this.popperJS) {
+      this.popperJS.destroy();
+    }
+  }
+};