Headless

Create a login experience tailor-made for your app. Add your wallets of choice, enable web2 sign-in options and create a modal that fits your brand.

Add instantly Documentation

Create custom UI using hooks

Full control over your UI using react hooks. Wallet state management is all handled for you.

Code

import { useConnect } from "thirdweb/react";
import { createWallet } from "thirdweb/wallets";
import { shortenAddress } from "thirdweb/utils";

function App() {
  const account = useActiveAccount();
  const wallet = useActiveWallet();
  const { connect, isConnecting, error } = useConnect();
  const { disconnect } = useDisconnect();

  if (account) {
    return (
      <div>
        <p>Connected: {shortenAddress(account.address)} </p>
        {wallet && (
          <button onClick={() => disconnect(wallet)}>Disconnect</button>
        )}
      </div>
    );
  }

  return (
    <button
      onClick={() =>
        connect(async () => {
          // 500+ wallets supported with id autocomplete
          const wallet = createWallet("io.metamask");
          await wallet.connect({ client });
          return wallet;
        })
      }
    >
      Connect MetaMask
    </button>
  );
}

Preview

Open prebuilt connect modal using a hook

Code

import { useConnectModal } from "thirdweb/react";

function App() {
  const { connect, isConnecting } = useConnectModal();

  return (
    <button
      onClick={async () => {
        // pass modal configuration options to the connect function
        const wallet = await connect({ client });
        console.log("connected", wallet);
      }}
    >
      Sign in
    </button>
  );
}

Preview