GrokThinking
A component that displays an animated thinking process with expandable details.
Examples
Basic Usage
Thinking for 0 seconds
Tap to read my mind
Analyzing system architecture... Evaluating performance metrics... Reviewing code patterns... Identifying edge cases... Validating business logic... Exploring design alternatives... Assessing security implications... Checking compatibility issues... Examining resource usage... Investigating error handling... Finalizing implementation plan...
Installation
Install the component using the shadcn CLI:
npx shadcn@latest add "https://getaipack.com/c/grok-thinking.json"After installation, import and start using the component in your project:
import { GrokThinking } from "@/components/ui/grok-thinking";Component API
GrokThinking
| Prop | Type | Default | Description |
|---|---|---|---|
| thinkingStepsSeconds | number | 10 | Duration of the thinking animation in seconds |
| sources | number | 20 | Number of thinking steps to display |
| thinkingSteps | string[] | Array of custom thinking steps to display | |
| className | string | Additional CSS classes | |
| children | React.ReactNode | Optional child elements to render |
GrokThinkingHeader
| Prop | Type | Default | Description |
|---|---|---|---|
| seconds | number | Current seconds elapsed | |
| thinkingStepsSeconds | number | Total duration of thinking animation | |
| expanded | boolean | Whether the details section is expanded |
GrokThinkingSpinner
| Prop | Type | Default | Description |
|---|---|---|---|
| seconds | number | Current seconds elapsed | |
| thinkingStepsSeconds | number | Total duration of thinking animation |
GrokThinkingthinkingSteps
| Prop | Type | Default | Description |
|---|---|---|---|
| thinkingSteps | string[] | Array of thinking steps to display | |
| animationStarted | boolean | Whether the animation has started | |
| animationComplete | boolean | Whether the animation has completed | |
| setAnimationComplete | (value: boolean) => void | Callback to update animation complete state |