Reasoning Indicator React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Reasoning Indicator is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import ReasoningIndicator from @/components/ui/reasoning-indicator.

import { ReasoningIndicator } from "@/components/ui/reasoning-indicator"

const labels = {
  thinking: "Working on it",
  thought: (duration: string) => `Worked for ${duration}`,
}

export function Thinking({ text, streaming, startedAt, endedAt }: { text: string; streaming: boolean; startedAt: number; endedAt?: number }) {
  return (
    <ReasoningIndicator
      content={text}
      streaming={streaming}
      startedAt={startedAt}
      endedAt={endedAt}
      labels={labels}
    />
  )
}

Props

• contentdefault ""
  string

  The reasoning as markdown. Empty with no children: the row is plain text, with nothing to open.

• children
  ReactNode

  Replaces the markdown body, e.g. a list of searched sites or steps.

• labeldefault ""
  ReactNode

  Replaces the default label in any state, e.g. "Searching the web" while a phase runs, or labels.stopped(duration) for a stopped message. Leave empty for thinking / thought.

• icondefault "<Brain />"
  ReactNode

  The 16px icon before the label (a Globe for a web search).

• showIcondefault true
  boolean

  Shows the icon before the label.

• showDurationdefault true
  boolean

  The live timer while thinking and the time in the done label. Off: the done label reads labels.thoughtBriefly.

• variantdefault "ghost"
  "ghost" | "soft" | "outline"

  ghost is a flush text row for messages; soft and outline wrap the row and the body in a rounded box for standalone use.

• sizedefault "md"
  "sm" | "md"

  The row is 28 / 32px tall with 13 / 14px text. The body is small markdown either way.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Colors the rail beside the body and the icon while thinking. Neutral uses the foreground.

• colordefault ""
  string

  Any CSS color. Replaces the tone.

• shimmerdefault true
  boolean

  The moving highlight on the label and the icon pulse while thinking. Off (and under reduced motion) the label stays still and muted.

• maxHeightdefault 320
  number

  Pixels of open body before it scrolls inside. On a phone it is also capped at 40dvh. 0 lets it grow.

• streamingdefault false
  boolean

  Thinking now: shimmer, live timer, the two-line peek and the body following new text.

• defaultOpendefault false
  boolean

  Starts open (uncontrolled).

• open
  boolean

  Controls the disclosure. Pair with onOpenChange.

• onOpenChange
  (open: boolean) => void

  Called when the person toggles it or autoCollapse closes it.

• startedAt
  Date | string | number

  When thinking began. While streaming the timer counts from here; a second phase continues from it.

• endedAt
  Date | string | number

  When thinking ended. Before startedAt counts as 0. Without timing data the done label says labels.thoughtBriefly.

• durationMsdefault 0
  number

  The final duration, when known; wins over startedAt / endedAt once done. Unset (Measured in the playground) uses the measured run.

• autoCollapsedefault true
  boolean

  When thinking ends, closes again if it was open when the stream started and nobody touched it. A row the person opened stays open.

• peekdefault true
  boolean

  Shows the last two lines of the thought under the label while it streams and the row is closed.

• localedefault ""
  string

  Formats the duration ("12 s", "2 min. 5 s"). Empty uses UIProvider, then the browser.

• now
  Date | number

  Pins the clock for screenshots and tests. By default a shared ticker runs only while streaming.

• labels
  Partial<ReasoningIndicatorLabels>

  thinking "Thinking", thought (duration) => "Thought for 12 s", thoughtBriefly "Thought for a few seconds", stopped (duration) => "Stopped after 3 s", show "Show reasoning", hide "Hide reasoning" (sr-only on the trigger). Pass only the keys you translate.

• classNames
  Partial<Record<"trigger" | "icon" | "label" | "duration" | "peek" | "content" | "body", string>>

  Extra classes for the inner parts.

• className
  string

  Extra classes for the root, merged last.

Parts

FAQ

Used in

More React AI components