Steps

Vertical numbered step list for multi-step AI processes with complete/current/upcoming states.

Use and inspectUse this as a presentational interface around your own submit, stream, or state handlers. Reset preview only remounts the local example; it does not send a request or connect to a model.Next: inspect the source and wire its callback to a bounded backend action.

StepsVertical numbered step list for multi-step AI processes with complete/current/upcoming states.

type Step = {
  title: string;
  description?: string;
  status: "complete" | "current" | "upcoming";
};

type StepsProps = {
  steps: Step[];
};

export function Steps({ steps }: StepsProps) {
  return (
    <div className="pk-steps">
      {steps.map((step, i) => (
        <div key={i} className={`pk-step pk-step--${step.status}`}>
          <div className="pk-step-left">
            <div className="pk-step-circle">
              {step.status === "complete" ? "✓" : i + 1}
            </div>
            {i < steps.length - 1 && <div className="pk-step-line" />}
          </div>
          <div className="pk-step-body">
            <div className="pk-step-title">{step.title}</div>
            {step.description && (
              <div className="pk-step-desc">{step.description}</div>
            )}
          </div>
        </div>
      ))}
    </div>
  );
}

Props

Prop	Type	Default	Description
`steps`*	`{title:string, description?:string, status:"complete"\|"current"\|"upcoming"}[]`	—	Array of steps to render