> For the complete documentation index, see [llms.txt](/llms.txt)

# Sui dApp Kit

Build Sui apps with framework-agnostic core and React bindings.



<Callout type="info">
  **Migrating from @mysten/dapp-kit?** If you're currently using the legacy `@mysten/dapp-kit`
  package, check out our [Migration Guide](/sui/migrations/sui-2.0/dapp-kit) to upgrade to the new
  packages with gRPC and GraphQL support.
</Callout>

The Sui dApp Kit provides tools and components for building decentralized applications on the Sui
network. The SDK consists of two packages that work together:

## Packages [#packages]

### @mysten/dapp-kit-core [#mystendapp-kit-core]

Framework-agnostic core that works with vanilla JS, React, Vue, or any framework:

* Action-based API for direct wallet operations
* Web Components for universal UI elements
* Automatic state management with nanostores
* Smaller bundle size and improved performance

### @mysten/dapp-kit-react [#mystendapp-kit-react]

React bindings for the core package:

* React hooks for state and actions
* React component wrappers for Web Components
* Seamless integration with React applications

## Install [#install]

Choose the installation method based on your framework:

### For React applications [#for-react-applications]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm i @mysten/dapp-kit-react @mysten/sui
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @mysten/dapp-kit-react @mysten/sui
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @mysten/dapp-kit-react @mysten/sui
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @mysten/dapp-kit-react @mysten/sui
    ```
  </CodeBlockTab>
</CodeBlockTabs>

### Vanilla JavaScript and other frameworks [#vanilla-javascript-and-other-frameworks]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm i @mysten/dapp-kit-core @mysten/sui
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @mysten/dapp-kit-core @mysten/sui
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @mysten/dapp-kit-core @mysten/sui
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @mysten/dapp-kit-core @mysten/sui
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Getting started [#getting-started]

Check the framework-specific guides:

* [React](/dapp-kit/getting-started/react)
* [Next.js](/dapp-kit/getting-started/next-js)
* [Vue](/dapp-kit/getting-started/vue)

## Legacy package [#legacy-package]

### @mysten/dapp-kit (Legacy) [#mystendapp-kit-legacy]

See the [Legacy dApp Kit documentation](/dapp-kit/legacy).

The original React-focused version of the dApp Kit. This package provides:

* React hooks for wallet connection and blockchain queries
* Pre-built UI components with Radix UI
* Integration with TanStack React Query
* Comprehensive wallet state management

<Callout type="warning">
  **Deprecated JSON RPC Only**: This legacy package only works with the deprecated JSON RPC API and
  will not be updated to support gRPC or GraphQL. All new projects should use
  `@mysten/dapp-kit-core` and `@mysten/dapp-kit-react`.
</Callout>