Make

beautiful

websites regardless of your design experience.

Beautiful, fast and modern React UI library.

$ npx nextui-cli@latest init

GitHub

Input

Camera

$525

Zoey Lang

@zoeylang

Full-stack developer, @getnextui lover she/her 🎉

Following

97.1K

Followers

Available soon.

Themeable

Provides a plugin to customize default themes, you can change all semantic tokens or create an entire new theme.

Fast

Built on top of Tailwind CSS, which means no runtime styles, and no unnecessary classes in your bundle.

Light & Dark UI

Automatic dark mode recognition, NextUI automatically changes the theme when detects HTML theme prop changes.

Unique DX

NextUI is fully-typed to minimize the learning curve, and provide the best possible developer experience.

Supported and backed by

Your Company

Apply your own

theming

decisions.

NextUI provides a custom TailwindCSS plugin that allows you to customize the default themes or create your own.


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"
          }
        },
      },
    }),
  ],
};

Accessibility

out of the

box.

NextUI components are built on top of React Aria ensuring exceptional accessibility support as a top priority.

Keyboard navigation

Managed focus

Collision aware

Alignment control

Screen reader support

Typehead support

Learn more

Dark mode

is

effortless.

NextUI comes with a fully well-scaled default dark theme that you can apply to your application with just adding the dark attribute to your html.

Daily Mix

12 Tracks

Frontend Radio

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;

Learn more

Customization made

easy.

NextUI is based on Tailwind Variants, it simplifies component slots customization while avoiding Tailwind class conflicts.


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;

Learn more

Last

but

not

least.

A fully-featured React UI library.

React server components

All NextUI components already include the "use client" directive, which means you can import and use them directly in your RSC.

Accessible components

NextUI components follow the WAI-ARIA guidelines, provide keyboard support and sensible focus management.

Focus interactions

Focus ring will appear only when user navigates with keyboard or screen reader.

Multiple packages

NextUI is divided into multiple packages, so you can install only the components you need.

TypeScript based

Build type safe applications, NextUI has a fully-typed API to minimize the learning curve, and help you build applications.

Override components tags

A polymorphic `as` prop is included in all NextUI components.

No runtime styles

NextUI is based on Tailwind CSS, it means that there are no runtime styles, and no unnecessary classes in your bundle.

Beautifully designed

NextUI components are unique and are not tied to any visual trend or design rule, which makes us unique and of course your projects as well.

Support NextUI

Using NextUI in a profit-making product, as a freelancer, or for fun projects? Your contributions will help to make NextUI better.

Let's make the

Web

Prettier

Experience it firsthand and show us your creations!

Get Started Github

Community

Get involved in our community. Everyone is welcome!

Make

beautiful

websites regardless of your design experience.

Beautiful, fast and modern React UI library.

Zoey Lang

@zoeylang

Supported and backed by

Apply your own

theming

decisions.

Nike Adapt BB 2.0

Accessibility

out of the

box.

Dark mode

is

effortless.

Customization made

easy.

Last

but

not

least.

Support NextUI

Let's make the

Web

Prettier

Community