Thinking

The shimmering "Thinking" placeholder.

import { Card } from "@/components/ui/card";

import { ChatgptThinking } from "../components/chatgpt-thinking";

export default function ChatgptThinkingExample() {
  return (
    <Card className="border-chatgpt-border bg-chatgpt-bg font-chatgpt text-chatgpt-fg w-full min-w-0 items-start gap-0 rounded-2xl border p-6 text-base ring-0">
      <ChatgptThinking />
    </Card>
  );
}

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

ChatgptThinking fades in and runs a shimmer across its label, which defaults to Thinking. It’s a polite live region, and the shimmer stops when reduced motion is on.

Used in

ChatGPT

A full recreation of a ChatGPT conversation with thinking, web search, reasoning and the model picker.