shadcn Brings Conversational Primitives to shadcn/ui with New Chat Components

shadcn 为 shadcn/ui 带来对话原语与新聊天组件

作者：Daniel Curtis · InfoQ 原文

摘要：shadcn 发布了五个用于构建聊天界面的新组件（MessageScroller、Message、Bubble、Attachment、Marker）及两个 CSS 工具，首次将流式对话原语引入 shadcn/ui。同时推出无头组件包 @shadcn/react，使开发者可复制粘贴、自主定制。Vercel CEO 力推，社区反响热烈。新组件不取代 Vercel 的 AI Elements，现有用户无需重写。该项目是 MIT 开源，拥有超过 12.1 万 GitHub 星，每周服务超 1000 万组件。

shadcn, the design engineer behind the widely used shadcn/ui project at Vercel, has released a new set of components for building chat interfaces, bringing streaming conversation primitives directly into shadcn/ui for the first time.

shadcn，作为 Vercel 广泛使用的 shadcn/ui 项目背后的设计工程师，发布了一套用于构建聊天界面的新组件，首次将流式对话原语直接引入 shadcn/ui。

The release covers what shadcn calls the conversation layer, with five components, MessageScroller, Message, Bubble, Attachment, and Marker, alongside two new CSS utilities, scroll-fade and shimmer.

该发布涵盖了 shadcn 所称的对话层，包含五个组件：MessageScroller、Message、Bubble、Attachment 和 Marker，以及两个新的 CSS 工具：scroll-fade 和 shimmer。

It is described as the first phase of a larger effort, reimagining the abstraction behind each part and shipping them one piece at a time so developers can copy, compose, and adapt them.

它被描述为更大计划的第一阶段，重新构想每个部分背后的抽象，并逐一发布，以便开发者可以复制、组合和调整它们。

Installation runs through the familiar CLI: pnpm dlx shadcn@latest add message-scroller message bubble attachment marker

安装通过熟悉的 CLI 进行：pnpm dlx shadcn@latest add message-scroller message bubble attachment marker

At the centre is MessageScroller, the scroll container that handles the details that are easy to get wrong, including anchored turns, streamed replies, saved thread restore, prepended history, jump-to-message, scroll controls, and visibility tracking.

核心是 MessageScroller，一个滚动容器，处理容易出错的细节，包括锚定转向、流式回复、已保存线程恢复、前置历史、跳转到消息、滚动控制和可见性跟踪。

It owns that behaviour without owning your messages, AI state, transport, persistence, or model state, so you supply the content renderer.

它拥有这些行为，但不拥有你的消息、AI 状态、传输、持久化或模型状态，因此你提供内容渲染器。

Around it, Message lays out a conversation row, Bubble renders the message surface with reactions and buttons, Attachment handles files and images with upload state, and Marker renders status updates and separators for things like tool activity and date breaks.

围绕它，Message 布局对话行，Bubble 渲染带有反应和按钮的消息表面，Attachment 处理带有上传状态的文件和图像，Marker 渲染状态更新和分隔符，用于工具活动和日期分隔等。

shadcn also introduced @shadcn/react, a new package for unstyled, headless components, starting with message-scroller.

shadcn 还引入了 @shadcn/react，一个用于无样式、无头组件的新包，从 message-scroller 开始。

The registry component wraps it in shadcn/ui styles while the scroll behaviour lives in the package, letting the team ship tested interaction logic without locking it to a visual style.

注册表组件将其封装在 shadcn/ui 样式中，而滚动行为则保留在包中，让团队发布经过测试的交互逻辑，而不将其锁定在特定视觉风格上。

Everything is available for both Radix and Base UI.

所有内容同时适用于 Radix 和 Base UI。

Vercel chief executive Guillermo Rauch declared that "The UI for AI is here. It's @shadcn," and the announcement passed 950,000 views within days.

Vercel 首席执行官 Guillermo Rauch 宣称「AI 的 UI 就在这里，它就是 @shadcn」，该公告在几天内获得了超过 95 万次观看。

A GitHub issue reported that MessageScroller mount-time anchors are never applied, reproducible with the headless primitives alone.

一个 GitHub issue 报告称 MessageScroller 挂载时的锚点从未被应用，仅使用无头原语即可重现。

Broader sentiment on Hacker News continues to favour the copy-paste model, with developers noting they can upgrade components individually and avoid the version lock-in common to libraries like MUI.

Hacker News 上的普遍情绪仍然倾向于复制粘贴模型，开发者指出他们可以单独升级组件，避免像 MUI 这样的库常见的版本锁定。

The release raises a question of how this relates to Vercel's own AI Elements, itself built on shadcn/ui with more than 20 components tied to the AI SDK useChat hook.

该发布引发了一个问题：这与 Vercel 自身的 AI Elements 有何关系？AI Elements 本身基于 shadcn/ui 构建，拥有超过 20 个与 AI SDK useChat 钩子绑定的组件。

shadcn was explicit that the release does not replace it, existing users do not need to rewrite anything, and should reach for the shadcn/ui version only when they want the newer abstraction, updated styling, or Radix and Base UI support.

shadcn 明确表示该发布不会取代它，现有用户无需重写任何内容，只有在他们想要更新的抽象、更新的样式或 Radix 和 Base UI 支持时，才应使用 shadcn/ui 版本。

For anyone moving from the styled components to the headless package, the docs provide a direct parts mapping, where MessageScroller becomes MessageScroller.Root and MessageScrollerProvider becomes MessageScroller.Provider.

对于从样式组件迁移到无头包的用户，文档提供了直接的部件映射：MessageScroller 变为 MessageScroller.Root，MessageScrollerProvider 变为 MessageScroller.Provider。

Beyond Vercel's tools, the ecosystem already offers alternatives such as Blazity's shadcn-chatbot-kit and ibelick's prompt-kit, both community favourites for assembling AI chat UIs.

除了 Vercel 的工具，生态系统已经提供了替代方案，如 Blazity 的 shadcn-chatbot-kit 和 ibelick 的 prompt-kit，两者都是社区构建 AI 聊天 UI 的热门选择。

By folding these patterns into shadcn/ui itself, shadcn is betting that chat has become a default interface worth standardising, one primitive at a time.

通过将这些模式融入 shadcn/ui 本身，shadcn 正在押注聊天已成为一种值得标准化的默认界面，一次一个原语。

shadcn/ui is an open source, MIT licensed component distribution project created by shadcn, a design engineer on the AI team at Vercel.

shadcn/ui 是一个开源、MIT 许可的组件分发项目，由 Vercel AI 团队的设计工程师 shadcn 创建。

Rather than shipping as an installable dependency, it gives developers copy and paste components built with React and Tailwind CSS that they own and customise, working across both Radix and Base UI primitives.

它不以可安装依赖的形式发布，而是提供开发者用 React 和 Tailwind CSS 构建的复制粘贴组件，这些组件由开发者拥有和定制，可同时使用 Radix 和 Base UI 原语。

It has become one of the most widely adopted approaches to building React interfaces, with more than 121,000 GitHub stars and a registry now serving over 10 million components a week.

它已成为构建 React 界面最广泛采用的方法之一，拥有超过 12.1 万 GitHub 星，注册表现在每周服务超过 1000 万个组件。

阅读理解

1. What is the primary function of the MessageScroller component according to the article?

2. How does shadcn/ui differ from traditional component libraries like MUI?

3. What is the relationship between the new shadcn/ui chat components and Vercel's AI Elements?

温故复习 →每日一句 →