HeroUI（原 NextUI）：面向 React 的无障碍 UI 组件库
HeroUI 是前身为 NextUI 的生产级 React 组件库，将 React Aria 的无障碍能力与 Tailwind CSS v4 的工具类样式结合，提供复合组件 API、无需 Provider 包裹，并附带 MCP Server、llms.txt 与 Agent Skills 等 AI 原生开发工具，许可证为 MIT。
社区作者 · zZz
它解决什么问题
HeroUI（此前名为 NextUI）是一个可用于生产环境的 React 组件库，把 React Aria 的无障碍严谨性与 Tailwind CSS v4 的工具类优先样式结合在一起。它提供简洁的复合组件 API（如 Card.Header、Card.Content、Select.Item 等），不需要 <Provider> 包裹，并可在 React 19 与 Next.js 中开箱即用。配图 1 为 HeroUI v3 logo。
核心特性：
- 默认无障碍：基于 React Aria 构建，提供符合 WCAG 的键盘、焦点与屏幕阅读器行为。
- Tailwind CSS v4：使用现代引擎，无 CSS-in-JS 运行时，输出更小、构建更快。
- 复合组件：可组合的 API（Card.Header、Card.Content），替代深层嵌套的 props。
- 零样板代码：无需 Provider 包裹（不同于 Chakra、MUI）。
- AI 原生：提供 MCP server、llms.txt 与 agent skills，让 AI 助手理解你的组件。
- 久经考验：前身为 NextUI，被数千个生产应用使用。
包结构：@heroui/react 为完整组件包；@heroui/styles 仅包含样式/主题；另有个别组件包，例如 @heroui/button、@heroui/modal，支持按组件进行 tree-shaking 导入。
适用对象：需要开箱即用表单、表格、浮层与通知的 SaaS 应用；需要数据密集布局与一致设计令牌的仪表盘与管理后台；追求性能、无障碍与 SEO 友好的电商前台；无需重量级运行时即可获得精致 UI 的营销站点与落地页；以及任何重视设计质量与无障碍的 React / Next.js 项目。
AI 辅助开发：MCP Server（@heroui/react-mcp）可安装到 Cursor、Claude Code、Windsurf 或任意兼容 MCP 的编辑器中，让组件理解你的主题；llms.txt 位于 heroui.com/llms.txt，为 LLM 提供每个组件的结构化上下文；运行 npx heroui-cli agents-md 可为 Cursor、Claude Code 等安装 agent skills。
可配合 Cursor、Claude Code、Windsurf、GitHub Copilot 以及任何支持 MCP 或 llms.txt 的工具使用。
与其他库的差异：相比 shadcn/ui，HeroUI 是电池全包并带有一致的设计系统，shadcn 则是复制粘贴后自行定制；相比 MUI，HeroUI 更轻、Tailwind 原生、没有 CSS-in-JS 运行时开销；相比 Chakra UI，HeroUI 使用 React Aria（更强的无障碍原语）与 Tailwind v4（更好的性能）；相比 Mantine，HeroUI 具备 AI 工具链（MCP、llms.txt）并采用 Tailwind 优先的样式方案。
文档与资源：最新版（v3）文档在 heroui.com，v2 文档在 v2.heroui.com；全部组件的 Storybook 位于 storybook-v3.heroui.com；v3 路线图位于 herouiv3.featurebase.app/roadmap；设计资源为 HeroUI Figma Kit (v3)。社区渠道包括 Discord、X 与 GitHub Discussions；贡献指引见仓库 CONTRIBUTING.md，并需遵守 CODE_OF_CONDUCT。许可证为 MIT。
— 本文由 AI 根据公开来源辅助整理，命令、版本与许可证请在使用前到原始页面复核。
安装 / 开始使用
- 环境准备：使用 React 或 Next.js 项目，并已采用 Tailwind CSS v4；HeroUI 可在 React 19 与 Next.js 中开箱即用。来源未给出 Node.js 等运行环境的最低版本，待核验。
步骤 2 · 安装完整组件包：
npm install @heroui/react- 按需选择其他包：只需要样式/主题时安装 @heroui/styles；只使用单个组件时可安装对应单包（如 @heroui/button、@heroui/modal），以获得按组件 tree-shaking 的导入方式。
- 使用方式：HeroUI 无需 <Provider> 包裹（零样板代码），组件采用复合 API，例如 Card.Header、Card.Content、Select.Item。来源未提供完整的初始化示例代码，待核验。
- 首次运行与文档：按官方 Quick Start 指引接入，地址 https://heroui.com/docs/react/getting-started/quick-start 。
- AI 辅助开发（可选）：在 Cursor、Claude Code、Windsurf 或任意兼容 MCP 的编辑器中安装 MCP Server（@heroui/react-mcp）；LLM 结构化上下文见 https://heroui.com/llms.txt ；运行 npx heroui-cli agents-md 可为 Cursor、Claude Code 等安装 agent skills。
- 常见问题：来源页面未列出 FAQ 条目；如需帮助可通过 Discord、X 或 GitHub Discussions 反馈与提问；贡献前请阅读仓库 CONTRIBUTING.md，并遵守 CODE_OF_CONDUCT。
来源教程配图
