Migration from RainbowKit to AppKit

Follow the steps below to migrate from the default RainbowKit project using Next.js Pages to an AppKit project using wagmi.

Step 1. Create a project in Reown Dashboard#

Create a new project on Reown Dashboard and obtain a new project ID.

Step 2. Install & uninstall libraries#

Run this command to install AppKit and uninstall RainbowKit.

Warning

AppKit is only compatible with wagmi 2.x. Ensure you are using a compatible version.

npm install @reown/appkit @reown/appkit-adapter-wagmi && npm uninstall @rainbow-me/rainbowkit

Step 3. Change the index.tsx#

Use the AppKit Button. It can be configure following these guidelines.

- import { ConnectButton } from '@rainbow-me/rainbowkit';- <ConnectButton />+ <appkit-button />

Info

AppKit's web components are global HTML elements that don't require importing.

Step 4. Changes in your config file#

Replace the following import statements:

- import { getDefaultConfig } from '@rainbow-me/rainbowkit';+ import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'

If you have something similar to this

- export const config = getDefaultConfig({-  appName: 'RainbowKit App',-  projectId: 'YOUR_PROJECT_ID',-  chains: [-    mainnet,-    polygon,-    optimism,-    arbitrum,-    base,-    ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [sepolia] : []),-  ],-  ssr: true,- });

Replace the wagmi config for this example. Also you can customize email and social logins following this guidelines.

import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'import { arbitrum, mainnet } from '@reown/appkit/networks'export const projectId = 'YOUR_PROJECT_ID'export const networks = [mainnet, arbitrum]//Set up the Wagmi Adapter (Config)export const wagmiAdapter = new WagmiAdapter({  storage: createStorage({    storage: cookieStorage  }),  ssr: true,  networks,  projectId})

Step 5. Update app.tsx#

In this step, we'll update the import statements and remove the RainbowKitProvider from the component tree.

Replace the following import statements:

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 { config } from '../wagmi';+ import { wagmiAdapter, projectId } from '@/config'- import { RainbowKitProvider } from '@rainbow-me/rainbowkit';+ import { createAppKit } from "@reown/appkit/react"

Now, Initialize AppKit:

{3-10, 12-21}

const client = new QueryClient()// Set up metadataconst metadata = {  //this is optional  name: 'appkit-example',  description: 'AppKit Example',  url: 'https://exampleapp.com', // origin must match your domain & subdomain  icons: ['https://avatars.githubusercontent.com/u/37784886']}// Create modalconst modal = createAppKit({  adapters: [wagmiAdapter],  projectId,  networks: [mainnet, arbitrum],  metadata: metadata,  features: {    analytics: true // Optional - defaults to your Cloud configuration  }})

Update the component:

function MyApp({ Component, pageProps }: AppProps) {  return (    <WagmiProvider config={config}>      <QueryClientProvider client={client}>                <RainbowKitProvider>                    <Component {...pageProps} />                  </RainbowKitProvider>              </QueryClientProvider>    </WagmiProvider>  )}export default MyApp

Final notes#

Ensure that you have updated all relevant configurations and imports in your project to reflect the changes from RainbowKit to AppKit.
Test your application thoroughly to ensure that the migration has been successful and that all functionality is working as expected.
Check our [AppKit web examples](- Web Examples to compare with your implementation in case you are having issues
If you want to start from scratch, please refer to the Installation docs here