安裝和使用
https://nextui.org/docs/frameworks/nextjs
自定義主題
https://nextui.org/docs/customization/customize-theme
// tailwind.config.js
const {nextui} = require("@nextui-org/react");/** @type {import('tailwindcss').Config} */
module.exports = {plugins: [nextui({themes: {"purple-dark": {extend: "dark", // <- inherit default values from dark themecolors: {background: "#0D001A",foreground: "#ffffff",primary: {50: "#3B096C",100: "#520F83",200: "#7318A2",300: "#9823C2",400: "#c031e2",500: "#DD62ED",600: "#F182F6",700: "#FCADF9",800: "#FDD5F9",900: "#FEECFE",DEFAULT: "#DD62ED",foreground: "#ffffff",},focus: "#F182F6",},layout: {disabledOpacity: "0.3",radius: {small: "4px",medium: "6px",large: "8px",},borderWidth: {small: "1px",medium: "2px",large: "3px",},},},},}),],
};
nextui({themes: {dark: {colors: {primary: {DEFAULT: "#BEF264",foreground: "#000000",},focus: "#BEF264",},},},
調色板
For an effective palette, we recommend using color ranges from 50 to 900. You can use tools like Eva Design System, Smart Watch, Palette or Color Box to generate your palette.
切換主題
https://github.com/pacocoursey/next-themes
錯誤（水合）
https://github.com/pacocoursey/next-themes
<html lang="en" suppressHydrationWarning>
延遲更換主題防止水合錯誤
import { useState, useEffect } from 'react'
import { useTheme } from 'next-themes'const ThemeSwitch = () => {const [mounted, setMounted] = useState(false)const { theme, setTheme } = useTheme()// useEffect only runs on the client, so now we can safely show the UIuseEffect(() => {setMounted(true)}, [])if (!mounted) {return null}return (<select value={theme} onChange={e => setTheme(e.target.value)}><option value="system">System</option><option value="dark">Dark</option><option value="light">Light</option></select>)
}export default ThemeSwitch
可以切換多個主題
E:\Nextjs\nextuiapp\providers.tsx
'use client'
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { NextUIProvider } from '@nextui-org/react'export function Providers({ children }: { children: React.ReactNode }) {return (<NextUIProvider><NextThemesProvider attribute="class" defaultTheme="light" themes={['light', 'dark','purple-dark']}>{children}</NextThemesProvider></NextUIProvider>)
}
切換主題下拉菜單
E:\Nextjs\nextuiapp\components\ThemeSwitcher.tsx
"use client";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
import React from "react";
import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button } from "@nextui-org/react";export function ThemeSwitcher() {const [mounted, setMounted] = useState(false)const [selectedKeys, setSelectedKeys] = React.useState(new Set(["light"]));const { theme, setTheme } = useTheme()useEffect(() => {setSelectedKeys(new Set([localStorage.getItem("theme")||'light']))setMounted(true)}, [])if (!mounted) return nullconst handleClick = (key: string) => {setTheme(key)}return (<div><Dropdown><DropdownTrigger><Buttonvariant="light">{theme}</Button></DropdownTrigger><DropdownMenuaria-label="Single selection example"variant="flat"disallowEmptySelectionselectionMode="single"selectedKeys={selectedKeys}onSelectionChange={setSelectedKeys as any}onAction={(key) => handleClick(key as string)}><DropdownItem key="light">Light Mode</DropdownItem><DropdownItem key="dark">Dark Mode</DropdownItem><DropdownItem key="purple-dark">purple-dark Mode</DropdownItem></DropdownMenu></Dropdown></div>)
};
突然報錯則刪除本地存儲的theme
應用主題顏色
All components that use the primary color will be affected by this change.
import {Button} from "@nextui-org/react";export default function App() {return (<div className="flex flex-wrap gap-4 items-center"><Button color="primary" variant="solid">Solid</Button><Button color="primary" variant="faded">Faded</Button><Button color="primary" variant="bordered">Bordered</Button><Button color="primary" variant="light">Light</Button><Button color="primary" variant="flat">Flat</Button><Button color="primary" variant="ghost">Ghost</Button><Button color="primary" variant="shadow">Shadow</Button></div>);
}
常用組件
Listbox側邊欄
Button
Autocomplete(輸入框加選項結合的組件)
外加搜索功能
Badge圖標小提示
Breadcrumbs當前路徑提示
Card文章卡片
運行與父組件等寬
<Card className=" border flex flex-col relative dark:bg-dark dark:text-white sm:p-5 text-accent dark:border-none" fullWidth={true}>
Navbar導航欄
改變大小
<Navbar shouldHideOnScroll className="w-full border" maxWidth="xl">
其他參數
Modal對話框
onOpenChange()可以打開/關閉模態
Image圖片
Pagination頁碼
tabs選項卡（可做表單）
偶爾分享web開發知識
小破站
blog
)
