diff --git a/examples/uni/src/pages-info/steps/base.vue b/examples/uni/src/pages-info/steps/base.vue
new file mode 100644
index 0000000..ca4d01b
--- /dev/null
+++ b/examples/uni/src/pages-info/steps/base.vue
@@ -0,0 +1,111 @@
+
+
+
+
+
+
+ 基础用法
+
+
+ 默认横向步骤条，通过 v-model:active 控制当前步骤
+
+
+
+
+
+
+
+
+
+
+
+ 上一步
+
+
+ 下一步
+
+
+
+
+
+
+ 带描述的步骤条
+
+
+ 为步骤添加描述信息
+
+
+
+
+
+
+
+
+
+
+
+ 自定义状态
+
+
+ 可以通过 status 属性覆盖步骤状态
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/uni/src/pages-info/steps/clickable.vue b/examples/uni/src/pages-info/steps/clickable.vue
new file mode 100644
index 0000000..6a0b5c5
--- /dev/null
+++ b/examples/uni/src/pages-info/steps/clickable.vue
@@ -0,0 +1,108 @@
+
+
+
+
+
+
+ 可点击的步骤条
+
+
+ 设置 clickable 属性使步骤可点击切换
+
+
+
+
+
+
+
+
+
+
+ 当前步骤: {{ active1 + 1 }}
+
+
+
+
+
+ 部分步骤可点击
+
+
+ 只有部分步骤可以点击
+
+
+
+
+
+
+
+
+
+
+ 当前步骤: {{ active2 + 1 }}
+
+
+
+
+
+ 纵向可点击
+
+
+ 纵向步骤条也支持点击切换
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/uni/src/pages-info/steps/custom.vue b/examples/uni/src/pages-info/steps/custom.vue
new file mode 100644
index 0000000..970105f
--- /dev/null
+++ b/examples/uni/src/pages-info/steps/custom.vue
@@ -0,0 +1,334 @@
+
+
+
+
+
+
+ 自定义样式
+
+
+ 使用 clax 属性自定义样式
+
+
+
+
+
+
+
+
+
+
+
+
+ 自定义图标插槽
+
+
+ 通过插槽自定义步骤图标
+
+
+
+
+
+
+ 🛒
+
+
+
+
+
+
+ 📝
+
+
+
+
+
+
+ 💳
+
+
+
+
+
+
+ ✅
+
+
+
+
+
+
+
+
+ 自定义标题和描述
+
+
+ 通过插槽自定义标题和描述内容
+
+
+
+
+
+
+
+ 第一步
+
+
+ 必填
+
+
+
+
+
+ 请填写您的基本信息，包括姓名、手机号等
+
+
+
+
+
+
+
+
+ 第二步
+
+
+ 必填
+
+
+
+
+
+ 上传您的身份证照片，确保照片清晰
+
+
+
+
+
+
+
+
+ 第三步
+
+
+ 选填
+
+
+
+
+
+ 完善其他信息，有助于提升服务质量
+
+
+
+
+
+
+
+
+ 完全自定义
+
+
+ 结合多种自定义方式
+
+
+
+
+
+
+ ✓
+
+
+
+
+ 订单已创建
+
+
+
+
+ 2024-01-01 10:00:00
+
+
+ 订单号: 202401010001
+
+
+
+
+
+
+
+ ✓
+
+
+
+
+ 支付成功
+
+
+
+
+ 2024-01-01 10:05:30
+
+
+ 支付金额: ¥99.00
+
+
+
+
+
+
+
+ ⏳
+
+
+
+
+ 正在发货
+
+
+
+
+ 预计今天发货
+
+
+ 商品正在打包中...
+
+
+
+
+
+
+
+ ○
+
+
+
+
+ 确认收货
+
+
+
+
+ 等待发货
+
+
+ 预计3-5天送达
+
+
+
+
+
+
+
+
+
diff --git a/examples/uni/src/pages-info/steps/description.vue b/examples/uni/src/pages-info/steps/description.vue
new file mode 100644
index 0000000..b18a993
--- /dev/null
+++ b/examples/uni/src/pages-info/steps/description.vue
@@ -0,0 +1,149 @@
+
+
+
+
+
+
+ 带描述的步骤条
+
+
+ 为每个步骤添加详细描述信息
+
+
+
+
+
+
+
+
+
+
+
+
+ 纵向带描述
+
+
+ 纵向布局下的描述信息展示
+
+
+
+
+
+
+
+
+
+
+
+
+ 长描述文本
+
+
+ 支持较长的描述文本内容
+
+
+
+
+
+
+
+
+
+
+
+ 时间轴样式
+
+
+ 使用描述展示时间信息
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/uni/src/pages-info/steps/icon.vue b/examples/uni/src/pages-info/steps/icon.vue
new file mode 100644
index 0000000..9072a7e
--- /dev/null
+++ b/examples/uni/src/pages-info/steps/icon.vue
@@ -0,0 +1,85 @@
+
+
+
+
+
+
+ 自定义图标
+
+
+ 通过 icon 属性自定义步骤图标
+
+
+
+
+
+
+
+
+
+
+
+
+ 纵向自定义图标
+
+
+ 纵向步骤条支持自定义图标
+
+
+
+
+
+
+
+
+
+
+
+
+ 混合模式
+
+
+ 部分步骤使用图标，部分使用数字
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/uni/src/pages-info/steps/size.vue b/examples/uni/src/pages-info/steps/size.vue
new file mode 100644
index 0000000..24b6a57
--- /dev/null
+++ b/examples/uni/src/pages-info/steps/size.vue
@@ -0,0 +1,189 @@
+
+
+
+
+
+
+ 小尺寸
+
+
+ size="small" 小尺寸步骤条
+
+
+
+
+
+
+
+
+
+
+
+
+ 中等尺寸（默认）
+
+
+ size="medium" 中等尺寸步骤条
+
+
+
+
+
+
+
+
+
+
+
+
+ 大尺寸
+
+
+ size="large" 大尺寸步骤条
+
+
+
+
+
+
+
+
+
+
+
+
+ 纵向小尺寸
+
+
+ 纵向布局的小尺寸步骤条
+
+
+
+
+
+
+
+
+
+
+
+ 纵向中等尺寸
+
+
+ 纵向布局的中等尺寸步骤条
+
+
+
+
+
+
+
+
+
+
+
+ 纵向大尺寸
+
+
+ 纵向布局的大尺寸步骤条
+
+
+
+
+
+
+
+
+
+
+
+ 不同尺寸对比
+
+
+ 带图标和描述的不同尺寸对比
+
+
+
+
+
+ 小
+
+
+
+
+
+
+
+
+
+
+ 中
+
+
+
+
+
+
+
+
+
+
+ 大
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/uni/src/pages-info/steps/status.vue b/examples/uni/src/pages-info/steps/status.vue
new file mode 100644
index 0000000..9fc9bad
--- /dev/null
+++ b/examples/uni/src/pages-info/steps/status.vue
@@ -0,0 +1,126 @@
+
+
+
+
+
+
+ 等待状态
+
+
+ 步骤处于等待状态
+
+
+
+
+
+
+
+
+
+
+
+ 进行中状态
+
+
+ 当前步骤处于进行中
+
+
+
+
+
+
+
+
+
+
+
+ 完成状态
+
+
+ 步骤已完成
+
+
+
+
+
+
+
+
+
+
+
+ 错误状态
+
+
+ 步骤执行出错
+
+
+
+
+
+
+
+
+
+
+
+ 混合状态
+
+
+ 不同步骤展示不同状态
+
+
+
+
+
+
+
+
+
+
+
+
+ 纵向状态展示
+
+
+ 纵向布局展示不同状态
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/uni/src/pages-info/steps/vertical.vue b/examples/uni/src/pages-info/steps/vertical.vue
new file mode 100644
index 0000000..bb40768
--- /dev/null
+++ b/examples/uni/src/pages-info/steps/vertical.vue
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+ 纵向步骤条
+
+
+ 设置 direction="vertical" 展示纵向步骤条
+
+
+
+
+
+
+
+
+
+
+
+
+ 纵向简洁模式
+
+
+ 纵向步骤条不带描述
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/skiyee-uni-ui/src/components/sk-step.vue b/packages/skiyee-uni-ui/src/components/sk-step.vue
new file mode 100644
index 0000000..6880731
--- /dev/null
+++ b/packages/skiyee-uni-ui/src/components/sk-step.vue
@@ -0,0 +1,241 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ currentIndex + 1 }}
+
+
+
+
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+ {{ description }}
+
+
+
+
+
+
+
+
+
diff --git a/packages/skiyee-uni-ui/src/components/sk-steps.vue b/packages/skiyee-uni-ui/src/components/sk-steps.vue
new file mode 100644
index 0000000..2ae8ee6
--- /dev/null
+++ b/packages/skiyee-uni-ui/src/components/sk-steps.vue
@@ -0,0 +1,175 @@
+
+
+
+
+
+
+
+
+
diff --git a/packages/skiyee-uni-ui/src/constants/index.ts b/packages/skiyee-uni-ui/src/constants/index.ts
index b747770..28c24a3 100644
--- a/packages/skiyee-uni-ui/src/constants/index.ts
+++ b/packages/skiyee-uni-ui/src/constants/index.ts
@@ -11,3 +11,4 @@ export * from './field'
export * from './form'
export * from './radio'
export * from './roller'
+export * from './steps'
diff --git a/packages/skiyee-uni-ui/src/constants/steps.ts b/packages/skiyee-uni-ui/src/constants/steps.ts
new file mode 100644
index 0000000..fb5de76
--- /dev/null
+++ b/packages/skiyee-uni-ui/src/constants/steps.ts
@@ -0,0 +1,13 @@
+/**
+ * Steps 步骤条常量
+ *
+ * @author sKy(skiyee)
+ * @qq 319619193
+ * @github https://github.com/skiyee
+ */
+
+import type { InjectionKey } from 'vue'
+
+import type { StepsContext } from '../types'
+
+export const SK_STEPS_KEY: InjectionKey> = Symbol('sk-steps')
diff --git a/packages/skiyee-uni-ui/src/styles/index.ts b/packages/skiyee-uni-ui/src/styles/index.ts
index cd3dee8..ffe5cb6 100644
--- a/packages/skiyee-uni-ui/src/styles/index.ts
+++ b/packages/skiyee-uni-ui/src/styles/index.ts
@@ -51,6 +51,12 @@ export { SkSliderUcv } from './sk-slider'
export type { SkSpinnerUcvProps } from './sk-spinner'
export { SkSpinnerUcv } from './sk-spinner'
+export type { SkStepUcvProps } from './sk-step'
+export { SkStepUcv } from './sk-step'
+
+export type { SkStepsUcvProps } from './sk-steps'
+export { SkStepsUcv } from './sk-steps'
+
export type { SkSwitchUcvProps } from './sk-switch'
export { SkSwitchUcv } from './sk-switch'
diff --git a/packages/skiyee-uni-ui/src/styles/sk-step.ts b/packages/skiyee-uni-ui/src/styles/sk-step.ts
new file mode 100644
index 0000000..ac11121
--- /dev/null
+++ b/packages/skiyee-uni-ui/src/styles/sk-step.ts
@@ -0,0 +1,123 @@
+// @unocss-include
+/**
+ * sk-step 由 @skiyee/ucv 生成的样式组件
+ *
+ * @author sKy(skiyee)
+ * @qq 319619193
+ * @github https://github.com/skiyee
+ *
+ * @example
+ * ```ts
+ * const classes = SkStepUcv(props)
+ * ```
+ *
+ * @see 更多示例请参考文档: https://skiyee-ui.netlify.app/docs/components/info/steps
+ */
+import type { InferProps } from '@skiyee/ucv'
+
+import { ucv } from '@skiyee/ucv'
+
+export const SkStepUcv = ucv({
+ element: {
+ root: 'relative flex flex-1',
+ container: 'flex items-start',
+ iconWrapper: 'relative flex-center flex-shrink-0 border-(~ solid) rounded-full transition-all duration-250',
+ icon: 'transition-all duration-250',
+ content: 'flex flex-col flex-1 sk-unit:ml-12',
+ title: 'text-primary transition-colors duration-250',
+ description: 'text-secondary sk-unit:mt-4 transition-colors duration-250',
+ line: 'absolute bg-border transition-all duration-250',
+ },
+ variants: {
+ direction: {
+ horizontal: {
+ root: 'flex-col',
+ container: 'flex-col items-center',
+ content: 'sk-variant:mt-12 sk-variant:ml-0 items-center text-center',
+ line: 'sk-variant:left-1/2 sk-variant:translate-x-1/2 sk-variant:top-0 sk-variant:h-full sk-variant:w-2',
+ },
+ vertical: {
+ root: 'flex-row',
+ line: 'sk-variant:top-1/2 sk-variant:-translate-y-1/2 sk-variant:left-0 sk-variant:w-full sk-variant:h-2',
+ },
+ },
+ size: {
+ small: {
+ iconWrapper: 'sk-variant:size-24',
+ icon: 'sk-variant:size-12',
+ title: 'text-body-small',
+ description: 'text-caption',
+ },
+ medium: {
+ iconWrapper: 'sk-variant:size-32',
+ icon: 'sk-variant:size-16',
+ title: 'text-body-medium',
+ description: 'text-body-small',
+ },
+ large: {
+ iconWrapper: 'sk-variant:size-40',
+ icon: 'sk-variant:size-20',
+ title: 'text-body-large',
+ description: 'text-body-medium',
+ },
+ },
+ status: {
+ wait: {
+ iconWrapper: 'sk-variant:border-border bg-background',
+ icon: 'sk-variant:text-tertiary',
+ title: 'sk-variant:text-tertiary',
+ description: 'sk-variant:text-tertiary',
+ line: 'sk-variant:bg-border',
+ },
+ process: {
+ iconWrapper: 'sk-variant:border-brand bg-brand',
+ icon: 'sk-variant:text-brand-foreground',
+ title: 'sk-variant:text-brand',
+ description: 'sk-variant:text-secondary',
+ line: 'sk-variant:bg-border',
+ },
+ finish: {
+ iconWrapper: 'sk-variant:border-success bg-success',
+ icon: 'sk-variant:text-success-foreground',
+ title: 'sk-variant:text-success',
+ description: 'sk-variant:text-secondary',
+ line: 'sk-variant:bg-success',
+ },
+ error: {
+ iconWrapper: 'sk-variant:border-danger bg-danger',
+ icon: 'sk-variant:text-danger-foreground',
+ title: 'sk-variant:text-danger',
+ description: 'sk-variant:text-secondary',
+ line: 'sk-variant:bg-danger',
+ },
+ },
+ clickable: {
+ true: {
+ container: 'cursor-pointer',
+ },
+ false: {},
+ },
+ disabled: {
+ true: {
+ root: 'opacity-60 pointer-events-none',
+ },
+ false: {},
+ },
+ isLast: {
+ true: {
+ line: 'sk-variant:hidden',
+ },
+ false: {},
+ },
+ },
+ defaults: {
+ direction: 'horizontal',
+ size: 'medium',
+ status: 'wait',
+ clickable: false,
+ disabled: false,
+ isLast: false,
+ },
+})
+
+export type SkStepUcvProps = InferProps
diff --git a/packages/skiyee-uni-ui/src/styles/sk-steps.ts b/packages/skiyee-uni-ui/src/styles/sk-steps.ts
new file mode 100644
index 0000000..945c96d
--- /dev/null
+++ b/packages/skiyee-uni-ui/src/styles/sk-steps.ts
@@ -0,0 +1,33 @@
+// @unocss-include
+/**
+ * sk-steps 由 @skiyee/ucv 生成的样式组件
+ *
+ * @author sKy(skiyee)
+ * @qq 319619193
+ * @github https://github.com/skiyee
+ *
+ * @example
+ * ```ts
+ * const classes = SkStepsUcv(props)
+ * ```
+ *
+ * @see 更多示例请参考文档: https://skiyee-ui.netlify.app/docs/components/info/steps
+ */
+import type { InferProps } from '@skiyee/ucv'
+
+import { ucv } from '@skiyee/ucv'
+
+export const SkStepsUcv = ucv({
+ element: 'flex w-full',
+ variants: {
+ direction: {
+ horizontal: 'flex-row',
+ vertical: 'flex-col',
+ },
+ },
+ defaults: {
+ direction: 'horizontal',
+ },
+})
+
+export type SkStepsUcvProps = InferProps
diff --git a/packages/skiyee-uni-ui/src/types/index.ts b/packages/skiyee-uni-ui/src/types/index.ts
index 275bfb2..ada73e2 100644
--- a/packages/skiyee-uni-ui/src/types/index.ts
+++ b/packages/skiyee-uni-ui/src/types/index.ts
@@ -13,3 +13,4 @@ export type * from './field'
export type * from './form'
export type * from './radio'
export type * from './roller'
+export type * from './steps'
diff --git a/packages/skiyee-uni-ui/src/types/steps.ts b/packages/skiyee-uni-ui/src/types/steps.ts
new file mode 100644
index 0000000..93f5570
--- /dev/null
+++ b/packages/skiyee-uni-ui/src/types/steps.ts
@@ -0,0 +1,48 @@
+/**
+ * Steps 步骤条类型定义
+ *
+ * 定义步骤条相关的类型接口。
+ *
+ * @author sKy(skiyee)
+ * @qq 319619193
+ * @github https://github.com/skiyee
+ *
+ * @see 更多文档: https://skiyee-ui.netlify.app/docs/
+ */
+
+import type { SkStepsUcvProps, SkStepUcvProps } from '../styles'
+
+/**
+ * 步骤状态类型
+ */
+export type StepStatus = 'wait' | 'process' | 'finish' | 'error'
+
+/**
+ * 步骤条上下文
+ */
+export interface StepsContext {
+ props: {
+ active?: number;
+ direction?: SkStepsUcvProps['direction'];
+ size?: SkStepUcvProps['size'];
+ activeColor?: string;
+ inactiveColor?: string;
+ disabled?: boolean;
+ };
+ /**
+ * 获取步骤的索引
+ */
+ getStepIndex: (uid: number) => number;
+ /**
+ * 注册步骤
+ */
+ registerStep: (uid: number) => void;
+ /**
+ * 注销步骤
+ */
+ unregisterStep: (uid: number) => void;
+ /**
+ * 点击步骤
+ */
+ onStepClick: (index: number) => void;
+}