RainbowKit
52.3kstarscachedBeautiful wallet connection UI
Frontend
Official links
About RainbowKit
RainbowKit is the most polished wallet connection library in the React ecosystem. It ships a fully accessible ConnectButton, wallet switcher, and chain selector out of the box, and integrates cleanly with wagmi. Themes are customizable, and custom wallets can be added in a few lines.
Quickstarts
A fast path from zero to running code.
npm install @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-queryimport "@rainbow-me/rainbowkit/styles.css";
import { ConnectButton, RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { WagmiProvider } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { config } from "./config";
const queryClient = new QueryClient();
export function App() {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<RainbowKitProvider>
<ConnectButton />
</RainbowKitProvider>
</QueryClientProvider>
</WagmiProvider>
);
}Documentation
The RainbowKit docs cover installation, themes, custom chains, custom wallets, authentication (SIWE), and localization. The theming guide is particularly thorough and shows how to match your brand without losing accessibility.
Read full docsCommunity Notes
Tips, gotchas, and updated examples from the community.
No community notes yet.
Be the first to share a tip, gotcha, or updated example.