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.

Vercel template

Deploy a Phantom-integrated app on Vercel with Next.js

Solana Foundation template

Official Solana Foundation starter with Phantom integration

Helius template

Build with Helius RPC and Phantom integration

​
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>
  );
}

​
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>
  );
}

​
Solana templates and examples

Looking for Solana-specific templates?

Solana developer templates

Production-ready templates for dApps, DeFi apps, NFT marketplaces, and more. Includes fullstack boilerplates, mobile apps, payments, and authentication examples.

​
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