用途:HeroUI v3 是开源 UI 组件库,用于 React(Web)和 React Native(移动端)界面开发,基于 Tailwind CSS v4 与 React Aria Components,提供 75+ 无障碍可定制 Web 组件和 40+ 原生组件。
主要能力:Web 端覆盖按钮、表单、日期时间、导航、浮层、选择器、数据展示等类别;原生端覆盖按钮、表单、布局、浮层等。组件采用点号复合写法(如 Modal.Backdrop、Alert.Title),也支持 .Root 后缀和具名导出。样式提供三种方式:BEM 类名、类型安全的变体函数(如 buttonVariants,框架无关)、Tailwind 类名加 className。支持自定义变体、render prop 自定义元素、data 属性交互状态、useOverlayState 浮层状态管理,以及 native 与 aria 两种表单校验模式。
使用方式:Web 端执行 npm i @heroui/react @heroui/styles,在 globals.css 中按顺序 @import "tailwindcss" 与 @import "@heroui/styles",要求 React 19+ 与 Tailwind CSS v4。原生端安装 heroui-native 及 react-native-reanimated@^4.1.1、react-native-gesture-handler@^2.28.0、react-native-worklets@^0.5.1、react-native-safe-area-context@^5.6.0、react-native-svg@^15.12.1、tailwind-variants@^3.2.2、tailwind-merge@^3.4.0,并在 global.css 中引入 tailwindcss、uniwind、heroui-native/styles 及 @source 路径,用 HeroUINativeProvider 与 GestureHandlerRootView 包裹应用。事件使用 React Aria 的 onPress 而非原生 click。
适用场景:需要无障碍、可主题化的 React Web 或 React Native 项目。
限制:资料未提供收费、价格、性能数据或平台兼容性细节;具体组件属性、主题与迁移说明需查阅官方文档。