Get up and running with RainbowKit
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.
Import RainbowKit and wagmi.
Configure your desired chains and generate the required connectors. You will also need to setup a
Wrap your application with
Then, in your app, import and render the
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.
The Webpack v5 bundler used by Next.js and Create React App no longer provides Node polyfills, so you'll need to include these modules yourself to satisfy RainbowKit's peer dependencies. Create React App specifically requires that you polyfill
In previous versions of RainbowKit that relied on ethers, the
tls modules were automatically polyfilled. This is no longer the case with RainbowKit v1 + wagmi v1, which are built on viem.
Remix also requires that you polyfill
process.env. Reference the polyfills in our sample Remix project.
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: