> ## Documentation Index
> Fetch the complete documentation index at: https://pond.dflow.net/llms.txt
> Use this file to discover all available pages before exploring further.
# Phantom Connect
> How to add Phantom Connect to a Next.js + React app
Use Phantom Connect to add wallet access, embedded wallets, and social login to a
Next.js + React app.
This recipe covers adding Phantom Connect to a Next.js + React app. Use their [Browser SDK](https://docs.phantom.com/sdks/browser-sdk/index) for
non-React web apps and the [React Native SDK](https://docs.phantom.com/sdks/react-native-sdk/index)
for mobile apps.
## Prerequisites
Create a [Phantom Portal](https://phantom.com/portal/) app, configure allowed
domains and redirect URLs, and copy the App ID.
## Step-by-step (Next.js + React)
Use the [React SDK](https://docs.phantom.com/sdks/react-sdk) for Next.js + React.
```bash theme={null}
npm install @phantom/react-sdk @solana/web3.js
```
```bash theme={null}
npx -y create-solana-dapp@latest -t solana-foundation/templates/community/phantom-embedded-react
```
Wrap your root layout so Phantom Connect can manage auth and wallet state.
Put your App ID in `config.appId` (see `appId: "your-app-id"` in the examples)
and set the redirect URL you configured.
Create a client-side provider component, then wrap it in `app/layout.tsx`.
```tsx theme={null}
// app/providers.tsx
"use client";
import { PhantomProvider, darkTheme } from "@phantom/react-sdk";
import { AddressType } from "@phantom/browser-sdk";
export function Providers({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
```tsx theme={null}
// app/layout.tsx
import { Providers } from "./providers";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
Wrap your app in `pages/_app.tsx`.
```tsx theme={null}
// pages/_app.tsx
import type { AppProps } from "next/app";
import { PhantomProvider, darkTheme } from "@phantom/react-sdk";
import { AddressType } from "@phantom/browser-sdk";
export default function App({ Component, pageProps }: AppProps) {
return (
);
}
```
Use the built-in modal or ConnectButton to trigger the Phantom flow.
```tsx theme={null}
"use client";
import { useModal, usePhantom } from "@phantom/react-sdk";
function WalletComponent() {
const { open } = useModal();
const { isConnected } = usePhantom();
if (isConnected) return
Connected
;
return ;
}
```
```tsx theme={null}
"use client";
import { ConnectButton } from "@phantom/react-sdk";
function Header() {
return ;
}
```
Use [theming](https://docs.phantom.com/sdks/react-sdk#theming) to customize
the modal UI.