Docs

ConnectEmbed

Defined in thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx#L166

An inline wallet connection component that allows to:

  • Connect to 350+ external wallets

  • Connect with email, phone, passkey or socials

  • Convert any wallet to a ERC4337 smart wallet for gasless transactions

  • Sign in with ethereum (Auth)

It renders the same UI as the ConnectButton component's modal - but directly inline in the page instead of being in a modal.

Once connected, the component does not render any UI. It only renders UI if wallet is not connected.

Example

Default setup

import { createThirdwebClient } from "thirdweb";
import { ConnectEmbed } from "thirdweb/react";
 
const client = createThirdwebClient({ clientId: "YOUR_CLIENT_ID" });
 
<ConnectEmbed client={client} />;

View all available config options

Customization options

Customizing wallet options

<ConnectEmbed
  client={client}
  wallets={[
    createWallet("io.metamask"),
    createWallet("com.coinbase.wallet"),
    createWallet("me.rainbow"),
  ]}
/>;

View all available wallets

Customizing the default chain to connect to

import { base } from "thirdweb/chains";
 
<ConnectEmbed client={client} chain={base} />;

Enabling sign in with ethereum (Auth)

<ConnectEmbed
  client={client}
  auth={{
    isLoggedIn: async (address) => {
      console.log("checking if logged in!", { address });
      return await isLoggedIn();
    },
    doLogin: async (params) => {
      console.log("logging in!");
      await login(params);
    },
    getLoginPayload: async ({ address }) =>
      generatePayload({ address }),
    doLogout: async () => {
      console.log("logging out!");
      await logout();
    },
  }}
/>;

Customizing the theme

<ConnectEmbed client={client} theme="light" />;

For more granular control, you can also pass a custom theme object:

<ConnectEmbed
  client={client}
  theme={lightTheme({
    colors: {
      modalBg: "red",
    },
  })}
/>;

View all available themes properties

Changing the display language

<ConnectEmbed client={client} locale="ja_JP" />;

View all available locales

Parameters

Returns

A JSX element that renders the <ConnectEmbed> component.