reasoning-step
Expandable reasoning trace
AIreasoning-step.cssreasoning-step.js
Installation
$
npx skeehn add reasoning-stepPreview
Identified intent: component documentation request. Extracted target: dither shader.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| status | 'pending' | 'active' | 'completed' | 'error' | — | Current status (required) |
| title | string | — | Title text (required) |
| defaultExpanded | boolean | false | Whether expanded by default |
Usage
reasoning-step.tsx
1import { ReasoningStep } from '@skeehn/react';23export function ReasoningTrace() {4 return (5 <div className="flex flex-col gap-2">6 <ReasoningStep status="completed" title="Parse input">7 Identified 3 key entities in the query.8 </ReasoningStep>9 <ReasoningStep status="active" title="Generate plan">10 Creating execution strategy...11 </ReasoningStep>12 <ReasoningStep status="pending" title="Execute">13 Waiting for plan completion.14 </ReasoningStep>15 </div>16 );17}