shadcn.io is not affiliated with official shadcn/ui
Message Chain of Thought AI Block for React Aria
An assistant answer with a collapsible reasoning section of four timed steps, each opening to a typed summary, a replay button that brings the steps in one after another and the answer under its own heading.
Installation
Overview
Keep the working apart from the result, with this AI message chain of thought for React with React Aria. A compact header names the product and a hairline frame holds one turn: a maths question in a secondary Bubble, then a "Thought for 8 s" Collapsible that is open on load and holds four numbered steps on a thin connector. Each step is an Accordion row with its name and its seconds in a Badge, and one row at a time opens to a short typed summary of what was checked; the total in the heading is added up from the steps. "Replay thinking" brings the steps in again, one after another, in CSS only and not at all under reduced motion. The answer sits below under an "Answer" heading. It's built from Bubble, Collapsible, Accordion, Badge, Button and Guides. For maths helpers, tutors and any assistant whose answer deserves its reasoning one click away.
FAQ
Is this a real model's reasoning, and what stays local?
No. The four steps are a typed summary written for the demo, not a trace from a model, and nothing is sent. To wire it up, return a short summary of each step with its duration and keep the raw trace out of the page; the heading's total and the step count are worked out from that list.
Where does Thought for 8 s come from?
It is the sum of the steps' seconds, so the heading cannot disagree with the rows. Change a step's seconds in the typed list and the total follows.
What does Replay thinking do?
It remounts the steps so each fades up in turn, with a short delay per step. The effect is CSS only (starting: styles), so there is no timer and no script, and it is off when the person prefers reduced motion.