🚀使用美觀的元件，更快地交付產品

新版本 v2.6.0 🔥

讓

網站更美觀

無論您的設計經驗如何。

美觀、快速且現代化的 React UI 函式庫。

$ npx nextui-cli@latest init

輸入框

Professional camera

相機

$525

Zoey Lang

@zoeylang

全端開發者，@getnextui 愛好者她/她 🎉

4

已追蹤

9.71 萬

追蹤者

Woman listing to music

即將推出。

可自訂主題

提供一個外掛程式來自訂預設主題，您可以變更所有語義標記或建立全新的主題。

快速

建立在 Tailwind CSS 之上，這表示沒有執行階段樣式，且您的套件中沒有不必要的類別。

淺色與深色 UI

自動深色模式辨識，當 NextUI 偵測到 HTML theme 屬性變更時，會自動變更主題。

獨特的 DX

NextUI 已完整輸入類型，以盡量減少學習曲線，並提供最佳的開發人員體驗。

支援與後盾來自

套用您自己的

主題

決策。

NextUI 提供一個自訂的 TailwindCSS 外掛程式，讓您可以自訂預設主題或建立自己的主題。

Shoes theme example


tailwind.config.js
const { nextui } = require("@nextui-org/react");

module.exports = {
  // ...
  plugins: [
    nextui({
      themes: {
        light: {
          colors: {
            primary: "#0072f5",
          }
        },
        dark: {
          colors: {
            primary: "#0072f5",
          }
        },
      },
    }),
  ],
};

module.exports = {
  // ...
  plugins: [
    nextui({
      themes: {
        light: {
          colors: {
            primary: "#7828c8",
          }
        },
        dark: {
          colors: {
            primary: "#9353d3",
          }
        },
      },
    }),
  ],
};

module.exports = {
  // ...
  plugins: [
    nextui({
      themes: {
        light: {
          colors: {
            primary: "#FFFFFF",
          }
        },
        dark: {
          colors: {
            primary: "#000000",
          }
        },
      },
    }),
  ],
};

module.exports = {
  // ...
  plugins: [
    nextui({
      themes: {
        light: {
          colors: {
            primary: "#FFD34E",
            secondary: "#EE457E",
            background:"#F4E8D1"
          }
        },
        dark: {
          colors: {
            primary: "#FFD34E",
            secondary: "#EE457E",
            background: "#E1CA9E"
          }
        },
      },
    }),
  ],
};

無障礙功能

開箱即

用。

NextUI 元件建立在 React Aria 之上，確保將卓越的無障礙功能支援列為首要優先事項。

鍵盤導覽

管理焦點

碰撞感知

對齊控制

螢幕閱讀器支援

輸入時搜尋支援

深色模式

很

輕鬆。

NextUI 隨附完整縮放的預設深色主題，您只需將 dark 屬性新增至您的 html，即可套用至您的應用程式。

Album cover

每日精選

12 首曲目

前端廣播

1:23

4:32


_app.tsx
import React from "react";
import {NextUIProvider} from "@nextui-org/react";

const Application = ({Component, pageProps}) => {
  return (
    <NextUIProvider>
      <main className={isDark ? "dark" : "light"}>
        <Component {...pageProps} />
      </main>
    </NextUIProvider>
  );
};

export default Application;

自訂變得

簡單。

NextUI 基於 Tailwind Variants，它簡化了元件插槽的自訂，同時避免了 Tailwind 類別衝突。


custom-button.tsx
import React from 'react';
import {Button} from '@nextui-org/react';
import confetti from 'canvas-confetti';

const CustomButton = () => {
  const handleConfetti = () => {
    confetti({...});
  };

  return (
    <Button
      ref={buttonRef}
      disableRipple
      className="relative overflow-visible rounded-full hover:-translate-y-1 px-12 shadow-xl bg-background/30 after:content-[''] after:absolute after:rounded-full after:inset-0 after:bg-background/40 after:z-[-1] after:transition after:!duration-500 hover:after:scale-150 hover:after:opacity-0"
      size="lg"
      onPress={handleConfetti}
    >
      Press me
    </Button>
  );
};

export default CustomButton;

PRO

使用

元件，更快地

交付

網站更美觀

產品

超過 210 個美觀且回應式的元件的預製範本，由 NextUI 背後的團隊專業打造。

210 多個元件
永久存取
免費更新
包含 Figma 檔案

探索 NextUI Pro

最後

但

並非

最不重要。

功能完整的 React UI 函式庫。

React 伺服器元件

所有 NextUI 元件都已包含 "use client" 指令，這表示您可以在您的 RSC 中直接匯入和使用它們。

可存取的元件

NextUI 元件遵循 WAI-ARIA 指南，提供鍵盤支援和合理的焦點管理。

焦點互動

焦點環只會在使用者使用鍵盤或螢幕閱讀器導覽時出現。

多個套件

NextUI 分為多個套件，因此您只能安裝您需要的元件。

基於 TypeScript

建立類型安全的應用程式，NextUI 具有完整的類型 API，可盡量減少學習曲線，並協助您建立應用程式。

覆寫元件標籤

所有 NextUI 元件中都包含多型 `as` 屬性。

沒有執行階段樣式

NextUI 基於 Tailwind CSS，這表示沒有執行階段樣式，且您的套件中沒有不必要的類別。

精美設計

NextUI 元件獨一無二，且不受任何視覺趨勢或設計規則的約束，這讓我們與眾不同，當然也讓您的專案與眾不同。

支援 NextUI

在營利產品、以自由工作者身分，或用於有趣的專案中使用 NextUI 嗎？您的貢獻將有助於讓 NextUI 變得更好。

讓我們讓

網站

更美觀

親身體驗並向我們展示您的作品！

開始使用 Github

社群

加入我們的社群。歡迎所有人！