thirdwebDocs

ConnectButton

The ConnectButton component unlocks all of thirdweb’s login, onboarding, and blockchain interaction capabilities via a customizable and secure interface.

When logged out, the ConnectButton offers users secure login methods with email, phone, socials, and external wallets. When logged in, the ConnectButton enables users to send and receive funds to their account, purchase crypto with onramps, and execute transactions within your application.

Get started

Automatic Setup

Starter templates are pre-configured with ConnectButton to help you get started quickly.

In your CLI, run:

npx thirdweb create --app

Select a framework: Next, Vite, or Expo. The command will create a new directory with starter code and the necessary dependencies installed.

Manual Setup

  • Install

    Install the Connect SDK

    npm i thirdweb

  • Obtain Client Id

    On the thirdweb dashboard, navigate to settings to create an API Key to obtain a Client Id.

  • Add ConnectButton component

    In your application, initialize and add the ConnectButton component by passing in your Client Id.

    import { createThirdwebClient } from "thirdweb";
     
    import { ThirdwebProvider, ConnectButton } from "thirdweb/react";
     
    const client = createThirdwebClient({ clientId: your_client_id });
     
    export default function App() {
      return (
        <ThirdwebProvider>
          <ConnectButton client={client} />
        </ThirdwebProvider>
      );
    }

  • Configure login options

    Configure the wallets property to enable various login options such as email & phone number, socials, and EOAs such as MetaMask or Phantom.

    import { ConnectButton } from "thirdweb/react";
    import { createWallet, inAppWallet } from "thirdweb/wallets";
     
    const wallets = [
      inAppWallet(),
      createWallet("io.metamask"),
      createWallet("com.coinbase.wallet"),
      createWallet("me.rainbow"),
    ];
     
    export default function App() {
      return (
        <ThirdwebProvider>
          <ConnectButton client={client} wallets={wallets} />
        </ThirdwebProvider>
      );
    }

    View full list of support wallets.

  • Customize theme

    Use the default light and dark theme or override the default theme to customize the appearance of the modal.

    import { ConnectButton } from "thirdweb/react";
    import { lightTheme } from "thirdweb/react";
     
    const customTheme = lightTheme({
      colors: {
        modalBg: "red",
      },
    });
     
    export default function App() {
      return (
        <ThirdwebProvider>
          <ConnectButton client={client} theme={customTheme} />
        </ThirdwebProvider>
      );
    }

    View full theme properties.

To fully customize and learn more about the ConnectButton properties, view the full reference.

connect-button-example

Example of how to use ConnectButton component created in a Next application.

View on GitHub