Skip to main content

Getting Started

To get started, install the required dependencies into your React project.

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

Wrap your application in the ThirdwebProvider component to start using the SDK.

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

const App = () => {
return (
<ThirdwebProvider activeChain="ethereum">
<YourApp />

Examples of where to set this up: Create React App Next.js Vite

With the provider set up, all of the SDKs hooks and components work out of the box!

Now you can connect to the users wallet and start calling functions on your smart contracts like so:

import { Web3Button } from "@thirdweb-dev/react";

const Home = () => {
return (
action={async (contract) =>"myFunctionName")}
Call myFunctionName from the connected wallet


When using client-side libraries, additional polyfills are required.

Create React App

Use react-app-rewired to tweak the webpack configuration.

npm i assert react-app-rewired stream -D

Finally, update the scripts to use react-app-rewired:

  "scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject",

Next, create a config-overrides.js file in the root of your project and add the following:

const webpack = require("webpack");

module.exports = function override(config) {
const fallback = config.resolve.fallback || {};
config.resolve.fallback = fallback;
config.plugins = (config.plugins || []).concat([
new webpack.ProvidePlugin({
process: "process/browser",
Buffer: ["buffer", "Buffer"],
test: /\.m?js/,
resolve: {
fullySpecified: false,

return {
// This is needed to not show the warning about this modules don't have src files, only on dist (build)
ignoreWarnings: [
module: /node_modules\/@walletconnect/,
module: /node_modules\/eth-rpc-errors/,
module: /node_modules\/json-rpc-engine/,
module: /node_modules\/@metamask/,
module: /node_modules\/,

Now, you can start using the SDK!


In the vite.config.js file, add the following configuration:

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
plugins: [react()],
define: {
global: "globalThis",
"process.env": {},

Now, you can start using the SDK!