🚀美しいコンポーネントでより速く開発

新バージョン v2.4.0 🚀

美しく

デザイン経験に関わらず

Webサイトを作成しましょう。

美しく、高速でモダンなReact UIライブラリ。

$ npx nextui-cli@latest init

入力

Professional camera

カメラ

$525

Zoey Lang

@zoeylang

フルスタック開発者、@getnextui愛好家 she/her 🎉

4

フォロー中

97.1K

フォロワー

Woman listing to music

近日公開

テーマ設定可能

デフォルトのテーマをカスタマイズするためのプラグインを提供し、すべてのセマンティックトークンを変更したり、まったく新しいテーマを作成したりできます。

高速

Tailwind CSS上に構築されているため、ランタイムスタイルがなく、バンドルに不要なクラスがありません。

ライト＆ダークUI

自動ダークモード認識、NextUIはHTMLテーマプロパティの変更を検出すると自動的にテーマを変更します。

ユニークなDX

NextUIは完全に型付けされており、学習曲線を最小限に抑え、可能な限り最高の開発エクスペリエンスを提供します。

以下によってサポートおよび支援されています

独自の

テーマ

決定を適用します。

NextUIは、デフォルトのテーマをカスタマイズしたり、独自のテーマを作成したりできるカスタムTailwind CSSプラグインを提供します。

Shoes theme example

Nike Adapt BB 2.0

一貫性のある、カスタマイズされたフィット、革新的。

$279.97

$350

20%オフ

詳細はこちら


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には、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;

詳細はこちら

最後

だが

重要

です

フル機能のReact UIライブラリ。

Reactサーバーコンポーネント

すべてのNextUIコンポーネントには、"use client"ディレクティブが既に含まれているため、RSCで直接インポートして使用できます。

アクセス可能なコンポーネント

NextUIコンポーネントはWAI-ARIAガイドラインに従い、キーボードサポートと適切なフォーカス管理を提供します。

フォーカスインタラクション

フォーカスリングは、ユーザーがキーボードまたはスクリーンリーダーでナビゲートしたときにのみ表示されます。

複数のパッケージ

NextUIは複数のパッケージに分割されているため、必要なコンポーネントのみをインストールできます。

TypeScriptベース

タイプセーフなアプリケーションを構築します。NextUIには、学習曲線を最小限に抑え、アプリケーションの構築を支援する、完全に型付けされたAPIがあります。

コンポーネントタグのオーバーライド

すべてのNextUIコンポーネントには、多態的な `as` プロパティが含まれています。

ランタイムスタイルなし

NextUIはTailwind CSSに基づいているため、ランタイムスタイルがなく、バンドルに不要なクラスがありません。

美しくデザインされた

NextUIコンポーネントはユニークであり、視覚的なトレンドやデザインルールに縛られていません。そのため、私たちはもちろん、あなたのプロジェクトもユニークになります。

NextUIをサポート

NextUIを営利目的の製品、フリーランサー、または楽しいプロジェクトで使用していますか？あなたの貢献はNextUIの改善に役立ちます。

Webを

より美しく

しましょう

実際に体験して、あなたの作品を見せてください！

始める Github

コミュニティ

私たちのコミュニティに参加しましょう。誰でも歓迎です！