> ## Documentation Index
> Fetch the complete documentation index at: https://docs.reown.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Migration from ConnectKit to AppKit

# Migration from ConnectKit to AppKit

If you have currently set up ConnectKit as the wallet provider for your Web3 app, you can easily migrate to **Reown AppKit**.

Assuming that your Web3 app is set up similarly to ConnectKit's example app [here](https://github.com/family/connectkit/tree/main/examples/nextjs), let's explore how to migrate from this example app to Reown AppKit.

To migrate from ConnectKit to Reown AppKit, please follow the steps below.

## Step 1. Create a project in Reown Dashboard

* Create a new project on [Reown Dashboard](https://dashboard.reown.com) and obtain a new project ID.

## Step 2. Install & uninstall libraries

* Run this command to install Reown AppKit and uninstall ConnectKit.

<CodeGroup>
  ```bash npm theme={null}
  npm install @reown/appkit @reown/appkit-adapter-wagmi && npm uninstall connectkit
  ```

  ```bash Yarn theme={null}
  yarn add @reown/appkit @reown/appkit-adapter-wagmi&& yarn remove connectkit
  ```

  ```bash Bun theme={null}
  bun add @reown/appkit @reown/appkit-adapter-wagmi && npm uninstall connectkit
  ```

  ```bash pnpm theme={null}
  pnpm add @reown/appkit @reown/appkit-adapter-wagmi&& pnpm remove connectkit
  ```
</CodeGroup>

## Step 3. Change the code in the `/components/Web3Provider.tsx` file

* Navigate to the `/components/Web3Provider.tsx` file inside your ConnectKit example Web3 app directory.
  . Now, you need to remove the existing configuration that uses ConnectKit and replace it with Reown AppKit. Refer to the code snippet below.

```tsx {7,10-12, 22, 25-28, 33-41, 46, 49} theme={null}
import React from 'react';

import { WagmiProvider, createConfig } from 'wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

- import { ConnectKitProvider, getDefaultConfig } from 'connectkit';
+ import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'

// Include networks from AppKit
+ import { mainnet, arbitrum } from '@reown/appkit/networks'
+ import { createAppKit } from '@reown/appkit';
+ export const networks = [mainnet, arbitrum]

- const config = createConfig(
-   getDefaultConfig({
-     appName: 'ConnectKit Next.js demo',
-     walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
-   })
- );

// If you were already using WalletConnect with ConnectKit, you can use the same projectId.
// If not, then get projectId from https://dashboard.reown.com
+ export const projectId = "YOUR_PROJECT_ID";

//Set up the Wagmi Adapter (Config)
+ export const wagmiAdapter = new WagmiAdapter({
+   networks,
+   projectId
+ })

const queryClient = new QueryClient();

// Create the modal
+ const modal = createAppKit({
+   adapters: [wagmiAdapter],
+   projectId,
+   networks: [mainnet, arbitrum],
+   features: {
+     analytics: true, // Optional - defaults to your Cloud configuration
+   }
+ })

export const Web3Provider = ({ children }: { children: React.ReactNode }) => {
  return (   
-    <WagmiProvider config={config}>    
+    <WagmiProvider config={wagmiAdapter.wagmiConfig}> 
      <QueryClientProvider client={queryClient}>    
-        <ConnectKitProvider debugMode>{children}</ConnectKitProvider>       
+        {children}    
      </QueryClientProvider>
    </WagmiProvider>
  );
};

```

## Step 4. Change the code in the `/pages/index.tsx` file

* Navigate to the `/pages/index.tsx` file inside your ConnectKit example Web3 app directory.
* Now, you need to remove the existing code that uses `<ConnectKitButton />` and replace it with `<w3m-button />`. Refer to the code snippet below.

```tsx {15} theme={null}
import type { NextPage } from 'next';
- import { ConnectKitButton } from 'connectkit';

const Home: NextPage = () => {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100vh',
      }}
    >
-      <ConnectKitButton />
+      <w3m-button />   
    </div>
  );
};
export default Home;
```

## Final notes

* Ensure that you have updated all relevant configurations and imports in your project to reflect the changes from ConnectKit to Reown 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](https://github.com/reown-com/appkit-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](/appkit/overview)