02 / 37 · Reasoning

Thinking indicator

A live status line that names what the agent is doing right now, with elapsed time.

Thinking

Installation

npx shadcn@latest add "@assistant-ui/elements-thinking-indicator"

Usage

import { ThinkingIndicator } from "@/components/elements/thinking-indicator";

<ThinkingIndicator label="Reading thread.tsx" elapsed="12s" />

Props

PropTypeDefaultDescription

label*string–What the agent is doing right now. Swapping it replays the entrance animation.

elapsedstring–Elapsed time rendered in mono next to the label. Omit to hide the timer.

classNamestring–Extra classes merged onto the root row.

Source

thinking-indicator.tsx

"use client";

import { cn } from "@/lib/utils";
import { mono } from "./surfaces";

export function ThinkingIndicator({
  label,
  elapsed,
  className,
}: {
  label: string;
  elapsed?: string;
  className?: string;
}) {
  return (
    <div
      className={cn(
        "text-foreground/55 flex items-center gap-2.5 text-sm",
        className,
      )}
    >
      <span
        aria-hidden
        className="size-1.5 shrink-0 animate-pulse rounded-full bg-blue-500 motion-reduce:animate-none dark:bg-blue-400"
      />
      <span
        key={label}
        className="fade-in slide-in-from-bottom-1 animate-in relative inline-block leading-none duration-300"
      >
        <span>{label}</span>
        <span
          aria-hidden
          className="shimmer pointer-events-none absolute inset-0 motion-reduce:animate-none"
        >
          {label}
        </span>
      </span>
      {elapsed !== undefined && (
        <span className={cn(mono, "text-foreground/30 tabular-nums")}>
          {elapsed}
        </span>
      )}
    </div>
  );
}