HeroUI 是个 React UI 组件库，能帮你快速做出好看又好用的界面。底层基于 Tailwind CSS（css小白来说超好用） 和 React Aria（搞不懂，小白开发好像也没用到），主打省时省力，设计灵活，用户体验棒。很容易就能搭建出主题切换，且dark模式酷炫了的前端框架，本人使用中只有在React新的使用方式上稍微纠结下，剩下都是随用随贴。
先看看这UI酷不酷
主页在这里：HeroUI (Previously NextUI)
就是这么丝滑圆润简洁，最最最主要是好写，贴上去改改大小完事。
怎么从头开始
安装手册在这里：Installation
在这里我们使用组件库提供的脚手架初始化工程开始，中间想修改的童鞋请自己查看资料。
安装
npm install -g heroui-cli
初始化
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的文件。
cd my-heroui-app && npm install
npm run dev
启动完工。
文件主要目录介绍
初始化的项目结构 路由在APP.tsx中，对应的引用页面在pages中，大家可以自行修改，因为使用了Tailwind CSS,代码和目录都减少了不少。
页面改造在DefaultLayout中进行即可，就有了基本的路由迁移和基础布局。
pro版本怎么白嫖
pro的主页：HeroUI Pro HeroUI有着官方封装的常用组件，样式都比较精美，包括统计相关组件、AI聊天框、表格商品等完整的组件，当时也是为了做大模型相关找UI样式时使用了这一套。
以及其他组件，大家可以自行查看
但是，要想官方授权，费用会比较高。大家可以留言，私发给大家
