Rainbow logo
RainbowKit
0.6.1

Installation

Get up and running with RainbowKit

You can scaffold a new RainbowKit + wagmi + Next.js app with one of the following commands, using your package manager of choice:

npm init @rainbow-me/rainbowkit@latest
# or
yarn create @rainbow-me/rainbowkit@latest
# or
pnpm create @rainbow-me/rainbowkit@latest

This will prompt you for a project name, generate a new directory containing a boilerplate project, and install all required dependencies.

Alternatively, you can manually integrate RainbowKit into your existing project.

Install RainbowKit and its peer dependencies, wagmi and ethers.

npm install @rainbow-me/rainbowkit wagmi ethers

Note: RainbowKit is a React library.

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 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({ apiKey: process.env.ALCHEMY_ID }),
publicProvider()
]
);
const { connectors } = getDefaultWallets({
appName: 'My RainbowKit App',
chains
});
const wagmiClient = createClient({
autoConnect: true,
connectors,
provider
})

Read more about configuring chains & providers with wagmi.

Wrap your application with RainbowKitProvider and WagmiConfig.

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

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

import { ConnectButton } from '@rainbow-me/rainbowkit';
export const YourApp = () => {
return <ConnectButton />;
};

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

Some build tools will require additional setup.

If your bundler doesn't provide Node polyfills (e.g. Vite), you'll need to include polyfills for global, Buffer and process.env. As an example, you can reference the polyfills in our sample Vite project.

When using Remix, RainbowKit must be added to your list of server dependencies since it's published as an ESM package.

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.

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

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