Thinking Steps

AI chats 2

About

Collapsible AI reasoning display that shows an agent's chain-of-thought as animated steps with per-step icons, source badges, and nested details.

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

Code

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

Usage.tsx

"use client";

import {
  ThinkingSteps,
  ThinkingStepsHeader,
  ThinkingStepsContent,
  ThinkingStep,
  ThinkingStepDetails,
} from "@/components/ui/thinking-steps";

export default function ThinkingStepsDemo() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-8">
      <ThinkingSteps>
        <ThinkingStepsHeader />
        <ThinkingStepsContent>
          <ThinkingStep icon="search" label="Searched the web" />
          <ThinkingStep icon="globe" label="Read 3 sources">
            <ThinkingStepDetails
              summary="Explored 6 files"
              details={[
                "Read accordion.tsx",
                "Read icon-map.tsx",
                "Read badge.tsx",
                "Read use-proximity-hover.ts",
                "Read components.ts",
                "Read postbuild-registry.mjs",
              ]}
            />
          </ThinkingStep>
          <ThinkingStep icon="check" label="Done" isLast />
        </ThinkingStepsContent>
      </ThinkingSteps>
    </div>
  );
}