diff --git a/devui/steps-guide/index.ts b/devui/steps-guide/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..62154caf49af04525878b52f2407535eb107a6d3
--- /dev/null
+++ b/devui/steps-guide/index.ts
@@ -0,0 +1,18 @@
+import type { App } from 'vue'
+import StepsGuide from './src/steps-guide'
+
+StepsGuide.install = function(app: App): void {
+  app.component(StepsGuide.name, StepsGuide)
+}
+
+export { StepsGuide }
+
+export default {
+  title: 'StepsGuide 操作指引',
+  category: '导航',
+  status: '开发中', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  install(app: App): void {
+    
+    app.use(StepsGuide as any)
+  }
+}
diff --git a/devui/steps-guide/src/steps-guide-types.ts b/devui/steps-guide/src/steps-guide-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..86f03e8af01d9e9b95bdc5525976ba30f23da412
--- /dev/null
+++ b/devui/steps-guide/src/steps-guide-types.ts
@@ -0,0 +1,8 @@
+import type { ExtractPropTypes } from 'vue'
+
+export const stepsGuideProps = {
+  title: String,
+  content: String
+} as const
+
+export type StepsGuideProps = ExtractPropTypes<typeof stepsGuideProps>
diff --git a/devui/steps-guide/src/steps-guide.scss b/devui/steps-guide/src/steps-guide.scss
new file mode 100644
index 0000000000000000000000000000000000000000..cd6ce11b9d35bba8b2a390b4b7674482bf57732d
--- /dev/null
+++ b/devui/steps-guide/src/steps-guide.scss
@@ -0,0 +1,17 @@
+.d-steps-guide {
+  width: 400px;
+  min-height: 160px;
+  background: rgb(94, 124, 224);
+  box-shadow: rgba(81, 112, 255, 0.3) 0 4px 16px 0;
+  border-radius: 4px;
+  font-size: 12px;
+  color: rgb(255, 255, 255);
+  padding: 20px;
+  position: absolute;
+
+  .devui-title {
+    opacity: 1;
+    margin: 0 0 20px 0;
+    padding: 0;
+  }
+}
diff --git a/devui/steps-guide/src/steps-guide.tsx b/devui/steps-guide/src/steps-guide.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9b2f777ecfb4bd4227f9ac1a78738918ec419f0d
--- /dev/null
+++ b/devui/steps-guide/src/steps-guide.tsx
@@ -0,0 +1,44 @@
+import './steps-guide.scss'
+
+import { defineComponent, Teleport, ref, onMounted, reactive } from 'vue'
+import { stepsGuideProps, StepsGuideProps } from './steps-guide-types'
+
+// 
+export default defineComponent({
+  name: 'DStepsGuide',
+  props: stepsGuideProps,
+  emits: [],
+  setup(props: StepsGuideProps, ctx) {
+    console.log(props, ctx, Teleport)
+    const teleport = Teleport
+    const containerRef = ref(null)
+    const position = reactive({
+      left: '',
+      top: '',
+      zIndex: 1100
+    })
+
+    onMounted(() => {
+      const triggerElement = containerRef.value.firstElementChild
+      const targetRect = triggerElement.getBoundingClientRect();
+      position.left = targetRect.left + triggerElement.clientWidth / 2 + 'px'
+      position.top = targetRect.top + triggerElement.clientHeight / 2 + 'px'
+    })
+    return () => 
+      (<div class="d-steps-guide-container" ref={ containerRef }>
+        {/* 指引位置默认只允许存在根元素 */}
+        { ctx.slots.default()[0] }
+        <teleport to="body">
+          <div class="d-steps-guide" style={ position }>
+            <div class="devui-shining-dot"></div>
+            <div class="devui-shining-plus"></div>
+            <div class="devui-arrow"></div>
+            <div class="devui-guide-container">
+              <p class="devui-title">{ props.title }</p>
+              <div class="devui-content">{ props.content }</div>
+            </div>
+          </div>
+        </teleport>
+      </div>)
+  }
+})
diff --git a/docs/components/steps-guide/index.md b/docs/components/steps-guide/index.md
new file mode 100644
index 0000000000000000000000000000000000000000..37ef2d866b8e578818f1efdae549c462362f48b4
--- /dev/null
+++ b/docs/components/steps-guide/index.md
@@ -0,0 +1,53 @@
+# steps-guide 操作指引
+
+引导用户了解业务使用逻辑组件。
+
+### 何时使用
+
+业务推出新特性，或复杂的业务逻辑需要指引用户时使用。
+
+### 基本用法
+设定一组操作指引信息顺序显示。
+<d-steps-guide title="基础用法" content="业务推出新特性，或复杂的业务逻辑需要指引用户时使用。">
+    <d-button bsStyle="common">Step 1</d-button>
+</d-steps-guide>
+<br />
+
+### 弹出位置
+总共支持 8 个弹出位置。
+<br />
+
+### 自定义
+自定义操作指引信息弹出的位置和元素。
+
+<br />
+
+```html
+<template>
+</template>
+<script lang="ts">
+</script>
+```
+
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+export default defineComponent({
+  setup() {
+    const step = ref(4);
+  
+    return {
+      step
+    }
+  }
+})
+</script>
+
+### API
+
+d-slider 参数
+
+| 参数    | 类型  | 默认 | 说明                                                              | 跳转 |
+| --------- | ------- | ----- | ------------------------------------------------------------------- | ---- |
+|   steps   | array   |  []   | 可选，滑动输入条的最大值                                |[基本用法](#基本用法)      |
+
diff --git a/sites/components/steps-guide/index.md b/sites/components/steps-guide/index.md
new file mode 100644
index 0000000000000000000000000000000000000000..cac07f085153545ec94220cd96e5f7dd7943a04e
--- /dev/null
+++ b/sites/components/steps-guide/index.md
@@ -0,0 +1,60 @@
+# steps-guide 操作指引
+
+引导用户了解业务使用逻辑组件。
+
+### 何时使用
+
+业务推出新特性，或复杂的业务逻辑需要指引用户时使用。
+
+### 基本用法
+设定一组操作指引信息顺序显示。
+<d-steps-guide title="基础用法" content="业务推出新特性，或复杂的业务逻辑需要指引用户时使用。" :step="1">
+    <d-button bsStyle="common">Step 1</d-button>
+</d-steps-guide>
+<br />
+<d-steps-guide title="基础用法" content="业务推出新特性，或复杂的业务逻辑需要指引用户时使用。" :step="2">
+    <d-button bsStyle="common">Step 2</d-button>
+</d-steps-guide>
+<br />
+
+### 弹出位置
+总共支持 8 个弹出位置。
+<br />
+
+### 自定义
+自定义操作指引信息弹出的位置和元素。
+
+<br />
+
+```html
+<template>
+</template>
+<script lang="ts">
+</script>
+```
+
+
+<script lang="ts">
+import { defineComponent, ref, reactive } from 'vue'
+export default defineComponent({
+  setup() {
+    const steps = reactive([
+        { title: '基础用法', content: '业务推出新特性，或复杂的业务逻辑需要指引用户时使用。' },
+        { title: '基础用法', content: '业务推出新特性，或复杂的业务逻辑需要指引用户时使用。' },
+    ]);
+  
+    return {
+      steps
+    }
+  }
+})
+</script>
+
+### API
+
+d-slider 参数
+
+| 参数    | 类型  | 默认 | 说明                                              | 跳转 |
+| --------- | ------- | ----- | ------------------------------------------------------------------- | ---- |
+|   steps   | array   |  []   | 必选，操作指引步骤数组                       |[基本用法](#基本用法)      |
+