📰 AI 资讯

HeroUI v3 正式发布，针对 React 和 React Native 从头进行了重写，并基于 Tailwind CSS v4 构建

2026-07-08 13:33

<a href="https://heroui.com/" title data-type="link">HeroUI</a>（前身为 NextUI）是一款 React 组件库，现在<a href="https://heroui.com/docs/react/releases/v3-0-0" title data-type="link">已发布 HeroUI v3 版本</a>。该版本经过了彻底的重写，开发团队将其定位为适用于 Web 和原生应用的统一设计系统。这个于 2026 年 3 月发布的版本包含超过 75 个 Web 组件（其中 21 个为新增组件），同时还提供了一个从零开始构建的全新的 React Native 库，内含 37 个组件。HeroUI v3 基于 <a href="https://react-spectrum.adobe.com/react-aria/" title data-type="link">React Aria Components</a> 实现了无障碍功能，并采用 <a href="https://tailwindcss.com/" title data-type="link">Tailwind CSS v4</a> 进行了样式设计，同时为方便自定义，提供了 CSS 变量、OKLCH 颜色和 BEM 修饰符。所有动画均已迁移至 CSS，不需要 JavaScript 运行时支持。该库采用了复合组件 API，摒弃了旧版的 provider 包装器，并且可完美兼容 React 19 和 Next.js 。这次重写还大量采用了 AI 辅助开发，并提供了 <a href="https://heroui.com/docs/react/getting-started/mcp-server" title data-type="link">MCP 服务器</a>、Agent Skills 以及 llms.txt 文件，从而使编码助手能够直接读取组件文档。此外，本次重写还提供了一个与组件完全一致的 <a href="https://www.figma.com/community/file/1546526812159103429/heroui-figma-kit-v3" title data-type="link">Figma Kit v3</a>。目前在 <a href="https://www.npmjs.com/package/@heroui/react" title data-type="link">npm</a> 上，核心包 @heroui/react 的每周下载量约为 341000 次，独立的 heroui-native 包每周新增下载量约 11000 次，其 <a href="https://github.com/heroui-inc/heroui" title data-type="link">GitHub 存储库</a>的星标数已接近 27700 个。自 3.0 版本以来，该组件库已经发布了多个小版本更新。<a href="https://heroui.com/docs/react/releases/v3-0-3" title data-type="link">v3.0.3</a> 版本将 React Aria Components 升级至 1.17.0，并且为了加快安装速度，移除了约 90% 的传递依赖项，同时还新增了一个排版组件。5 月下旬发布的 <a href="https://heroui.com/en/docs/react/releases/v3-1-0" title data-type="link">v3.1.0</a> 版本新增了中文文档，扩展了柔和色彩 Token，引入了可共享的主题滚动条系统，并修复了 useTheme 的 SSR 问题。<a href="https://github.com/heroui-inc/heroui/releases" title data-type="link">v3.2.0</a> 版本于 2026 年 6 月 16 日发布，作为当前的主线版本，官方承诺将按月发布小版本。在 <a href="https://www.reddit.com/r/reactjs/comments/1u87zmy/heroui_v3_is_it_just_me/" title data-type="link">Reddit</a> 上，一位 NextUI 和 v2 的长期用户发帖称赞了主题页面和文档，但也遗憾地表示，v3 中的输入标签动画、预置单元和自动补全这三项功能“全都不见了”：我刚刚开始在一个新项目中使用 v3 。主题页面很漂亮，文档也一如既往地精准到位，但我总能发现一些我在 v2 中非常喜欢的功能在这个版本中没有了……输入框标签的动画选项、将单元预置到标签中的功能、自动补全功能……全都不见了。在 <a href="https://github.com/heroui-inc/heroui/discussions/6080" title data-type="link">GitHub</a> 上，开发者们针对路线图以及导航栏（Navbar）等缺失的功能提出了质疑，其中一位评论者指出：“项目时间表确实缺乏透明度。”从 v2 迁移的团队应该仔细规划，因为 v2 和 v3 无法在同一个项目中共存。<a href="https://heroui.com/docs/react/migration" title data-type="link">官方迁移指南</a>提供了<a href="https://heroui.com/docs/react/migration/full-migration" title data-type="link">全量迁移</a>和<a href="https://heroui.com/docs/react/migration/incremental-migration" title data-type="link">增量迁移</a>两种路径，并由专用的迁移 MCP 服务器提供支持。此外，有些组件（如 Image）已经被完全移除，转而使用原生元素进行了替代。HeroUI 是一个由 Junior García 创建、获得 Y Combinator 支持的、可用于生产环境的开源 React 和 React Native 组件库，遵循 Apache 2.0 许可。感兴趣的读者可以在 <a href="https://github.com/heroui-inc/heroui/releases" title data-type="link">GitHub</a> 上查阅完整的发布说明。原文链接：<a href="https://www.infoq.com/news/2026/07/heroui-v3-rewrite/" title data-type="link">https://www.infoq.com/news/2026/07/heroui-v3-rewrite/</a>

🔗 查看原文 ↗

← 返回资讯列表