@wallet-ui/react
Modern wallet UI and hooks used by create-solana-dapp templates.
Recipe
npx create-solana-dapp@latest my-dapp
# includes @wallet-ui/react wired to @solana/kitimport { SolanaProvider } from "@wallet-ui/react";When to reach for this:
- Greenfield apps from Solana Foundation templates.
- Styled connect button and account dropdown out of the box.
- Tighter integration with kit 7.x defaults.
Working Example
"use client";
import { SolanaProvider, useSolana } from "@wallet-ui/react";
function ConnectButton() {
const { connect, connected, account } = useSolana();
if (connected) return <span>{account?.address.slice(0, 4)}…</span>;
return <button onClick={() => connect()}>Connect</button>;
}
export function AppProviders({ children }: { children: React.ReactNode }) {
return (
<SolanaProvider endpoint={process.env.NEXT_PUBLIC_RPC_URL!}>
{children}
</SolanaProvider>
);
}What this demonstrates:
- Single provider bundles RPC + wallet discovery.
useSolanaexposes connect state and addresses.- Works with App Router client layouts.
Deep Dive
How It Works
- wallet-ui wraps Wallet Standard registration and kit RPC config.
- UI components are composable or replaceable.
- Templates ship Tailwind-friendly defaults.
- Check template README for exact hook names per release.
Gotchas
- Mixing wallet-adapter and wallet-ui providers - double modals. Fix: pick one stack per app.
- Missing NEXT_PUBLIC_RPC_URL - connect works but reads fail. Fix: env validation at build.
- Custom branding - override CSS tokens, do not fork provider internals.
- RN vs React - use wallet-ui React Native packages on mobile.
- Version skew with kit - align with create-solana-dapp lockfile.
Alternatives
| Alternative | Use When | Don't Use When |
|---|---|---|
| wallet-adapter-react-ui | Legacy tutorials | New template-based apps |
| Fully custom modal | Strong brand control | Tight deadline |
FAQs
Devnet or mainnet?
Match RPC URL, wallet network, and program IDs to one cluster.
kit vs web3.js?
Use @solana/kit 7.0.0 for new frontend code.
Testing?
Surfpool 0.12.0 or devnet with faucet SOL.
Commitment level?
confirmed for UX; finalized for high-value reads.
Next.js App Router?
Providers in client layout; reads can be server-side.
Wallet rejected sign?
Show retry; never assume approval.
Priority fees?
Compute budget instructions on congested mainnet.
Mobile?
Use Mobile Wallet Adapter for React Native apps.
Security?
Never expose server keypairs to the browser.
IDL changes?
Regenerate typed clients in CI.
Related
- Wallet Adapter - adapter hooks
- dApp Integration Basics - app structure
- Wallet Basics - Wallet Standard
Stack versions: This page was written for Agave 4.1.1, Solana CLI 3.0.10, Anchor 0.32.1, anchor-lang 0.32.1, Rust 1.91.1, @solana/kit 7.0.0, Surfpool 0.12.0, and LiteSVM 0.6.x.