---
title: Frontend
description: Learn about building interfaces for Solana Programs.
---

Frontend development on Solana involves working with Programs, wallets and
popular JavaScript frameworks like React. Interacting with these components
requires handling connection, transaction creation and reading from Solana
Accounts.

[Solana Kit](https://github.com/anza-xyz/kit) (`@solana/kit`) is the standard
JavaScript SDK for this work. You assemble a client from small, composable
plugins, add React bindings when you need them, and pull in generated program
clients for the on-chain programs you call.

## Main libraries

<Cards>
  <Card title="@solana/kit" href="https://github.com/anza-xyz/kit">
    - Core SDK: RPC, codecs, signers, and transactions - Provides
    `createClient`, the plugin host that every other library extends
  </Card>
  <Card title="Kit plugins" href="https://github.com/anza-xyz/kit-plugins">
    - Compose a client with `.use(...)`: RPC connection, wallet, signer, and
    transaction planning - Published as `@solana/kit-plugin-*` packages
  </Card>
  <Card
    title="@solana/react"
    href="https://github.com/anza-xyz/kit/tree/main/packages/react"
  >
    - React bindings for a Kit client - `ClientProvider` plus hooks for reads,
    subscriptions, and wallet state
  </Card>
  <Card title="@solana-program/*" href="https://github.com/solana-program">
    - Generated clients for on-chain programs (System, Token, and more) -
    Provide instruction builders and client plugins like `tokenProgram()`
  </Card>
</Cards>

<Callout type="warn" title="web3.js v1 and wallet-adapter are legacy">
  Many Solana projects still rely on the older `@solana/web3.js` (v1) and
  `@solana/wallet-adapter-*`. For new work, prefer `@solana/kit` with the kit
  plugins below; Wallet Standard discovery (via `@solana/kit-plugin-wallet`)
  replaces wallet-adapter for modern wallets.
</Callout>

- [Kit client guide](/docs/frontend/client): build a client from plugins for
  RPC, signing, and sending transactions.
- [React guide](/docs/frontend/react-hooks): `@solana/react` bindings and wallet
  hooks layered on the same client.
- [Next.js tutorial](/docs/frontend/nextjs-solana): a full connect-wallet and
  SOL transfer app in the App Router.
- [Migrating to Kit](/docs/frontend/web3-compat): how web3.js and wallet-adapter
  concepts map onto Kit.