# 介绍 · HeroUI

> 一个开源 UI 组件库，用于构建美观且易于访问的用户界面。

- 页面: https://jiguang132.com/zh/systems/heroui/docs/getting-started
- 改编自: HeroUI 文档 (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

HeroUI 是一个基于 [Tailwind CSS v4](https://tailwindcss.com/) 和 [React Aria Components](https://react-spectrum.adobe.com/react-aria/index.html) 构建的 React 组件库。每个组件都带有流畅的动画、精致的细节和内置的无障碍支持——开箱即用，完全可定制。


## 为什么选择 HeroUI？

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

**无障碍** — 基于 [React Aria Components](https://react-spectrum.adobe.com/react-aria/components.html) 构建，内置焦点管理、键盘导航和屏幕阅读器支持。

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

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

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

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

**面向未来** — 为 [React 19](https://react.dev/blog/2024/12/05/react-19) 和 [Tailwind v4](https://tailwindcss.com/blog/tailwindcss-v4) 而构建，专为 AI 辅助开发而设计。

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

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

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

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

## HeroUI 生态系统

- **🌐 HeroUI v3**（Web） — 你正在浏览的就是这里！基于 Tailwind CSS v4 的 React 组件
- **📱 [HeroUI Native](https://link.heroui.com/native)**（移动端） — 为 React Native 提供精美组件
- **🤖 [HeroUI Chat](https://heroui.chat?ref=heroui-v3)**（文本生成应用） — 用自然语言创建应用
- **🧠 面向 LLM 的 UI** — 全新平台与 MCP 即将推出

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

## 常见问题

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

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

**我可以定制组件吗？**
当然可以！你可以使用 Tailwind 工具类、CSS 变量、[BEM](https://getbem.com/) 修饰符，或以不同的方式组合组件。每一个插槽都可以定制。

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

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

**可以在不使用 React 的情况下使用样式吗？**
可以，CSS 可以应用于纯 HTML。请查看我们的 [Tailwind Play 示例](https://play.tailwindcss.com/vMYXzKPyUx)。

**有 Figma 文件吗？**
有！欢迎访问我们的设计系统：[HeroUI Figma Kit V3](https://www.figma.com/community/file/1546526812159103429)。

## 参与其中

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

- [GitHub Discussions](https://github.com/heroui-inc/heroui/discussions)
- [Discord](https://discord.gg/9b6yyZKmH4)
- [X/Twitter](https://x.com/hero_ui)
- [贡献指南](https://github.com/heroui-inc/heroui/blob/main/CONTRIBUTING.md)

HeroUI 基于 [Apache License 2.0](https://github.com/heroui-inc/heroui/blob/main/LICENSE) 协议发布。

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt