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

<ConnectKitProvider theme="auto">
  /* Your App */
</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
const App = () => {
  return (
    <WagmiConfig config={config}>
      <ConnectKitProvider theme="default" mode="dark">
        {/* Your App */}
        <ConnectKitButton />
      </ConnectKitProvider>
    </WagmiConfig>
  );
};

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
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
const App = () => {
  return (
    <WagmiConfig config={config}>
      <ConnectKitProvider
        theme="web95"
        options={{
          embedGoogleFonts: true,
        }}
      >
        {/* Your App */}
        <ConnectKitButton />
      </ConnectKitProvider>
    </WagmiConfig>
  );
};

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
const App = () => {
  return (
    <WagmiConfig config={config}>
      <ConnectKitProvider
        customTheme={{
          "--ck-overlay-background": "rgba(255, 0, 0, 0.5)",
        }}
      >
        {/* Your App */}
        <ConnectKitButton />
      </ConnectKitProvider>
    </WagmiConfig>
  );
};

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
const App = () => {
  return (
    <WagmiConfig config={config}>
      <ConnectKitProvider
        options={{
          disclaimer: (
            <>
              By connecting your wallet you agree to the{" "}
              <a
                target="_blank"
                rel="noopener noreferrer"
                href="https://en.wikipedia.org/wiki/Terms_of_service"
              >
                Terms of Service
              </a>{" "}
              and{" "}
              <a
                target="_blank"
                rel="noopener noreferrer"
                href="https://en.wikipedia.org/wiki/Privacy_policy"
              >
                Privacy Policy
              </a>
            </>
          ),
        }}
      >
        {/* Your App */}
        <ConnectKitButton />
      </ConnectKitProvider>
    </WagmiConfig>
  );
};

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:

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

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.

customAvatar
React.ReactNode

Change the avatar used in ConnectKit to more closely match the look and feel of your app. To learn more, visit the custom avatar docs.

disableSiweRedirect
boolean

Disable the redirect to SIWE page when the user connects to a wallet.

disclaimer
ReactNode | string
Default is null

Provide a disclaimer for things like terms and conditions that will be displayed to users in the ConenctKit modal when they're not yet connected.

embedGoogleFonts
boolean
Default is false

Automatically embeds Google Font of the current theme.

enforceSupportedChains
boolean
Default is true

By default, ConnectKit will only allow users to connect to chains that are supported by your app. Set this to false to allow users to connect to any chain.

ethereumOnboardingUrl
string
Default is https://ethereum.org/en/wallets/

Link to a resource for learning more about Ethereum.

hideBalance
boolean

Hide balance in the profile view.

hideNoWalletCTA
boolean

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

hideQuestionMarkCTA
boolean

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

hideRecentBadge
boolean
Default is false

Hide the "Recent" badge that appears on the most recently connected wallet connector.

hideTooltips
boolean

Hide any tooltips that would normally appear

initialChainId
number
Default is the first chain in your wagmi config

Target a specific chain to request connection to. By default ConnectKit will autotarget the first chain defined in your WagmiConfig. Set this to 0 to remove chain targetting.

language
'en-US' | 'es-ES' | 'fr-FR' | 'ja-JP' | 'pt-BR' | 'zh-CN'

Customize the language used in ConnectKit to better suit your audience.

overlayBlur
number

Accepts a numerical value to control the degree of blur applied to the overlay. Alternatively you can use the theme variable --ck-overlay-backdrop-filter to achieve the same effect.

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.

truncateLongENSAddress
boolean
Default is true

Truncates long ENS addresses in the connect button with ellipsis.

walletConnectCTA
'modal' | 'link' | 'both'
Default is 'modal'

When viewing the WalletConnect QR code, we display a button to open the official WalletConnect modal. This allows users to access more niche connectors if needed.
Use link to display a button to copy the WalletConnect URI. To show both options, use both.

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.

walletOnboardingUrl
string
Default is https://ethereum.org/en/wallets/find-wallet/

Link to a resource for learning more about Wallets.

Previous
Customization
Next
Fonts
On this page