介绍

HeroUI 是一个基于 Tailwind CSS v4 和 React Aria Components 构建的 React 组件库。每个组件都带有流畅的动画、精致的细节和内置的无障碍支持——开箱即用，完全可定制。

<DocsImage src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/heroui-og_2x.jpg" darkSrc="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/heroui-og-black_2x.jpg" alt="HeroUI v3 简介" />

为什么选择 HeroUI？

默认美观 — 开箱即用，外观专业，无需额外样式配置。

无障碍 — 基于 React Aria Components 构建，内置焦点管理、键盘导航和屏幕阅读器支持。

灵活 — 每个组件都由可定制的部件组成。按需修改，其余保持不动。

开发者友好 — 完整的类型化 API、可预期的模式以及出色的自动补全。

持续维护 — 我们负责处理更新、错误修复和新功能。你只需更新依赖包。

轻量级 — 支持 Tree Shaking，只把你实际使用的部分打包到应用中。

面向未来 — 为 React 19 和 Tailwind v4 而构建，专为 AI 辅助开发而设计。

一个精心打造的组件库，而非复制粘贴

复制粘贴的代码能用，直到它出问题为止。你将不得不维护那些不再演进的过时依赖。

HeroUI 则不同，它是与你共同演进的组件库：

• 自动更新和修复
• 无需额外工作即可获得新功能
• 组件与 React、Tailwind 和浏览器保持同步
• 深度定制，而非浅层主题调整
• 面向代码生成的 AI 友好 API

HeroUI 生态系统

• 🌐 HeroUI v3（Web） — 你正在浏览的就是这里！基于 Tailwind CSS v4 的 React 组件
• 📱 HeroUI Native（移动端） — 为 React Native 提供精美组件
• 🤖 HeroUI Chat（文本生成应用） — 用自然语言创建应用
• 🧠 面向 LLM 的 UI — 全新平台与 MCP 即将推出

为什么选择 React Aria？ 我们选择 React Aria 是为了大规模实现无障碍能力。从 HeroUI v2 起我们就在使用它，v3 也保留了熟悉的 API 约定，例如 isDisabled 和 onPress。感谢 Devon Govett 以及 Adobe 团队。

常见问题

HeroUI 免费吗？ 是的，基于 Apache License 2.0 完全免费且开源。

可以用于生产环境吗？ 可以。HeroUI v3 已经稳定，可放心用于生产环境。

我可以定制组件吗？ 当然可以！你可以使用 Tailwind 工具类、CSS 变量、BEM 修饰符，或以不同的方式组合组件。每一个插槽都可以定制。

它支持 TypeScript 吗？ 完全类型化，提供出色的 IDE 支持和自动补全。

无障碍能力如何？ 基于 React Aria Components 构建，符合 WCAG 标准。内置键盘导航、焦点管理和屏幕阅读器支持。

可以在不使用 React 的情况下使用样式吗？ 可以，CSS 可以应用于纯 HTML。请查看我们的 Tailwind Play 示例。

有 Figma 文件吗？ 有！欢迎访问我们的设计系统：HeroUI Figma Kit V3。

参与其中

加入社区、分享反馈或参与贡献：

• GitHub Discussions
• Discord
• X/Twitter
• 贡献指南

HeroUI 基于 Apache License 2.0 协议发布。