install nextui in nextjs with typescript

Install NextUI in NextJS with Typescript

08/22 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.


Install NextJS with Typescript

Run below command to create nextjs project with typescript.

npx create-next[email protected] --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




Enter Your Search Query