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

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

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

NextUI CLI (recommended)

create-next-app

Automatic Installation

Aaronn