184 Components
AI Reasoning Accordion
CardsCollapsible DeepSeek-R1 and OpenAI o1 inspired thinking step drawer with animated timeline dots, thought duration timer, spring chevron physics, and one-click step copying.
Reasoning Engine
Analyzing request intent and constraints
Parsing prompt syntax, identifying target architecture and state bounds.
Exploring algorithmic tradeoffs and dependencies
Evaluating Canvas 2D vs DOM composite layers. Selecting zero-dependency spring physics.
Synthesizing modular component structure
Validating TypeScript signatures, WCAG contrast compliance, and reduce-motion fallbacks.
The reasoning model concluded that client-side spring dampening provides superior 60fps fluidity compared to standard CSS easing cubic-beziers.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/ai-reasoning-accordion.json"
Props
TypeScript props supported by <AIReasoningAccordion />.
| Prop | Type | Default | Description |
|---|---|---|---|
| thinkingTime | number | 3.4 | Thought duration in seconds displayed in header badge. |
| status | "thinking" | "completed" | "completed" | Current lifecycle state of the model's reasoning process. |
| steps | ReasoningStep[] | — | Array of reasoning steps with label, details, and status. |
| defaultOpen | boolean | true | Initial expanded state of the reasoning accordion. |
| children | React.ReactNode | — | Final thought synthesis or reasoning summary content. |
| title | string | "Thought Process" | Header label displayed next to the brain icon. |
Key Features
- Collapsible with Framer Motion spring accordion height physics.
- Live thought duration badge (e.g. 'Thought for 3.4s' or 'Thinking…').
- Sequential step timeline with pending, running spinner, and done checkmarks.
- One-click copy thought steps to clipboard.
- Full dark/light mode contrast and prefers-reduced-motion support.
Keyboard & Accessibility
- Supports aria-expanded on toggle trigger button.
- Keyboard accessible with standard Enter / Space toggle handling.