Installation ​

Install Wagmi via your package manager, a <script> tag, or build from source.

Package Manager ​

Install the required packages.

pnpm add wagmi viem@2.x @tanstack/react-query

pnpm add wagmi viem@2.x @tanstack/react-query

npm install wagmi viem@2.x @tanstack/react-query

npm install wagmi viem@2.x @tanstack/react-query

yarn add wagmi viem@2.x @tanstack/react-query

yarn add wagmi viem@2.x @tanstack/react-query

bun add wagmi viem@2.x @tanstack/react-query

bun add wagmi viem@2.x @tanstack/react-query

• Viem is a TypeScript interface for Ethereum that performs blockchain operations.
• TanStack Query is an async state manager that handles requests, caching, and more.
• TypeScript is optional, but highly recommended. Learn more about TypeScript support.

CDN ​

If you're not using a package manager, you can also use Wagmi via an ESM-compatible CDN such as esm.sh. Simply add a <script type="module"> tag to the bottom of your HTML file with the following content.

<script type="module">
  import React from 'https://esm.sh/react@18.2.0'
  import { QueryClient } from 'https://esm.sh/@tanstack/react-query'
  import { createClient } from 'https://esm.sh/viem@2.x'
  import { createConfig } from 'https://esm.sh/wagmi'
</script>

<script type="module">
  import React from 'https://esm.sh/react@18.2.0'
  import { QueryClient } from 'https://esm.sh/@tanstack/react-query'
  import { createClient } from 'https://esm.sh/viem@2.x'
  import { createConfig } from 'https://esm.sh/wagmi'
</script>

Check out the React docs for info on how to use React without JSX.

Requirements ​

Wagmi is optimized for modern browsers. It is compatible with the following browsers.

• Chrome 64+
• Edge 79+
• Firefox 67+
• Opera 51+
• Safari 12+

Using Unreleased Commits ​

If you can't wait for a new release to test the latest features, you can either install from the canary tag (tracks the main branch).

pnpm add wagmi@canary

pnpm add wagmi@canary

npm install wagmi@canary

npm install wagmi@canary

yarn add wagmi@canary

yarn add wagmi@canary

bun add wagmi@canary

bun add wagmi@canary

Or clone the Wagmi repo to your local machine, build, and link it yourself.

gh repo clone wevm/wagmi
cd wagmi
pnpm install
pnpm build
cd packages/react
pnpm link --global

gh repo clone wevm/wagmi
cd wagmi
pnpm install
pnpm build
cd packages/react
pnpm link --global

Then go to the project where you are using Wagmi and run pnpm link --global wagmi (or the package manager that you used to link Wagmi globally). Make sure you installed the required peer dependencies and their versions are correct.

Security ​

Ethereum-related projects are often targeted in attacks to steal users' assets. Make sure you follow security best-practices for your project. Some quick things to get started.

• Pin package versions, upgrade mindfully, and inspect lockfile changes to minimize the risk of supply-chain attacks.
• Install the Socket Security GitHub App to help detect and block supply-chain attacks.
• Add a Content Security Policy to defend against external scripts running in your app.