HeroUI

HeroUI是什么？

HeroUI（原 NextUI）是一个基于Tailwind CSS的优美快速又现代的 React UI 库，支持使用自定义主题、自动调节亮色/暗色模式、基于 React Aria 满足易用标准、类型安全及提供多种包的形式，，含 210 + 预制组件的 Pro 版本，并且兼容 Next.js 新目录结构。

主要功能特点

• ​​基于 Tailwind CSS​​：无运行时样式依赖，直接使用 utility class 来构建组件，代码量小、易于自定义。
• 自动暗黑模式识别：监听 HTML 的主题属性，并进行自动换肤。 
• ​​丰富的组件库​​：默认提供了 200+ 常用交互场景入库，比如常用的各种按钮、表单、导航条等等。同时也集成了暗黑和响应式体系。
  
• 高性能与轻量化​​：一次加载一个组件，而不是代码包，节约资源快人一步。
  
• ​​模块化与可定制​​：设计系统色彩（背景色、文字等），搭配 Tailwind 插件可以完善当前的色卡，轻松实现无缝移植品牌风格定制方案。
• 无障碍兼容​​：遵循 WCAG 标准，确保键盘导航、屏幕阅读器等辅助功能可用。

组件定制能力

基于 Tailwind Variants，我们可以利用插槽来自定义样式避免类冲突。（按钮自定义样式的例子：hover 动画、阴影）

组件支持 ** polymorphic as prop**，可覆盖组件标签（如将按钮渲染为链接）。

常见问题解答（FAQ）

Q1：HeroUI 如何定制主题？

A1: 自带 Tailwind CSS 插件，只需在 tailwind.config.js 中添加上 heroui 模块即可修改 light 和 dark 的语义（颜色、背景），或新建一个主题。

Q2：HeroUI 的可访问性体现在哪些方面？

A2：基于 React Aria，并遵循 WAI-ARIA 规范，支持键盘导航、焦点管理、屏幕阅读器、碰撞感知和对齐控制；只有在通过键盘或屏幕阅读器进行导航时才会出现焦点环；残障人士也可无障碍使用。

Q3：HeroUI Pro 版本提供哪些核心资源？

A3: HeroUI Pro 拥有 210+ 响应式预制组件、无限使用权、随时更新和 Figma 文档，助您快速搭建自己的项目。