Collapsible AI reasoning display that shows an agent's chain-of-thought as animated steps with per-step icons, source badges, and nested details.
"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>
);
}
Part of Fluid Functionalism — browse the full library on 21st.dev.