Install AppKit in a React app

Install AppKit's React packages, create an AppKit instance, and mount the providers that AppKit hooks rely on.

Install packages

npm i @ton/appkit @ton/appkit-react @tanstack/react-query @tonconnect/ui-react @ton/core

Create the AppKit instance

Create the AppKit instance in a dedicated module. An empty configuration is enough to start — connectors, networks, and DeFi providers are added on the following pages.

// src/appkit.ts
import { AppKit } from "@ton/appkit-react"

export const appKit = new AppKit({});

Wrap the application

AppKit hooks read from two React contexts: the AppKit instance and a TanStack Query cache. Mount both at the application root.

import { AppKitProvider } from '@ton/appkit-react'
import { appKit } from './appkit'

function App() {
  return (
    <AppKitProvider appKit={appKit}>
      {/** ... */}
    </AppKitProvider>
  )
}

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { AppKitProvider } from '@ton/appkit-react'
import { appKit } from './appkit'

const queryClient = new QueryClient()

function App() {
  return (
    <AppKitProvider appKit={appKit}>
      <QueryClientProvider client={queryClient}>
        {/** ... */}
      </QueryClientProvider>
    </AppKitProvider>
  )
}

Import styles

To use the bundled components from @ton/appkit-react (<TonConnectButton />, <SendTonButton />, <NftItem />), import the default stylesheet once at the application root. Without it, the components render unstyled.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { AppKitProvider } from '@ton/appkit-react'
import { appKit } from './appkit'

import '@ton/appkit-react/styles.css'

const queryClient = new QueryClient()

function App() {
  return (
    <AppKitProvider appKit={appKit}>
      <QueryClientProvider client={queryClient}>
        {/** ... */}
      </QueryClientProvider>
    </AppKitProvider>
  )
}

Next steps