Back to components
ComponentAI & ChatFree
Reasoning Indicator React component
An expandable request progress indicator with active steps, completion and error states.
About the Reasoning Indicator component
An expandable request progress indicator with active steps, completion and error states.
Installation
Add the Reasoning Indicator component to your project with the shadcn CLI. It lands in components/reasoning-indicator.tsx as plain React + Tailwind CSS source you own and can edit.
Install
Copied!
npx shadcn@latest add @reactframe/reasoning-indicatorOr copy the source by hand and install its dependencies:
Install
Copied!
npm install motion lucide-react clsx tailwind-mergeProps
<ReasoningIndicator /> accepts 6 props, all optional.
| Prop | Type | Default |
|---|---|---|
| steps | string[] | ["Understanding your request", "Reviewing relevant context", "Preparing a response"] |
| activeStep | number | 1 |
| status | "thinking" | "complete" | "error" | "thinking" |
| defaultExpanded | boolean | true |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- stepsstring[]Default: ["Understanding your request", "Reviewing relevant context", "Preparing a response"]
- activeStepnumberDefault: 1
- status"thinking" | "complete" | "error"Default: "thinking"
- defaultExpandedbooleanDefault: true
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
