Framework-kit

@solana/client:

@solana/react-hooks:

React hooks for Solana. Connect wallets, fetch balances, and send transactions with minimal setup.

Why Framework-kit?

Building Solana dApps usually means wiring together RPC connections, wallet adapters, and state management yourself. Framework-kit handles this for you:

• One provider, many hooks — Wrap your app once with SolanaProvider, then use hooks anywhere
• Wallet connection built-in — useWalletConnection handles discovery, connection, and disconnection
• Automatic data refresh — Balances and account data stay in sync without manual refetching
• Common operations simplified — useSolTransfer, useSplToken, and useTransactionPool for transfers and custom transactions
• TypeScript-first — Full type inference out of the box

Packages

• @solana/client – Core library for wallet connection, transactions, and RPC. Works with any framework or standalone.
• @solana/react-hooks – React hooks and provider. Wrap your app once, then use hooks like useBalance and useSolTransfer.

Examples

• @solana/example-vite-react – Vite + Tailwind demo
• @solana/example-nextjs – Next.js (App Router) demo

Install

npm install @solana/client @solana/react-hooks

React quick start

Add this to your main App file (e.g., App.tsx). You'll need a Solana wallet extension like Phantom installed in your browser.

import { autoDiscover, createClient } from "@solana/client";
import { SolanaProvider, useWalletConnection } from "@solana/react-hooks";

// Create a client pointing to Solana devnet
const client = createClient({
  endpoint: "https://api.devnet.solana.com",
  walletConnectors: autoDiscover(), // Finds installed wallet extensions
});

function WalletButtons() {
  // This hook gives you everything you need for wallet connection
  const { connectors, connect, connecting } = useWalletConnection();
  return (
    <>
      {connectors.map((connector) => (
        <button
          key={connector.id}
          disabled={connecting}
          onClick={() => connect(connector.id)}
        >
          {connector.name}
        </button>
      ))}
    </>
  );
}

export function App() {
  return (
    <SolanaProvider client={client}>
      <WalletButtons />
    </SolanaProvider>
  );
}

Run your app and you should see buttons for each detected wallet. Click one to connect.

Next.js note: Components using these hooks must be marked with 'use client' at the top of the file.

Learn more

• Full hooks documentation — all available hooks and options
• Client API — use the client without React