# How to Implement Rainbow Kit using NextJS

[RainbowKit](https://www.rainbowkit.com/) is a popular choice to support user wallet connection for its ease of use and interoperability.

By the end of this tutorial, you will learn how to install and use RainbowKit features in your dApp. We will use a NextJS app to demo! Let's dive in 🤿

## Step #1: Set Up Project using NextJS

Let's use [NextJS](https://nextjs.org/) as our framework to learn how to implement RainbowKit. Here are the steps to set up a NextJS front-end:

1. In your terminal, run `npx create-next-app@latest`
2. Once you run through the NextJS CLI setup, `cd` into your new project directory
3. Run `npm run dev` to start the NextJS local development server

You should now have a working local website at `http://localhost:3000` that looks like this:

4. Open the project in an IDE like VSCode and go to the `page.js` file
5. Replace the contents of that file with the following code snippet:

import styles from "./page.module.css";

export default function Home() {
  return <main className={styles.main}></main>;
}

You'll notice all we did was remove everything except the parent `<main></main>` tags.


At this point, you should have a blank (black) slate just like the picture above. This way, we have a open ground for us to cleanly install RainbowKit (and anything else we want!). Let's do this in the next step!

## Step #2: Install & Implement RainbowKit

1. Now, go back to your terminal (make sure you are in the correct project directory!) and run `npm install @rainbow-me/rainbowkit wagmi viem`