Installation

Get up and running with RainbowKit

Install

Install RainbowKit and its peer dependencies, wagmi and ethers.

npm install @rainbow-me/rainbowkit wagmi ethers

Note: RainbowKit is a React library.

Import

Import RainbowKit, wagmi, and ethers.

import '@rainbow-me/rainbowkit/styles.css';

import {
  getDefaultWallets,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import {
  chain,
  configureChains,
  createClient,
  WagmiConfig,
} from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';

Configure

Configure your desired chains and generate the required connectors. You will also need to setup a wagmi client.

...
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
  [
    alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }),
    publicProvider()
  ]
);

const { connectors } = getDefaultWallets({
  appName: 'My RainbowKit App',
  chains
});

const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider
})

Wrap providers

Wrap your application with RainbowKitProvider and WagmiConfig.

const App = () => {
  return (
    <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider chains={chains}>
        <YourApp />
      </RainbowKitProvider>
    </WagmiConfig>
  );
};

Add the connect button

Then, in your app, import and render the ConnectButton component.

import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};

You're done! RainbowKit will now handle your user's wallet selection, display wallet/transaction information and handle network/wallet switching.

Note: If you're using Remix, remember to add RainbowKit to its server dependencies.

Add your own functionality

Now that your users can connect their wallets, you can start building out the rest of your app using wagmi.

Send transactions, interact with contracts, resolve ENS details and much more with wagmi’s comprehensive suite of React Hooks.

For more detail, view the wagmi documentation.

Further examples

To see some running examples of RainbowKit, or even use them to automatically scaffold a new project, check out the official rainbowkit-examples repository.

To try RainbowKit directly in your browser, check out the CodeSandbox links below:

with Create React App
with Create React App (TypeScript)
with Next.js

Overview

Getting Started

Advanced