Border Radius

You can easily customize the border radius used in ConnectKit to more closely match the look and feel of your app.

If you're looking to customize the connect button, check out Custom Connect Button.

Example

To change the border radius, provide a customTheme prop to your <ConnectKitProvider />.

This example sets the border radius to 42px:

<ConnectKitProvider
  customTheme={{
    "--ck-border-radius": 42,
  }}
>
  {/* Your App */}
</ConnectKitProvider>

That's it—the custom theme now extends the default theme to support your custom border radius.

Here it is in action: