About
A collapsible disclosure that shows an AI agent's reasoning before its answer, collapsed by default and showing a live caret while the reasoning is still streaming in.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Thinking to your project and fits it to your theme.
Code
How Thinking is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import Thinking from "@/components/ui/thinking";
const reasoning =
"The strip answers when, the share answers how much. The legend swatch already falls through to the tone, so it can key both without a second vocabulary.";
export default function ThinkingDisabledDemo() {
return (
<div className="flex min-h-[16rem] w-full max-w-md items-start justify-start bg-[var(--background)] p-10 text-[var(--foreground)]">
<Thinking duration={4.1} locale="en-GB" disabled defaultOpen>
{reasoning}
</Thinking>
</div>
);
}
More by keshon
View all
List
Lanes
Key Value List
Status Dot
Spinner
Note
Split