diff --git a/Readme.md b/Readme.md
index 0c7b913..eb874c4 100644
--- a/Readme.md
+++ b/Readme.md
@@ -13,51 +13,62 @@
 
 - @bd/core 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发 wc 组件
 
-### 开发进度 && 计划 (29/43)
+### 开发进度 && 计划 (29/54)
 
-- [x] `wc-card`卡片组件
-- [x] `wc-space`间隔组件
-- [ ] `wc-avatar`头像组件
-- [x] `wc-badge`徽标组件
-- [x] `wc-drawer`抽屉组件
-- [x] `wc-collapse`折叠组件
-- [ ] `wc-dropdown`下拉菜单组件
-- [ ] `wc-counter`倒计时组件
-- [ ] `wc-drag`拖拽组件
-- [x] `wc-image`图片组件
-- [x] `wc-image-preview`图片预览组件
-- [x] `wc-button`表单组件-按钮
-- [x] `wc-link`表单组件-链接按钮
-- [x] `wc-checkbox`表单组件-复选框
-- [x] `wc-input`表单组件-文本输入框
-- [x] `wc-passwd`表单组件-文本输入框
-- [x] `wc-textarea`表单组件-多行文本输入框
-- [x] `wc-number`表单组件-步进数字输入
-- [x] `wc-star`表单组件-评分
-- [x] `wc-radio`表单组件-单选框
-- [ ] `wc-select`表单组件-下拉选择
-- [ ] `wc-cascadar`表单组件-多级联动
-- [x] `wc-switch`表单组件-开关
-- [x] `wc-icon`图标组件
-- [x] `wc-layer` 弹层组件
-- [x] `wc-markd`markdown 组件
-- [ ] `wc-meditor`md 文本编辑器
-- [ ] `wc-neditor`富文本编辑器
-- [x] `wc-pager`分页组件
-- [x] `wc-color`颜色选择器
-- [ ] `wc-datepicker`日期选择器
-- [ ] `wc-timepicker`时间选择器
-- [x] `wc-code`代码高亮插件
-- [x] `wc-scroll`滚动组件
-- [x] `wc-silder`滑块组件
-- [x] `wc-swipe`轮播图组件
-- [x] `wc-breadcrumb` 面包屑组件
-- [ ] `wc-progress`进度条组件
-- [ ] `wc-tree`树形菜单组件
-- [ ] `wc-uploader`上传组件
-- [x] `wc-notify`通知组件
-- [ ] `wc-loading`加载组件
-- [x] `wc-tabs`选项卡组件
+- [x] `wc-card` 卡片组件
+- [x] `wc-space` 间隔组件
+- [ ] `wc-avatar` 头像组件
+- [x] `wc-badge` 徽标组件
+- [x] `wc-drawer` 抽屉组件
+- [x] `wc-collapse` 折叠组件
+- [ ] `wc-dropdown` 下拉菜单组件
+- [ ] `wc-counter` 倒计时组件
+- [ ] `wc-drag` 拖拽组件
+- [x] `wc-image` 图片组件
+- [x] `wc-image-preview` 图片预览组件
+- [x] `wc-button` 表单组件-按钮
+- [x] `wc-link` 表单组件-链接按钮
+- [x] `wc-checkbox` 表单组件-复选框
+- [x] `wc-input` 表单组件-文本输入框
+- [x] `wc-passwd` 表单组件-文本输入框
+- [x] `wc-textarea` 表单组件-多行文本输入框
+- [x] `wc-number` 表单组件-步进数字输入
+- [x] `wc-star` 表单组件-评分
+- [x] `wc-radio` 表单组件-单选框
+- [ ] `wc-select` 表单组件-下拉选择
+- [ ] `wc-cascadar` 表单组件-多级联动
+- [x] `wc-switch` 表单组件-开关
+- [x] `wc-icon` 图标组件
+- [x] `wc-layer`  弹层组件
+- [x] `wc-markd` markdown 组件
+- [ ] `wc-meditor` md 文本编辑器
+- [ ] `wc-neditor` 富文本编辑器
+- [x] `wc-pager` 分页组件
+- [x] `wc-color` 颜色选择器
+- [ ] `wc-datepicker` 日期选择器
+- [ ] `wc-timepicker` 时间选择器
+- [x] `wc-code` 代码高亮插件
+- [x] `wc-scroll` 滚动组件
+- [x] `wc-silder` 滑块组件
+- [x] `wc-swipe` 轮播图组件
+- [x] `wc-breadcrumb`  面包屑组件
+- [ ] `wc-progress` 进度条组件
+- [ ] `wc-tree` 树形菜单组件
+- [ ] `wc-uploader` 上传组件
+- [x] `wc-notify` 通知组件
+- [ ] `wc-loading` 加载组件
+- [x] `wc-tabs` 选项卡组件
+- [ ] `wc-steps` 步骤条组件
+- [ ] `wc-timeline` 时间线组件
+- [ ] `wc-layout` 布局组件
+- [ ] `wc-tag` 标签组件
+- [ ] `wc-tooltip` 文字提示组件
+- [ ] `wc-popconfirm` 气泡确认框组件
+- [ ] `wc-chatbox` 聊天气泡组件
+- [ ] `wc-divider` 分割线组件
+- [ ] `wc-table` 表格组件
+- [ ] `wc-result` 结果反馈组件
+- [ ] `wc-empty` 空状态组件
 
 ### 测试预览
 
diff --git a/src/steps/index.js b/src/steps/index.js
new file mode 100644
index 0000000..f4d20c9
--- /dev/null
+++ b/src/steps/index.js
@@ -0,0 +1,127 @@
+/**
+ * {}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/04/18 09:38:01
+ */
+
+import { css, html, Component, bind, styleMap, classMap } from '@bd/core'
+import '../icon/index.js'
+
+class Steps extends Component {
+  static props = {
+    active: 1,
+    vertical: false
+  }
+
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      :host([vertical]) {
+        flex-direction: column;
+      }
+    `
+  ]
+
+  mounted() {
+    ;[...this.children].forEach((it, i) => {
+      if (it.tagName === 'WC-STEP') {
+        it.index = i + 1
+        it.status = it.index <= this.active ? 2 : i === this.active ? 1 : 0
+        it.vertical = this.vertical
+      } else {
+        it.remove()
+      }
+    })
+  }
+}
+
+class Step extends Component {
+  static props = {
+    title: '',
+    description: '',
+    index: { type: Number, default: 1, attribute: false },
+    status: { type: Number, default: 0, attribute: false },
+    vertical: false
+  }
+
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        font-size: 14px;
+      }
+      .container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        padding: 4px;
+        color: var(--color-dark-1);
+        user-select: none;
+
+        &[status='2'] {
+          color: var(--color-teal-1);
+
+          .num {
+            border-color: var(--color-teal-1);
+          }
+        }
+        &[status='0'] {
+          opacity: 0.6;
+        }
+      }
+
+      :host([vertical]) {
+        .container {
+          flex-direction: row;
+        }
+        .group {
+          align-items: flex-start;
+          margin-left: 12px;
+        }
+      }
+
+      .num {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        border: 1px solid var(--color-grey-1);
+        border-radius: 50%;
+      }
+      .group {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+      .title {
+        line-height: 2;
+      }
+      .description {
+        line-height: 1.5;
+        font-size: 12px;
+      }
+    `
+  ]
+
+  render() {
+    return html`
+      <label class="container" status=${this.status}>
+        <span class="num">${this.index}</span>
+        <div class="group">
+          <strong class="title">${this.title}</strong>
+          <cite class="description">${this.description}</cite>
+        </div>
+      </label>
+    `
+  }
+}
+
+Steps.reg('steps')
+Step.reg('step')