Installation

Install CCC for your environment — React frontend, Node.js backend, or custom UI.

Not sure where to start? The Quick start guide walks through a full React setup from scratch. Come back here when you need a specific package or TypeScript configuration details.

CCC ships as several focused packages. Pick the one that matches your environment:

Package	Use case
`@ckb-ccc/connector-react`	React applications
`@ckb-ccc/shell`	Node.js scripts and backends
`@ckb-ccc/connector`	Web Component (framework-agnostic)
`@ckb-ccc/ccc`	Custom UI, manual signer management

npm install @ckb-ccc/connector-react

Wrap your app root with ccc.Provider to mount the wallet connector UI and make the CCC context available everywhere:

Using Next.js App Router or another RSC setup? Add "use client" at the top of any file that imports ccc.Provider or ccc.useCcc.

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>
  );
}

Then call ccc.useCcc() from any child component to open the connector and access the active signer:

component.tsx

"use client";

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

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

  return signerInfo ? (
    <p>Connected: {wallet?.name}</p>
  ) : (
    <button onClick={open}>Connect wallet</button>
  );
}

Import patterns

Every CCC package exposes the same ccc namespace, so your import looks identical regardless of which package you're using:

import { ccc } from "@ckb-ccc/<package-name>";

const tx = ccc.Transaction.from({ ... });
const amount = ccc.fixedPointFrom("100");

For lower-level internals, the /advanced entry point exports cccA:

import { cccA } from "@ckb-ccc/<package-name>/advanced";

cccA APIs are unstable and may change between versions without notice. Only reach for them when ccc doesn't cover your use case.

TypeScript configuration

CCC uses Package Entry Points for tree-shaking. Set moduleResolution to node16, nodenext, or bundler in your tsconfig.json, and don't disable resolvePackageJsonExports:

tsconfig.json

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

If you see Property '*' does not exist on type 'typeof import(".../@ckb-ccc/...")', your moduleResolution is likely misconfigured. See the TypeScript module resolution docs for details.

Installation

Import patterns

TypeScript configuration

On this page