API Reference

This page describes the APIs for ConnectKit which you can reference during development.

Components and Hooks

Below is a list of the React.js components and Hooks we provide as part of the ConnectKit library:

Component / Hook	Description
<ConnectKitProvider />	Provides state and data to various ConnectKit components. Wrap ConnectKitProvider around your React.js app.
<ConnectKitButton />	The ConnectKit button. Place this component where you’d like the Connect Wallet button to appear.
<ConnectKitButton.Custom />	Design your own Connect button. Various wallet connection states are provided through render props.
<Avatar />	Change the avatar used in ConnectKit to more closely match the look and feel of your app.
<ChainIcon />	To help with consistency, you can access ConnectKit's chain icons from within your app.
useModal()	Programmatically control some aspects of the modal.
useSIWE()	Programmatically control some aspects of SIWE.
useChains()	Access the configured chains via this convenient Hook.

ConnectKitProvider

Wrap <ConnectKitProvider> around your React.js app to provide state and data to various ConnectKit components.

theme

Sets which theme ConnectKit should use. Below is a table of values for the theme property.

Theme Prop	Description	Light/Dark Mode Support
`default`	Default theme
`web95`	Web95 theme
`retro`	Retro theme
`soft`	Soft theme
`midnight`	Midnight theme
`minimal`	Minimal theme
`rounded`	Rounded theme
`nouns`	Nouns theme

mode

Sets which dark/light mode configuration ConnectKit should use. Below is a table of values for the mode property.

Mode Prop	Description
`auto`	Either dark or light that matches the user's system color scheme
`dark`	Dark mode
`light`	Light mode

customTheme

Configure individual styles for ConnectKit, overriding styles from the selected theme. Below is a table of values for the customTheme property.

Overriding theme variables isn't a stable feature yet and could change in future versions of ConnectKit. We suggest only customizing the theme if you're confident you can migrate any changes when upgrading.

Connect Wallet Button variables

Primary Button variables

Secondary Button variables

Tertiary Button variables

Modal variables

Text variables

Miscellaneous variables

options

Configuration options you can toggle on/off. Below is a list of options and their default values that are available for the options property.

avoidLayoutShift

boolean

Default is true

Avoids layout shift when the ConnectKit modal is open by adding padding to the<body>. Alternatively, set this to false and create your own solution using the css variable --ck-scrollbar-width

bufferPolyfill

boolean

Default is true

Some bundlers require a Buffer polyfill for WalletConnect. We check and implement this by default, but if you need to disable our implementation then you can set this option to false.

customAvatar

React.ReactNode

Change the avatar used in ConnectKit to more closely match the look and feel of your app. To learn more, visit the custom avatar docs.

disableSiweRedirect

boolean

Disable the redirect to SIWE page when the user connects to a wallet.

disclaimer

ReactNode | string

Default is null

Provide a disclaimer for things like terms and conditions that will be displayed to users in the ConenctKit modal when they're not yet connected.

embedGoogleFonts

boolean

Default is false

Automatically embeds Google Font of the current theme.

enforceSupportedChains

boolean

Default is false

By default, ConnectKit will only allow users to connect to chains that are supported by your app. Set this to false to allow users to connect to any chain.

ethereumOnboardingUrl

string

Default is https://ethereum.org/en/wallets/

Link to a resource for learning more about Ethereum.

hideBalance

boolean

Hide balance in the profile view.

hideNoWalletCTA

boolean

Hide the "I don't have a wallet" call to action in the ConnectKit modal

hideQuestionMarkCTA

boolean

Hide the question mark in top-left of the ConnectKit modal that leads to the "About Wallets" page

hideRecentBadge

boolean

Default is false

Hide the "Recent" badge that appears on the most recently connected wallet connector.

hideTooltips

boolean

Hide any tooltips that would normally appear

initialChainId

number

Default is the first chain in your wagmi config

Target a specific chain to request connection to. By default ConnectKit will autotarget the first chain defined in your WagmiProvider's config'. Set this to 0 to remove chain targetting.

language

Customize the language used in ConnectKit to better suit your audience.

overlayBlur

number

