Powered by

A design system from Family

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:

,
_app.jsx
1const App = () => {
2 return (
3 <WagmiConfig client={client}>
4 <ConnectKitProvider
5 customTheme={{
6 "--ck-border-radius": 42,
7 }}
8 >
9 {/* Your App */}
10 <ConnectKitButton />
11 </ConnectKitProvider>
12 </WagmiConfig>
13 );
14};

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

Here it is in action:

Border Radius