> ## Documentation Index
> Fetch the complete documentation index at: https://web3docs.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

> Install the Sui TypeScript SDK and dApp Kit packages

# Installing Sui SDK and dApp Kit

This guide will walk you through setting up the workshop project and installing all the necessary Sui packages.

## Clone the Workshop Repository

First, clone the workshop starter repository:

```bash theme={null}
git clone https://github.com/DevWeb3Jogja/sui-workshop-fe-1.git
cd sui-workshop-fe-1
```

## Install Dependencies

The project uses npm for package management. Install the existing dependencies:

```bash theme={null}
npm install
```

## Install Sui Packages

Now add the Sui-specific packages to the project:

```bash theme={null}
npm install @mysten/dapp-kit @mysten/sui @tanstack/react-query
```

These three packages are required:

1. **@mysten/dapp-kit** - React components and hooks for Sui dApps
2. **@mysten/sui** - Core Sui TypeScript SDK
3. **@tanstack/react-query** - Required for data fetching (peer dependency)

## Verify Installation

After installation, verify the packages were added to your `package.json`:

```bash theme={null}
npm list @mysten/dapp-kit @mysten/sui @tanstack/react-query
```

## Package Overview

### @mysten/dapp-kit

The dApp Kit provides:

* **React Hooks** for wallet interactions, transactions, and queries
* **UI Components** like `ConnectButton` and `ConnectModal`
* **Provider Components** for managing state
* **Type-safe APIs** for blockchain interactions

**Key exports:**

* `WalletProvider` - Manages wallet state
* `SuiClientProvider` - Manages network connections
* `useCurrentAccount()` - Get connected wallet account
* `useSignAndExecuteTransaction()` - Sign and execute transactions
* `useSuiClientQuery()` - Query blockchain data
* `ConnectButton` - Pre-built wallet connection UI

### @tanstack/react-query

React Query is a peer dependency that powers the data fetching hooks in dApp Kit:

* Automatic caching and refetching
* Loading and error states
* Optimistic updates
* Request deduplication

## Package Versions

<Info>
  Always use compatible versions of `@mysten/dapp-kit` and `@mysten/sui`. They
  are versioned together and should typically be on the same version number.
</Info>

Check the latest versions:

* [@mysten/dapp-kit on npm](https://www.npmjs.com/package/@mysten/dapp-kit)
* [@mysten/sui on npm](https://www.npmjs.com/package/@mysten/sui)

## Next Steps

Now that you have all the packages installed, let's set up the providers to connect your app to the Sui blockchain.

<Card title="Setup Providers" icon="arrow-right" href="/sui/frontend/workshop-1/02-setup-providers" horizontal>
  Configure network and wallet providers
</Card>