Shadcn Trace

Browse 22 production-ready Shadcn Trace components for agent turns, live runs, CI pipelines, request spans, data builds and compliance checks. Shadcn Trace ships in a Radix UI build and a Base UI build and is fully aligned with Shadcn Create style options, so the radius, fonts, and color tokens in these previews match the code you export.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Agent turns: reasoning, tool calls, subagents and the sources behind an answer
Run logs that expand to output, from CI jobs and data builds to webhook deliveries
Checklists of automated checks or setup steps with running, failed and pending states

When not to use

One short status line per step with no expanding detail or status color: use the Marker component
Dated events or milestones joined by a connecting line: use the Timeline component
A complete run console with approvals, log views and an outcome report: use the Agent Activity blocks

Agent notes

Status is shown by color and motion only, so every TraceTitle must also say in words that a step is running, failed or not started
A TraceLine on its own is a plain span; wrap it in a link or a Dialog, Sheet or Popover trigger to make it act

Markdownhttps://reui.io/components/trace.md

MCPget_component("trace")

Installnpx shadcn@latest add trace

Full index for agents:llms.txtReUI MCP setup

Shadcn Trace: Agent Steps, Run Logs, and Expandable Activity

Shadcn Trace is a list of one-line steps, each with an icon, a title, an optional description and a status. It has 8 parts: Trace, TraceLine, TraceIcon, TraceTitle, TraceDescription, and TraceCollapsible with its trigger and its content. It ships in a Radix UI build and a Base UI build, and Shadcn Create radius, font, and color tokens apply to it like any other primitive.

A line can stay plain text, expand to show its output, or sit inside a link or a Dialog, Sheet or Popover trigger. 3 statuses cover the life of a step: running shimmers the title, error colors the row, and pending dims a step that has not started.

ReUI shows Trace well beyond the chat window: CI pipelines, request spans, query plans, data builds, webhook deliveries, dependency audits and identity checks, next to Shadcn Code Block, Shadcn Table, and Shadcn Sheet. The sections below cover what the component is, why teams use it, which features matter, and how it fits into a larger surface.

What is Shadcn Trace?

In UI terms, a trace is the record of work: the steps an agent, a pipeline or a job took, in order, one line each. Shadcn Trace fixes the shape of that line so reasoning, tool calls, sources and plans look and behave the same. TraceLine is a span and never a tab stop on its own; it takes its behavior from what wraps it, whether that is a TraceCollapsibleTrigger, a link, or the trigger of a dialog or sheet.

TraceIcon is hidden from assistive tech, which makes TraceTitle the accessible name, so the title is a sentence that says what happened: Ran pnpm test, Failed to run pnpm lint, Deploy a preview. The 22 components here cover every row shape, live runs that stream their steps in, runs nested 3 levels deep, and rows that open a Dialog or a Sheet.

Why Use Shadcn Trace?

Every product that runs work for its users ends up with this list, and each one rebuilds the chevron, the indent, the running state and the truncation by hand. Trace moves those decisions into the style layer: a running title shimmers and stops for readers who prefer reduced motion, a long title truncates while its description stays whole, and expanded detail sits behind a ruled indent at every level.

The screens around these rows are in ReUI Pro. The 5 Agent Activity blocks are run views with live step feeds, approvals, a research trace, an MCP call table and a run report, part of 20 AI and Agents blocks. None of them imports Trace yet, so the examples on this page are the rows such a screen is made of.

Shadcn Trace Features

3 Statuses. Running shimmers the title, error colors the row and its trigger, and pending dims a step that has not started. A line with no status reads as finished work.
Expandable Rows. TraceCollapsible builds on Shadcn Collapsible. Its trigger adds a chevron that turns as the row opens, and the content animates its height behind a ruled indent.
Nested Runs. A Trace inside TraceCollapsibleContent nests a run inside a step. In the Base UI build, keepMounted keeps the open state of nested rows while a parent is folded.
Controlled Open State. open and onOpenChange are required together by the types, so a row can open itself while its step streams and still let the reader's click win.
Links and Overlays. Wrap a TraceLine in an anchor, or in the trigger of a Shadcn Dialog, Shadcn Sheet or Shadcn Popover, and the list gives that wrapper the same hover color and focus ring as an expanding row.
Truncation Rules. TraceTitle truncates to one line and TraceDescription never does, so a duration, a diff count or a timestamp stays readable at any width.
Accessible by Construction. TraceIcon is aria-hidden, an expanding row is a button with aria-expanded, and the running shimmer switches off under prefers-reduced-motion.
Shadcn Create Compatible. All 8 Shadcn Create styles (Vega, Nova, Maia, Lyra, Mira, Luma, Sera, and Rhea) and the Radius, Font Family, and Color Scale controls apply to trace previews and to the code you export.

