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.

Default Themes

Build your own 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.jsxconst 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 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.jsxconst 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 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.jsxconst 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.jsxconst 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

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.

Theming

Example

Theme Props

Enable Google Fonts for Themes

Mode Props

Theme Variables

Example

Variables

Connect Wallet Button variables

Primary Button variables

Secondary Button variables

Tertiary Button variables

Modal variables

Text variables

Miscellaneous variables

Additional Options

Example

Options

On this page