Installation

Requirements:


To use NextUI in your project, you need to follow the following steps:

Global Installation

The easiest way to get started with NextUI is to use the global installation. Which means that all the components are imported from a single package.

Follow the steps below to install all NextUI components:

Install Packages

To install NextUI, run one of the following commands in your terminal:

Tailwind CSS Setup

NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official installation guide to install Tailwind CSS. Then you need to add the following code to your tailwind.config.js file:

// tailwind.config.js
const {nextui} = require("@nextui-org/react");
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
// ...
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
darkMode: "class",
plugins: [nextui()],
};

Provider Setup

It is essential to add the NextUIProvider at the root of your application.

import * as React from "react";
// 1. import `NextUIProvider` component
import {NextUIProvider} from "@nextui-org/react";
function App() {
// 2. Wrap NextUIProvider at the root of your app
return (
<NextUIProvider>
<YourApplication />
</NextUIProvider>
);
}

Setup pnpm (optional)

If you are using pnpm, you need to add the following code to your .npmrc file:

public-hoist-pattern[]=*@nextui-org/*

After modfiying the .npmrc file, you need to run pnpm install again to ensure that the dependencies are installed correctly.

Individual Installation

NextUI is also available as individual packages. You can install each package separately. This is useful if you want to reduce the size of your CSS bundle as it will only include styles for the components you're actually using.

Note: JavaScript bundle size will not change due to tree shaking support in NextUI.

Follow the steps below to install each package separately:

Install Core Packages

Although you can install each package separately, you need to install the core packages first to ensure that all components work correctly.

Run one of the following commands in your terminal to install the core packages:

Install Component

Now, let's install the component you want to use. For example, if you want to use the Button component, you need to run one of the following commands in your terminal:

Tailwind CSS Setup

TailwindCSS setup changes a bit when you use individual packages. You only need to add the styles of the components your using to your tailwind.config.js file. For example, for the Button component, you need to add the following code to your tailwind.config.js file:

// tailwind.config.js
const {nextui} = require("@nextui-org/theme");
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
// single component styles
"./node_modules/@nextui-org/theme/dist/components/button.js",
// or you can use a glob pattern (multiple component styles)
'./node_modules/@nextui-org/theme/dist/components/(button|snippet|code|input).js'
],
theme: {
extend: {},
},
darkMode: "class",
plugins: [nextui()],
};

Provider Setup

It is essential to add the NextUIProvider at the root of your application.

import * as React from "react";
// 1. import `NextUIProvider` component
import {NextUIProvider} from "@nextui-org/system";
function App() {
// 2. Wrap NextUIProvider at the root of your app
return (
<NextUIProvider>
<YourApplication />
</NextUIProvider>
);
}

Use the Component

Now, you can use the component you installed in your application:

import * as React from "react";
import {Button} from "@nextui-org/button";
function App() {
return (
<Button>Press me</Button>
);
}

Setup pnpm (optional)

If you are using pnpm, you need to add the following code to your .npmrc file:

public-hoist-pattern[]=*@nextui-org/*

After modfiying the .npmrc file, you need to run pnpm install again to ensure that the dependencies are installed correctly.

Version 2 is only compatible with React 18 or later. If you are using React 17 or earlier, please use version 1 of NextUI.

Framework Guides

NextUI UI is compatible with your preferred framework. We have compiled comprehensive, step-by-step tutorials for the following frameworks: