探探React-找一个好看的组件库HeroUI(原NextUI)

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样式时使用了这一套。

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

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

相关推荐
10年前端老司机几秒前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星1 分钟前
vue实现微信聊天emoji表情
前端·javascript
停止重构3 分钟前
【方案】前端UI布局的绝技,响应式布局,多端适配
前端·网页布局·响应式布局·grid布局·网页适配多端
極光未晚3 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
ze_juejin4 分钟前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
lichenyang4536 分钟前
React项目(移动app)
前端
用户61848240219517 分钟前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端
美团技术团队19 分钟前
报名 | 美团技术沙龙第86期:多业务场景下,美团如何做性能优化
前端
Rrvive1 小时前
localhost 和 127.0.0.1 的核心区别
前端
蓝倾1 小时前
如何使用Python通过API接口批量抓取小红书笔记评论?
前端·后端·api