🚀使用精美组件更快地交付产品

新版本 v2.6.0 🔥

制作

精美的

网站，无论您的设计经验如何。

美观、快速、现代的 React UI 库。

$ npx nextui-cli@latest init

输入

Professional camera

相机

$525

佐伊·朗

@zoeylang

全栈开发人员，@getnextui 爱好者，她/她 🎉

4

正在关注

9.71万

粉丝

Woman listing to music

即将推出。

可主题化

提供一个插件来定制默认主题，您可以更改所有语义标记或创建全新的主题。

快速

构建于 Tailwind CSS 之上，这意味着没有运行时样式，并且在您的捆绑包中没有不必要的类。

浅色和深色 UI

自动暗模式识别，当检测到 HTML 主题属性更改时，NextUI 会自动更改主题。

独特的 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 构建，确保将卓越的无障碍支持作为首要任务。

键盘导航

受控焦点

碰撞感知

对齐控制

屏幕阅读器支持

Typehead 支持

深色模式

是

轻松的。

NextUI 配备了完全缩放的默认深色主题，您只需在 html 中添加 dark 属性即可将其应用于您的应用程序。

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;

专业版

使用

组件

更快地

精美的

交付产品

由 NextUI 团队专业创建的 210 多个精美且响应迅速的组件的预制模板。

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

社区

参与我们的社区。欢迎所有人！