Primitive / Moleculebeta
Thinking
Reasoning indicator with animated dots or pulsing text and collapsible reasoning details.
pnpm dlx @glinui/cli@latest add thinkingQ3 revenue review
Glin assistant, 3 sources
MK
Summarize how Q3 went compared with Q2.
GRevenue grew 12% quarter over quarter, driven mostly by the Pro plan. Churn stayed flat at 1.8%, so the gain came from expansion rather than new logos.
Compared monthly totals, then split growth into new and expansion revenue.
MK
Which regions grew fastest?
G
Europe led with 19% growth, followed by North America at 11%. APAC was flat after the pricing change in August.
G
Thinking...
Installation
Install from
pnpm dlx @glinui/cli@latest add thinkingPrefer the package?
Usage
A collapsed reasoning summary on a finished answer and a live indicator at the bottom.
Accessibility
- Active state without details is a role="status" element so assistive tech announces it.
- With details the header is a native button using aria-expanded and aria-controls.
- Dots are decorative (aria-hidden); the label carries the meaning.
Keyboard Interactions
| Key | Action |
|---|---|
| Enter / Space | Toggle the reasoning details. |
ARIA Attributes
- `role="status"` while active
- `aria-expanded` and `aria-controls` on the toggle
Reduced Motion
Pulse animation is removed under reduced motion. Dots stay visible at reduced opacity.
Affected properties
opacitytransformAPI Reference
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
active | boolean | No | true | Working state. False shows the done label. |
indicator | "dots" | "shimmer" | No | dots | Animated dots or pulsing text. |
label / doneLabel | string | - | "Thinking" / "Thought process" | Text for each state. |
children | React.ReactNode | No | - | Reasoning details. Makes the header a disclosure button. |
open / defaultOpen / onOpenChange | boolean / callback | - | - | Controlled or uncontrolled disclosure. |
defaultOpen | boolean | No | false | Auto-generated from TypeScript source. |
doneLabel | string | No | "Thought process" | Label once finished, e.g. "Thought for 4 seconds". |
label | string | No | "Thinking" | Auto-generated from TypeScript source. |
onOpenChange | (open: boolean) => void | No | - | Auto-generated from TypeScript source. |
open | boolean | No | - | Auto-generated from TypeScript source. |
Source
Import directly from the package or browse the source on GitHub. Click any file to view it.
Import
import { Thinking } from "@glinui/ui"Source Files
Dependencies
@glinui/ui@phosphor-icons/reactGenerated API Snapshot
Beta
Generated API Snapshot
BetaAuto-extracted from TypeScript source in packages/ui/src/components/thinking.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.
Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata
Primary Props Type
ThinkingProps
ThinkingProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
active | boolean | No | true | True while the model is working. False renders the finished label. |
children | React.ReactNode | No | - | Reasoning details. When provided the header becomes a disclosure button. |
defaultOpen | boolean | No | false | - |
doneLabel | string | No | "Thought process" | Label once finished, e.g. "Thought for 4 seconds". |
indicator | "dots" | "shimmer" | No | "dots" | Indicator style while active. |
label | string | No | "Thinking" | - |
onOpenChange | (open: boolean) => void | No | - | - |
open | boolean | No | - | - |