Changelog

@shadcn/helpers 现在可以为 AI SDK 模拟人在回路中的流程。一个 脚本化的对话可以暂停以等待真实用户输入，等待审批，并根据用户的决定继续。

所有内容都会通过真实的 useChat 生命周期进行流式传输，因此你的工具卡片、审批提示和问题流程 表现会与生产环境中的完全一致。

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."
    )
  })

传入 needsApproval，即可在用户做出决定之前暂停。审批通过后，脚本化输出 会继续流式传输，而拒绝则会自动流式传输。

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.

现在，注册表可以在服务器端处理搜索。

运行 shadcn search 时，CLI 会将搜索参数作为查询参数转发到你的 注册表：

CopyGET /r/registry.json?q=button&limit=50&offset=0

返回匹配的项目以及一个 pagination 对象，CLI 会原样使用你的搜索结果。这让大型注册表的搜索速度更快：不再需要下载完整目录后再进行搜索。

Copy{
  "name": "acme",
  "homepage": "https://acme.com",
  "items": [
    {
      "name": "button",
      "type": "registry:ui",
      "description": "按钮组件。"
    }
  ],
  "pagination": {
    "total": 12,
    "offset": 0,
    "limit": 1,
    "hasMore": true
  }
}

动态搜索是可选功能。静态注册表会忽略查询参数，无需任何更改即可继续运行。

请参阅动态搜索文档，了解完整指南。

现在，Base UI 项目已支持新的 Toast 组件。它支持操作、状态类型、Promise、堆叠以及滑动关闭。

"use client"

import { Button } from "@/components/ui/button"

使用 CLI 将其添加到你的项目中：

pnpmnpmyarnbun
pnpm dlx shadcn@latest add toast
Copy

React Aria 现已成为 shadcn/ui 中的一流组件基础。

使用 React Aria Components，与 Base UI 和 Radix 一起构建。可在 shadcn/create 中选择它，或使用 --base aria 初始化项目。CLI 会处理 依赖项、注册表解析、样式和组件安装。

最新内容#

• 一流的 React Aria 基础 - 在 CLI、预设以及 shadcn/create 中，凡是可以选择 Base UI 或 Radix 的地方，都可以选择 React Aria。
• 完整的组件文档 - React Aria 组件拥有专门的安装、使用、组合、示例和 API 参考部分。
• 全部八种样式 - 将 React Aria 与 Vega、Nova、Maia、Lyra、Mira、Luma、 Rhea 或 Sera 搭配使用。
• 特定基础的输出 - React Aria 状态选择器和依赖项限定在 Aria 注册表中。 现有的 Base UI 和 Radix 组件保持不变。

从 React Aria 开始#

初始化项目时使用 aria 基础：

pnpmnpmyarnbun
pnpm dlx shadcn@latest init --base aria
Copy

或者在 shadcn/create 中选择 React Aria。项目初始化后，shadcn add 会为每个组件安装 React Aria 实现。

Base UI 仍然是默认选项，Radix 也仍然得到完全支持。现有项目将继续使用当前的基础。