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 'link'

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
Expanse Network	Expanse Network
Goerli	Goerli
ThaiChain	ThaiChain
Ubiq Mainnet	Ubiq Mainnet
ZKsync CLI Local Hyperchain L1	ZKsync CLI Local Hyperchain L1
OP Mainnet	OP Mainnet
Metadium Network	Metadium Network
Flare Mainnet	Flare Mainnet
Diode Prenet	Diode Prenet
Songbird Testnet Coston	Songbird Testnet Coston
Songbird Canary-Network	Songbird Canary-Network
Elastos Smart Chain	Elastos Smart Chain
Elastos Smart Chain Testnet	Elastos Smart Chain Testnet
KardiaChain Mainnet	KardiaChain Mainnet
Cronos Mainnet	Cronos Mainnet
Rootstock Mainnet	Rootstock Mainnet
Rootstock Testnet	Rootstock Testnet
Telos	Telos
Telos	Telos
LUKSO	LUKSO
Crab Network	Crab Network
Darwinia Network	Darwinia Network
Acria IntelliChain	Acria IntelliChain
XDC Network	XDC Network
Apothem Network	Apothem Network
CoinEx Mainnet	CoinEx Mainnet
BNB Smart Chain	BNB Smart Chain
Syscoin Mainnet	Syscoin Mainnet
GoChain	GoChain
Ethereum Classic	Ethereum Classic
OKC	OKC
Conflux eSpace Testnet	Conflux eSpace Testnet
IDChain Mainnet	IDChain Mainnet
Meter	Meter
Meter Testnet	Meter Testnet
Viction	Viction
Viction Testnet	Viction Testnet
SwissDLT Mainnet	SwissDLT Mainnet
Bitkub	Bitkub
Binance Smart Chain Testnet	Binance Smart Chain Testnet
Six Protocol	Six Protocol
Gnosis	Gnosis
WorldLand Mainnet	WorldLand Mainnet
Velas EVM Mainnet	Velas EVM Mainnet
ThunderCore Mainnet	ThunderCore Mainnet
Shibarium	Shibarium
Coinbit Mainnet	Coinbit Mainnet
Flare Testnet Coston2	Flare Testnet Coston2
ENULS Mainnet	ENULS Mainnet
Fuse	Fuse
Fuse Sparknet	Fuse Sparknet
Unichain	Unichain
HashKey Chain Testnet	HashKey Chain Testnet
Polygon	Polygon
Sonic	Sonic
Shimmer	Shimmer
Redbelly Network Mainnet	Redbelly Network Mainnet
Redbelly Network Testnet	Redbelly Network Testnet
Puppynet Shibarium	Puppynet Shibarium
AIOZ Network	AIOZ Network
Manta Pacific Mainnet	Manta Pacific Mainnet
HashKey Chain	HashKey Chain
ABEY Mainnet	ABEY Mainnet
Ethernity	Ethernity
Mint Mainnet	Mint Mainnet
X1 Testnet	X1 Testnet
X1 Testnet	X1 Testnet
X Layer Mainnet	X Layer Mainnet
BitTorrent	BitTorrent
Edgeless Testnet	Edgeless Testnet
opBNB	opBNB
Happychain Testnet	Happychain Testnet
B2	B2
Nexilix Smart Chain	Nexilix Smart Chain
Plinga	Plinga
Energy Mainnet	Energy Mainnet
Oasys	Oasys
Fantom	Fantom
Glide L1 Protocol XP	Glide L1 Protocol XP
Fraxtal	Fraxtal
Glide L2 Protocol XP	Glide L2 Protocol XP
Swan Chain Mainnet	Swan Chain Mainnet
Kroma	Kroma
Guru Network Mainnet	Guru Network Mainnet
ZKsync InMemory Node	ZKsync InMemory Node
ZKsync InMemory Node	ZKsync InMemory Node
Guru Network Testnet	Guru Network Testnet
High Performance Blockchain	High Performance Blockchain
ZKsync CLI Local Node	ZKsync CLI Local Node
ZKsync CLI Local Hyperchain	ZKsync CLI Local Hyperchain
ZKsync CLI Local Node	ZKsync CLI Local Node
ZKsync CLI Local Custom Hyperchain	ZKsync CLI Local Custom Hyperchain
XR One	XR One
Cronos zkEVM Testnet	Cronos zkEVM Testnet
Boba Network	Boba Network
Orderly	Orderly
Hedera Mainnet	Hedera Mainnet
Hedera Testnet	Hedera Testnet
Hedera Previewnet	Hedera Previewnet
ZKsync Sepolia Testnet	ZKsync Sepolia Testnet
ZKsync Sepolia Testnet	ZKsync Sepolia Testnet
Omax Mainnet	Omax Mainnet
Filecoin Mainnet	Filecoin Mainnet
KCC Mainnet	KCC Mainnet
ZKsync Era	ZKsync Era
ZKsync Era	ZKsync Era
Shiden	Shiden
Cronos Testnet	Cronos Testnet
Shape	Shape
Theta Mainnet	Theta Mainnet
Theta Testnet	Theta Testnet
PulseChain	PulseChain
Cronos zkEVM Mainnet	Cronos zkEVM Mainnet
NEAR Protocol	NEAR Protocol
NEAR Protocol Testnet	NEAR Protocol Testnet
Optimism Goerli	Optimism Goerli
PGN	PGN
Areon Network Testnet	Areon Network Testnet
Areon Network	Areon Network
Form Network	Form Network
World Chain	World Chain
Flow EVM Testnet	Flow EVM Testnet
Rollux Mainnet	Rollux Mainnet
MetaChain Mainnet	MetaChain Mainnet
Astar	Astar
Mandala TC9	Mandala TC9
Metis Goerli	Metis Goerli
Flow EVM Previewnet	Flow EVM Previewnet
Karura	Karura
Redstone	Redstone
Matchain	Matchain
Matchain Testnet	Matchain Testnet
Koi Network	Koi Network
Lycan	Lycan
Flow EVM Mainnet	Flow EVM Mainnet
Rivalz	Rivalz
QL1	QL1
Acala	Acala
Daily Network Mainnet	Daily Network Mainnet
Daily Network Testnet	Daily Network Testnet
Taraxa Mainnet	Taraxa Mainnet
Taraxa Testnet	Taraxa Testnet
Wanchain	Wanchain
Mode Testnet	Mode Testnet
PulseChain V4	PulseChain V4
Lyra Chain	Lyra Chain
5ireChain	5ireChain
5ireChain Thunder Testnet	5ireChain Thunder Testnet
Wanchain Testnet	Wanchain Testnet
Zora Goerli Testnet	Zora Goerli Testnet
Kairos Testnet	Kairos Testnet
Klaytn Baobab Testnet	Klaytn Baobab Testnet
Ekta Testnet	Ekta Testnet
Newton	Newton
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
IOTA EVM Testnet	IOTA EVM Testnet
Metis	Metis
Dymension	Dymension
Polygon zkEVM	Polygon zkEVM
WEMIX	WEMIX
WEMIX Testnet	WEMIX Testnet
Core Dao	Core Dao
B2 Testnet	B2 Testnet
DeFiChain EVM Mainnet	DeFiChain EVM Mainnet
DeFiChain EVM Testnet	DeFiChain EVM Testnet
Lisk	Lisk
ADF Chain	ADF Chain
Ultron Testnet	Ultron Testnet
Ultron Mainnet	Ultron Mainnet
Step Network	Step Network
Moonbeam Development Node	Moonbeam Development Node
Moonbeam	Moonbeam
Moonriver	Moonriver
Moonbase Alpha	Moonbase Alpha
Unichain Sepolia	Unichain Sepolia
Story Aeneid	Story Aeneid
Sei Testnet	Sei Testnet
Sei Network	Sei Network
Localhost	Localhost
Elysium Testnet	Elysium Testnet
Polygon zkEVM Testnet	Polygon zkEVM Testnet
MetaChain Istanbul	MetaChain Istanbul
Story Testnet	Story Testnet
Story	Story
Story Odyssey	Story Odyssey
Tenet	Tenet
Gravity Alpha Mainnet	Gravity Alpha Mainnet
Horizen Gobi Testnet	Horizen Gobi Testnet
Mint Sepolia Testnet	Mint Sepolia Testnet
Reya Network	Reya Network
Metal L2	Metal L2
Soneium Mainnet	Soneium Mainnet
Whitechain	Whitechain
LightLink Phoenix Mainnet	LightLink Phoenix Mainnet
LightLink Pegasus Testnet	LightLink Pegasus Testnet
Swellchain	Swellchain
Soneium Minato Testnet	Soneium Minato Testnet
B3 Sepolia	B3 Sepolia
Ekta	Ekta
edeXa Testnet	edeXa Testnet
Sanko	Sanko
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
Swan Saturn Testnet	Swan Saturn Testnet
Edgeless Network	Edgeless Network
Aleph Zero Testnet	Aleph Zero Testnet
Vanar Mainnet	Vanar Mainnet
SnaxChain	SnaxChain
Kava EVM Testnet	Kava EVM Testnet
Kava EVM	Kava EVM
RSS3 VSL Sepolia Testnet	RSS3 VSL Sepolia Testnet
Atleta Olympia	Atleta Olympia
GOAT	GOAT
Silicon zkEVM	Silicon zkEVM
Kroma Sepolia	Kroma Sepolia
Polygon zkEVM Cardona	Polygon zkEVM Cardona
Fraxtal Testnet	Fraxtal Testnet
inEVM Mainnet	inEVM Mainnet
Whitechain Testnet	Whitechain Testnet
Morph Sepolia	Morph Sepolia
XR Sepolia	XR Sepolia
Abstract	Abstract
Morph Holesky	Morph Holesky
Morph	Morph
Chips Network	Chips Network
HYCHAIN	HYCHAIN
Bifrost Mainnet	Bifrost Mainnet
SatoshiVM Alpha Mainnet	SatoshiVM Alpha Mainnet
SatoshiVM Testnet	SatoshiVM Testnet
Filecoin Hyperspace	Filecoin Hyperspace
Peaq	Peaq
Botanix Testnet	Botanix Testnet
Crossbell	Crossbell
Astar zkEVM	Astar zkEVM
DOS Chain Testnet	DOS Chain Testnet
APEX Testnet	APEX Testnet
Fantom Testnet	Fantom Testnet
Oasis Testnet	Oasis Testnet
Merlin	Merlin
LUKSO Testnet	LUKSO Testnet
Lisk Sepolia	Lisk Sepolia
Merlin Erigon Testnet	Merlin Erigon Testnet
Nexi	Nexi
Beam	Beam
Orderly Sepolia	Orderly Sepolia
IoTeX	IoTeX
IoTeX Testnet	IoTeX Testnet
MEVerse Chain Testnet	MEVerse Chain Testnet
BlackFort Exchange Network Testnet	BlackFort Exchange Network Testnet
World Chain Sepolia	World Chain Sepolia
BlackFort Exchange Network	BlackFort Exchange Network
Mantle	Mantle
Mantle Testnet	Mantle Testnet
Mantle Sepolia Testnet	Mantle Sepolia Testnet
Ham	Ham
Citrea Testnet	Citrea Testnet
Seismic Devnet	Seismic Devnet
Bahamut	Bahamut
Humanode	Humanode
Superseed	Superseed
edeXa	edeXa
Saga	Saga
Nahmii 2 Mainnet	Nahmii 2 Mainnet
opBNB Testnet	opBNB Testnet
Syscoin Tanenbaum Testnet	Syscoin Tanenbaum Testnet
Chang Chain Foundation Mainnet	Chang Chain Foundation Mainnet
BounceBit Testnet	BounceBit Testnet
BounceBit Mainnet	BounceBit Mainnet
MegaETH Testnet	MegaETH Testnet
Nibiru	Nibiru
Tomb Mainnet	Tomb Mainnet
ZetaChain	ZetaChain
ZetaChain Athens Testnet	ZetaChain Athens Testnet
Planq Mainnet	Planq Mainnet
Bitrock Mainnet	Bitrock Mainnet
exSat Network	exSat Network
InitVerse Mainnet	InitVerse Mainnet
InitVerse Genesis Testnet	InitVerse Genesis Testnet
Horizen EON	Horizen EON
MEVerse Chain Mainnet	MEVerse Chain Mainnet
Cyber	Cyber
The Root Network	The Root Network
The Root Network - Porcini	The Root Network - Porcini
Canto	Canto
Kinto Mainnet	Kinto Mainnet
DOS Chain	DOS Chain
Polynomial	Polynomial
iSunCoin Mainnet	iSunCoin Mainnet
Shardeum Sphinx	Shardeum Sphinx
Kaia	Kaia
Klaytn	Klaytn
B3	B3
ZenChain Testnet	ZenChain Testnet
THAT Mainnet	THAT Mainnet
Base	Base
Hela Mainnet	Hela Mainnet
IOTA EVM	IOTA EVM
SuperLumio	SuperLumio
Unique Mainnet	Unique Mainnet
Quartz Mainnet	Quartz Mainnet
Opal Testnet	Opal Testnet
JIBCHAIN L1	JIBCHAIN L1
Evmos Testnet	Evmos Testnet
Evmos	Evmos
WeaveVM Alphanet	WeaveVM Alphanet
OORT MainnetDev	OORT MainnetDev
Monad Testnet	Monad Testnet
Gnosis Chiado	Gnosis Chiado
Arthera	Arthera
Arthera Testnet	Arthera Testnet
Shape Sepolia Testnet	Shape Sepolia Testnet
Bool Beta Mainnet	Bool Beta Mainnet
Abstract Testnet	Abstract Testnet
HAQQ Mainnet	HAQQ Mainnet
BEVM Mainnet	BEVM Mainnet
Artela Testnet	Artela Testnet
Fibo Chain	Fibo Chain
Huddle01 dRTC Chain	Huddle01 dRTC Chain
L3X Protocol	L3X Protocol
L3X Protocol Testnet	L3X Protocol Testnet
RSS3 VSL Mainnet	RSS3 VSL Mainnet
SnaxChain Testnet	SnaxChain Testnet
Beam Testnet	Beam Testnet
Cannon	Cannon
Immutable zkEVM	Immutable zkEVM
Phoenix Blockchain	Phoenix Blockchain
Immutable zkEVM Testnet	Immutable zkEVM Testnet
Humanode Testnet 5	Humanode Testnet 5
LoopNetwork Mainnet	LoopNetwork Mainnet
EOS EVM Testnet	EOS EVM Testnet
Genesys Mainnet	Genesys Mainnet
0G Newton Testnet	0G Newton Testnet
Holesky	Holesky
Garnet Testnet	Garnet Testnet
EOS EVM	EOS EVM
Unreal	Unreal
Ultra EVM Testnet	Ultra EVM Testnet
Ultra EVM	Ultra EVM
Fluent Testnet	Fluent Testnet
Nautilus Mainnet	Nautilus Mainnet
MAP Protocol	MAP Protocol
PremiumBlock Testnet	PremiumBlock Testnet
Oasis Sapphire	Oasis Sapphire
Oasis Sapphire Testnet	Oasis Sapphire Testnet
DreyerX Mainnet	DreyerX Mainnet
DreyerX Testnet	DreyerX Testnet
Bitkub Testnet	Bitkub Testnet
Boba Sepolia	Boba Sepolia
HYCHAIN Testnet	HYCHAIN Testnet
MCH Verse	MCH Verse
Anvil	Anvil
Foundry	Foundry
Hardhat	Hardhat
Bitgert Mainnet	Bitgert Mainnet
Fusion Mainnet	Fusion Mainnet
Zilliqa	Zilliqa
Zilliqa Testnet	Zilliqa Testnet
Curtis	Curtis
Ape Chain	Ape Chain
Funki	Funki
Mode Mainnet	Mode Mainnet
Q Mainnet	Q Mainnet
Q Testnet	Q Testnet
Lens Testnet	Lens Testnet
Aleph Zero	Aleph Zero
EDU Chain	EDU Chain
Donatuz	Donatuz
WMC Testnet	WMC Testnet
Arbitrum One	Arbitrum One
Arbitrum Nova	Arbitrum Nova
Celo	Celo
AssetChain Mainnet	AssetChain Mainnet
AssetChain Testnet	AssetChain Testnet
ZKFair Mainnet	ZKFair Mainnet
Etherlink	Etherlink
Hemi	Hemi
Avalanche Fuji	Avalanche Fuji
Avalanche	Avalanche
ZKFair Testnet	ZKFair Testnet
Alfajores	Alfajores
Juneo JUNE-Chain	Juneo JUNE-Chain
Juneo DAI1-Chain	Juneo DAI1-Chain
Juneo USDT1-Chain	Juneo USDT1-Chain
Juneo USD1-Chain	Juneo USD1-Chain
Juneo mBTC1-Chain	Juneo mBTC1-Chain
Juneo GLD1-Chain	Juneo GLD1-Chain
Juneo LTC1-Chain	Juneo LTC1-Chain
Juneo DOGE1-Chain	Juneo DOGE1-Chain
Juneo EUR1-Chain	Juneo EUR1-Chain
Juneo SGD1-Chain	Juneo SGD1-Chain
Juneo BCH1-Chain	Juneo BCH1-Chain
Juneo LINK1-Chain	Juneo LINK1-Chain
Fusion Testnet	Fusion Testnet
Neo X Mainnet	Neo X Mainnet
REI Mainnet	REI Mainnet
Zircuit Garfield Testnet	Zircuit Garfield Testnet
Zircuit Testnet	Zircuit Testnet
Zircuit Mainnet	Zircuit Mainnet
Yooldo Verse	Yooldo Verse
Yooldo Verse Testnet	Yooldo Verse Testnet
Sophon	Sophon
Somnia Testnet	Somnia Testnet
Reddio Sepolia	Reddio Sepolia
Electroneum Mainnet	Electroneum Mainnet
Superseed Sepolia	Superseed Sepolia
BirdLayer	BirdLayer
DODOchain Testnet	DODOchain Testnet
DFK Chain	DFK Chain
HAQQ Testedge 2	HAQQ Testedge 2
Superposition	Superposition
Rollux Testnet	Rollux Testnet
Sonic Blaze Testnet	Sonic Blaze Testnet
Ink	Ink
PGN	PGN
Linea Goerli Testnet	Linea Goerli Testnet
Linea Goerli Testnet	Linea Goerli Testnet
Linea Sepolia Testnet	Linea Sepolia Testnet
Linea Mainnet	Linea Mainnet
Metis Sepolia	Metis Sepolia
BOB	BOB
Treasure	Treasure
Optopia Testnet	Optopia Testnet
Optopia	Optopia
TikTrix Testnet	TikTrix Testnet
Geist Mainnet	Geist Mainnet
Sonic Testnet	Sonic Testnet
Fantom Sonic Open Testnet	Fantom Sonic Open Testnet
Creator	Creator
Godwoken Mainnet	Godwoken Mainnet
Polygon Mumbai	Polygon Mumbai
Polygon Amoy	Polygon Amoy
Polynomia Sepolia	Polynomia Sepolia
Berachain Bepolia	Berachain Bepolia
Berachain bArtio	Berachain bArtio
Berachain Artio	Berachain Artio
Berachain	Berachain
Forta Chain	Forta Chain
Blast	Blast
Base Goerli	Base Goerli
Base Sepolia	Base Sepolia
Chiliz Spicy Testnet	Chiliz Spicy Testnet
Chiliz Chain	Chiliz Chain
Jibchain Testnet	Jibchain Testnet
Lumoz	Lumoz
Sidra Chain	Sidra Chain
Plume Devnet (Legacy)	Plume Devnet (Legacy)
Plume (Legacy)	Plume (Legacy)
Plume	Plume
Plume Testnet	Plume Testnet
Vechain	Vechain
Socotra JUNE-Chain	Socotra JUNE-Chain
Creditcoin3 Mainnet	Creditcoin3 Mainnet
Creditcoin3 Testnet	Creditcoin3 Testnet
Stratis Mainnet	Stratis Mainnet
Lumoz Testnet	Lumoz Testnet
re.al	re.al
Mitosis Testnet	Mitosis Testnet
Etherlink Testnet	Etherlink Testnet
Form Testnet	Form 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 Testnet	Bitlayer Testnet
Bitlayer Mainnet	Bitlayer Mainnet
Bitlayer	Bitlayer
Auroria Testnet	Auroria Testnet
One World Chain Mainnet	One World Chain Mainnet
Filecoin Calibration	Filecoin Calibration
LAVITA Mainnet	LAVITA Mainnet
Arbitrum Goerli	Arbitrum Goerli
Arbitrum Sepolia	Arbitrum Sepolia
Pumpfi Testnet	Pumpfi Testnet
DisChain	DisChain
Scroll Sepolia	Scroll Sepolia
Scroll	Scroll
Zero Network	Zero Network
DustBoy IoT	DustBoy IoT
Hoodi	Hoodi
Polter Testnet	Polter Testnet
Bear Network Chain Mainnet	Bear Network Chain Mainnet
EDU Chain Testnet	EDU Chain Testnet
Xai Mainnet	Xai Mainnet
Vision Testnet	Vision Testnet
Pyrope Testnet	Pyrope Testnet
Sei Devnet	Sei Devnet
Hemi Sepolia	Hemi Sepolia
Bear Network Chain Testnet	Bear Network Chain Testnet
Ternoa	Ternoa
Ink Sepolia	Ink Sepolia
BOB Sepolia	BOB Sepolia
zkLink Nova	zkLink Nova
zkLink Nova Sepolia Testnet	zkLink Nova Sepolia Testnet
exSat Testnet	exSat Testnet
Vision	Vision
Odyssey Testnet	Odyssey Testnet
Treasure Topaz Testnet	Treasure Topaz Testnet
Forma	Forma
Forma Sketchpad	Forma Sketchpad
Zhejiang	Zhejiang
XRPL EVM Devnet	XRPL EVM Devnet
XRPL EVM Testnet	XRPL EVM Testnet
PlayFi Albireo Testnet	PlayFi Albireo Testnet
Huddle01 dRTC Chain Testnet	Huddle01 dRTC Chain Testnet
Funki Sepolia Sandbox	Funki Sepolia Sandbox
Manta Pacific Testnet	Manta Pacific Testnet
Manta Pacific Sepolia Testnet	Manta Pacific Sepolia Testnet
Electroneum Testnet	Electroneum Testnet
Astar zkEVM Testnet zKyoto	Astar zkEVM Testnet zKyoto
Saakuru Mainnet	Saakuru Mainnet
Zora	Zora
Fluence	Fluence
AlienX Mainnet	AlienX Mainnet
ALIENX Hal Testnet	ALIENX Hal Testnet
Sepolia	Sepolia
OP Sepolia	OP Sepolia
Neo X Testnet T4	Neo X Testnet T4
DBK chain	DBK chain
Swan Proxima Testnet	Swan Proxima Testnet
ETP Mainnet	ETP Mainnet
Corn	Corn
Corn Testnet	Corn Testnet
Excelon Mainnet	Excelon Mainnet
Ancient8 Testnet	Ancient8 Testnet
SKALE Nebula Testnet	SKALE Nebula Testnet
Otim Devnet	Otim Devnet
Fluence Testnet	Fluence Testnet
Cyber Testnet	Cyber Testnet
Plume Testnet (Legacy)	Plume Testnet (Legacy)
Blast Sepolia	Blast Sepolia
Neon EVM DevNet	Neon EVM DevNet
Neon EVM MainNet	Neon EVM MainNet
SKALE \| Razor Network	SKALE \| Razor Network
Meld	Meld
SKALE \| Block Brawlers	SKALE \| Block Brawlers
Sophon Testnet	Sophon Testnet
Degen	Degen
Tron	Tron
Ancient8	Ancient8
SKALE Calypso Testnet	SKALE Calypso Testnet
Lumia Mainnet	Lumia Mainnet
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
Haust Network Testnet	Haust Network Testnet
SKALE \| Calypso NFT Hub	SKALE \| Calypso NFT Hub
Status Network Sepolia	Status Network Sepolia
Status Network Sepolia	Status Network Sepolia
Harmony One	Harmony One
Silicon Sepolia zkEVM	Silicon Sepolia zkEVM
Kakarot Sepolia	Kakarot Sepolia
Lumia Testnet	Lumia Testnet
SKALE \| Europa Liquidity Hub	SKALE \| Europa Liquidity Hub
SKALE \| Exorde	SKALE \| Exorde
Mekong Pectra Devnet	Mekong Pectra Devnet
Palm Testnet	Palm Testnet
Palm	Palm
Xai Testnet	Xai Testnet
Fluence Stage	Fluence Stage
Basecamp Testnet	Basecamp Testnet
Zeniq Mainnet	Zeniq Mainnet
Kakarot Starknet Sepolia	Kakarot Starknet Sepolia
Dchain Testnet	Dchain Testnet
Dchain	Dchain

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