# Installation (/wallets/auth/wallet-ui-kit/installation)

> For the complete documentation index, see [llms.txt](/llms.txt)



Install the Wallet UI Kit and its peer dependencies, then add the connector and providers.

## Install packages [#install-packages]

<Tabs items="[&#x22;npm&#x22;,&#x22;yarn&#x22;,&#x22;pnpm&#x22;,&#x22;bun&#x22;]">
  <Tab value="npm">
    ```bash
    npm i @zerodev/wallet-react-ui @zerodev/react-ui @zerodev/wallet-core @zerodev/wallet-react wagmi viem @wagmi/core @tanstack/react-query zustand
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add @zerodev/wallet-react-ui @zerodev/react-ui @zerodev/wallet-core @zerodev/wallet-react wagmi viem @wagmi/core @tanstack/react-query zustand
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add @zerodev/wallet-react-ui @zerodev/react-ui @zerodev/wallet-core @zerodev/wallet-react wagmi viem @wagmi/core @tanstack/react-query zustand
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add @zerodev/wallet-react-ui @zerodev/react-ui @zerodev/wallet-core @zerodev/wallet-react wagmi viem @wagmi/core @tanstack/react-query zustand
    ```
  </Tab>
</Tabs>

## Configure Wagmi [#configure-wagmi]

Import `zeroDevWallet` from `@zerodev/wallet-react-ui` and add it as a connector. It wraps the base ZeroDev Wallet connector and drives the kit's auth UI.

```tsx
import { zeroDevWallet } from '@zerodev/wallet-react-ui'
import { createConfig, http } from 'wagmi'
import { arbitrumSepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [arbitrumSepolia],
  connectors: [
    zeroDevWallet({
      projectId: '<your-project-id>',
      chains: [arbitrumSepolia],
      mode: '7702',
    }),
  ],
  transports: {
    [arbitrumSepolia.id]: http('https://sepolia-rollup.arbitrum.io/rpc'),
  },
})
```

<Callout type="info">
  If your sign-up page won't offer [external wallets](/wallets/auth/wallet-ui-kit/connect-wallet#external-wallets), add `multiInjectedProviderDiscovery: false` to `createConfig`. The kit only needs Wagmi's browser-extension discovery for external wallet rows, and with discovery off an [unresponsive extension](/wallets/auth/wallet-ui-kit/known-issues/unresponsive-wallet-extensions) can never stall your app's boot.
</Callout>

## Add providers and styles [#add-providers-and-styles]

Import the kit stylesheet once at your app entry, then wrap your app with the Wagmi and TanStack Query providers. If your app has broad global element styles, scope them to your own app shell so they don't override the kit.

```tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import '@zerodev/wallet-react-ui/styles.css'
import { WagmiProvider } from 'wagmi'
import { config } from './wagmi'

const queryClient = new QueryClient()

<WagmiProvider config={config}>
  <QueryClientProvider client={queryClient}>
    {/* your app */}
  </QueryClientProvider>
</WagmiProvider>
```

With the connector and providers in place, render the login flow with [`ConnectWallet`](/wallets/auth/wallet-ui-kit/connect-wallet).