xiry.

Development · Website

shadcn/ui — Trace, Code Block & AI Elements

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

From the Xiry library · Updated 15 October 2026

Visit ui.shadcn.com ↗

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.

What it's 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
Topic
UI Components
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: 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

    Copy-paste React UI components built with Tailwind CSS and Radix primitives.

  • Efferd

    Pre-built, responsive shadcn/ui blocks and layouts for React applications

  • Motion

    Open-source animation library for React, Vue, and vanilla JavaScript

  • React Bits

    Open-source animated and interactive React UI components and backgrounds

  • 21st.dev

    Curated directory of crafted React, Tailwind, and shadcn UI components.

  • lucide-animated

    Open-source animated React icons built with Lucide and Motion

All 114 in UI Components →

Updated