Skip to main content



This documentation is for Web3Modal v3 which is currently in Beta. You can find Web3Modal v2 documentation here


With Web3Modal React, we work with the Wagmi library which is a collection of React Hooks to make your dapp development flow easier. You can sign messages, interact with smart contracts, and much more.

Don't have a project ID?

Head over to WalletConnect Cloud and create a New Project now!

Get startedcloud illustration


npm install @web3modal/wagmi@beta wagmi viem


You can start Web3Modal configuration using either default or custom mode.

Default mode will implement WalletConnect, Browser Wallets (injected) and Coinbase options in addition to Wagmi's public provider and WalletConnect's provider.

Start by importing createWeb3Modal, defaultWagmiConfig and wagmi packages, then create wagmiConfig using defaultWagmiConfig function as shown below. Finally, pass wagmiConfig to createWeb3Modal.

import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react'

import { WagmiConfig } from 'wagmi'
import { arbitrum, mainnet } from 'wagmi/chains'

// 1. Get projectId
const projectId = 'YOUR_PROJECT_ID'

// 2. Create wagmiConfig
const chains = [mainnet, arbitrum]
const wagmiConfig = defaultWagmiConfig({ chains, projectId, appName: 'Web3Modal' })

// 3. Create modal
createWeb3Modal({ wagmiConfig, projectId, chains })

export default function App() {
return (
<WagmiConfig config={wagmiConfig}>
// Rest of your app...

Trigger the modal

To open Web3Modal you can use our default web components or build your own logic using Web3Modal hooks.

You can use default web components to open the modal
export default function ConnectButton() {
return <w3m-button />

Learn more about the Web3Modal web components here


Web components are global html elements that don't require importing.

Use wagmi hooks

wagmi provides everything you'll need to start working with accounts, contracts, chains and much more.

import { useAccount, useContract, useBalance } from 'wagmi'