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.
CCC ships as several packages. Choose 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 |
React
Node.js / Backend
Web Component
Custom UI
Install the React connector package:npm install @ckb-ccc/connector-react
ccc.Provider:If you’re using React Server Components (Next.js App Router, etc.), add "use client" at the top of any file that uses ccc.Provider or ccc.useCcc.
"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>
);
}
ccc.useCcc():"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>
);
}
Install the shell package for use in Node.js scripts, backends, or CLI tools:npm install @ckb-ccc/shell
@ckb-ccc/shell re-exports everything from @ckb-ccc/core (addresses, bytes, client, transactions, signers, and more) along with higher-level modules including spore, ssri, and udt.import { ccc } from "@ckb-ccc/shell";
const client = new ccc.ClientPublicTestnet();
const signer = new ccc.SignerCkbPrivateKey(client, process.env.PRIVATE_KEY!);
const address = await signer.getRecommendedAddress();
console.log("Address:", address);
Install the connector package for use in any framework or plain HTML via the <ccc-connector> Web Component:npm install @ckb-ccc/connector
import { ccc } from "@ckb-ccc/connector";
// The web component is registered automatically on import.
// Use <ccc-connector> in your HTML.
<ccc-connector></ccc-connector>
Install @ckb-ccc/ccc if you want to manage signers manually and build your own wallet connection UI. This package includes all wallet integrations (EVM via EIP-6963, JoyID, Nostr via NIP-07, OKX, UniSat, UTXO Global, Xverse, and more):import { ccc } from "@ckb-ccc/ccc";
const controller = new ccc.SignersController();
// Discover and manage signers manually
Import patterns
All CCC exports are available on the ccc object, which makes IDE autocompletion predictable regardless of which package you use:
import { ccc } from "@ckb-ccc/<package-name>";
const tx = ccc.Transaction.from({ ... });
const amount = ccc.fixedPointFrom("100");
/advanced entry point exports cccA, which contains lower-level internals:
import { cccA } from "@ckb-ccc/<package-name>/advanced";
APIs exported via cccA (the /advanced entry point) are not stable and may change between versions without notice. Use them only when you need capabilities not available through the ccc object.
TypeScript configuration
CCC uses the Node.js Package Entry Points feature for tree-shaking. Your tsconfig.json must set moduleResolution to node16, nodenext, or bundler, and must not disable resolvePackageJsonExports:
{
"compilerOptions": {
"moduleResolution": "bundler"
}
}
Property '*' does not exist on type 'typeof import(".../@ckb-ccc/...")', check that your moduleResolution is set correctly. See the TypeScript module resolution guide for details.