ConnectEmbed

Install the Connect SDK

npm i thirdweb

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

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

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

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

import { ConnectEmbed } 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>
      <ConnectEmbed client={client} wallets={wallets} />
    </ThirdwebProvider>
  );
}

View full list of support wallets.

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

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

View full theme properties.