# Table of Contents

- [Introduction – RabbyKit](#introduction-rabbykit)
- [Migrate – RabbyKit](#migrate-rabbykit)
- [Theming – RabbyKit](#theming-rabbykit)
- [Install – RabbyKit](#install-rabbykit)
- [Actions – RabbyKit](#actions-rabbykit)
- [Custom Login – RabbyKit](#custom-login-rabbykit)
- [Localization – RabbyKit](#localization-rabbykit)

---

# Introduction – RabbyKit

Introduction[](https://rabbykit.rabby.io/docs/introduction#introduction)

-------------------------------------------------------------------------

RabbyKit offers a true web3 solution to help connect your Dapp with wallets, effectively addressing the issue of conflicting multiple wallet extensions. It optimizes the user experience of connecting to Dapps on different devices and enables easy integration with the most suitable visual style and minimal cost.

### Technical[](https://rabbykit.rabby.io/docs/introduction#technical)

Based on [@wagmi/core (opens in a new tab)](https://wagmi.sh/core/getting-started)
 and [viem (opens in a new tab)](https://viem.sh/)
, RabbyKit can be easily integrated into [React (opens in a new tab)](https://react.dev/)
, [Vue (opens in a new tab)](https://vuejs.org/)
, or other frameworks.

### Customize[](https://rabbykit.rabby.io/docs/introduction#customize)

There are many customizable options available with RabbyKit. On the UI side, you can configure aspects such as theme, colors, fonts, and corner styles. On the UX side, you can choose whether to use WalletConnect, customize the login method, and enable user agreement explanations, among other features.

### Multi Injected Provider Support[](https://rabbykit.rabby.io/docs/introduction#multi-injected-provider-support)

RabbyKit supports [EIP-6963 (opens in a new tab)](https://eips.ethereum.org/EIPS/eip-6963)
, which effectively resolves conflicts between multiple wallets. Users can simultaneously view multiple installed extension wallets and choose any wallet to directly connect to the Dapp, providing a seamless experience.

Last updated on January 8, 2026

[Migrate](https://rabbykit.rabby.io/docs/migrate "Migrate")

---

# Migrate – RabbyKit

Migrate[](https://rabbykit.rabby.io/docs/migrate#migrate)

----------------------------------------------------------

### 0.1.0 Breaking changes[](https://rabbykit.rabby.io/docs/migrate#010-breaking-changes)

The [wagmi (opens in a new tab)](https://wagmi.sh/core/getting-started)
 and [viem (opens in a new tab)](https://viem.sh/)
 peer dependencies have reached 2.x.x with breaking changes.

#### 1\. Upgrade RabbyKit, `@wagmi/core`, and `viem` to their latest versions[](https://rabbykit.rabby.io/docs/migrate#1-upgrade-rabbykit-wagmicore-and-viem-to-their-latest-versions)

npmpnpmyarnbun

    npm i @rabby-wallet/rabbykit @wagmi/core viem@2.x @wagmi/connectors

#### 2\. Upgrade your RabbyKit and Wagmi configurations[](https://rabbykit.rabby.io/docs/migrate#2-upgrade-your-rabbykit-and-wagmi-configurations)

    import { createModal, getDefaultConfig } from "@rabby-wallet/rabbykit";
    import { createConfig, http } from "@wagmi/core";
    import { arbitrum, bsc, mainnet, optimism, polygon } from "@wagmi/core/chains";
     
    export const config = createConfig(
      getDefaultConfig({
        appName: "RabbyKit example",
        projectId: "58a22d2bc1c793fc31c117ad9ceba8d9",
        chains: [mainnet, arbitrum, bsc, optimism, polygon],
        transports: {
          [mainnet.id]: http(),
          [arbitrum.id]: http(),
          [bsc.id]: http(),
          [optimism.id]: http(),
          [polygon.id]: http(),
        },
      })
    );
     
    export const rabbykit = createModal({
      wagmi: config,
    });
     
    rabbykit.open();
     
    console.log("current rabbykit modal open status:", rabbykit.getOpenState());
     
    rabbykit.close();

#### 3\. `wagmi` migrate[](https://rabbykit.rabby.io/docs/migrate#3-wagmi-migrate)

*   [`@wagmi/core` v2 Migration Guide (opens in a new tab)](https://wagmi.sh/core/guides/migrate-from-v1-to-v2)
    
*   [`wagmi` Migration Guide (opens in a new tab)](https://wagmi.sh/react/guides/migrate-from-v1-to-v2)
    
*   [`viem` Migration Guide (opens in a new tab)](https://viem.sh/docs/migration-guide)
    

Last updated on January 8, 2026

[Introduction](https://rabbykit.rabby.io/docs/introduction "Introduction")
[Installation](https://rabbykit.rabby.io/docs/install "Installation")

---

# Theming – RabbyKit

Customize[](https://rabbykit.rabby.io/docs/theming#customize)

--------------------------------------------------------------

### ThemeMode[](https://rabbykit.rabby.io/docs/theming#thememode)

*   `light`(default)
*   `dark`

app.ts

    ...
    export const rabbyKit = createModal({
      ...
      theme: "dark",
    });
    ...

### font[](https://rabbykit.rabby.io/docs/theming#font)

Change the font by changing `--rk-font-family` in the `themeVariables`.

### `themeVariables`[](https://rabbykit.rabby.io/docs/theming#themevariables)

By default `themeVariables` is undefined, you can modify `themeVariables` like this:

app.ts

    ...
    export const rabbyKit = createModal({
      ...
      theme: "dark",
      themeVariables:{
        "--rk-border-radius":"16px"
      }
    });
    ...

The following list shows the theme variables you can override:

| Variable | Description | Type |
| --- | --- | --- |
| `--rk-font-family` | font family | `string` |
| `--rk-border-radius` | border radius | `string` |
| `--rk-primary-button-font-size` | button text font size | `string` |
| `--rk-primary-button-color` | button text color | `string` |
| `--rk-primary-button-bg` | button background | `string` |
| `--rk-primary-button-border` | button border | `string` |
| `--rk-primary-button-border-radius` | button border radius | `string` |
| `--rk-primary-button-hover-color` | button hover color | `string` |
| `--rk-primary-button-hover-bg` | button hover background | `string` |
| `--rk-primary-button-hover-border` | button hover border | `string` |

Last updated on January 8, 2026

[Actions](https://rabbykit.rabby.io/docs/actions "Actions")
[Custom Login Method](https://rabbykit.rabby.io/docs/custom-login "Custom Login Method")

---

# Install – RabbyKit

### Installation[](https://rabbykit.rabby.io/docs/install#installation)

Install RabbyKit and its peer dependencies ([@wagmi/core (opens in a new tab)](https://wagmi.sh/core/getting-started)
 and [viem (opens in a new tab)](https://viem.sh/)
).

npmpnpmyarnbun

    npm i @rabby-wallet/rabbykit @wagmi/core viem@2.x

### API Keys[](https://rabbykit.rabby.io/docs/install#api-keys)

1.  RabbyKit utilises https://walletconnect.com/'s SDK to help with connecting wallets. WalletConnect 2.0 requires a projectId which you can create quickly and easily for free over at [WalletConnect Cloud (opens in a new tab)](https://cloud.walletconnect.com/)
    .
2.  [wagmi (opens in a new tab)](https://wagmi.sh/react/api/transports/http#usage)
     recommends using other provider packages such as [Infura (opens in a new tab)](https://www.infura.io/)
     or [Alchemy (opens in a new tab)](https://www.alchemy.com/)
     depending on the specific network requirements of your dApp. These providers offer reliable infrastructure and can be chosen based on your specific needs.

### Config[](https://rabbykit.rabby.io/docs/install#config)

create a config using wagmi's createConfig and create a RabbyKit config;

app.ts

    import { createModal, getDefaultConfig } from "@rabby-wallet/rabbykit";
    import { createConfig, http } from "@wagmi/core";
    import { arbitrum, bsc, mainnet, optimism, polygon } from "@wagmi/core/chains";
     
    export const config = createConfig(
      getDefaultConfig({
        appName: "RabbyKit example",
        projectId: "58a22d2bc1c793fc31c117ad9ceba8d9",
        chains: [mainnet, arbitrum, bsc, optimism, polygon],
        transports: {
          [mainnet.id]: http(),
          [arbitrum.id]: http(),
          [bsc.id]: http(),
          [optimism.id]: http(),
          [polygon.id]: http(),
        },
      })
    );
     
    export const rabbykit = createModal({
      wagmi: config,
    });
     
    rabbykit.open();
     
    console.log("current rabbykit modal open status:", rabbykit.getOpenState());
     
    rabbykit.close();

Last updated on January 8, 2026

[Migrate](https://rabbykit.rabby.io/docs/migrate "Migrate")
[Actions](https://rabbykit.rabby.io/docs/actions "Actions")

---

# Actions – RabbyKit

### RabbyKit Actions[](https://rabbykit.rabby.io/docs/actions#rabbykit-actions)

    const rabbyKit = createModal({
      chains,
      wagmi,
      projectId,
      appName,
    });
    //open RabbyKit modal
    rabbyKit.open();
     
    //get open status
    rabbyKit.getOpenState();
     
    //close modal
    rabbyKit.close();
     
    rabbyKit.getOpenState();
     
    //set dark mode
    rabbyKit.setTheme("dark");

    type RabbyKitActions = {
      open: (params?: { forceOpen?: boolean } & Hook) => void;
      close: () => void;
      subscribeModalState: (fn: (open: boolean) => void) => () => void;
      getOpenState: () => boolean;
     
      getTheme: () => Theme;
      setTheme: (theme: Theme) => void;
      setThemeVariables: (themeVariables?: ThemeVariables) => void;
     
      getDisclaimer: () => Disclaimer | undefined;
      setDisclaimer: (disclaimer?: Disclaimer) => void;
     
      getCustomButtons: () => CustomButton[] | undefined;
      setCustomButtons: (customButtons?: CustomButton[]) => void;
     
      getLanguage: () => SUPPORT_LANGUAGES;
      // setLanguage: (language: SUPPORT_LANGUAGES) => void;
    };
     
    type Hook = {
      onConnect?: () => void;
      onConnectError?: (error: Error) => void;
      onModalClosed?: () => void;
      onModalClosedByManualOperation?: () => void;
    };

Last updated on January 8, 2026

[Installation](https://rabbykit.rabby.io/docs/install "Installation")
[Customize](https://rabbykit.rabby.io/docs/theming "Customize")

---

# Custom Login – RabbyKit

Custom Login Method[](https://rabbykit.rabby.io/docs/custom-login#custom-login-method)

---------------------------------------------------------------------------------------

RabbyKit provides options for customizing login methods, allowing you to set icons, text, and define the behavior upon clicking. This enables you to incorporate special login methods such as email login, which may be required by some DApps.

app.ts

    export const rabbyKit = createModal({
      ...
      customButtons: [\
        {\
          name: "your login method",\
          logo: "https://debank.com/192.png",\
          onClick: () => {\
            rabbyKit.close();\
            //your login method\
          },\
        },\
      ],
    });
     
    //or
    rabbyKit.setCustomButtons([\
      {\
        name: "Login with verified email",\
        logo: IconEmailLogin,\
        onClick: () => {\
          rabbyKit.close();\
          //your login method\
        },\
      },\
    ]);

whether to use WalletConnect[](https://rabbykit.rabby.io/docs/custom-login#whether-to-use-walletconnect)

---------------------------------------------------------------------------------------------------------

app.ts

    ...
    export const rabbyKit = createModal({
        ...
      showWalletConnect: false,
    });
    ...

Last updated on January 8, 2026

[Customize](https://rabbykit.rabby.io/docs/theming "Customize")
[Localization](https://rabbykit.rabby.io/docs/localization "Localization")

---

# Localization – RabbyKit

Localization[](https://rabbykit.rabby.io/docs/localization#localization)

-------------------------------------------------------------------------

app.ts

    ...
    export const rabbyKit = createModal({
      ...
      language: "en",
    });
    ...

### Supported Languages[](https://rabbykit.rabby.io/docs/localization#supported-languages)

| Language | Value | Status |
| --- | --- | --- |
| English | `en` | ✅   |
| 中文  | `zh-CN` | ✅   |

Last updated on January 8, 2026

[Custom Login Method](https://rabbykit.rabby.io/docs/custom-login "Custom Login Method")

---