文章摘要
自2026年7月起,shadcn/ui默认组件库从Radix切换为Base UI。Base UI由原Radix团队开发,已稳定发布至1.6.0版本,周下载量超600万。新项目默认使用Base UI,但用户仍可自由选择。
文章总结
好的,这是根据您的要求,对原文进行中文重述和精简后的版本:
2026年7月 - Base UI成为默认组件库
即日起,Base UI 成为 shadcn/ui 的默认组件库。
回顾历史,shadcn/ui 最初基于 Radix 构建。如今,Radix 的原班人马打造了全新的 Base UI。鉴于社区中已有大量用户选择 Base UI,我们决定将其设为默认选项。
为何现在切换?
- Base UI 已稳定:版本 1.6.0,周下载量超 600 万。
- 持续进化:团队定期发布新组件。
- 我们和社区都在用:新项目及通过
shadcn/create创建的项目中,选择 Base UI 的比例已超过 Radix。
具体变化
- 新项目运行
npx shadcn init时,Base UI 为默认选项。 shadcn/create界面优先展示 Base UI。- 文档页面默认显示 Base UI 标签,Radix 文档仅需一次点击即可访问。
这对您意味着什么
- Radix 不会被弃用。我们仍会为两个库同步更新组件(除非某组件仅存在于 Base UI)。
- 您无需迁移。Radix 是成熟稳定的库,我们自身也在生产环境中使用。如果您的应用运行正常,请继续使用。
- 新项目仍可选 Radix:只需在
shadcn init命令后添加-b radix参数即可。 - 推荐新项目使用 Base UI。
关于迁移
您无需迁移。但若想迁移,我们提供了一个技能(skill)供编码助手使用。它支持渐进式迁移:一次迁移一个组件及其用法,两个库可在项目中共存。迁移过程会生成工作代码、组件迁移报告(位于 .migration/ 目录)和清晰的 Git 提交历史(每个组件一个提交,便于回滚)。
我们选择提供技能而非代码转换工具(codemod),是因为您对代码进行了自定义修改。技能能让编码助手理解您的改动,并保留这些自定义内容。
2026年6月 - 聊天界面组件
我们发布了一套用于构建聊天界面的新组件:MessageScroller、Message、Bubble、Attachment 和 Marker。
MessageScroller:对话的滚动容器,处理锚定滚动、流式回复、历史记录恢复、滚动控制等复杂逻辑,但不绑定您的消息或 AI 状态。Message:对话行布局,包含头像、对齐、头部、内容、底部和分组消息。Bubble:消息气泡,支持变体、对齐、反应、链接、按钮和可折叠内容。Attachment:文件与图片渲染,包含媒体、元数据、上传状态和操作。Marker:渲染状态更新、系统通知、日期分隔等。
同时新增了两个 CSS 工具:scroll-fade(为滚动容器添加边缘淡出效果)和 shimmer(为“思考中…”等实时状态添加文字闪烁效果)。
@shadcn/react 包
我们创建了 @shadcn/react 包,用于提供无样式、无头(headless)的 React 组件。首个原语是 @shadcn/react/message-scroller,其滚动行为逻辑独立于视觉样式,可在 Radix 和 Base UI 中使用。
与 AI Elements 的关系
此发布不取代 AI Elements。您可继续使用 AI Elements。本次发布是将聊天核心组件逐一引入 shadcn/ui,您可按需独立替换。
2026年6月 - GitHub 注册表
您可以将任何公开的 GitHub 仓库转变为注册表。只需在仓库根目录添加 registry.json 文件,定义要分发的项目,用户即可通过 shadcn CLI 直接从 GitHub 安装。
注册表项目不限于组件,可分发 hooks、工具、设计令牌、项目规范、CI 工作流等任何项目文件。CLI 会读取 registry.json,解析 include 条目,并安装指定项目的文件。
2026年5月 - shadcn eject 命令
为支持 Radix 和 Base UI,我们创建了 shadcn/tailwind.css 来存放共享的 Tailwind 工具。init 命令会将其导入全局 CSS。
如果您不想依赖 shadcn 包来获取此 CSS,可使用 shadcn eject 命令。它会将 shadcn/tailwind.css 的内容内联到您的全局 CSS 文件中,并移除对 shadcn 包的依赖。
2026年5月 - 新风格 Rhea
我们推出了新风格 Rhea。它比 Luma 更紧凑,间距更小,表面更密集,专为注重信息密度的产品界面设计。
Rhea 保持了 Luma 的圆润基础,但按钮、输入框、菜单、卡片和列表的间距更紧凑,使界面能承载更多信息而不显拥挤。我们选择将其作为新风格,而非修改 Luma 的间距,是为了避免改变 Tailwind 间距比例(如 p-2、w-4)的通用含义。Rhea 现已在 shadcn/create 中可用,支持 Radix 和 Base UI。
评论总结
根据评论内容,主要观点和论据如下:
正面评价(认可度较高): - 用户Topfi称赞Base UI的原始组件易于使用,尤其适合构建复杂组件,并建议Shadcn减少依赖。 - "Found the primitives very pleasant to work with"(原始组件使用体验很好) - "Maybe Shad can reduce some of the dependencies"(建议减少依赖)
- 用户upmostly认为Shadcn质量无与伦比,甚至适用于桌面应用,并预测其将成为UI默认选择。
- "no UI library comes close to shadcn's quality"(没有UI库能比肩Shadcn的质量)
- "I see it becoming the defacto choice for UIs"(它将成为UI的事实标准)
负面/质疑观点: - 用户gherkinnn批评Shadcn基于Radix的组件(如单选按钮)过于复杂,存在过度设计问题。 - "their Radix-based radio button was a bit much"(基于Radix的单选按钮过于复杂) - "overblown solutions were used"(使用了过度膨胀的解决方案)
- 用户chvid质疑复制粘贴方式(Shadcn)与传统UI库(如Mantine)的优劣,指出复制粘贴虽易修改但带来升级问题。
- "creates new problems - ie now there is an upgrade ai agent"(复制粘贴方式带来升级问题)
- "something that should just be ticking up a version number"(本应只需更新版本号)
其他讨论: - 用户dyllon关注从codemods向LLM迁移的转变,认为codemods可能被取代。 - "Moving away from codemods and towards LLMs doing migration work"(从codemods转向LLM迁移) - "I wonder if the days of codemods are numbered"(codemods可能时日无多)
用户8cvor6j844qw_d6询问Angular的Shadcn等效替代品,因PrimeNG许可变更。
- "What is the shadcn/ui equivalent for Angular?"(Angular的Shadcn等效替代品是什么?)
- "PrimeNG had a licensing change recently"(PrimeNG最近许可变更)
用户kcrwfrd_在Base UI与React Aria之间犹豫,寻求建议。
- "does anyone have an opinion on Base UI vs React Aria?"(Base UI与React Aria哪个更好?)
- "Trying to decide between the two atm"(目前正在两者间做选择)
平衡总结:评论呈现两极分化——部分用户高度认可Shadcn的易用性和质量,认为其将成为主流;另一部分则批评其组件过度设计、复制粘贴方式带来升级问题。同时,社区关注UI库选择(如Base UI、React Aria、Skeleton)及技术趋势(如LLM替代codemods)。