Hacker News 中文摘要

RSS订阅

Shadcn/UI 现默认使用 Base UI 而非 Radix -- Shadcn/UI now defaults to Base UI instead of Radix

文章摘要

自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月 - 聊天界面组件

我们发布了一套用于构建聊天界面的新组件:MessageScrollerMessageBubbleAttachmentMarker

  • 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-2w-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)。