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:


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

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

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 {
      styles: React.Children.toArray([initialProps.styles])

  render() {
    return (
      <Html lang="en">
          <Main />
          <NextScript />

export default MyDocument;

Test NextUI Button component.


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}>
        <title>Next App with Next UI</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />

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

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

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

      <footer className={styles.footer}>
          rel="noopener noreferrer"
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />

export default Home
nextjs with nextui

nextjs with nextui