Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ckb-devrel/ccc/llms.txt

Use this file to discover all available pages before exploring further.

Want to skip the setup? Try CCC directly in the playground — no installation required.
1

Create a new app

The fastest way to start is with create-ccc-app, which scaffolds a new CCC-based application with your preferred framework:
npx create-ccc-app@latest my-ccc-app
Follow the prompts to select your framework template.
2

Or install manually

If you’re adding CCC to an existing React project, install the connector package directly:
npm install @ckb-ccc/connector-react
3

Add the Provider to your app

Wrap your application with ccc.Provider. This mounts the wallet connector UI and makes the CCC context available to all child components.
If you’re using React Server Components, add "use client" at the top of any file that uses ccc.Provider.
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>
  );
}
The Provider accepts these props:
PropTypeDescription
namestringYour app’s name, shown in the connector UI.
iconstringURL to your app’s icon.
signerFilterfunctionFilter which wallets are shown.
defaultClientccc.ClientOverride the default CKB client (testnet by default).
preferredNetworksccc.NetworkPreference[]Preferred networks for wallet connections.
4

Connect a wallet with useCcc

Use the useCcc hook inside any component wrapped by ccc.Provider to open the connector and get the active 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>;
}
useCcc returns:
ValueTypeDescription
open() => voidOpens the wallet connector modal.
close() => voidCloses the connector modal.
disconnect() => voidDisconnects the active wallet.
walletccc.Wallet | undefinedThe connected wallet, if any.
signerInfoccc.SignerInfo | undefinedThe active signer info, if connected.
clientccc.ClientThe active CKB client.
5

Compose and send a transaction

Once connected, you can compose and send a transaction. CCC fills in the inputs and calculates the fee automatically:
transfer.ts
import { ccc } from "@ckb-ccc/connector-react";

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

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

  // CCC fills in inputs to cover the outputs
  await tx.completeInputsByCapacity(signer);

  // CCC calculates and adds the transaction fee
  await tx.completeFeeBy(signer);

  // Send the transaction
  const txHash = await signer.sendTransaction(tx);
  console.log("Transaction sent:", txHash);

  return txHash;
}
The three key steps are:
  1. completeInputsByCapacity(signer) — finds and adds input cells to cover your outputs.
  2. completeFeeBy(signer) — calculates the fee and adjusts inputs accordingly.
  3. signer.sendTransaction(tx) — signs and broadcasts the transaction, returning its hash.

​
What’s next

  • Read the Installation page for all package options and TypeScript configuration.
  • Explore the CCC Playground to run examples interactively in your browser.
  • See the full API reference for all available types and methods.

Build docs developers (and LLMs) love

Get started for freeTalk to us