Quick start

Skip the setup

Try CCC directly in the Playground — run examples in your browser with no installation required.

The fastest way to get started is with create-ccc-app. It scaffolds a new project with your preferred framework in one command:

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

yarn create ccc-app my-ccc-app

pnpm create ccc-app my-ccc-app

Follow the prompts to pick a framework template, then open the project directory.

Already have a React app? Install the connector package directly:

npm install @ckb-ccc/connector-react

yarn add @ckb-ccc/connector-react

pnpm add @ckb-ccc/connector-react

Using Node.js or a different framework? See the Installation guide for all available packages.

Add ccc.Provider at the root of your app. It mounts the wallet connector UI and makes the CCC context available to all child components.

React Server Components

Add "use client" at the top of any file that uses ccc.Provider.

Network default

ccc.Provider connects to testnet by default. Pass a defaultClient prop to switch to mainnet before going to production.

app.tsx

"use client";
import { ccc } from "@ckb-ccc/connector-react";

export default function App({ children }: { children: React.ReactNode }) {
  return (
    <ccc.Provider
      name="My CKB App"
      icon="/icon.png"
    >
      {children}
    </ccc.Provider>
  );
}

Prop	Type	Description
`name`	`string`	Your app's name, shown in the connector UI.
`icon`	`string`	URL to your app's icon.
`signerFilter`	`function`	Filter which wallets are available to the user.
`defaultClient`	`ccc.Client`	Override the default CKB client (testnet by default).
`preferredNetworks`	`ccc.NetworkPreference[]`	Preferred networks for wallet connections.

Use the useCcc hook inside any component to open the wallet modal and access the connected signer:

component.tsx

"use client";
import { ccc } from "@ckb-ccc/connector-react";

export function ConnectButton() {
  const { open, wallet, signerInfo, disconnect } = ccc.useCcc();

  if (signerInfo) {
    return (
      <div>
        <p>Connected: {wallet?.name}</p>
        <button onClick={disconnect}>Disconnect</button>
      </div>
    );
  }

  return <button onClick={open}>Connect wallet</button>;
}

Value	Type	Description
`open`	`() => void`	Opens the wallet connector modal.
`close`	`() => void`	Closes the connector modal.
`disconnect`	`() => void`	Disconnects the active wallet.
`wallet`	`ccc.Wallet \| undefined`	The connected wallet object, if any.
`signerInfo`	`ccc.SignerInfo \| undefined`	The active signer info, if connected.
`client`	`ccc.Client`	The active CKB client.

With a signer in hand, you're ready to send CKB. Describe what you want in the output — CCC handles input selection and fee calculation:

transfer.ts

import { ccc } from "@ckb-ccc/connector-react";

async function transfer(signer: ccc.Signer, toAddress: string, amount: string) {
  // Resolve the recipient's lock script from their address
  const { script: toLock } = await ccc.Address.fromString(
    toAddress,
    signer.client,
  );

  // Declare what the transaction should produce
  const tx = ccc.Transaction.from({
    outputs: [{ lock: toLock, capacity: ccc.fixedPointFrom(amount) }],
  });

  // CCC selects input cells to cover the outputs
  await tx.completeInputsByCapacity(signer);

  // CCC calculates the fee and adjusts the change output
  await tx.completeFeeBy(signer);

  // Sign and broadcast — returns the transaction hash
  const txHash = await signer.sendTransaction(tx);
  console.log("Transaction sent:", txHash);
  return txHash;
}

Three calls do all the heavy lifting:

completeInputsByCapacity(signer) — finds input cells that cover your outputs.
completeFeeBy(signer) — calculates the fee and adjusts inputs accordingly.
signer.sendTransaction(tx) — signs and broadcasts the transaction, returning its hash.

What's next

Explore the Core Concepts to understand the building blocks behind every CKB app.
Check the Installation guide for all package options and TypeScript configuration.
Open the CCC Playground to experiment with live examples in your browser.
Browse the API Reference for the full list of available types and methods.

Quick start

What's next

On this page