Tailwind Logo

Use NextUI

Next.js

Published: 2023-10-02

The sample we have been running so far had no minimal design and only displayed text. In order to make it look a little nicer, we are going to make NextUI available in the project.

What is NextUI?

There are various component libraries available on the Web. As a style sheet, Next.js can be selected when creating a project so that Tailwind.css can be easily used, but a UI library called NextUI, which was created based on Tailwind.css, is provided.

Instructions for use with Next.js are available at the following page.

This page will show you how to create a project that has already been applied, but this time we will implement the procedure for setting up the project after the fact.

Install NextUI

First, install NextUI by executing the following command

PowerShell 
npm i @nextui-org/react framer-motion

Then tailwind.config.js is the configuration file, which was updated as follows

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

/** @type {import('tailwindcss').Config} */

const config = {
  content: [
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()],
};

export default config;

Next, create the file app/providers.tsx. The code is as follows as it is on the site

TypeScript 
// app/providers.tsx
'use client'

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

export function Providers({children}: { children: React.ReactNode }) {
  return (
    <NextUIProvider>
      {children}
    </NextUIProvider>
  )
}

Then, while importing the above file in the app/layout.tsx file, the following parts were added and edited.

TypeScript 
import { Providers } from "./providers";

    <html lang="ja" className="dark">
      <body>
        <Providers>{children}</Providers>
      </body>}
    </html>

Now that the configuration is complete, let's try to use the UI components in our page. This time, we added the following code in app/page.tsx.

TypeScript 
import {Button} from '@nextui-org/button';

    <div>
      <Button>Click me</Button>
    </div>

The button is now added to the page.

nextui.png

Summary

By using NextUI, it is possible to create a standardized design for the look and feel of the sample. Of course, this UI can be used to easily create applications.

Tags