diff --git a/packages/tab/README.md b/packages/tab/README.md
new file mode 100644
index 00000000..05624247
--- /dev/null
+++ b/packages/tab/README.md
@@ -0,0 +1,66 @@
+## Toast 轻提示
+
+### 使用指南
+在 app.wxss 中引入组件库所有样式
+```css
+@import "path/to/zanui-weapp/dist/index.wxss";
+```
+
+在需要使用的页面里引入组件库模板和脚本
+```html
+<import src="path/to/zanui-weapp/dist/tab/index.wxml" />
+```
+```js
+const Tab = require('path/to/zanui-weapp/dist/tab/index');
+
+// 在 Page 中混入 Toast 里面声明的方法
+Page(Object.assign({}, Tab, {
+  // ...
+}));
+```
+
+### 代码演示
+在模板中使用 zan-tab 模板，并传入相应数据
+```html
+<template is="zan-tab" data="{{ tab: tab1, componentId: 'tab1' }}"></template>
+```
+tab 的数据格式如下
+```js
+{
+  // tab 数据列表
+  list: [{
+    // tab 项 id
+    id: 'all',
+    // tab 项展示文案
+    title: '全部'
+  }, {
+    id: 'topay',
+    title: '待付款'
+  }, {
+    id: 'tosend',
+    title: '待发货'
+  }, {
+    id: 'send',
+    title: '待收货'
+  }, {
+    id: 'sign',
+    title: '已完成'
+  }],
+  // 当前选中的 tab 项，以 tab 的 id 进行匹配
+  selectedId: 'all',
+  // 是否开启左右滑动类型的 tab
+  scroll: false
+}
+
+```
+
+当 tab 被点击时，可以在页面中注册 handleZanTabChange 方法来监听
+```js
+Page(Object.assign({}, Tab, {
+  handleZanTabChange({ componentId, selectedId }) {
+    // componentId 即为在模板中传入的 componentId
+    // 用于在一个页面上使用多个 tab 时，进行区分
+    // selectId 表示被选中 tab 项的 id
+  }
+}));
+```
diff --git a/packages/toast/README.md b/packages/toast/README.md
new file mode 100644
index 00000000..47e9d1fa
--- /dev/null
+++ b/packages/toast/README.md
@@ -0,0 +1,29 @@
+## Toast 轻提示
+
+### 使用指南
+在 app.wxss 中引入组件库所有样式
+```css
+@import "path/to/zanui-weapp/dist/index.wxss";
+```
+
+在需要使用的页面里引入组件库模板和脚本
+```html
+<import src="path/to/zanui-weapp/dist/toast/index.wxml" />
+
+<!-- 直接使用 zan-toast 模板，并且直接传入 zanToast -->
+<template is="zan-toast" data="{{ zanToast }}"></template>
+```
+```js
+const Toast = require('path/to/zanui-weapp/dist/toast/index');
+
+// 在 Page 中混入 Toast 里面声明的方法
+Page(Object.assign({}, Toast, {
+  // ...
+}));
+```
+
+### 代码演示
+在 js 中直接调用 this.showZanToast 即可
+```js
+this.showZanToast('toptips的内容');
+```
diff --git a/packages/toptips/README.md b/packages/toptips/README.md
new file mode 100644
index 00000000..a2872b8c
--- /dev/null
+++ b/packages/toptips/README.md
@@ -0,0 +1,29 @@
+## Toptips 顶部提示
+
+### 使用指南
+在 app.wxss 中引入组件库所有样式
+```css
+@import "path/to/zanui-weapp/dist/index.wxss";
+```
+
+在需要使用的页面里引入组件库模板和脚本
+```html
+<import src="path/to/zanui-weapp/dist/toptips/index.wxml" />
+
+<!-- 直接使用 zan-toptips 模板，并且直接传入 zanTopTips -->
+<template is="zan-toptips" data="{{ zanTopTips }}"></template>
+```
+```js
+const Toptips = require('path/to/zanui-weapp/dist/toptips/index');
+
+// 在 Page 中混入 Toptips 里面声明的方法
+Page(Object.assign({}, Toptips, {
+  // ...
+}));
+```
+
+### 代码演示
+在 js 中直接调用 this.showZanTopTips 即可
+```js
+this.showZanTopTips('toptips的内容');
+```