> ## Documentation Index
> Fetch the complete documentation index at: https://ckbfans.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

> Choose the right CCC package for your environment and configure TypeScript for tree-shaking support.

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

## Packages

<CardGroup cols={2}>
  <Card title="@ckb-ccc/connector-react" icon="react">
    **React apps.** Includes the `Provider` component, `useCcc` and `useSigner` hooks, and the full built-in wallet connector UI.
  </Card>

  <Card title="@ckb-ccc/shell" icon="terminal">
    **Node.js scripts and backend services.** No browser APIs required. Use this for data analysis, transaction automation, or any server-side CKB work.
  </Card>

  <Card title="@ckb-ccc/connector" icon="puzzle">
    **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.
  </Card>

  <Card title="@ckb-ccc/ccc" icon="sliders">
    **Custom UI.** All CKB primitives without any connector UI. Use this when you want to build your own wallet connection flow from scratch.
  </Card>
</CardGroup>

## Install

<CodeGroup>
  ```bash @ckb-ccc/connector-react (npm) theme={null}
  npm install @ckb-ccc/connector-react
  ```

  ```bash @ckb-ccc/connector-react (yarn) theme={null}
  yarn add @ckb-ccc/connector-react
  ```

  ```bash @ckb-ccc/connector-react (pnpm) theme={null}
  pnpm add @ckb-ccc/connector-react
  ```
</CodeGroup>

<CodeGroup>
  ```bash @ckb-ccc/shell (npm) theme={null}
  npm install @ckb-ccc/shell
  ```

  ```bash @ckb-ccc/shell (yarn) theme={null}
  yarn add @ckb-ccc/shell
  ```

  ```bash @ckb-ccc/shell (pnpm) theme={null}
  pnpm add @ckb-ccc/shell
  ```
</CodeGroup>

<CodeGroup>
  ```bash @ckb-ccc/connector (npm) theme={null}
  npm install @ckb-ccc/connector
  ```

  ```bash @ckb-ccc/connector (yarn) theme={null}
  yarn add @ckb-ccc/connector
  ```

  ```bash @ckb-ccc/connector (pnpm) theme={null}
  pnpm add @ckb-ccc/connector
  ```
</CodeGroup>

<CodeGroup>
  ```bash @ckb-ccc/ccc (npm) theme={null}
  npm install @ckb-ccc/ccc
  ```

  ```bash @ckb-ccc/ccc (yarn) theme={null}
  yarn add @ckb-ccc/ccc
  ```

  ```bash @ckb-ccc/ccc (pnpm) theme={null}
  pnpm add @ckb-ccc/ccc
  ```
</CodeGroup>

## Import pattern

All exports are available on the `ccc` namespace object. This gives you a single, predictable import and clean autocompletion:

```typescript theme={null}
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:

```typescript theme={null}
import { cccA } from "@ckb-ccc/connector-react/advanced";
```

<Warning>
  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.
</Warning>

## TypeScript configuration

CCC uses [Package Entry Points](https://nodejs.org/api/packages.html#packages_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)

```json tsconfig.json theme={null}
{
  "compilerOptions": {
    "moduleResolution": "bundler"
  }
}
```

Do not disable `resolvePackageJsonExports` — this option enables TypeScript to follow the `exports` field.

<Warning>
  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.
</Warning>

<Tip>
  Read the [TypeScript module resolution reference](https://www.typescriptlang.org/docs/handbook/modules/reference.html#packagejson-exports) to learn more about how `package.json` exports interact with different `moduleResolution` settings.
</Tip>

## 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:

```tsx app.tsx theme={null}
"use client";

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

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