Web3 Onboard
Open-source, framework-agnostic JavaScript library to onboard users to web3 apps. Help your users transact with ease by enabling wallet connection, real-time transaction states, and more.
onboard connect wallet
Framework Agnostic
Support all your favorite frameworks.
Use Web3 Onboard with any of your favorite Javascript libraries.
Minimal Dependencies
All wallet dependencies are included in separate packages, so you only include the ones you want to use in your app. Core package is only 815kb minified.
Dynamic Imports
Supporting multiple wallets in your app requires a lot of dependencies. Web3 Onboard dynamically imports a wallet and it's dependencies only when the user selects it, so that minimal bandwidth is used.
Wallet Provider Standardization
All wallet modules expose a provider that is patched to be compliant with the EIP-1193, EIP-1102, EIP-3085, EIP-3326, and EIP-6963 specifications.
Multiple Chain Support
The best connect wallet button for allowing users to switch between chains/networks with ease.
Enable Multi-Wallet and Multi-Chain functionality with one library
Web3 Onboard is the quickest and easiest way to add multi-wallet and multi-chain support to your project. With built-in modules for more than 35 unique hardware and software wallets, Web3 Onboard saves you time and headaches.
Onboard Supported Chains
onboard connect wallets
Account Center
Multiple Wallets and Accounts Connection:
Allow your users to connect multiple wallets and multiple accounts within each wallet at the same time to your dapp.
Themeable
Powerful customization options for all your needs
Style Web3 Onboard to fit into your existing designs, or pick from our pre-made themes.
css 
        :root {
  --w3o-background-color: #1a1d26;
  --w3o-foreground-color: #242835;
  --w3o-text-color: #eff1fc;
  --w3o-border-color: #33394b;
  --w3o-action-color: #929bed;
  --w3o-border-radius: 16px;
}
onboard connect wallet themes

Who's using Web3 Onboard?

Web3-Onboard-users

Getting Started

Installation

Install the core Web3 Onboard library and the injected wallets module to support browser extension and mobile wallets:

terminal 
        npm i @web3-onboard/core @web3-onboard/injected-wallets

Quick Start

Then initialize in your app:

js 
        import Onboard from '@web3-onboard/core'
import injectedModule from '@web3-onboard/injected-wallets'
import { ethers } from 'ethers'

const MAINNET_RPC_URL = 'https://mainnet.infura.io/v3/<INFURA_KEY>'

const injected = injectedModule()

const onboard = Onboard({
  wallets: [injected],
  chains: [
    {
      id: '0x1',
      token: 'ETH',
      label: 'Ethereum Mainnet',
      rpcUrl: MAINNET_RPC_URL
    },
    {
      id: '0x2105',
      token: 'ETH',
      label: 'Base',
      rpcUrl: 'https://mainnet.base.org'
    }
  ]
})

const wallets = await onboard.connectWallet()

console.log(wallets)

if (wallets[0]) {
  // create an ethers provider with the last connected wallet provider
  const ethersProvider = new ethers.providers.Web3Provider(wallets[0].provider, 'any')
  // if using ethers v6 this is:
  // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')

  const signer = ethersProvider.getSigner()

  // send a transaction with the ethers provider
  const txn = await signer.sendTransaction({
    to: '0x',
    value: 100000000000000
  })

  const receipt = await txn.wait()
  console.log(receipt)
}