# Vite + React (SPA) (/getting-started/frameworks/vite)



Vite is the simplest case: a client-only SPA, so no server/hydration concerns.
This is the `demo-vite` reference (EVM + SVM, localStorage).

```tsx title="src/wallet-provider.tsx"
import type { ReactNode } from "react";
import { WalletManagerProvider } from "@usebutr/react";
import { autoDiscovery } from "@usebutr/wallets";

const discovery = autoDiscovery();

const WalletProvider = ({ children }: { children: ReactNode }) => (
  <WalletManagerProvider discovery={discovery} storageKeyPrefix="butr-demo">
    {children}
  </WalletManagerProvider>
);

export { WalletProvider };
```

```tsx title="src/main.tsx"
import ReactDOM from "react-dom/client";
import { App } from "./app";
import { WalletProvider } from "./wallet-provider";

ReactDOM.createRoot(document.querySelector("#root")!).render(
  <WalletProvider>
    <App />
  </WalletProvider>,
);
```

Then use the hooks anywhere under the provider — see
[Connect & disconnect](/guides/connect-disconnect). Gate the first render
on [`useIsHydrated()`](/concepts/hydration) so a reload doesn't flash a logged-out UI.

<Callout type="info">
  **Source:** `apps/demo-vite/src/wallet-provider.tsx` in the [butr
  repository](https://github.com/pedroapfilho/usebutr/tree/main/apps/demo-vite). Run `pnpm dev   --filter=demo-vite` → `http://localhost:5173`.
</Callout>