> ## Documentation Index
> Fetch the complete documentation index at: https://docs.phantom.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React (Vite)

> Step-by-step guide to integrating Phantom Connect in a React application using Vite.

Complete guide to integrating Phantom Connect in a React application.

## 1. Install dependencies

```bash theme={null}
npm install @phantom/react-sdk @solana/web3.js
```

## 2. Wrap your app with the provider

```tsx theme={null}
// src/main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import { PhantomProvider, darkTheme } from "@phantom/react-sdk";
import { AddressType } from "@phantom/browser-sdk";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <PhantomProvider
      config={{
        providers: ["google", "apple", "injected"],
        appId: "your-app-id", // Get from phantom.com/portal
        addressTypes: [AddressType.solana],
        authOptions: {
          redirectUrl: "https://yourapp.com/callback",
        },
      }}
      theme={darkTheme}
      appName="Your App"
    >
      <App />
    </PhantomProvider>
  </React.StrictMode>
);
```

## 3. Create your app component

```tsx theme={null}
// src/App.tsx
import { useModal, usePhantom, useAccounts, useDisconnect, useSolana } from "@phantom/react-sdk";

function App() {
  const { open } = useModal();
  const { isConnected, isLoading } = usePhantom();
  const addresses = useAccounts();
  const { disconnect } = useDisconnect();
  const { solana } = useSolana();

  if (isLoading) return <p>Loading...</p>;

  if (isConnected && addresses) {
    return (
      <div>
        <p>Connected: {addresses[0]?.address}</p>
        <button onClick={() => solana.signMessage("Hello!")}>Sign Message</button>
        <button onClick={() => disconnect()}>Disconnect</button>
      </div>
    );
  }

  return (
    <div>
      <h1>Welcome</h1>
      <button onClick={open}>Connect Wallet</button>
    </div>
  );
}

export default App;
```

## 4. Create a callback page

```tsx theme={null}
// src/Callback.tsx
import { ConnectBox } from "@phantom/react-sdk";

function Callback() {
  return (
    <div style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh" }}>
      <ConnectBox />
    </div>
  );
}

export default Callback;
```

## 5. Add routing (React Router)

```tsx theme={null}
// src/main.tsx
import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from "./App";
import Callback from "./Callback";

// Inside your PhantomProvider:
<BrowserRouter>
  <Routes>
    <Route path="/" element={<App />} />
    <Route path="/callback" element={<Callback />} />
  </Routes>
</BrowserRouter>
```

## 6. Configure Phantom Portal

1. Go to [phantom.com/portal](https://phantom.com/portal)
2. Create or select your app
3. Add your domain to allowed URLs
4. Add your callback URL to redirect URLs
5. Copy your App ID