zerodevapp · brtkx · Jul 31, 2026 · Jul 31, 2026
diff --git a/docs/pages/wallets/auth/wallet-ui-kit.mdx b/docs/pages/wallets/auth/wallet-ui-kit.mdx
diff --git a/docs/pages/wallets/auth/wallet-ui-kit/coming-soon.mdx b/docs/pages/wallets/auth/wallet-ui-kit/coming-soon.mdx
@@ -0,0 +1,11 @@
+# Coming soon
+
+The Wallet UI Kit will add more prebuilt wallet components and screens over time, including:
+
+- Prebuilt signature and transaction confirmation screens
+- Onramps
+- Asset management and portfolio views
+- Transaction history
+- Chain-abstracted balances
+
+To request early access, reach out to the [ZeroDev sales team](https://zerodev.app/contact).
diff --git a/docs/pages/wallets/auth/wallet-ui-kit/connect-wallet.mdx b/docs/pages/wallets/auth/wallet-ui-kit/connect-wallet.mdx
@@ -0,0 +1,89 @@
+# ConnectWallet
+
+`<ConnectWallet />` renders the current authentication step (sign-up, email verification, OTP, and so on) inside the kit's card. Render it in the Wagmi provider tree; it shows the active screen while the connector waits for the user to finish.
+
+Out of the box it renders the canonical sign-up page — passkey, Google, and email — so the bare component is all you need to ship a login:
+
+```tsx
+<ConnectWallet />
+```
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `size` | `'sm' \| 'md' \| 'lg'` | Card size. `sm` for compact surfaces, `md` for drawers and smaller modals, `lg` when the flow has more room. Keep it fixed across every auth step. |
+| `logo` | `ReactNode` | Brand mark shown in the top nav on the sign-up page. When omitted, no logo is shown. |
+| `renderSignUp` | `() => ReactNode` | Replace the default sign-up page with your own `SignUp` composition (see below). |
+| `onClose` | `() => void` | Fires when the user clicks the kit's close button. Use it when your app owns surrounding UI state, such as closing a modal. |
+
+```tsx
+<ConnectWallet
+  size="md"
+  logo={<YourLogo />}
+  onClose={() => setLoginOpen(false)}
+/>
+```
+
+## Choosing the email flow
+
+The email method sends either a one-time code (`otp`) or a magic link (`magicLink`, the default). To keep the default page but change the email flow, render `SignUp.Default` — the canonical page — through `renderSignUp` and set `emailAuthMethod`:
+
+```tsx
+import { ConnectWallet, SignUp } from '@zerodev/wallet-react-ui'
+
+<ConnectWallet
+  renderSignUp={() => <SignUp.Default emailAuthMethod="otp" />}
+/>
+```
+
+`SignUp.Default` accepts the sign-up page's options:
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `emailAuthMethod` | `'magicLink' \| 'otp'` | Email verification flow. Defaults to `magicLink`. |
+| `termsAndConditionsUrl` | `string` | When set, a consent checkbox appears in the footer and every method is blocked until the user agrees. |
+| `privacyPolicyUrl` | `string` | Adds a privacy policy link to the footer. Also enables the consent gate. |
+
+```tsx
+<ConnectWallet
+  renderSignUp={() => (
+    <SignUp.Default
+      emailAuthMethod="otp"
+      termsAndConditionsUrl="https://example.com/terms"
+      privacyPolicyUrl="https://example.com/privacy"
+    />
+  )}
+/>
+```
+
+## Rearranging the sign-up page
+
+For full control over which methods appear and in what order, compose the page yourself from the `SignUp.*` units inside `renderSignUp`. Options that apply to the whole page — `emailAuthMethod`, `termsAndConditionsUrl`, `privacyPolicyUrl` — go on the `SignUp` root:
+
+```tsx
+import { ConnectWallet, SignUp } from '@zerodev/wallet-react-ui'
+
+<ConnectWallet
+  renderSignUp={() => (
+    <SignUp emailAuthMethod="otp" termsAndConditionsUrl="https://example.com/terms">
+      <SignUp.Google />
+      <SignUp.Divider />
+      <SignUp.Email />
+    </SignUp>
+  )}
+/>
+```
+
+Available units:
+
+| Unit | Renders |
+| --- | --- |
+| `SignUp.Passkey` | Create-a-passkey and log-in-with-passkey buttons. |
+| `SignUp.Google` | Google OAuth row. |
+| `SignUp.Email` | Email input that runs the flow set by `emailAuthMethod`. |
+| `SignUp.Divider` | A labelled divider (`or` by default; pass `label` to change it). |
+
+While one method's authentication is in flight, the other units disable themselves so two flows can't run at once. Include only the units for the methods enabled on your project.
+
+Authentication success and failure surface through Wagmi — `await` the `connect` call, or watch `useAccount()`.
diff --git a/docs/pages/wallets/auth/wallet-ui-kit/getting-started.mdx b/docs/pages/wallets/auth/wallet-ui-kit/getting-started.mdx
@@ -0,0 +1,42 @@
+# Wallet UI Kit
+
+The Wallet UI Kit gives you prebuilt React UI for ZeroDev Wallet. Use it when you want a ready-made login flow instead of building every authentication screen yourself.
+
+The kit uses a Wagmi-compatible ZeroDev connector, so after the user signs in you can use standard Wagmi hooks such as `useAccount`, `useSignMessage`, and `useSendTransaction`.
+
+For a fully custom UI, use the hook-based authentication pages instead: [Passkeys](/wallets/auth/passkeys), [Email OTP](/wallets/auth/email-otp), [Magic Link](/wallets/auth/magic-link), or [Google OAuth](/wallets/auth/google-oauth). To drive the kit's flow yourself, use the `useAuth` hook from `@zerodev/wallet-react-ui` to read and control the auth state.
+
+## Getting started
+
+`<ConnectWallet />` renders the active authentication screen. Connecting through the `zeroDevWallet` connector is what opens the flow, so a minimal login is a connect button plus the component in the same provider tree:
+
+```tsx
+import { ConnectWallet } from '@zerodev/wallet-react-ui'
+import { useConnect } from 'wagmi'
+
+export function WalletLogin() {
+  const { connect, connectors } = useConnect()
+  const zeroDevConnector = connectors.find((c) => c.id === 'zerodev-wallet')
+
+  return (
+    <>
+      <button onClick={() => connect({ connector: zeroDevConnector! })}>
+        Connect wallet
+      </button>
+      <ConnectWallet size="md" />
+    </>
+  )
+}
+```
+
+Once the user finishes authentication, `useAccount` returns the connected address — see the [quickstart](/wallets/quickstart) for a full login component.
+
+## Before you start
+
+Open the [ZeroDev Dashboard](https://dashboard.zerodev.app/) and make sure your project has:
+
+- The app origin on the project's ACL allowlist, such as `http://localhost:3000` for local development.
+- The auth methods you plan to show configured for the project.
+- At least one enabled network.
+
+Next, [install the kit and configure Wagmi](/wallets/auth/wallet-ui-kit/installation).
diff --git a/docs/pages/wallets/auth/wallet-ui-kit/installation.mdx b/docs/pages/wallets/auth/wallet-ui-kit/installation.mdx
@@ -0,0 +1,70 @@
+# Installation
+
+Install the Wallet UI Kit and its peer dependencies, then add the connector and providers.
+
+## Install packages
+
+:::code-group
+
+```bash [npm]
+npm i @zerodev/wallet-react-ui @zerodev/react-ui @zerodev/wallet-core @zerodev/wallet-react wagmi viem @wagmi/core @tanstack/react-query zustand
+```
+
+```bash [yarn]
+yarn add @zerodev/wallet-react-ui @zerodev/react-ui @zerodev/wallet-core @zerodev/wallet-react wagmi viem @wagmi/core @tanstack/react-query zustand
+```
+
+```bash [pnpm]
+pnpm add @zerodev/wallet-react-ui @zerodev/react-ui @zerodev/wallet-core @zerodev/wallet-react wagmi viem @wagmi/core @tanstack/react-query zustand
+```
+
+```bash [bun]
+bun add @zerodev/wallet-react-ui @zerodev/react-ui @zerodev/wallet-core @zerodev/wallet-react wagmi viem @wagmi/core @tanstack/react-query zustand
+```
+
+:::
+
+## 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'),
+  },
+})
+```
+
+## 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).
diff --git a/docs/pages/wallets/index.mdx b/docs/pages/wallets/index.mdx
@@ -6,7 +6,7 @@ Users sign in with familiar login methods, then get a self-custodial web3 wallet
 
 ## How it works
 
-Adding ZeroDev Wallet takes three steps. Use the hook-based SDK for a fully custom wallet experience, or drop in the prebuilt [Wallet UI Kit](/wallets/auth/wallet-ui-kit) when you want a ready-made login flow. See it in the [live demo](https://smart-wallet-demo.zerodev.app/), or follow the [quickstart](/wallets/quickstart) to build it yourself.
+Adding ZeroDev Wallet takes three steps. Use the hook-based SDK for a fully custom wallet experience, or drop in the prebuilt [Wallet UI Kit](/wallets/auth/wallet-ui-kit/getting-started) when you want a ready-made login flow. See it in the [live demo](https://smart-wallet-demo.zerodev.app/), or follow the [quickstart](/wallets/quickstart) to build it yourself.
 
 <Cards>
   <Card icon="key" title="1. Authenticate">
@@ -31,7 +31,7 @@ That's what makes every wallet **self-custodial**: only the authenticated user c
 <Cards>
   <Card icon="key" title="Onboarding">
     - Authenticate with [passkeys](/wallets/auth/passkeys), [Google OAuth](/wallets/auth/google-oauth), [email OTP](/wallets/auth/email-otp), or [magic links](/wallets/auth/magic-link).
-    - Drop in the prebuilt [Wallet UI Kit](/wallets/auth/wallet-ui-kit) for a faster login integration with less code.
+    - Drop in the prebuilt [Wallet UI Kit](/wallets/auth/wallet-ui-kit/getting-started) for a faster login integration with less code.
     - Let users [export their wallet](/wallets/export) at any time.
   </Card>
   <Card icon="send" title="Wallet actions">

diff --git a/docs/pages/wallets/quickstart.mdx b/docs/pages/wallets/quickstart.mdx
@@ -2,7 +2,7 @@
 
 Add ZeroDev Wallet to any React app that can render client-side React components. Authenticate users with ZeroDev hooks, then use standard Wagmi hooks for wallet actions.
 
-Want a faster starting point? Try the optional [Wallet UI Kit](/wallets/auth/wallet-ui-kit) for a prebuilt login flow.
+Want a faster starting point? Try the optional [Wallet UI Kit](/wallets/auth/wallet-ui-kit/getting-started) for a prebuilt login flow.
 
 For a complete working reference, see the [ZeroDev Wallet SDK demo app](https://smart-wallet-demo.zerodev.app/).
 
@@ -275,7 +275,7 @@ Each auth method connects the same ZeroDev Wagmi connector after successful auth
 
 ## Optional Wallet UI Kit
 
-The examples above use `@zerodev/wallet-react` so you can build your own UI. If you want a prebuilt login flow, use the optional [Wallet UI Kit](/wallets/auth/wallet-ui-kit). Keep the hook-based path if you want full control over layout, styling, and bundle size.
+The examples above use `@zerodev/wallet-react` so you can build your own UI. If you want a prebuilt login flow, use the optional [Wallet UI Kit](/wallets/auth/wallet-ui-kit/getting-started). Keep the hook-based path if you want full control over layout, styling, and bundle size.
 
 ## Troubleshooting