🚀使用美观的组件更快地发布

新版本 v2.4.0 🚀

制作

美丽的

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

美丽、快速和现代的React UI库。

$ npx nextui-cli@latest init

输入

Professional camera

相机

$525

Zoey Lang

@zoeylang

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

4

正在关注

97.1K

粉丝

Woman listing to music

即将推出。

可主题化

提供插件以自定义默认主题，您可以更改所有语义令牌或创建全新主题。

快速

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

浅色和深色UI

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

独特的开发体验

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;

最后

但

不

最少。

一个功能齐全的React UI库。

React服务器组件

所有NextUI组件已经包含了"use client"指令，这意味着您可以直接在您的RSC中导入和使用它们。

可访问的组件

NextUI组件遵循WAI-ARIA指南，提供键盘支持和合理的焦点管理。

焦点交互

只有用户使用键盘或屏幕阅读器导航时，焦点环才会出现。

多个包

NextUI分为多个包，因此您可以仅安装您需要的组件。

基于TypeScript

构建类型安全的应用程序，NextUI具有完全类型化的API，以最小化学习曲线，并帮助您构建应用程序。

覆盖组件标签

所有NextUI组件中都包含了一个多态的`as`属性。

无运行时样式

NextUI基于Tailwind CSS，这意味着没有运行时样式，在您的捆绑包中也没有不必要的类。

设计精美

NextUI组件是独特的，不受任何视觉趋势或设计规则的约束，这使我们独特，当然也使您的项目独特。

支持NextUI

在盈利产品中使用NextUI，作为自由职业者，或用于有趣的项目？您的贡献将有助于使NextUI变得更好。

让我们

Web

更美观

亲身体验并展示您的创作！

社区

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