HeroUI 完全指南：由原 NextUI 改名而来，默认视觉就很漂亮的 React 组件库

HeroUI 就是原来的 NextUI，2025 年 1 月正式改名。改名不是为了重写，而是把目标从只服务 Next.js 扩展到整个 React 生态，同时避免被误认成 Next.js 官方项目。

它解决什么问题

NextUI 时期最容易被误会的一点：它和 Next.js 不是一家的。改名 HeroUI 后定位更清楚——任何 React 框架都能用，Astro、Remix、Vite、Laravel 都行。

它的强项是视觉默认值漂亮，渐变、玻璃拟态、暗色都做得很到位；但做超密集信息布局（比如大型数据表）不如 MUI / AntD 顺手。

核心能力

视觉优先库的使用边界

HeroUI 的卖点是默认就好看，很适合落地页、控制台外壳、消费级 App 这类重观感的产品；你少花时间在基础样式上，成品就有现代感。

但它不是为超密集数据场景设计的。如果你的界面是大量行、列、表单字段挤在一起的后台，MUI / AntD 的表格与表单能力更成熟，HeroUI 用起来会多费劲。

同类工具怎么选

谁适合用

• 做消费级产品、落地页，重视默认视觉质感的人
• 用 Vite / Astro / Remix 等非 Next.js 的 React 团队
• 想要一套漂亮暗色界面、少调样式的开发者

怎么开始

1. 用 npm install @heroui/react 安装（旧项目可用官方 codemod 从 @nextui-org 迁移）。
2. 项目需先有 Tailwind CSS v4，按文档把 HeroUI 插件加进配置。
3. 用 HeroUIProvider 包裹应用，即可使用 Button、Card 等组件。
4. 需要移动端就引入 HeroUI Native，复用相近的组件思路。
5. 暗色与主题按文档切换，玻璃拟态等效果多数为默认样式。

常见问题

和 Next.js 有关吗？
无关。原名 NextUI 只是历史，现改名 HeroUI，面向整个 React 生态。

迁移麻烦吗？
不麻烦。改名无破坏性变更，官方提供一条命令的 codemod 迁移工具。

和 Tailwind 关系？
v3 基于 Tailwind CSS v4，样式改起来走原子类；需先装 Tailwind。

适合做后台吗？
观感好，但密集数据表格不如 MUI / AntD，后台重表格慎选。

授权与合规

HeroUI 以 MIT 授权发布，可免费商用；它就是原 NextUI 改名而来，改名未引入破坏性变更，旧 @nextui-org 包仍可经 codemod 迁移。 官网：www.heroui.com。