Search

Search components and blocks

Sign in

Reasoning Trail

A collapsible view of an AI's reasoning. While it works, the header shows the dithered thinking orb beside a shimmering 'Thinking…'; steps then appear one at a time on a vertical rail — each node pulses while active and turns into a check as its connecting line fills in. A step can carry a short note, search-result chips that pop in with a stagger, or image tiles. When the last step lands, the orb gives way to a check and 'Reasoned in N steps', the trail auto-collapses to keep the chat tidy, and a replay button appears. Collapse and expand the whole trail with the header.

pnpm dlx shadcn@latest add @ditherui/reasoning-trail

  1. Understanding the question

    You want to know why consistent sleep helps memory — I'll look for studies and keep the answer practical.

Install

$ pnpm dlx shadcn@latest add @ditherui/reasoning-trail

Props

steps{ id: string; label: string; detail?: string; results?: { domain: string; title: string }[]; images?: string[] }[]sample steps
stepMsnumber1800
openboolean—
defaultOpenbooleantrue
onOpenChange(open: boolean) => void—
classNamestring—

When to use the reasoning trail

Use it to show an AI's reasoning. While it works, the header shows a dithered thinking orb and shimmering Thinking text.

  • Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components