Quick Start

npx create-phantom-app my-app
cd my-app
npm install
npm run dev

Open localhost:3000 and start building.

Why Phantom Connect Kit?

Stop building wallet connections from scratch. This kit gives you production-ready components so you can focus on your app.

| | | |:--|:--| | OAuth Login | Users sign in with Google or Apple. No extensions, no seed phrases. | | Instant Wallets | Embedded wallets created automatically on first login. | | Ready Components | ConnectButton, WalletInfo, BalanceCard, NetworkBadge | | Secure by Default | API keys server-side, Solana address validation, tested. | | Modern Stack | Next.js 15, React 19, TypeScript, Tailwind CSS 4 |

What You Get

my-app/
├── src/
│   ├── app/
│   │   ├── api/balance/      # Secure balance endpoint
│   │   ├── layout.tsx        # PhantomProvider wrapper
│   │   └── page.tsx          # Demo with all components
│   ├── components/
│   │   ├── phantom/          # ConnectButton, WalletInfo, BalanceCard...
│   │   └── ui/               # shadcn/ui primitives
│   └── hooks/
│       └── use-balance.ts    # Balance hook with USD conversion
├── .env.example              # Environment template
└── package.json

Configuration

Get your App ID from phantom.com/portal and add it to .env.local:

NEXT_PUBLIC_PHANTOM_APP_ID=your-app-id
HELIUS_API_KEY=your-helius-key    # Optional: enables balance fetching

Components

ConnectButton

import { ConnectButton } from "@/components/phantom";

// Renders "Connect" button, shows address when connected
<ConnectButton />

WalletInfo

import { WalletInfo } from "@/components/phantom";

// Shows full address with copy button
<WalletInfo />

BalanceCard

import { BalanceCard } from "@/components/phantom";

// Displays SOL balance with USD value (requires HELIUS_API_KEY)
<BalanceCard />

NetworkBadge

import { NetworkBadge } from "@/components/phantom";

<NetworkBadge network="mainnet" />
<NetworkBadge network="devnet" />

Hooks

useBalance

import { useBalance } from "@/hooks/use-balance";

const { balance, usdValue, isLoading, refetch } = useBalance(address);

Stack

• Next.js 15 — App Router, Server Components
• Phantom SDK — Embedded wallet integration
• Tailwind CSS 4 — Utility-first styling
• shadcn/ui — Accessible component primitives
• Vitest — Fast unit testing
• TypeScript — Full type safety

Links

• GitHub Repository
• Phantom Documentation
• Report Issues

License

MIT