首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >这么牛逼的前端 UI 设计库必须了解下!

这么牛逼的前端 UI 设计库必须了解下!

作者头像
程序员老鱼
发布于 2023-08-10 02:05:52
发布于 2023-08-10 02:05:52
2.9K011
代码可运行
举报
文章被收录于专栏:前端实验室前端实验室
运行总次数:11
代码可运行

今天给大家推荐一个漂亮的前端 UI 设计库 NextUI,跟 NextJS 是同一家开发的,看起来很不错,Github上已有 10.7K Star。

NextUI

NextUI 是漂亮、快速和现代的 React UI 库。无论你的设计经验如何,它都可以让你制作漂亮的网站。

UI 的整体风格简洁大方,圆角设计用户体验友好。它不仅颜值能打,而且对开发者也十分友好,支持自定义默认主题、自定义组件样式、fully-typed、自动识别深色模式等功能。

功能特性

主题化: NextUI 提供一种自定义默认主题的简单方法,你可以快速的修改字体、颜色等你需要的一切。

快速: 在运行时消除不需要的道具,所以比其他 UI 库更高效;

切换主题: 自动深色模式识别,NextUI 检测到 HTML 主题道具变化时可以自动更改主题;

独特的 DX: NextUI 是全类型化的,上手简单,可以用更少的代码实现你的功能,有着良好的开发者体验;

除此之外,NextUI 还有非常多的特性,如:服务器端渲染 (SSR)、内置媒体查询、自定义组件,设计精美等等,如果你是基于 Next.js 来开发 Web 应用,那么 NextUI 是非常值得您考虑的 UI 库!

安装

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
yarn add @nextui-org/react

或 

npm i @nextui-org/react

代码示例

1. 暗黑主题

NextUI带有两种调色板模式,浅色(默认)和深色,通过设置类型使主题变暗。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { createTheme } from "@nextui-org/react"

const darkTheme = createTheme({
  type: 'dark',
  theme: {
    colors: {...}, // override dark theme colors
  }
});
2. 按钮
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { Button } from "@nextui-org/react";

# 默认样式
export default function App() {
  return <Button>Default</Button>;
}

# 禁用样式
export default function App() {
  return <Button disabled>Disabled</Button>;
}

UI库该有的组件它都有,NextUI在GitHub、Twitter和Discord上有一个广泛的社区,你可以加入并寻求帮助,分享你的反馈和技巧。

不妨来试一试吧~