Shadcn Trace Beyond the Chat Window

In a chat, Trace sits around Shadcn Message turns: the work folds into one summary row above the answer, and the sources it used sit in a second list below it. Text between steps stays outside the lists, so the reply is never mistaken for a step.

Outside chat, the same rows read as an operations log. A CI run is jobs that open to steps and a failing log in a Shadcn Code Block, a request trace is spans nested under their parent, and a review queue is findings that each open a Shadcn Sheet. Let a parent row carry the verdict, such as "Ran 418 tests, 2 failed", and keep the rows beneath it muted.

Show command output, logs and diffs inside an expanded row with Shadcn Code Block, and tabular detail such as rejected rows with Shadcn Table. Put the run's overall state in a parent row or a Shadcn Badge beside the list, so the rows keep their muted scale.

For chat, place Trace between Shadcn Message and Shadcn Bubble turns inside a Shadcn Message Scroller, which announces each new line once. Open the larger detail of a step in a Shadcn Sheet or Shadcn Dialog, and keep Shadcn Marker for flat status lines and labeled dividers between turns.

For the assembled screens, ReUI Pro ships 5 Agent Activity blocks with live step feeds, approval steps, a research trace, an MCP call table and a run report, part of 20 AI and Agents blocks. They are the screen around the rows; the examples on this page are the rows, ready to drop into your own.

Agent Activity Blocks in ReUI Pro

The free examples above pair with 5 production ready agent activity blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

Agent Activity (5 blocks)Agent run views, from live step feeds and approvals to research traces, MCP call tables, and run reports.

Browse all AI & Agents blocks

Frequently Asked Questions

What is a Shadcn Trace used for in real products?

Agent turns with reasoning and tool calls, the sources behind an answer, CI and deploy runs, data pipeline builds, webhook delivery logs, request spans, and lists of automated checks. Anywhere a screen lists steps that ran, are running or have not started, and some of them open to their output.

What is the difference between Trace and Marker?

Shadcn Marker is one flat line of status text with an icon, plus a separator variant for labeled dividers. Trace adds what a step log needs: a running, error or pending status, rows that expand to their output, and nesting. A plain list of finished steps can be either; once a step opens or runs, Trace is the fit.

How do I open a row while it streams and let the user close it?

Keep the reader's choice in state that starts undefined, and pass open={choice ?? running} with onOpenChange={setChoice}. The row opens itself while its step runs and folds when the step finishes, and a click in either direction wins from then on.

How do I show a step that has not started yet?

Set status="pending" on the TraceLine and write the title as an instruction, such as Deploy a preview. The row dims; when the step starts, switch the status to running and the title to the present tense.

Can a trace row open a dialog or a sheet instead of expanding?

Yes. Put the TraceLine inside the trigger of a Shadcn Dialog or Shadcn Sheet. The overlay owns focus, Escape and focus return, and the Trace list styles the trigger like any other row.

Does Trace work with the AI SDK?

It renders whatever you map onto it. A reasoning part becomes a collapsible Thinking row, each tool part becomes a row whose status follows the part's state, and source parts become link rows under one Used sources row. The examples here use plain data, so they run without an AI provider.

How are ReUI Trace components different from a minimal demo?

The 22 examples put Trace in surfaces that behave like production: a live run with Stop, a Terraform plan behind an approval, a CI run with a re-run, nested request spans, a query plan tree, and an access check that explains its decision. For the assembled agent screens, Agent Activity in ReUI Pro has 5 run views.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.