简介
NextUI是一个基于Next.js的UI库,它提供了丰富的组件和样式,帮助开发者快速构建现代化的Web应用程序。个人感觉还是挺好用的,这里记录一下如何手动安装配置。
为啥要手动配置安装?主要是使用NextUI的cli工具安装的话,会出现一些问题,而且有一些老项目以后页会使用NextUI的。
安装
创建项目
这里我想手动创建一个项目用来演示,使用npx create-next-app
命令来创建项目。
项目没什么特别的,只要记得选上tailwind
就可以了
安装NextUI
npm install @nextui-org/react
# 或者
yarn add @nextui-org/react
配置 Tailwind CSS
/** @type {import('tailwindcss').Config} */
const {nextui} = require("@nextui-org/react");
export default {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
],
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
},
},
},
darkMode: "class",
plugins: [nextui()]
};
设置 NextUIProvider
在你的 Next.js 应用的根组件中,使用NextUIProvider
来包裹你的应用。通常,这可以在pages/_app.js
或pages/_app.tsx
中完成:
import "@/styles/globals.css";
import {NextUIProvider} from "@nextui-org/react";
import {ThemeProvider as NextThemesProvider} from "next-themes";
export default function App({ Component, pageProps }) {
return (
<NextUIProvider>
<NextThemesProvider attribute="class" defaultTheme="dark">
<Component {...pageProps} />
</NextThemesProvider>
</NextUIProvider>
);
}
这里,我使用next-themes
来实现主题切换。defaultTheme="dark"
可以设置默认的主题样式。
使用组件
修改index.js
内容:
import {Button} from "@nextui-org/react";
export default function Home() {
return (
<div>
<Button>Click me</Button>
</div>
);
}
运行项目,就可以看到效果了。
总结
NextUI的安装配置还是比较简单的,而且这是一个非常漂亮的UI库。免费的组件基本上能满足日常的需求。