ThinkingBlock
StableA closed note of the assistant's thinking. It shimmers while it works and shows how long it took when done.
Also known as reasoning, chain of thought, thoughts, thinking
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Active
<ThinkingBlock active>Comparing the two schedules against the team calendar.</ThinkingBlock>Use while the assistant is still thinking.
When to use it
Keeps the assistant's reasoning out of the way but within reach. It starts closed, shimmers while the assistant works, then says how long it took.
Made of: Arrow · Status label · Thinking text
Use it for
- Reasoning the assistant shows before its answer.
- Letting people check how an answer was reached, if they want to.
Not for
- One step the assistant took, such as a search: use ToolCallCard.
- The answer itself: use Message.
- A simple waiting signal with nothing to open: use TypingIndicator.
Do and avoid
The 7 am flight is cheapest.
First I looked at all flights. Then I checked prices. Then I compared arrival times. Then I checked bags. Then I looked again at prices…
The 7 am flight is cheapest.
Do
- Show it above the answer, so the answer stays the main thing.
- Switch to the finished look with the real time taken.
- Keep it closed so people choose to see the detail.
- Pass seconds once thinking ends. Without it, the heading says 0s.
Avoid
- Do not open it by default. It has no setting for that.
- Do not present the thinking as a checked source.
- Do not show a made-up time. Leave the block out instead.
On a phone
- The header is a full-width button with a tap area at least 44px tall on touch screens.
- The opened text sits behind a left rule and wraps to the screen width.
- It is closed by default, so it takes one line on a phone until someone taps it.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| active | boolean | none | When true the header shimmers and reads Thinking. |
| seconds | number | none | Elapsed seconds shown when not active. Falls back to 0. |
| childrenrequired | ReactNode | none | Reasoning text shown when expanded. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one ThinkingBlock switches all of this from its properties panel, across 8 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Active | active | On or off |
| State | Hover, Pressed and Focus come from the browser. | Default, Hover, Pressed, Focus |
Tokens
Change one of these and every part that uses it follows.
--fg-subtle--fg-muted--border
Built in
- The heading is a real button. Screen readers say whether it is open or closed.
- "Thinking…" and the time it took are real text that screen readers read. The shimmer is only a visual effect.
- The shimmer stops when people turn off motion in their system settings.
- When closed, the reasoning is skipped by screen readers.
What you need to do
- Announce when thinking ends if screen reader users need to know. The part does not.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide