ConnectKit Integration for Wallet Connection on Website

Integrating ConnectKit for Wallet Connection on a Website

ConnectKit from Family is an alternative to RainbowKit with a focus on visual polish and accessibility. Stricter default design, built-in animations, ENS avatar support out of the box. Same stack: wagmi + viem + React.

Installation

npm install connectkit wagmi viem @tanstack/react-query

Basic Setup

// app/providers.tsx
'use client';
import { ConnectKitProvider, getDefaultConfig } from 'connectkit';
import { createConfig, WagmiProvider } from 'wagmi';
import { mainnet, polygon, optimism } from 'wagmi/chains';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const config = createConfig(
  getDefaultConfig({
    chains: [mainnet, polygon, optimism],
    transports: {
      [mainnet.id]: http(process.env.ETH_RPC_URL!),
      [polygon.id]: http(process.env.POLYGON_RPC_URL!),
      [optimism.id]: http(process.env.OPTIMISM_RPC_URL!),
    },
    walletConnectProjectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID!,
    appName: 'MyApp',
    appDescription: 'DeFi platform',
    appUrl: 'https://myapp.com',
    appIcon: 'https://myapp.com/icon.png',
  }),
);

const queryClient = new QueryClient();

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <ConnectKitProvider>
          {children}
        </ConnectKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

import { ConnectKitButton } from 'connectkit';

export function Header() {
  return (
    <header>
      <ConnectKitButton />
    </header>
  );
}

Theme Customization

ConnectKit supports built-in themes and custom CSS variables:

// Built-in themes
<ConnectKitProvider theme="auto">      {/* follows system theme */}
<ConnectKitProvider theme="dark">
<ConnectKitProvider theme="light">
<ConnectKitProvider theme="retro">     {/* pixel style */}
<ConnectKitProvider theme="midnight">  {/* dark with blue accent */}
<ConnectKitProvider theme="web95">     {/* Windows 95 style */}

Custom variables via customTheme:

<ConnectKitProvider
  customTheme={{
    '--ck-font-family': '"Inter", sans-serif',
    '--ck-border-radius': '12px',
    '--ck-overlay-background': 'rgba(0,0,0,0.6)',
    '--ck-body-background': '#0f0f0f',
    '--ck-body-background-secondary': '#1a1a1a',
    '--ck-body-background-tertiary': '#252525',
    '--ck-body-color': '#ffffff',
    '--ck-body-color-muted': 'rgba(255,255,255,0.5)',
    '--ck-body-color-muted-hover': 'rgba(255,255,255,0.8)',
    '--ck-primary-button-background': '#6366f1',
    '--ck-primary-button-hover-background': '#818cf8',
    '--ck-primary-button-color': '#ffffff',
    '--ck-focus-color': '#6366f1',
    '--ck-connectbutton-background': '#1a1a1a',
    '--ck-connectbutton-hover-background': '#252525',
    '--ck-connectbutton-color': '#ffffff',
    '--ck-connectbutton-border-radius': '8px',
  }}
>

Custom Button

import { useModal } from 'connectkit';
import { useAccount } from 'wagmi';

export function CustomConnectButton() {
  const { openConnectModal } = useModal();
  const { address, isConnected } = useAccount();

  if (isConnected && address) {
    return (
      <WalletInfo address={address} />
    );
  }

  return (
    <button
      onClick={openConnectModal}
      className="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-indigo-500"
    >
      Connect Wallet
    </button>
  );
}

Provider Options

<ConnectKitProvider
  options={{
    // Show ETH balance next to address
    showBalance: true,
    // Show ENS name instead of address (vitalik.eth)
    truncateLongENSAddress: true,
    // Wallet display order
    walletConnectName: 'Other Wallets',
    // Disconnect button
    hideQuestionMarkCTA: false,
    // Disable WalletConnect QR code
    disableENSCaching: false,
    // Minimum balance to display
    minimumBalanceThreshold: '0.001',
    // Embed mode — no modal, embedded
    embedGoogleFonts: false,
  }}
>

Differences from RainbowKit

Choice between them is a matter of taste. ConnectKit looks slightly more "product-like", RainbowKit is slightly more flexible in button customization.

Timeframe: installation with custom theme and custom button — half a day.