> For the complete documentation index, see [llms.txt](/llms.txt). # Use Framework Kit [Framework Kit](https://www.framework-kit.com/) is a React library that simplifies Solana dapp development. It handles RPC connections, wallet adapters, and state management, so you can interact with Solana using React hooks. Framework Kit supports MetaMask out-of-the-box. This guide walks you through setting it up. ## Prerequisites[](#prerequisites "Direct link to Prerequisites") - [Node.js](https://nodejs.org/) version 19 or later - A package manager such as [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), [Yarn](https://yarnpkg.com/), [pnpm](https://pnpm.io/installation), or [bun](https://bun.sh/) - A React or Next.js project ## Steps[](#steps "Direct link to Steps") ### 1. Install dependencies[](#1-install-dependencies "Direct link to 1. Install dependencies") Install Framework Kit's Solana client and React hooks: ``` npm install @solana/client @solana/react-hooks ``` ### 2. Create the Solana provider[](#2-create-the-solana-provider "Direct link to 2. Create the Solana provider") Create a `SolanaProviderWrapper` component that initializes the Solana client with MetaMask support: components/SolanaProvider.tsx ``` 'use client'; import { createClient, metamask } from "@solana/client"; import { SolanaProvider } from "@solana/react-hooks"; import { FC, ReactNode } from 'react'; // Create a client pointing to Solana devnet const client = createClient({ endpoint: "https://solana-devnet.infura.io/v3/YOUR_INFURA_API_KEY", walletConnectors: [...metamask()], }); interface SolanaProviderWrapperProps { children: ReactNode; } export const SolanaProviderWrapper: FC = ({ children }) => { return ( {children} ); }; ``` ### 3. Add the provider to your root layout[](#3-add-the-provider-to-your-root-layout "Direct link to 3. Add the provider to your root layout") Wrap your application with `SolanaProviderWrapper` so all components can access Solana hooks: ``` import './globals.css'; import { SolanaProviderWrapper } from '@/components/SolanaProvider'; export default function RootLayout({ children }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } ``` ### 4. Connect to MetaMask[](#4-connect-to-metamask "Direct link to 4. Connect to MetaMask") Use the [useWalletConnection](https://www.framework-kit.com/docs/react-hooks#usewalletconnection) hook in any component to connect to the user's wallet: ``` import { useWalletConnection } from "@solana/react-hooks"; export const ConnectWallet = () => { const { wallet, connect, disconnect } = useWalletConnection(); if (wallet) { return (

Connected: {wallet.accounts[0].address}

); } return ; }; ``` ## Next steps[](#next-steps "Direct link to Next steps") See how to send a [legacy transaction](/metamask-connect/solana/guides/send-transactions/legacy/) and a [versioned transaction](/metamask-connect/solana/guides/send-transactions/versioned/).