how to use nextui 2 in next js 13

how to use nextui 2 in next js 13

updated 25/09/23 By frontendshape

In this tutorial, we will see how to install & setup nextui 2v in next js 13. There is two way you can use nextui 2v in next 13. You can use nextui with next 13 template. or you can manual Installation nextui 2v in next js 13.

1. Install NextUI 2v by Template

Run below command to create nextui 2 project with next js 13. The good thing you don't need to change or add any configuration.

// npm
npx create-next-app -e
// yarn
yarn create next-app -e
// pnpm
pnpm create next-app -e

Install dependencies and Run the development server

npm install
npm run dev
nextui 2 in next js 13

nextui 2 in next js 13

2. Manual Installation NextUI 2v in Next 13

Use create-next-app, which sets up everything automatically for you. To create a project, run.

npx create-next-app@latest

 On installation, you'll see the following prompts:

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias? No / Yes
What import alias would you like configured? @/*

In your Next.js project, run one of the following command to install NextUI:

// npm
npm i @nextui-org/react framer-motion
// yarn
yarn add @nextui-org/react framer-motion
// pnpm
pnpm add @nextui-org/react framer-motion

Tailwind CSS Setup

Add nextui in tailwind.config.js.

// tailwind.config.js
import {nextui} from "@nextui-org/react";

/** @type {import('tailwindcss').Config} */
const config = {
 content: [
  // ...
 theme: {
  extend: {},
 darkMode: "class",
 plugins: [nextui()]

export default config;

Setup Provider

Go to your app/providers.tsx or app/providers.jsx (create it if it doesn't exist) and wrap the Component with the NextUIProvider.

// app/providers.tsx
'use client'

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

export function Providers({children}: { children: React.ReactNode }) {
 return (

Add Provider to Root

Now, Go to your root layout page and wrap it with the NextUIProvider.

// app/layout.tsx
import {Providers} from "./providers";

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

Use NextUI Components

Now you can import any NextUI component directly in your Server Components without needing to use the use client; directive.

// app/page.tsx
import { Button } from "@nextui-org/button";

export default function App() {
  return (
    <div className="flex flex-wrap gap-4 items-center">
      <Button color="default">
      <Button color="primary">
      <Button color="secondary">
      <Button color="success">
      <Button color="warning">
      <Button color="danger">
next 13 with nextui button component

next 13 with nextui button component