Are you an LLM? Read llms.txt for a summary of the docs, or llms-full.txt for the full context.
Skip to content

Getting Started

Installation

npm
npm install @txkit/react @txkit/themes viem wagmi @tanstack/react-query

Peer Dependencies

PackageVersion
react>= 18
react-dom>= 18
viem>= 2
wagmi>= 3
@tanstack/react-query>= 5

txKit is fully typed - no additional @types/* packages needed.

Quick Start (Testnet)

Fastest way to try txKit - no RPC keys, no chain arrays:

import '@txkit/themes'
 
import { TxKitProvider, ConnectWallet } from '@txkit/react'
 
const App = () => (
  <TxKitProvider config={{ testnet: true }}>
    <ConnectWallet />
  </TxKitProvider>
)

testnet: true ships a Sepolia-only preset using viem's public RPC endpoints. Mainnet is registered internally so ENS name and avatar resolution still works, but it's hidden from the chain selector so users don't accidentally switch.

Setup (Mainnet)

For production, pass your chains and transports explicitly:

import '@txkit/themes'
 
import { TxKitProvider, ConnectWallet } from '@txkit/react'
import { mainnet } from 'viem/chains'
import { http } from 'viem'
 
const App = () => (
  <TxKitProvider config={{
    chains: [ mainnet ],
    transports: { [mainnet.id]: http('https://eth-mainnet.g.alchemy.com/v2/YOUR_KEY') },
  }}>
    <ConnectWallet />
  </TxKitProvider>
)

TxKitProvider creates WagmiProvider and QueryClientProvider internally - you don't need to set them up.

Config Options

PropTypeDefaultDescription
testnetbooleanfalseUse Sepolia preset (no chains/transports required)
chains[Chain, ...Chain[]]Required unless testnet: trueSupported chains
transportsRecord<number, Transport>Required unless testnet: trueRPC transport per chain
theme'light' | 'dark' | 'auto''auto'Color theme
variant'default' | 'soft' | 'sharp' | 'rounded''default'Visual style preset
walletConnectProjectIdstring-Enables WalletConnect
autoConnectbooleantrueReconnect on reload

For the full config reference, see TxKitProvider.

Already Using wagmi?

If your app already has WagmiProvider and QueryClientProvider, use embedded mode to avoid duplicate providers:

<WagmiProvider config={yourConfig}>
  <QueryClientProvider client={yourQueryClient}>
    <TxKitProvider embedded>
      <ConnectWallet />
    </TxKitProvider>
  </QueryClientProvider>
</WagmiProvider>

See TxKitProvider - Embedded Mode for details.

Where to next