How to Use NextUI in Next.js

To integrate NextUI into your Next.js project, follow these steps tailored to your project structure.

NextUI CLI (recommended)

If you are starting a new project, you can use the NextUI CLI to create a new project with NextUI pre-configured:

npm install -g nextui-cli

Next run below command.

nextui init -t app
NextUI CLI

create-next-app

If you are starting a new project, you can run one of the following commands to create a Next.js project pre-configured with NextUI:

npx create-next-app -e https://github.com/nextui-org/next-app-template
#or with yarn
yarn create next-app -e https://github.com/nextui-org/next-app-template
#or pnpm
pnpm create next-app -e https://github.com/nextui-org/next-app-template
nextui create app

Automatic Installation

You can add individual components using the CLI. For example, to add a button component:

nextui add button

This command adds the Button component to your project and manages all related dependencies.

You can also add multiple components at once:

nextui add button input

Or you can add the main library @nextui-org/react by running the following command:

nextui add --all

If you leave out the component name, the CLI will prompt you to select the components you want to add.

? Which components would you like to add? › - Space to select. Return to submit
Instructions:
    ↑/↓: Highlight option
    ←/→/[space]: Toggle selection
    [a,b,c]/delete: Filter choices
    enter/return: Complete answer

Filtered results for: Enter something to filter

  accordion
  autocomplete
  avatar
  badge
  breadcrumbs
  button
  card
  checkbox
  chip
  code

You still need to add the provider to your app manually (we are working on automating this step).

// app/providers.tsx

import {NextUIProvider} from '@nextui-org/react'

export function Providers({children}: { children: React.ReactNode }) {
  return (
    <NextUIProvider>
      {children}
    </NextUIProvider>
  )
}
// app/layout.tsx

import {Providers} from "./providers";

export default function RootLayout({children}: { children: React.ReactNode }) {
  return (
    <html lang="en" className='dark'>
      <body>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}

You can also read the docs/guide/installation

Aaronn
Aaronn

Hey there! I'm Aaronn, a Full Stack Developer who's all about React, NEXTJS, Node.js, and Tailwind CSS. I'm on a mission to craft awesome websites that look great and work even better.