Powered by

A design system from Family

Theming

ConnectKit comes with beautiful themes to match your app, as well as the ability to customize to your liking using theming variables. Below you can try various customization options.

Choose a theme

1<ConnectKitProvider theme="auto">
2 /* Your App */
3</ConnectKitProvider/>

Example

To set a theme, simply provide a theme prop to the <ConnectKitProvider /> (and optionally a mode prop as well):

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

,
_app.jsx
1const App = () => {
2 return (
3 <WagmiConfig client={client}>
4 <ConnectKitProvider theme="default" mode="dark">
5 {/* Your App */}
6 <ConnectKitButton />
7 </ConnectKitProvider>
8 </WagmiConfig>
9 );
10};

That's it—ConnectKit should now appear with the default theme in dark mode as shown below:

Theme Props

In the table below, you'll find additional theme values you can provide:

Theme PropDescriptionLight/Dark Mode Support
defaultDefault theme
web95Web95 theme
retroRetro theme
softSoft theme
midnightMidnight theme
minimalMinimal theme
roundedRounded theme

Enable Google Fonts for Themes

If you decide to use a theme other than the default theme, we strongly suggest enabling the embedGoogleFonts option so that fonts will appear correctly.

This option is turned off by default to avoid loading any fonts from Google without your opt-in.

Here's how you enable the option:

,
_app.jsx
1const App = () => {
2 return (
3 <WagmiConfig client={client}>
4 <ConnectKitProvider
5 theme="web95"
6 options={{
7 embedGoogleFonts: true,
8 }}
9 >
10 {/* Your App */}
11 <ConnectKitButton />
12 </ConnectKitProvider>
13 </WagmiConfig>
14 );
15};

Mode Props

For themes that support light/dark mode it's possible to configure which one to show. Alternatively, it's possible to set it to auto and ConnectKit will automatically present light/dark mode depending on the color scheme of user's system.

Please note that only the default theme currently supports a light/dark mode.

Mode PropDescription
autoEither dark or light that matches the user's system color scheme
darkDark mode
lightLight mode

Theme Variables

It's possible to override various styles of a theme by providing a customTheme prop to <ConnectKitProvider />.

Overriding theme variables isn't a stable feature yet and could change in future versions of ConnectKit. We suggest only customizing the theme if you're confident you can migrate any changes when upgrading.

Example

Below is an example of overriding the default overlay color:

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

That's it—ConnectKit should now have a semi-transparent red overlay when it appears.

Variables

In the tables below, you'll find the full list of styling variables that you can provide:

Connect Wallet Button variables

Primary Button variables

Secondary Button variables

Tertiary Button variables

Modal variables

Text variables

Miscellaneous variables

Additional Options

To access additional configuration options, provide an options prop to your <ConnectKitProvider />.

If you're looking to provide an even more custom experience, we offer a few key configuration options that have a larger impact than pure visual changes. We only suggest using these in very specific situations, as they may make your connection experience more difficult for novices.

Example

Below is an example of how to add a custom disclaimer element to ConnectKit that will be displayed in the modal before the user has a wallet connected.

,
_app.jsx
1const App = () => {
2 return (
3 <WagmiConfig client={client}>
4 <ConnectKitProvider
5 options={{
6 disclaimer: (
7 <>
8 By connecting your wallet you agree to the{" "}
9 <a
10 target="_blank"
11 rel="noopener noreferrer"
12 href="https://en.wikipedia.org/wiki/Terms_of_service"
13 >
14 Terms of Service
15 </a>{" "}
16 and{" "}
17 <a
18 target="_blank"
19 rel="noopener noreferrer"
20 href="https://en.wikipedia.org/wiki/Privacy_policy"
21 >
22 Privacy Policy
23 </a>
24 </>
25 ),
26 }}
27 >
28 {/* Your App */}
29 <ConnectKitButton />
30 </ConnectKitProvider>
31 </WagmiConfig>
32 );
33};

That's it—ConnectKit should now appear with your disclaimer as shown below:

Options

In the table below you'll find the full list of configuration options for ConnectKit:

hideTooltips
boolean

Hide any tooltips that would normally appear

hideQuestionMarkCTA
boolean

Hide the question mark in top-left of the ConnectKit modal that leads to the "About Wallets" page

hideNoWalletCTA
boolean

Hide the "I don't have a wallet" call to action in the ConnectKit modal

avoidLayoutShift
boolean
Default is true

Avoids layout shift when the ConnectKit modal is open by adding padding to the<body>. Alternatively, set this to false and create your own solution using the css variable --ck-scrollbar-width

embedGoogleFonts
boolean
Default is false

Automatically embeds Google Font of the current theme.

truncateLongENSAddress
boolean
Default is true

Truncates long ENS addresses in the connect button with ellipsis.

walletConnectName
string
Default is 'Other Wallets'

By default, the WalletConnect option is named "Other Wallets". Use this option to change the name to, e.g., "WalletConnect" by providing a string.

showAvatar
boolean
Default is true

Display the avatar visual in the connect button when a wallet is connected.

showBalance
boolean
Default is false

Display the connected wallet's balance in the connect button when the wallet is connected.

disclaimer
ReactNode | string
Default is null

Provide a disclaimer for things like terms and conditions that will be displayed in the ConenctKit modal when no wallet is yet connected.

bufferPolyfill
boolean
Default is true

Some bundlers require a Buffer polyfill for WalletConnect. We check and implement this by default, but if you need to disable our implementation then you can set this option to false.