Steps

AI chats 1

About

A collapsible list for displaying a sequence of operations, like AI reasoning traces, tool calls, or process logs, with an optional vertical connector bar between steps.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Steps to your project and fits it to your theme.

Code

How Steps is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import {
  Steps,
  StepsContent,
  StepsItem,
  StepsTrigger,
} from "@/components/ui/steps";

export default function StepsBasic() {
  return (
    <div className="space-y-4">
      <Steps defaultOpen>
        <StepsTrigger>Agent run: Summarize repository</StepsTrigger>
        <StepsContent>
          <div className="space-y-1">
            <StepsItem>Searching files in repo...</StepsItem>
            <StepsItem>Found 12 files (src, docs)</StepsItem>
            <StepsItem>Parsing markdown and code blocks</StepsItem>
            <StepsItem>Selecting tool: summarize</StepsItem>
            <StepsItem>Running summarize(tool) with top 5 files</StepsItem>
            <StepsItem className="text-foreground">Summary generated</StepsItem>
          </div>
        </StepsContent>
      </Steps>
    </div>
  );
}