diff --git a/components/_util/props-util.js b/components/_util/props-util.js
index 465278457..a453b943d 100644
--- a/components/_util/props-util.js
+++ b/components/_util/props-util.js
@@ -79,7 +79,11 @@ const getComponentFromProp = (instance, prop) => {
     const componentOptions = instance.componentOptions || {};
     (componentOptions.children || []).forEach((child) => {
       if (child.data && child.data.slot === prop) {
-        slotsProp.push(child)
+        if (child.tag === 'template') {
+          slotsProp.push(child.children)
+        } else {
+          slotsProp.push(child)
+        }
       }
     })
     return slotsProp.length ? slotsProp : undefined
diff --git a/components/steps/demo/customized-progress-dot.md b/components/steps/demo/customized-progress-dot.md
new file mode 100644
index 000000000..e89ad0f96
--- /dev/null
+++ b/components/steps/demo/customized-progress-dot.md
@@ -0,0 +1,39 @@
+<cn>
+#### 自定义点状步骤条
+为点状步骤条增加自定义展示。
+</cn>
+
+<us>
+#### Customized Dot Style
+You can customize the display for Steps with progress dot style.
+</us>
+
+```html
+<template>
+  <a-steps :current="1" :progressDot="customDot" style="margin-top:150px">
+    <a-step title="Finished" description="You can hover on the dot." />
+    <a-step title="In Progress" description="You can hover on the dot." />
+    <a-step title="Waiting" description="You can hover on the dot." />
+    <a-step title="Waiting" description="You can hover on the dot." />
+  </a-steps>
+</template>
+<script>
+  export default {
+    data() {
+      return {}
+    },
+    methods: {
+      customDot(dot, params) {
+        return (
+          <a-popover>
+            <template slot="content">
+              <span>step {params.index} status: {params.status}</span>
+            </template>
+            {dot}
+          </a-popover>
+        )
+      }
+    },
+  }
+</script>
+```
diff --git a/components/steps/demo/error.md b/components/steps/demo/error.md
new file mode 100644
index 000000000..c34a9d54d
--- /dev/null
+++ b/components/steps/demo/error.md
@@ -0,0 +1,19 @@
+<cn>
+#### 步骤运行错误
+使用 Steps 的 `status` 属性来指定当前步骤的状态。
+</cn>
+
+<us>
+#### Error status
+By using `status` of `Steps`, you can specify the state for current step.
+</us>
+
+```html
+<template>
+  <a-steps :current="1" status="error">
+    <a-step title="Finished" description="This is a description." />
+    <a-step title="In Progress" description="This is a description." />
+    <a-step title="Waiting" description="This is a description." />
+  </a-steps>
+</template>
+```
diff --git a/components/steps/demo/icon.md b/components/steps/demo/icon.md
new file mode 100644
index 000000000..6a9baf6a4
--- /dev/null
+++ b/components/steps/demo/icon.md
@@ -0,0 +1,28 @@
+<cn>
+#### 带图标的步骤条
+通过设置 `Steps.Step` 的 `icon` 属性，可以启用自定义图标。
+</cn>
+
+<us>
+#### With icon
+You can use your own custom icons by setting the property `icon` for `Steps.Step`.
+</us>
+
+```html
+<template>
+  <a-steps>
+    <a-step status="finish" title="Login"}>
+      <a-icon type="user" slot="icon"/>
+    </a-step>
+    <a-step status="finish" title="Verification"}>
+      <a-icon type="solution" slot="icon"/>
+    </a-step>
+    <a-step status="process" title="Pay"}>
+      <a-icon type="loading" slot="icon"/>
+    </a-step>
+    <a-step status="wait" title="Done"}>
+      <a-icon type="smile-o" slot="icon"/>
+    </a-step>
+  </a-steps>
+</template>
+```
diff --git a/components/steps/demo/index.vue b/components/steps/demo/index.vue
index af00b5ef1..170a6b7e4 100644
--- a/components/steps/demo/index.vue
+++ b/components/steps/demo/index.vue
@@ -1,18 +1,64 @@
-<template>
-  <div>
-    <a-steps :current="1">
-      <a-step title="Finished" description="This is a description." />
-      <a-step title="In Progress" description="This is a description." />
-      <a-step title="Waiting" description="This is a description." />
-    </a-steps>
-  </div>
-</template>
 <script>
-import '../style'
-import {} from 'antd'
+import CustomizedProgressDot from './customized-progress-dot'
+import Error from './error'
+import Icon from './icon'
+import ProgressDot from './progress-dot'
+import Simple from './simple'
+import SmallSize from './small-size'
+import StepNext from './step-next'
+import VerticalSmall from './vertical-small'
+import Vertical from './vertical'
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+
+const md = {
+  cn: `# Steps
+
+  引导用户按照流程完成任务的导航条。
+
+  ## 何时使用
+
+  当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。
+            ## 代码演示`,
+  us: `# Steps
+
+  'Steps' is a navigation bar that guides users through the steps of a task.
+
+  # When To Use
+
+  When the task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier.`,
+}
 export default {
-  data () {
-    return {}
+  render () {
+    return (
+      <div>
+        <md cn={md.cn} us={md.us}/>
+        <Simple />
+        <br/>
+        <SmallSize />
+        <br/>
+        <Icon />
+        <br/>
+        <StepNext />
+        <br/>
+        <Vertical />
+        <br/>
+        <VerticalSmall />
+        <br/>
+        <Error />
+        <br/>
+        <ProgressDot />
+        <br/>
+        <CustomizedProgressDot />
+        <br/>
+        <api>
+          <template slot='cn'>
+            <CN/>
+          </template>
+          <US/>
+        </api>
+      </div>
+    )
   },
 }
 </script>
diff --git a/components/steps/demo/progress-dot.md b/components/steps/demo/progress-dot.md
new file mode 100644
index 000000000..2b3713f53
--- /dev/null
+++ b/components/steps/demo/progress-dot.md
@@ -0,0 +1,19 @@
+<cn>
+#### 点状步骤条
+包含步骤点的进度条。
+</cn>
+
+<us>
+#### Dot Style
+Steps with progress dot style.
+</us>
+
+```html
+<template>
+  <a-steps progressDot :current="1">
+    <a-step title="Finished" description="This is a description." />
+    <a-step title="In Progress" description="This is a description." />
+    <a-step title="Waiting" description="This is a description." />
+  </a-steps>
+</template>
+```
diff --git a/components/steps/demo/simple.md b/components/steps/demo/simple.md
new file mode 100644
index 000000000..4fac59c4a
--- /dev/null
+++ b/components/steps/demo/simple.md
@@ -0,0 +1,25 @@
+<cn>
+#### 基本用法
+简单的步骤条。
+</cn>
+
+<us>
+#### Basic
+The most basic step bar.
+</us>
+
+```html
+<template>
+  <a-steps :current="1">
+    <a-step>
+      <!-- <span slot="title">Finished</span> -->
+      <template slot="title">
+        Finished
+      </template>
+      <span slot="description">This is a description.</span>
+    </a-step>
+    <a-step title="In Progress" description="This is a description." />
+    <a-step title="Waiting" description="This is a description." />
+  </a-steps>
+</template>
+```
diff --git a/components/steps/demo/small-size.md b/components/steps/demo/small-size.md
new file mode 100644
index 000000000..27ed8df67
--- /dev/null
+++ b/components/steps/demo/small-size.md
@@ -0,0 +1,19 @@
+<cn>
+#### 迷你版
+迷你版的步骤条，通过设置 `<Steps size="small">` 启用。
+</cn>
+
+<us>
+#### Mini version
+By setting like this: `<Steps size="small">`, you can get a mini version.
+</us>
+
+```html
+<template>
+  <a-steps :current="1" size="small">
+    <a-step title="Finished" />
+    <a-step title="In Progress" />
+    <a-step title="Waiting" />
+  </a-steps>
+</template>
+```
diff --git a/components/steps/demo/step-next.md b/components/steps/demo/step-next.md
new file mode 100644
index 000000000..3c4ccec14
--- /dev/null
+++ b/components/steps/demo/step-next.md
@@ -0,0 +1,84 @@
+<cn>
+#### 步骤切换
+通常配合内容及按钮使用，表示一个流程的处理进度。
+</cn>
+
+<us>
+#### Switch Step
+Cooperate with the content and buttons, to represent the progress of a process.
+</us>
+
+```html
+<template>
+  <div>
+    <a-steps :current="current">
+      <a-step v-for="item in steps" :key="item.title" :title="item.title" />
+    </a-steps>
+    <div class="steps-content">{{steps[current].content}}</div>
+    <div class="steps-action">
+      <a-button
+        v-if="current < steps.length - 1"
+        type="primary" @click="next"
+      >
+        Next
+      </a-button>
+      <a-button
+        v-if="current == steps.length - 1"
+        type="primary"
+        @click="$message.success('Processing complete!')"
+      >
+        Done
+      </a-button>
+      <a-button
+        v-if="current>0"
+        style="margin-left: 8px"
+        @click="prev"
+      >
+        Previous
+      </a-button>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        current: 0,
+        steps: [{
+          title: 'First',
+          content: 'First-content',
+        }, {
+          title: 'Second',
+          content: 'Second-content',
+        }, {
+          title: 'Last',
+          content: 'Last-content',
+        }],
+      }
+    },
+    methods: {
+      next() {
+        this.current++
+      },
+      prev() {
+        this.current--
+      }
+    },
+  }
+</script>
+<style>
+  .steps-content {
+    margin-top: 16px;
+    border: 1px dashed #e9e9e9;
+    border-radius: 6px;
+    background-color: #fafafa;
+    min-height: 200px;
+    text-align: center;
+    padding-top: 80px;
+  }
+
+  .steps-action {
+    margin-top: 24px;
+  }
+</style>
+```
diff --git a/components/steps/demo/vertical-small.md b/components/steps/demo/vertical-small.md
new file mode 100644
index 000000000..db8945ae3
--- /dev/null
+++ b/components/steps/demo/vertical-small.md
@@ -0,0 +1,19 @@
+<cn>
+#### 竖直方向的小型步骤条
+简单的竖直方向的小型步骤条。
+</cn>
+
+<us>
+#### Vertical mini version
+A simple mini version step bar in the vertical direction.
+</us>
+
+```html
+<template>
+  <a-steps direction="vertical" size="small" :current="1">
+    <a-step title="Finished" description="This is a description." />
+    <a-step title="In Progress" description="This is a description." />
+    <a-step title="Waiting" description="This is a description." />
+  </a-steps>
+</template>
+```
diff --git a/components/steps/demo/vertical.md b/components/steps/demo/vertical.md
new file mode 100644
index 000000000..a9f738837
--- /dev/null
+++ b/components/steps/demo/vertical.md
@@ -0,0 +1,19 @@
+<cn>
+#### 竖直方向的步骤条
+简单的竖直方向的步骤条。
+</cn>
+
+<us>
+#### Vertical
+A simple step bar in the vertical direction.
+</us>
+
+```html
+<template>
+  <a-steps direction="vertical" :current="1">
+    <a-step title="Finished" description="This is a description." />
+    <a-step title="In Progress" description="This is a description." />
+    <a-step title="Waiting" description="This is a description." />
+  </a-steps>
+</template>
+```
diff --git a/components/steps/index.en-US.md b/components/steps/index.en-US.md
new file mode 100644
index 000000000..d694abc27
--- /dev/null
+++ b/components/steps/index.en-US.md
@@ -0,0 +1,22 @@
+### Steps
+
+The whole of the step bar.
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| current | to set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | 0 |
+| direction | to specify the direction of the step bar, `horizontal` and `vertical` are currently supported | string | `horizontal` |
+| progressDot | Steps with progress dot style, customize the progress dot by setting it to a function | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false |
+| size | to specify the size of the step bar, `default` and `small` are currently supported | string | `default` |
+| status | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` |
+
+### Steps.Step
+
+A single step in the step bar.
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| description | description of the step, optional property | string\|slot | - |
+| icon | icon of the step, optional property | string\|slot | - |
+| status | to specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | string | `wait` |
+| title | title of the step | string\|slot | - |
diff --git a/components/steps/index.zh-CN.md b/components/steps/index.zh-CN.md
new file mode 100644
index 000000000..4b1b130e0
--- /dev/null
+++ b/components/steps/index.zh-CN.md
@@ -0,0 +1,23 @@
+
+### Steps
+
+整体步骤条。
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number | 0 |
+| direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | string | horizontal |
+| progressDot | 点状步骤条，可以设置为一个 function | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false |
+| size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | default |
+| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | process |
+
+### Steps.Step
+
+步骤条内的每一个步骤。
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| description | 步骤的详情描述，可选 | string\|slot | - |
+| icon | 步骤图标的类型，可选 | string\|slot | - |
+| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string | wait |
+| title | 标题 | string\|slot | - |
diff --git a/components/style.js b/components/style.js
index b6c29b7f6..9798e7ba9 100644
--- a/components/style.js
+++ b/components/style.js
@@ -30,4 +30,5 @@ import './back-top/style'
 import './modal/style'
 import './alert/style'
 import './time-picker/style'
+import './steps/style'
 import './breadcrumb/style'
diff --git a/components/vc-steps/Step.vue b/components/vc-steps/Step.vue
index b920d04ca..6fb37528f 100644
--- a/components/vc-steps/Step.vue
+++ b/components/vc-steps/Step.vue
@@ -34,10 +34,12 @@ export default {
   methods: {
     renderIconNode () {
       const {
-        prefixCls, progressDot, stepNumber, status, title, description,
+        prefixCls, progressDot, stepNumber, status,
         iconPrefix,
       } = getOptionProps(this)
-      const icon = this.icon || this.$slots.default
+      const icon = this.icon || this.$slots.icon
+      const title = this.title || this.$slots.title
+      const description = this.description || this.$slots.description
       let iconNode
       const iconClassName = {
         [`${prefixCls}-icon`]: true,
@@ -71,11 +73,13 @@ export default {
   render () {
     const {
       prefixCls,
-      status = 'wait', icon,
-      description, title, tailContent,
+      status = 'wait', icon, tailContent,
       ...restProps
     } = getOptionProps(this)
 
+    const title = this.title || this.$slots.title
+    const description = this.description || this.$slots.description
+
     const classString = {
       [`${prefixCls}-item`]: true,
       [`${prefixCls}-item-${status}`]: true,
diff --git a/components/vc-steps/Steps.vue b/components/vc-steps/Steps.vue
index 3967aa4d9..003183abb 100644
--- a/components/vc-steps/Steps.vue
+++ b/components/vc-steps/Steps.vue
@@ -145,7 +145,13 @@ export default {
               class: className,
               style: stepStyle,
             }
-            return <Step {...stepProps}>{getComponentFromProp(child, 'icon')}</Step>
+            return (
+              <Step {...stepProps}>
+                <template slot='icon'>{getComponentFromProp(child, 'icon')}</template>
+                <template slot='description'>{getComponentFromProp(child, 'description')}</template>
+                <template slot='title'>{getComponentFromProp(child, 'title')}</template>
+              </Step>
+            )
           })
         }
       </div>
diff --git a/examples/demo.js b/examples/demo.js
index b0f3a7156..1a5d540a5 100644
--- a/examples/demo.js
+++ b/examples/demo.js
@@ -31,3 +31,4 @@ export { default as backTop } from 'antd/back-top/demo/index.vue'
 export { default as modal } from 'antd/modal/demo/index.vue'
 export { default as alert } from 'antd/alert/demo/index.vue'
 export { default as timePicker } from 'antd/time-picker/demo/index.vue'
+export { default as steps } from 'antd/steps/demo/index.vue'