Repolode
提交项目
heroui-inc

heroui-inc/heroui

基于 React Aria 与 Tailwind CSS v4 构建的 React UI 组件库，前身为 NextUI。

在 GitHub 查看官网
Star
30,968
Fork
2,237
未关闭 Issue
24
最近提交
前天

这是什么？

HeroUI 是一个 React 组件库，将 React Aria 的无障碍交互基础能力与 Tailwind CSS v4 的样式方案结合在一起。它采用复合组件写法，例如 Card.Header、Select.Item，应用中无需包裹 Provider。库支持 React 19 和 Next.js，既可以安装完整包，也可以按组件单独引入以利用 tree-shaking。

适合用 React 开发 SaaS 应用、后台管理面板、电商页面和营销站点的团队。样式基于 Tailwind，不依赖 CSS-in-JS 运行时，主题也可以通过单独的样式包使用。项目还提供 MCP 服务、llms.txt 文件以及面向 Cursor、Claude Code 等 AI 编程工具的 agent skills。

HeroUI 是 NextUI 的 v3 版本。v2 文档仍保留在独立站点上，方便已有项目参考。

核心功能

  • 01基于 React Aria 实现键盘、焦点和屏幕阅读器等无障碍交互
  • 02采用 Tailwind CSS v4 样式，不依赖 CSS-in-JS 运行时
  • 03提供 Card.Header、Select.Item 等复合组件 API
  • 04无需 Provider 包裹，支持 React 19 与 Next.js
  • 05按组件拆分的包支持 tree-shaking，并提供独立样式包
  • 06提供 MCP 服务、llms.txt 和 agent skills，便于 AI 编程助手使用

适用场景

  • 开发包含表单、表格、弹层和通知的 SaaS 应用
  • 搭建使用统一设计令牌的后台管理面板
  • 用 Next.js 开发注重无障碍的营销页或落地页
  • 将 NextUI 项目迁移到 v3 API

快速上手

  1. 1

    访问 HeroUI 快速入门文档

  2. 2

    安装样式包和 React 组件包

    npm install @heroui/styles @heroui/react

使用前须知

  • 当前 v3 版本的文档仍在完善中，较旧版本需参考单独的 v2 文档站点。

标签

#react#component-library#tailwind-css#accessibility#ui-components#nextjs#typescript#components#library#reactjs

常见问题

heroui 是什么？
基于 React Aria 与 Tailwind CSS v4 构建的 React UI 组件库，前身为 NextUI。 HeroUI 是一个 React 组件库，将 React Aria 的无障碍交互基础能力与 Tailwind CSS v4 的样式方案结合在一起。它采用复合组件写法，例如 Card.Header、Select.Item，应用中无需包裹 Provider。库支持 React 19 和 Next.js，既可以安装完整包，也可以按组件单独引入以利用 tree-shaking。
heroui 可以免费使用吗？用的什么许可证？
heroui 以 Apache-2.0 许可证开源。用于商业产品前，请先确认许可证条款。
heroui 还在维护吗？
活跃维护中。heroui 最近一次提交是在 2026年10月18日。
heroui 适合用来做什么？
开发包含表单、表格、弹层和通知的 SaaS 应用 搭建使用统一设计令牌的后台管理面板 用 Next.js 开发注重无障碍的营销页或落地页 将 NextUI 项目迁移到 v3 API
heroui 怎么安装和运行？
访问 HeroUI 快速入门文档 安装样式包和 React 组件包: npm install @heroui/styles @heroui/react
在哪里获取 heroui？
源代码和安装说明在 GitHub 上：https://github.com/heroui-inc/heroui

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目