Github地址:https://github.com/nextui-org/nextui

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2023-06-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端实验室 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
前端换肤的N种方案,请收下
原文链接:https://juejin.im/post/5e92ad7a518825736c5b91cd
ConardLi
2020/06/29
2.3K0
前端换肤的N种方案,请收下
聊聊 React 组件库的技术选型与设计
最近在业务中开发了一套定制化的 C 端组件库,在这个过程中遇到了一些组件库技术选型和设计的问题,在参考公司内外的多个组件库后确定了最终的方案。本文希望通过向读者介绍技术选型的过程中的方案比较和组件库设计中的考量,让读者在组件库的技术选型和设计上有所启发。
前端迷
2021/03/18
2.1K0
聊聊 React 组件库的技术选型与设计
深色模式适配指南
随着 iOS 13 的发布,深色模式(Dark Mode)越来越多地出现在大众的视野中,支持深色模式已经成为现代移动应用和网站的一个潮流,前段时间更是因为微信的适配再度引起热议。深色模式不仅可以大幅减少电量的消耗,减弱强光对比,还能提供更好的可视性和沉浸感。
政采云前端团队
2020/08/18
3K0
深色模式适配指南
Flutter中的Material Theme完全指南:从入门到实战
Flutter作为一款热门的跨平台开发框架,其UI组件库Material Design深受开发者喜爱。本文将深入探讨Flutter Material Theme的使用,包括如何借助Material Theme Builder创建符合产品需求的主题风格。通过多个场景和代码实例,让你轻松掌握这一工具。
井九
2024/11/19
4550
Flutter中的Material Theme完全指南:从入门到实战
基于react的组件库主题设计方案
单一的视觉不再满足用户体验需求,为提高用户体验,提高应用体验口碑,同时提高开发者效率,我们希望提高组件库的可定制化,因此提供换肤功能以及多种类组件中的样式定制功能,允许用户将应用切换不同主题风格的皮肤,也允许开发者对指定组件进行样式改造。
abigale
2020/07/16
7.7K1
如何在React.js中使用Shadcn/UI
学习如何在React.js中使用Shadcn/UI构建可自定义且轻量的界面。了解如何将其与Apipost集成,以实现高效的API管理和测试。非常适合希望提升React.js项目的开发者!
用户11531559
2025/02/28
9610
34K Star 的UI库,超神了!
虽然了不起没有在公司项目中用到这个三方库,但也看到不少项目在使用,简单看了下Chakra UI 确实也是个实用且美观的一个 UI 组件库。
程序员老鱼
2023/09/20
5650
34K Star 的UI库,超神了!
全网最详!暗黑模式在 Trip.com App 的实践
本文为联合撰稿,作者为携程国际业务研发部UED团队静静,公共研发团队祥星、旭仔、俊仔、增翼。
携程技术
2020/04/07
2.1K0
全网最详!暗黑模式在 Trip.com App 的实践
React 应用架构实战 0x2:构建和文档化组件
在 React 中,所有的东西都是组件。这种范式允许我们将用户界面拆分成更小的部分,从而更容易开发应用程序。它还启用了组件的可重用性,因为我们可以在多个地方重复使用相同的组件。
Cellinlab
2023/05/17
1K0
React 应用架构实战 0x2:构建和文档化组件
Nuxt3在使用Tailwindcss情况下,如何优雅实现深色模式切换?
随着前端更新,网站设计中,深色模式也成为了一种备受欢迎的设计趋势。可以帮助用户减少眼睛的负担,同时也更加适合在光线较暗的环境下使用。
Mintimate
2023/07/31
2.3K0
Nuxt3在使用Tailwindcss情况下,如何优雅实现深色模式切换?
Nuxt3全栈开发 · 配置篇
如果没有刻意提到的安装方式,则默认都是用 npx nuxi@latest module add xxxx 进行安装。
Aatrox
2025/01/24
3800
Nuxt3全栈开发 · 配置篇
32K star 的 Chakra UI,以及未来的展望
Hi,我是 ssh,最近一段时间,经常听说 Chakra UI 这个库,虽然没有在公司的项目里用过,但是从我短暂的了解来说,感觉是个兼顾优雅和实用的 UI 组件库,最近 Chakra UI 的作者 Segun Adebayo 发表了一篇文章,讲述了他对这个库未来的一些展望,给了我很多启发,接下来我给大家分享一下他的这篇The future of Chakra UI
ssh_晨曦时梦见兮
2023/10/14
7160
32K star 的 Chakra UI,以及未来的展望
前端框架与库 - Material-UI组件库
Material-UI 是一个基于 React 的 UI 组件库,它遵循 Google 的 Material Design 设计规范,提供了丰富的预构建组件,极大地简化了前端开发过程。本文将深入浅出地介绍 Material-UI 的常见问题、易错点及如何避免这些问题,并附带代码示例,帮助你更好地掌握 Material-UI 的使用技巧。
Jimaks
2024/07/20
6970
styled-components不完全手册
大家好,我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder
前端柒八九
2024/03/25
3140
styled-components不完全手册
2022年面向前端开发人员的9个最佳UI组件库/框架
如果你参与Web开发,很可能听说过UI组件库和CSS框架。UI组件库是一组预制样式(如字体、组件或颜色),可用于快速构建网站。这些UI组件使开发人员能够创建解决常见问题的代码——例如,创建适用于所有设备的按钮和组件,或添加已经为你设计的菜单和预构建元素,这样你就不必从头开始构建它们。在本文中,我们将探索在构建下一个项目时使用UI组件库或CSS框架的主要好处,然后我们将介绍一些目前市场上免费选项的绝佳选择!
程序员法医
2022/12/20
17.4K2
2022年面向前端开发人员的9个最佳UI组件库/框架
CSS闯关指南:从手写地狱到“类”积木之旅|得物技术
在Web开发网页设计中,CSS(层叠样式表)扮演着至关重要的角色,它用于控制网页的布局、外观和视觉效果。CSS不仅可以美化网页的视觉表现,还可以提高网页的可访问性、可维护性和响应式设计。在我们进行网页开发的时候,CSS是必不可少的一个环节。但是在早期的纯手写CSS阶段时会存在很多的痛点,这些痛点催生了 CSS 预处理工具(如 Sass/Less)和 CSS-in-JS 方案的兴起,进入工具曙光时代,但它们本质上仍未能突破"手动编写样式规则"的范式。直到原子化 CSS 理念的回归——通过预定义的实用类(Utility Classes)组合样式,配合智能化的工具链,为解决传统 CSS 困境提供了新的思路。
得物技术
2025/05/26
2060
CSS闯关指南:从手写地狱到“类”积木之旅|得物技术
ArcoDesign,字节跳动又一开源力作,企业级UI开源库,一个字“牛”!
ArcoDesign 主要解决在打造中后台应用时,让产品设计和开发无缝连接,提高质量和效率。
程序视点
2025/01/21
7330
颜值和功能皆不辜负,微信小程序原生语法组件库来了
Lin UI 是基于 微信小程序原生语法 实现的组件库。遵循简洁,易用的设计规范。Lin UI 致力于给小程序开发者提供愉悦的开发体验。
极乐君
2020/05/22
9070
颜值和功能皆不辜负,微信小程序原生语法组件库来了
丢人啊,工作 10 年了,才知道用这种方式实现 CSS 换肤
与之前的版本相比,在 React19 中,context 有一些细微的变化。主要体现在如下三个方面。
用户6901603
2024/05/17
2050
丢人啊,工作 10 年了,才知道用这种方式实现 CSS 换肤
Angular Material 的设计之美
Angular Material 作为 Angular 的官方组件库,无论是设计交互还是易用性都有着极高的质量。正如官方所说其目的就是构建基于 Angular 和 TypeScript 的高质量组件库。
叙帝利
2019/09/29
5.6K0
Angular Material 的设计之美
推荐阅读
相关推荐
前端换肤的N种方案,请收下
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档