diff --git a/docs/pages/wallets/react-kit/configuration.mdx b/docs/pages/wallets/react-kit/configuration.mdx
new file mode 100644
index 0000000..eae2e3f
--- /dev/null
+++ b/docs/pages/wallets/react-kit/configuration.mdx
@@ -0,0 +1,83 @@
+# Configuration
+
+The kit connector accepts all base `zeroDevWallet` params plus an optional `config` object for kit-specific features.
+
+## Basic
+
+```tsx
+import { zeroDevWallet } from '@zerodev/wallet-react-kit'
+
+zeroDevWallet({
+ projectId: 'your-project-id',
+ chains: [sepolia],
+})
+```
+
+Signing confirmation is enabled by default (`prompt` mode). No extra config needed.
+
+## Auth
+
+Configure how users sign in. To display the auth UI, mount the [``](/wallets/react-kit/features/authentication) component in your app.
+
+```tsx
+zeroDevWallet({
+ projectId: '...',
+ chains: [sepolia],
+ config: {
+ auth: {
+ magicLinkBaseUrl: 'https://yourdomain.com/auth/verify',
+ enabledMethods: ['email', 'google', 'passkey'],
+ termsAndConditionsUrl: 'https://yourdomain.com/terms',
+ privacyPolicyUrl: 'https://yourdomain.com/privacy',
+ },
+ },
+})
+```
+
+### `config.auth`
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `magicLinkBaseUrl` | `string` | The URL the magic link points to. |
+| `enabledMethods` | `AuthMethod[]` | Which methods to offer: `'email'`, `'google'`, `'passkey'`, `'injected-wallet'`. |
+| `termsAndConditionsUrl` | `string` (optional) | Your terms and conditions URL. When set (alone or with `privacyPolicyUrl`), the auth UI shows a required agreement checkbox. |
+| `privacyPolicyUrl` | `string` (optional) | Your privacy policy URL. When set (alone or with `termsAndConditionsUrl`), the auth UI shows a required agreement checkbox. |
+| `onSuccess` | `() => void` | Called when authentication completes successfully. |
+| `onError` | `(error: unknown) => void` | Called when authentication fails. |
+
+## Signing
+
+Control whether transactions and signing requests show a confirmation UI. To display the confirmation UI, mount the [``](/wallets/react-kit/features/transaction-signing) component in your app.
+
+```tsx
+zeroDevWallet({
+ projectId: '...',
+ chains: [sepolia],
+ config: {
+ signing: {
+ mode: 'prompt',
+ },
+ },
+})
+```
+
+### `config.signing`
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `mode` | `"prompt"` or `"background"` | `"prompt"` | `prompt` shows confirmation UI. `background` skips it. |
+| `methods` | `RequestMethod[]` | `eth_sendTransaction`, `wallet_sendTransaction`, `wallet_sendCalls`, `personal_sign`, `eth_signTypedData_v4` | Which RPC methods trigger the confirmation UI. |
+
+### Background mode
+
+Set `mode: 'background'` to disable the signing gate entirely. Transactions execute immediately without confirmation UI.
+
+```tsx
+zeroDevWallet({
+ projectId: '...',
+ chains: [sepolia],
+ config: {
+ signing: { mode: 'background' },
+ },
+})
+```
\ No newline at end of file
diff --git a/docs/pages/wallets/react-kit/features/authentication.mdx b/docs/pages/wallets/react-kit/features/authentication.mdx
new file mode 100644
index 0000000..e702813
--- /dev/null
+++ b/docs/pages/wallets/react-kit/features/authentication.mdx
@@ -0,0 +1,86 @@
+# Authentication
+
+Sign user in with email, Google, passkey, and more. The ``
+component sits in your tree and renders the right auth screen for the
+current step.
+
+## Import
+
+```tsx
+import { AuthFlow } from '@zerodev/wallet-react-kit'
+```
+
+## Configure auth
+
+Pass an `auth` block to the connector to enable authentication:
+
+```tsx
+import { zeroDevWallet } from '@zerodev/wallet-react-kit'
+
+zeroDevWallet({
+ projectId: '...',
+ chains: [sepolia],
+ config: {
+ auth: {
+ magicLinkBaseUrl: 'https://yourdomain.com/auth/verify',
+ enabledMethods: ['email', 'google', 'passkey'],
+ termsAndConditionsUrl: 'https://yourdomain.com/terms',
+ privacyPolicyUrl: 'https://yourdomain.com/privacy',
+ onSuccess: () => {
+ // user is authenticated
+ },
+ onError: (error) => {
+ // auth failed
+ },
+ },
+ },
+})
+```
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `magicLinkBaseUrl` | `string` | The URL the magic link points to. Your app should call the verification handler at this path. |
+| `enabledMethods` | `AuthMethod[]` | Which methods to offer: `'email'`, `'google'`, `'passkey'`, `'injected-wallet'`. |
+| `termsAndConditionsUrl` | `string` (optional) | URL for your terms and conditions page. When set (alone or with `privacyPolicyUrl`), the auth UI shows a required agreement checkbox before the user can continue. |
+| `privacyPolicyUrl` | `string` (optional) | URL for your privacy policy page. When set (alone or with `termsAndConditionsUrl`), the auth UI shows a required agreement checkbox before the user can continue. |
+| `onSuccess` | `() => void` | Called when authentication completes successfully. |
+| `onError` | `(error: unknown) => void` | Called when authentication fails. |
+
+## Usage
+
+Mount the component once, anywhere in your tree. It renders the active
+auth screen when the user is signing in and renders nothing otherwise.
+Trigger the flow with wagmi's `useConnect`:
+
+```tsx
+import { AuthFlow } from '@zerodev/wallet-react-kit'
+import { useConnect } from 'wagmi'
+
+function App() {
+ const { connect, connectors } = useConnect()
+
+ return (
+ <>
+
+
+ >
+ )
+}
+```
+
+`connect()` triggers `eth_requestAccounts` under the hood, which kicks
+off the auth flow. The flow completes when the user is authenticated,
+at which point `onSuccess` fires.
+
+To build a custom auth UI instead of using ``, read state
+directly with the [`useAuth`](/wallets/react-kit/hooks/use-auth) hook.
+
+## Live demo
+
+Try `` end-to-end at
+[zerodev-signer-demo.vercel.app](https://zerodev-signer-demo.vercel.app/).
\ No newline at end of file
diff --git a/docs/pages/wallets/react-kit/features/transaction-signing.mdx b/docs/pages/wallets/react-kit/features/transaction-signing.mdx
new file mode 100644
index 0000000..c0d26bd
--- /dev/null
+++ b/docs/pages/wallets/react-kit/features/transaction-signing.mdx
@@ -0,0 +1,68 @@
+# Transaction Signing
+
+Show users what they're signing before it happens. The
+`` component sits in your tree and intercepts signing
+RPC calls, giving the user a chance to review and approve or reject
+before the underlying call proceeds.
+
+## Import
+
+```tsx
+import { SignatureRequest } from '@zerodev/wallet-react-kit'
+```
+
+## Configure transaction signing
+
+Signing confirmation is on by default — no config required. Pass a
+`signing` block to the connector if you want to customize the behavior:
+
+```tsx
+import { zeroDevWallet } from '@zerodev/wallet-react-kit'
+
+zeroDevWallet({
+ projectId: '...',
+ chains: [sepolia],
+ config: {
+ signing: {
+ mode: 'prompt',
+ },
+ },
+})
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `mode` | `"prompt"` or `"background"` | `"prompt"` | `prompt` shows the confirmation UI. `background` skips it and lets calls go through immediately. |
+| `methods` | `RequestMethod[]` | `eth_sendTransaction`, `wallet_sendTransaction`, `wallet_sendCalls`, `personal_sign`, `eth_signTypedData_v4` | Which RPC methods trigger the confirmation UI. |
+
+## Usage
+
+Mount the component once, anywhere in your tree. When a signing call
+comes in, the confirmation UI appears.
+
+```tsx
+import { SignatureRequest } from '@zerodev/wallet-react-kit'
+import { useSendTransaction } from 'wagmi'
+
+function App() {
+ const { sendTransaction } = useSendTransaction()
+
+ return (
+ <>
+
+
+ >
+ )
+}
+```
+
+No props needed. When there's nothing pending, the component renders
+nothing.
+
+## Live demo
+
+Try `` end-to-end at
+[zerodev-signer-demo.vercel.app](https://zerodev-signer-demo.vercel.app/) —
+sign in, then trigger a transaction from the dashboard.
\ No newline at end of file
diff --git a/docs/pages/wallets/react-kit/getting-started.mdx b/docs/pages/wallets/react-kit/getting-started.mdx
new file mode 100644
index 0000000..92595a3
--- /dev/null
+++ b/docs/pages/wallets/react-kit/getting-started.mdx
@@ -0,0 +1,67 @@
+# Getting Started
+
+`@zerodev/wallet-react-kit` is the React UI layer for the ZeroDev
+Wallet SDK. It ships an enhanced wagmi connector and drop-in components
+for the most common wallet flows, built on wagmi so it slots into a
+standard wagmi setup.
+
+## Installation
+
+```bash
+pnpm add @zerodev/wallet-react-kit wagmi viem @tanstack/react-query
+```
+
+## Setup
+
+### 1. Create a wagmi config with the kit connector
+
+```tsx
+import { zeroDevWallet } from '@zerodev/wallet-react-kit'
+import { createConfig, http } from 'wagmi'
+import { sepolia } from 'wagmi/chains'
+
+export const config = createConfig({
+ chains: [sepolia],
+ connectors: [
+ zeroDevWallet({
+ projectId: 'your-project-id',
+ chains: [sepolia],
+ }),
+ ],
+ transports: {
+ [sepolia.id]: http(),
+ },
+})
+```
+
+
+### 2. Import the kit's stylesheet
+
+Once, anywhere in your app entry (e.g. `main.tsx`):
+
+```tsx
+import '@zerodev/wallet-react-kit/styles.css'
+```
+
+This stylesheet contains the styles for the kit's components. Without
+it, components render unstyled.
+
+### 3. Wrap your app with providers
+
+```tsx
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { WagmiProvider } from 'wagmi'
+import { config } from './wagmi'
+
+const queryClient = new QueryClient()
+
+function App() {
+ return (
+
+
+
+
+
+ )
+}
+```
\ No newline at end of file
diff --git a/docs/pages/wallets/react-kit/hooks/use-auth.mdx b/docs/pages/wallets/react-kit/hooks/use-auth.mdx
new file mode 100644
index 0000000..8175891
--- /dev/null
+++ b/docs/pages/wallets/react-kit/hooks/use-auth.mdx
@@ -0,0 +1,74 @@
+# useAuth
+
+Access the auth flow state. Use this to build a custom auth UI instead
+of the default ``, or to react to auth state changes
+elsewhere in your app.
+
+## Import
+
+```tsx
+import { useAuth } from '@zerodev/wallet-react-kit'
+```
+
+## Usage
+
+```tsx
+function MyCustomAuth() {
+ const { step, email, enabledMethods, goToStep, setEmail } = useAuth()
+
+ if (step === 'sign-up') {
+ return (
+
+ )
+ }
+
+ return null
+}
+```
+
+## Return value
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `step` | `AuthStep \| null` | The current step in the auth flow. `null` means nothing should render yet. |
+| `email` | `string \| null` | The email entered by the user, if any. |
+| `otpId` | `string \| null` | The id of the active OTP challenge, if any. |
+| `enabledMethods` | `AuthMethod[]` | Methods enabled by `config.auth.enabledMethods`. |
+| `config` | `AuthConfig \| null` | The full auth config passed to the connector. |
+| `goToStep` | `(step: AuthStep \| null) => void` | Move the flow to a specific step (or `null` to render nothing). |
+| `goBack` | `(() => void) \| null` | Go back to the previous step. `null` when there's no previous step. |
+| `reset` | `() => void` | Reset the flow to its initial state. |
+| `setEmail` | `(email: string) => void` | Set the email value. |
+| `setOtpId` | `(otpId: string) => void` | Set the OTP challenge id. |
+
+### `AuthStep`
+
+```ts
+type AuthStep =
+ | 'sign-up'
+ | 'email-verification'
+ | 'otp-input'
+ | 'verifying-otp'
+ | 'passkey-prompt'
+ | 'oauth-in-progress'
+ | 'wallet-selection'
+ | 'authenticated'
+ | 'error'
+```
+
+### `AuthMethod`
+
+```ts
+type AuthMethod = 'email' | 'google' | 'passkey' | 'injected-wallet'
+```
\ No newline at end of file
diff --git a/docs/pages/wallets/react-kit/hooks/use-pending-request.mdx b/docs/pages/wallets/react-kit/hooks/use-pending-request.mdx
new file mode 100644
index 0000000..b235e05
--- /dev/null
+++ b/docs/pages/wallets/react-kit/hooks/use-pending-request.mdx
@@ -0,0 +1,38 @@
+# usePendingRequest
+
+Access the pending signing request state. Use this to build a custom
+confirmation UI instead of the default ``, or to
+show a count of queued requests in your own UI.
+
+## Import
+
+```tsx
+import { usePendingRequest } from '@zerodev/wallet-react-kit'
+```
+
+## Usage
+
+```tsx
+function MyCustomConfirmation() {
+ const { pendingRequest, confirm, reject } = usePendingRequest()
+
+ if (!pendingRequest) return null
+
+ return (
+
+
{pendingRequest.method}
+
+
+
+ )
+}
+```
+
+## Return value
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `pendingRequest` | `PendingRequest \| null` | The head of the pending queue — the request currently awaiting user action. `null` when the queue is empty. |
+| `pendingRequests` | `PendingRequest[]` | The full pending queue. |
+| `confirm` | `() => void` | Resolves the active request and removes it from the queue, letting the underlying RPC call proceed. |
+| `reject` | `() => void` | Rejects the active request with `User rejected the request` and removes it from the queue. |
diff --git a/vocs.config.tsx b/vocs.config.tsx
index 383610a..4769851 100644
--- a/vocs.config.tsx
+++ b/vocs.config.tsx
@@ -233,6 +233,18 @@ const REDIRECTS: Record = {
"/smart-accounts/permissions/actions/build-your-own",
"/smart-wallet/permissions/1-click-trading":
"/smart-accounts/permissions/1-click-trading",
+
+ // React Kit docs moved from the standalone vocs site under
+ // packages/react-kit/docs into the main wallets section.
+ "/react-kit/getting-started": "/wallets/react-kit/getting-started",
+ "/react-kit/configuration": "/wallets/react-kit/configuration",
+ "/react-kit/features/authentication":
+ "/wallets/react-kit/features/authentication",
+ "/react-kit/features/transaction-signing":
+ "/wallets/react-kit/features/transaction-signing",
+ "/react-kit/hooks/use-auth": "/wallets/react-kit/hooks/use-auth",
+ "/react-kit/hooks/use-pending-request":
+ "/wallets/react-kit/hooks/use-pending-request",
};
export default defineConfig({
@@ -752,6 +764,46 @@ export default defineConfig({
},
],
},
+ {
+ text: "React Kit",
+ collapsed: true,
+ items: [
+ {
+ text: "Getting Started",
+ link: "/wallets/react-kit/getting-started",
+ },
+ {
+ text: "Configuration",
+ link: "/wallets/react-kit/configuration",
+ },
+ {
+ text: "Features",
+ items: [
+ {
+ text: "Authentication",
+ link: "/wallets/react-kit/features/authentication",
+ },
+ {
+ text: "Transaction Signing",
+ link: "/wallets/react-kit/features/transaction-signing",
+ },
+ ],
+ },
+ {
+ text: "Hooks",
+ items: [
+ {
+ text: "useAuth",
+ link: "/wallets/react-kit/hooks/use-auth",
+ },
+ {
+ text: "usePendingRequest",
+ link: "/wallets/react-kit/hooks/use-pending-request",
+ },
+ ],
+ },
+ ],
+ },
],
},
],