Rainbow logo

Modal Sizes

Wide vs. Compact size

By default, RainbowKit's modalSize is set to wide (and looks like this):

We also provide a compact modal size, which looks like this:

To set your modal size to compact, just add modalSize="compact" as a prop in your RainbowKitProvider:

import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
export const App = () => (
<RainbowKitProvider modalSize="compact" {...etc}>
{/* Your App */}