Thinking

The animated spinner and rotating verb Claude shows before replying.

import { ClaudeThinking } from "../components/claude-thinking";

export default function ClaudeThinkingExample() {
  return (
    <div className="bg-claude-bg p-6">
      <ClaudeThinking />
    </div>
  );
}

$ bunx --bun shadcn@latest add @notra/claude-thinking

ClaudeThinking pairs an animated Spinner with a serif verb that runs through Shimmer and changes every 2.2 seconds. It is a polite live region. Reduced motion stops the spinner and keeps the first verb.

Used in