简介
欢迎来到 HeroUI 文档!

什么是 HeroUI?
HeroUI 是一个 React UI 库,旨在帮助您构建美观且易于访问的用户界面。它基于 Tailwind CSS 和 React 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 UI、Flowbite 或 Preline(仅举几例),仅提供精选的 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,请参阅我们的贡献指南,了解如何为本项目做贡献。