UI Components

You can use ConnectButton or ConnectEmbed component for a quick, easy and customizable UI.

These components provide a prebuilt UI for connecting various wallets and take care of a lot of wallet-specific edge cases - so you can focus on building your app.


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

These components support over 500+ wallets, including support in-app wallets and account abstraction.

It also automatically shows all installed EIP-6963 compliant wallet extensions installed by the user.

Creating Wallets

You can create any wallet by id with auto completion using the createWallet function. Or use one of the first party wallets like inAppWallet or ecosystemWallet.

inAppWallet

Create an in app wallet

ecosystemWallet

Create an ecosystem wallet

createWallet

Create any external wallet by id with auto completion

React Components

ThirdwebProvider

Provider for the maintaining wallet state

ConnectButton

All in one button with connected state

ConnectEmbed

Standalone connect component

AutoConnect

Automatically connect to the wallet that the user last connected

The SDK supports 500+ wallets out of the box, all you need to pass is their id.

Supported Wallets

See all 500+ wallets supported by the Connect SDK

Post Connection

Once the wallet is connected, you can use the Connection hooks to get information about the connected wallet like getting the address, account, etc