diff --git a/bin/build-entry.js b/bin/build-entry.js
index 9f2544b2f..77e0b5ee2 100644
--- a/bin/build-entry.js
+++ b/bin/build-entry.js
@@ -14,13 +14,14 @@ const install = function(Vue) {
 
 {{install}}
 
-  // Vue.use(Loading);
+  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;
+  Vue.prototype.$msgbox = MessageBox;
+  Vue.prototype.$alert = MessageBox.alert;
+  Vue.prototype.$confirm = MessageBox.confirm;
+  Vue.prototype.$prompt = MessageBox.prompt;
+  Vue.prototype.$notify = Notification;
+  Vue.prototype.$message = Message;
 };
 
 // auto install
diff --git a/components.json b/components.json
index 3f311394d..ce206e21b 100644
--- a/components.json
+++ b/components.json
@@ -148,5 +148,8 @@
   ],
   "spinner": [
     "./packages/spinner/index.js"
+  ],
+  "message": [
+    "./packages/message/index.js"
   ]
 }
diff --git a/examples/docs/message.md b/examples/docs/message.md
new file mode 100644
index 000000000..20b5ad3aa
--- /dev/null
+++ b/examples/docs/message.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.native="open">点击展示 Notification</el-button>
+</div>
+
+```html
+<template>
+  <el-button :plain="true" v-on:click.native="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.native="open2">成功</el-button>
+  <el-button :plain="true" v-on:click.native="open3">警告</el-button>
+  <el-button :plain="true" v-on:click.native="open4">消息</el-button>
+  <el-button :plain="true" v-on:click.native="open5">错误</el-button>
+</div>
+
+```html
+<template>
+  <el-button :plain="true" v-on:click.native="open2">成功</el-button>
+  <el-button :plain="true" v-on:click.native="open3">警告</el-button>
+  <el-button :plain="true" v-on:click.native="open4">消息</el-button>
+  <el-button :plain="true" v-on:click.native="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.native="open6">不会自动关闭的 Notification</el-button>
+</div>
+
+```html
+<template>
+  <el-button :plain="true" v-on:click.native="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.native="open7">带有回调函数的 Notification</el-button>
+</div>
+
+```html
+<template>
+  <el-button :plain="true" v-on:click.native="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/nav.config.json b/examples/nav.config.json
index cc0386a55..ed886eeb5 100644
--- a/examples/nav.config.json
+++ b/examples/nav.config.json
@@ -81,6 +81,12 @@
         "title": "notification 通知",
         "description": "悬浮出现在页面右上角, 显示全局的通知提醒消息"
       },
+      {
+        "path": "/message",
+        "name": "消息提示 (message)",
+        "title": "message 消息提示",
+        "description": "对用户的操作进行反馈提示,包含成功、反馈或错误等消息提示"
+      },
       {
         "path": "/loading",
         "name": "加载 (loading)",
diff --git a/package.json b/package.json
index 762445ee9..66c43960f 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
     "vue-loader": "^9.3.2",
     "vue": "^2.0.0-rc.1",
     "vue-markdown-loader": "^0.4.0",
-    "vue-popup": "^0.2.1",
+    "vue-popup": "^0.2.2",
     "vue-router": "^2.0.0-beta.2"
   }
 }
diff --git a/packages/dialog/package.json b/packages/dialog/package.json
index a223e6050..aff2f4a59 100644
--- a/packages/dialog/package.json
+++ b/packages/dialog/package.json
@@ -12,6 +12,6 @@
   "author": "elemefe",
   "license": "MIT",
   "devDependencies": {
-    "vue-popup": "^0.2.1"
+    "vue-popup": "^0.2.2"
   }
 }
diff --git a/packages/message-box/package.json b/packages/message-box/package.json
index 1d36034cf..64d1610ef 100644
--- a/packages/message-box/package.json
+++ b/packages/message-box/package.json
@@ -12,6 +12,6 @@
   "author": "elemefe",
   "license": "MIT",
   "dependencies": {
-    "vue-popup": "^0.2.1"
+    "vue-popup": "^0.2.2"
   }
 }
