Reasoning Trace
An animated AI chain of thought: streaming thoughts, searches with sources, reads and tool calls.
Overview
Shows how an AI got to its answer. Steps arrive one at a time on a rail that draws itself: thoughts stream in word by word, searches show their query and the sources that came back, reads list the files, and tool calls show what was called and what it returned.
While it works, the header shimmers with a live timer; when it finishes it reads "Thought for 6s" and can collapse to that one line, the way people want to see reasoning after the fact. Replay runs it again.
Feed it your model’s real steps as they stream, or a finished trace to show afterwards (autoplay={false}).
When to use
- Showing an AI or agent’s reasoning while it works or after it answers.
- Making long-running agent tasks feel transparent.
When not to use
- Simple progress with no reasoning to show: use Agent Steps.
- A single loading state: use a spinner or skeleton.
Installation
pnpm dlx shadcn@latest add https://sundaeui.dev/r/reasoning-trace.jsonnpx shadcn@latest add https://sundaeui.dev/r/reasoning-trace.jsonyarn dlx shadcn@latest add https://sundaeui.dev/r/reasoning-trace.jsonbunx --bun shadcn@latest add https://sundaeui.dev/r/reasoning-trace.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy reasoning-trace.tsx and reasoning-trace.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { ReasoningTrace } from '@/components/sundae/reasoning-trace'
<ReasoningTrace
collapseOnDone
steps={[
{ kind: 'think', title: 'Understanding the request', text: 'They want…' },
{ kind: 'search', title: 'Searching', query: 'pricing section', sources: [{ name: 'Docs' }] },
{ kind: 'tool', title: 'Installing', call: 'get_component_source(…)', result: '2 files' },
{ kind: 'answer', title: 'Done', text: 'Added the pricing section.' },
]}
/>Props
| Prop | Type | Default |
|---|---|---|
steps*think, search, read, tool or answer steps, each with a title. | TraceStep[] | — |
autoplayPlay on mount; false shows the finished trace. | boolean | true |
wordMsMilliseconds per word while streaming. | number | 38 |
stepMsPause between steps. | number | 520 |
collapseOnDoneCollapse to "Thought for Ns" when finished. | boolean | false |
onDoneCalled when the trace finishes. | (seconds: number) => void | — |
Accessibility
- The header is a button with aria-expanded controlling the step list.
- A polite live region announces each step title and the finish, not every streamed word.
- Reduced motion shows the finished trace at once with no streaming, shimmer or pulse.
Customization
- Colours are CSS custom properties on .sd-trace (--tr-accent, --tr-ok, --tr-ink…).
- Add class is-light for light surfaces.
FAQ
- Is Reasoning Trace free?
- Reasoning Trace is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Reasoning Trace?
- Run npx shadcn@latest add https://sundaeui.dev/r/reasoning-trace.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Reasoning Trace support keyboard and screen readers?
- The header is a button with aria-expanded controlling the step list. A polite live region announces each step title and the finish, not every streamed word.
- Does Reasoning Trace respect reduced motion?
- Reduced motion shows the finished trace at once with no streaming, shimmer or pulse.
More like this
All components →Agent Steps
Components · Understated- Pro
AI Composer
Components · Understated Context Meter
Components · Futuristic- Pro
Voice Orb
Components · Futuristic Order Tracker
Components · RefinedVideo Trimmer
Components · Refined