Modal Sizes

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 */}
  </RainbowKitProvider>
);