探探React-找一个好看的组件库HeroUI（原NextUI）

Hanbox2025-06-06 10:12

HeroUI 是个 React UI 组件库，能帮你快速做出好看又好用的界面。底层基于 Tailwind CSS（css小白来说超好用）和 React Aria（搞不懂，小白开发好像也没用到），主打省时省力，设计灵活，用户体验棒。很容易就能搭建出主题切换，且dark模式酷炫了的前端框架，本人使用中只有在React新的使用方式上稍微纠结下，剩下都是随用随贴。

先看看这UI酷不酷

主页在这里：HeroUI (Previously NextUI)

就是这么丝滑圆润简洁，最最最主要是好写，贴上去改改大小完事。

怎么从头开始

安装手册在这里：Installation

在这里我们使用组件库提供的脚手架初始化工程开始，中间想修改的童鞋请自己查看资料。

安装

script 复制代码

npm install -g heroui-cli

初始化

script 复制代码

heroui init my-heroui-app

◇ Select a template (Enter to select)
│ ○ App (A Next.js 14 with app directory template pre-configured with HeroUI (v2) and Tailwind CSS.)
│ ○ Pages (A Next.js 14 with pages directory template pre-configured with HeroUI (v2) and Tailwind CSS.)
│ ● Vite (A Vite template pre-configured with HeroUI (v2) and Tailwind CSS.)

在这里我们熟悉vue的童鞋选Vite项目即可，因为使用第一个Next.js时会有挺多不同，至少能build出可以放到cdn的文件。

script 复制代码

cd my-heroui-app && npm install
npm run dev

启动完工。

文件主要目录介绍

初始化的项目结构路由在APP.tsx中，对应的引用页面在pages中，大家可以自行修改，因为使用了Tailwind CSS,代码和目录都减少了不少。

页面改造在DefaultLayout中进行即可，就有了基本的路由迁移和基础布局。

pro版本怎么白嫖

pro的主页：HeroUI Pro HeroUI有着官方封装的常用组件，样式都比较精美，包括统计相关组件、AI聊天框、表格商品等完整的组件，当时也是为了做大模型相关找UI样式时使用了这一套。

以及其他组件，大家可以自行查看

但是，要想官方授权，费用会比较高。大家可以留言，私发给大家