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

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

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

相关推荐
程序视点2 分钟前
IObit Uninstaller Pro专业卸载,免激活版本,卸载清理注册表,彻底告别软件残留
前端·windows·后端
前端程序媛-Tian22 分钟前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
嘉琪00130 分钟前
实现视频实时马赛克
linux·前端·javascript
烛阴1 小时前
Smoothstep
前端·webgl
若梦plus1 小时前
Eslint中微内核&插件化思想的应用
前端·eslint
爱分享的程序员1 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉1 小时前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro
若梦plus1 小时前
Webpack中微内核&插件化思想的应用
前端·webpack
若梦plus1 小时前
微内核&插件化设计思想
前端
柯北(jvxiao)1 小时前
搞前端还有出路吗?如果有,在哪里?
前端·程序人生