diff --git a/components.json b/components.json
index 85636467e..f75b5c7af 100644
--- a/components.json
+++ b/components.json
@@ -12,5 +12,6 @@
   "radio-group": "./packages/radio-group/index.js",
   "loading": "./packages/loading/index.js",
   "badge": "./packages/badge/index.js",
-  "badge-group": "./packages/badge-group/index.js"
+  "badge-group": "./packages/badge-group/index.js",
+  "search": "./packages/search/index.js"
 }
diff --git a/docs/examples-docs/search.md b/docs/examples-docs/search.md
new file mode 100644
index 000000000..76f9156d0
--- /dev/null
+++ b/docs/examples-docs/search.md
@@ -0,0 +1,10 @@
+## Search 组件
+
+### 基础用法
+
+:::demo 样例代码
+```html
+<z-search placeholder="商品名称">
+</z-search>
+```
+:::
\ No newline at end of file
diff --git a/packages/search/CHANGELOG.md b/packages/search/CHANGELOG.md
new file mode 100644
index 000000000..e88c472b3
--- /dev/null
+++ b/packages/search/CHANGELOG.md
@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版
diff --git a/packages/search/README.md b/packages/search/README.md
new file mode 100644
index 000000000..4c6172563
--- /dev/null
+++ b/packages/search/README.md
@@ -0,0 +1,26 @@
+# @youzan/<%= name %>
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)
diff --git a/packages/search/index.js b/packages/search/index.js
new file mode 100644
index 000000000..716a43c6e
--- /dev/null
+++ b/packages/search/index.js
@@ -0,0 +1,3 @@
+import Search from './src/search';
+
+export default Search;
diff --git a/packages/search/package.json b/packages/search/package.json
new file mode 100644
index 000000000..7dbfa2900
--- /dev/null
+++ b/packages/search/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "<%= name %>",
+  "version": "<%= version %>",
+  "description": "<%= description %>",
+  "main": "./lib/index.js",
+  "author": "<%= author %>",
+  "license": "<%= license %>",
+  "devDependencies": {},
+  "dependencies": {}
+}
diff --git a/packages/search/src/search.vue b/packages/search/src/search.vue
new file mode 100644
index 000000000..9bca8a53f
--- /dev/null
+++ b/packages/search/src/search.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="z-search">
+    <div class="z-search__input-wrap"  :class="{ 'is-focus' : isFocus }">
+      <input type="text" :value="value" :placeholder="placeholder" @focus="handleFocus" @blur="handleBlur">
+      <span class="zui-icon zui-icon-close"></span>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'z-search',
+    props: {
+      placeholder: String
+    },
+    data() {
+      return {
+        value: '',
+        isFocus: false
+      };
+    },
+    methods: {
+      handleFocus() {
+        this.isFocus = true;
+      },
+      handleBlur() {
+        this.isFocus = false;
+      }
+    }
+  };
+</script>
diff --git a/packages/zanui-css/src/index.css b/packages/zanui-css/src/index.css
index faf3315a5..d1e71a237 100644
--- a/packages/zanui-css/src/index.css
+++ b/packages/zanui-css/src/index.css
@@ -13,3 +13,5 @@
 @import './radio.css';
 @import './switch.css';
 @import './badge.css';
+@import './search.css';
+
diff --git a/packages/zanui-css/src/search.css b/packages/zanui-css/src/search.css
new file mode 100644
index 000000000..0411986e9
--- /dev/null
+++ b/packages/zanui-css/src/search.css
@@ -0,0 +1,35 @@
+@import "./common/var.pcss";
+@component-namespace z {
+    @b search {
+        padding: 4px 15px;
+        background-color: #F2F2F2;
+        @e input-wrap {
+            position: relative;
+            width: 92%;
+            padding: 8px 24px 8px 35px;
+            border: 1px solid $c-gray-light;
+            border-radius: 4px;
+            background-color: $c-white;
+            span {
+                display: none;
+                position: absolute;
+                right: 5px;
+                top: 8px;
+            }
+            @when focus {
+                width: 82%;
+                span {
+                    display: inline-block;
+                }
+            }
+            input {
+                width: 100%;
+                height: 14px;
+                font-size: 14px;
+                color: $c-gray-dark;
+                border: none;
+                outline: none;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 1ef347b6e..84fcb72b3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -12,6 +12,7 @@ import RadioGroup from '../packages/radio-group/index.js';
 import Loading from '../packages/loading/index.js';
 import Badge from '../packages/badge/index.js';
 import BadgeGroup from '../packages/badge-group/index.js';
+import Search from '../packages/search/index.js';
 
 const install = function(Vue) {
   if (install.installed) return;
@@ -29,6 +30,7 @@ const install = function(Vue) {
   Vue.component(Loading.name, Loading);
   Vue.component(Badge.name, Badge);
   Vue.component(BadgeGroup.name, BadgeGroup);
+  Vue.component(Search.name, Search);
 };
 
 // auto install
@@ -52,5 +54,6 @@ module.exports = {
   RadioGroup,
   Loading,
   Badge,
-  BadgeGroup
+  BadgeGroup,
+  Search
 };