Step Status

部署风格的竖向步骤状态列表，支持等待、运行、完成、失败四种状态。

#steps #deploy #status

在沙盒中编辑

复制一段给 AI 编程工具的提示词，包含源码、依赖和用法

属性

StepStatusProps

同时支持以下类型的全部属性： React.ComponentProps<"ol">

属性	类型	默认值	说明
steps* 必填	`StepStatusItem[]`	—	—

安装

$ npx shadcn@latest add https://chromotion.dev/r/step-status.json

同类组件

Alert

反馈与状态

带图标的内联提示条，支持信息、成功、警告、错误四种样式，可选标题、关闭按钮和操作。

Progress Bar

反馈与状态

支持确定与不确定状态的进度条，带标签、百分比和条纹动画。

Circular Progress

反馈与状态

SVG 环形进度，中心显示百分比，可调尺寸、粗细与颜色。