Powered by

A design system from Family

Getting Started

ConnectKit is the simplest way to integrate a connect wallet experience into your React.js web application. It comes with sensible defaults out of the box so you can focus on building.

ConnectKit is in public beta and always being improved.

Install

Install ConnectKit and its peer dependencies (wagmi and ethers).

Terminal
1npm install connectkit wagmi ethers

Implementation

Start by importing wagmi and ConnectKit, then create a client using either wagmi's createClient method or the pre-configured getDefaultClient ConnectKit provides.

Below is a simple example app using getDefaultClient to help you get started:

,
App.jsx
1import { WagmiConfig, createClient } from "wagmi";
2import { ConnectKitProvider, ConnectKitButton, getDefaultClient } from "connectkit";
3
4const alchemyId = process.env.ALCHEMY_ID;
5
6const client = createClient(
7 getDefaultClient({
8 appName: "Your App Name",
9 alchemyId,
10 }),
11);
12
13const App = () => {
14 return (
15 <WagmiConfig client={client}>
16 <ConnectKitProvider>
17 /* Your App */
18 <ConnectKitButton />
19 </ConnectKitProvider>
20 </WagmiConfig>
21 );
22};

And voilà, you've successfully set up ConnectKit.

Please note that for WalletConnect you’ll need to provide an Infura or Alchemy endpoint (and key). By default, we provide a shared key for development and testing that is heavily limited and not fit for production use.

Connected Wallet Info

In a lot of use cases, you will want to access the connected wallet from ConnectKit in order to be able to interact with it further. You can do so by using the different hooks, such as useAccount, from wagmi (a ConnectKit dependency).

In the previous example above we wrapped our app with a <ConnectKitProvider> top-level. Before utilizing any wagmi hook, make sure the components you build are mounted under this provider.

Below is a simple example component that utilizes the useAccount hook to access connection state and the connected wallet address:

,
MyComponent.jsx
1import { useAccount } from "wagmi";
2
3// Make sure that this component is wrapped with ConnectKitProvider
4const MyComponent = () => {
5 const { address, isConnecting, isDisconnected } = useAccount();
6 if (isConnecting) return <div>Connecting...</div>;
7 if (isDisconnected) return <div>Disconnected</div>;
8 return <div>Connected Wallet: {address}</div>;
9};

That's it—you now have a simple component that displays the connected wallet's address.

Components

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

ComponentDescription
<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.