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 設計文件，可以幫助開發者快速搭建項目。