HeroUI

HeroUI简介

HeroUI是什么？

HeroUI（原 NextUI）是一个基于 Tailwind CSS 的美观、快速且现代的 React UI 库，支持主题定制、明暗模式自动切换，基于 React Aria 实现高可访问性，提供类型安全的开发体验和多包结构，含 210 + 预制组件的 Pro 版本，并且兼容 Next.js 新目录结构。

HeroUI主要特点

• 基于 Tailwind CSS：使用 Tailwind CSS 作为样式引擎，无运行时样式，不会在你的包中产生不必要的类。

• 自动暗黑模式识别：能够自动识别 HTML 主题属性的变化，从而自动切换主题。

• 完全类型化：提供完全类型化的 API，最小化学习曲线，帮助开发者快速上手。

• 组件解耦：组件分为多个包，可只安装所需的组件。

• 遵循 WAI-ARIA 指南：组件遵循 WAI-ARIA 指南，提供键盘支持和合理的焦点管理。

• 预建模板丰富：提供超过 210+ 个漂亮的响应式组件。

HeroUI核心功能

主题系统

• 提供 Tailwind CSS 插件，支持修改默认主题的语义标记（如颜色、背景）或创建全新主题，示例代码展示了不同主题的主色配置（如primary: "#0072f5"）。

• 支持自动明暗模式切换，检测 HTML 的dark属性自动切换主题，只需在根标签添加属性即可启用默认深色主题。

性能

• 基于 Tailwind CSS，无运行时样式，打包时剔除未使用类，保证轻量快速。

• 全类型化 API（TypeScript 支持），降低学习曲线，支持 React Server Components（组件含"use client"指令，可直接在 RSC 中使用）。

• 多包结构设计，允许开发者按需安装组件，减少冗余依赖。

可访问性（Accessibility）

• 基于 React Aria 构建，遵循 WAI-ARIA 标准，内置键盘导航、焦点管理、屏幕阅读器支持等功能，焦点环仅在键盘或屏幕阅读器导航时显示。

组件定制能力

• 基于 Tailwind Variants，支持通过插槽定制组件样式，避免类冲突。示例代码展示了自定义按钮的样式配置（如悬停动画、阴影效果）。

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

HeroUI常见问题

HeroUI 如何定制主题？

答：通过内置的Tailwind CSS插件，在tailwind.config.js中配置heroui插件，可修改light和dark主题的语义标记（如颜色、背景），甚至创建全新主题。

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

答：基于 React Aria 构建，遵循 WAI-ARIA 标准，支持键盘导航、焦点管理、屏幕阅读器支持、碰撞感知和对齐控制，焦点环仅在键盘或屏幕阅读器导航时显示，残障用户也可以无障碍地使用。

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

答：HeroUI Pro 包含210 + 响应式预制组件、终身访问权限、免费更新及 Figma 设计文件，可以帮助开发者快速搭建项目。