Quick Start

Bootstrap a new CKB app with create-ccc-app or add CCC to an existing project and send your first transaction.

Get a working CKB application running in a few minutes. You can either scaffold a new project with create-ccc-app or add CCC manually to an existing project.

Option 1: Bootstrap with create-ccc-app

create-ccc-app scaffolds a new CCC project with your chosen framework template, pre-configured with the right packages, TypeScript settings, and a working example.

npx

npx create-ccc-app@latest my-ccc-app

Follow the prompts to select a framework template, then open the generated project.

Option 2: Manual setup

If you are adding CCC to an existing project, follow these steps.

1. Install the package

   Install the package that matches your environment. For a React app:

   npm

   npm install @ckb-ccc/connector-react
   

   See Installation for the full list of packages and when to use each one.

2. Check your tsconfig.json

   CCC uses Package Entry Points for tree-shaking. Make sure moduleResolution in your tsconfig.json is set to node16, nodenext, or bundler:

   tsconfig.json

   {
     "compilerOptions": {
       "moduleResolution": "bundler"
     }
   }
   

   If moduleResolution is set to node or classic, TypeScript will report errors like Property '*' does not exist on type 'typeof import(...)'.

3. Wrap your app with Provider

   ccc.Provider manages wallet state and renders the connector UI. Add it at the root of your React application:

   app.tsx

   import { ccc } from "@ckb-ccc/connector-react";
   
   export function App() {
     return (
       <ccc.Provider>
         <YourApp />
       </ccc.Provider>
     );
   }
   

   If you use React Server Components (e.g. Next.js App Router), add "use client" at the top of any file that imports or renders ccc.Provider.

4. Connect a wallet

   Use the useCcc hook to open the wallet selector and read the connected signer:

   wallet-button.tsx

   import { ccc } from "@ckb-ccc/connector-react";
   
   export function WalletButton() {
     const { open, disconnect, wallet } = ccc.useCcc();
   
     if (wallet) {
       return (
         <button onClick={disconnect}>
           Disconnect {wallet.name}
         </button>
       );
     }
   
     return <button onClick={open}>Connect Wallet</button>;
   }
   

   Calling open() displays the built-in wallet selector. CCC automatically detects available wallets in the user’s browser.

5. Send CKB

   Use the useSigner hook to get the active signer, then compose and broadcast a transaction:

   send-ckb.tsx

   import { ccc } from "@ckb-ccc/connector-react";
   
   export function SendCkb() {
     const signer = ccc.useSigner();
   
     async function send() {
       if (!signer) return;
   
       // Resolve the receiver address to a lock script
       const { script: toLock } = await ccc.Address.fromString(
         "ckb1qzda0cr08m85hc8jlnfp3sog62cg63aw0mqdne8u7zxh33kfyqnysq...",
         signer.client,
       );
   
       // Describe the transaction outputs
       const tx = ccc.Transaction.from({
         outputs: [{ lock: toLock, capacity: ccc.fixedPointFrom("100") }],
       });
   
       // Complete inputs and pay the fee automatically
       await tx.completeInputsByCapacity(signer);
       await tx.completeFeeBy(signer);
   
       const txHash = await signer.sendTransaction(tx);
       console.log("Sent:", txHash);
     }
   
     return <button onClick={send}>Send 100 CKB</button>;
   }
   

   ccc.fixedPointFrom("100") converts a human-readable CKB amount to the on-chain unit (Shannon, where 1 CKB = 10⁸ Shannon). completeInputsByCapacity and completeFeeBy automatically select inputs and calculate fees — you only need to describe what you want in the outputs.

Next steps

Installation

Learn about all available packages and advanced import options.

Connect wallets

Customize the wallet connector and filter supported wallets.

Send CKB

Dive deeper into transaction composition and fee handling.

Playground

Experiment with CCC live in your browser — no install needed.