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>;
};

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>;
};