The Core Packages are the backbone of CCC. They provide the CKB primitives every higher-level package depends on, plus the aggregated entry points and connectors most applications consume directly.

<Callout type="info">
  Most projects only need **one** of these packages as their entry point. Pick by environment: `@ckb-ccc/shell` for Node.js, `@ckb-ccc/connector-react` for React apps, `@ckb-ccc/connector` for any other browser framework, or `@ckb-ccc/ccc` when you want every wallet bundled and plan to build a fully custom UI.
</Callout>

| Package                                                       | Environment     | Includes                                  | Use when                                             |
| ------------------------------------------------------------- | --------------- | ----------------------------------------- | ---------------------------------------------------- |
| [`@ckb-ccc/core`](./core-packages/core)                       | Any             | CKB primitives only                       | You're authoring a library or want minimal footprint |
| [`@ckb-ccc/shell`](./core-packages/shell)                     | Node.js         | core + spore + udt + ssri                 | Backend scripts, indexers, server-side transactions  |
| [`@ckb-ccc/ccc`](./core-packages/ccc)                         | Browser         | core + all wallet signers + protocol SDKs | Custom wallet UI in any browser app                  |
| [`@ckb-ccc/connector`](./core-packages/connector)             | Browser         | Web Component connector UI                | Vanilla JS / Vue / Svelte / Angular apps             |
| [`@ckb-ccc/connector-react`](./core-packages/connector-react) | Browser (React) | `Provider`, `useCcc`, `useSigner`         | React or Next.js apps                                |

## Layering [#layering]

<Mermaid
  chart="graph TB
    subgraph &#x22;UI Layer&#x22;
        ConnectorReact[&#x22;@ckb-ccc/connector-react<br/>React Hooks, Provider&#x22;]
        Connector[&#x22;@ckb-ccc/connector<br/>Web Components&#x22;]
    end
    
    subgraph &#x22;Aggregated Entry Points&#x22;
        CCC[&#x22;@ckb-ccc/ccc<br/>Browser Bundle&#x22;]
        Shell[&#x22;@ckb-ccc/shell<br/>Node.js Bundle&#x22;]
    end
    
    subgraph &#x22;Core Primitives&#x22;
        Core[&#x22;@ckb-ccc/core<br/>Transaction, Client, Signer&#x22;]
    end
    
    ConnectorReact --> Connector
    Connector --> CCC
    Shell --> Core
    CCC --> Core"
/>

Every package re-exports its dependencies on the same `ccc` namespace, so application code only ever imports from a single entry point:

```typescript
import { ccc } from "@ckb-ccc/connector-react"; // or shell / ccc / core
```

## Choosing an entry point [#choosing-an-entry-point]

* **Building a React dApp?** Start with [`@ckb-ccc/connector-react`](./core-packages/connector-react) — it gives you a ready-made wallet selection modal plus hooks.
* **Building with another browser framework?** Use [`@ckb-ccc/connector`](./core-packages/connector) and drop the `<ccc-connector>` Web Component into your page.
* **Need a custom wallet UI?** Use [`@ckb-ccc/ccc`](./core-packages/ccc) for full control over connection flow.
* **Running in Node.js?** Use [`@ckb-ccc/shell`](./core-packages/shell) — it ships CommonJS / ESM builds without browser-only wallet code.
* **Authoring a library?** Depend on [`@ckb-ccc/core`](./core-packages/core) only and let consumers pick their own entry point.


---

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