Skip to main content

​
Overview

Get started quickly with curated starter kits, templates, and example implementations. These resources include production-ready code to help you integrate Phantom wallet functionality into your app.

​
Official example apps

These examples are built and maintained by Phantom.

React SDK demo

Full-featured React app demonstrating all SDK capabilities

Browser SDK demo

Vanilla JavaScript implementation with complete examples

React Native SDK demo

Mobile app example with Expo and React Native

Next.js integration

Complete Next.js app with Phantom SDK integration

Wagmi integration

Use Phantom alongside Wagmi for enhanced Ethereum support

View all examples

Browse the complete examples directory on GitHub

​
Community starter kits

Templates and boilerplates from the Phantom ecosystem.

Browser SDK template

Vite + vanilla JavaScript template for integrating Phantom’s embedded user wallets

React SDK template

Next.js template with Phantom Embedded Wallet SDK for seamless Web3 authentication

React Native SDK template

Expo starter template for integrating Phantom’s embedded user wallets on mobile

​
Quick recipes

Common patterns and code snippets for frequent use cases.

​
Connect to Phantom

Connect to Phantom wallets using the React SDK: 
import { PhantomProvider, useConnect } from "@phantom/react-sdk";
import { AddressType } from "@phantom/browser-sdk";

function App() {
  return (
    <PhantomProvider
      config={{
        providerType: "embedded",
        addressTypes: [AddressType.solana],
        appId: "your-app-id",
        authOptions: {
          redirectUrl: "https://yourapp.com/auth/callback",
        },
      }}
    >
      <ConnectButton />
    </PhantomProvider>
  );
}

function ConnectButton() {
  const { connect, isConnecting } = useConnect();

  return (
    <button onClick={() => connect()} disabled={isConnecting}>
      {isConnecting ? "Connecting..." : "Connect Wallet"}
    </button>
  );
}

​
Use the connection modal

Use the built-in connection modal for a user-friendly interface with multiple authentication providers: 
import { PhantomProvider, useModal, darkTheme, usePhantom } from "@phantom/react-sdk";
import { AddressType } from "@phantom/browser-sdk";

function App() {
  return (
    <PhantomProvider
      config={{
        providers: ["google", "apple", "injected"],
        appId: "your-app-id",
        addressTypes: [AddressType.solana],
        authOptions: {
          redirectUrl: "https://yourapp.com/auth/callback",
        },
      }}
      theme={darkTheme}
      appName="Your App Name"
    >
      <WalletComponent />
    </PhantomProvider>
  );
}

function WalletComponent() {
  const { open, close, isOpened } = useModal();
  const { isConnected } = usePhantom();

  if (isConnected) {
    return (
      <div>
        <p>Connected</p>
        <button onClick={open}>Manage Wallet</button>
      </div>
    );
  }

  return <button onClick={open}>Connect Wallet</button>;
}

​
Sign a message

Authenticate users by signing a message: 
import { useSolana } from "@phantom/react-sdk";

function SignMessage() {
  const { solana } = useSolana();

  const handleSign = async () => {
    const message = "Sign this message to authenticate";
    const signature = await solana.signMessage(message);
    console.log("Signature:", signature);
  };

  return <button onClick={handleSign}>Sign Message</button>;
}

​
Send a transaction

Sign and send a transaction on Solana: 
import { useSolana } from "@phantom/react-sdk";
import { Transaction, SystemProgram, PublicKey } from "@solana/web3.js";

function SendTransaction() {
  const { solana } = useSolana();

  const handleSend = async () => {
    const transaction = new Transaction().add(
      SystemProgram.transfer({
        fromPubkey: new PublicKey("your-address"),
        toPubkey: new PublicKey("recipient-address"),
        lamports: 1000000, // 0.001 SOL
      })
    );

    const result = await solana.signAndSendTransaction(transaction);
    console.log("Transaction:", result.hash);
  };

  return <button onClick={handleSend}>Send Transaction</button>;
}

​
Multi-chain support

Connect to multiple chains simultaneously: 
import { PhantomProvider, useSolana, useEthereum } from "@phantom/react-sdk";
import { AddressType } from "@phantom/browser-sdk";

function MultiChainApp() {
  return (
    <PhantomProvider
      config={{
        providerType: "embedded",
        addressTypes: [AddressType.solana, AddressType.ethereum],
        appId: "your-app-id",
      }}
    >
      <MultiChainOperations />
    </PhantomProvider>
  );
}

function MultiChainOperations() {
  const { solana } = useSolana();
  const { ethereum } = useEthereum();

  const signOnSolana = async () => {
    const sig = await solana.signMessage("Hello Solana!");
    console.log("Solana signature:", sig);
  };

  const signOnEthereum = async () => {
    const accounts = await ethereum.getAccounts();
    const sig = await ethereum.signPersonalMessage("Hello Ethereum!", accounts[0]);
    console.log("Ethereum signature:", sig);
  };

  return (
    <div>
      <button onClick={signOnSolana}>Sign on Solana</button>
      <button onClick={signOnEthereum}>Sign on Ethereum</button>
    </div>
  );
}

​
Need help?

Can’t find what you’re looking for? Check out these resources:

Documentation

Browse the full documentation

Support

Contact Phantom developer support

FAQ

Find answers to common questions