Skip to main content
CCC is split into focused packages so you only ship what you need. Pick the one that matches your environment.

​
Packages

@ckb-ccc/connector-react

React apps. Includes the Provider component, useCcc and useSigner hooks, and the full built-in wallet connector UI.

@ckb-ccc/shell

Node.js scripts and backend services. No browser APIs required. Use this for data analysis, transaction automation, or any server-side CKB work.

@ckb-ccc/connector

Web Component. A framework-agnostic wallet connector built as a custom HTML element. Use it in Vue, Svelte, vanilla JS, or any other web environment.

@ckb-ccc/ccc

Custom UI. All CKB primitives without any connector UI. Use this when you want to build your own wallet connection flow from scratch.

​
Install

npm install @ckb-ccc/connector-react

npm install @ckb-ccc/shell

npm install @ckb-ccc/connector

npm install @ckb-ccc/ccc

​
Import pattern

All exports are available on the ccc namespace object. This gives you a single, predictable import and clean autocompletion: 
import { ccc } from "@ckb-ccc/connector-react"; // React
import { ccc } from "@ckb-ccc/shell";            // Node.js
import { ccc } from "@ckb-ccc/connector";        // Web Component
import { ccc } from "@ckb-ccc/ccc";             // Custom UI
Replace <package-name> with whichever package you installed. The shape of the ccc object is the same across all packages.

​
Advanced entry point

For advanced use cases where you need internal interfaces not exposed on ccc, each package also exports a cccA namespace from the /advanced entry point: 
import { cccA } from "@ckb-ccc/connector-react/advanced";
The cccA interfaces are not stable and may change between minor releases. Prefer the standard ccc import unless you have a specific reason to use advanced internals.

​
TypeScript configuration

CCC uses Package Entry Points (exports field in package.json) to enable tree-shaking. TypeScript must be configured to resolve these exports. Set moduleResolution in your tsconfig.json to one of:
  • node16
  • nodenext
  • bundler (recommended for most modern setups)
tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "bundler"
  }
}
Do not disable resolvePackageJsonExports — this option enables TypeScript to follow the exports field.
If moduleResolution is set to node or classic, you will see TypeScript errors like Property '*' does not exist on type 'typeof import(".../@ckb-ccc/connector-react/dist/barrel")'. Update moduleResolution to fix this.
Read the TypeScript module resolution reference to learn more about how package.json exports interact with different moduleResolution settings.

​
React Server Components

If you use React Server Components (for example, with Next.js App Router), the CCC connector UI can only run on the client side. Add "use client" at the top of any file that renders ccc.Provider or uses CCC hooks:
app.tsx
"use client";

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

export function App() {
  return (
    <ccc.Provider>
      <YourApp />
    </ccc.Provider>
  );
}