diff --git a/packages/message/cooking.conf.js b/packages/message/cooking.conf.js
new file mode 100644
index 000000000..e9dcae592
--- /dev/null
+++ b/packages/message/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: 'ElMessage',
+  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/index.js b/packages/message/index.js
new file mode 100644
index 000000000..fe700f641
--- /dev/null
+++ b/packages/message/index.js
@@ -0,0 +1,3 @@
+import Message from './src/main.js';
+
+module.exports = Message;
diff --git a/packages/message/package.json b/packages/message/package.json
new file mode 100644
index 000000000..116095fdf
--- /dev/null
+++ b/packages/message/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "el-message",
+  "version": "0.0.0",
+  "description": "A message component for Vue.js.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/message",
+  "author": "elemefe",
+  "license": "MIT",
+  "dependencies": {}
+}
diff --git a/packages/message/src/main.js b/packages/message/src/main.js
new file mode 100644
index 000000000..cafc3303f
--- /dev/null
+++ b/packages/message/src/main.js
@@ -0,0 +1,57 @@
+import Vue from 'vue';
+let MessageConstructor = Vue.extend(require('./main.vue'));
+
+let instance;
+let instances = [];
+let seed = 1;
+
+var Message = function(options) {
+  options = options || {};
+  let userOnClose = options.onClose;
+  let id = 'message_' + seed++;
+
+  options.onClose = function() {
+    Message.close(id, userOnClose);
+  };
+
+  instance = new MessageConstructor({
+    data: options
+  });
+  instance.id = id;
+  instance.vm = instance.$mount();
+  document.body.appendChild(instance.vm.$el);
+  instance.vm.visible = true;
+  instance.dom = instance.vm.$el;
+
+  let topDist = 0;
+  for (let i = 0, len = instances.length; i < len; i++) {
+    topDist += instances[i].$el.offsetHeight + 16;
+  }
+  topDist += 16;
+  instance.top = topDist;
+  instances.push(instance);
+};
+
+Message.close = function(id, userOnClose) {
+  let index;
+  let removedHeight;
+  for (var i = 0, len = instances.length; i < len; i++) {
+    if (id === instances[i].id) {
+      if (typeof userOnClose === 'function') {
+        userOnClose(instances[i]);
+      }
+      index = i;
+      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 - 16 + 'px';
+    }
+  }
+};
+
+export default Message;
diff --git a/packages/message/src/main.vue b/packages/message/src/main.vue
new file mode 100644
index 000000000..767a51608
--- /dev/null
+++ b/packages/message/src/main.vue
@@ -0,0 +1,89 @@
+<template>
+  <transition name="el-notification-fade">
+    <div class="el-notification" v-show="visible" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer()" @mouseleave="startTimer()">
+      <i class="el-notification__icon" :class="[ 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>
+  </transition>
+</template>
+
+<script type="text/babel">
+  let typeMap = {
+    success: 'circle-check',
+    info: 'information',
+    warning: 'warning',
+    error: 'circle-cross'
+  };
+
+  export default {
+    data() {
+      return {
+        visible: false,
+        title: '',
+        message: '',
+        duration: 4500,
+        type: '',
+        onClose: null,
+
+        closed: false,
+        top: null,
+        timer: null
+      };
+    },
+
+    computed: {
+      typeClass() {
+        return this.type ? `el-icon-${ typeMap[this.type] }` : '';
+      }
+    },
+
+    watch: {
+      closed(newVal) {
+        if (newVal) {
+          this.visible = false;
+          this.$el.addEventListener('transitionend', () => {
+            this.$destroy(true);
+            this.$el.parentNode.removeChild(this.$el);
+          });
+        }
+      }
+    },
+
+    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);
+        }
+      }
+    },
+
+    mounted() {
+      if (this.duration > 0) {
+        this.timer = setTimeout(() => {
+          if (!this.closed) {
+            this.handleClose();
+          }
+        }, this.duration);
+      }
+    }
+  };
+</script>
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 9942a5fdb..826a100a4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -48,6 +48,7 @@ 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';
+import Message from '../packages/message/index.js';
 
 const install = function(Vue) {
   if (install.installed) return;
@@ -99,6 +100,7 @@ const install = function(Vue) {
   Vue.component(Upload.name, Upload);
   Vue.component(Progress.name, Progress);
   Vue.component(Spinner.name, Spinner);
+  Vue.component(Message.name, Message);
 
   Vue.use(Loading);
 
@@ -107,15 +109,16 @@ const install = function(Vue) {
   Vue.prototype.$confirm = MessageBox.confirm;
   Vue.prototype.$prompt = MessageBox.prompt;
   Vue.prototype.$notify = Notification;
+  Vue.prototype.$message = Message;
 };
 
-auto install
+// auto install
 if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
 };
 
 module.exports = {
-  install
+  install,
   Group,
   SelectDropdown,
   Pagination,
@@ -165,5 +168,6 @@ module.exports = {
   Col,
   Upload,
   Progress,
-  Spinner
+  Spinner,
+  Message
 };