Reasoning
A model's thinking, streamed live, then folded to "Thought for 6s".
Reasoning shows a model's thinking while it happens: a shimmering "Thinking…" beside the crop-mark spinner, the trace streaming into a faded window, then an automatic collapse to "Thought for 6s" when the answer starts, so the reply stays front and center.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/reasoning.jsonThe CLI also installs the Cuelark theme tokens and the components it builds on. With the @cuelark namespace configured, use @cuelark/reasoning.
Builds on: collapsible, spinner, text-shimmer
Usage
import { Reasoning } from "@/components/ui/reasoning";
<Reasoning streaming={isThinking}>{reasoningText}</Reasoning>Motion
Shimmer while streaming; collapses itself 600ms after thinking ends.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Reasoning
Extends Collapsible.
| Prop | Type | Default | Description |
|---|---|---|---|
| streaming | boolean | false | Thinking in progress. |
| duration | number | — | Seconds; measured when omitted. |
| label | string | "Thinking…" | Status while streaming. |
Accessibility
- Fully keyboard operable with visible focus.
- Live regions announce streaming updates politely.
FAQ
Also searched as: ai reasoning component · thinking indicator react · chain of thought ui · llm reasoning display · shadcn ai reasoning