diff --git a/packages/alchemy/package.json b/packages/alchemy/package.json
index c86fef2c84..c0115c25c4 100644
--- a/packages/alchemy/package.json
+++ b/packages/alchemy/package.json
@@ -33,8 +33,8 @@
     },
     "./react": {
       "types": "./dist/types/react/index.d.ts",
-      "import": "./dist/esm/react/index.js",
-      "default": "./dist/cjs/react/index.js"
+      "import": "./dist/esm/react/index.jsx",
+      "default": "./dist/cjs/react/index.jsx"
     },
     "./package.json": "./package.json"
   },
diff --git a/packages/alchemy/src/react/hooks/useExportWallet.ts b/packages/alchemy/src/react/hooks/useExportWallet.tsx
similarity index 63%
rename from packages/alchemy/src/react/hooks/useExportWallet.ts
rename to packages/alchemy/src/react/hooks/useExportWallet.tsx
index 770d897590..f8e6959b26 100644
--- a/packages/alchemy/src/react/hooks/useExportWallet.ts
+++ b/packages/alchemy/src/react/hooks/useExportWallet.tsx
@@ -1,16 +1,25 @@
 "use client";
 
 import { useMutation, type UseMutateFunction } from "@tanstack/react-query";
+import React from "react";
 import { ClientOnlyPropertyError } from "../../config/errors.js";
 import type { ExportWalletParams } from "../../index.js";
 import { useAlchemyAccountContext } from "../context.js";
 import { useSigner } from "./useSigner.js";
 
+export interface ExportWalletComponentProps {
+  className: string;
+  iframeCss: string;
+}
+
 export type UseExportWalletResult = {
   exportWallet: UseMutateFunction<boolean, Error, void, unknown>;
   isExported: boolean;
   isExporting: boolean;
   error: Error | null;
+  ExportWalletComponent: (
+    props: ExportWalletComponentProps
+  ) => React.JSX.Element;
 };
 
 export function useExportWallet(
@@ -37,10 +46,28 @@ export function useExportWallet(
     queryClient
   );
 
+  const isExported = !!data;
+
+  const ExportWalletComponent = ({
+    className,
+    iframeCss,
+  }: ExportWalletComponentProps) => {
+    return (
+      <div
+        className={className}
+        style={{ display: !isExported ? "none" : "block" }}
+        id={params.iframeContainerId}
+      >
+        <style>{iframeCss}</style>
+      </div>
+    );
+  };
+
   return {
-    isExported: !!data,
+    isExported,
     exportWallet,
     isExporting: isPending,
     error,
+    ExportWalletComponent,
   };
 }
diff --git a/packages/alchemy/src/react/index.ts b/packages/alchemy/src/react/index.tsx
similarity index 95%
rename from packages/alchemy/src/react/index.ts
rename to packages/alchemy/src/react/index.tsx
index ff68d29eec..8106a1d437 100644
--- a/packages/alchemy/src/react/index.ts
+++ b/packages/alchemy/src/react/index.tsx
@@ -13,7 +13,7 @@ export { useAuthenticate } from "./hooks/useAuthenticate.js";
 export type * from "./hooks/useBundlerClient.js";
 export { useBundlerClient } from "./hooks/useBundlerClient.js";
 export { useDisconnectSigner } from "./hooks/useDisconnectSigner.js";
-export { useExportWallet } from "./hooks/useExportWallet.js";
+export { useExportWallet } from "./hooks/useExportWallet.jsx";
 export { useSignMessage } from "./hooks/useSignMessage.js";
 export { useSignTypedData } from "./hooks/useSignTypedData.js";
 export type * from "./hooks/useSigner.js";
diff --git a/templates/typescript/base.json b/templates/typescript/base.json
index de714c48ad..ab05877f62 100644
--- a/templates/typescript/base.json
+++ b/templates/typescript/base.json
@@ -2,6 +2,7 @@
   "$schema": "https://json.schemastore.org/tsconfig",
   "display": "Default",
   "compilerOptions": {
+    "jsx": "react",
     "lib": ["es2022", "dom"],
     "target": "es2021",
     "types": ["vitest/globals"],