Accepts a numerical value to control the degree of blur applied to the overlay. Alternatively you can use the theme variable --ck-overlay-backdrop-filter to achieve the same effect.

truncateLongENSAddress

boolean

Default is true

Truncates long ENS addresses in the connect button with ellipsis.

walletConnectCTA

'modal' | 'link' | 'both'

Default is 'modal'

When viewing the WalletConnect QR code, we display a button to open the official WalletConnect modal. This allows users to access more niche connectors if needed.
Use link to display a button to copy the WalletConnect URI. To show both options, use both.

walletConnectName

string

Default is 'Other Wallets'

By default, the WalletConnect option is named "Other Wallets". Use this option to change the name to, e.g., "WalletConnect" by providing a string.

walletOnboardingUrl

string

Default is https://ethereum.org/en/wallets/find-wallet/

Link to a resource for learning more about Wallets.

onConnect

Callback function that is called when a wallet is connected.

The onConnect callback function is called with the following arguments:

Argument	Type	Description
address	string	The connected wallet address.
connectorId	string	The ID of the wallet connector that was used to connect the wallet.

onDisconnect

Callback function that is called when a wallet is disconnected.

ConnectKitButton

Place this component where you’d like the Connect Wallet button to appear.

label

string

Default is "Connect Wallet"

Customize the connect button text/label.

showBalance

boolean

Default is false

Display the connected wallet's balance in the connect button when the wallet is connected.

showAvatar

boolean

Default is true

Display the avatar visual in the connect button when a wallet is connected.

ConnectKitButton.Custom

Design your own Connect button. Various wallet connection states are provided through render props.

Render Props

The custom ConnectKit button has various render props to make building a custom button easier. Below is a table of which render props are available.

isConnected

boolean

Whether or not a wallet is connected.

isConnecting

boolean

If ConnectKit is currently connecting.

show

function

Function to show the modal. In the example above we bind this to onClick for the custom button.

hide

boolean

Function to hide the modal. Mainly if you need to programmatically hide the modal.

address

string

The address of the connected wallet.

truncatedAddress

string

Default is true

A truncated version of the connected wallet address.

ensName

string

ENS name if the connected wallet address has one. Otherwise empty string.

chain

Chain

The chain the connected wallet is connected to.

Hooks

useModal

A convenience Hook to show/dismiss the modal. Must be used within a <ConnectKitProvider>.

open

boolean

Whether or not the modal is open.

setOpen

(boolean) => void

Programmatically show/dismiss the modal.

openAbout

() => void

More info

Open the modal on the About page.

openOnboarding

() => void

More info

Open the modal on the Onboarding page.

openProfile

() => void

More info

Open the modal on the Profile page.

openSwitchNetworks

() => void

More info

Open the modal on the Switch Network prompt.

openSIWE

(triggerSIWE?: boolean) => void

More info

Open the modal on the Sign In With Ethereum page. If `triggerSIWE` is set to `true` the signing request will also be prompted.

onConnect

(address: string, connectorId: string) => void

Callback function that is called when a wallet is connected.

onDisconnect

() => void

Callback function that is called when a wallet is disconnected.

useSIWE

A convenience Hook to access SIWE state. Must be used with Sign In With Ethereum.

isSignedIn

boolean

Whether or not the wallet has signed in.

data

SIWESession

Returned data when a wallet has signed in.

data properties

address

string

Wallet address.

chainId

number

Connected Chain ID.

error

Error

Error thrown if there was an error signing the message.

isRejected

boolean

If the user has rejected the signing message.

isError

boolean

If there was an error signing the message.

isLoading

boolean

If the app is waiting for the user to sign the message.

isSuccess

boolean

If the user has successfully signed in.

isReady

boolean

If the app is ready for the user to sign in.

signIn

() => Promise<boolean>

Prompt the user to sign in.

signOut

() => Promise<boolean>

Sign out the user.

reset

() => void

Reset the hook to a fresh state.

useChains

You can conveniently access your dApps configured chains via the useChains Hook. This works well with the ChainIcon component.

import { useChains, ChainIcon } from "connectkit";

