Blode UI
GitHub

Thinking Steps

PreviousNext

A collapsible chain-of-thought stepper with sequential animation, source badges, expandable details, and images.

Loading
Loading...
import { CheckIcon, GlobeIcon, SearchIcon } from "blode-icons-react";
 
import {
  ThinkingStep,
  ThinkingStepDetails,
  ThinkingSteps,
  ThinkingStepsContent,
  ThinkingStepsHeader,
} from "@/components/ui/thinking-steps";
 
export function ThinkingStepsDemo() {
  return (
    <ThinkingSteps>
      <ThinkingStepsHeader>Thinking</ThinkingStepsHeader>
      <ThinkingStepsContent>
        <ThinkingStep icon={SearchIcon} label="Searched the web" />
        <ThinkingStep icon={GlobeIcon} label="Read 3 sources">
          <ThinkingStepDetails
            details={["Compared three approaches", "Weighed latency against accuracy"]}
            summary="Explored 6 files"
          />
        </ThinkingStep>
        <ThinkingStep icon={CheckIcon} isLast label="Done" />
      </ThinkingStepsContent>
    </ThinkingSteps>
  );
}

Installation

npx shadcn@latest add "https://ui.blode.co/r/styles/default/thinking-steps"

Usage

import {
  ThinkingStep,
  ThinkingSteps,
  ThinkingStepsContent,
  ThinkingStepsHeader,
} from "@/components/ui/thinking-steps";
<ThinkingSteps>
  <ThinkingStepsHeader>Thinking</ThinkingStepsHeader>
  <ThinkingStepsContent>
    <ThinkingStep icon={SearchIcon} label="Searched the web" />
    <ThinkingStep icon={GlobeIcon} label="Read 3 sources" />
    <ThinkingStep icon={CheckIcon} label="Done" isLast />
  </ThinkingStepsContent>
</ThinkingSteps>

Composition

Use the following composition to build a ThinkingSteps block:

ThinkingSteps
├── ThinkingStepsHeader
└── ThinkingStepsContent
    ├── ThinkingStep
    ├── ThinkingStep
    │   └── ThinkingStepSources
    │       └── ThinkingStepSource
    └── ThinkingStep
        └── ThinkingStepDetails

The status prop on ThinkingStep (complete, active, or pending) drives the shimmer on the active step; pending steps render nothing. Pass any blode-icons-react icon to icon.