diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 00000000..1f6aca1c
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,20 @@
+root = true
+
+[*]
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.wxml]
+indent_size = 2
+
+[*.wxss]
+indent_size = 2
+
+[*.js]
+indent_size = 2
+
+[*.json]
+indent_size = 2
diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 00000000..5b990b89
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,43 @@
+{
+    "extends": "airbnb",
+    "globals": {
+        "getApp": false,
+        "Page": false,
+        "App": false,
+        "wx": false
+    },
+    "parser": "babel-eslint",
+    "rules": {
+        "no-extend-native": 0,
+        "no-shadow": 0,
+        "no-loop-func": 0,
+        "no-console": 0,
+        "no-var": 0,
+        "vars-on-top": 0,
+        "new-cap": 0,
+        "no-used-var": 0,
+        "semi": [
+            1,
+            "always",
+            {
+                "omitLastInOneLineBlock": true
+            }
+        ],
+        "camelcase": 1,
+        "prefer-template": 0,
+        "eqeqeq": 0,
+        "max-len": 0,
+        "react/prefer-stateless-function": 0,
+        "comma-dangle": 0,
+        "func-names": 0,
+        "prefer-const": 0,
+        "arrow-body-style": 0,
+        "no-param-reassign": 0,
+        "no-return-assign": 0,
+        "consistent-return": 0,
+        "no-unused-expressions": 0,
+        "no-underscore-dangle": 0,
+        "no-use-before-define": 0,
+        "no-new": 0
+    }
+}
diff --git a/pages/tab/index.js b/pages/tab/index.js
index 8d700913..ec90dec5 100644
--- a/pages/tab/index.js
+++ b/pages/tab/index.js
@@ -1,4 +1,6 @@
-Page({
+var ZUI = require('../../zui/index');
+
+Page(Object.assign({}, ZUI.Tab, {
   data: {
     tab1: {
       list: [{
@@ -45,26 +47,13 @@ Page({
     }
   },
 
-  _handleComponentTabChange(e) {
-    var dataset = e.currentTarget.dataset;
-    var componentId = dataset.componentId;
-    var selectedId = dataset.itemId;
-
-    if (this.handleComponentTabChange) {
-      this.handleComponentTabChange({
-        componentId,
-        selectedId
-      });
-    }
-  },
-
-  handleComponentTabChange(e) {
-    console.log('[handleComponentTabChange]', e);
-    var componentId = e.componentId;
+  handleZuiTabChange(e) {
+    console.info('[ZUI:Tab:Change]', e);
+    var id = e.id;
     var selectedId = e.selectedId;
 
     this.setData({
-      [`${componentId}.selectedId`]: selectedId
+      [`${id}.selectedId`]: selectedId
     });
   }
-});
+}));
diff --git a/pages/tab/index.wxml b/pages/tab/index.wxml
index 2ac205c5..12cb9134 100644
--- a/pages/tab/index.wxml
+++ b/pages/tab/index.wxml
@@ -1,36 +1,10 @@
-<template name="component-tab">
-  <view class="zui-tab">
-      <block wx:if="{{tab.scroll}}">
-        <scroll-view class="zui-tab__bd zui-tab__bd--scroll {{fixed ? 'zui-tab__bd--fixed' : ''}}" scroll-x="true">
-          <template is="component-tab-list" data="{{ tab, componentId }}"></template>
-        </scroll-view>
-      </block>
-      <block wx:else>
-        <view class="zui-tab__bd">
-          <template is="component-tab-list" data="{{ tab, componentId }}"></template>
-        </view>
-      </block>
-  </view>
-</template>
-
-<template name="component-tab-list">
-  <view
-    wx:for="{{tab.list}}"
-    wx:key="id"
-    class="zui-tab__item {{tab.selectedId == item.id ? 'zui-tab__item--selected' : ''}}"
-    data-component-id="{{componentId}}"
-    data-item-id="{{item.id}}"
-    bindtap="_handleComponentTabChange"
-  >
-    <view class="zui-tab__title">{{item.title}}</view>
-  </view>
-</template>
+<import src="/zui/tab/index.wxml" />
 
 <view class="container">
   <view style="margin: 20px 0">
-    <template is="component-tab" data="{{tab: tab1, componentId: 'tab1'}}"></template>
+    <template is="zui-tab" data="{{tab: tab1, id: 'tab1'}}"></template>
   </view>
   <view style="margin: 20px 0">
-    <template is="component-tab" data="{{tab: tab2, componentId: 'tab2'}}"></template>
+    <template is="zui-tab" data="{{tab: tab2, id: 'tab2'}}"></template>
   </view>
 </view>
diff --git a/zui/badge.wxss b/zui/badge/index.wxss
similarity index 100%
rename from zui/badge.wxss
rename to zui/badge/index.wxss
diff --git a/zui/btn.wxss b/zui/btn/index.wxss
similarity index 98%
rename from zui/btn.wxss
rename to zui/btn/index.wxss
index 782ff476..312b9c3f 100644
--- a/zui/btn.wxss
+++ b/zui/btn/index.wxss
@@ -18,6 +18,9 @@
 .zui-btn::after {
   display: none;
 }
+.zui-btns {
+  margin: 15px;
+}
 
 /* type */
 .zui-btn--primary {
diff --git a/zui/btns.wxss b/zui/btns.wxss
deleted file mode 100644
index 495f1c34..00000000
--- a/zui/btns.wxss
+++ /dev/null
@@ -1,3 +0,0 @@
-.zui-btns {
-  margin: 15px;
-}
diff --git a/zui/cell.wxss b/zui/cell/index.wxss
similarity index 100%
rename from zui/cell.wxss
rename to zui/cell/index.wxss
diff --git a/zui/color.wxss b/zui/color/index.wxss
similarity index 100%
rename from zui/color.wxss
rename to zui/color/index.wxss
diff --git a/zui/dialog.wxss b/zui/dialog/index.wxss
similarity index 100%
rename from zui/dialog.wxss
rename to zui/dialog/index.wxss
diff --git a/zui/form.wxss b/zui/form/index.wxss
similarity index 100%
rename from zui/form.wxss
rename to zui/form/index.wxss
diff --git a/zui/helper.wxss b/zui/helper/index.wxss
similarity index 100%
rename from zui/helper.wxss
rename to zui/helper/index.wxss
diff --git a/zui/index.js b/zui/index.js
new file mode 100644
index 00000000..1ac441de
--- /dev/null
+++ b/zui/index.js
@@ -0,0 +1 @@
+exports.Tab = require('./tab/index');
diff --git a/zui/index.wxss b/zui/index.wxss
index c3026ccd..8fd5a08a 100644
--- a/zui/index.wxss
+++ b/zui/index.wxss
@@ -1,16 +1,15 @@
-@import "loadmore.wxss";
-@import "color.wxss";
-@import "helper.wxss";
-@import "panel.wxss";
-@import "btn.wxss";
-@import "btns.wxss";
-@import "cell.wxss";
-@import "namecard.wxss";
-@import "badge.wxss";
-@import "dialog.wxss";
-@import "form.wxss";
-@import "tab.wxss";
-@import "label.wxss";
-@import "quantity.wxss";
-@import "steps.wxss";
-@import "toast.wxss";
+@import "loadmore/index.wxss";
+@import "color/index.wxss";
+@import "helper/index.wxss";
+@import "panel/index.wxss";
+@import "btn/index.wxss";
+@import "cell/index.wxss";
+@import "namecard/index.wxss";
+@import "badge/index.wxss";
+@import "dialog/index.wxss";
+@import "form/index.wxss";
+@import "tab/index.wxss";
+@import "label/index.wxss";
+@import "quantity/index.wxss";
+@import "steps/index.wxss";
+@import "toast/index.wxss";
diff --git a/zui/label.wxss b/zui/label/index.wxss
similarity index 100%
rename from zui/label.wxss
rename to zui/label/index.wxss
diff --git a/zui/loadmore.wxml b/zui/loadmore/index.wxml
similarity index 100%
rename from zui/loadmore.wxml
rename to zui/loadmore/index.wxml
diff --git a/zui/loadmore.wxss b/zui/loadmore/index.wxss
similarity index 100%
rename from zui/loadmore.wxss
rename to zui/loadmore/index.wxss
diff --git a/zui/namecard.wxss b/zui/namecard/index.wxss
similarity index 100%
rename from zui/namecard.wxss
rename to zui/namecard/index.wxss
diff --git a/zui/panel.wxss b/zui/panel/index.wxss
similarity index 100%
rename from zui/panel.wxss
rename to zui/panel/index.wxss
diff --git a/zui/quantity.wxss b/zui/quantity/index.wxss
similarity index 100%
rename from zui/quantity.wxss
rename to zui/quantity/index.wxss
diff --git a/zui/steps.wxss b/zui/steps/index.wxss
similarity index 100%
rename from zui/steps.wxss
rename to zui/steps/index.wxss
diff --git a/zui/tab/index.js b/zui/tab/index.js
new file mode 100644
index 00000000..7cc2ff29
--- /dev/null
+++ b/zui/tab/index.js
@@ -0,0 +1,16 @@
+var Tab = {
+  _handleZuiTabChange(e) {
+    var dataset = e.currentTarget.dataset;
+    var id = dataset.id;
+    var selectedId = dataset.itemId;
+
+    if (this.handleZuiTabChange) {
+      this.handleZuiTabChange({
+        id,
+        selectedId
+      });
+    }
+  }
+};
+
+module.exports = Tab;
diff --git a/zui/tab/index.wxml b/zui/tab/index.wxml
new file mode 100644
index 00000000..2ca933c8
--- /dev/null
+++ b/zui/tab/index.wxml
@@ -0,0 +1,27 @@
+<template name="zui-tab">
+  <view class="zui-tab">
+      <block wx:if="{{tab.scroll}}">
+        <scroll-view class="zui-tab__bd zui-tab__bd--scroll {{fixed ? 'zui-tab__bd--fixed' : ''}}" scroll-x="true">
+          <template is="zui-tab-list" data="{{ tab, id }}"></template>
+        </scroll-view>
+      </block>
+      <block wx:else>
+        <view class="zui-tab__bd">
+          <template is="zui-tab-list" data="{{ tab, id }}"></template>
+        </view>
+      </block>
+  </view>
+</template>
+
+<template name="zui-tab-list">
+  <view
+    wx:for="{{tab.list}}"
+    wx:key="id"
+    class="zui-tab__item {{tab.selectedId == item.id ? 'zui-tab__item--selected' : ''}}"
+    data-id="{{id}}"
+    data-item-id="{{item.id}}"
+    bindtap="_handleZuiTabChange"
+  >
+    <view class="zui-tab__title">{{item.title}}</view>
+  </view>
+</template>
diff --git a/zui/tab.wxss b/zui/tab/index.wxss
similarity index 100%
rename from zui/tab.wxss
rename to zui/tab/index.wxss
diff --git a/zui/toast.wxss b/zui/toast/index.wxss
similarity index 100%
rename from zui/toast.wxss
rename to zui/toast/index.wxss