const MyComponent = () => {
  const chains = useChains();
  return (
    <>
      <p>This dApp is supported on the following chains:</p>
      {chains.map((chain) => (
        <div key={chain.id}>
          <ChainIcon id={chain.id} />
          <span>{chain.name}</span>
        </div>
      ))}
    </>
  );
};

Additional Components

To help support easily development we export a few components that we believe some developers might find useful.

Avatar

To help with consistency, you can access the ConnectKit <Avatar> component from within your app. You can use this component to display the user’s ENS avatar outside ConnectKit in, e.g., a profile header

If you have set up a custom avatar then this avatar component will return your custom version instead.

import { Avatar } from "connectkit";

<Avatar name="vitalik.eth" />
<Avatar name="vitalik.eth" size={64} radius={10} />
<Avatar name="vitalik.eth" size={32} radius={0} />
<Avatar address="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" size={16} />
<Avatar address="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" size={8} />

Below are the various props that can be passed to the Avatar component.

address

string

Wallet address

name

string

ENS name

size

number

Default is 96

Size in pixels

radius

number

Default is fully rounded

Radius in pixels

Chain Icon

To help with consistency, you can access ConnectKit's <ChainIcon> component from within your app.

Chain Name	Chain ID	Chain Icon	Unsupported
	null
Ethereum	Ethereum
Goerli	Goerli
ThaiChain	ThaiChain
OP Mainnet	OP Mainnet
Flare Mainnet	Flare Mainnet
Coston	Coston
Songbird Mainnet	Songbird Mainnet
Cronos Mainnet	Cronos Mainnet
Rootstock Mainnet	Rootstock Mainnet
Rootstock Testnet	Rootstock Testnet
Telos	Telos
Telos	Telos
LUKSO	LUKSO
Darwinia Network	Darwinia Network
XinFin Network	XinFin Network
Apothem Network	Apothem Network
BNB Smart Chain	BNB Smart Chain
Syscoin Mainnet	Syscoin Mainnet
Ethereum Classic	Ethereum Classic
OKC	OKC
Conflux eSpace Testnet	Conflux eSpace Testnet
Meter	Meter
Meter Testnet	Meter Testnet
Bitkub	Bitkub
Binance Smart Chain Testnet	Binance Smart Chain Testnet
Gnosis	Gnosis
Shibarium	Shibarium
Coston2	Coston2
Fuse	Fuse
Fuse Sparknet	Fuse Sparknet
Polygon	Polygon
Shimmer	Shimmer
Manta Pacific Mainnet	Manta Pacific Mainnet
X1 Testnet	X1 Testnet
X1 Testnet	X1 Testnet
X Layer Mainnet	X Layer Mainnet
BitTorrent	BitTorrent
Edgeless Testnet	Edgeless Testnet
opBNB	opBNB
Nexilix Smart Chain	Nexilix Smart Chain
Plinga	Plinga
Oasys	Oasys
Fantom	Fantom
Fraxtal	Fraxtal
Kroma	Kroma
zkSync InMemory Node	zkSync InMemory Node
zkSync CLI Local Node	zkSync CLI Local Node
zkSync Era Testnet	zkSync Era Testnet
Boba Network	Boba Network
Hedera Mainnet	Hedera Mainnet
Hedera Testnet	Hedera Testnet
Hedera Previewnet	Hedera Previewnet
zkSync Sepolia Testnet	zkSync Sepolia Testnet
Filecoin Mainnet	Filecoin Mainnet
KCC Mainnet	KCC Mainnet
zkSync Era	zkSync Era
Cronos Testnet	Cronos Testnet
PulseChain	PulseChain
Optimism Goerli	Optimism Goerli
PGN	PGN
Areon Network Testnet	Areon Network Testnet
Areon Network	Areon Network
FlowEVM Testnet	FlowEVM Testnet
Rollux Mainnet	Rollux Mainnet
MetaChain Mainnet	MetaChain Mainnet
Astar	Astar
Mandala TC9	Mandala TC9
Metis Goerli	Metis Goerli
FlowEVM Previewnet	FlowEVM Previewnet
Karura	Karura
Redstone	Redstone
Lycan	Lycan
FlowEVM Mainnet	FlowEVM Mainnet
Acala	Acala
Taraxa Mainnet	Taraxa Mainnet
Taraxa Testnet	Taraxa Testnet
Wanchain	Wanchain
Mode Testnet	Mode Testnet
PulseChain V4	PulseChain V4
5ireChain Thunder Testnet	5ireChain Thunder Testnet
Wanchain Testnet	Wanchain Testnet
Zora Goerli Testnet	Zora Goerli Testnet
Klaytn Baobab Testnet	Klaytn Baobab Testnet
Ekta Testnet	Ekta Testnet
BNB Greenfield Chain	BNB Greenfield Chain
BitTorrent Chain Testnet	BitTorrent Chain Testnet
Conflux eSpace	Conflux eSpace
Bronos Testnet	Bronos Testnet
Bronos	Bronos
Shimmer Testnet	Shimmer Testnet
Metis	Metis
Polygon zkEVM	Polygon zkEVM
WEMIX	WEMIX
WEMIX Testnet	WEMIX Testnet
Core Dao	Core Dao
DeFiChain EVM Mainnet	DeFiChain EVM Mainnet
DeFiChain EVM Testnet	DeFiChain EVM Testnet
Lisk	Lisk
Moonbeam Development Node	Moonbeam Development Node
Moonbeam	Moonbeam
Moonriver	Moonriver
Moonbase Alpha	Moonbase Alpha
Sei Network	Sei Network
Localhost	Localhost
Polygon zkEVM Testnet	Polygon zkEVM Testnet
MetaChain Istanbul	MetaChain Istanbul
Tenet	Tenet
Horizen Gobi Testnet	Horizen Gobi Testnet
Mint Sepolia Testnet	Mint Sepolia Testnet
Reya Network	Reya Network
Metal L2	Metal L2
LightLink Phoenix Mainnet	LightLink Phoenix Mainnet
LightLink Pegasus Testnet	LightLink Pegasus Testnet
Ekta	Ekta
Dogechain	Dogechain
Telcoin Adiri Testnet	Telcoin Adiri Testnet
Ronin	Ronin
Edgeware EdgeEVM Mainnet	Edgeware EdgeEVM Mainnet
Saigon Testnet	Saigon Testnet
Beresheet BereEVM Testnet	Beresheet BereEVM Testnet
Edgeless Network	Edgeless Network
Kava EVM Testnet	Kava EVM Testnet
Kava EVM	Kava EVM
RSS3 VSL Sepolia Testnet	RSS3 VSL Sepolia Testnet
Kroma Sepolia	Kroma Sepolia
Polygon zkEVM Cardona	Polygon zkEVM Cardona
Fraxtal Testnet	Fraxtal Testnet
inEVM Mainnet	inEVM Mainnet
Morph Sepolia	Morph Sepolia
SatoshiVM Alpha Mainnet	SatoshiVM Alpha Mainnet
SatoshiVM Testnet	SatoshiVM Testnet
Filecoin Hyperspace	Filecoin Hyperspace
Crossbell	Crossbell
Astar zkEVM	Astar zkEVM
APEX Testnet	APEX Testnet
Fantom Testnet	Fantom Testnet
Oasis Testnet	Oasis Testnet
Merlin	Merlin
LUKSO Testnet	LUKSO Testnet
Lisk Sepolia	Lisk Sepolia
Nexi	Nexi
Beam	Beam
IoTeX	IoTeX
IoTeX Testnet	IoTeX Testnet
MEVerse Chain Testnet	MEVerse Chain Testnet
BlackFort Exchange Network Testnet	BlackFort Exchange Network Testnet
BlackFort Exchange Network	BlackFort Exchange Network
Mantle	Mantle
Mantle Testnet	Mantle Testnet
Mantle Sepolia Testnet	Mantle Sepolia Testnet
Bahamut	Bahamut
opBNB Testnet	opBNB Testnet
Syscoin Tanenbaum Testnet	Syscoin Tanenbaum Testnet
ZetaChain	ZetaChain
ZetaChain Athens Testnet	ZetaChain Athens Testnet
Horizen EON	Horizen EON
MEVerse Chain Mainnet	MEVerse Chain Mainnet
Cyber	Cyber
Canto	Canto
Shardeum Sphinx	Shardeum Sphinx
Klaytn	Klaytn
Base	Base
JIBCHAIN L1	JIBCHAIN L1
Evmos Testnet	Evmos Testnet
Evmos	Evmos
OORT MainnetDev	OORT MainnetDev
Gnosis Chiado	Gnosis Chiado
HAQQ Mainnet	HAQQ Mainnet
BEVM Mainnet	BEVM Mainnet
Fibo Chain	Fibo Chain
L3X Protocol	L3X Protocol
L3X Protocol Testnet	L3X Protocol Testnet
RSS3 VSL Mainnet	RSS3 VSL Mainnet
Beam Testnet	Beam Testnet
Immutable zkEVM	Immutable zkEVM
Phoenix Blockchain	Phoenix Blockchain
Immutable zkEVM Testnet	Immutable zkEVM Testnet
EOS EVM Testnet	EOS EVM Testnet
Holesky	Holesky
EOS EVM	EOS EVM
Nautilus Mainnet	Nautilus Mainnet
Oasis Sapphire	Oasis Sapphire
Oasis Sapphire Testnet	Oasis Sapphire Testnet
DreyerX Mainnet	DreyerX Mainnet
Bitkub Testnet	Bitkub Testnet
Anvil	Anvil
Foundry	Foundry
Hardhat	Hardhat
Zilliqa	Zilliqa
Zilliqa Testnet	Zilliqa Testnet
Mode Mainnet	Mode Mainnet
Q Mainnet	Q Mainnet
Q Testnet	Q Testnet
Arbitrum One	Arbitrum One
Arbitrum Nova	Arbitrum Nova
Celo	Celo
ZKFair Mainnet	ZKFair Mainnet
Avalanche Fuji	Avalanche Fuji
Avalanche	Avalanche
ZKFair Testnet	ZKFair Testnet
Alfajores	Alfajores
Yooldo Verse	Yooldo Verse
Yooldo Verse Testnet	Yooldo Verse Testnet
DODOchain Testnet	DODOchain Testnet
DFK Chain	DFK Chain
HAQQ Testedge 2	HAQQ Testedge 2
Rollux Testnet	Rollux Testnet
PGN	PGN
Linea Goerli Testnet	Linea Goerli Testnet
Linea Goerli Testnet	Linea Goerli Testnet
Linea Sepolia Testnet	Linea Sepolia Testnet
Linea Mainnet	Linea Mainnet
BOB	BOB
Fantom Sonic Open Testnet	Fantom Sonic Open Testnet
Polygon Mumbai	Polygon Mumbai
Polygon Amoy	Polygon Amoy
Berachain Artio	Berachain Artio
Blast	Blast
Base Goerli	Base Goerli
Base Sepolia	Base Sepolia
Chiliz Spicy Testnet	Chiliz Spicy Testnet
Chiliz Chain	Chiliz Chain
Jibchain Testnet	Jibchain Testnet
Vechain	Vechain
Stratis Mainnet	Stratis Mainnet
Etherlink Testnet	Etherlink Testnet
Taiko Mainnet	Taiko Mainnet
Taiko (Alpha-3 Testnet)	Taiko (Alpha-3 Testnet)
Taiko Jolnir (Alpha-5 Testnet)	Taiko Jolnir (Alpha-5 Testnet)
Taiko Katla (Alpha-6 Testnet)	Taiko Katla (Alpha-6 Testnet)
Taiko Hekla L2	Taiko Hekla L2
Bitlayer Testnet	Bitlayer Testnet
Bitlayer	Bitlayer
Auroria Testnet	Auroria Testnet
Filecoin Calibration	Filecoin Calibration
Arbitrum Goerli	Arbitrum Goerli
Arbitrum Sepolia	Arbitrum Sepolia
Scroll Sepolia	Scroll Sepolia
Scroll	Scroll
Bear Network Chain Mainnet	Bear Network Chain Mainnet
Sei Devnet	Sei Devnet
Bear Network Chain Testnet	Bear Network Chain Testnet
Zhejiang	Zhejiang
PlayFi Albireo Testnet	PlayFi Albireo Testnet
Funki Sepolia Sandbox	Funki Sepolia Sandbox
Manta Pacific Testnet	Manta Pacific Testnet
Manta Pacific Sepolia Testnet	Manta Pacific Sepolia Testnet
Astar zkEVM Testnet zKyoto	Astar zkEVM Testnet zKyoto
Zora	Zora
Sepolia	Sepolia
OP Sepolia	OP Sepolia
Ancient8 Testnet	Ancient8 Testnet
SKALE Nebula Testnet	SKALE Nebula Testnet
Otim Devnet	Otim Devnet
Cyber Testnet	Cyber Testnet
Plume Testnet	Plume Testnet
Blast Sepolia	Blast Sepolia
Neon EVM DevNet	Neon EVM DevNet
Neon EVM MainNet	Neon EVM MainNet
SKALE \| Razor Network	SKALE \| Razor Network
SKALE \| Block Brawlers	SKALE \| Block Brawlers
Degen	Degen
Ancient8	Ancient8
SKALE Calypso Testnet	SKALE Calypso Testnet
Zora Sepolia	Zora Sepolia
SKALE Titan Hub	SKALE Titan Hub
SKALE \| CryptoBlades	SKALE \| CryptoBlades
SKALE \| Crypto Colosseum	SKALE \| Crypto Colosseum
SKALE \| Human Protocol	SKALE \| Human Protocol
Aurora	Aurora
Aurora Testnet	Aurora Testnet
SKALE \| Titan Community Hub	SKALE \| Titan Community Hub
SKALE Europa Testnet	SKALE Europa Testnet
SKALE \| Nebula Gaming Hub	SKALE \| Nebula Gaming Hub
SKALE \| Calypso NFT Hub	SKALE \| Calypso NFT Hub
Harmony One	Harmony One
SKALE \| Europa Liquidity Hub	SKALE \| Europa Liquidity Hub
SKALE \| Exorde	SKALE \| Exorde
Palm Testnet	Palm Testnet
Palm	Palm
Kakarot Sepolia	Kakarot Sepolia

