Make 

beautiful 

websites regardless of your design experience.

Beautiful, fast and modern React UI library.

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

Apply your own

theming 

decisions.

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

Shoes theme example

Nike Adapt BB 2.0

Consistent, customized fit, game-changing.

$279.97

$350

20% off

Learn more

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.

Album cover

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;

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;

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!

Community

  

Get involved in our community. Everyone is welcome!