为什么选择 HeroUI？
HeroUI（原名 NextUI）是一个生产就绪的 React 组件库，它将 React Aria 的严格可访问性与 Tailwind CSS v4 的实用优先样式相结合。它提供了一个简洁的复合组件 API（Card.Header、Card.Content、Select.Item 等），无需<Provider> 包装器，并原生支持 React 19 和 Next.js。
默认可访问 — 基于 React Aria 构建，实现符合 WCAG 标准的键盘、焦点和屏幕阅读器行为
Tailwind CSS v4 — 现代引擎，无 CSS-in-JS 运行时，更小的输出，更快的构建
复合组件 — 可组合的 API（
Card.Header、Card.Content）替代深层嵌套的属性零样板代码 — 无需 Provider 包装器（与 Chakra、MUI 不同）
AI 原生 — MCP 服务器、
llms.txt和代理技能，让 AI 助手理解你的组件久经考验 — 原名 NextUI，受到数千个生产级应用的信任
快速开始
访问 heroui.com/docs/react/getting-started/quick-start 开始使用 HeroUI。
npm install @heroui/react适用人群？
如果你正在构建以下项目，HeroUI 是理想选择：
SaaS 应用 — 开箱即用的表单、表格、弹窗和通知
仪表盘和管理面板 — 数据密集的布局，搭配一致的设计令牌
电商前端 — 高性能、可访问、对 SEO 友好的组件
营销网站和落地页 — 精致的 UI，无需繁重的运行时
任何 React / Next.js 项目 只要注重设计质量和可访问性
AI 驱动的开发
HeroUI 专为 AI 辅助开发工作流而构建。
工具 | 功能 |
|---|---|
MCP 服务器（ | 能理解你的主题的组件——在 Cursor、Claude Code、Windsurf 或任何兼容 MCP 的编辑器中安装该服务器 |
llms.txt | 可在 heroui.com/llms.txt 获取——为 LLM 提供关于每个组件的结构化上下文 |
代理技能 | 运行 |
可与 Cursor、Claude Code、Windsurf、GitHub Copilot 以及任何支持 MCP 或 llms.txt 的工具配合使用。
对比
库 | 与 HeroUI 的区别 |
|---|---|
shadcn/ui | HeroUI 开箱即用，具备一致的设计系统；shadcn 是复制粘贴自定义 |
MUI | HeroUI 更轻量，原生 Tailwind，无 CSS-in-JS 运行时开销 |
Chakra UI | HeroUI 使用 React Aria（更强的可访问性原语）和 Tailwind v4（更好的性能） |
Mantine | HeroUI 具备 AI 工具（MCP、llms.txt），优先使用 Tailwind 样式 |
