简介

欢迎来到 HeroUI 文档!

HeroUI banner

什么是 HeroUI?

HeroUI 是一个 React UI 库,旨在帮助您构建美观且易于访问的用户界面。它基于 Tailwind CSSReact Aria 构建。

HeroUI 的主要目标是简化开发流程,提供美观且适应性强的系统设计,以提升用户体验。


常见问题

HeroUI 是一个复制粘贴库吗?

不,HeroUI 不是一个复制粘贴库。所有组件都可以通过 npm 获取,并且可以单独安装或作为完整包安装。

HeroUI 与 Tailwind CSS 有什么不同?

  • Tailwind CSS:

    Tailwind CSS 是一个 CSS 框架,它提供原子 CSS 类来帮助您样式化组件,但您还需要处理许多其他事情,例如可访问性、组件组合、键盘导航、样式覆盖等。

  • HeroUI:

    HeroUI 是一个 React UI 库,它结合了 Tailwind CSS 和 React Aria 的强大功能,提供完整的组件(逻辑和样式),用于构建可访问且可定制的用户界面。由于 HeroUI 使用 Tailwind CSS 作为其样式引擎,您可以在 HeroUI 组件中使用所有 Tailwind CSS 类,从而确保最佳的编译 CSS 大小。

HeroUI 与 Tailwind CSS 组件库有什么不同?

Tailwind CSS 组件库,例如 Tailwind UIFlowbitePreline(仅举几例),仅提供精选的 Tailwind CSS 类来样式化您的组件。它们不提供任何 React 特定的组件、逻辑、props、组合或可访问性功能。

与这些库相比,HeroUI 是一个完整的 UI 库,提供一套可访问且可定制的组件、hooks 和实用工具。

HeroUI 如何处理 Tailwind CSS 类冲突?

我们创建了一个名为 tailwind-variants 的 Tailwind CSS 实用工具库,它可以自动处理 Tailwind CSS 类冲突。这确保您的自定义类将始终如一地覆盖默认类,从而消除任何重复。

HeroUI 使用运行时 CSS 吗?

不。由于 HeroUI 使用 Tailwind CSS 作为其样式引擎,它在构建时生成 CSS,从而消除了对运行时 CSS 的需求。这意味着 HeroUI 完全兼容最新的 React 和 Next.js 版本。

HeroUI 支持 TypeScript 吗?

是的,HeroUI 是用 TypeScript 编写的,并且完全支持它。

我可以将 HeroUI 与其他前端框架或库(例如 Vue 或 Angular)一起使用吗?

不,HeroUI 专为 React 设计,因为它构建于 React Aria 之上。但是,您仍然可以将 HeroUI 组件的样式部分与其他框架或库一起使用。

为什么 HeroUI 使用 Framer Motion?

由于动画的复杂性和基于物理的特性,我们使用 Framer Motion 来动画化一些组件。Framer Motion 使我们能够以更直接和高性能的方式处理这些动画。此外,它经过了充分的测试,并且已准备好用于生产环境。


社区

我们很高兴看到社区采用 HeroUI,提出问题并提供反馈。无论是功能请求、错误报告还是要展示的项目,请积极参与!

贡献

我们始终欢迎在 HeroUI 上提交 PR,请参阅我们的贡献指南,了解如何为本项目做贡献。