Skip to main content

Connect Wallet Button

The Connect Wallet button allows the user to connect to your application with the most popular wallets, such as MetaMask, Coinbase, or WalletConnect.

import { ConnectWallet } from "@thirdweb-dev/react";

<ConnectWallet />;

After the user has connected, they can:

  • View the connected wallet address
  • View their balance of the native token (such as ETH)
  • Switch networks, disconnect their wallet, and copy their wallet address

You can view a live demo of the component below:


accentColorOptionalThe background color of the buttonHex Code
colorModeOptionalChange the color of the text inside the buttonlight or dark
authOptionalAsk users to sign in using auth after connecting their walletLoginOptions


Learn how to integrate the ConnectWallet component into your application.



import { ConnectWallet } from "@thirdweb-dev/react";

// Some customization of the button style

With Auth

If you have authConfig options in your ThirdwebProvider, you can optionally pass an auth config to the ConnectWallet component that asks the user to sign in after connecting their wallet.

import { ConnectWallet } from "@thirdweb-dev/react";

// Ask users to sign in using auth after connecting their wallet
loginOptional: false,

Advanced Auth

You can fully customize the auth configuration:

import { ConnectWallet } from "@thirdweb-dev/react";

loginConfig: {
// The URL to redirect to on login.
redirectTo: string,
// Function to run on error.
onError: (error: string) => void
// If you want users to sign in after connecting their wallet
loginOptional: boolean,
loginOptions: {
// The optional nonce of the login request used to prevent replay attacks
nonce: string,
// The optional time after which the login payload will be invalid
expirationTime: Date,
// The optional chain ID that the login request was intended for
chainId: number,