# Install AppKit in a React app (https://docs-rbcpr9qys-ton-core-docs.vercel.app/llms/applications/appkit/get-started/installation/react-app/content.md)



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

## Install packages [#install-packages]

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

| Package                 | Use                                                                                             |
| ----------------------- | ----------------------------------------------------------------------------------------------- |
| `@ton/appkit`           | Core runtime: actions, connectors, types.                                                       |
| `@ton/appkit-react`     | React layer: hooks, components, default stylesheet.                                             |
| `@tanstack/react-query` | Cache backing every query and mutation hook.                                                    |
| `@tonconnect/ui-react`  | TON Connect transport. `@ton/appkit-react` re-exports `<TonConnectButton />` from this package. |
| `@ton/core`             | TON address and cell primitives.                                                                |

<Callout>
  Complete the [Preparation](https://docs-rbcpr9qys-ton-core-docs.vercel.app/llms/applications/appkit/get-started/installation/installation/content.md) step first. The `Buffer` polyfill it sets up is required for AppKit to run in the browser.
</Callout>

## Create the AppKit instance [#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.

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

export const appKit = new AppKit({});
```

## Wrap the application [#wrap-the-application]

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

<Steps>
  <Step>
    ### AppKit provider [#appkit-provider]

    `AppKitProvider` exposes the `AppKit` instance to descendant hooks and components, removing the need to thread it through props.

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

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

  <Step>
    ### TanStack Query provider [#tanstack-query-provider]

    `QueryClientProvider` owns the cache used by every query and mutation hook. Create one `QueryClient` per application and mount `AppKitProvider` inside it.

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

    const queryClient = new QueryClient()

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

## Import styles [#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.

```tsx
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 (
    <QueryClientProvider client={queryClient}>
      <AppKitProvider appKit={appKit}>
        {/** ... */}
      </AppKitProvider>
    </QueryClientProvider>
  )
}
```

## Next steps [#next-steps]

<Columns cols="2">
  <Card title="Add wallet connectors" icon="plug" href="/applications/appkit/get-started/connectors">
    Register wallet connectors on the `AppKit` instance and render the connect button.
  </Card>

  <Card title="Use basic getter hooks" icon="code" href="/applications/appkit/get-started/basic-getter-hooks">
    Read wallet, balance, and transaction state from React.
  </Card>
</Columns>