> ## Documentation Index
> Fetch the complete documentation index at: https://celo-64ac69bd-martinvol-fix-smart-contracts-release-docs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Rainbowkit (celo example)

## Overview of Rainbowkit

## Rainbowkit

RainbowKit is a React library that makes it easy to add wallet connection to your dapp. It's intuitive, responsive and customizable. And Supports some of the best wallets on Celo.

## Installation

```sh theme={null}
npm install @rainbow-me/rainbowkit@2 viem@2 wagmi@2
```

## Create config

Create a file named **`consts`** under **`src/config`**

```sh theme={null}
export const WALLET_CONNECT_PROJECT_ID = 'YOUR_PROJECT_ID'
```

## Example

```ts theme={null}
import '@rainbow-me/rainbowkit/styles.css';
import {
  braveWallet,
  coinbaseWallet,
  injectedWallet,
  safeWallet,
  valoraWallet,
  walletConnectWallet,
} from '@rainbow-me/rainbowkit/wallets';

import {
  RainbowKitProvider,
  darkTheme,
  getDefaultConfig,
  lightTheme,
} from '@rainbow-me/rainbowkit';

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WagmiProvider, http } from 'wagmi';
import { celo, celoAlfajores } from 'wagmi/chains';
import { ConnectButton } from '@rainbow-me/rainbowkit';
import { WALLET_CONNECT_PROJECT_ID } from '/src/config/consts';

const queryClient = new QueryClient();

const config = getDefaultConfig({
  appName: 'Your App Name',
  projectId: WALLET_CONNECT_PROJECT_ID,
  chains: [celo, celoAlfajores],
  wallets: [
    {
      groupName: 'Recommended',
      wallets: [safeWallet, valoraWallet, braveWallet, coinbaseWallet],
    },
    {
      groupName: 'Fallbacks',
      wallets: [walletConnectWallet, injectedWallet],
    },
  ],
  transports: {
    [celo.id]: http(),
    [celoAlfajores.id]: http(),
  },
});
function App() {
  return (
      <WagmiProvider config={config}>
          <QueryClientProvider client={queryClient}>
            <RainbowKitProvider>
              <ConnectButton />
            </RainbowKitProvider>
          </QueryClientProvider>
        </WagmiProvider>
  )
}
```