diff --git a/packages/ui/src/components/steps/Step.vue b/packages/ui/src/components/steps/Step.vue
index 0c081bb3a..e25afbf7d 100644
--- a/packages/ui/src/components/steps/Step.vue
+++ b/packages/ui/src/components/steps/Step.vue
@@ -12,8 +12,9 @@ defineSlots<StepSlots>()
 const $slots = useSlots()
 const context = inject(stepsContextKey, null)
 
-// Register this step and get its index
+// Register this step and get its index (side-effect: increments parent counter)
 const stepIndex = context?.registerStep() ?? 0
+const initial = computed(() => context?.initial.value ?? 0)
 
 const currentStatus = computed(() => {
   if (props.status) return props.status
@@ -44,25 +45,28 @@ function handleKeydown(event: KeyboardEvent) {
 const hasTitle = computed(() => !!props.title || !!$slots.title)
 const hasDescription = computed(() => !!props.description || !!$slots.description)
 const hasSubTitle = computed(() => !!props.subTitle || !!$slots.subTitle)
-const hasCustomIcon = computed(() => !!$slots.icon)
+const hasCustomIcon = computed(() => !!props.icon || !!$slots.icon)
+const isProgressDot = computed(() => !!context?.progressDot.value)
 
 const isFinish = computed(() => currentStatus.value === 'finish')
 const isError = computed(() => currentStatus.value === 'error')
-const stepNumber = computed(() => String(stepIndex + 1))
+const stepNumber = computed(() => String(stepIndex + initial.value + 1))
 
 const classes = computed(() => ({
   'ant-steps-item': true,
   [`ant-steps-item-${currentStatus.value}`]: true,
   'ant-steps-item-disabled': props.disabled,
   'ant-steps-item-clickable': isClickable.value && !props.disabled,
-  'ant-steps-item-custom': hasCustomIcon.value,
+  'ant-steps-item-custom': hasCustomIcon.value && !isProgressDot.value,
 }))
+
+const stepRole = computed(() => (isClickable.value ? 'button' : undefined))
 </script>
 
 <template>
   <div
     :class="classes"
-    role="button"
+    :role="stepRole"
     :tabindex="isClickable && !disabled ? 0 : undefined"
     :aria-current="currentStatus === 'process' ? 'step' : undefined"
     :aria-disabled="disabled || undefined"
@@ -73,7 +77,11 @@ const classes = computed(() => ({
       <div class="ant-steps-item-tail" />
       <div class="ant-steps-item-icon">
         <slot name="icon">
-          <span class="ant-steps-icon">
+          <span v-if="hasCustomIcon && icon" class="ant-steps-icon">
+            <component :is="icon" />
+          </span>
+          <span v-else-if="isProgressDot" class="ant-steps-icon ant-steps-icon-dot" />
+          <span v-else class="ant-steps-icon">
             <CheckOutlined v-if="isFinish" />
             <CloseOutlined v-else-if="isError" />
             <template v-else>{{ stepNumber }}</template>
diff --git a/packages/ui/src/components/steps/Steps.vue b/packages/ui/src/components/steps/Steps.vue
index 60518c506..3b09084f8 100644
--- a/packages/ui/src/components/steps/Steps.vue
+++ b/packages/ui/src/components/steps/Steps.vue
@@ -2,13 +2,25 @@
 import { computed, provide, ref, onBeforeUpdate } from 'vue'
 import type { StepsProps, StepsEmits, StepsSlots } from './types'
 import { stepsDefaultProps, stepsContextKey } from './types'
+import { useConfigInject, useBreakpoint } from '@/hooks'
+import Step from './Step.vue'
 
 defineOptions({ name: 'ASteps' })
 const props = withDefaults(defineProps<StepsProps>(), stepsDefaultProps)
 const emit = defineEmits<StepsEmits>()
 defineSlots<StepsSlots>()
 
-// Step registration counter. Reset before each render via onBeforeUpdate.
+const { size: globalSize } = useConfigInject()
+const screens = useBreakpoint()
+
+// Steps only supports 'default' | 'small'; ConfigProvider 'md'/'lg' both map to 'default'
+const mergedSize = computed(() => props.size ?? (globalSize.value === 'sm' ? 'small' : 'default'))
+
+const mergedDirection = computed(() => {
+  if (props.responsive && screens.value.xs) return 'vertical'
+  return props.direction
+})
+
 const stepCounter = ref(0)
 
 onBeforeUpdate(() => {
@@ -22,11 +34,14 @@ function handleStepClick(index: number) {
 
 provide(stepsContextKey, {
   current: computed(() => props.current),
+  initial: computed(() => props.initial),
   status: computed(() => props.status),
-  size: computed(() => props.size),
-  direction: computed(() => props.direction),
+  size: mergedSize,
+  direction: mergedDirection,
   labelPlacement: computed(() => props.labelPlacement),
   percent: computed(() => props.percent),
+  progressDot: computed(() => props.progressDot),
+  type: computed(() => props.type),
   onStepClick: handleStepClick,
   registerStep: () => {
     return stepCounter.value++
@@ -36,17 +51,33 @@ provide(stepsContextKey, {
   },
 })
 
+const isInline = computed(() => props.type === 'inline')
+
 const classes = computed(() => ({
   'ant-steps': true,
-  [`ant-steps-${props.direction}`]: true,
-  [`ant-steps-${props.size}`]: props.size !== 'default',
-  'ant-steps-label-vertical': props.labelPlacement === 'vertical' && props.direction === 'horizontal',
+  [`ant-steps-${mergedDirection.value}`]: true,
+  [`ant-steps-${mergedSize.value}`]: mergedSize.value !== 'default',
+  'ant-steps-label-vertical':
+    props.labelPlacement === 'vertical' && mergedDirection.value === 'horizontal',
   'ant-steps-navigation': props.type === 'navigation',
+  'ant-steps-inline': isInline.value,
+  'ant-steps-dot': !!props.progressDot && !isInline.value,
 }))
 </script>
 
 <template>
   <div :class="classes" role="navigation" aria-label="Steps">
-    <slot />
+    <slot>
+      <Step
+        v-for="(item, index) in (items || [])"
+        :key="index"
+        :title="item.title"
+        :sub-title="item.subTitle"
+        :description="item.description"
+        :icon="item.icon"
+        :status="item.status"
+        :disabled="item.disabled"
+      />
+    </slot>
   </div>
 </template>
diff --git a/packages/ui/src/components/steps/__tests__/__snapshots__/demo.test.ts.snap b/packages/ui/src/components/steps/__tests__/__snapshots__/demo.test.ts.snap
index c2c807318..cdc6a60b7 100644
--- a/packages/ui/src/components/steps/__tests__/__snapshots__/demo.test.ts.snap
+++ b/packages/ui/src/components/steps/__tests__/__snapshots__/demo.test.ts.snap
@@ -296,6 +296,187 @@ exports[`Steps demos > demo: Icon 1`] = `
 </div>"
 `;
 
+exports[`Steps demos > demo: Inline 1`] = `
+"<div style="display: flex; flex-direction: column; gap: 24px;">
+  <div style="display: flex; align-items: center; gap: 16px;">
+    <div style="min-width: 200px;">
+      <div style="font-weight: 500;">Ant Design Title 1</div>
+      <div style="font-size: 12px; color: rgba(0, 0, 0, 0.45);"> Ant Design, a design language for background applications </div>
+    </div>
+    <div class="ant-steps ant-steps-horizontal ant-steps-inline" role="navigation" aria-label="Steps" style="flex: 1 1 0%;">
+      <div class="ant-steps-item ant-steps-item-process ant-steps-item-clickable" role="button" tabindex="0" aria-current="step">
+        <div class="ant-steps-item-container">
+          <div class="ant-steps-item-tail"></div>
+          <div class="ant-steps-item-icon"><span class="ant-steps-icon">1</span></div>
+          <div class="ant-steps-item-content">
+            <div class="ant-steps-item-title">Step 1
+              <!--v-if-->
+            </div>
+            <!--v-if-->
+          </div>
+        </div>
+      </div>
+      <div class="ant-steps-item ant-steps-item-wait ant-steps-item-clickable" role="button" tabindex="0">
+        <div class="ant-steps-item-container">
+          <div class="ant-steps-item-tail"></div>
+          <div class="ant-steps-item-icon"><span class="ant-steps-icon">2</span></div>
+          <div class="ant-steps-item-content">
+            <div class="ant-steps-item-title">Step 2
+              <!--v-if-->
+            </div>
+            <!--v-if-->
+          </div>
+        </div>
+      </div>
+      <div class="ant-steps-item ant-steps-item-wait ant-steps-item-clickable" role="button" tabindex="0">
+        <div class="ant-steps-item-container">
+          <div class="ant-steps-item-tail"></div>
+          <div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
+          <div class="ant-steps-item-content">
+            <div class="ant-steps-item-title">Step 3
+              <!--v-if-->
+            </div>
+            <!--v-if-->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div style="display: flex; align-items: center; gap: 16px;">
+    <div style="min-width: 200px;">
+      <div style="font-weight: 500;">Ant Design Title 2</div>
+      <div style="font-size: 12px; color: rgba(0, 0, 0, 0.45);"> Ant Design, a design language for background applications </div>
+    </div>
+    <div class="ant-steps ant-steps-horizontal ant-steps-inline" role="navigation" aria-label="Steps" style="flex: 1 1 0%;">
+      <div class="ant-steps-item ant-steps-item-finish ant-steps-item-clickable" role="button" tabindex="0">
+        <div class="ant-steps-item-container">
+          <div class="ant-steps-item-tail"></div>
+          <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
+          <div class="ant-steps-item-content">
+            <div class="ant-steps-item-title">Step 1
+              <!--v-if-->
+            </div>
+            <!--v-if-->
+          </div>
+        </div>
+      </div>
+      <div class="ant-steps-item ant-steps-item-error ant-steps-item-clickable" role="button" tabindex="0">
+        <div class="ant-steps-item-container">
+          <div class="ant-steps-item-tail"></div>
+          <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" fill-rule="evenodd" viewBox="64 64 896 896"><path d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"></path></svg></span></span></div>
+          <div class="ant-steps-item-content">
+            <div class="ant-steps-item-title">Step 2
+              <!--v-if-->
+            </div>
+            <!--v-if-->
+          </div>
+        </div>
+      </div>
+      <div class="ant-steps-item ant-steps-item-wait ant-steps-item-clickable" role="button" tabindex="0">
+        <div class="ant-steps-item-container">
+          <div class="ant-steps-item-tail"></div>
+          <div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
+          <div class="ant-steps-item-content">
+            <div class="ant-steps-item-title">Step 3
+              <!--v-if-->
+            </div>
+            <!--v-if-->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div style="display: flex; align-items: center; gap: 16px;">
+    <div style="min-width: 200px;">
+      <div style="font-weight: 500;">Ant Design Title 3</div>
+      <div style="font-size: 12px; color: rgba(0, 0, 0, 0.45);"> Ant Design, a design language for background applications </div>
+    </div>
+    <div class="ant-steps ant-steps-horizontal ant-steps-inline" role="navigation" aria-label="Steps" style="flex: 1 1 0%;">
+      <div class="ant-steps-item ant-steps-item-finish ant-steps-item-clickable" role="button" tabindex="0">
+        <div class="ant-steps-item-container">
+          <div class="ant-steps-item-tail"></div>
+          <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
+          <div class="ant-steps-item-content">
+            <div class="ant-steps-item-title">Step 1
+              <!--v-if-->
+            </div>
+            <!--v-if-->
+          </div>
+        </div>
+      </div>
+      <div class="ant-steps-item ant-steps-item-finish ant-steps-item-clickable" role="button" tabindex="0">
+        <div class="ant-steps-item-container">
+          <div class="ant-steps-item-tail"></div>
+          <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
+          <div class="ant-steps-item-content">
+            <div class="ant-steps-item-title">Step 2
+              <!--v-if-->
+            </div>
+            <!--v-if-->
+          </div>
+        </div>
+      </div>
+      <div class="ant-steps-item ant-steps-item-process ant-steps-item-clickable" role="button" tabindex="0" aria-current="step">
+        <div class="ant-steps-item-container">
+          <div class="ant-steps-item-tail"></div>
+          <div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
+          <div class="ant-steps-item-content">
+            <div class="ant-steps-item-title">Step 3
+              <!--v-if-->
+            </div>
+            <!--v-if-->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div style="display: flex; align-items: center; gap: 16px;">
+    <div style="min-width: 200px;">
+      <div style="font-weight: 500;">Ant Design Title 4</div>
+      <div style="font-size: 12px; color: rgba(0, 0, 0, 0.45);"> Ant Design, a design language for background applications </div>
+    </div>
+    <div class="ant-steps ant-steps-horizontal ant-steps-inline" role="navigation" aria-label="Steps" style="flex: 1 1 0%;">
+      <div class="ant-steps-item ant-steps-item-finish ant-steps-item-clickable" role="button" tabindex="0">
+        <div class="ant-steps-item-container">
+          <div class="ant-steps-item-tail"></div>
+          <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
+          <div class="ant-steps-item-content">
+            <div class="ant-steps-item-title">Step 1
+              <!--v-if-->
+            </div>
+            <!--v-if-->
+          </div>
+        </div>
+      </div>
+      <div class="ant-steps-item ant-steps-item-process ant-steps-item-clickable" role="button" tabindex="0" aria-current="step">
+        <div class="ant-steps-item-container">
+          <div class="ant-steps-item-tail"></div>
+          <div class="ant-steps-item-icon"><span class="ant-steps-icon">2</span></div>
+          <div class="ant-steps-item-content">
+            <div class="ant-steps-item-title">Step 2
+              <!--v-if-->
+            </div>
+            <!--v-if-->
+          </div>
+        </div>
+      </div>
+      <div class="ant-steps-item ant-steps-item-wait ant-steps-item-clickable" role="button" tabindex="0">
+        <div class="ant-steps-item-container">
+          <div class="ant-steps-item-tail"></div>
+          <div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
+          <div class="ant-steps-item-content">
+            <div class="ant-steps-item-title">Step 3
+              <!--v-if-->
+            </div>
+            <!--v-if-->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>"
+`;
+
 exports[`Steps demos > demo: LabelPlacement 1`] = `
 "<div>
   <div class="ant-steps ant-steps-horizontal ant-steps-label-vertical" role="navigation" aria-label="Steps">
diff --git a/packages/ui/src/components/steps/__tests__/demo.test.ts b/packages/ui/src/components/steps/__tests__/demo.test.ts
index d2769a372..b791de9b2 100644
--- a/packages/ui/src/components/steps/__tests__/demo.test.ts
+++ b/packages/ui/src/components/steps/__tests__/demo.test.ts
@@ -15,6 +15,7 @@ import ProgressDot from '../demo/progress-dot.vue'
 import Progress from '../demo/progress.vue'
 import LabelPlacement from '../demo/label-placement.vue'
 import CustomizedProgressDot from '../demo/customized-progress-dot.vue'
+import Inline from '../demo/inline.vue'
 
 const demos = {
   Basic,
@@ -32,6 +33,7 @@ const demos = {
   Progress,
   LabelPlacement,
   CustomizedProgressDot,
+  Inline,
 }
 
 describe('Steps demos', () => {
diff --git a/packages/ui/src/components/steps/__tests__/index.test.ts b/packages/ui/src/components/steps/__tests__/index.test.ts
index 5ee926eb0..09fc5cc90 100644
--- a/packages/ui/src/components/steps/__tests__/index.test.ts
+++ b/packages/ui/src/components/steps/__tests__/index.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
-import { h, nextTick } from 'vue'
+import { defineComponent, h, markRaw } from 'vue'
 import Steps from '../Steps.vue'
 import Step from '../Step.vue'
 
@@ -103,6 +103,16 @@ describe('Steps', () => {
     expect(wrapper.classes('ant-steps-navigation')).toBe(true)
   })
 
+  it('applies inline type class', () => {
+    const wrapper = createSteps({ type: 'inline' })
+    expect(wrapper.classes('ant-steps-inline')).toBe(true)
+  })
+
+  it('applies dot class when progressDot is true', () => {
+    const wrapper = createSteps({ progressDot: true })
+    expect(wrapper.classes('ant-steps-dot')).toBe(true)
+  })
+
   it('step click emits change and update:current', async () => {
     const wrapper = createSteps({ current: 0 })
     const items = wrapper.findAll('.ant-steps-item')
@@ -153,6 +163,30 @@ describe('Steps', () => {
     expect(items[2].classes('ant-steps-item-wait')).toBe(true)
   })
 
+  it('renders steps via items prop', () => {
+    const wrapper = mount(Steps, {
+      props: {
+        current: 1,
+        items: [
+          { title: 'First' },
+          { title: 'Second', description: 'desc' },
+          { title: 'Third' },
+        ],
+      },
+    })
+    const items = wrapper.findAll('.ant-steps-item')
+    expect(items).toHaveLength(3)
+    expect(items[0].find('.ant-steps-item-title').text()).toContain('First')
+    expect(items[1].find('.ant-steps-item-description').text()).toBe('desc')
+  })
+
+  it('initial prop offsets step numbering display', () => {
+    const wrapper = createSteps({ current: 0, initial: 2 })
+    const icons = wrapper.findAll('.ant-steps-icon')
+    expect(icons[0].text()).toBe('3')
+    expect(icons[1].text()).toBe('4')
+  })
+
   it('should render snapshot correctly', () => {
     const wrapper = createSteps({ current: 1 }, [
       { title: 'Done', description: 'First step' },
@@ -198,6 +232,11 @@ describe('Step', () => {
     expect(icons[1].find('.anticon-close').exists()).toBe(true)
   })
 
+  it('shows dot icon when progressDot is enabled', () => {
+    const wrapper = createSteps({ current: 0, progressDot: true })
+    expect(wrapper.find('.ant-steps-icon-dot').exists()).toBe(true)
+  })
+
   it('supports icon slot', () => {
     const wrapper = mount(Steps, {
       props: { current: 0 },
@@ -213,6 +252,25 @@ describe('Step', () => {
     expect(wrapper.find('.custom-icon').text()).toBe('★')
   })
 
+  it('wraps icon prop content with .ant-steps-icon', () => {
+    const IconProp = defineComponent({
+      name: 'IconProp',
+      setup() {
+        return () => h('span', { class: 'prop-icon' }, 'P')
+      },
+    })
+
+    const wrapper = mount(Steps, {
+      props: {
+        current: 0,
+        items: [{ title: 'Custom', icon: markRaw(IconProp) }],
+      },
+    })
+
+    expect(wrapper.find('.ant-steps-item-icon > .ant-steps-icon').exists()).toBe(true)
+    expect(wrapper.find('.ant-steps-item-icon > .ant-steps-icon .prop-icon').exists()).toBe(true)
+  })
+
   it('supports title slot', () => {
     const wrapper = mount(Steps, {
       props: { current: 0 },
@@ -249,9 +307,18 @@ describe('Step', () => {
     expect(tails.length).toBe(3)
   })
 
-  it('clickable step has clickable class', () => {
+  it('clickable step has clickable class and role="button"', () => {
     const wrapper = createSteps({ current: 0 })
     const items = wrapper.findAll('.ant-steps-item')
     expect(items[0].classes('ant-steps-item-clickable')).toBe(true)
+    expect(items[0].attributes('role')).toBe('button')
+  })
+
+  it('has component name AStep', () => {
+    expect(Step.name).toBe('AStep')
+  })
+
+  it('has component name ASteps', () => {
+    expect(Steps.name).toBe('ASteps')
   })
 })
diff --git a/packages/ui/src/components/steps/demo/inline.vue b/packages/ui/src/components/steps/demo/inline.vue
index 23b77e544..767180bef 100644
--- a/packages/ui/src/components/steps/demo/inline.vue
+++ b/packages/ui/src/components/steps/demo/inline.vue
@@ -7,16 +7,24 @@
           Ant Design, a design language for background applications
         </div>
       </div>
-      <a-steps style="flex: 1" :current="item.current" :status="item.status" size="small">
-        <a-step title="Step 1" description="This is a Step 1." />
-        <a-step title="Step 2" description="This is a Step 2." />
-        <a-step title="Step 3" description="This is a Step 3." />
-      </a-steps>
+      <a-steps
+        style="flex: 1"
+        type="inline"
+        :current="item.current"
+        :status="item.status"
+        :items="stepItems"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+const stepItems = [
+  { title: 'Step 1' },
+  { title: 'Step 2' },
+  { title: 'Step 3' },
+]
+
 const data = [
   { title: 'Ant Design Title 1', current: 0 },
   { title: 'Ant Design Title 2', current: 1, status: 'error' as const },
diff --git a/packages/ui/src/components/steps/style/index.css b/packages/ui/src/components/steps/style/index.css
index c3deebc0d..28928e5f2 100644
--- a/packages/ui/src/components/steps/style/index.css
+++ b/packages/ui/src/components/steps/style/index.css
@@ -107,13 +107,13 @@
 }
 
 :where(.ant-steps) .ant-steps-item-process .ant-steps-item-icon .ant-steps-icon {
-  color: #fff;
+  color: var(--color-accent-content, #fff);
 }
 
 /* Finish icon */
 :where(.ant-steps) .ant-steps-item-finish .ant-steps-item-icon {
   border-color: var(--color-accent, #1677ff);
-  background: #fff;
+  background: var(--color-neutral-bg-container, #fff);
 }
 
 :where(.ant-steps) .ant-steps-item-finish .ant-steps-item-icon .ant-steps-icon {
@@ -122,7 +122,7 @@
 
 /* Wait icon */
 :where(.ant-steps) .ant-steps-item-wait .ant-steps-item-icon {
-  background: #fff;
+  background: var(--color-neutral-bg-container, #fff);
   border-color: var(--color-neutral-border, #d9d9d9);
 }
 
@@ -133,7 +133,7 @@
 /* Error icon */
 :where(.ant-steps) .ant-steps-item-error .ant-steps-item-icon {
   border-color: var(--color-error, #ff4d4f);
-  background: #fff;
+  background: var(--color-neutral-bg-container, #fff);
 }
 
 :where(.ant-steps) .ant-steps-item-error .ant-steps-item-icon .ant-steps-icon {
@@ -272,3 +272,131 @@
 :where(.ant-steps).ant-steps-navigation .ant-steps-item-tail {
   @apply hidden;
 }
+
+/* ---- Progress dot ----
+   .ant-steps-item-content has width: 140px; the dot icon (8px) is centered
+   within it: margin-inline-start = (140 - 8) / 2 + 1 = 67px.
+   Process dot is 10px: (140 - 10) / 2 + 1 = 66px.
+   Tail starts at: 140 / 2 = 70px. */
+:where(.ant-steps).ant-steps-dot .ant-steps-item-icon {
+  width: 8px;
+  height: 8px;
+  margin-inline-start: 67px;
+  padding: 0;
+  line-height: 8px;
+  border: none;
+  border-radius: 50%;
+  background: var(--color-neutral-border, #d9d9d9);
+}
+
+:where(.ant-steps).ant-steps-dot .ant-steps-item-icon .ant-steps-icon-dot {
+  @apply block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: currentColor;
+  transition: transform var(--ant-motion-duration, 0.2s);
+}
+
+:where(.ant-steps).ant-steps-dot .ant-steps-item-process .ant-steps-item-icon {
+  width: 10px;
+  height: 10px;
+  margin-inline-start: 66px;
+  line-height: 10px;
+  background: var(--color-accent, #1677ff);
+}
+
+:where(.ant-steps).ant-steps-dot .ant-steps-item-finish .ant-steps-item-icon {
+  background: var(--color-accent, #1677ff);
+}
+
+:where(.ant-steps).ant-steps-dot .ant-steps-item-error .ant-steps-item-icon {
+  background: var(--color-error, #ff4d4f);
+}
+
+:where(.ant-steps).ant-steps-dot .ant-steps-item-tail {
+  top: 2px;
+  width: 100%;
+  margin: 0 0 0 70px;
+  padding: 0;
+}
+
+:where(.ant-steps).ant-steps-dot .ant-steps-item-tail::after {
+  margin-inline-start: 12px;
+}
+
+:where(.ant-steps).ant-steps-dot .ant-steps-item-content {
+  width: 140px;
+}
+
+:where(.ant-steps).ant-steps-dot .ant-steps-item-title {
+  line-height: 1.5;
+}
+
+:where(.ant-steps).ant-steps-dot.ant-steps-vertical .ant-steps-item-icon {
+  margin-inline-start: 0;
+  margin-top: 12px;
+}
+
+:where(.ant-steps).ant-steps-dot.ant-steps-vertical .ant-steps-item-tail {
+  top: 6px;
+  margin: 0;
+  padding: 22px 0 4px;
+  inset-inline-start: 3px;
+}
+
+/* ---- Inline type ---- */
+:where(.ant-steps).ant-steps-inline {
+  width: auto;
+}
+
+:where(.ant-steps).ant-steps-inline .ant-steps-item {
+  @apply overflow-visible;
+}
+
+:where(.ant-steps).ant-steps-inline .ant-steps-item-container {
+  @apply flex-col items-center;
+}
+
+:where(.ant-steps).ant-steps-inline .ant-steps-item-icon {
+  width: 8px;
+  height: 8px;
+  border: none;
+  margin-inline-end: 0;
+}
+
+:where(.ant-steps).ant-steps-inline .ant-steps-item-process .ant-steps-item-icon {
+  background: var(--color-accent, #1677ff);
+}
+
+:where(.ant-steps).ant-steps-inline .ant-steps-item-wait .ant-steps-item-icon {
+  background: var(--color-neutral-border, #d9d9d9);
+}
+
+:where(.ant-steps).ant-steps-inline .ant-steps-item-finish .ant-steps-item-icon {
+  background: var(--color-accent, #1677ff);
+}
+
+:where(.ant-steps).ant-steps-inline .ant-steps-item-content {
+  width: auto;
+  margin-top: 8px;
+}
+
+:where(.ant-steps).ant-steps-inline .ant-steps-item-title {
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--color-neutral-secondary, rgba(0, 0, 0, 0.45));
+}
+
+:where(.ant-steps).ant-steps-inline .ant-steps-item-process .ant-steps-item-title {
+  color: var(--color-neutral, rgba(0, 0, 0, 0.88));
+  font-weight: 600;
+}
+
+:where(.ant-steps).ant-steps-inline .ant-steps-item-tail {
+  @apply hidden;
+}
+
+:where(.ant-steps).ant-steps-inline .ant-steps-item-description {
+  @apply hidden;
+}
diff --git a/packages/ui/src/components/steps/types.ts b/packages/ui/src/components/steps/types.ts
index bbd25a7cd..9cb5bd489 100644
--- a/packages/ui/src/components/steps/types.ts
+++ b/packages/ui/src/components/steps/types.ts
@@ -1,12 +1,21 @@
 import type { Slot } from '@/utils/types'
-import type { InjectionKey, Ref } from 'vue'
+import type { Component, InjectionKey, Ref } from 'vue'
 
 export type StepStatus = 'wait' | 'process' | 'finish' | 'error'
 
+export interface StepItem {
+  title?: string
+  subTitle?: string
+  description?: string
+  icon?: Component
+  status?: StepStatus
+  disabled?: boolean
+}
+
 export interface StepsProps {
   /** Current active step index (zero-based) */
   current?: number
-  /** Starting index for step numbering */
+  /** Starting index for step numbering display (default 0) */
   initial?: number
   /** Status of the current step */
   status?: StepStatus
@@ -17,19 +26,25 @@ export interface StepsProps {
   /** Placement of labels relative to icons */
   labelPlacement?: 'horizontal' | 'vertical'
   /** Visual type of the steps */
-  type?: 'default' | 'navigation'
+  type?: 'default' | 'navigation' | 'inline'
   /** Progress percentage for the current step icon */
   percent?: number
+  /** Show dot style progress bar */
+  progressDot?: boolean
+  /** Declarative step items — alternative to using <Step> children */
+  items?: StepItem[]
+  /** Auto-switch to vertical layout on small screens */
+  responsive?: boolean
 }
 
 export const stepsDefaultProps = {
   current: 0,
   initial: 0,
   status: 'process',
-  size: 'default',
   direction: 'horizontal',
   labelPlacement: 'horizontal',
   type: 'default',
+  responsive: true,
 } as const
 
 export interface StepsEmits {
@@ -48,6 +63,8 @@ export interface StepProps {
   subTitle?: string
   /** Description of the step */
   description?: string
+  /** Custom icon component */
+  icon?: Component
   /** Override the automatically determined status */
   status?: StepStatus
   /** Whether the step is disabled (not clickable) */
@@ -65,11 +82,14 @@ export interface StepSlots {
 /** Context provided by Steps to each Step child */
 export interface StepsContextType {
   current: Ref<number>
+  initial: Ref<number>
   status: Ref<StepStatus>
   size: Ref<'default' | 'small'>
   direction: Ref<'horizontal' | 'vertical'>
   labelPlacement: Ref<'horizontal' | 'vertical'>
   percent: Ref<number | undefined>
+  progressDot: Ref<boolean | undefined>
+  type: Ref<'default' | 'navigation' | 'inline'>
   onStepClick?: (index: number) => void
   registerStep: () => number
   unregisterStep: (index: number) => void