import { ChainIcon } from "connectkit";
import { useAccount, useConfig } from "wagmi";

const { chain } = useAccount();
const { chains } = useConfig()

<ChainIcon id={1} />
<ChainIcon id={chain?.id} unsupported={chains.find((c) => c.id === chain?.id) === undefined} />
<ChainIcon id={chains?.[0].id} />

Below are the various props that can be passed to the ChainIcon component.

id

number

Required

Chain ID

unsupported

boolean

Show unsupported icon

size

number | string

Default is 24

Width and height in pixels, or a string for percentage if necessary (e.g. 50%)

radius

number | string

Default is 50%

Radius in pixels, or a string for percentage (e.g. 50% for fully rounded)

SIWE Button

ConnectKit exports an easy to use Sign In With Ethereum button for you to use within your app.

Just import <SIWEButton> and useSIWE to check if the user has successfully signed in.

import { SIWEButton, useSIWE } from "connectkit";

// This component must be used within the SIWE context provider
const MyComponent = () => {
  const { isSignedIn, data } = useSIWE();
  return <>
    <SIWEButton showSignOutButton />
    {isSignedIn && <p>Signed in as {data.address}</p>
  </>;
};

Below are the various props that can be passed to the SIWEButton component.

showSignOutButton

boolean

Displays a sign out button after signing in

onSignIn

() => void

Event handler on a successful sign in

API Reference

Components and Hooks

ConnectKitProvider

theme

mode

customTheme

Connect Wallet Button variables

Primary Button variables

Secondary Button variables

Tertiary Button variables

Modal variables

Text variables

Miscellaneous variables

options

onConnect

onDisconnect

ConnectKitButton

ConnectKitButton.Custom

Render Props

Hooks

useModal

useSIWE

useChains

Additional Components

Avatar

Chain Icon

SIWE Button

On this page