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

今天给大家推荐一个漂亮的前端 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 库！

安装

yarn add @nextui-org/react

或 

npm i @nextui-org/react

代码示例

1. 暗黑主题

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

import { createTheme } from "@nextui-org/react"

const darkTheme = createTheme({
  type: 'dark',
  theme: {
    colors: {...}, // override dark theme colors
  }
});

2. 按钮

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