Skip to main content

UI Kit

The thirdweb React SDK provides straight forward ways to let users connect wallets, render NFT media, etc.

Installation​

The React SDK has a peer dependency on the @thirdweb-dev/sdk and ethers.

npm install @thirdweb-dev/react @thirdweb-dev/sdk ethers

You have to wrap your application root in the ThirdwebProvider to get started.

App.jsx
import { ThirdwebProvider } from "@thirdweb-dev/react";
const App = () => {
  return (
    <ThirdwebProvider>{/* <Your App Code Goes Here /> */}</ThirdwebProvider>
  );
};

Code Snippets​

Connect Wallet Button​

ConnectWallet.jsx
import { useMetamask } from "@thirdweb-dev/react";

const ConnectWallet = () => {
  const connectWithMetamask = useMetamask();

  return <button onClick={() => connectWithMetamask()}>Connect Wallet</button>;
};
Other Wallet Connection Methods

Disconnect Wallet​

DisconnectWallet.jsx
import { useDisconnect } from "@thirdweb-dev/react";

const DisconnectWallet = () => {
  const disconnect = useDisconnect();

  return <button onClick={() => disconnect()}>Disconnect Wallet</button>;
};

Get the wallet address of a connected user​

ConnectedWallet.jsx
import { useAddress } from "@thirdweb-dev/react";

const ConnectedWallet = () => {
  const connectedWalletAddress = useAddress();

  return <div>{connectedWalletAddress || "No Wallet Connected"}</div>;
};