# shadcn/ui — Trace, Code Block & AI Elements

> React and Tailwind UI components and patterns for agentic AI interfaces.

A release from shadcn/ui adding two primary components—Trace and Code Block—alongside AI Elements, a library of 21 design patterns for agentic chat interfaces. Trace provides a collapsible abstraction to render steps such as chain of thought, tool calls, plans, and subagents, while Code Block displays diffs, logs, and terminal output.

Website: https://ui.shadcn.com/docs/changelog/2026-10-ai-elements

## What it is for

- Render agent reasoning, plan progress, and tool call logs in a collapsible timeline
- Display streamed terminal output, syntax-highlighted code, and git diffs
- Build full AI chat interfaces compatible with Vercel AI SDK message parts

## Features

- Trace component with support for running, error, shimmer, and pending states
- Collapsible lines that can expand, link out, or trigger dialogs, drawers, and sheets
- Code Block component supporting line numbers, text wrapping, highlighted lines, and diffs
- 21 AI Elements patterns covering Chain of Thought, Queue, Sources, Subagents, and more
- Compatible with Base UI, React Aria, and Radix UI across multiple styling presets
- Accessible keyboard navigation and screen-reader support out of the box
- Markdown documentation URLs formatted for direct consumption by coding agents

## Pricing

Open source. Free and open source (MIT)

## Details

- Type: Website
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- Open source: yes
- Platforms: Code library, Web
- For: React and Next.js developers building AI assistants and agentic user interfaces.
- Alternative to: AI SDK Elements
- Tags: shadcn, react, ai ui, agentic ui, tailwind css, components

## Why it was saved

- [@shadcn, 14 October 2026](https://x.com/shadcn/status/2110410655165779985): A ready-made React/Tailwind component set for rendering agent reasoning, tool calls, subagents, terminals and test output — directly reusable in an AI product UI.

## Related

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 15 October 2026. Page: https://xiry.app/resources/shadcn-ui-trace-code-block-and-ai-elements

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.