What an AI model thought before it answered, folded under one line: "Thinking…" while it works, then how long it took.
$ pnpm dlx shadcn@latest add https://dashral.com/r/reasoning.jsonInstallation
$ pnpm dlx shadcn@latest add https://dashral.com/r/reasoning.jsonAdds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:
{
"registries": {
"@dashral": "https://dashral.com/r/{name}.json"
}
}Then add components by name:
$ pnpm dlx shadcn@latest add @dashral/reasoningUsage
import { Reasoning } from "@/components/dashral/reasoning"
<Reasoning status={thinking ? "thinking" : "done"}>{thoughts}</Reasoning>Examples
API reference
Reasoning
Also takes every prop of Radix Collapsible(opens in a new tab).
| Prop | Type | Default |
|---|---|---|
children | ReactNodeThe model's reasoning as it streams in: text (line breaks kept) or your own rendering. | — |
status | "thinking" | "done"Thinking shimmers the line and opens the thoughts; done says how long it took. | "done" |
duration | numberSeconds it thought. Measured from thinking to done when left out. | — |
open / defaultOpen | booleanControlled or initial. Uncontrolled, it opens while thinking. | — |
onOpenChange | (open: boolean) => void | — |
autoClose | booleanFold when it's done, unless the reader opened or closed it themselves. | true |
label | ReactNodeReplaces "Thinking…" and "Thought for 8 seconds". | — |
classNames | { trigger?, content? }Classes for the line and the thoughts. | — |
className | stringExtra classes, merged with cn() so yours win. | — |
Keyboard
| Keys | Action |
|---|---|
| EnterorSpace | Open or fold the thoughts |
Accessibility
- The line is a button that says whether the thoughts are open (aria-expanded), and controls them.
- When the thinking ends, the new line ("Thought for 8 seconds") is announced once, politely.
- Inside a streaming Message, the words wait (aria-busy) instead of being read one by one.
Motion
- While thinking, a light sweeps across "Thinking…" (the Web Animations API, so no stylesheet is needed). The thoughts open and fold over --duration-standard on --ease-standard, and the chevron turns.
- With reduced motion the line is plain muted text and the thoughts appear without sliding.