Hero UI

Appearance

介绍 ​

欢迎来到 HeroUI 非官方文档！

HeroUI 横幅

什么是 HeroUI？ ​

HeroUI 是一个基于 Tailwind CSS 和 React Aria 的 React UI 组件库，帮助你快速构建美观且可访问的用户界面。

HeroUI 的主要目标是简化开发流程，提供美观且灵活的系统设计，提升用户体验。

常见问题 ​

这是官方的文档吗？ ​

不是，基于o4-mini重写的中文文档，参考了原文档，源代码。

HeroUI 是一个复制粘贴型的库吗？ ​

不是，HeroUI 不是复制粘贴型的库。所有组件都可以通过 npm 单独或整体安装使用。

支持的框架？ ​

支持 Remix，Next.js，Vite，Astor，Laravel。

HeroUI 与 TailwindCSS 有什么不同？ ​

  • TailwindCSS：

    Tailwind CSS 是一个 CSS 框架，提供原子级 CSS 类，帮助你为组件添加样式，但你需要自己处理可访问性、组件组合、键盘导航、样式覆盖等问题。

  • HeroUI：

    HeroUI 是一个结合了 TailwindCSS 与 React Aria 的 React UI 库，提供完整的组件（包含逻辑和样式），用于构建可访问且可定制的用户界面。由于 HeroUI 使用 TailwindCSS 作为样式引擎，你可以在 HeroUI 组件中使用所有 TailwindCSS 类，确保生成的 CSS 体积最优。

HeroUI 与 TailwindCSS 组件库有何不同？ ​

TailwindCSS 组件库如 TailwindUI、Flowbite 或 Preline 等，仅提供精选的 TailwindCSS 样式类用于组件样式，并不包含任何 React 组件、逻辑、属性、组合或可访问性特性。

相比之下，HeroUI 是一个完整的 UI 库，提供一套可访问且可定制的组件、hooks 和工具方法。

HeroUI 如何处理 TailwindCSS 类冲突？ ​

我们开发了一个名为 tailwind-variants 的 TailwindCSS 工具库，可自动处理 TailwindCSS 类冲突，确保你的自定义类始终覆盖默认类，避免重复。

HeroUI 使用运行时 CSS 吗？ ​

不会。HeroUI 以 TailwindCSS 作为样式引擎，CSS 在构建时生成，无需运行时 CSS。这意味着 HeroUI 完全兼容最新的 React 和 Next.js 版本。

HeroUI 支持 TypeScript 吗？ ​

是的，HeroUI 使用 TypeScript 编写，并且完全支持 TypeScript。

我可以在 Vue 或 Angular 等其他前端框架中使用 HeroUI 吗？ ​

不可以，HeroUI 专为 React 设计，基于 React Aria 构建。但你仍然可以在其他框架中使用 HeroUI 的样式部分。

为什么 HeroUI 使用 Framer Motion？ ​

我们使用 Framer Motion 为部分组件实现动画，因为其动画复杂且基于物理特性。Framer Motion 能让我们更简单高效地处理这些动画，并且经过充分测试，适合生产环境。

社区 ​

我们非常欢迎社区用户使用 HeroUI、提出问题和反馈建议。无论是功能请求、bug 报告还是项目展示，都欢迎参与！

贡献 ​

欢迎为 HeroUI 提交 PR，详情请参阅我们的贡献指南，了解如何参与项目贡献。