diff --git a/example/pages/steps/index.json b/example/pages/steps/index.json
index 284a7d5d..a61e34a4 100644
--- a/example/pages/steps/index.json
+++ b/example/pages/steps/index.json
@@ -1,3 +1,6 @@
 {
-  "navigationBarTitleText": "Steps 步骤条"
+  "navigationBarTitleText": "Steps 步骤条",
+  "usingComponents": {
+    "zan-steps": "../../dist/steps/index"
+  }
 }
diff --git a/example/pages/steps/index.wxml b/example/pages/steps/index.wxml
index 8b9c459c..36364b4d 100644
--- a/example/pages/steps/index.wxml
+++ b/example/pages/steps/index.wxml
@@ -7,19 +7,19 @@
   <view class="zan-panel">
     <view class="zan-cell">
       <view class="zan-cell__bd">
-        <template is="zan-steps" data="{{ type: 'horizon', steps: steps }}"></template>
+        <zan-steps type="horizon" steps="{{steps}}"></zan-steps>
       </view>
     </view>
 
     <view class="zan-cell">
       <view class="zan-cell__bd">
-        <template is="zan-steps" data="{{ type: 'horizon', steps: steps2 }}"></template>
+        <zan-steps type="horizon" steps="{{steps2}}"></zan-steps>
       </view>
     </view>
 
     <view class="zan-cell zan-cell--last-child">
       <view class="zan-cell__bd">
-        <template is="zan-steps" data="{{ type: 'horizon', steps: steps3 }}"></template>
+        <zan-steps type="horizon" steps="{{steps3}}"></zan-steps>
       </view>
     </view>
   </view>
@@ -28,19 +28,19 @@
   <view class="zan-panel">
     <view class="zan-cell">
       <view class="zan-cell__bd">
-        <template is="zan-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps }}"></template>
+        <zan-steps type="horizon" hasDesc steps="{{steps}}"></zan-steps>
       </view>
     </view>
 
     <view class="zan-cell">
       <view class="zan-cell__bd">
-        <template is="zan-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps2 }}"></template>
+        <zan-steps type="horizon" hasDesc steps="{{steps2}}"></zan-steps>
       </view>
     </view>
 
     <view class="zan-cell zan-cell--last-child">
       <view class="zan-cell__bd">
-        <template is="zan-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps3 }}"></template>
+        <zan-steps type="horizon" hasDesc steps="{{steps3}}"></zan-steps>
       </view>
     </view>
   </view>
@@ -49,13 +49,13 @@
   <view class="zan-panel">
     <view class="zan-cell zan-cell">
       <view class="zan-cell__bd">
-        <template is="zan-steps" data="{{ type: 'vertical', hasDesc: true, steps }}"></template>
+        <zan-steps type="vertical" hasDesc steps="{{steps}}"></zan-steps>
       </view>
     </view>
 
     <view class="zan-cell zan-cell--last-child">
       <view class="zan-cell__bd">
-        <template is="zan-steps" data="{{ type: 'vertical', steps }}"></template>
+        <zan-steps type="vertical" steps="{{steps}}"></zan-steps>
       </view>
     </view>
   </view>
@@ -63,7 +63,7 @@
   <view class="zan-panel-title">可自定义class</view>
   <view class="zan-panel">
     <view class="zan-cell__bd">
-      <template is="zan-steps" data="{{ type: 'vertical', steps, className: 'my-class' }}"></template>
+      <zan-steps type="vertical" steps="{{steps}}" className="my-class"></zan-steps>
     </view>
   </view>
 
