---
title: How to Connect a Wallet with React
description:
  "Every application on Solana requires a connection with a user's wallet to
  use. Learn how to connect to wallets on Solana."
---

Solana's [wallet-adapter](https://github.com/anza-xyz/wallet-adapter) library
makes it easy to manage wallet connections with a frontend application.

### Reference Nextjs Template

This template is only compatible with `@solana/web3.js`.

<Cards>
  <Card
    title="Deploy on Vercel"
    href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fsolana-developers%2Fanchor-web3js-nextjs&root-directory=frontend&demo-title=Anchor%20Web3.js%20Next.js%20Demo&demo-description=An%20example%20deployment%20of%20the%20Anchor%20Web3.js%20Next.js%20project.&demo-url=https%3A%2F%2Fanchor-web3js-nextjs.vercel.app%2F&project-name=anchor-web3js-nextjs&repository-name=anchor-web3js-nextjs"
  >
    Deploy your first Solana application on Vercel
  </Card>
  <Card
    title="Vercel Preview"
    href="https://anchor-web3js-nextjs-jade.vercel.app/"
  >
    Try the deployed application
  </Card>
</Cards>

Deploy your first Solana application - a simple Counter Program built using the
Anchor framework. This example covers all the core Solana concepts to get
started building on Solana. View the source code
[here](https://github.com/solana-developers/anchor-web3js-nextjs).

<Accordions>
<Accordion title="Application Demo">

<video
  width="100%"
  autoPlay
  loop
  muted
  playsInline
  style={{
    borderRadius: "10px"
  }}
>
  <source src="/assets/docs/counter.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

</Accordion>
</Accordions>

<Callout type="info">
  For a `@solana/kit` example, reference the [Kit
  example](https://github.com/anza-xyz/solana-web3.js/tree/main/examples/react-app).
</Callout>

## Dependencies

If you are creating a new Nextjs project, install the following dependencies:

```terminal
$ npm install @solana/web3.js \
    @solana/wallet-adapter-base \
    @solana/wallet-adapter-react \
    @solana/wallet-adapter-react-ui
```

<Callout type="info">
  This example uses Wallet Standard discovery with `wallets={[]}`, so it does
  not need the `@solana/wallet-adapter-wallets` bundle. That bundle includes
  legacy adapters and can install deprecated WalletConnect v1 dependencies. If
  you need WalletConnect protocol support specifically, use Reown's [Solana
  Adapter](https://docs.reown.com/advanced/providers/solana-adapter).
</Callout>

### Create Solana Provider

Create a `SolanaProvider` that will be used to provide the Solana context to the
application.

[Source Reference](https://github.com/solana-developers/anchor-web3js-nextjs/blob/main/frontend/components/counter/provider/Solana.tsx)

```tsx title="Solana Provider"
"use client";

import React, { FC, ReactNode, useMemo } from "react";
import {
  ConnectionProvider,
  WalletProvider
} from "@solana/wallet-adapter-react";
import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
import { clusterApiUrl } from "@solana/web3.js";
import "@solana/wallet-adapter-react-ui/styles.css";

interface SolanaProviderProps {
  children: ReactNode;
}

export const SolanaProvider: FC<SolanaProviderProps> = ({ children }) => {
  // The network can be set to 'devnet', 'testnet', or 'mainnet'
  const network = WalletAdapterNetwork.Devnet;

  // You can also provide a custom RPC endpoint
  const endpoint = useMemo(() => clusterApiUrl(network), [network]);

  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={[]} autoConnect>
        <WalletModalProvider>{children}</WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  );
};
```

### Wrap the Application in the Solana Provider

Add the `SolanaProvider` to the `RootLayout` in the `app` directory.

[Source Reference](https://github.com/solana-developers/anchor-web3js-nextjs/blob/main/frontend/app/layout.tsx)

```tsx title="Root Layout"
import "./globals.css";
import "@solana/wallet-adapter-react-ui/styles.css";
import { SolanaProvider } from "@/components/counter/provider/Solana";

export default function RootLayout({
  children
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html>
      <body>
        <SolanaProvider>{children}</SolanaProvider>
      </body>
    </html>
  );
}
```