install nextui in nextjs with typescript

Install NextUI in NextJS with Typescript

updated 25/09/23 By frontendshape

In this section we will install next ui in nextjs with typescript. NextUI allows you to make beautiful, modern, and fast websites/applications regardless of your design experience, created with React.js and Stitches, based on React Aria and inspired by Vuesax.

how to use nextui 2 in next js 13


Install NextJS with Typescript

Run below command to create nextjs project with typescript.

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
# or
pnpm create next-app --typescript


Install NextUI in NextJS

Install nextui using npm or yarn.

yarn add @nextui-org/react
# or
npm i @nextui-org/react


Setup NextUI in NextJS

1. Go to pages/_app.js or pages/_app.tsx (create it if it doesn't exist) and add this:

pages/_app.tsx

import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { NextUIProvider } from '@nextui-org/react';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <NextUIProvider>
      <Component {...pageProps} />
    </NextUIProvider>
  );
}

export default MyApp;


2. Go to pages/_document.js or pages/_document.tsx (create if it doesn't exist) and add this:

import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { CssBaseline } from '@nextui-org/react';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return {
      ...initialProps,
      styles: React.Children.toArray([initialProps.styles])
    };
  }

  render() {
    return (
      <Html lang="en">
        <Head>{CssBaseline.flush()}</Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;


Test NextUI Button component.

pages/index.tsx

import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import { Button } from '@nextui-org/react';
import styles from '../styles/Home.module.css'

const Home: NextPage = () => {
  return (
    <div className={styles.container}>
      <Head>
        <title>Next App with Next UI</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          NextUI with <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <p className={styles.description}>
          Get started with Next UI with TypeScript
        </p>

        <div className={styles.grid}>
           <Button>NextUI Button</Button>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  )
}

export default Home
nextjs with nextui

nextjs with nextui