How to Add a Connect Wallet Button to Your Website

In this guide, we'll show you how to easily add a connect wallet button to your web application using the React SDK.
Setting up web3 on your website and letting your users connect their wallets is essential for any web3 web app.
Our Web3 SDK allows you to connect to all of the most popular wallets:
Get Started
To get started with thirdweb, you can run the following to install our packages into an existing React project:
# Run this to install with npm
npm install @thirdweb-dev/react @thirdweb-dev/sdk ethers@5
# Or run this to install with yarn
yarn add @thirdweb-dev/react @thirdweb-dev/sdk ethers@5
Once you've installed the necessary packages, set up the ThirdwebProvider
to wrap the rest of your application:
import { ChainId, ThirdwebProvider } from "@thirdweb-dev/react";
// This is the chainId your dApp will work on.
const activeChainId = ChainId.Goerli;
function MyApp({ Component, pageProps }) {
return (
<ThirdwebProvider desiredChainId={activeChainId}>
<Component {...pageProps} />
</ThirdwebProvider>
);
}
export default MyApp;
Connect Wallet
Now you're ready to use one our ConnectWallet component to connect users' wallets to your site!
import { ConnectWallet } from "@thirdweb-dev/react";
export default function Home() {
return (
<ConnectWallet accentColor="#f213a4" colorMode="dark" />
);
}
And that's it! If you have any questions, drop us a line on our Discord server.