# Rainbow Kit
This tutorial will illustrate a step-by-step walkthrough in NextJS of how to setup a project using [RainbowKit](https://www.rainbowkit.com/docs/introduction) and how to set up a custom wallet list that recommends the ME Wallet.
{% hint style="info" %}
**Note:**
The ME wallet works out of the box in the RainbowKit default config if a user has the wallet installed on their browser, because all installed wallets that conform to EIP-6963 will be detected. This guide is to illustrate how you can control the specific wallets shown in a custom list.
{% endhint %}
## Installation
```
npm install @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query
```
## Implementation
Here we will import the necessary libraries, create a custom `connectors` list, and a config that communicates with those connectors and Ethereum mainnet.
Once you've done that, you can wrap your application with `RainbowKitProvider`, [`WagmiProvider`](https://wagmi.sh/react/api/WagmiProvider#wagmiprovider), and [`QueryClientProvider`](https://tanstack.com/query/v4/docs/framework/react/reference/QueryClientProvider).
```tsx
import "../styles/globals.css";
import "@rainbow-me/rainbowkit/styles.css";
import type { AppProps } from "next/app";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider } from "wagmi";
import { RainbowKitProvider, connectorsForWallets } from "@rainbow-me/rainbowkit";
import { magicEdenWallet } from "@rainbow-me/rainbowkit/wallets";
import { http, createConfig } from "wagmi";
import { mainnet } from "wagmi/chains";
const connectors = connectorsForWallets(
[
{
groupName: "Recommended",
wallets: [magicEdenWallet],
},
],
{
appName: "My RainbowKit App",
projectId: "YOUR_PROJECT_ID",
}
);
const config = createConfig({
connectors,
chains: [mainnet],
ssr: true,
transports: {
[mainnet.id]: http(),
},
});
const client = new QueryClient();
function MyApp({ Component, pageProps }: AppProps) {
return (
);
}
export default MyApp;
```
## Add the Connect Button
In your `index.tsx` file, go ahead and add the `ConnectButton` supplied by RainbowKit
```tsx
import { ConnectButton } from "@rainbow-me/rainbowkit";
import type { NextPage } from "next";
import Head from "next/head";
import styles from "../styles/Home.module.css";
const Home: NextPage = () => {
return (
RainbowKit App
);
};
export default Home;
```
And that's all. When you trigger the button, you should get a nice modal that recognizes installed wallets and sets up the ME wallet in a standalone "reccommended" catagory. It may look something like this:
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs-wallet.magiceden.io/evm/library-integrations/rainbow-kit.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.