# Shadcn Chat Turn

> Chat turn with sources

- Type: example, free and open source (MIT)
- Component: [Trace](https://reui.io/components/trace.md)
- Page: https://reui.io/components/trace/c-trace-3
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/trace.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/trace.md
- MCP: `get_example("c-trace-3")`
- Registry item: https://reui.io/r/styles/base-nova/c-trace-3.json
- Uses: Bubble, Code Block, Message, Trace

## Best for

A chat transcript turn whose 2 SQL queries fold into one summary row above the answer, with cited dashboards below

## Agent notes

- `QUERIES` and `DASHBOARDS` are sample data; map your message's tool and source parts onto their fields

## Install

```bash
npx shadcn@latest add @reui/c-trace-3
```

## About Shadcn Trace

### 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 [Marker](https://reui.io/components/marker.md) (`get_component("marker")`)
- Dated events or milestones joined by a connecting line: use [Timeline](https://reui.io/components/timeline.md) (`get_component("timeline")`)
- A complete run console with approvals, log views and an outcome report: use the [Agent Activity blocks](https://reui.io/blocks/ai-agents/agent-activity.md)

### 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

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.