Step Status

Vertical deployment-style step list with pending, running, done and failed states.

#steps #deploy #status

Edit in sandbox

Copy a prompt for your AI coding tool with the source, dependencies and usage

Props

StepStatusProps

Also accepts all props of React.ComponentProps<"ol">

Prop	Type	Default	Description
steps* required	`StepStatusItem[]`	—	—

Install

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

More like this

Alert

Feedback & status

Inline alert with info, success, warning and error variants, optional title, dismiss button and action.

Progress Bar

Feedback & status

Determinate and indeterminate progress bar with label, percentage, sizes and animated stripes.

Circular Progress

Feedback & status

SVG ring progress with centered percentage, adjustable size, thickness and color.