Thought steps

A collapsible sequence of work summaries, with step states, source badges, images, and captions.

Preview

Review summary

Checked the supplied source

In action

Inspect the supplied evidence

Review summaryIn progress

✓
Read the supplied brief
Found the proposed scope and three responsibilities.
Project source example
◉
Compare responsibilities
Checking the owner of each decision.

When to use

Use it for

Present application-supplied work summaries and the evidence supporting each step.
Use sources, content, image, caption, and icon slots for richer evidence; images need meaningful alt text.

Avoid

Exposing private model reasoning or inventing an explanation of hidden model internals.

Install

React package

npm install @noorddev/vlak-react

Load the stylesheet once at your app root, then import the components you use.

import "@noorddev/vlak-react/css";
import { ThoughtSteps } from "@noorddev/vlak-react";

Per-component imports are available at @noorddev/vlak-react/components/thought-steps.

Copy the source

npx @noorddev/vlak-cli add thought-steps

Adds the component and its dependencies to components/vlak/. Follow the StyleX setup to compile the source in your application.

shadcn registry

npx shadcn add https://vlak.dev/r/thought-steps.json

Installs the same source through the shadcn CLI.

React

import { ThoughtSteps } from "@noorddev/vlak-react";

<ThoughtSteps title="Review summary" defaultOpen steps={[{ id: "source", title: "Read the brief", state: "complete", description: "Checked the supplied scope and owners." }, { id: "review", title: "Compare responsibilities", state: "active" }]} />

See the integration example to compose these components with your application's model and data.

Props

ThoughtSteps

Application-supplied work summaries, with per-step state and supporting evidence.

Prop	Type	Description
`title`	`ReactNode`
`status`	`ReasoningStatus`	Describes application-supplied progress, without generating a thinking trace.
`statusLabel`	`string`
`defaultOpen`	`boolean`
`onOpenChange`	`(open: boolean) => void`
`variant`	`"inline" \| "panel"`	An inline disclosure for message activity, or a framed panel.
`durationMs`	`number`	Optional elapsed time supplied by the application, in milliseconds.
`measureDuration`	`boolean`	Measure this component's streaming interval. Off by default.
`autoExpand`	`boolean`	Open when a new streaming interval begins. Manual disclosure remains the default.
`autoCollapseDelay`	`number \| false`	Close once after completion unless the reader manually changed the disclosure.
`steps`required	`readonly ThoughtStep[]`

Also accepts Omit<DetailsHTMLAttributes<HTMLDetailsElement>, "title">.

The ref reaches HTMLDetailsElement.

Keyboard

Keys	Does
`Tab`	Moves through the supplied native controls in reading order
`Enter, Space`	Activates focused buttons and disclosure summaries

Accessibility

Native attributes, className, style, and the forwarded ref reach the outer element.
Interactive content requires accessible names; progress text is not announced for every streamed token.

Markup

The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.

npm install @noorddev/vlak

import "@noorddev/vlak/css";

<details class="rs-thought-steps"><summary>Review summary</summary><ol class="rs-thought-steps-list"><li class="rs-thought-steps-step">Checked the supplied source</li></ol></details>

Classes

.rs-thought-steps.rs-thought-steps-list.rs-thought-steps-step.rs-thought-steps-detail.rs-thought-steps-title.rs-thought-steps-active.rs-thought-steps-sources.rs-thought-steps-figure.rs-thought-steps-caption

Depends on

Reasoning

Use elsewhere

Markdown reference Registry JSON Source AI integration guide