shadcn/ui 2026年7月更新：Base UI 成为默认设置并推出全新聊天组件

shadcn/ui 现在默认使用 Base UI

Base UI 现在是 shadcn/ui 新项目的默认组件库，在初始化过程中取代了 Radix 成为首选。这一转变是在社区采用了一段时间后做出的，在此期间，通过 shadcn/create 创建的项目中，选择 Base UI 而非 Radix 的比例达到了 2:1。

用户关键变更

• 初始化： 运行 npx shadcn init 现在默认选择 Base UI。
• 文档： 组件页面现在默认显示 Base UI 标签页，不过用户仍可通过一键点击访问 Radix 文档。
• CLI 默认设置： shadcn/create 现在将 Base UI 作为首选选项。

对 Radix 的支持

Radix 并未被弃用。shadcn/ui 继续支持 Radix，并且除非某个组件是 Base UI 独有的，否则新组件将同时为这两个库提供版本。对于已经在 Radix 上运行生产环境应用的开发者，官方建议无需进行迁移。对于希望在新项目中继续使用 Radix 的用户，可以在 shadcn init 时使用 -b radix 标志来保持之前的默认设置。

AI 驱动的迁移路径

shadcn/ui 并没有提供传统的 codemod，而是为编程代理（如 Claude Code 或 Cursor）引入了一种“技能”（skill）来处理迁移。这种方法旨在保留自定义变体、类名和 props，而机械的 codemod 通常会覆盖这些内容。

迁移过程将生成：

• 已验证的代码： 在报告成功之前，先进行类型检查并构建代码。
• 详细报告： 一个 .migration/ 目录，其中包含每个组件的报告，详细说明了哪些内容发生了变化、哪些内容保持不变，以及一份手动验证清单。
• 原子化的 Git 历史： 每个组件在独立分支上进行一次提交，以便于回滚。

全新聊天界面组件

shadcn/ui 发布了一套专门为流式聊天体验设计的组件，重点在于对话层和交互逻辑。

核心聊天原语

• MessageScroller: 一个滚动容器，用于管理复杂的行为，包括锚定转折、流式回复、已保存的会话恢复以及可见性跟踪。该组件也作为无样式的 headless 组件在新的 @shadcn/react 包中提供。
• Message: 处理对话行的布局，包括头像、对齐方式和分组消息。
• Bubble: 渲染消息表面，支持表情回应、链接和可折叠内容。
• Attachment: 管理文件和图像的渲染，并包含元数据和上传状态。
• Marker: 用于系统提示、日期分隔符和流式状态指示器。

聊天专用 CSS 工具类

在 shadcn/tailwind.css 中新增了两个工具类：

• scroll-fade: 为容器添加感知滚动的边缘淡入淡出效果，以提示存在额外内容。
• shimmer: 为实时状态指示器（例如“Thinking...”）提供文本闪烁效果。

GitHub 仓库作为注册表

任何公开的 GitHub 仓库现在都可以转换为 shadcn 注册表，这使得开发者不仅可以分发组件，还可以分发 hooks、工具函数、设计令牌（design tokens）和 CI 工作流。

通过在仓库根目录添加一个 registry.json 文件，用户可以直接通过 shadcn CLI 安装项目。例如，一个团队可以利用命令 npx shadcn add https://github.com/acme/toolkit/project-conventions 来分发项目规范（如 .editorconfig 或 AGENTS.md）。

其他更新与工具

shadcn eject 命令

为了减少对 shadcn 包的依赖，shadcn eject 命令会将共享的 shadcn/tailwind.css（其中包含自定义变体如 data-open:）直接内联到项目的全局 CSS 文件中，并移除该包的依赖。

Rhea 风格

Rhea 是一种基于 Luma 的全新紧凑型设计风格。它通过更小的间距和更紧密的控制提供更高的信息密度，专门为专注型产品界面设计，且不会改变底层的 Tailwind 间距比例。

@shadcn/react 包

这个新包提供了无样式的 headless React 组件。第一个发布的原语是 message-scroller，允许开发者在不被特定视觉风格限制的情况下实现复杂的滚动行为。

社区观点

向 Base UI 转型以及转向 AI 辅助迁移的举动引发了开发者的讨论：

"从 codemod 转向由 LLM 执行迁移工作是一个有趣的进展。即使它们更具确定性，我也在想 codemod 的时代是否已进入倒计时。"

一些用户对这些库的“div 密集型”特性表示了担忧，指出原生 HTML 元素如 <details> 和 <summary> 通常可以替代复杂的 div 结构。另一些人则质疑这种“复制-粘贴”模式与 Mantine 等传统 UI 库的权衡，指出前者需要 AI 代理来处理那些原本只需简单版本升级的更新。