Connecting a wallet, made simple.

ConnectKit is a powerful React component library for connecting a wallet to your dApp. It supports the most popular connectors and chains out of the box and provides a beautiful, seamless experience.

Key Features

• TypeScript Ready: Get types straight out of the box.

• Ecosystem Standards: Built on top of popular libraries like wagmi and viem.

• Simple UX: Attractive and intuitive interface for your users.

• Theming: Beautiful pre-designed themes or full customization capabilities.

Quick Start

To start using ConnectKit, you need to install the package and its peer dependencies: wagmi and viem.

npm install connectkit wagmi viem

npm install connectkit wagmi viem

npm install connectkit wagmi viem

Prerequisites

ConnectKit is built for React. Ensure you have a React-based project (Next.js, Vite, etc.) ready before proceeding with the configuration.

Configuring your App

Wrap your application with WagmiConfig and ConnectKitProvider. This provides the necessary context for the connect button and modal to function.

import { WagmiConfig, createConfig } from 'wagmi';
import { ConnectKitProvider, getDefaultConfig } from 'connectkit';
<p>const config = createConfig(<br>getDefaultConfig({<br>appName: 'My App',<br>chains: [mainnet, polygon, arbitrum],<br>}),<br>);</p>

import { WagmiConfig, createConfig } from 'wagmi';
import { ConnectKitProvider, getDefaultConfig } from 'connectkit';
<p>const config = createConfig(<br>getDefaultConfig({<br>appName: 'My App',<br>chains: [mainnet, polygon, arbitrum],<br>}),<br>);</p>

import { WagmiConfig, createConfig } from 'wagmi';
import { ConnectKitProvider, getDefaultConfig } from 'connectkit';
<p>const config = createConfig(<br>getDefaultConfig({<br>appName: 'My App',<br>chains: [mainnet, polygon, arbitrum],<br>}),<br>);</p>

Beautiful Themes

ConnectKit comes with several built-in themes that can be applied via the theme prop on the ConnectKitProvider.

Built-in Themes

• auto (System preference)

• light

• dark

• midnight

• minimal

• retro

Example: <ConnectKitProvider theme="midnight">