diff --git a/packages/steps/README.md b/packages/steps/README.md
index d92f1ceb..0e9354fa 100644
--- a/packages/steps/README.md
+++ b/packages/steps/README.md
@@ -6,15 +6,18 @@
 @import "path/to/zanui-weapp/dist/index.wxss";
 ```
 
-在需要使用的页面里引入组件库模板和脚本
-```html
-<import src="path/to/zanui-weapp/dist/steps/index.wxml" />
-```
+在 index.json 中引入组件
+```json
+{
+  "usingComponents": {
+    "zan-steps": "path/to/zanui-weapp/dist/steps/index"
+  }
+}
 
 ### 代码演示
 在模板中使用 zan-steps 模板，并传入相应数据
 ```html
-<template is="zan-steps" data="{{ type: 'horizon', steps }}"></template>
+<zan-steps type="horizon" steps="{{steps}}"></zan-steps>
 ```
 | 参数       | 说明      | 类型       | 默认值       | 必须      |
 |-----------|-----------|-----------|-------------|-------------|
diff --git a/packages/steps/index.js b/packages/steps/index.js
new file mode 100644
index 00000000..651992f4
--- /dev/null
+++ b/packages/steps/index.js
@@ -0,0 +1,20 @@
+Component({
+  properties: {
+    type: {
+      type: String,
+      value: 'horizon'
+    },
+
+    hasDesc: {
+      type: Boolean,
+      value: false
+    },
+
+    steps: { // 必须
+      type: Array,
+      value: []
+    },
+
+    className: String
+  }
+})
diff --git a/packages/steps/index.json b/packages/steps/index.json
new file mode 100644
index 00000000..467ce294
--- /dev/null
+++ b/packages/steps/index.json
@@ -0,0 +1,3 @@
+{
+  "component": true
+}
diff --git a/packages/steps/index.wxml b/packages/steps/index.wxml
index 7e57b18b..cdcfbafa 100644
--- a/packages/steps/index.wxml
+++ b/packages/steps/index.wxml
@@ -1,15 +1,13 @@
-<template name="zan-steps">
-  <view class="zan-steps zan-steps--{{ type == 'vertical' ? 'vsteps' : 'steps' }} zan-steps--{{ steps.length }} {{ className }}">
-    <view
-      wx:for="{{ steps }}" wx:for-item="step" wx:key="unique" wx:for-index="index"
-      class="zan-steps__step {{ hasDesc ? 'zan-steps__step--db-title' : '' }} {{ index == 0 ? 'zan-steps__step--first-child' : '' }} {{ index == steps.length - 1 ? 'zan-steps__step--last-child' : '' }} {{ step.done ? 'zan-steps__step--done' : '' }} {{ step.current ? 'zan-steps__step--cur' : '' }}"
-    >
-      <view class="zan-steps__title">{{ step.text }}</view>
-      <view wx:if="{{ hasDesc && step.desc }}" class="zan-steps__title zan-steps__title--desc">{{ step.desc }}</view>
-      <view class="zan-steps__icons">
-        <view class="zan-steps__circle"></view>
-      </view>
-      <view class="zan-steps__line"></view>
+<view class="zan-steps zan-steps--{{ type == 'vertical' ? 'vsteps' : 'steps' }} zan-steps--{{ steps.length }} {{ className }}">
+  <view
+    wx:for="{{ steps }}" wx:for-item="step" wx:key="unique" wx:for-index="index"
+    class="zan-steps__step {{ hasDesc ? 'zan-steps__step--db-title' : '' }} {{ index == 0 ? 'zan-steps__step--first-child' : '' }} {{ index == steps.length - 1 ? 'zan-steps__step--last-child' : '' }} {{ step.done ? 'zan-steps__step--done' : '' }} {{ step.current ? 'zan-steps__step--cur' : '' }}"
+  >
+    <view class="zan-steps__title">{{ step.text }}</view>
+    <view wx:if="{{ hasDesc && step.desc }}" class="zan-steps__title zan-steps__title--desc">{{ step.desc }}</view>
+    <view class="zan-steps__icons">
+      <view class="zan-steps__circle"></view>
     </view>
+    <view class="zan-steps__line"></view>
   </view>
-</template>
+</view>