Thinking Bar
Compact status bar for long “thinking” or reasoning phases: optional Loader (same variants as Loader), Text Shimmer for the status line, and an optional dotted secondary action (actionLabel, default Stop thinking; pass null to hide).
Preview
ReasoningDeep reasoning in progress
import { ThinkingBar } from "@/registry/thinking-bar";
export function ThinkingBarDemo() {
return <ThinkingBar loader="grid" onAction={() => {}} />;
}
Installation
pnpm dlx @arrowui/cli@latest add thinking-barUsage
import { ThinkingBar } from "@/registry/thinking-bar";<ThinkingBar
loader="grid"
actionLabel="Skip thinking"
onAction={() => stopReasoning()}
/>TextShimmer uses the arrow-text-shimmer keyframes from globals.css (same as Text Shimmer). When you pass loader, the registry Loader is rendered before the shimmer.
Examples
Without loader
Omit loader when you only want shimmer + action.
Planning next step
import { ThinkingBar } from "@/registry/thinking-bar";
export function ThinkingBarDemoNoLoader() {
return <ThinkingBar statusText="Planning next step" onAction={() => {}} />;
}
Loader variants
loader accepts any Loader type (grid, typing, wave, default, …).
ReasoningAnalyzing context
ReasoningSynthesizing answer
import { ThinkingBar } from "@/registry/thinking-bar";
export function ThinkingBarDemoVariants() {
return (
<div className="flex w-full max-w-xl flex-col gap-4">
<ThinkingBar
loader="typing"
statusText="Analyzing context"
onAction={() => {}}
/>
<ThinkingBar
loader="wave"
statusText="Synthesizing answer"
onAction={() => {}}
/>
</div>
);
}
Without secondary action
Set actionLabel={null} to hide the right-side control (status + loader only).
ReasoningDeep reasoning in progress
import { ThinkingBar } from "@/registry/thinking-bar";
export function ThinkingBarDemoNoAction() {
return <ThinkingBar loader="grid" actionLabel={null} />;
}