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.
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 Prop | Description | Light/Dark Mode Support | |
---|---|---|---|
default | Default theme | ||
web95 | Web95 theme | ||
retro | Retro theme | ||
soft | Soft theme | ||
midnight | Midnight theme | ||
minimal | Minimal theme | ||
rounded | Rounded theme | ||
nouns | Nouns 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 <ConnectKitProvider5 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 Prop | Description | |
---|---|---|
auto | Either dark or light that matches the user's system color scheme | |
dark | Dark mode | |
light | Light 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 <ConnectKitProvider5 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 <ConnectKitProvider5 options={{6 disclaimer: (7 <>8 By connecting your wallet you agree to the{" "}9 <a10 target="_blank"11 rel="noopener noreferrer"12 href="https://en.wikipedia.org/wiki/Terms_of_service"13 >14 Terms of Service15 </a>{" "}16 and{" "}17 <a18 target="_blank"19 rel="noopener noreferrer"20 href="https://en.wikipedia.org/wiki/Privacy_policy"21 >22 Privacy Policy23 </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:
hideQuestionMarkCTA
Hide the question mark in top-left of the ConnectKit modal that leads to the "About Wallets" page
avoidLayoutShift
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
truncateLongENSAddress
Truncates long ENS addresses in the connect button with ellipsis.
walletConnectName
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
Display the avatar visual in the connect button when a wallet is connected.
showBalance
Display the connected wallet's balance in the connect button when the wallet is connected.
disclaimer
Provide a disclaimer for things like terms and conditions that will be displayed in the ConenctKit modal when no wallet is yet connected.
bufferPolyfill
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.