design-infraReport a problem or share feedback← Catalog
Ai Reasoning
curatedtheme-awarefreesmoothui/ai-reasoning
Collapsible AI reasoning trace that shimmers only while the model works, reports how long it took and gets out of the way.
$
npx shadcn@latest add @smoothui/ai-reasoningnpm deps: lucide-react, motion
Our notes
Collapsible reasoning trace: the label shimmers 'Thinking' only while isStreaming, then settles to 'Thought for 3.2s' (measured, or pass duration) and auto-collapses — until the user toggles it, after which it stops deciding for them. Muted-foreground chrome, inherits the theme; no shimmer under reduced motion.- Source
- SmoothUI
- Kind
- component
- Categories
- agent-ui, ai-chat
- Use as
- drop-in — replaces your component
- Applies to
- agent-uiai-chataccordion
- Motion
- on state, loop · subtle · motion · medium cost · respects reduced motion
- Tags
- ai, reasoning, thinking, collapsible, chat, trace, spring, complexity-medium, reduced-motion
- Licence
- MIT ("MIT License — Copyright (c) 2024 Eduardo Calvo", github.com/educlopez/smoothui).
- Live demo
- smoothui.dev
- Docs
- smoothui.dev
Similar
Compare all 4 →- Template · AI chatoc/template-ai-chatStarter page → app/chat/page.tsx. Use existing compatible tokens, or install a theme only when requested; it pulls in 4 @oc blocks. Preview: /templates/template-ai-chat.
- Chat Appbeui/chat-appA complete agent conversation workspace composing navigation, messages, streaming, planning, approvals, tools, code, diffs, generated media, sources, and prompt input.
- Chat threadoc/chat-threadAI conversation view: user bubbles, assistant turns with markdown-ish text + code blocks, tool-call chips, copy/vote/regenerate actions, @oc/agent-status while pending. Auto-sticks to bottom.