@mysten/create-dapp

@mysten/create-dapp is a CLI tool that scaffolds a complete Sui dApp project with best practices built in.

Quick Start

npm create @mysten/dapp

The CLI prompts you to choose a template and project name, then creates a ready-to-run project.

Templates

react-client-dapp

A basic React dApp that demonstrates wallet connection and fetching owned objects:

• Wallet connection with ConnectButton
• Display connected wallet address
• List objects owned by the connected wallet
• Clean, modern UI with Tailwind CSS

react-e2e-counter

A complete end-to-end example with Move smart contract integration:

• Move counter contract in move/counter/
• TypeScript bindings generated with @mysten/codegen
• Create, increment, and reset counters
• MVR (Move Registry) name resolution for package IDs
• Full transaction signing and execution

Tech Stack

Both templates include:

• React - UI framework
• TypeScript - Type safety
• Vite - Fast build tooling
• Tailwind CSS v4 - Utility-first styling
• Lucide React - Modern icons
• @mysten/dapp-kit-react - Wallet connection and blockchain interaction
• pnpm - Package management

The e2e-counter template also includes:

• @mysten/codegen - Generate TypeScript from Move code

Project Structure

react-client-dapp

src/
├── components/ui/     # Reusable UI components (Card)
├── lib/utils.ts       # Utility functions
├── App.tsx            # Main application
├── WalletStatus.tsx   # Wallet connection display
├── OwnedObjects.tsx   # Object list component
├── dApp-kit.ts        # dApp Kit configuration
└── index.css          # Tailwind CSS theme

react-e2e-counter

src/
├── components/ui/     # UI components (Button, Card)
├── contracts/         # Generated TypeScript bindings
├── lib/utils.ts       # Utility functions
├── App.tsx            # Main application
├── Counter.tsx        # Counter display and controls
├── CreateCounter.tsx  # Counter creation
├── dApp-kit.ts        # dApp Kit configuration
├── constants.ts       # Package IDs per network
└── index.css          # Tailwind CSS theme
move/
└── counter/           # Move smart contract

Using the e2e-counter Template

1. Deploy the Move Contract

First, install the Sui CLI and set up testnet:

sui client new-env --alias testnet --rpc https://fullnode.testnet.sui.io:443
sui client switch --env testnet

Get testnet SUI from the faucet, then publish:

cd move
sui client publish --gas-budget 100000000 counter

2. Configure the Package ID

Copy the packageId from the publish output to src/constants.ts:

export const TESTNET_COUNTER_PACKAGE_ID = '<YOUR_PACKAGE_ID>';

3. Generate TypeScript Bindings

pnpm codegen

This generates type-safe functions in src/contracts/ for interacting with your Move modules.

4. Start Development

pnpm install
pnpm dev

Customizing the UI

The templates use Tailwind CSS v4 with shadcn/ui-style components. The UI components in src/components/ui/ can be customized or extended.

To add more components, copy them from the shadcn/ui components documentation and adapt them to your project.

Theme variables are defined in src/index.css using Tailwind's @theme directive.

CLI Options

You can skip prompts with command-line flags:

# Create with specific template
npm create @mysten/dapp -- -t react-e2e-counter

# Create with specific name
npm create @mysten/dapp -- -n my-app

# Create with both
npm create @mysten/dapp -- -t react-client-dapp -n my-app