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

# React

Set up dApp Kit in a React application.



This guide walks you through integrating dApp Kit into a React application.

## Quick start with create-dapp

The fastest way to get started is using our CLI tool:

```sh npm2yarn
npm create @mysten/dapp
```

This creates a new project with:

* React + TypeScript + Vite
* Tailwind CSS v4 for styling
* dApp Kit pre-configured
* Example wallet connection UI

Choose from two templates:

* **react-client-dapp**: Basic wallet connection and object display
* **react-e2e-counter**: Full example with Move smart contract and codegen

See the [create-dapp guide](/dapp-kit/getting-started/create-dapp) for more details.

***

## Manual installation

```sh npm2yarn
npm i @mysten/dapp-kit-react @mysten/sui
```

## Setup

### Step 1: Create a dApp Kit instance

Create a file to configure your dApp Kit instance:

```tsx
// dapp-kit.ts
import { createDAppKit } from '@mysten/dapp-kit-react';
import { SuiGrpcClient } from '@mysten/sui/grpc';

const GRPC_URLS = {
	testnet: 'https://fullnode.testnet.sui.io:443',
};

export const dAppKit = createDAppKit({
	networks: ['testnet'],
	createClient: (network) => new SuiGrpcClient({ network, baseUrl: GRPC_URLS[network] }),
});

// Register types for hook type inference
declare module '@mysten/dapp-kit-react' {
	interface Register {
		dAppKit: typeof dAppKit;
	}
}
```

### Step 2: Add the provider

Wrap your application with `DAppKitProvider`:

```tsx
// App.tsx
import { DAppKitProvider } from '@mysten/dapp-kit-react';
import { ConnectButton } from '@mysten/dapp-kit-react/ui';
import { dAppKit } from './dapp-kit';

export default function App() {
	return (
		<DAppKitProvider dAppKit={dAppKit}>
			<div>
				<h1>My Sui dApp</h1>
				<ConnectButton />
				<WalletStatus />
			</div>
		</DAppKitProvider>
	);
}
```

### Step 3: Display connection status

Use hooks to access wallet state:

```tsx
import { useCurrentAccount, useCurrentWallet, useCurrentNetwork } from '@mysten/dapp-kit-react';

function WalletStatus() {
	const account = useCurrentAccount();
	const wallet = useCurrentWallet();
	const network = useCurrentNetwork();

	if (!account) {
		return <p>Connect your wallet to get started</p>;
	}

	return (
		<div>
			<p>Wallet: {wallet?.name}</p>
			<p>Address: {account.address}</p>
			<p>Network: {network}</p>
		</div>
	);
}
```

### Step 4: Execute transactions

Use the `useDAppKit` hook to sign and execute transactions:

```tsx
import { useDAppKit, useCurrentAccount } from '@mysten/dapp-kit-react';
import { Transaction, coinWithBalance } from '@mysten/sui/transactions';

function TransferButton() {
	const dAppKit = useDAppKit();
	const account = useCurrentAccount();

	async function handleTransfer() {
		const tx = new Transaction();
		tx.transferObjects([coinWithBalance({ balance: 1_000_000 })], 'RECIPIENT_ADDRESS');

		try {
			const result = await dAppKit.signAndExecuteTransaction({ transaction: tx });

			if (result.FailedTransaction) {
				throw new Error(`Transaction failed: ${result.FailedTransaction.status.error?.message}`);
			}

			console.log('Transaction digest:', result.Transaction.digest);
		} catch (error) {
			console.error('Transaction failed:', error);
		}
	}

	return (
		<button onClick={handleTransfer} disabled={!account}>
			Send Transaction
		</button>
	);
}
```

## Available hooks

| Hook                                                                 | Description                              |
| -------------------------------------------------------------------- | ---------------------------------------- |
| [`useDAppKit`](/dapp-kit/react/hooks/use-dapp-kit)                   | Access the dApp Kit instance and actions |
| [`useWalletConnection`](/dapp-kit/react/hooks/use-wallet-connection) | Full connection state with status flags  |
| [`useCurrentAccount`](/dapp-kit/react/hooks/use-current-account)     | Currently selected account               |
| [`useCurrentWallet`](/dapp-kit/react/hooks/use-current-wallet)       | Currently connected wallet               |
| [`useCurrentNetwork`](/dapp-kit/react/hooks/use-current-network)     | Current network                          |
| [`useCurrentClient`](/dapp-kit/react/hooks/use-current-client)       | SuiClient for current network            |
| [`useWallets`](/dapp-kit/react/hooks/use-wallets)                    | List of available wallets                |

## Components

| Component                                                    | Description                       |
| ------------------------------------------------------------ | --------------------------------- |
| [`ConnectButton`](/dapp-kit/react/components/connect-button) | Complete wallet connection UI     |
| [`ConnectModal`](/dapp-kit/react/components/connect-modal)   | Standalone wallet selection modal |
| [`DAppKitProvider`](/dapp-kit/react/dapp-kit-provider)       | Context provider for hooks        |

## Example application

See the complete
[React example](https://github.com/MystenLabs/ts-sdks/tree/main/packages/dapp-kit-next/examples/react/simple)
on GitHub.

## Next steps

* [`DAppKitProvider`](/dapp-kit/react/dapp-kit-provider) - Provider configuration
* [Hooks Reference](/dapp-kit/react/hooks) - All available hooks
* [Components](/dapp-kit/react/components) - UI components
* [Theming](/dapp-kit/theming) - Customize appearance