Thinking Steps

When To Use

Use Thinking Steps when information needs to be scanned quickly and compared across multiple rows, cards, or values.
Choose the example that best matches whether the user is browsing, monitoring, or drilling into structured data.
Lean on these patterns when you want consistent spacing and hierarchy before tuning the visual treatment.

When Not To Use

Do not use a dense data pattern when the primary task is storytelling, onboarding, or one-off explanation.
Do not flatten nuanced data into a compact summary card if the user still needs the underlying structure to make a decision.

Accessibility Notes

Mark the current item clearly with visual state and the appropriate ARIA current/selected semantics.
Ensure arrow-key or tab-key movement stays predictable when the pattern behaves like a composite widget.
Do not rely on icon-only navigation unless every control has a clear accessible name.

Key Props / API

Props

defaultOpen, open, onOpenChange, children, steps, label

Key exports

ThinkingSteps, ThinkingStepsHeader, ThinkingStepsContent, ThinkingStep, ThinkingStepDetails, ThinkingStepSources