Reasoning Components

Dev Design Library indexes 21 reasoning components from 12 open-source UI libraries, with the most coming from LocalMode, Notra, Halaska UI, AI Elements and AI CSS. Each one links to its page with the source code, a live preview where available, the library license and the install command. Reasoning components belong to the AI group.

• Reasoning Streamtransitions.dev · HTML/CSS
• Chain Of ThoughtAI Elements · ReactA collapsible component that visualizes AI reasoning steps with support for search results, images, and step-by-step…
• Agent DisclosurebeUI · ReactShared transform-only reveal for collapsible agent content.
• Reasoning TraceSpectrum UI · ReactAn expandable chain-of-thought trace with a live thinking timer.
• Thinking StepsFluid Functionalism · ReactCollapsible AI reasoning steps with animated expand/collapse, per-step icons, sources, and nested details. Radix flavor.
• ReasoningPanel UI · React NativeThe model's working, shown while it happens and folded away after.
• Agent ThinkingBoardUI · ReactAgent thinking indicators for chat composers.
• Chain Of ThoughtAI Elements (Svelte) · SvelteA collapsible component that visualizes AI reasoning steps with support for search results, images, and step-by-step…
• ChatGPT ReasoningNotra · ReactThe collapsible "Worked for Ns" trace, built on shadcn Collapsible.
• Reasoning EffortAI CSS · React
• Research Agent BlockLocalMode · ReactA tool-using ReAct research agent over its OWN on-device WebGPU-only WebLLM model (default Qwen3-1.7B-q4f16_1-MLC)…
• Thinking StepsHalaska UI · React
• ReasoningAI Elements · ReactA collapsible component that displays AI reasoning content, automatically opening during streaming and closing when…
• Thinking StepsFluid Functionalism · ReactCollapsible AI reasoning steps with animated expand/collapse, per-step icons, sources, and nested details. Base UI…
• ReasoningAI Elements (Svelte) · SvelteA collapsible reasoning block that tracks streaming duration and renders a markdown response.
• Codex ReasoningNotra · ReactThe dim italic summary Codex shows while it reasons.
• Thinking ReasoningAI CSS · React
• Chain of ThoughtLocalMode · ReactA structured step-by-step reasoning timeline (distinct from free-text Reasoning): labeled steps with per-step status…
• Thinking Trace PatternHalaska UI · React
• Gemini ThoughtsNotra · ReactThe "Show thinking" step with thoughts and searches.
• ReasoningLocalMode · ReactThe model's own thinking tokens (DeepSeek-R1 style) in a collapsible region: auto-expands while streaming with an…

Libraries with reasoning components

• LocalMode
• Notra
• Halaska UI
• AI Elements
• AI CSS

Related categories

• React Reasoning Components
• Tailwind CSS Reasoning Components
• Animated Reasoning Components
• AI Element Components
• Prompt Input Components
• AI Orb Components
• Conversation Components
• Attachment Components
• Thinking Indicator Components
• Voice Input Components
• Model Selector Components
• Tool Call Components
• Sources Components
• Streaming Text Components
• AI Message Components
• Citation Components
• Suggestions Components
• Task Queue Components
• Agent Plan Components