Changelog

Today, we are releasing two new components, Trace and Code Block, and AI Elements, a set of patterns for agentic interfaces built from shadcn/ui components.

Trace and Code Block are available for Base UI, React Aria and Radix across all eight styles.

Trace#

Trace is a list of lines for the steps an agent takes. We built it by studying hundreds of components from agentic interfaces and distilling what they share into one composition you can reuse.

 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

"use client"

import * as React from "react"

Reasoning, tool calls, sources, plans and subagent runs all have the same shape: something the agent did, and what happened. In Trace, each one is a line with an icon, a title, and an optional description and status. A line can expand to show more detail, link to a page, or open a dialog or sheet, so every step looks and behaves the same in your interface.

• running, error and pending states, with a shimmer while a step runs.
• Lines that expand, link out, or open a dialog, sheet, drawer or popover.
• Nested lines, so a summary expands into steps and a step into its output.
• Works with the reasoning, tool and source parts from the AI SDK.
• Keyboard and screen reader support from the trigger that wraps each line.

pnpmnpmyarnbun
pnpm dlx shadcn@latest add trace
Copy

Code Block#

CodeBlock displays code, terminal output, logs and diffs. It has a header with a title and actions, line numbers, wrapping, diff and highlighted lines, and a small size for tool output in a Trace.

import { streamText } from "ai"
export async function POST(request: Request) {  const { messages } = await request.json()
  const result = streamText({    model: "anthropic/claude-sonnet-4.5",    system: "You are a helpful assistant. Answer in one short paragraph.",    messages,  })
  return result.toUIMessageStreamResponse()}

"use client"

import * as React from "react"

pnpmnpmyarnbun
pnpm dlx shadcn@latest add code-block
Copy

Building agentic interfaces#

Trace and Code Block join the components for chat interfaces we released in June. Together, they cover every part of an agentic interface:

• Message Scroller holds the thread. It anchors each turn, follows the reply while it streams and loads history without jumping.
• Message is one turn, with an avatar, a header and a footer for actions.
• Bubble holds what the person sends.
• Trace shows the steps the agent takes inside a turn.
• Code Block shows the code, commands and output those steps produce.
• Marker adds notes and dividers between turns.
• Attachment shows the files that come with a message.
• Questionnaire asks the person to clarify before the agent continues.

AI Elements#

AI Elements are patterns for agentic interfaces built from these components. There is no package to install. Each pattern is a composition you copy into your project, and the code is yours.

"use client"

import * as React from "react"

There are 21 patterns, from Chat and Prompt Input to Reasoning, Tool, Plan and Subagent. Each page shows how to render the pattern from AI SDK message parts.

Every page is also available as Markdown, so you can point your coding agent at it:

CopyAdd the Reasoning pattern from https://ui.shadcn.com/docs/ai-elements/base/reasoning.md to my chat.

Migrating from AI SDK Elements#

AI Elements replaces AI SDK Elements, and we are going to deprecate AI SDK Elements.

You do not need to migrate right away. The components you installed from AI SDK Elements were copied into your project, so they keep working.

When you are ready, each pattern page has a migration prompt. Paste it into your coding agent, and it rebuilds the wrapper in components/ai-elements on Trace, Code Block and the other shadcn/ui components. Every export keeps its name and props, so the code that uses it does not change.

See Migrating from AI SDK Elements for the element that replaces each file, and for the elements we did not rebuild. If you still need one of those, open an issue and we will help you build it.

Every shadcn component now imports cn from the cn package.

For years, every shadcn project started with the same five lines in lib/utils.ts: import clsx, import twMerge, wrap one in the other, export it as cn. It worked, but it meant two dependencies and a helper you had to copy into every project and every registry.

We have moved that into a package. cn is a drop-in replacement for twMerge(clsx(...)). It is smaller, faster and ships the same API, so nothing changes at the call site.

Copyimport { cn } from "cn"
 
;<div className={cn("flex items-center", className)} />

What changed#

• Registry components, blocks and examples import cn from cn instead of @/lib/utils.
• npx shadcn init installs cn and generates a one-line lib/utils.ts.
• Every registry item that uses cn declares it as a dependency, so npx shadcn add installs it in projects created before this change.

lib/utils.ts#

The utils registry item still exists. It now re-exports cn so your own code keeps working and you still have a single place for project helpers.

Copyexport { cn } from "cn"

Existing projects#

Nothing breaks. Your lib/utils.ts keeps working and new components install cn next to it. To move the rest of your project over and drop clsx and tailwind-merge, run the migration:

pnpmnpmyarnbun
pnpm dlx shadcn@latest migrate cn
Copy

It rewrites imports, replaces twMerge(clsx(...)) calls and removes the old packages when nothing references them anymore. See the CLI docs for details.

GitHub registries now work with private repositories.

In June, we made it possible to turn any public GitHub repository into a registry. Teams asked for the same thing for their internal code: design systems, feature kits, agent rules and conventions that should not be public.

You can now install from private repositories. If you can read the repository, the CLI can install from it.

pnpmnpmyarnbun
pnpm dlx shadcn@latest add acme/internal-toolkit/auth-kit
Copy

Zero configuration#

If you are logged in to the GitHub CLI, there is nothing to set up.

Copygh auth login

When a repository is not publicly readable, the CLI reads it through gh using your stored credentials. The token stays inside the GitHub CLI. It never enters the shadcn process.

Copy✔ Using gh credentials.
✔ Checking registry.
✔ Created 1 file:
  - lib/auth.ts

CI support#

Where the GitHub CLI is not installed, set GH_TOKEN or GITHUB_TOKEN:

CopyGH_TOKEN=github_pat_xxx npx shadcn@latest add acme/internal-toolkit/auth-kit

We recommend a fine-grained personal access token scoped to the repository with Contents: Read-only access.

Works with every command#

Private repositories work with the same commands as public GitHub registries.

pnpmnpmyarnbun
pnpm dlx shadcn@latest list acme/internal-toolkit
Copy

pnpmnpmyarnbun
pnpm dlx shadcn@latest search acme/internal-toolkit --query auth
Copy

pnpmnpmyarnbun
pnpm dlx shadcn@latest view acme/internal-toolkit/auth-kit
Copy

pnpmnpmyarnbun
pnpm dlx shadcn@latest registry validate acme/internal-toolkit
Copy

How it works#

• Public repositories are read anonymously, exactly as before. No credentials are used and the GitHub CLI is never invoked.
• The CLI tries anonymous access first and only uses your credentials when the repository is not publicly readable.
• Private files are read through GitHub's Contents API, pinned to the resolved commit SHA.
• A token from GH_TOKEN is only ever sent to api.github.com. Stored GitHub CLI credentials are read by gh, not by the CLI.

See the Private repositories docs for the full guide.

@shadcn/helpers can now mock human-in-the-loop flows for the AI SDK. A scripted conversation can pause for real user input, wait for an approval, and continue with whatever the user decided.

Everything streams through the real useChat lifecycle, so your tool cards, approval prompts, and question flows behave exactly as they would in production.

Copyimport { createChat } from "@shadcn/helpers/ai-sdk"
 
const chat = createChat<ChatMessage>()
  .user("Help me plan the next prototype.")
  .assistant(({ writer }) => {
    writer.text("A couple of questions before I start.")
    writer.tool("askQuestions", { input: { questions } })
  })
  .assistant(({ writer, toolCall }) => {
    writer.text(
      toolCall?.name === "askQuestions" && toolCall.output
        ? `Starting with ${toolCall.output.answers.direction}.`
        : "Starting now."
    )
  })

Pass needsApproval to pause behind the user's decision. The scripted output streams after approval, and denial streams automatically.

Copychat
  .assistant(({ writer }) => {
    writer.text("That will archive 3 drafts. I need your approval.")
    writer.tool("archiveDrafts", {
      input: { count: 3 },
      needsApproval: true,
      output: { archived: 3 },
    })
  })
  .assistant(({ writer, toolCall }) => {
    writer.text(
      toolCall?.approved ? "Archived 3 drafts." : "Okay, leaving them in place."
    )
  })

Today, we're releasing Questionnaire, a new component for multi-step question flows. Use it for agent clarification prompts, onboarding, surveys, intake forms, and configuration.

Questionnaire is available for Base UI, React Aria, and Radix across all eight styles.

"use client"

import * as React from "react"

Features#

• Single and multiple selection with native radios and checkboxes.
• Freeform answers alongside fixed choices.
• Explicit skipping for optional questions.
• Previous, next, submit, and custom progress controls.
• Required and custom validation.
• Controlled navigation, saved defaults, and conditional questions.
• Keyboard navigation with optional letter or number shortcuts.
• Native form serialization and server-rendered collection state.
• Standalone, Card, and Dialog composition.

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add questionnaire
Copy

@shadcn/react#

The <Questionnaire /> component is also available as an unstyled headless primitive in @shadcn/react. Read the docs to learn more.