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

# Installation

> Let's get you set up with Link using our React SDK

<Tabs>
  <Tab title="React">
    <Steps>
      <Step title="Create a React project">
        If you haven't already, create a React project using your preferred stack. Some popular options are [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) and [Next.JS](https://nextjs.org/docs/getting-started/installation#automatic-installation).

        <CodeGroup>
          ```bash Vite theme={null}
          npm create vite@latest
          ```

          ```bash Next.js theme={null}
          npx create-next-app@latest
          ```
        </CodeGroup>
      </Step>

      <Step title="Install the WalletKit SDK">
        ```bash theme={null}
        npm install @walletkit/react-link walletkit-js
        ```
      </Step>

      <Step title="Setup WalletKitLink & WalletKitLinkProvider">
        Initialize `WalletKitLink` with your Project ID and wrap your app with `WalletKitLinkProvider`, adding it as close to the root as possible.

        <Tip>You can get your Project ID from the [API Keys](https://app.walletkit.com/api-keys) page in the WalletKit dashboard.</Tip>

        ```typescript theme={null}
        import {WalletKitLink} from "@walletkit/react-link"

        const wkLink = new WalletKitLink({
          projectId: '<WalletKit-Project-ID>',
        });

        export function App() {
          return (
            <WalletKitLinkProvider link={wkLink}>
              ...
            </WalletKitLinkProvider>
          )
        }
        ```
      </Step>
    </Steps>
  </Tab>

  <Tab title="wagmi">
    <Info>This guide is for wagmi v2</Info>

    <Steps>
      <Step title="Create a wagmi project">
        If you haven't already, follow the steps over at [wagmi.sh](https://wagmi.sh/react/getting-started#getting-started) to create a wagmi project.

        ```bash theme={null}
          npm init wagmi
        ```
      </Step>

      <Step title="Install the WalletKit SDK">
        ```bash theme={null}
          npm i @walletkit/wagmi-link @walletkit/react-link walletkit-js
        ```
      </Step>

      <Step title="Add WalletKit connector to wagmi config">
        In your wagmi config, add the WalletKit connector with your WalletKit Project ID.

        <Tip>You can get your Project ID from the [API Keys](https://app.walletkit.com/api-keys) page in the WalletKit dashboard.</Tip>

        ```typescript theme={null}
        import {walletKitLink} from "@walletkit/wagmi-link";

        export const wagmiConfig = createConfig({
          chains: [..],
          transports: {..},
          connectors: [
            walletKitLink({
              projectId: '<WalletKit-Project-ID>',
            }),
          ]
        })
        ```
      </Step>

      <Step title="Add WalletKitLinkWagmiProvider">
        Wrap your app in `WalletKitLinkWagmiProvider`, adding it right after `WagmiProvider` and `QueryClientProvider`.

        ```typescript theme={null}
          import {WalletKitLinkWagmiProvider} from "@walletkit/wagmi-link"

          export function App() {
            return (
              <WagmiProvider config={wagmiConfig}>
                <QueryClientProvider client={queryClient}>
                  <WalletKitLinkWagmiProvider>
                    ...
                  </WalletKitLinkWagmiProvider>
                </QueryClientProvider>
              </WagmiProvider>
            )
          }
        ```
      </Step>
    </Steps>
  </Tab>
</Tabs>