NextUI:模块化 高效美观的 UI 组件库

科技   2024-12-03 18:36   湖北  


文章底部获取项目地址



NextUI 是一个基于 React 的 UI 组件库,旨在构建易于访问的用户界面系统。它建立在 Tailwind CSS 和 React Aria 之上,可以帮助开发者简化开发流程,NextUI 使用 Framer Motion 作为组件的动画解决方案,目前 GitHub Star 22k+。
部分组件预览:
组件安装使用:
// cli 方式安装
npx nextui-cli@latest add button
// 手动安装
npm install @nextui-org/button
// import 引入
import { Button } from "@nextui-org/react";
export default function App() {
 return (
   <Button color="primary">
     Button
   </Button>

 );
}
布局定制:
NextUI 提供了多种布局定制选项,允许你调整间距单位、字体大小、行高、圆角等,以个性化每个主题,定制样式会应用到每个组件中。
module.exports = {
 plugins: [
   nextui({
     layout: {}, // 通用布局选项
     themes: {
       light: {
         layout: {}, // 浅色主题布局选项
         // ...
       },
       dark: {
         layout: {}, // 深色主题布局选项
         // ...
       },
       // ... 自定义主题
     },
   }),
 ],
};
功能和特性:
自定义主题能力:NextUI 提供了一个定制的 TailwindCSS 插件,允许开发者自定义默认主题或创建全新的主题。支持语义标记的全面自定义。
基于 Tailwind CSS:构建在 Tailwind CSS 之上,利用其强大的实用工具类系统,实现无运行时样式和无多余类。
自动暗色模式识别:NextUI 支持自动检测 HTML 主题属性变化,并根据检测结果自动切换主题,实现真正的响应式暗色模式。
完全类型化:NextUI 提供了完整的类型定义,帮助开发者减少学习曲线,提供更好的开发体验。
模块化:NextUI 的每个组件都被设计为一个独立的模块。这种模块化方法允许开发者只导入和使用他们需要的部分,从而实现更轻量级的应用和更快的加载时间。

《前端资源推荐》公众号收集各种前端组件 UI 框架、JS 插件工具、中后台系统模板、动画库、低代码、可视化资源、开源项目、学习资源、特效源码等,如有其他优秀资源,欢迎发消息投稿,感谢点赞、在看、转发、关注!!!

其他推荐


Uppy:支持断点续传 模块化的文件上传库

kkFileView:支持数十种文件格式预览开源工具库

Arco Design Mobile:字节新开源移动端 UI 组件库

V3 Admin Vite:低成本上手 中后台管理系统模板

Vxe Table:Vue3 支持超大数据量渲染的表格组件

F2:蚂蚁开源 跨平台多端可视化图表

勾股 OA:开源 企业办公管理系统

Fabricjs:交互式 canvas 图形绘制库

项目地址


GitHub:https://github.com/nextui-org/nextui

官方文档:https://nextui.org/docs/guide/introduction

前端资源推荐
推荐分享各种前端组件UI、插件工具、中后台系统、低代码、可视化、开源项目、学习资源、特效源码等
 最新文章