create-phantom-app

The fastest way to build Solana apps with Phantom embedded wallets

Quick Start

``bash
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:

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

Components

$3

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

// Renders "Connect" button, shows address when connected

`

$3

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

// Shows full address with copy button

`

$3

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

// Displays SOL balance with USD value (requires HELIUS_API_KEY)

`

$3

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



`

Hooks

$3

`tsx
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