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.|
|useModal()||Programatically control some aspects of the modal.|
Wrap <ConnectKitProvider> around your React.js app to provide state and data to various ConnectKit components.
Sets which theme ConnectKit should use. Below is a table of values for the theme property.
|Theme Prop||Description||Light/Dark Mode Support|
Sets which dark/light mode configuration ConnectKit should use. Below is a table of values for the mode property.
|Either dark or light that matches the user's system color scheme|
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
Configuration options you can toggle on/off. Below is a list of options and their default values that are available for the options property.
Hide the question mark in top-left of the ConnectKit modal that leads to the "About Wallets" page
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
Truncates long ENS addresses in the connect button with ellipsis.
By default, the WalletConnect option is named "Other Wallets". Use this option to change the name to, e.g., "WalletConnect" by providing a string.
Display the avatar visual in the connect button when a wallet is connected.
Display the connected wallet's balance in the connect button when the wallet is connected.
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.
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.
Place this component where you’d like the Connect Wallet button to appear.
Design your own Connect button. Various wallet connection states are provided through 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.
Function to show the modal. In the example above we bind this to onClick for the custom button.
A convenience Hook to show/dismiss the modal. Must be used within a <ConnectKitProvider>.
useModal Hook is experimental and may change in the future to allow for more
programmatic control over the behavior of the modal. For now it only surfaces a function to
show/dismiss the modal.