@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/kit

import { 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.
• useSolana exposes 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

FAQs

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.