# Thinking

> A live and inspectable activity disclosure with explicit states and structured evidence.

- Category: AI
- Kind: component
- Page: https://uaiblocks.dev/components/thinking
- Registry item: https://uaiblocks.dev/r/thinking.json
- Source: https://github.com/victor-teles/uai/blob/main/src/registry/uai/components/thinking.tsx

## Install

```bash
bunx shadcn@latest add https://uaiblocks.dev/r/thinking.json
```

## Usage

```tsx
"use client";

import { useState } from "react";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import {
  Thinking,
  ThinkingActivity,
  ThinkingContent,
  type ThinkingStatus,
  ThinkingTrigger,
  type ThinkingVariant,
} from "@/components/ui/uai/thinking";

const copy: Record<ThinkingStatus, { summary: string; duration: string }> = {
  thinking: { summary: "Checking the component interface and useful states.", duration: "1.8s" },
  complete: { summary: "The component contract is ready to review.", duration: "3.4s" },
  error: { summary: "The registry build stopped before validation.", duration: "2.6s" },
};

export function ThinkingPreview({ variant = "card" }: { variant?: ThinkingVariant }) {
  const [status, setStatus] = useState<ThinkingStatus>("thinking");

  return (
    <div className="grid w-full gap-3">
      <ToggleGroup
        type="single"
        aria-label="Thinking status"
        value={status}
        onValueChange={(next) => next && setStatus(next as ThinkingStatus)}
        className="justify-self-center"
      >
        <ToggleGroupItem value="thinking">Live</ToggleGroupItem>
        <ToggleGroupItem value="complete">Complete</ToggleGroupItem>
        <ToggleGroupItem value="error">Error</ToggleGroupItem>
      </ToggleGroup>
      <Thinking variant={variant} status={status}>
        <ThinkingTrigger summary={copy[status].summary} duration={copy[status].duration} />
        <ThinkingContent>
          <ThinkingActivity type="search" query="Thinking component accessibility" elapsed="0.3s">
            Found the component contract
          </ThinkingActivity>
          <ThinkingActivity
            type="file"
            path="src/registry/uai/components/thinking.tsx"
            elapsed="0.8s"
          >
            Read the public interface
          </ThinkingActivity>
          <ThinkingActivity
            type="tool"
            tool="bun run registry:build"
            elapsed={status === "thinking" ? undefined : status === "complete" ? "3.4s" : "2.6s"}
          >
            {status === "error" ? "Registry build failed" : "Checked the registry output"}
          </ThinkingActivity>
        </ThinkingContent>
      </Thinking>
    </div>
  );
}
```

## Anatomy

- `Thinking`
  - `ThinkingTrigger`
  - `ThinkingContent`
    - `ThinkingActivity`

## Accessibility

- The trigger exposes expanded and collapsed state.
- The trigger references the disclosed content.
- New activity is announced through a polite live log.
- Activity entries keep their ordered-list semantics.
- Status is communicated with text instead of color alone.
- Decorative state icons stay hidden from assistive technology.
- Card, inline, and compact keep the same disclosure, states, and live regions.