diff --git a/example/pages/capsule/index.json b/example/pages/capsule/index.json
index a0bcb97a..c459bae4 100644
--- a/example/pages/capsule/index.json
+++ b/example/pages/capsule/index.json
@@ -1,3 +1,7 @@
 {
-  "navigationBarTitleText": "Capsule 胶囊"
+  "navigationBarTitleText": "Capsule 胶囊",
+  "usingComponents": {
+    "zan-panel": "/packages/panel/index",
+    "zan-capsule": "/packages/capsule/index"
+  }
 }
diff --git a/example/pages/capsule/index.wxml b/example/pages/capsule/index.wxml
index c32e76c3..cbe06edf 100644
--- a/example/pages/capsule/index.wxml
+++ b/example/pages/capsule/index.wxml
@@ -4,19 +4,13 @@
 
   <view class="doc-title zan-hairline--bottom">CAPSULE</view>
 
-  <view class="zan-panel-title">基本用法</view>
-  <view class="zan-panel">
-    <view class="zan-cell zan-cell--last-child">
-      <template is="capsule" data="{{ leftText: '1折', rightText: '限购一份'}}" />
-      <template is="capsule" data="{{ leftText: '1折', rightText: '限购一份', type: 'danger' }}" />
-    </view>
-  </view>
+  <zan-panel title='基本用法'>
+    <zan-capsule leftText="1折扣" rightText="限购一份" />
+    <zan-capsule type="danger" leftText="1折扣" rightText="限购一份" />
+  </zan-panel>
 
-  <view class="zan-panel-title">自定义颜色</view>
-  <view class="zan-panel">
-    <view class="zan-cell zan-cell--last-child">
-      <template is="capsule" data="{{ leftText: '1折', rightText: '限购一份', color: '#38f' }}" />
-    </view>
-  </view>
+  <zan-panel title='自定义颜色'>
+    <zan-capsule color="#38f" leftText="1折扣" rightText="限购一份" />
+  </zan-panel>
 
-</view>
\ No newline at end of file
+</view>
diff --git a/packages/capsule/README.md b/packages/capsule/README.md
index dfa17018..78878608 100644
--- a/packages/capsule/README.md
+++ b/packages/capsule/README.md
@@ -1,32 +1,23 @@
 ## Capsule 胶囊
 
 ### 使用指南
-在 app.wxss 中引入组件库所有样式
-```css
-@import "path/to/zanui-weapp/dist/index.wxss";
-```
-
-在需要使用的模板里引入组件库模板
-```html
-<import src="path/to/zanui-weapp/dist/capsule/index.wxml" />
+在 index.json 中引入组件
+```json
+{
+  "usingComponents": {
+    "zan-capsule": "/packages/capsule/index"
+  }
+}
 ```
 
 ### 代码演示
-
-#### 基础用法
-可以用 leftText 和 rightText 控制左右文案
+Panel 提供了一块白色的展示区域，使用方式如下
 ```html
-<template is="capsule" data="{{ leftText: '1折', rightText: '限购一份'}}" />
-```
-
-#### 使用不同类型胶囊
-按钮支持额外的三种类型 primary, danger, warn
-```html
-<template is="capsule" data="{{ leftText: '1折', rightText: '限购一份', type: 'danger' }}" />
-```
-
-#### 自定义颜色
-通过 color 熟悉，可以自定义显示的颜色
-```html
-<template is="capsule" data="{{ leftText: '1折', rightText: '限购一份', color: '#38f' }}" />
+<zan-capsule color="#38f" leftText="1折扣" rightText="限购一份" />
 ```
+| 参数       | 说明      | 类型       | 默认值       | 必须      |
+|-----------|-----------|-----------|-------------|-------------|
+| type | capsule的主体颜色 | String | ''（有danger这个主题色） | |
+| color | 自定义capsule颜色 | String | - | |
+| leftText | 左侧文案 | String | - | |
+| rightText | 右侧文案 | String | - | |
diff --git a/packages/capsule/index.js b/packages/capsule/index.js
new file mode 100644
index 00000000..9826f235
--- /dev/null
+++ b/packages/capsule/index.js
@@ -0,0 +1,28 @@
+Component({
+  /**
+   * 组件的属性列表
+   * 用于组件自定义设置
+   */
+  properties: {
+    // 颜色状态
+    type: {
+      type: String,
+      value: ''
+    },
+    // 自定义颜色
+    color :{
+      type : String,
+      value : ''
+    },
+    // 左侧内容
+    leftText :{
+      type : String ,
+      value : ''
+    },
+    // 右侧内容
+    rightText :{
+      type : String ,
+      value : ''
+    }
+  }
+})
diff --git a/packages/Panel/panel.json b/packages/capsule/index.json
similarity index 100%
rename from packages/Panel/panel.json
rename to packages/capsule/index.json
diff --git a/packages/capsule/index.wxml b/packages/capsule/index.wxml
index 0667e88e..abee3b42 100644
--- a/packages/capsule/index.wxml
+++ b/packages/capsule/index.wxml
@@ -1,18 +1,17 @@
-<template name="capsule">
-  <view class="zan-capsule zan-capsule--{{type}}">
-    <block wx:if="{{color}}">
-      <view
-        class="zan-capsule__left"
-        style="background: {{ color }}; border-color: {{ color }}"
-      >{{ leftText }}</view>
-      <view
-        class="zan-capsule__right"
-        style="color: {{ color }}; border-color: {{ color }}"
-      >{{ rightText }}</view>
-    </block>
-    <block wx:else>
-      <view class="zan-capsule__left">{{ leftText }}</view>
-      <view class="zan-capsule__right">{{ rightText }}</view>
-    </block>
-  </view>
-</template>
+<view class="zan-capsule zan-capsule--{{type}}">
+  <block wx:if="{{color}}">
+    <view
+      class="zan-capsule__left"
+      style="background: {{ color }}; border-color: {{ color }}"
+    >{{ leftText }}</view>
+    <view
+      class="zan-capsule__right"
+      style="color: {{ color }}; border-color: {{ color }}"
+    >{{ rightText }}</view>
+  </block>
+  <block wx:else>
+    <view class="zan-capsule__left">{{ leftText }}</view>
+    <view class="zan-capsule__right">{{ rightText }}</view>
+  </block>
+</view>
+
diff --git a/packages/panel/README.md b/packages/panel/README.md
index 3833339e..a4006317 100644
--- a/packages/panel/README.md
+++ b/packages/panel/README.md
@@ -5,7 +5,7 @@
 ```json
 {
   "usingComponents": {
-    "zan-panel": "/packages/Panel/panel"
+    "zan-panel": "/packages/panel/index"
   }
 }
 ```
diff --git a/packages/Panel/panel.js b/packages/panel/index.js
similarity index 100%
rename from packages/Panel/panel.js
rename to packages/panel/index.js
diff --git a/packages/panel/index.json b/packages/panel/index.json
new file mode 100644
index 00000000..467ce294
--- /dev/null
+++ b/packages/panel/index.json
@@ -0,0 +1,3 @@
+{
+  "component": true
+}
diff --git a/packages/Panel/panel.wxml b/packages/panel/index.wxml
similarity index 100%
rename from packages/Panel/panel.wxml
rename to packages/panel/index.wxml