Browse components
Thought Line
An AI reasoning indicator: the label ripples letter by letter, the current step shimmers past, and a click unfolds the full trace of steps.
Installation
npx shadcn@latest add @glint-ui/thought-lineFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/thought-line.json
Usage
import { ThoughtLine } from "@/components/ui/thought-line";
<ThoughtLine steps={reasoning} running={!answer} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Thinking" | Rippling label while running. |
| doneLabel | string | "Thought for {s}s" | Label when finished; {s} becomes elapsed seconds. |
| highlight | string | "var(--foreground)" | CSS color of the shimmer highlight. |
| defaultOpen | boolean | false | Start with the steps expanded. |
| steps | ReactNode | — | Reasoning steps so far; the last is the live one. |
| running | ReactNode | — | Boolean, default true. Set false when finished to show the done label. |
| className | string | — | Extra classes for the root element. |