Skip to main content

Building Frontend Applications

You can build front-end applications by using our React and TypeScript SDKs!

Front-end applications are best-suited when you want users to connect their wallets to your web application and interact with your contracts using their wallet; such as an NFT Minting Website.

Automatic Set Up

The easiest way to get started is by using the thirdweb CLI.

This interactive tool creates a new project with thirdweb pre-configured with a framework and language of your choice.

npx thirdweb create

That's it! You're project is ready to start interacting with your contract!

Starter Kits & Templates

You can start with one of our template projects by passing the --template flag and the name of the example repo.

Manual Installation

If you have an existing project you want to integrate thirdweb into, install the thirdweb SDKs:

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

Then wrap your application in the ThirdwebProvider to get started!

import { ThirdwebProvider, ChainId } from "@thirdweb-dev/react";

// the chainId our app wants to be running on
// for our example the Polygon Mumbai Testnet
const desiredChainId = ChainId.Mumbai;

export const MyApp = () => {
return (
<ThirdwebProvider desiredChainId={desiredChainId}>
{/* Your App Goes Here */}
</ThirdwebProvider>
);
};

From a Signer / Provider

import { ChainId, ThirdwebSDKProvider } from "@thirdweb-dev/react";

// This is the chainId your dApp will work on.
const activeChainId = ChainId.Mainnet;

function MyApp({ Component, pageProps }) {
// If you want to use any custom provider or signer, add it here.
const myProvider = ...;
const mySigner = ...;


return (
<ThirdwebSDKProvider
desiredChainId={activeChainId}
signer={mySigner}
provider={myProvider}
>
{/* Your App Goes Here */}
</ThirdwebSDKProvider>
);
}

export default MyApp;