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.jsx1const App = () => {
return (
  <WagmiConfig client={client}>
    <ConnectKitProvider theme="default" mode="dark">
      {/* Your App */}
      <ConnectKitButton />
    </ConnectKitProvider>
  </WagmiConfig>
);
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.jsx1const App = () => {
return (
  <WagmiConfig client={client}>
    <ConnectKitProvider
      theme="web95"
      options={{
        embedGoogleFonts: true,
      }}
    >
      {/* Your App */}
      <ConnectKitButton />
    </ConnectKitProvider>
  </WagmiConfig>
);
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.jsx1const App = () => {
return (
  <WagmiConfig client={client}>
    <ConnectKitProvider
      customTheme={{
        "--ck-overlay-background": "rgba(255, 0, 0, 0.5)",
      }}
    >
      {/* Your App */}
      <ConnectKitButton />
    </ConnectKitProvider>
  </WagmiConfig>
);
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.jsx1const App = () => {
return (
  <WagmiConfig client={client}>
    <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>
);
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.

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